@layer components {
  /* A single product handbook: compact navigation, readable reference text. */
  .docs-shell {
    display: grid;
    grid-template-columns: var(--tk-size-212) minmax(0, var(--tk-size-760));
    justify-content: center;
    gap: var(--tk-space-64);
    padding-top: var(--tk-space-56);
    padding-bottom: var(--tk-space-96);
    align-items: start;
  }
  .docs-sidebar {
    position: sticky;
    top: var(--tk-size-112);
    max-height: calc(var(--tk-relative-100-vh) - var(--tk-size-136));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-x: none;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
  }
  .docs-contents {
    border: 0;
  }
  .docs-contents > summary {
    display: none;
  }
  .docs-nav-group {
    margin-bottom: var(--tk-space-24);
  }
  .docs-nav-group > span {
    display: block;
    font-size: var(--tk-type-label);
    letter-spacing: var(--tk-tracking-wide);
    font-weight: var(--tk-weight-bold);
    color: var(--navy);
    padding: var(--tk-space-0) var(--tk-space-12);
    margin-bottom: var(--tk-space-8);
  }
  .docs-nav-group > a {
    display: block;
    padding: var(--tk-space-8) var(--tk-space-12);
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    color: #596476;
    border-left: var(--tk-size-1) solid #dce0e7;
    transition:
      background 0.15s,
      color 0.15s;
  }
  .docs-nav-group > a:hover {
    color: var(--navy);
    background: #f6f3fa;
  }
  .docs-nav-group > a[aria-current='location'] {
    color: #634194;
    border-left: var(--tk-size-2) solid #7951ac;
    background: #f4eff9;
    font-weight: var(--tk-weight-bold);
    padding-left: var(--tk-space-12);
  }
  .docs-article {
    min-width: 0;
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
    color: #445067;
  }
  .docs-title {
    border-bottom: var(--tk-size-1) solid var(--line);
    padding-bottom: var(--tk-space-28);
    margin-bottom: var(--tk-space-32);
  }
  .docs-title .eyebrow {
    font-size: var(--tk-type-label);
    margin-bottom: var(--tk-space-12);
  }
  .docs-title h1 {
    font-size: var(--tk-type-heading-sm);
    letter-spacing: var(--tk-tracking-tight);
    line-height: var(--tk-leading-heading);
    color: var(--navy);
    margin: var(--tk-space-0) var(--tk-space-0) var(--tk-space-12);
  }
  .docs-title > p:not(.eyebrow) {
    font-size: var(--tk-type-label);
    color: #596476;
  }
  .docs-text-actions {
    display: flex;
    align-items: center;
    gap: var(--tk-space-24);
    margin-top: var(--tk-space-16);
  }
  .docs-text-actions > a,
  .docs-text-actions > button {
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-bold);
    color: #5d3a8c;
    min-height: var(--tk-size-36);
    display: inline-flex;
    align-items: center;
    gap: var(--tk-space-8);
  }
  .docs-text-actions > button {
    padding: var(--tk-space-0);
    border: 0;
    background: transparent;
  }
  .docs-text-actions > a:hover,
  .docs-text-actions > button:hover {
    text-decoration: underline;
    text-underline-offset: var(--tk-size-4);
  }
  .docs-section {
    scroll-margin-top: var(--tk-space-112);
    margin-bottom: var(--tk-space-48);
    outline: none;
  }
  .docs-section:last-child {
    margin-bottom: var(--tk-space-0);
  }
  .docs-section h2 {
    font-size: var(--tk-type-lead);
    font-weight: var(--tk-weight-bold);
    line-height: var(--tk-leading-heading);
    letter-spacing: var(--tk-tracking-tight);
    color: var(--navy);
    margin: var(--tk-space-0) var(--tk-space-0) var(--tk-space-20);
  }
  .docs-section h2 > a {
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: var(--tk-space-12);
  }
  .docs-section h2 > a > span {
    opacity: 0;
    color: #7850a7;
    font-size: var(--tk-type-body);
    font-weight: var(--tk-weight-regular);
  }
  .docs-section h2 > a:hover > span,
  .docs-section h2 > a:focus-visible > span {
    opacity: 1;
  }
  .docs-section h3 {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    letter-spacing: var(--tk-tracking-tight);
    color: var(--navy);
    margin: var(--tk-space-28) var(--tk-space-0) var(--tk-space-12);
  }
  .docs-section p {
    margin: var(--tk-space-0) var(--tk-space-0) var(--tk-space-16);
  }
  .docs-section a:not(.button) {
    color: #644292;
    text-decoration: underline;
    text-underline-offset: var(--tk-size-3);
  }
  .docs-section h2 > a {
    text-decoration: none !important;
    color: var(--navy) !important;
  }
  .docs-section ul,
  .docs-section ol {
    padding-left: var(--tk-space-24);
    margin: var(--tk-space-16) var(--tk-space-0) var(--tk-space-20);
  }
  .docs-section li {
    padding-left: var(--tk-space-4);
    margin-bottom: var(--tk-space-8);
  }
  .docs-section code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: var(--tk-type-label);
    overflow-wrap: anywhere;
    background: #f1eef6;
    padding: var(--tk-space-4) var(--tk-space-4);
    border-radius: var(--tk-size-3);
    color: #563e75;
  }
  .docs-section pre {
    margin: var(--tk-space-20) var(--tk-space-0) var(--tk-space-24);
    padding: var(--tk-space-24) var(--tk-space-24);
    background: #f5f4f7;
    border: var(--tk-size-1) solid #e7e3eb;
    border-radius: var(--tk-size-4);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
  }
  .docs-section pre code {
    padding: var(--tk-space-0);
    background: transparent;
    border: 0;
    font-size: inherit;
    color: #28344c;
  }
  .docs-prompt {
    padding: var(--tk-space-24) var(--tk-space-24);
    margin: var(--tk-space-20) var(--tk-space-0);
    background: #fbf2e9;
    border: var(--tk-size-1) solid #eadcd0;
    border-radius: var(--tk-size-4);
  }
  .docs-prompt p {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
    color: #263249;
    overflow-wrap: anywhere;
    margin-bottom: var(--tk-space-20);
  }
  .docs-prompt .button {
    min-height: var(--tk-size-44);
    padding: var(--tk-space-12) var(--tk-space-16);
    font-size: var(--tk-type-label);
    gap: var(--tk-space-16);
  }
  .docs-definitions {
    margin: var(--tk-space-16) var(--tk-space-0);
  }
  .docs-definitions > div {
    padding: var(--tk-space-12) var(--tk-space-0);
    border-bottom: var(--tk-size-1) solid #e1e4ea;
    display: grid;
    grid-template-columns: var(--tk-size-156) minmax(0, 1fr);
    gap: var(--tk-space-24);
  }
  .docs-definitions dt {
    font-weight: var(--tk-weight-bold);
    color: var(--navy);
    font-size: var(--tk-type-label);
  }
  .docs-definitions dd {
    font-size: var(--tk-type-label);
    margin: var(--tk-space-0);
  }
  .docs-api > div {
    display: block;
  }
  .docs-api dt {
    margin-bottom: var(--tk-space-8);
  }
  .docs-note {
    padding: var(--tk-space-20) var(--tk-space-20);
    border-left: var(--tk-size-3) solid #9e7ac5;
    background: #f7f3fb;
    margin-top: var(--tk-space-24);
  }
  .docs-note > strong {
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-bold);
    color: #4c366c;
    display: block;
    margin-bottom: var(--tk-space-8);
  }
  .docs-note p {
    font-size: var(--tk-type-label);
    margin: var(--tk-space-0);
  }
  .docs-table {
    margin: var(--tk-space-24) var(--tk-space-0);
  }
  .docs-table table {
    width: var(--tk-relative-100-percent);
    border-collapse: collapse;
    font-size: var(--tk-type-label);
  }
  .docs-table caption {
    text-align: left;
    color: var(--navy);
    font-weight: var(--tk-weight-bold);
    margin-bottom: var(--tk-space-8);
  }
  .docs-table th {
    text-align: left;
    background: #f4f2f8;
    color: var(--navy);
    font-weight: var(--tk-weight-bold);
  }
  .docs-table th,
  .docs-table td {
    padding: var(--tk-space-12) var(--tk-space-12);
    border: var(--tk-size-1) solid #e0dce7;
    vertical-align: top;
  }
  .docs-table td:first-child {
    width: var(--tk-size-100);
  }
  .docs-table code {
    overflow-wrap: break-word;
  }
  .docs-resource-list {
    margin: var(--tk-space-20) var(--tk-space-0);
  }
  .docs-resource-list > a {
    display: flex;
    align-items: center;
    gap: var(--tk-space-20);
    padding: var(--tk-space-12) var(--tk-space-0);
    border-bottom: var(--tk-size-1) solid #e1e4ea;
    text-decoration: none !important;
    font-size: var(--tk-type-label);
  }
  .docs-resource-list > a > code {
    min-width: var(--tk-size-128);
    font-size: var(--tk-type-label);
  }
  .docs-resource-list > a > span:nth-child(2) {
    flex: 1;
    color: #596476;
  }
  .docs-resource-list > a:hover > span:nth-child(2) {
    color: #644292;
  }
  @media (max-width: 1100px) {
    .docs-shell {
      grid-template-columns: var(--tk-size-180) minmax(0, 1fr);
      gap: var(--tk-space-36);
    }
    .docs-title h1 {
      font-size: var(--tk-type-title);
    }
    .docs-definitions > div {
      grid-template-columns: var(--tk-size-136) minmax(0, 1fr);
      gap: var(--tk-space-16);
    }
  }
  @media (max-width: 1024px) {
    .docs-shell {
      display: block;
      padding-top: var(--tk-space-0);
      padding-bottom: var(--tk-space-64);
    }
    .docs-sidebar {
      position: sticky;
      top: var(--tk-size-68);
      z-index: 20;
      overflow: visible;
      max-height: none;
      background: #fff;
      margin-bottom: var(--tk-space-28);
      border-bottom: var(--tk-size-1) solid #dce0e7;
    }
    .docs-contents > summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: var(--tk-size-52);
      padding: var(--tk-space-12) var(--tk-space-0);
      list-style: none;
      font-size: var(--tk-type-label);
      font-weight: var(--tk-weight-bold);
      color: var(--navy);
      cursor: pointer;
    }
    .docs-contents > summary::-webkit-details-marker {
      display: none;
    }
    .docs-contents > summary > span {
      font-size: var(--tk-type-body);
      font-weight: var(--tk-weight-regular);
      line-height: var(--tk-leading-display);
    }
    .docs-contents[open] > summary > span {
      transform: rotate(45deg);
    }
    .docs-contents nav {
      max-height: var(--tk-relative-60-vh);
      overflow-x: hidden;
      overflow-y: auto;
      padding: var(--tk-space-8) var(--tk-space-0) var(--tk-space-16);
      overscroll-behavior-x: none;
      overscroll-behavior-y: contain;
    }
    .docs-nav-group > a {
      min-height: var(--tk-size-44);
      font-size: var(--tk-type-label);
      display: flex;
      align-items: center;
    }
    .docs-nav-group > span {
      font-size: var(--tk-type-label);
    }
    .docs-title h1 {
      font-size: var(--tk-type-title);
    }
    .docs-title > p:not(.eyebrow) {
      font-size: var(--tk-type-label);
    }
    .docs-section {
      scroll-margin-top: var(--tk-space-128);
      margin-bottom: var(--tk-space-40);
    }
    .docs-section h2 {
      font-size: var(--tk-type-lead);
    }
    .docs-article {
      font-size: var(--tk-type-label);
    }
    .docs-prompt {
      padding: var(--tk-space-20);
    }
    .docs-section pre {
      font-size: var(--tk-type-label);
      padding: var(--tk-space-20);
    }
    .docs-definitions > div {
      display: block;
      padding: var(--tk-space-16) var(--tk-space-0);
    }
    .docs-definitions dt {
      margin-bottom: var(--tk-space-8);
    }
    .docs-definitions dd {
      font-size: var(--tk-type-label);
    }
    .docs-table th,
    .docs-table td {
      padding: var(--tk-space-12) var(--tk-space-8);
    }
    .docs-note {
      padding: var(--tk-space-16) var(--tk-space-20);
    }
    .docs-resource-list > a {
      flex-wrap: wrap;
      gap: var(--tk-space-4) var(--tk-space-12);
    }
    .docs-resource-list > a > code {
      min-width: 0;
    }
    .docs-resource-list > a > span:nth-child(2) {
      flex-basis: var(--tk-relative-100-percent);
      order: 3;
      font-size: var(--tk-type-label);
    }
    .docs-resource-list > a > span:last-child {
      margin-left: auto;
    }
    .docs-text-actions {
      gap: var(--tk-space-20);
    }
  }
  @media (max-width: 640px) {
    /* Each table row becomes a block: the first cell names the row, and data-label names the other cells. */
    .docs-table table,
    .docs-table caption,
    .docs-table tbody,
    .docs-table tr,
    .docs-table td {
      display: block;
    }
    .docs-table thead {
      display: none;
    }
    .docs-table tbody {
      border-top: var(--tk-size-1) solid #e0dce7;
    }
    .docs-table tr {
      border-bottom: var(--tk-size-1) solid #e0dce7;
      padding: var(--tk-space-12) var(--tk-space-0);
    }
    .docs-table td {
      border: 0;
      padding: var(--tk-space-4) var(--tk-space-0);
    }
    .docs-table td:first-child {
      width: auto;
      font-weight: var(--tk-weight-bold);
      color: var(--navy);
    }
    .docs-table td[data-label]::before {
      content: attr(data-label) ': ';
      font-weight: var(--tk-weight-bold);
      color: var(--navy);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .docs-nav-group > a {
      transition: none;
    }
  }
  html:has(.docs-shell) {
    scroll-padding-top: var(--tk-space-0);
    scroll-behavior: auto;
  }
}