@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap);
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/* Common */

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

:root {
  --ifm-color-scheme: light;

  /* Colors. */
  --ifm-dark-value: 10%;
  --ifm-darker-value: 15%;
  --ifm-darkest-value: 30%;
  --ifm-light-value: 15%;
  --ifm-lighter-value: 30%;
  --ifm-lightest-value: 50%;

  /*
  This seems like a lot, but we want to ensure enough contrast.
  Goal is to have a min score of 3 on https://www.myndex.com/APCA/fullmatrix
  For fontWeight 400 + score 3, the cell must show a value < 16px (fontsize we use in places like alerts)
  See also https://github.com/facebookincubator/infima/issues/55#issuecomment-884023075
   */
  --ifm-contrast-background-value: 90%;
  --ifm-contrast-foreground-value: 70%;
  /* Using slightly different values for dark mode */
  --ifm-contrast-background-dark-value: 70%;
  --ifm-contrast-foreground-dark-value: 90%;

  --ifm-color-primary: #3578e5;
  --ifm-color-secondary: #ebedf0;
  --ifm-color-success: #00a400;
  --ifm-color-info: #54c7ec;
  --ifm-color-warning: #ffba00;
  --ifm-color-danger: #fa383e;
    --ifm-color-primary-dark: rgb(48, 108, 206);
    --ifm-color-primary-darker: rgb(45, 102, 195);
    --ifm-color-primary-darkest: rgb(37, 84, 160);
    --ifm-color-primary-light: rgb(83, 140, 233);
    --ifm-color-primary-lighter: rgb(114, 161, 237);
    --ifm-color-primary-lightest: rgb(154, 188, 242);
    --ifm-color-primary-contrast-background: rgb(235, 242, 252);
    --ifm-color-primary-contrast-foreground: rgb(16, 36, 69);
    --ifm-color-secondary-dark: rgb(212, 213, 216);
    --ifm-color-secondary-darker: rgb(200, 201, 204);
    --ifm-color-secondary-darkest: rgb(164, 166, 168);
    --ifm-color-secondary-light: rgb(238, 240, 242);
    --ifm-color-secondary-lighter: rgb(241, 242, 245);
    --ifm-color-secondary-lightest: rgb(245, 246, 248);
    --ifm-color-secondary-contrast-background: rgb(253, 253, 254);
    --ifm-color-secondary-contrast-foreground: rgb(71, 71, 72);
    --ifm-color-success-dark: rgb(0, 148, 0);
    --ifm-color-success-darker: rgb(0, 139, 0);
    --ifm-color-success-darkest: rgb(0, 115, 0);
    --ifm-color-success-light: rgb(38, 178, 38);
    --ifm-color-success-lighter: rgb(77, 191, 77);
    --ifm-color-success-lightest: rgb(128, 210, 128);
    --ifm-color-success-contrast-background: rgb(230, 246, 230);
    --ifm-color-success-contrast-foreground: rgb(0, 49, 0);
    --ifm-color-info-dark: rgb(76, 179, 212);
    --ifm-color-info-darker: rgb(71, 169, 201);
    --ifm-color-info-darkest: rgb(59, 139, 165);
    --ifm-color-info-light: rgb(110, 207, 239);
    --ifm-color-info-lighter: rgb(135, 216, 242);
    --ifm-color-info-lightest: rgb(170, 227, 246);
    --ifm-color-info-contrast-background: rgb(238, 249, 253);
    --ifm-color-info-contrast-foreground: rgb(25, 60, 71);
    --ifm-color-warning-dark: rgb(230, 167, 0);
    --ifm-color-warning-darker: rgb(217, 158, 0);
    --ifm-color-warning-darkest: rgb(179, 130, 0);
    --ifm-color-warning-light: rgb(255, 196, 38);
    --ifm-color-warning-lighter: rgb(255, 207, 77);
    --ifm-color-warning-lightest: rgb(255, 221, 128);
    --ifm-color-warning-contrast-background: rgb(255, 248, 230);
    --ifm-color-warning-contrast-foreground: rgb(77, 56, 0);
    --ifm-color-danger-dark: rgb(225, 50, 56);
    --ifm-color-danger-darker: rgb(213, 48, 53);
    --ifm-color-danger-darkest: rgb(175, 39, 43);
    --ifm-color-danger-light: rgb(251, 86, 91);
    --ifm-color-danger-lighter: rgb(251, 116, 120);
    --ifm-color-danger-lightest: rgb(253, 156, 159);
    --ifm-color-danger-contrast-background: rgb(255, 235, 236);
    --ifm-color-danger-contrast-foreground: rgb(75, 17, 19);

  --ifm-color-white: #fff;
  --ifm-color-black: #000;

  --ifm-color-gray-0: var(--ifm-color-white);
  --ifm-color-gray-100: #f5f6f7;
  --ifm-color-gray-200: #ebedf0;
  --ifm-color-gray-300: #dadde1;
  --ifm-color-gray-400: #ccd0d5;
  --ifm-color-gray-500: #bec3c9;
  --ifm-color-gray-600: #8d949e;
  --ifm-color-gray-700: #606770;
  --ifm-color-gray-800: #444950;
  --ifm-color-gray-900: #1c1e21;
  --ifm-color-gray-1000: var(--ifm-color-black);

  --ifm-color-emphasis-0: var(--ifm-color-gray-0);
  --ifm-color-emphasis-100: var(--ifm-color-gray-100);
  --ifm-color-emphasis-200: var(--ifm-color-gray-200);
  --ifm-color-emphasis-300: var(--ifm-color-gray-300);
  --ifm-color-emphasis-400: var(--ifm-color-gray-400);
  --ifm-color-emphasis-500: var(--ifm-color-gray-500);
  --ifm-color-emphasis-600: var(--ifm-color-gray-600);
  --ifm-color-emphasis-700: var(--ifm-color-gray-700);
  --ifm-color-emphasis-800: var(--ifm-color-gray-800);
  --ifm-color-emphasis-900: var(--ifm-color-gray-900);
  --ifm-color-emphasis-1000: var(--ifm-color-gray-1000);

  /* Base. */
  --ifm-color-content: var(--ifm-color-emphasis-900);
  --ifm-color-content-inverse: var(--ifm-color-emphasis-0);
  --ifm-color-content-secondary: #525860;

  --ifm-background-color: transparent; /* Body's background. */
  --ifm-background-surface-color: var(--ifm-color-content-inverse);
  --ifm-global-border-width: 1px;
  --ifm-global-radius: 0.4rem;

  --ifm-hover-overlay: rgba(0, 0, 0, 0.05);

  /* Typography. */
  --ifm-font-color-base: var(--ifm-color-content);
  --ifm-font-color-base-inverse: var(--ifm-color-content-inverse);
  --ifm-font-color-secondary: var(--ifm-color-content-secondary);
  --ifm-font-family-base: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont,
    'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol';
  --ifm-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  --ifm-font-size-base: 100%;

  --ifm-font-weight-light: 300;
  --ifm-font-weight-normal: 400;
  --ifm-font-weight-semibold: 500;
  --ifm-font-weight-bold: 700;

  --ifm-font-weight-base: var(--ifm-font-weight-normal);
  --ifm-line-height-base: 1.65;

  /* Spacing. */
  --ifm-global-spacing: 1rem;
  --ifm-spacing-vertical: var(--ifm-global-spacing);
  --ifm-spacing-horizontal: var(--ifm-global-spacing);

  /* Transitions. */
  --ifm-transition-fast: 200ms;
  --ifm-transition-slow: 400ms;
  --ifm-transition-timing-default: cubic-bezier(0.08, 0.52, 0.52, 1);

  /* Shadows. */
  --ifm-global-shadow-lw: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  --ifm-global-shadow-md: 0 5px 40px rgba(0, 0, 0, 0.2);
  --ifm-global-shadow-tl: 0 12px 28px 0 rgba(0, 0, 0, 0.2),
    0 2px 4px 0 rgba(0, 0, 0, 0.1);

  /* Z-index. */
  --ifm-z-index-dropdown: 100;
  --ifm-z-index-fixed: 200;
  --ifm-z-index-overlay: 400;
  --ifm-container-width: 1140px;
  --ifm-container-width-xl: 1320px;
  --ifm-code-background: rgb(246, 247, 248);
  --ifm-code-border-radius: var(--ifm-global-radius);
  --ifm-code-font-size: 90%;
  --ifm-code-padding-horizontal: 0.1rem;
  --ifm-code-padding-vertical: 0.1rem;

  --ifm-pre-background: var(--ifm-code-background);
  --ifm-pre-border-radius: var(--ifm-code-border-radius);
  --ifm-pre-color: inherit;
  --ifm-pre-line-height: 1.45;
  --ifm-pre-padding: 1rem;
  --ifm-heading-color: inherit;
  --ifm-heading-margin-top: 0;
  --ifm-heading-margin-bottom: var(--ifm-spacing-vertical);
  --ifm-heading-font-family: var(--ifm-font-family-base);
  --ifm-heading-font-weight: var(--ifm-font-weight-bold);
  --ifm-heading-line-height: 1.25;

  --ifm-h1-font-size: 2rem;
  --ifm-h2-font-size: 1.5rem;
  --ifm-h3-font-size: 1.25rem;
  --ifm-h4-font-size: 1rem;
  --ifm-h5-font-size: 0.875rem;
  --ifm-h6-font-size: 0.85rem;
  --ifm-image-alignment-padding: 1.25rem;
  /* Leading is the distance between two baselines */
  /* TODO: add appropriate mobile leading */
  --ifm-leading-desktop: 1.25;
  --ifm-leading: calc(var(--ifm-leading-desktop) * 1rem);
  --ifm-list-left-padding: 2rem;
  --ifm-list-margin: 1rem;
  --ifm-list-item-margin: 0.25rem;
  --ifm-list-paragraph-margin: 1rem;
  --ifm-table-cell-padding: 0.75rem;

  --ifm-table-background: transparent;
  --ifm-table-stripe-background: rgba(0, 0, 0, 0.03);

  --ifm-table-border-width: 1px;
  --ifm-table-border-color: var(--ifm-color-emphasis-300);

  --ifm-table-head-background: inherit;
  --ifm-table-head-color: inherit;
  --ifm-table-head-font-weight: var(--ifm-font-weight-bold);

  --ifm-table-cell-color: inherit;
  /* Links. */
  --ifm-link-color: var(--ifm-color-primary);
  --ifm-link-decoration: none;
  --ifm-link-hover-color: var(--ifm-link-color);
  --ifm-link-hover-decoration: underline;

  /* Paragraphs. */
  --ifm-paragraph-margin-bottom: var(--ifm-leading);

  /* Blockquotes. */
  --ifm-blockquote-font-size: var(--ifm-font-size-base);
  --ifm-blockquote-border-left-width: 2px;
  --ifm-blockquote-padding-horizontal: var(--ifm-spacing-horizontal);
  --ifm-blockquote-padding-vertical: 0;
  --ifm-blockquote-shadow: none;
  --ifm-blockquote-color: var(--ifm-color-emphasis-800);
  --ifm-blockquote-border-color: var(--ifm-color-emphasis-300);

  /* Horizontal Rules. */
  --ifm-hr-background-color: var(--ifm-color-emphasis-500);
  --ifm-hr-height: 1px;
  --ifm-hr-margin-vertical: 1.5rem;
  --ifm-scrollbar-size: 7px;
  --ifm-scrollbar-track-background-color: #f1f1f1;
  --ifm-scrollbar-thumb-background-color: #c0c0c0;
  --ifm-scrollbar-thumb-hover-background-color: #a7a7a7;
  --ifm-alert-background-color: inherit; /* Set a default which will be overridden later. */
  --ifm-alert-border-color: inherit; /* Set a default which will be overridden later. */
  --ifm-alert-border-radius: var(--ifm-global-radius);
  --ifm-alert-border-width: 0px; /* For users that want to easily add a border */
  --ifm-alert-border-left-width: 5px;
  --ifm-alert-color: var(--ifm-font-color-base);
  --ifm-alert-padding-horizontal: var(--ifm-spacing-horizontal);
  --ifm-alert-padding-vertical: var(--ifm-spacing-vertical);
  --ifm-alert-shadow: var(--ifm-global-shadow-lw);
  --ifm-avatar-intro-margin: 1rem;
  --ifm-avatar-intro-alignment: inherit;
  --ifm-avatar-photo-size: 3rem;
  --ifm-badge-background-color: inherit; /* Set a default which will be overridden later. */
  --ifm-badge-border-color: inherit; /* Set a default which will be overridden later. */
  --ifm-badge-border-radius: var(--ifm-global-radius);
  --ifm-badge-border-width: var(--ifm-global-border-width);
  --ifm-badge-color: var(--ifm-color-white);
  --ifm-badge-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 0.5);
  --ifm-badge-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.25);
  --ifm-breadcrumb-border-radius: 1.5rem;
  --ifm-breadcrumb-spacing: 0.5rem;
  --ifm-breadcrumb-color-active: var(--ifm-color-primary);
  --ifm-breadcrumb-item-background-active: var(--ifm-hover-overlay);
  --ifm-breadcrumb-padding-horizontal: 0.8rem;
  --ifm-breadcrumb-padding-vertical: 0.4rem;
  --ifm-breadcrumb-size-multiplier: 1;
  --ifm-breadcrumb-separator: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 256 256"><g><g><polygon points="79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>');
  --ifm-breadcrumb-separator-filter: none;
  --ifm-breadcrumb-separator-size: 0.5rem;
  --ifm-breadcrumb-separator-size-multiplier: 1.25;
  --ifm-button-background-color: inherit;
  --ifm-button-border-color: var(--ifm-button-background-color);
  --ifm-button-border-width: var(--ifm-global-border-width);
  --ifm-button-color: var(--ifm-font-color-base-inverse);
  --ifm-button-font-weight: var(--ifm-font-weight-bold);
  --ifm-button-padding-horizontal: 1.5rem;
  --ifm-button-padding-vertical: 0.375rem;
  --ifm-button-size-multiplier: 1;
  --ifm-button-transition-duration: var(--ifm-transition-fast);
  --ifm-button-border-radius: calc(
    var(--ifm-global-radius) * var(--ifm-button-size-multiplier)
  );
  --ifm-button-group-spacing: 2px;
  --ifm-card-background-color: var(--ifm-background-surface-color);
  --ifm-card-border-radius: calc(var(--ifm-global-radius) * 2);
  --ifm-card-horizontal-spacing: var(--ifm-global-spacing);
  --ifm-card-vertical-spacing: var(--ifm-global-spacing);
  --ifm-toc-border-color: var(--ifm-color-emphasis-300);
  --ifm-toc-link-color: var(--ifm-color-content-secondary);
  --ifm-toc-padding-vertical: 0.5rem;
  --ifm-toc-padding-horizontal: 0.5rem;
  --ifm-dropdown-background-color: var(--ifm-background-surface-color);
  --ifm-dropdown-font-weight: var(--ifm-font-weight-semibold);
  --ifm-dropdown-link-color: var(--ifm-font-color-base);
  --ifm-dropdown-hover-background-color: var(--ifm-hover-overlay);
  --ifm-footer-background-color: var(--ifm-color-emphasis-100);
  --ifm-footer-color: inherit;
  --ifm-footer-link-color: var(--ifm-color-emphasis-700);
  --ifm-footer-link-hover-color: var(--ifm-color-primary);
  --ifm-footer-link-horizontal-spacing: 0.5rem;
  --ifm-footer-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 2);
  --ifm-footer-padding-vertical: calc(var(--ifm-spacing-vertical) * 2);
  --ifm-footer-title-color: inherit;
  --ifm-footer-logo-max-width: min(30rem, 90vw);
  --ifm-hero-background-color: var(--ifm-background-surface-color);
  --ifm-hero-text-color: var(--ifm-color-emphasis-800);
  --ifm-menu-color: var(--ifm-color-emphasis-700);
  --ifm-menu-color-active: var(--ifm-color-primary);
  --ifm-menu-color-background-active: var(--ifm-hover-overlay);
  --ifm-menu-color-background-hover: var(--ifm-hover-overlay);
  --ifm-menu-link-padding-horizontal: 0.75rem;
  --ifm-menu-link-padding-vertical: 0.375rem;
  --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="rgba(0,0,0,0.5)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
  --ifm-menu-link-sublist-icon-filter: none;
  --ifm-navbar-background-color: var(--ifm-background-surface-color);
  --ifm-navbar-height: 3.75rem;
  --ifm-navbar-item-padding-horizontal: 0.75rem;
  --ifm-navbar-item-padding-vertical: 0.25rem;
  --ifm-navbar-link-color: var(--ifm-font-color-base);
  --ifm-navbar-link-hover-color: var(--ifm-color-primary);
  --ifm-navbar-link-active-color: var(--ifm-link-color);
  --ifm-navbar-padding-horizontal: var(--ifm-spacing-horizontal);
  --ifm-navbar-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.5);
  --ifm-navbar-shadow: var(--ifm-global-shadow-lw);
  --ifm-navbar-search-input-background-color: var(--ifm-color-emphasis-200);
  --ifm-navbar-search-input-color: var(--ifm-color-emphasis-800);
  --ifm-navbar-search-input-placeholder-color: var(--ifm-color-emphasis-500);
  --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');
  --ifm-navbar-sidebar-width: 83vw;
  --ifm-pagination-border-radius: var(--ifm-global-radius);
  --ifm-pagination-color-active: var(--ifm-color-primary);
  --ifm-pagination-font-size: 1rem;
  --ifm-pagination-item-active-background: var(--ifm-hover-overlay);
  --ifm-pagination-page-spacing: 0.2em;
  --ifm-pagination-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 1);
  --ifm-pagination-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.25);
  --ifm-pagination-nav-border-radius: var(--ifm-global-radius);
  --ifm-pagination-nav-color-hover: var(--ifm-color-primary);
  --ifm-pills-color-active: var(--ifm-color-primary);
  --ifm-pills-color-background-active: var(--ifm-hover-overlay);
  --ifm-pills-spacing: 0.125rem;
  --ifm-tabs-color: var(--ifm-font-color-secondary);
  --ifm-tabs-color-active: var(--ifm-color-primary);
  --ifm-tabs-color-active-border: var(--ifm-tabs-color-active);
  --ifm-tabs-padding-horizontal: 1rem;
  --ifm-tabs-padding-vertical: 1rem;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

* {
  box-sizing: border-box;
}

html {
  background-color: var(--ifm-background-color);
  color: var(--ifm-font-color-base);
  color-scheme: var(--ifm-color-scheme);
  font: var(--ifm-font-size-base) / var(--ifm-line-height-base)
    var(--ifm-font-family-base);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizelegibility;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

body {
  margin: 0;
  word-wrap: break-word;
}

iframe {
  border: 0;
  color-scheme: auto;
}

/* Layout */

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.container {
  margin: 0 auto;
  max-width: var(--ifm-container-width);
  padding: 0 var(--ifm-spacing-horizontal);
  width: 100%;
}

.container--fluid {
    max-width: inherit;
  }

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--ifm-spacing-horizontal) * -1);
}

.row--no-gutters {
    margin-left: 0;
    margin-right: 0;
  }

.row--no-gutters > .col {
      padding-left: 0;
      padding-right: 0;
    }

.row--align-top {
    align-items: flex-start;
  }

.row--align-bottom {
    align-items: flex-end;
  }

.row--align-center {
    align-items: center;
  }

.row--align-stretch {
    align-items: stretch;
  }

.row--align-baseline {
    align-items: baseline;
  }

.col {
  --ifm-col-width: 100%;

  flex: 1 0;
  margin-left: 0;
  max-width: var(--ifm-col-width);
  padding: 0 var(--ifm-spacing-horizontal);
  width: 100%;
}

.col[class*='col--'] {
    flex: 0 0 var(--ifm-col-width);
  }

.col--1 {
      --ifm-col-width: calc(1 / 12 * 100%);
    }

.col--offset-1 {
      margin-left: calc(1 / 12 * 100%);
    }

.col--2 {
      --ifm-col-width: calc(2 / 12 * 100%);
    }

.col--offset-2 {
      margin-left: calc(2 / 12 * 100%);
    }

.col--3 {
      --ifm-col-width: calc(3 / 12 * 100%);
    }

.col--offset-3 {
      margin-left: calc(3 / 12 * 100%);
    }

.col--4 {
      --ifm-col-width: calc(4 / 12 * 100%);
    }

.col--offset-4 {
      margin-left: calc(4 / 12 * 100%);
    }

.col--5 {
      --ifm-col-width: calc(5 / 12 * 100%);
    }

.col--offset-5 {
      margin-left: calc(5 / 12 * 100%);
    }

.col--6 {
      --ifm-col-width: calc(6 / 12 * 100%);
    }

.col--offset-6 {
      margin-left: calc(6 / 12 * 100%);
    }

.col--7 {
      --ifm-col-width: calc(7 / 12 * 100%);
    }

.col--offset-7 {
      margin-left: calc(7 / 12 * 100%);
    }

.col--8 {
      --ifm-col-width: calc(8 / 12 * 100%);
    }

.col--offset-8 {
      margin-left: calc(8 / 12 * 100%);
    }

.col--9 {
      --ifm-col-width: calc(9 / 12 * 100%);
    }

.col--offset-9 {
      margin-left: calc(9 / 12 * 100%);
    }

.col--10 {
      --ifm-col-width: calc(10 / 12 * 100%);
    }

.col--offset-10 {
      margin-left: calc(10 / 12 * 100%);
    }

.col--11 {
      --ifm-col-width: calc(11 / 12 * 100%);
    }

.col--offset-11 {
      margin-left: calc(11 / 12 * 100%);
    }

.col--12 {
      --ifm-col-width: calc(12 / 12 * 100%);
    }

.col--offset-12 {
      margin-left: calc(12 / 12 * 100%);
    }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.margin--none {
      margin: 0 !important;
    }

.margin-top--none {
        margin-top: 0 !important;
      }

.margin-left--none {
        margin-left: 0 !important;
      }

.margin-bottom--none {
        margin-bottom: 0 !important;
      }

.margin-right--none {
        margin-right: 0 !important;
      }

.margin-vert--none {
      margin-bottom: 0 !important;
      margin-top: 0 !important;
    }

.margin-horiz--none {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

.margin--xs {
      margin: 0.25rem !important;
    }

.margin-top--xs {
        margin-top: 0.25rem !important;
      }

.margin-left--xs {
        margin-left: 0.25rem !important;
      }

.margin-bottom--xs {
        margin-bottom: 0.25rem !important;
      }

.margin-right--xs {
        margin-right: 0.25rem !important;
      }

.margin-vert--xs {
      margin-bottom: 0.25rem !important;
      margin-top: 0.25rem !important;
    }

.margin-horiz--xs {
      margin-left: 0.25rem !important;
      margin-right: 0.25rem !important;
    }

.margin--sm {
      margin: 0.5rem !important;
    }

.margin-top--sm {
        margin-top: 0.5rem !important;
      }

.margin-left--sm {
        margin-left: 0.5rem !important;
      }

.margin-bottom--sm {
        margin-bottom: 0.5rem !important;
      }

.margin-right--sm {
        margin-right: 0.5rem !important;
      }

.margin-vert--sm {
      margin-bottom: 0.5rem !important;
      margin-top: 0.5rem !important;
    }

.margin-horiz--sm {
      margin-left: 0.5rem !important;
      margin-right: 0.5rem !important;
    }

.margin--md {
      margin: 1rem !important;
    }

.margin-top--md {
        margin-top: 1rem !important;
      }

.margin-left--md {
        margin-left: 1rem !important;
      }

.margin-bottom--md {
        margin-bottom: 1rem !important;
      }

.margin-right--md {
        margin-right: 1rem !important;
      }

.margin-vert--md {
      margin-bottom: 1rem !important;
      margin-top: 1rem !important;
    }

.margin-horiz--md {
      margin-left: 1rem !important;
      margin-right: 1rem !important;
    }

.margin--lg {
      margin: 2rem !important;
    }

.margin-top--lg {
        margin-top: 2rem !important;
      }

.margin-left--lg {
        margin-left: 2rem !important;
      }

.margin-bottom--lg {
        margin-bottom: 2rem !important;
      }

.margin-right--lg {
        margin-right: 2rem !important;
      }

.margin-vert--lg {
      margin-bottom: 2rem !important;
      margin-top: 2rem !important;
    }

.margin-horiz--lg {
      margin-left: 2rem !important;
      margin-right: 2rem !important;
    }

.margin--xl {
      margin: 5rem !important;
    }

.margin-top--xl {
        margin-top: 5rem !important;
      }

.margin-left--xl {
        margin-left: 5rem !important;
      }

.margin-bottom--xl {
        margin-bottom: 5rem !important;
      }

.margin-right--xl {
        margin-right: 5rem !important;
      }

.margin-vert--xl {
      margin-bottom: 5rem !important;
      margin-top: 5rem !important;
    }

.margin-horiz--xl {
      margin-left: 5rem !important;
      margin-right: 5rem !important;
    }

.padding--none {
      padding: 0 !important;
    }

.padding-top--none {
        padding-top: 0 !important;
      }

.padding-left--none {
        padding-left: 0 !important;
      }

.padding-bottom--none {
        padding-bottom: 0 !important;
      }

.padding-right--none {
        padding-right: 0 !important;
      }

.padding-vert--none {
      padding-bottom: 0 !important;
      padding-top: 0 !important;
    }

.padding-horiz--none {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

.padding--xs {
      padding: 0.25rem !important;
    }

.padding-top--xs {
        padding-top: 0.25rem !important;
      }

.padding-left--xs {
        padding-left: 0.25rem !important;
      }

.padding-bottom--xs {
        padding-bottom: 0.25rem !important;
      }

.padding-right--xs {
        padding-right: 0.25rem !important;
      }

.padding-vert--xs {
      padding-bottom: 0.25rem !important;
      padding-top: 0.25rem !important;
    }

.padding-horiz--xs {
      padding-left: 0.25rem !important;
      padding-right: 0.25rem !important;
    }

.padding--sm {
      padding: 0.5rem !important;
    }

.padding-top--sm {
        padding-top: 0.5rem !important;
      }

.padding-left--sm {
        padding-left: 0.5rem !important;
      }

.padding-bottom--sm {
        padding-bottom: 0.5rem !important;
      }

.padding-right--sm {
        padding-right: 0.5rem !important;
      }

.padding-vert--sm {
      padding-bottom: 0.5rem !important;
      padding-top: 0.5rem !important;
    }

.padding-horiz--sm {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
    }

.padding--md {
      padding: 1rem !important;
    }

.padding-top--md {
        padding-top: 1rem !important;
      }

.padding-left--md {
        padding-left: 1rem !important;
      }

.padding-bottom--md {
        padding-bottom: 1rem !important;
      }

.padding-right--md {
        padding-right: 1rem !important;
      }

.padding-vert--md {
      padding-bottom: 1rem !important;
      padding-top: 1rem !important;
    }

.padding-horiz--md {
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }

.padding--lg {
      padding: 2rem !important;
    }

.padding-top--lg {
        padding-top: 2rem !important;
      }

.padding-left--lg {
        padding-left: 2rem !important;
      }

.padding-bottom--lg {
        padding-bottom: 2rem !important;
      }

.padding-right--lg {
        padding-right: 2rem !important;
      }

.padding-vert--lg {
      padding-bottom: 2rem !important;
      padding-top: 2rem !important;
    }

.padding-horiz--lg {
      padding-left: 2rem !important;
      padding-right: 2rem !important;
    }

.padding--xl {
      padding: 5rem !important;
    }

.padding-top--xl {
        padding-top: 5rem !important;
      }

.padding-left--xl {
        padding-left: 5rem !important;
      }

.padding-bottom--xl {
        padding-bottom: 5rem !important;
      }

.padding-right--xl {
        padding-right: 5rem !important;
      }

.padding-vert--xl {
      padding-bottom: 5rem !important;
      padding-top: 5rem !important;
    }

.padding-horiz--xl {
      padding-left: 5rem !important;
      padding-right: 5rem !important;
    }

/* Content */

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

code {
  background-color: var(--ifm-code-background);
  border: 0.1rem solid rgba(0, 0, 0, 0.1);
  border-radius: var(--ifm-code-border-radius);
  font-family: var(--ifm-font-family-monospace);
  font-size: var(--ifm-code-font-size);
  padding: var(--ifm-code-padding-vertical) var(--ifm-code-padding-horizontal);
  vertical-align: middle;
}

a code {
  color: inherit;
}

pre {
  background-color: var(--ifm-pre-background);
  border-radius: var(--ifm-pre-border-radius);
  color: var(--ifm-pre-color);
  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
    var(--ifm-font-family-monospace);
  margin: 0 0 var(--ifm-spacing-vertical);
  overflow: auto;
  padding: var(--ifm-pre-padding);
}

pre code {
    background-color: transparent;
    border: none;
    font-size: 100%;
    line-height: inherit;
    padding: 0;
  }

kbd {
  background-color: var(--ifm-color-emphasis-0);
  border: 1px solid var(--ifm-color-emphasis-400);
  border-radius: 0.2rem;
  box-shadow: inset 0 -1px 0 var(--ifm-color-emphasis-400);
  color: var(--ifm-color-emphasis-800);
  font: 80% var(--ifm-font-family-monospace);
  padding: 0.15rem 0.3rem;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ifm-heading-color);
  font-family: var(--ifm-heading-font-family);
  font-weight: var(--ifm-heading-font-weight);
  line-height: var(--ifm-heading-line-height);
  margin: var(--ifm-heading-margin-top) 0 var(--ifm-heading-margin-bottom) 0;
}

h1 {
    font-size: var(--ifm-h1-font-size);
  }

h2 {
    font-size: var(--ifm-h2-font-size);
  }

h3 {
    font-size: var(--ifm-h3-font-size);
  }

h4 {
    font-size: var(--ifm-h4-font-size);
  }

h5 {
    font-size: var(--ifm-h5-font-size);
  }

h6 {
    font-size: var(--ifm-h6-font-size);
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

img {
  max-width: 100%;
}

img[align='right'] {
  padding-left: var(--image-alignment-padding);
}

img[align='left'] {
  padding-right: var(--image-alignment-padding);
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.markdown {
  --ifm-h1-vertical-rhythm-top: 3;
  --ifm-h2-vertical-rhythm-top: 2;
  --ifm-h3-vertical-rhythm-top: 1.5;
  --ifm-heading-vertical-rhythm-top: 1.25;

  --ifm-h1-vertical-rhythm-bottom: 1.25;
  --ifm-heading-vertical-rhythm-bottom: 1;
}

.markdown:before {
    content: '';
    display: table;
  }

.markdown:after {
    clear: both;
    content: '';
    display: table;
  }

.markdown > *:last-child {
    margin-bottom: 0 !important;
  }

.markdown h1:first-child {
    --ifm-h1-font-size: 3rem;

    margin-bottom: calc(
      var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading)
    );
  }

.markdown > h2 {
    --ifm-h2-font-size: 2rem;

    margin-bottom: calc(
      var(--ifm-heading-vertical-rhythm-bottom) * var(--ifm-leading)
    );
    margin-top: calc(var(--ifm-h2-vertical-rhythm-top) * var(--ifm-leading));
  }

.markdown > h3 {
    --ifm-h3-font-size: 1.5rem;

    margin-bottom: calc(
      var(--ifm-heading-vertical-rhythm-bottom) * var(--ifm-leading)
    );
    margin-top: calc(var(--ifm-h3-vertical-rhythm-top) * var(--ifm-leading));
  }

.markdown > h4,
  .markdown > h5,
  .markdown > h6 {
    margin-bottom: calc(
      var(--ifm-heading-vertical-rhythm-bottom) * var(--ifm-leading)
    );
    margin-top: calc(
      var(--ifm-heading-vertical-rhythm-top) * var(--ifm-leading)
    );
  }

/* Consistent spacing between content paragraphs. */

.markdown > pre,
  .markdown > ul,
  .markdown > p {
    margin-bottom: var(--ifm-leading);
  }

.markdown li {
    word-wrap: break-word;
  }

.markdown li > p {
      margin-top: var(--ifm-list-paragraph-margin);
    }

.markdown li + li {
      margin-top: var(--ifm-list-item-margin);
    }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/* Lists */

ul,
ol {
  margin: 0 0 var(--ifm-list-margin);
  padding-left: var(--ifm-list-left-padding);
}

ol ol,
ul ol {
  list-style-type: lower-roman;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin: 0;
}

ul ul ol,
ul ol ol,
ol ul ol,
ol ol ol {
  list-style-type: lower-alpha;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

table {
  border-collapse: collapse;
  display: block;
  margin-bottom: var(--ifm-spacing-vertical);
  overflow: auto;
}

table thead tr {
    border-bottom: 2px solid var(--ifm-table-border-color);
  }

table thead {
    background-color: var(--ifm-table-stripe-background);
  }

table tr {
    background-color: var(--ifm-table-background);
    border-top: var(--ifm-table-border-width) solid
      var(--ifm-table-border-color);
  }

table tr:nth-child(2n) {
    background-color: var(--ifm-table-stripe-background);
  }

table th,
  table td {
    border: var(--ifm-table-border-width) solid var(--ifm-table-border-color);
    padding: var(--ifm-table-cell-padding);
  }

table th {
    background-color: var(--ifm-table-head-background);
    color: var(--ifm-table-head-color);
    font-weight: var(--ifm-table-head-font-weight);
  }

table td {
    color: var(--ifm-table-cell-color);
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

strong {
  font-weight: var(--ifm-font-weight-bold);
}

/* Links */

a {
  color: var(--ifm-link-color);
  /* autoprefixer: ignore next */
  text-decoration: var(--ifm-link-decoration);
  transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}

a:hover {
    color: var(--ifm-link-hover-color);
    /* autoprefixer: ignore next */
    text-decoration: var(--ifm-link-hover-decoration);
  }

a:not([href]) {
    -webkit-text-decoration: none;
    text-decoration: none;
  }

/* Paragraphs */

p {
  margin: 0 0 var(--ifm-paragraph-margin-bottom);
}

/* Blockquotes */

blockquote {
  border-left: var(--ifm-blockquote-border-left-width) solid
    var(--ifm-blockquote-border-color);
  box-shadow: var(--ifm-blockquote-shadow);
  color: var(--ifm-blockquote-color);
  font-size: var(--ifm-blockquote-font-size);
  margin: 0 0 var(--ifm-spacing-vertical);
  padding: var(--ifm-blockquote-padding-vertical)
    var(--ifm-blockquote-padding-horizontal);
}

blockquote > :first-child {
    margin-top: 0;
  }

blockquote > :last-child {
    margin-bottom: 0;
  }

/* Horizontal Rules */

hr {
  background-color: var(--ifm-hr-background-color);
  border: 0;
  height: var(--ifm-hr-height);
  margin: var(--ifm-hr-margin-vertical) 0;
}

/* Utilities */

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.shadow--lw {
    box-shadow: var(--ifm-global-shadow-lw) !important;
  }

.shadow--md {
    box-shadow: var(--ifm-global-shadow-md) !important;
  }

.shadow--tl {
    box-shadow: var(--ifm-global-shadow-tl) !important;
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.text--primary {
    color: var(--ifm-color-primary);
  }

.text--secondary {
    color: var(--ifm-color-secondary);
  }

.text--success {
    color: var(--ifm-color-success);
  }

.text--info {
    color: var(--ifm-color-info);
  }

.text--warning {
    color: var(--ifm-color-warning);
  }

.text--danger {
    color: var(--ifm-color-danger);
  }

.text--center {
    text-align: center;
  }

.text--left {
    text-align: left;
  }

.text--justify {
    text-align: justify;
  }

.text--right {
    text-align: right;
  }

.text--capitalize {
    text-transform: capitalize;
  }

.text--lowercase {
    text-transform: lowercase;
  }

.text--uppercase {
    text-transform: uppercase;
  }

.text--light {
    font-weight: var(--ifm-font-weight-light);
  }

.text--normal {
    font-weight: var(--ifm-font-weight-normal);
  }

.text--semibold {
    font-weight: var(--ifm-font-weight-semibold);
  }

.text--bold {
    font-weight: var(--ifm-font-weight-bold);
  }

.text--italic {
  font-style: italic;
}

.text--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text--break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

.text--no-decoration,
  .text--no-decoration:hover {
    -webkit-text-decoration: none;
    text-decoration: none;
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.clean-btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

.clean-list {
  list-style: none;
  padding-left: 0;
}

/* Components */

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.alert--primary {
      --ifm-alert-background-color: var(
        --ifm-color-primary-contrast-background
      );
      --ifm-alert-background-color-highlight: rgba(53, 120, 229, 0.15);
      --ifm-alert-foreground-color: var(
        --ifm-color-primary-contrast-foreground
      );
      --ifm-alert-border-color: var(--ifm-color-primary-dark);
    }

.alert--secondary {
      --ifm-alert-background-color: var(
        --ifm-color-secondary-contrast-background
      );
      --ifm-alert-background-color-highlight: rgba(235, 237, 240, 0.15);
      --ifm-alert-foreground-color: var(
        --ifm-color-secondary-contrast-foreground
      );
      --ifm-alert-border-color: var(--ifm-color-secondary-dark);
    }

.alert--success {
      --ifm-alert-background-color: var(
        --ifm-color-success-contrast-background
      );
      --ifm-alert-background-color-highlight: rgba(0, 164, 0, 0.15);
      --ifm-alert-foreground-color: var(
        --ifm-color-success-contrast-foreground
      );
      --ifm-alert-border-color: var(--ifm-color-success-dark);
    }

.alert--info {
      --ifm-alert-background-color: var(
        --ifm-color-info-contrast-background
      );
      --ifm-alert-background-color-highlight: rgba(84, 199, 236, 0.15);
      --ifm-alert-foreground-color: var(
        --ifm-color-info-contrast-foreground
      );
      --ifm-alert-border-color: var(--ifm-color-info-dark);
    }

.alert--warning {
      --ifm-alert-background-color: var(
        --ifm-color-warning-contrast-background
      );
      --ifm-alert-background-color-highlight: rgba(255, 186, 0, 0.15);
      --ifm-alert-foreground-color: var(
        --ifm-color-warning-contrast-foreground
      );
      --ifm-alert-border-color: var(--ifm-color-warning-dark);
    }

.alert--danger {
      --ifm-alert-background-color: var(
        --ifm-color-danger-contrast-background
      );
      --ifm-alert-background-color-highlight: rgba(250, 56, 62, 0.15);
      --ifm-alert-foreground-color: var(
        --ifm-color-danger-contrast-foreground
      );
      --ifm-alert-border-color: var(--ifm-color-danger-dark);
    }

.alert {

  --ifm-code-background: var(--ifm-alert-background-color-highlight);
  --ifm-link-color: var(--ifm-alert-foreground-color);
  --ifm-link-hover-color: var(--ifm-alert-foreground-color);
  --ifm-link-decoration: underline;
  --ifm-tabs-color: var(--ifm-alert-foreground-color);
  --ifm-tabs-color-active: var(--ifm-alert-foreground-color);
  --ifm-tabs-color-active-border: var(--ifm-alert-border-color);

  background-color: var(--ifm-alert-background-color);
  border: var(--ifm-alert-border-width) solid var(--ifm-alert-border-color);
  border-left-width: var(--ifm-alert-border-left-width);
  border-radius: var(--ifm-alert-border-radius);
  box-shadow: var(--ifm-alert-shadow);
  color: var(--ifm-alert-foreground-color);
  padding: var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal);
}

.alert__heading {
    align-items: center;
    display: flex;
    font: bold var(--ifm-h5-font-size) / var(--ifm-heading-line-height)
      var(--ifm-heading-font-family);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
  }

.alert__icon {
    display: inline-flex;
    margin-right: 0.4em;
  }

.alert__icon svg {
      fill: var(--ifm-alert-foreground-color);
      stroke: var(--ifm-alert-foreground-color);
      stroke-width: 0;
    }

.alert .close {
    color: var(--ifm-alert-foreground-color);
    margin: calc(var(--ifm-alert-padding-vertical) * -1)
      calc(var(--ifm-alert-padding-horizontal) * -1) 0 0;

    opacity: 0.75;
  }

.alert .close:hover,
    .alert .close:focus {
      opacity: 1;
    }

.alert a {
    text-decoration-color: var(--ifm-alert-border-color);
  }

.alert a:hover {
      text-decoration-thickness: 2px;
    }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.avatar {
  column-gap: var(--ifm-avatar-intro-margin);
  display: flex;
}

.avatar__photo {
    border-radius: 50%;
    display: block;
    height: var(--ifm-avatar-photo-size);
    overflow: hidden;
    width: var(--ifm-avatar-photo-size);
  }

.avatar__photo--sm {
      --ifm-avatar-photo-size: 2rem;
    }

.avatar__photo--lg {
      --ifm-avatar-photo-size: 4rem;
    }

.avatar__photo--xl {
      --ifm-avatar-photo-size: 6rem;
    }

.avatar__intro {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    justify-content: center;
    text-align: var(--ifm-avatar-intro-alignment);
  }

.avatar__name {
    font: bold var(--ifm-h4-font-size) / var(--ifm-heading-line-height)
      var(--ifm-font-family-base);
  }

.avatar__subtitle {
    margin-top: 0.25rem;
  }

.avatar--vertical {
    --ifm-avatar-intro-alignment: center;
    --ifm-avatar-intro-margin: 0.5rem;

    align-items: center;
    flex-direction: column;
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.badge {
  background-color: var(--ifm-badge-background-color);
  border: var(--ifm-badge-border-width) solid var(--ifm-badge-border-color);
  border-radius: var(--ifm-badge-border-radius);
  color: var(--ifm-badge-color);
  display: inline-block;
  font-size: 75%;
  font-weight: var(--ifm-font-weight-bold);
  line-height: 1;
  padding: var(--ifm-badge-padding-vertical) var(--ifm-badge-padding-horizontal);
}

.badge--primary {
      --ifm-badge-background-color: var(--ifm-color-primary);
      --ifm-badge-border-color: var(--ifm-badge-background-color);
    }

.badge--secondary {
      --ifm-badge-background-color: var(--ifm-color-secondary);
      --ifm-badge-border-color: var(--ifm-badge-background-color);
    color: var(--ifm-color-black);
    }

.badge--success {
      --ifm-badge-background-color: var(--ifm-color-success);
      --ifm-badge-border-color: var(--ifm-badge-background-color);
    }

.badge--info {
      --ifm-badge-background-color: var(--ifm-color-info);
      --ifm-badge-border-color: var(--ifm-badge-background-color);
    }

.badge--warning {
      --ifm-badge-background-color: var(--ifm-color-warning);
      --ifm-badge-border-color: var(--ifm-badge-background-color);
    }

.badge--danger {
      --ifm-badge-background-color: var(--ifm-color-danger);
      --ifm-badge-border-color: var(--ifm-badge-background-color);
    }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.breadcrumbs {
  margin-bottom: 0;
  padding-left: 0;
}

.breadcrumbs__item {
    display: inline-block;
  }

.breadcrumbs__item:not(:last-child):after {
      background: var(--ifm-breadcrumb-separator) center;
      content: ' ';
      display: inline-block;
      filter: var(--ifm-breadcrumb-separator-filter);
      height: calc(
        var(--ifm-breadcrumb-separator-size) *
          var(--ifm-breadcrumb-size-multiplier) *
          var(--ifm-breadcrumb-separator-size-multiplier)
      );
      margin: 0 var(--ifm-breadcrumb-spacing);
      opacity: 0.5;
      width: calc(
        var(--ifm-breadcrumb-separator-size) *
          var(--ifm-breadcrumb-size-multiplier) *
          var(--ifm-breadcrumb-separator-size-multiplier)
      );
      /*rtl:raw:
      transform: rotate(180deg);
      */
    }

.breadcrumbs__item--active .breadcrumbs__link {
        background: var(--ifm-breadcrumb-item-background-active);
        color: var(--ifm-breadcrumb-color-active);
      }

.breadcrumbs__link {
    border-radius: var(--ifm-breadcrumb-border-radius);
    color: var(--ifm-font-color-base);
    display: inline-block;
    font-size: calc(1rem * var(--ifm-breadcrumb-size-multiplier));
    padding: calc(
        var(--ifm-breadcrumb-padding-vertical) *
          var(--ifm-breadcrumb-size-multiplier)
      )
      calc(
        var(--ifm-breadcrumb-padding-horizontal) *
          var(--ifm-breadcrumb-size-multiplier)
      );
    transition-property: background, color;
    transition-duration: var(--ifm-transition-fast);
    transition-timing-function: var(--ifm-transition-timing-default);
  }

.breadcrumbs__link:link:hover, .breadcrumbs__link:visited:hover, area[href].breadcrumbs__link:hover {
      background: var(--ifm-breadcrumb-item-background-active);
      -webkit-text-decoration: none;
      text-decoration: none;
    }

.breadcrumbs__link:any-link:hover {
      background: var(--ifm-breadcrumb-item-background-active);
      -webkit-text-decoration: none;
      text-decoration: none;
    }

.breadcrumbs--sm {
    --ifm-breadcrumb-size-multiplier: 0.8;
  }

.breadcrumbs--lg {
    --ifm-breadcrumb-size-multiplier: 1.2;
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.button {
  background-color: var(--ifm-button-background-color);
  border: var(--ifm-button-border-width) solid var(--ifm-button-border-color);
  border-radius: var(--ifm-button-border-radius);
  color: var(--ifm-button-color);
  cursor: pointer;
  display: inline-block;
  font-size: calc(0.875rem * var(--ifm-button-size-multiplier));
  font-weight: var(--ifm-button-font-weight);
  line-height: 1.5;
  padding: calc(
      var(--ifm-button-padding-vertical) * var(--ifm-button-size-multiplier)
    )
    calc(
      var(--ifm-button-padding-horizontal) * var(--ifm-button-size-multiplier)
    );
  text-align: center;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  transition-property: color, background, border-color;
  transition-duration: var(--ifm-button-transition-duration);
  transition-timing-function: var(--ifm-transition-timing-default);
}

.button:hover {
    color: var(--ifm-button-color); /* Override for button links. */
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.button--outline {
    --ifm-button-background-color: transparent;
    --ifm-button-color: var(--ifm-button-border-color);
  }

.button--outline:hover {
      --ifm-button-background-color: var(--ifm-button-border-color);
    }

.button--outline:hover,
    .button--outline:active,
    .button--outline.button--active {
      --ifm-button-color: var(--ifm-font-color-base-inverse);
    }

.button--link {
    --ifm-button-background-color: transparent;
    --ifm-button-border-color: transparent;

    color: var(--ifm-link-color);
    /* autoprefixer: ignore next */
    text-decoration: var(--ifm-link-decoration);
  }

.button--link:hover,
    .button--link:active,
    .button--link.button--active {
      color: var(--ifm-link-hover-color);
      /* autoprefixer: ignore next */
      text-decoration: var(--ifm-link-hover-decoration);
    }

.button.disabled,
  .button:disabled,
  .button[disabled] {
    opacity: 0.65;
    pointer-events: none;
  }

.button--sm {
    --ifm-button-size-multiplier: 0.8;
  }

.button--lg {
    --ifm-button-size-multiplier: 1.35;
  }

.button--block {
    display: block;
    width: 100%;
  }

.button.button--secondary {
    color: var(--ifm-color-gray-900);
  }

.button.button--secondary.button--outline:not(.button--active):not(:hover) {
      color: var(--ifm-font-color-base);
    }

:where(.button--primary) {
      --ifm-button-background-color: var(--ifm-color-primary);
      --ifm-button-border-color: var(--ifm-color-primary);
    }

:where(.button--primary):not(.button--outline):hover {
        --ifm-button-background-color: var(--ifm-color-primary-dark);
        --ifm-button-border-color: var(--ifm-color-primary-dark);
      }

.button--primary:active,
      .button--primary.button--active {
        --ifm-button-background-color: var(--ifm-color-primary-darker);
        --ifm-button-border-color: var(--ifm-color-primary-darker);
      }

:where(.button--secondary) {
      --ifm-button-background-color: var(--ifm-color-secondary);
      --ifm-button-border-color: var(--ifm-color-secondary);
    }

:where(.button--secondary):not(.button--outline):hover {
        --ifm-button-background-color: var(--ifm-color-secondary-dark);
        --ifm-button-border-color: var(--ifm-color-secondary-dark);
      }

.button--secondary:active,
      .button--secondary.button--active {
        --ifm-button-background-color: var(--ifm-color-secondary-darker);
        --ifm-button-border-color: var(--ifm-color-secondary-darker);
      }

:where(.button--success) {
      --ifm-button-background-color: var(--ifm-color-success);
      --ifm-button-border-color: var(--ifm-color-success);
    }

:where(.button--success):not(.button--outline):hover {
        --ifm-button-background-color: var(--ifm-color-success-dark);
        --ifm-button-border-color: var(--ifm-color-success-dark);
      }

.button--success:active,
      .button--success.button--active {
        --ifm-button-background-color: var(--ifm-color-success-darker);
        --ifm-button-border-color: var(--ifm-color-success-darker);
      }

:where(.button--info) {
      --ifm-button-background-color: var(--ifm-color-info);
      --ifm-button-border-color: var(--ifm-color-info);
    }

:where(.button--info):not(.button--outline):hover {
        --ifm-button-background-color: var(--ifm-color-info-dark);
        --ifm-button-border-color: var(--ifm-color-info-dark);
      }

.button--info:active,
      .button--info.button--active {
        --ifm-button-background-color: var(--ifm-color-info-darker);
        --ifm-button-border-color: var(--ifm-color-info-darker);
      }

:where(.button--warning) {
      --ifm-button-background-color: var(--ifm-color-warning);
      --ifm-button-border-color: var(--ifm-color-warning);
    }

:where(.button--warning):not(.button--outline):hover {
        --ifm-button-background-color: var(--ifm-color-warning-dark);
        --ifm-button-border-color: var(--ifm-color-warning-dark);
      }

.button--warning:active,
      .button--warning.button--active {
        --ifm-button-background-color: var(--ifm-color-warning-darker);
        --ifm-button-border-color: var(--ifm-color-warning-darker);
      }

:where(.button--danger) {
      --ifm-button-background-color: var(--ifm-color-danger);
      --ifm-button-border-color: var(--ifm-color-danger);
    }

:where(.button--danger):not(.button--outline):hover {
        --ifm-button-background-color: var(--ifm-color-danger-dark);
        --ifm-button-border-color: var(--ifm-color-danger-dark);
      }

.button--danger:active,
      .button--danger.button--active {
        --ifm-button-background-color: var(--ifm-color-danger-darker);
        --ifm-button-border-color: var(--ifm-color-danger-darker);
      }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.button-group {
  display: inline-flex;
  gap: var(--ifm-button-group-spacing);
}

.button-group > .button:not(:first-child) {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }

.button-group > .button:not(:last-child) {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }

.button-group--block {
    display: flex;
    justify-content: stretch;
  }

.button-group--block > .button {
      flex-grow: 1;
    }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.card {
  background-color: var(--ifm-card-background-color);
  border-radius: var(--ifm-card-border-radius);
  box-shadow: var(--ifm-global-shadow-lw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Because of border-radius. */

.card--full-height {
    height: 100%;
  }

.card__image {
    padding-top: var(--ifm-card-vertical-spacing);
  }

.card__image:first-child {
      padding-top: 0;
    }

.card__header,
  .card__body,
  .card__footer {
    padding: var(--ifm-card-vertical-spacing) var(--ifm-card-horizontal-spacing);
  }

.card__header:not(:last-child), .card__body:not(:last-child), .card__footer:not(:last-child) {
      padding-bottom: 0;
    }

.card__header > :last-child, .card__body > :last-child, .card__footer > :last-child {
      margin-bottom: 0;
    }

.card__footer {
    margin-top: auto; /* Pushes the footer to the bottom of the card. */
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.table-of-contents {
  font-size: 0.8rem;
  margin-bottom: 0;
  padding: var(--ifm-toc-padding-vertical) 0;
}

.table-of-contents,
  .table-of-contents ul {
    list-style: none;
    padding-left: var(--ifm-toc-padding-horizontal);
  }

.table-of-contents li {
    margin: var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal);
  }

.table-of-contents__left-border {
    border-left: 1px solid var(--ifm-toc-border-color);
  }

.table-of-contents__link {
    color: var(--ifm-toc-link-color);
    display: block;
  }

.table-of-contents__link:hover,
    .table-of-contents__link:hover code,
    .table-of-contents__link--active,
    .table-of-contents__link--active code {
      color: var(--ifm-color-primary);
      -webkit-text-decoration: none;
      text-decoration: none;
    }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.close {
  color: var(--ifm-color-black);
  float: right;
  font-size: 1.5rem;
  font-weight: var(--ifm-font-weight-bold);
  line-height: 1;
  opacity: 0.5;
  padding: 1rem;
  transition: opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}

.close:hover {
    opacity: 0.7;
  }

.close:focus {
    opacity: 0.8;
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.dropdown {
  display: inline-flex;
  font-weight: var(--ifm-dropdown-font-weight);
  position: relative;
  vertical-align: top;
}

.dropdown--hoverable:hover .dropdown__menu, .dropdown--show .dropdown__menu {
      opacity: 1;
      pointer-events: all;
      transform: translateY(-1px);
      visibility: visible;
    }

.dropdown--right .dropdown__menu {
      left: inherit;
      right: 0;
    }

.dropdown--nocaret .navbar__link:after {
    content: none !important;
  }

.dropdown__menu {
    background-color: var(--ifm-dropdown-background-color);
    border-radius: var(--ifm-global-radius);
    box-shadow: var(--ifm-global-shadow-md);
    left: 0;
    list-style: none;
    max-height: 80vh;
    min-width: 10rem;
    opacity: 0;
    overflow-y: auto;
    padding: 0.5rem;
    pointer-events: none;
    position: absolute;
    top: calc(100% - var(--ifm-navbar-item-padding-vertical) + 0.3rem);
    transform: translateY(-0.625rem);
    visibility: hidden;
    z-index: var(--ifm-z-index-dropdown);
    transition-property: opacity, transform, visibility;
    transition-duration: var(--ifm-transition-fast);
    transition-timing-function: var(--ifm-transition-timing-default);
  }

.dropdown__link {
    border-radius: 0.25rem;
    color: var(--ifm-dropdown-link-color);
    display: block;
    font-size: 0.875rem;
    margin-top: 0.2rem;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
  }

.dropdown__link:hover,
    .dropdown__link--active {
      background-color: var(--ifm-dropdown-hover-background-color);
      color: var(--ifm-dropdown-link-color);
      -webkit-text-decoration: none;
      text-decoration: none;
    }

.dropdown__link--active,
    .dropdown__link--active:hover {
      --ifm-dropdown-link-color: var(--ifm-link-color);
    }

.dropdown > .navbar__link:after {
    border-color: currentColor transparent;
    border-style: solid;
    border-width: 0.4em 0.4em 0;
    content: '';
    display: inline-block;
    margin-left: 0.3em;
    position: relative;
    top: 2px;
    transform: translateY(-50%);
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.footer {
  background-color: var(--ifm-footer-background-color);
  color: var(--ifm-footer-color);
  padding: var(--ifm-footer-padding-vertical)
    var(--ifm-footer-padding-horizontal);
}

.footer--dark {
    --ifm-footer-background-color: #303846;
    --ifm-footer-color: var(--ifm-footer-link-color);
    --ifm-footer-link-color: var(--ifm-color-secondary);
    --ifm-footer-title-color: var(--ifm-color-white);
  }

.footer__links {
    margin-bottom: 1rem;
  }

.footer__link-item {
    color: var(--ifm-footer-link-color);
    line-height: 2;
  }

.footer__link-item:hover {
      color: var(--ifm-footer-link-hover-color);
    }

.footer__link-separator {
    margin: 0 var(--ifm-footer-link-horizontal-spacing);
  }

.footer__logo {
    margin-top: 1rem;
    max-width: var(--ifm-footer-logo-max-width);
  }

.footer__title {
    color: var(--ifm-footer-title-color);
    font: bold var(--ifm-h4-font-size) / var(--ifm-heading-line-height)
      var(--ifm-font-family-base);
    margin-bottom: var(--ifm-heading-margin-bottom);
  }

.footer__item {
    margin-top: 0;
  }

.footer__items {
    margin-bottom: 0;
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

[type='checkbox'] {
  padding: 0;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.hero {
  align-items: center;
  background-color: var(--ifm-hero-background-color);
  color: var(--ifm-hero-text-color);
  display: flex;
  padding: 4rem 2rem;
}

.hero--primary {
    --ifm-hero-background-color: var(--ifm-color-primary);
    --ifm-hero-text-color: var(--ifm-font-color-base-inverse);
  }

.hero--dark {
    --ifm-hero-background-color: #303846;
    --ifm-hero-text-color: var(--ifm-color-white);
  }

.hero__title {
    font-size: 3rem;
  }

.hero__subtitle {
    font-size: 1.5rem;
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.menu {
  font-weight: var(--ifm-font-weight-semibold);
  overflow-x: hidden;
}

.menu__list {
    list-style: none;
    margin: 0;
    padding-left: 0;
  }

/* Non-top level menus */

.menu__list .menu__list {
      flex: 0 0 100%;
      margin-top: 0.25rem;
      padding-left: var(--ifm-menu-link-padding-horizontal);
    }

.menu__list-item:not(:first-child) {
      margin-top: 0.25rem;
    }

.menu__list-item--collapsed .menu__list {
        height: 0;
        overflow: hidden;
      }

.menu__list-item--collapsed .menu__link--sublist:after,
      .menu__list-item--collapsed .menu__caret:before {
        transform: rotateZ(90deg);
      }

.menu__list-item-collapsible {
      flex-wrap: wrap;
      position: relative;
      border-radius: 0.25rem;
      display: flex;
      transition: background var(--ifm-transition-fast) var(--ifm-transition-timing-default);
    }

.menu__list-item-collapsible:hover {
    background: var(--ifm-menu-color-background-hover);
  }

.menu__list-item-collapsible--active {
        background: var(--ifm-menu-color-background-hover);
      }

.menu__list-item-collapsible .menu__link:hover,
        .menu__list-item-collapsible .menu__link--active {
          background: none !important;
        }

.menu__link,
  .menu__caret {
    align-items: center;
    border-radius: 0.25rem;
    display: flex;
    transition: background var(--ifm-transition-fast) var(--ifm-transition-timing-default);
  }

.menu__link:hover, .menu__caret:hover {
    background: var(--ifm-menu-color-background-hover);
  }

.menu__link {
    color: var(--ifm-menu-color);
    flex: 1;
    line-height: 1.25;
    padding: var(--ifm-menu-link-padding-vertical)
      var(--ifm-menu-link-padding-horizontal);
  }

.menu__link:hover {
      -webkit-text-decoration: none;
      text-decoration: none;
      color: var(--ifm-menu-color);
      transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
    }

.menu__link--sublist-caret:after {
      content: '';
      margin-left: auto;
      min-width: 1.25rem;
      background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
      filter: var(--ifm-menu-link-sublist-icon-filter);
      height: 1.25rem;
      transform: rotate(180deg);
      width: 1.25rem;
      transition: transform var(--ifm-transition-fast) linear;
    }

.menu__link--active {
      color: var(--ifm-menu-color-active);
    }

.menu__link--active:hover {
        color: var(--ifm-menu-color-active);
      }

.menu__link--active:not(.menu__link--sublist) {
        background-color: var(--ifm-menu-color-background-active);
      }

.menu__caret {
    padding: var(--ifm-menu-link-padding-vertical)
      var(--ifm-menu-link-padding-horizontal);
  }

.menu__caret:before {
      content: '';
      background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
      filter: var(--ifm-menu-link-sublist-icon-filter);
      height: 1.25rem;
      transform: rotate(180deg);
      width: 1.25rem;
      transition: transform var(--ifm-transition-fast) linear;
    }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

html[data-theme='dark'],
.navbar--dark {
  --ifm-menu-link-sublist-icon-filter: invert(100%) sepia(94%) saturate(17%)
    hue-rotate(223deg) brightness(104%) contrast(98%);
}

.navbar {
  background-color: var(--ifm-navbar-background-color);
  box-shadow: var(--ifm-navbar-shadow);
  display: flex;
  height: var(--ifm-navbar-height);
  padding: var(--ifm-navbar-padding-vertical)
    var(--ifm-navbar-padding-horizontal);
}

.navbar > .container,
  .navbar > .container-fluid {
    display: flex;
  }

.navbar--fixed-top {
    position: sticky;
    top: 0;
    z-index: var(--ifm-z-index-fixed);
  }

.navbar__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }

.navbar__brand {
    align-items: center;
    color: var(--ifm-navbar-link-color);
    display: flex;
    margin-right: 1rem;
    min-width: 0;
  }

.navbar__brand:hover {
      color: var(--ifm-navbar-link-hover-color);
      -webkit-text-decoration: none;
      text-decoration: none;
    }

.navbar__title {
    flex: 1 1 auto;
  }

.navbar__toggle {
    display: none;
    margin-right: 0.5rem;
  }

.navbar__logo {
    flex: 0 0 auto;
    height: 2rem;
    margin-right: 0.5rem;
  }

.navbar__logo img {
      height: 100%;
    }

.navbar__items {
    align-items: center;
    display: flex;
    flex: 1;
    min-width: 0;
  }

.navbar__items--center {
      flex: 0 0 auto;
    }

.navbar__items--center .navbar__brand {
        margin: 0;
      }

.navbar__items--center + .navbar__items--right {
        flex: 1;
      }

.navbar__items--right {
      flex: 0 0 auto;
      justify-content: flex-end;
    }

.navbar__items--right > :last-child {
        padding-right: 0;
      }

.navbar__item {
    display: inline-block;
    padding: var(--ifm-navbar-item-padding-vertical)
      var(--ifm-navbar-item-padding-horizontal);
  }

.navbar__item.dropdown .navbar__link:not([href]) {
        pointer-events: none;
      }

.navbar__link {
    color: var(--ifm-navbar-link-color);
    font-weight: var(--ifm-font-weight-semibold);
  }

.navbar__link:hover,
    .navbar__link--active {
      color: var(--ifm-navbar-link-hover-color);
      -webkit-text-decoration: none;
      text-decoration: none;
    }

.navbar--dark,
  .navbar--primary {
    --ifm-menu-color: var(--ifm-color-gray-300);
    --ifm-navbar-link-color: var(--ifm-color-gray-100);
    --ifm-navbar-search-input-background-color: rgba(255, 255, 255, 0.1);
    --ifm-navbar-search-input-placeholder-color: rgba(255, 255, 255, 0.5);

    color: var(--ifm-color-white);
  }

.navbar--dark {
    --ifm-navbar-background-color: #242526;
    --ifm-navbar-link-hover-color: var(--ifm-color-primary);
    --ifm-menu-color-background-active: rgba(255, 255, 255, 0.05);
    --ifm-navbar-search-input-color: var(--ifm-color-white);
  }

.navbar--primary {
    --ifm-navbar-background-color: var(--ifm-color-primary);
    --ifm-navbar-link-hover-color: var(--ifm-color-white);
    --ifm-menu-color-active: var(--ifm-color-white);
    --ifm-navbar-search-input-color: var(--ifm-color-emphasis-500);
  }

.navbar__search-input {
      appearance: none; /* Algolia will add type="search" to the input in Safari and Safari's styling will override the styling here. */
      background: var(--ifm-navbar-search-input-background-color)
        var(--ifm-navbar-search-input-icon) no-repeat 0.75rem center / 1rem 1rem;
      border: none;
      border-radius: 2rem;
      color: var(--ifm-navbar-search-input-color);
      cursor: text;
      display: inline-block;
      font-size: 1rem;
      height: 2rem;
      padding: 0 0.5rem 0 2.25rem;
      width: 12.5rem;
    }

.navbar__search-input::placeholder {
        color: var(--ifm-navbar-search-input-placeholder-color);
      }

.navbar-sidebar {
    background-color: var(--ifm-navbar-background-color);
    bottom: 0;
    box-shadow: var(--ifm-global-shadow-md);
    left: 0;
    opacity: 0;
    overflow-x: hidden;
    position: fixed;
    top: 0;
    transform: translate3d(-100%, 0, 0);
    visibility: hidden;
    width: var(--ifm-navbar-sidebar-width);
    transition-property: opacity, visibility, transform;
    transition-duration: var(--ifm-transition-fast);
    transition-timing-function: ease-in-out;
  }

.navbar-sidebar--show .navbar-sidebar,
      .navbar-sidebar--show .navbar-sidebar__backdrop {
        opacity: 1;
        visibility: visible;
      }

.navbar-sidebar--show .navbar-sidebar {
        transform: translate3d(0, 0, 0);
      }

.navbar-sidebar__backdrop {
      background-color: rgba(0, 0, 0, 0.6);
      bottom: 0;
      left: 0;
      opacity: 0;
      position: fixed;
      right: 0;
      top: 0;
      visibility: hidden;
      transition-property: opacity, visibility;
      transition-duration: var(--ifm-transition-fast);
      transition-timing-function: ease-in-out;
    }

.navbar-sidebar__brand {
      align-items: center;
      box-shadow: var(--ifm-navbar-shadow);
      display: flex;
      flex: 1;
      height: var(--ifm-navbar-height);
      padding: var(--ifm-navbar-padding-vertical)
        var(--ifm-navbar-padding-horizontal);
    }

.navbar-sidebar__items {
      display: flex;
      height: calc(100% - var(--ifm-navbar-height));
      transform: translateZ(0);
      transition: transform var(--ifm-transition-fast) ease-in-out;
    }

.navbar-sidebar__items--show-secondary {
        transform: translate3d(
          calc((var(--ifm-navbar-sidebar-width)) * -1),
          0,
          0
        );
      }

.navbar-sidebar__item {
      flex-shrink: 0;
      padding: 0.5rem;
      width: calc(var(--ifm-navbar-sidebar-width));
    }

.navbar-sidebar__back {
      background: var(--ifm-menu-color-background-active);
      font-size: 15px;
      font-weight: var(--ifm-button-font-weight);
      margin: 0 0 0.2rem -0.5rem;
      padding: 0.6rem 1.5rem;
      position: relative;
      text-align: left;
      top: -0.5rem;
      width: calc(100% + 1rem);
    }

.navbar-sidebar__close {
      display: flex;
      margin-left: auto;
    }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.pagination {
  column-gap: var(--ifm-pagination-page-spacing);
  display: flex;
  font-size: var(--ifm-pagination-font-size);
  padding-left: 0;
}

.pagination--sm {
    --ifm-pagination-font-size: 0.8rem;
    --ifm-pagination-padding-horizontal: 0.8rem;
    --ifm-pagination-padding-vertical: 0.2rem;
  }

.pagination--lg {
    --ifm-pagination-font-size: 1.2rem;
    --ifm-pagination-padding-horizontal: 1.2rem;
    --ifm-pagination-padding-vertical: 0.3rem;
  }

.pagination__item {
    display: inline-flex;
  }

.pagination__item > span {
      padding: var(--ifm-pagination-padding-vertical);
    }

.pagination__item--active .pagination__link {
        background: var(--ifm-pagination-item-active-background);
        color: var(--ifm-pagination-color-active);
      }

.pagination__item:not(.pagination__item--active):hover .pagination__link {
        background: var(--ifm-pagination-item-active-background);
      }

.pagination__item--disabled,
    .pagination__item[disabled] {
      opacity: 0.25;
      pointer-events: none;
    }

.pagination__link {
    border-radius: var(--ifm-pagination-border-radius);
    color: var(--ifm-font-color-base);
    display: inline-block;
    padding: var(--ifm-pagination-padding-vertical)
      var(--ifm-pagination-padding-horizontal);
    transition: background var(--ifm-transition-fast) var(--ifm-transition-timing-default);
  }

.pagination__link:hover {
      -webkit-text-decoration: none;
      text-decoration: none;
    }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.pagination-nav {
  display: grid;
  grid-gap: var(--ifm-spacing-horizontal);
  gap: var(--ifm-spacing-horizontal);
  grid-template-columns: repeat(2, 1fr);
}

.pagination-nav__link {
    border: 1px solid var(--ifm-color-emphasis-300);
    border-radius: var(--ifm-pagination-nav-border-radius);
    display: block;
    height: 100%;
    line-height: var(--ifm-heading-line-height);
    padding: var(--ifm-global-spacing);
    transition: border-color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
  }

.pagination-nav__link:hover {
      border-color: var(--ifm-pagination-nav-color-hover);
      -webkit-text-decoration: none;
      text-decoration: none;
    }

.pagination-nav__link--next {
      grid-column: 2/3;
      text-align: right;
    }

.pagination-nav__label {
    font-size: var(--ifm-h4-font-size);
    font-weight: var(--ifm-heading-font-weight);
    word-break: break-word;
  }

.pagination-nav__link--prev .pagination-nav__label::before {
      content: '« ';
    }

.pagination-nav__link--next .pagination-nav__label::after {
      content: ' »';
    }

.pagination-nav__sublabel {
    color: var(--ifm-color-content-secondary);
    font-size: var(--ifm-h5-font-size);
    font-weight: var(--ifm-font-weight-semibold);
    margin-bottom: 0.25rem;
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.pills {
  display: flex;
  gap: var(--ifm-pills-spacing);
  padding-left: 0;
}

.pills__item {
    border-radius: 0.5rem;
    cursor: pointer;
    display: inline-block;
    font-weight: var(--ifm-font-weight-bold);
    padding: 0.25rem 1rem;
    transition: background var(--ifm-transition-fast) var(--ifm-transition-timing-default);
  }

.pills__item--active {
      background: var(--ifm-pills-color-background-active);
      color: var(--ifm-pills-color-active);
    }

.pills__item:not(.pills__item--active):hover {
      background: var(--ifm-pills-color-background-active);
    }

.pills--block {
    justify-content: stretch;
  }

.pills--block .pills__item {
      flex-grow: 1;
      text-align: center;
    }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.tabs {
  color: var(--ifm-tabs-color);
  display: flex;
  font-weight: var(--ifm-font-weight-bold);
  margin-bottom: 0;
  overflow-x: auto;
  padding-left: 0;
}

.tabs__item {
    border-bottom: 3px solid transparent;
    border-radius: var(--ifm-global-radius);
    cursor: pointer;
    display: inline-flex;
    padding: var(--ifm-tabs-padding-vertical) var(--ifm-tabs-padding-horizontal);
    transition: background-color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
  }

.tabs__item--active {
      border-bottom-color: var(--ifm-tabs-color-active-border);
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      color: var(--ifm-tabs-color-active);
    }

.tabs__item:hover {
      background-color: var(--ifm-hover-overlay);
    }

.tabs--block {
    justify-content: stretch;
  }

.tabs--block .tabs__item {
      flex-grow: 1;
      justify-content: center;
    }

/* Mode */

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

html[data-theme='dark'] {
  --ifm-color-scheme: dark;

  --ifm-color-emphasis-0: var(--ifm-color-gray-1000);
  --ifm-color-emphasis-100: var(--ifm-color-gray-900);
  --ifm-color-emphasis-200: var(--ifm-color-gray-800);
  --ifm-color-emphasis-300: var(--ifm-color-gray-700);
  --ifm-color-emphasis-400: var(--ifm-color-gray-600);
  --ifm-color-emphasis-500: var(--ifm-color-gray-500);
  --ifm-color-emphasis-600: var(--ifm-color-gray-400);
  --ifm-color-emphasis-700: var(--ifm-color-gray-300);
  --ifm-color-emphasis-800: var(--ifm-color-gray-200);
  --ifm-color-emphasis-900: var(--ifm-color-gray-100);
  --ifm-color-emphasis-1000: var(--ifm-color-gray-0);

  --ifm-background-color: #1b1b1d;
  --ifm-background-surface-color: #242526;

  --ifm-hover-overlay: rgba(255, 255, 255, 0.05);

  --ifm-color-content: #e3e3e3;
  --ifm-color-content-secondary: rgba(255, 255, 255, 1);

  --ifm-breadcrumb-separator-filter: invert(64%) sepia(11%) saturate(0%)
    hue-rotate(149deg) brightness(99%) contrast(95%);

  --ifm-code-background: rgba(255, 255, 255, 0.1);

  --ifm-scrollbar-track-background-color: #444444;
  --ifm-scrollbar-thumb-background-color: #686868;
  --ifm-scrollbar-thumb-hover-background-color: #7a7a7a;

  --ifm-table-stripe-background: rgba(255, 255, 255, 0.07);

  --ifm-toc-border-color: var(--ifm-color-emphasis-200);
    --ifm-color-primary-contrast-background: rgb(16, 36, 69);
    --ifm-color-primary-contrast-foreground: rgb(235, 242, 252);
    --ifm-color-secondary-contrast-background: rgb(71, 71, 72);
    --ifm-color-secondary-contrast-foreground: rgb(253, 253, 254);
    --ifm-color-success-contrast-background: rgb(0, 49, 0);
    --ifm-color-success-contrast-foreground: rgb(230, 246, 230);
    --ifm-color-info-contrast-background: rgb(25, 60, 71);
    --ifm-color-info-contrast-foreground: rgb(238, 249, 253);
    --ifm-color-warning-contrast-background: rgb(77, 56, 0);
    --ifm-color-warning-contrast-foreground: rgb(255, 248, 230);
    --ifm-color-danger-contrast-background: rgb(75, 17, 19);
    --ifm-color-danger-contrast-foreground: rgb(255, 235, 236)
}

@media (min-width: 1440px) {
    .container {
      max-width: var(--ifm-container-width-xl);
    }
}

@media (max-width: 996px) {
    .col {
      --ifm-col-width: 100%;
      flex-basis: var(--ifm-col-width);
      margin-left: 0;
    }

.footer {
    --ifm-footer-padding-horizontal: 0
}

    .footer__link-separator {
      display: none;
    }

    .footer__col {
      margin-bottom: calc(var(--ifm-spacing-vertical) * 3);
    }

    .footer__link-item {
      display: block;
      width: max-content;
    }

.hero {
    padding-left: 0;
    padding-right: 0
}

.navbar > .container,
  .navbar > .container-fluid {
      padding: 0
  }

.navbar__toggle {
      display: inherit
  }

.navbar__item {
      display: none
  }

.navbar__search-input {
        width: 9rem
    }

.pills--block {
      flex-direction: column
  }

.tabs--block {
      flex-direction: column
  }
}

@media (max-width: 576px) {
    .markdown h1:first-child {
      --ifm-h1-font-size: 2rem;
    }
    .markdown > h2 {
      --ifm-h2-font-size: 1.5rem;
    }
    .markdown > h3 {
      --ifm-h3-font-size: 1.25rem;
    }
}

@media (pointer: fine) {
  .thin-scrollbar {
    scrollbar-width: thin;
  }
  .thin-scrollbar::-webkit-scrollbar {
    height: var(--ifm-scrollbar-size);
    width: var(--ifm-scrollbar-size);
  }
  .thin-scrollbar::-webkit-scrollbar-track {
    background: var(--ifm-scrollbar-track-background-color);
    border-radius: 10px;
  }
  .thin-scrollbar::-webkit-scrollbar-thumb {
    background: var(--ifm-scrollbar-thumb-background-color);
    border-radius: 10px;
  }
  .thin-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--ifm-scrollbar-thumb-hover-background-color);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ifm-transition-fast: 0ms;
    --ifm-transition-slow: 0ms;
  }
}

@media print {

.table-of-contents {
    display: none
}

.footer {
    display: none
}

.menu {
    display: none
}

.navbar {
    display: none
}

.pagination-nav {
    display: none
}

.tabs {
    page-break-inside: avoid
}
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/**
 * Styles for NProgress
 * Copied over to remove unused styles for the spinner.
 * https://github.com/rstacruz/nprogress/blob/master/nprogress.css
 */

:root {
  --docusaurus-progress-bar-color: var(--ifm-color-primary);
}

#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: var(--docusaurus-progress-bar-color);
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
}

#nprogress .peg {
  position: absolute;
  right: 0;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px var(--docusaurus-progress-bar-color),
    0 0 5px var(--docusaurus-progress-bar-color);
  opacity: 1;
  transform: rotate(3deg) translate(0, -4px);
}

/* ============================================
   FONTES

   IBM Plex Sans (interface) e IBM Plex Mono (labels,
   atalhos, código) são carregadas no <head> — ver
   `stylesheets` em docusaurus.config.js.

   A Noto Sans JP fica só no wordmark do navbar.
   ============================================ */

/* ============================================
   CORES PRIMÁRIAS DO TEMA
   ============================================ */
:root {
  /* ============================================
     PRIMÁRIO — TEAL DA MARCA

     Substitui o azul default do Docusaurus. O tom base
     é escurecido em relação ao #008F8F da marca porque
     ele carrega texto: sobre branco o teal puro dá
     3,94:1 e reprova em AA. As variantes seguem a
     escala do Infima.
     ============================================ */
  --ifm-color-primary: #007A7A;
  --ifm-color-primary-dark: #006E6E;
  --ifm-color-primary-darker: #006868;
  --ifm-color-primary-darkest: #005555;
  --ifm-color-primary-light: #008686;
  --ifm-color-primary-lighter: #008C8C;
  --ifm-color-primary-lightest: #009F9F;
  --ifm-code-font-size: 95%;

  /* Fonte de interface de todo o site. Os labels mono dos
     trilhos e o atalho da busca já apontam para
     --ifm-font-family-monospace, então passam a usar a Plex Mono
     sem alteração local. */
  --ifm-font-family-base: 'IBM Plex Sans', system-ui, sans-serif;
  --ifm-font-family-monospace: 'IBM Plex Mono', ui-monospace, monospace;

  /* Variáveis Glassmorphism */
  --glass-bg: rgba(59, 58, 58, 0.322);
  --glass-border: rgba(255, 255, 255, 0.123);
  --glass-highlight: rgba(255, 255, 255, 0.219);
  --glass-blur: blur(5px);

  /* Largura do Sidebar - Responsiva */
  --doc-sidebar-width: 280px;

  /* ============================================
     PALETA DA MARCA TIRRELL
     Espelha os tokens de tirrell.com.br. Por ora só
     alimenta o CTA do hero; o primário do Docusaurus
     segue azul até a migração de cor ser decidida.
     ============================================ */
  --trl-cyan: #00FFF6;          /* ciano claro — ação */
  --trl-cyan-bright: #2EFFF8;   /* ciano brilhante — hover */
  --trl-teal: #008F8F;          /* teal médio */
  --trl-petrol: #004D4A;        /* verde petróleo escuro */
  --trl-deep: #003E3B;          /* verde muito escuro — texto sobre ciano */
}

/* ============================================
   CONTROLE DE OVERFLOW GLOBAL
   ============================================ */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
  box-sizing: border-box;
}

/* ============================================
   FUNDO GLOBAL

   Mesma superfície da home em todo o site. O
   `--ifm-background-color` alimenta os componentes do
   Docusaurus que derivam dele (navbar, dropdowns,
   cartões), então definir só o `background` do body
   deixaria peças com o branco padrão.
   ============================================ */
:root {
  --ifm-background-color: #F1F6F5;
}

html[data-theme='dark'] {
  --ifm-background-color: #1a1b1b;
}

/* ============================================
   TOKENS DE LAYOUT COMPARTILHADOS
   ============================================

   Largura, respiro lateral e superfície que hero, seções e rodapé
   dividem. Vivem aqui, e não em index.module.css, porque aquele é
   um CSS Module: o Docusaurus só carrega seu chunk na rota `/`, e
   fora da home o footer caía no valor de fallback — respiro fixo
   em vez de fluido, e desalinhado das outras faixas. */
:root {
  --home-max: 1200px;
  --home-pad: clamp(1rem, 4vw, 2.5rem);
  --home-radius: 10px;
  --home-shadow: 0 1px 2px rgba(0, 30, 29, 0.06), 0 4px 16px rgba(0, 30, 29, 0.06);
}

body {
  background-color: var(--ifm-background-color);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}


/* ============================================
   CORES PRIMÁRIAS PARA MODO DARK
   ============================================ */
[data-theme='dark'] {
  /* No escuro o teal precisa clarear para alcançar contraste */
  --ifm-color-primary: #4FD8D4;
  --ifm-color-primary-dark: #35D2CD;
  --ifm-color-primary-darker: #28CFCA;
  --ifm-color-primary-darkest: #21A9A5;
  --ifm-color-primary-light: #69DEDB;
  --ifm-color-primary-lighter: #76E1DE;
  --ifm-color-primary-lightest: #9BE9E7;
}

/* ============================================
   GLASSMORPHISM - COMPONENTES DOCUSAURUS
   ============================================ */

/* ============================================
   NAVBAR — MESMA SUPERFÍCIE EM TODO O SITE

   Fora da home não há faixa de gradiente atrás, então
   o navbar já nasce sólido no mesmo tom que assume ao
   rolar na home. Sem cantos arredondados e sem vidro:
   a barra é contínua com o topo da página.
   ============================================ */
.navbar {
  background: #F2F8F7;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(6, 48, 42, 0.1);
  box-shadow: none;
  transition:
    background-color 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sólido, mesma superfície dos trilhos (--rail-bg): sem blur não
   há risco de o conteúdo por baixo atravessar o texto ao rolar. */
html[data-theme='dark'] .navbar {
  background: var(--rail-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: var(--rail-border);
}

/* A sombra aparece ao rolar, separando a barra do conteúdo
   que passa por baixo. Mesmo comportamento da home. */
body[data-scrolled] .navbar {
  box-shadow: 0 1px 3px rgba(6, 48, 42, 0.07), 0 4px 16px rgba(6, 48, 42, 0.05);
}

html[data-theme='dark'] body[data-scrolled] .navbar {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.25);
}

.navbar__title {
  font-weight: 500;
  font-family: 'Noto Sans JP', sans-serif;
}

/* A superfície e a tipografia do sidebar vivem em
   src/css/rails.css, junto com o TOC — os dois trilhos seguem o
   mesmo sistema. Aqui ficam apenas o reset de espaçamento. */
.theme-doc-sidebar-container,
aside[class*="docSidebarContainer"],
div[class*="docSidebar"],
nav[class*="sidebar"] {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0 !important;
  margin: 0 !important;
}
/* `:not(.footer *)` em todos os ramos: o `.footer__links` também
   carrega a classe `row`, e `docs-wrapper` fica no <html>. Sem o
   recorte esta regra alcançava o rodapé e impunha `margin: 1rem 0`
   + `display: flex`, quebrando o grid de 4 colunas e deixando o
   rodapé da doc 16px mais alto que o da home. Aqui o alvo é só o
   grid de conteúdo da doc. */
.docs-wrapper .row:not(.footer *),
.docusaurus-docs .row:not(.footer *),
div[class*="docPage"]:not(.homepage) .row:not(.footer *),
html[class*="docs-wrapper"] .row:not(.footer *) {
  margin: 1rem 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-wrap: nowrap !important;
  display: flex !important;
  align-items: stretch !important;
}
  

/* Menu do Sidebar */
menu [class*="menu"] {
  width: auto !important;
  margin: 0 !important;
  align-self: flex-start !important;
  position: static;
}

/* Padding do container interno do sidebar (usando seletor robusto) */
.theme-doc-sidebar-container div[class*="sidebar"] {
  padding-top: 0rem !important;
}

/* Ícones do sidebar */
.theme-doc-sidebar-container svg,
.theme-doc-sidebar-container .menu__link svg,
.theme-doc-sidebar-container .menu__caret {
  width: 12px !important;
  height: 12px !important;
  font-size: 14px !important;
}

@media (max-width: 767px) {
  .theme-doc-sidebar-container,
  aside[class*="docSidebarContainer"] {
    width: auto !important;
    min-width: auto !important;
    max-width: auto !important;
    padding: 0;
  }

  .main-wrapper  {
    margin: 0 !important;
    padding: 8px !important;
  }
}

/* Conteúdo principal — sem caixa própria.

   Antes havia aqui um cartão de vidro (margem de 16px, radius e
   borda). Ele mantinha os dois trilhos flutuando para dentro:
   o "nesta página" não encostava na direita e a sidebar não
   encostava na esquerda. Os trilhos são colunas da página, então
   vão de borda a borda — a superfície de cada um vem de
   src/css/rails.css. */
.main-wrapper {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0;
}

/* Homepage - remover margens padrão */
body.homepage .main-wrapper,
html.homepage .main-wrapper {
  margin: 0 auto !important;
  padding: 16px !important;
}

/* ============================================
   HOME — NAVBAR SOBRE A FAIXA ESCURA

   Só a aparência muda: o navbar fica transparente e o
   texto claro, para pousar sobre o hero escuro em vez
   de formar uma barra branca destacada. Estrutura,
   logo e dropdowns seguem intactos.

   Escopo pelo atributo posto em src/pages/index.js —
   nenhuma outra página é afetada.
   ============================================ */
body:has([data-home-hero]) .main-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent;
  backdrop-filter: none;
  border: none;
  border-radius: 0;
}

/* A FAIXA ESCURA É UMA SÓ.

   O navbar é sticky e vive fora do <header> do hero, então pintar
   os dois separadamente sempre deixa uma emenda: dois gradientes
   independentes nunca alinham em toda largura e altura.

   A solução é não ter duas superfícies. Esta pseudo-camada no body
   é a única faixa escura da home; nav e hero ficam transparentes
   por cima dela. Como é `fixed`, ela cobre a área do navbar mesmo
   quando ele gruda no topo durante a rolagem.

   `--home-band` é a altura da faixa, definida no hero. */
/* CAMADA 1 — base do hero.
   168° é quase vertical, inclinado alguns graus. Três paradas
   subindo em luminosidade; a do meio em 52% evita a transição
   chapada entre os extremos.

   No tema claro, verde muito lavado em vez de branco: mantém a
   família teal e dá ao círculo de acento algo em que aparecer. */
body:has([data-home-hero])::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--home-band, 640px);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(168deg, #F2F8F7 0%, #E4F0ED 52%, #b4c0bd 100%);
}

/* O data-theme fica no <html>, então o seletor parte dele */
html[data-theme='dark'] body:has([data-home-hero])::before {
  background: linear-gradient(168deg, #05231fe2 0%, #093b3322 52%, #0b4a3e1f 100%);
}

/* CAMADA 2 — brilho de acento.
   Círculo de 620px estourando as bordas pelo canto superior
   direito. Sair da área visível é o que faz parecer luz em vez
   de bolha. Vive aqui, e não dentro do hero, para alcançar
   também a faixa do navbar. */
body:has([data-home-hero])::after {
  content: '';
  position: fixed;
  top: -180px;
  right: -120px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle,
    #b0bdbc27 0%,
    rgba(25, 192, 167, 0) 68%
  );
}

html[data-theme='dark'] body:has([data-home-hero])::after {
  background: radial-gradient(
    circle,
    rgba(111, 219, 203, 0.068) 0%,
    rgba(25, 192, 168, 0) 68%
  );
}

/* Transparente de verdade: o que aparece atrás é a faixa acima.
   A borda inferior separa o navbar do conteúdo — como a faixa
   agora é contínua, a linha lê como divisor deliberado e não
   como emenda entre duas superfícies. */
body:has([data-home-hero]) .navbar {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(6, 48, 42, 0.12);
  box-shadow: none;
}

html[data-theme='dark'] body:has([data-home-hero]) .navbar {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   NAVBAR SÓLIDO AO ROLAR

   No topo o navbar é transparente e integra a faixa do hero.
   Assim que a página sai do topo ele ganha fundo próprio: sticky
   sobre conteúdo em movimento precisa de superfície opaca para o
   texto não colidir com o que passa por baixo.

   O atributo é posto por src/theme/Root.js.
   ============================================ */
body:has([data-home-hero]) .navbar {
  transition:
    background-color 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-scrolled]:has([data-home-hero]) .navbar {
  background: #F2F8F7;
  border-bottom-color: rgba(6, 48, 42, 0.1);
  box-shadow: 0 1px 3px rgba(6, 48, 42, 0.07), 0 4px 16px rgba(6, 48, 42, 0.05);
}

html[data-theme='dark'] body[data-scrolled]:has([data-home-hero]) .navbar {
  background: #05231F;
  border-bottom-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  body:has([data-home-hero]) .navbar {
    transition: none;
  }
}

/* Acima da faixa, senão o conteúdo fica encoberto. O navbar não
   recebe `position` aqui: ele já é sticky, e sobrescrever para
   relative mataria a fixação no topo.

   O <main> recebe fundo opaco: a camada 1 é `fixed` e continuaria
   visível atrás do conteúdo ao rolar, deixando uma faixa verde
   vazia abaixo das seções. */
body:has([data-home-hero]) .main-wrapper {
  position: relative;
  z-index: 1;
}

body:has([data-home-hero]) main {
  background: #F1F6F5;
}

html[data-theme='dark'] body:has([data-home-hero]) main {
  background: #1a1b1b;
}

/* O position/z-index que o rodapé precisa aqui — o <footer> é irmão
   do .main-wrapper, não filho, então o z-index do wrapper não o
   alcança e as camadas fixed passavam por cima dele — agora vale
   para todas as rotas e vive junto das outras regras de .footer,
   na seção FOOTER. */

/* O texto acompanha a base: escuro sobre o hero claro,
   branco sobre o escuro. */
body:has([data-home-hero]) .navbar__title,
body:has([data-home-hero]) .navbar__brand {
  color: #06302A;
}

body:has([data-home-hero]) .navbar__items--left .navbar__link {
  color: #06302A !important;
}

html[data-theme='dark'] body:has([data-home-hero]) .navbar__title,
html[data-theme='dark'] body:has([data-home-hero]) .navbar__brand {
  color: #ffffff;
}

html[data-theme='dark'] body:has([data-home-hero]) .navbar__items--left .navbar__link {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Sobre o hero o acento é o ciano da marca, não o teal do
   header. A marcação continua sendo a barra na base — o
   `text-decoration` sairia junto com o texto e desalinharia
   dos itens vizinhos. */
body:has([data-home-hero]) .navbar__items--left .navbar__link:hover,
body:has([data-home-hero]) .navbar__items--left .navbar__link--active {
  color: var(--trl-cyan) !important;
  -webkit-text-decoration: none;
  text-decoration: none;
}

html[data-theme='dark'] body:has([data-home-hero]) .navbar__items--left .navbar__link:hover,
html[data-theme='dark'] body:has([data-home-hero]) .navbar__items--left .navbar__link--active {
  color: var(--trl-cyan) !important;
}

body:has([data-home-hero]) .navbar__items--left .navbar__link--active {
  border-bottom-color: var(--trl-cyan);
}

/* Na home o hero já traz o campo de busca — dois na mesma dobra
   é redundante. O botão é escondido visualmente, NÃO removido:
   o gatilho do hero o localiza por querySelector e dispara o
   clique nele. Com `display: none` a busca do hero pararia. */
body:has([data-home-hero]) .navbar [class*='navbarSearchContainer'] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Na home o ícone segue a faixa do hero, que é clara no tema
   claro (dissolve em #FFFFFF) e escura no escuro — mesma lógica
   dos links de nav ao lado. A cor vai no botão, não no svg, para
   o hover continuar valendo.

   No tema claro isso coincide com --hdr-icon; a regra existe para
   o par escuro logo abaixo não virar branco nos dois temas. */
body:has([data-home-hero]) .navbar [class*='toggleButton'] {
  color: var(--hdr-icon);
}

body:has([data-home-hero]) .navbar [class*='toggleButton']:hover {
  color: var(--hdr-icon-strong);
  background: var(--hdr-surface-hover);
}

/* Sobre a faixa escura o traço precisa de mais presença que
   #93A8A3 — ali o contraste é contra quase-preto. */
html[data-theme='dark'] body:has([data-home-hero]) .navbar [class*='toggleButton'] {
  color: rgba(255, 255, 255, 0.8);
}

html[data-theme='dark'] body:has([data-home-hero]) .navbar [class*='toggleButton']:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

body:has([data-home-hero]) .navbar [class*='colorModeToggle']::before,
body:has([data-home-hero]) .navbar [class*='toggle_']::before {
  background: var(--hdr-divider);
}

html[data-theme='dark'] body:has([data-home-hero]) .navbar [class*='colorModeToggle']::before,
html[data-theme='dark'] body:has([data-home-hero]) .navbar [class*='toggle_']::before {
  background: rgba(255, 255, 255, 0.18);
}

/* O menu dos dropdowns continua sendo superfície própria: mantém
   fundo sólido para os itens permanecerem legíveis quando abre. */
body:has([data-home-hero]) .navbar .dropdown__menu {
  background: var(--ifm-dropdown-background-color);
}

body:has([data-home-hero]) .navbar .dropdown__link {
  color: var(--ifm-color-content);
}

body:has([data-home-hero]) .navbar .dropdown__link:hover {
  color: var(--ifm-color-content);
  background: var(--ifm-dropdown-hover-background-color);
}

/* O .main-wrapper já é transparente e sem borda nos dois temas —
   não precisa de par no escuro. */

/* Remove padding-top do primeiro filho do main */
main > :first-child,
.main-wrapper main > :first-child {
  padding-top: 0 !important;
}

/* Remove padding-left do primeiro item do breadcrumb (ícone casa) */
.breadcrumbs__item:first-child,
.breadcrumbs__item:first-child .breadcrumbs__link {
  padding-left: 0 !important;
}

/* Remove efeito de hover e background do item ativo do breadcrumb */
.breadcrumbs__link:hover,
.breadcrumbs__link:focus,
.breadcrumbs__item--active .breadcrumbs__link {
  background: transparent !important;
}

/* A superfície escura do sidebar vive em src/css/rails.css */

/* O hero da home não usa mais `hero--primary`: sua superfície
   teal é definida em src/pages/index.module.css e não deve ser
   sobrescrita pelo azul do tema. */


/* ============================================
   CLASSES DE RESULTADO
   ============================================ */
.result-positive {
  color: #25a353;
  font-weight: bold;
}

.result-warning {
  color: #e96d14;
  font-weight: bold;
}

.result-negative {
  color: #db2d2d;
  font-weight: bold;
}

/* ============================================
   GLASSMORPHISM - COMPONENTES PERSONALIZADOS
   ============================================ */

/* CÓDIGO COMENTADO - COMPONENTES GLASSMORPHISM PERSONALIZADOS

/* Base glassmorphism */
/* .glass-card,
.glass-hero {
  background: linear-gradient(
      135deg,
      rgba(34, 51, 69, 0.15) 0%,
      rgba(76, 130, 160, 0.12) 50%,
      rgba(0, 0, 0, 0.08) 100%
    ),
    rgba(34, 51, 69, 0.1);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 12px 12px 0 0;
  border: 1px solid rgba(34, 51, 69, 0.2);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(76, 130, 160, 0.3),
    inset 0 -1px 0 rgba(34, 51, 69, 0.2),
    inset 0 0 4px 2px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
} */

/* Pseudo-elementos - Refração de luz */
/* .glass-card::before,
.glass-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(34, 51, 69, 0.2) 25%,
    transparent 50%,
    rgba(76, 130, 160, 0.15) 75%,
    transparent 100%
  );
  transform: rotate(-10deg);
  pointer-events: none;
  z-index: 1;
} */

/* .glass-card::after,
.glass-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(76, 130, 160, 0.2) 0%, transparent 50%),
    radial-gradient(circle at bottom left, rgba(34, 51, 69, 0.15) 0%, transparent 40%);
  pointer-events: none;
  z-index: 1;
} */

/* Modo dark - glassmorphism */
/* [data-theme='dark'] .glass-card,
[data-theme='dark'] .glass-hero {
  background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(255, 255, 255, 0.05) 100%
    ),
    var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.233),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 4px 2px rgba(255, 255, 255, 0.2);
} */

/* [data-theme='dark'] .glass-card::before,
[data-theme='dark'] .glass-hero::before {
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.08) 75%,
    transparent 100%
  );
} */

/* [data-theme='dark'] .glass-card::after,
[data-theme='dark'] .glass-hero::after {
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
    radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.15) 0%, transparent 40%);
} */

/* Glass Card - tamanho fixo */
/* .glass-card {
  width: 240px;
  height: 360px;
} */

/* Glass Hero - sem limitação de tamanho */
/* .glass-hero {
  position: relative;
  z-index: 1;
  overflow: hidden;
} */


/* Ajustar opacidade do background glass */
/* [data-theme='dark'] .glass-hero {
  background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.01) 50%,
      rgba(255, 255, 255, 0.005) 100%
    ),
    rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
} */

/* html:not([data-theme='dark']) .glass-hero {
  background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0.2) 100%
    ),
    rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

FIM DO CÓDIGO COMENTADO - GLASSMORPHISM */

/* ============================================
   NAVEGAÇÃO
   ============================================ */

/* ------------------------------------------------------------
   ITENS DE NAV DO HEADER

   O ativo é marcado por uma barra de 2px que encosta na base
   do header — não por `text-decoration`, que fica presa ao
   texto. O padding vertical de 21px é o que estica essa barra
   até a borda inferior num header de 64px; mexer nele
   descola o underline.

   O inativo carrega a mesma borda em transparente, senão o
   item salta 2px ao virar ativo.
   ------------------------------------------------------------ */
.navbar__items--left {
  gap: 24px;
}

.navbar__items--left .navbar__link {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  padding: 21px 0;
  color: var(--hdr-icon) !important;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition:
    color 150ms ease,
    border-color 150ms ease;
}

.navbar__items--left .navbar__link:hover,
.navbar__items--left .navbar__item:hover .navbar__link {
  color: var(--hdr-icon-strong) !important;
  border-radius: 0;
}

.navbar__items--left .navbar__link--active {
  color: var(--hdr-icon-strong) !important;
  -webkit-text-decoration: none;
  text-decoration: none;
  border-bottom-color: var(--hdr-accent);
}

/* O caret do dropdown herda a cor do label. */
.navbar__items--left .navbar__link svg {
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .navbar__items--left .navbar__link {
    transition: none;
  }
}

.dropdown__link:hover {
  background-color: rgba(0, 143, 143, 0.1) !important;
  color: var(--ifm-color-primary) !important;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.dropdown__menu {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(34, 51, 69, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.dropdown__link {
  color: #223345 !important;
}

/* ============================================
   CLUSTER DIREITO DO HEADER — BUSCA E TEMA

   Os dois controles são o mesmo objeto em tamanhos
   diferentes: superfície levantada do fundo do navbar,
   borda de 1px e radius 9px — o token de raio "controle"
   do sistema, o mesmo dos itens da sidebar (cards usam
   12–14px).

   Ícones em repouso compartilham uma única cor,
   --hdr-icon. O tom mais apagado (--hdr-muted) fica só
   para texto: placeholder da busca e o badge do atalho.
   ============================================ */

:root {
  --hdr-icon: #5F7570;
  --hdr-muted: #6F8580;
  --hdr-icon-strong: #12211E;
  --hdr-surface: rgba(6, 48, 42, 0.04);
  --hdr-surface-hover: rgba(6, 48, 42, 0.065);
  --hdr-border: rgba(6, 48, 42, 0.1);
  --hdr-border-hover: rgba(6, 48, 42, 0.18);
  --hdr-divider: rgba(6, 48, 42, 0.1);
  --hdr-accent: #00706B;
  --hdr-accent-ring: rgba(0, 112, 107, 0.15);
  --hdr-focus-ring: rgba(0, 112, 107, 0.5);
  --hdr-radius: 9px;
}

html[data-theme='dark'] {
  /* No escuro os valores do esboço: o ícone em repouso é
     #93A8A3 e clareia para #E4EEEB no hover. */
  --hdr-icon: #93A8A3;
  --hdr-muted: #7E938E;
  --hdr-icon-strong: #E4EEEB;
  --hdr-surface: rgba(255, 255, 255, 0.05);
  --hdr-surface-hover: rgba(255, 255, 255, 0.07);
  --hdr-border: rgba(255, 255, 255, 0.09);
  --hdr-border-hover: rgba(255, 255, 255, 0.18);
  --hdr-divider: rgba(255, 255, 255, 0.1);
  --hdr-accent: #2DE2C6;
  --hdr-accent-ring: rgba(45, 226, 198, 0.15);
  --hdr-focus-ring: rgba(45, 226, 198, 0.5);
}

/* ------------------------------------------------------------
   BOTÃO DE TEMA (lua/sol)

   Sem caixa própria em repouso — é só o ícone dentro do
   cluster. A área de 34px existe para o alvo de clique,
   não para desenhar um botão.
   ------------------------------------------------------------ */
.navbar__items--right [class*='colorModeToggle'],
.navbar__items--right [class*='toggle_'] {
  width: 34px;
  height: 34px;
}

.navbar__items--right [class*='toggleButton'] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--hdr-icon);
  background: transparent;
  border: none;
  border-radius: var(--hdr-radius);
  cursor: pointer;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

/* Anula o hover redondo do tema padrão — o raio aqui é o
   mesmo dos outros controles. */
.navbar__items--right [class*='toggleButton']:hover {
  color: var(--hdr-icon-strong);
  background: var(--hdr-surface-hover);
  border-radius: var(--hdr-radius);
}

.navbar__items--right [class*='toggleButton']:focus-visible {
  outline: 2px solid var(--hdr-focus-ring);
  outline-offset: 2px;
}

/* 17px num viewBox de 24: o traço de 1.8 do componente chega
   na tela com o peso da lupa. */
.navbar__items--right [class*='toggleButton'] svg {
  width: 17px;
  height: 17px;
}

/* Separador — isola o utilitário dos links de navegação. */
.navbar__items--right [class*='colorModeToggle']::before,
.navbar__items--right [class*='toggle_']::before {
  content: '';
  align-self: center;
  width: 1px;
  height: 22px;
  margin-right: 10px;
  background: var(--hdr-divider);
}

.navbar__items--right [class*='colorModeToggle'],
.navbar__items--right [class*='toggle_'] {
  display: flex;
  align-items: center;
  width: auto;
}

/* ------------------------------------------------------------
   BUSCA NO HEADER — versão compacta

   Mesmo componente da home em outro tamanho: lá é a
   versão grande (56px, fundo branco, sombra), aqui a
   compacta e discreta. São só dois tamanhos.
   ------------------------------------------------------------ */
.navbar .DocSearch-Button {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  margin: 0;
  padding: 0 12px;
  min-width: 230px;
  background: var(--hdr-surface);
  border: 1px solid var(--hdr-border);
  border-radius: var(--hdr-radius);
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.navbar .DocSearch-Button:hover {
  background: var(--hdr-surface-hover);
  border-color: var(--hdr-border-hover);
  box-shadow: none;
}

/* Aberto e foco recebem o mesmo tratamento: o acento assume
   a borda e o halo confirma que o campo está ativo. */
.navbar .DocSearch-Button:focus-visible,
.navbar .DocSearch-Button:active {
  border-color: var(--hdr-accent);
  box-shadow: 0 0 0 3px var(--hdr-accent-ring);
  outline: none;
}

/* Lupa — 15px e traço mais grosso que o da lua: em tamanho
   menor, 1.8 sumiria. */
.navbar .DocSearch-Button .DocSearch-Search-Icon {
  width: 15px;
  height: 15px;
  margin: 0;
  color: var(--hdr-icon);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.navbar .DocSearch-Button-Placeholder {
  padding: 0;
  flex: 1;
  font-size: 14px;
  color: var(--hdr-muted);
}

/* O flex:1 do placeholder empurra o atalho para a direita. */
.navbar .DocSearch-Button-Keys {
  display: flex;
  align-items: center;
  gap: 1px;
  min-width: 0;
  padding: 2px 6px;
  border: 1px solid var(--hdr-border-hover);
  border-radius: 5px;
}

.navbar .DocSearch-Button-Key {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  top: 0;
  font-family: var(--ifm-font-family-monospace);
  font-size: 11px;
  line-height: 1;
  color: var(--hdr-muted);
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* ============================================
   SIDEBAR - CORES E ESTADOS
   ============================================ */

/* Modo claro - cores do texto */
html:not([data-theme='dark']) .theme-doc-sidebar-item-link,
html:not([data-theme='dark']) .menu__link,
html:not([data-theme='dark']) .navbar__title {
  color: #000000 !important;
}

/* Item ativo - modo claro */
html:not([data-theme='dark']) .theme-doc-sidebar-item-link--active,
html:not([data-theme='dark']) .menu__link--active {
  color: var(--ifm-color-primary) !important;
}

/* Modo dark - item ativo */
[data-theme='dark'] .theme-doc-sidebar-item-link--active,
[data-theme='dark'] .menu__link--active {
  color: var(--ifm-color-primary) !important;
}

/* ============================================
   DARK MODE - NAVEGAÇÃO
   ============================================ */
/* `hero__title` / `hero__subtitle` saíram junto com o hero antigo —
   o título e o subtítulo agora são estilizados no CSS module da home. */

/* Os itens de nav não têm regra própria de dark aqui: repouso,
   hover e ativo saem de --hdr-icon / --hdr-icon-strong /
   --hdr-accent, que já trocam de valor no tema escuro. Uma
   sobrescrita `!important` neste ponto do arquivo venceria a
   seção "ITENS DE NAV DO HEADER" por vir depois. */

[data-theme='dark'] .navbar__title {
  color: #ffffff !important;
}

[data-theme='dark'] .dropdown__link:hover {
  background-color: rgba(0, 255, 246, 0.08) !important;
  color: var(--ifm-color-primary) !important;
  border-radius: 6px;
  transition: all 0.3s ease;
}

[data-theme='dark'] .dropdown__menu {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

[data-theme='dark'] .dropdown__link {
  color: #ffffff !important;
}

/* O botão de tema no modo dark é coberto pela seção
   "CLUSTER DIREITO DO HEADER" — as variáveis --hdr-* já
   trocam de valor em html[data-theme='dark']. */

/* ============================================
   SIDEBAR - RESPONSIVIDADE
   ============================================ */

/* Tablets - ajustar largura do sidebar.

   O piso é 997px, não 768px: abaixo de 996px o Docusaurus move a
   navegação para o drawer e a sidebar de docs sai do fluxo. Manter
   768px aqui reimpunha 240px de largura com `!important` justamente
   na faixa onde ela não deve ocupar espaço. */
@media (max-width: 1200px) and (min-width: 997px) {
  :root {
    --doc-sidebar-width: 240px;
    --rail-sidebar-width: 240px;
  }
}


/* ============================================
   MOBILE — HEADER DE UMA LINHA COM HAMBÚRGUER (≤996px)

   Uma linha só: hambúrguer à esquerda, logo em seguida,
   busca e tema à direita. A navegação mora no drawer
   nativo do Docusaurus (.navbar-sidebar) — dele vêm foco
   preso, Esc para fechar, trava de scroll do body,
   aria-expanded e os sub-menus em camadas.

   O breakpoint é 996px, o mesmo do Docusaurus: abaixo
   dele o tema já esconde os itens do navbar e monta o
   drawer. Casar com esse valor é o que evita a faixa
   entre 768 e 996px onde antes nada aparecia.

   A superfície não muda aqui — o navbar segue #F2F8F7 no
   claro e translúcido no escuro, como no desktop.
   ============================================ */
@media (max-width: 996px) {
  /* Uma linha: a altura volta ao padrão do tema. */
  .navbar {
    height: var(--ifm-navbar-height);
    padding: 0 12px;
  }

  .navbar__inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  /* O hambúrguer é o primeiro elemento da barra, como na
     referência da marca. `order` em vez de reordenar o DOM:
     o tema já o renderiza dentro de .navbar__items--left. */
  .navbar__toggle {
    order: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 40px é o alvo de toque; nunca encolhe. */
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    margin: 0 2px 0 0;
    padding: 0;
    border-radius: 8px;
    /* Mesmo token da lupa e do sol/lua ao lado, não o
       --ifm-navbar-link-color: os três são ícones do header e
       precisam ler como um conjunto. O token já troca por tema —
       #5F7570 no claro, #93A8A3 no escuro. */
    color: var(--hdr-icon);
    background: transparent;
    transition:
      color 160ms cubic-bezier(0.16, 1, 0.3, 1),
      background-color 160ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* O SVG do tema vem em 30px e destoa da lupa e do sol/lua, que
     ficam em 20px. Dimensionar o ícone é separado de dimensionar o
     alvo de toque: o botão segue 40px, o traço desce para 22px.

     A cor vem do `color` do botão acima: o IconMenu do tema é um
     único <path stroke="currentColor">, então herda sozinho — não
     há `fill` a sobrescrever aqui. Forçar `fill: currentColor`
     preencheria um ícone que é só traço e fundiria as três linhas
     num bloco sólido. O viewBox cuida da proporção. */
  .navbar__toggle svg {
    width: 22px;
    height: 22px;
  }

  /* O hover reforça o traço além de pintar o fundo — mesmo
     comportamento dos outros dois ícones do header. */
  .navbar__toggle:hover {
    color: var(--hdr-icon-strong);
    background-color: var(--hdr-surface-hover);
  }

  .navbar__toggle:focus-visible {
    outline: 2px solid var(--ifm-color-primary);
    outline-offset: 2px;
  }

  /* Sem par `html[data-theme='dark']` aqui: --hdr-icon,
     --hdr-icon-strong e --hdr-surface-hover já trocam de valor por
     tema, então uma regra dark separada só repetiria o que os
     tokens resolvem. */

  /* Os itens de navegação saem da barra — eles vivem no drawer.
     O container absorve o espaço livre (`flex: 1 1 auto`) e é ele
     que empurra busca e tema para a direita, mantendo hambúrguer e
     logo encostados à esquerda. `min-width: 0` autoriza o encolher:
     sem isso o conteúdo impõe a largura mínima e estoura a barra. */
  .navbar__items--left {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0;
  }

  .navbar__items--left > .navbar__item,
  .navbar__items--left > .dropdown {
    display: none;
  }

  .navbar__items--left .navbar__brand {
    margin: 0;
    min-width: 0;
  }

  .navbar__logo {
    height: 28px;
    width: auto;
    flex-shrink: 0;
  }

  /* O wordmark é o único elemento que pode ceder largura, e cede
     por elipse em vez de cortar no meio da letra. */
  .navbar__title {
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* Os controles têm largura própria e não participam da disputa:
     `flex: 0 0 auto` é o que impedia a lupa e o sol/lua de
     encolherem até se sobrepor. */
  .navbar__items--right {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 2px;
    padding-left: 8px;
  }

  .navbar__items--right > * {
    flex: 0 0 auto;
  }

  /* O link "Site" sai da barra: ele competiria com a logo por
     largura. O drawer nativo já o lista, então nada se perde.

     O alvo é `.navbar__link` e não `.navbar__item` sozinho — no
     markup do tema a busca é um `.navbarSearchContainer_*` e o
     toggle de tema um `[class*='toggle_']`, nenhum dos dois com a
     classe `navbar__item`. Recortar pelo link é o que atinge só os
     links de verdade e deixa os dois controles em pé. */
  .navbar__items--right > .navbar__item.navbar__link {
    display: none;
  }

  /* A busca colapsa para só a lupa: o campo de 230px não
     cabe ao lado da logo. Muda a largura, não o componente —
     superfície e raio seguem os do desktop. */
  .navbar .DocSearch-Button {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    flex: 0 0 40px;
    margin: 0;
    padding: 0;
    justify-content: center;
  }

  /* De volta ao fluxo. Em ≤996px o theme-classic aplica
     `position: absolute; right: <pad>` neste container — no layout
     nativo o toggle de tema não fica na barra em mobile, então
     ancorar a busca à direita não colide com nada. Aqui os dois
     convivem, e a busca absoluta pousava exatamente sobre o
     sol/lua. `static` devolve o container ao flex, onde as larguras
     fixas abaixo passam a valer de fato. */
  .navbar .navbar__items--right [class*='navbarSearchContainer'] {
    position: static;
    right: auto;
    flex: 0 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
  }

  .navbar .DocSearch-Button-Placeholder,
  .navbar .DocSearch-Button-Keys {
    display: none;
  }

  /* Sem os links de navegação ao lado, o separador não tem
     o que separar. */
  .navbar__items--right [class*='colorModeToggle']::before,
  .navbar__items--right [class*='toggle_']::before {
    display: none;
  }

  .navbar__items--right [class*='toggleButton'] {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding: 0;
  }

  .navbar__items--right [class*='toggleButton'] svg {
    width: 20px;
    height: 20px;
  }

  /* ============================================
     DRAWER — MESMA SUPERFÍCIE DO NAVBAR

     O drawer é opaco de propósito: ele cobre o conteúdo,
     e translucidez aqui deixaria o texto de baixo
     atravessar os links do menu.
     ============================================ */
  .navbar-sidebar {
    background: #F2F8F7;
  }

  html[data-theme='dark'] .navbar-sidebar {
    background: #0B1F1D;
  }

  .navbar-sidebar__brand {
    padding: 0 12px;
    height: var(--ifm-navbar-height);
    box-shadow: none;
    border-bottom: 1px solid rgba(6, 48, 42, 0.1);
  }

  html[data-theme='dark'] .navbar-sidebar__brand {
    border-bottom-color: rgba(255, 255, 255, 0.09);
  }

  .navbar-sidebar__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    color: var(--ifm-navbar-link-color);
    transition: background-color 160ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .navbar-sidebar__close:hover {
    background-color: rgba(0, 122, 122, 0.09);
  }

  html[data-theme='dark'] .navbar-sidebar__close:hover {
    background-color: rgba(79, 216, 212, 0.14);
  }

  .navbar-sidebar__items {
    padding: 8px 0;
  }

  /* Itens do drawer: alvo de toque de 44px e hierarquia
     legível. O peso 500 nos itens de primeiro nível separa
     as categorias dos links que elas abrem. */
  .navbar-sidebar .menu__list-item {
    margin: 0;
  }

  .navbar-sidebar .menu__link,
  .navbar-sidebar .menu__list-item-collapsible > .menu__link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.975rem;
    font-weight: 500;
    line-height: 1.4;
  }

  /* Os links dentro de uma categoria recuam e afinam — o
     recuo é o que mostra que pertencem ao item acima. */
  .navbar-sidebar .menu__list .menu__list .menu__link {
    padding-left: 28px;
    font-weight: 400;
  }

  .navbar-sidebar .menu__link:hover,
  .navbar-sidebar .menu__list-item-collapsible:hover > .menu__link {
    background-color: rgba(0, 122, 122, 0.09);
  }

  html[data-theme='dark'] .navbar-sidebar .menu__link:hover,
  html[data-theme='dark'] .navbar-sidebar .menu__list-item-collapsible:hover > .menu__link {
    background-color: rgba(79, 216, 212, 0.12);
  }

  /* A página atual fica sólida em teal — no drawer o
     sublinhado do desktop não teria contraste suficiente
     contra os outros itens. */
  .navbar-sidebar .menu__link--active {
    color: var(--ifm-color-primary);
    background-color: rgba(0, 122, 122, 0.13);
  }

  html[data-theme='dark'] .navbar-sidebar .menu__link--active {
    background-color: rgba(79, 216, 212, 0.16);
  }

  .navbar-sidebar__backdrop {
    background-color: rgba(3, 20, 18, 0.5);
  }

  /* ============================================
     CONTEÚDO
     ============================================ */
  .theme-doc-sidebar-container,
  aside[class*='docSidebarContainer'] {
    width: auto;
    min-width: auto;
    max-width: none;
  }

  .theme-doc-sidebar-container .menu__link {
    white-space: normal;
  }

  .docs-wrapper .main-wrapper {
    padding-top: 0;
  }
}

/* Na home, e SÓ no topo do tema escuro, o navbar é transparente
   sobre a faixa escura do hero — ali o traço precisa clarear.

   Dois recortes que faltavam:

   `html[data-theme='dark']` — a faixa é escura apenas no tema
   escuro. No claro ela é `linear-gradient(168deg, #F2F8F7,
   #E4F0ED, #b4c0bd)`, e um traço branco sobre isso desaparece.

   `:not([data-scrolled])` — ao rolar, a regra em
   `body[data-scrolled]:has(...)` devolve o fundo claro (#F2F8F7)
   ao navbar, então o branco também tem de sair ali. */
@media (max-width: 996px) {
  html[data-theme='dark']
    body:not([data-scrolled]):has([data-home-hero]) .navbar__toggle {
    color: rgba(255, 255, 255, 0.82);
  }

  html[data-theme='dark']
    body:not([data-scrolled]):has([data-home-hero]) .navbar__toggle:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.14);
  }

  /* Já aberto, o drawer é opaco e tem superfície própria — aqui o
     X volta ao tom do texto normal, em qualquer posição de rolagem. */
  body:has([data-home-hero]) .navbar-sidebar__close {
    color: var(--hdr-icon-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar__toggle,
  .navbar-sidebar__close,
  .navbar-sidebar .menu__link {
    transition: none;
  }
}


/* ============================================
   FOOTER
   ============================================ */
  
/* Quatro colunas alinhadas à esquerda, títulos em monoespaçada
   maiúscula e peso visual baixo. O rodapé é onde vive o detalhe
   cortado dos cards — presente, mas nunca competindo. */
.footer {
  padding: clamp(2.5rem, 5svh, 3.5rem) var(--home-pad, 2.5rem);
  background-color: #F5F7F7;
  border-top: 1px solid rgba(6, 48, 42, 0.09);
  /* Nas páginas de doc a sidebar (--rail-bg, mais clara) e sua
     border-right descem até aqui e morriam contra o rodapé: o
     tom mudava na vertical e a linha do trilho cruzava a borda
     superior. Na home não havia trilho nenhum, e era essa a
     diferença que sobrava depois de igualar os tokens.

     position/z-index tiram o rodapé do fluxo de pintura dos
     trilhos, então ele fecha a página como uma faixa única de
     borda a borda nas duas rotas. */
  position: relative;
  z-index: 1;
}

html[data-theme='dark'] .footer {
  background-color: #1a1b1b;
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* Mesma coluna do hero e das seções: 1200px centralizados.

   O `!important` no max-width não é decorativo — sem ele esta regra
   perde para `.docs-wrapper .container { max-width: none !important }`
   (src/css/rails.css). Como `docs-wrapper` fica no <html>, aquele
   seletor alcança o rodapé, e o resultado era doc full-bleed contra
   home travada em 1200px. Com o !important aqui as duas rotas ficam
   contidas na mesma largura. */
.footer .container {
  max-width: var(--home-max, 1200px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  width: 100% !important;
}

.footer__links {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem 2rem !important;
  margin: 0 !important;
}

.footer__col {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: left !important;
}

.footer__title {
  margin-bottom: 0.9rem !important;
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* emphasis-600 daria 2,79:1 e reprovaria — peso baixo vem do
     tamanho e do tracking, não de apagar a cor. */
  color: var(--ifm-color-emphasis-700);
}

html[data-theme='dark'] .footer__title {
  color: rgba(255, 255, 255, 0.55);
}

.footer__item {
  display: block !important;
  margin-top: 0.5rem;
}

.footer__link-item {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ifm-color-emphasis-800);
  transition: color 160ms ease;
}

.footer__link-item:hover {
  color: var(--trl-teal);
  -webkit-text-decoration: none;
  text-decoration: none;
}

html[data-theme='dark'] .footer__link-item {
  color: rgba(255, 255, 255, 0.78);
}

html[data-theme='dark'] .footer__link-item:hover {
  color: #4FD8D4;
}

.footer__copyright {
  margin-top: 2.5rem !important;
  padding-top: 1.5rem !important;
  font-size: 0.82rem;
  text-align: left !important;
  color: var(--ifm-color-emphasis-700);
  border-top: 1px solid rgba(6, 48, 42, 0.09) !important;
}

html[data-theme='dark'] .footer__copyright {
  color: rgba(255, 255, 255, 0.5);
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

@media (max-width: 996px) {
  .footer__links {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 560px) {
  .footer__links {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }
}

/* ============================================
   BOTÕES DE PAGINAÇÃO (AVANÇAR/VOLTAR)
   ============================================ */

/* Mesma superfície dos cartões de Soluções: branco sólido, borda
   fina tingida de teal, sombra em duas camadas. O hover trabalha
   por profundidade — a borda vira teal e a elevação cresce. */
.pagination-nav__link {
  background: #fafafa !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: var(--home-radius, 10px);
  border: 1px solid rgba(0, 77, 74, 0.1);
  box-shadow: 0 1px 2px rgba(0, 30, 29, 0.06), 0 2px 8px rgba(0, 30, 29, 0.05);
  transition:
    background-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Clareia no hover: com o repouso em #f5f5f5, subir para branco
   reforça a elevação que a sombra sozinha não entrega. */
.pagination-nav__link:hover {
  background: #ffffff !important;
  border-color: var(--trl-teal);
  box-shadow: 0 2px 4px rgba(0, 46, 44, 0.08), 0 8px 20px rgba(0, 77, 74, 0.13);
  transform: translateY(-2px);
}

/* Modo Dark - Botões de Paginação */
[data-theme='dark'] .pagination-nav__link {
  background: #03141241 !important;
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* Sobe a opacidade no hover em vez de trocar de cor — mesma
   família, elevação perceptível. */
[data-theme='dark'] .pagination-nav__link:hover {
  background: #0314128f !important;
  border-color: rgba(0, 255, 246, 0.4);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .pagination-nav__link {
    transition: none;
  }

  .pagination-nav__link:hover {
    transform: none;
  }
}

/* ============================================
   MOBILE - ESCONDER TOC E SIDEBAR PADRÃO
   ============================================ */
@media (max-width: 996px) {
  /* Esconder completamente o "Nessa página" (Table of Contents) no mobile */
  .theme-doc-toc-mobile,
  .tocMobile_src-theme-TOCCollapsible-styles-module,
  aside[class*="tocMobile"],
  div[class*="tocMobile"],
  .table-of-contents,
  aside.theme-doc-sidebar-container,
  .theme-doc-sidebar-container {
    display: none !important;
  }
  
  /* Ajustar layout da página de docs no mobile */
  .docPage {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Container principal deve ocupar toda largura */
  .docMainContainer,
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Garantir que o row ocupe toda largura */
  .row {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}


/* ============================================================
   PÁGINAS INTERNAS — CONTINUIDADE COM A HOME

   A home é vitrine e pode gritar; a página interna é
   ferramenta e deve sussurrar. Elas compartilham paleta,
   superfície e componentes — não escala.
   ============================================================ */

/* ------------------------------------------------------------
   ESCALA DE SUPERFÍCIES

   Três níveis derivados do mesmo verde-escuro da home. As
   colunas se distinguem por superfície, não por divisória de
   1px. Toda a temperatura permanece esverdeada.
   ------------------------------------------------------------ */
:root {
  --srf-canvas: #F1F6F5;   /* coluna de conteúdo */
  --srf-rail: #FAFCFB;     /* sidebar e TOC */
  --srf-raised: #FFFFFF;   /* cards, código, callouts */
  --srf-border: rgba(0, 77, 74, 0.1);
  --srf-accent-soft: rgba(0, 143, 143, 0.08);
}

html[data-theme='dark'] {
  --srf-canvas: #1a1b1b;
  --srf-rail: #14201E;
  --srf-raised: #1E2A29;
  --srf-border: rgba(255, 255, 255, 0.09);
  --srf-accent-soft: rgba(0, 255, 246, 0.07);
}

/* ------------------------------------------------------------
   BRILHO DE CONTINUIDADE

   O halo teal do canto da home reaparece atrás do topo do
   conteúdo, em opacidade bem menor. Sutil, mas é o que faz o
   site parecer um só.
   ------------------------------------------------------------ */
body:not(:has([data-home-hero])) .main-wrapper {
  position: relative;
}

/* O glow abaixo (::before) é absolute com right:-100px sobre o
   .main-wrapper relative acima — isso soma ao scrollWidth do
   documento (absolute conta para overflow, diferente de fixed),
   abrindo scroll horizontal só em páginas de doc (só elas caem
   neste seletor, pela exclusão de [data-home-hero]).

   overflow-x só entra ≤996px: .main-wrapper é ancestral direto do
   sidebar (Layout do tema envolve DocPage/Layout com esta mesma
   div — ver node_modules/@docusaurus/theme-classic/lib/theme/
   Layout/index.js), que depende de `position: sticky` para grudar
   no topo. Um ancestral com `overflow` quebra esse sticky em vários
   navegadores. Em desktop/tablet (>996px) o sidebar está visível e
   precisa do sticky — o glow ali é aceito sem contenção. Em mobile
   (≤996px, mesmo breakpoint que custom.css usa para dar `display:
   none` ao sidebar nativo) o sticky já não importa, então cortar o
   glow ali é seguro e fecha o scroll horizontal onde ele acontecia. */
@media (max-width: 996px) {
  body:not(:has([data-home-hero])) .main-wrapper {
    overflow-x: hidden;
  }
}

body:not(:has([data-home-hero])) .main-wrapper::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -100px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    circle,
    rgba(25, 192, 168, 0.07) 0%,
    rgba(25, 192, 168, 0) 68%
  );
}

html[data-theme='dark'] body:not(:has([data-home-hero])) .main-wrapper::before {
  background: radial-gradient(
    circle,
    rgba(25, 192, 168, 0.1) 0%,
    rgba(25, 192, 168, 0) 68%
  );
}

/* Sidebar e TOC vivem em src/css/rails.css — os dois trilhos
   seguem um sistema próprio e compartilhado. */

/* ------------------------------------------------------------
   RESPIRO DO ARTIGO

   O `.container` do Docusaurus tem o max-width anulado em
   rails.css, então o conteúdo encostava na borda da coluna.

   O <article> embrulha breadcrumb e markdown, mas a paginação
   é irmã dele, não filha — por isso as duas recebem o mesmo
   padding a partir de um token único, para nunca saírem de
   alinhamento quando o valor mudar.
   ------------------------------------------------------------ */
:root {
  --doc-gutter: clamp(1.5rem, 7vw, 7rem);
  /* Medida da coluna de conteúdo. O par conteúdo+trilho é
     centralizado no espaço que sobra depois da sidebar. */

}

article,
.pagination-nav {
  padding-inline: var(--doc-gutter);
}

/* No mobile o .docMainContent já aplica 16px lateral — somar o
   do artigo comprimiria a medida de leitura. */
@media (max-width: 996px) {
  :root {
    --doc-gutter: 0px;
  }
}

/* ------------------------------------------------------------
   O PAR CONTEÚDO + TRILHO

   O `--doc-gutter` (7vw de cada lado) empurrava o conteúdo para
   dentro: a coluna ficava em 621px e sobravam ~117px de vão morto
   entre o fim do texto e o sumário. A coluna passa a ter medida
   própria e o par é centralizado junto, com o trilho encostado no
   conteúdo.
   ------------------------------------------------------------ */
@media (min-width: 997px) {
  .docs-wrapper .row:has(> .col--3) {
    justify-content: center;
  }

  /* A medida vem de --doc-measure, não de vw. */
  .docs-wrapper .row > .col:not(.col--3) {
    flex: 0 1 var(--doc-measure);
    max-width: var(--doc-measure);
  }

  /* `col--3` era ~285px para um trilho de 236px, e a sobra virava
     faixa vazia à direita do sumário. */
  .docs-wrapper .row > .col--3:has(> .theme-doc-toc-desktop) {
    flex: 0 0 var(--rail-toc-width);
    width: var(--rail-toc-width);
    max-width: var(--rail-toc-width);
  }

  /* A coluna já está contida — o artigo não precisa de recuo. */
  :root {
    --doc-gutter: 0px;
  }
}

/* ------------------------------------------------------------
   ESCALA TIPOGRÁFICA E LARGURA DE LEITURA

   H1 da interna com cerca de metade do H1 da home. Corpo
   limitado à coluna de leitura — antes o texto atravessava a
   tela inteira.
   ------------------------------------------------------------ */
.markdown > h1,
.theme-doc-markdown h1 {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 1.25rem;
}

/* H2 com régua ocupando o resto da linha: ritmo sem peso */
.markdown > h2 {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 2.75rem;
  margin-bottom: 1rem;
}

.markdown > h2::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--srf-border);
}

.markdown > h3 {
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-top: 2rem;
}

/* ------------------------------------------------------------
   PARÁGRAFO DE ABERTURA

   Um degrau acima do corpo: é o único parágrafo que o leitor lê
   por inteiro antes de começar a varrer as caixas. Sem isso ele
   pesa igual a uma legenda de bloco.
   ------------------------------------------------------------ */
.intro-lede {
  max-width: 62ch;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ifm-color-emphasis-800);
}

/* Coluna de leitura: 70–75 caracteres */
.markdown > p,
.markdown > ul,
.markdown > ol,
.markdown > blockquote {
  max-width: 72ch;
}

/* ------------------------------------------------------------
   BLOCO DE CÓDIGO — GRADIENTE DO PRODUCTHEADER

   Antes usava a mesma superfície sólida + sombra das tabelas
   ("Card/Code"). Um bloco de código não é um card: troca o
   preenchimento sólido pelo mesmo gradiente radial teal quase
   invisível e a borda fina do ProductHeader (styles.module.css),
   para se identificar como código e não como mais um card na
   página. Sem sombra no claro; o escuro mantém a elevação (já se
   distingue do canvas por luminância) com o gradiente por cima.
   ------------------------------------------------------------ */
.theme-code-block {
  /* !important necessário: a classe CSS Module do próprio Docusaurus
     (.codeBlockContainer_XXXX, ver Container/styles.module.css) seta
     "background: var(--prism-background-color)" no mesmo elemento e
     é injetada depois deste arquivo — mesma especificidade de classe,
     vence por ordem. Sem isso o gradiente é substituído por
     --prism-background-color (transparent, do prismTheme.js). */
  background:
    radial-gradient(ellipse 60% 120% at 88% 0%, rgba(0, 143, 143, 0.1) 0%, transparent 62%),
    linear-gradient(140deg, rgba(0, 143, 143, 0.06) 0%, rgba(0, 143, 143, 0.02) 100%) !important;
  border-radius: var(--home-radius, 10px);
  border: 1px solid rgba(0, 143, 143, 0.2);
  box-shadow: none;
  overflow: hidden;
}

/* O <pre> interno (filho do wrapper acima) não pode ter a própria
   borda/radius/fundo — senão duplica a moldura do wrapper visualmente
   com um radius diferente por cima. Fica neutro; o gradiente e a
   borda vêm só do .theme-code-block. */
.theme-code-block pre {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

html[data-theme='dark'] .theme-code-block {
  background:
    radial-gradient(ellipse 60% 120% at 88% 0%, rgba(0, 255, 246, 0.08) 0%, transparent 62%),
    linear-gradient(140deg, rgba(0, 255, 246, 0.05) 0%, transparent 55%),
    var(--srf-raised) !important;
  border-color: rgba(0, 255, 246, 0.16);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* Botão de copiar nativo do Docusaurus: mira as variáveis que
   Buttons/styles.module.css já usa (--prism-background-color,
   --prism-color, --ifm-color-emphasis-300) em vez da classe
   hasheada do CSS Module, que muda a cada build. */
.theme-code-block button {
  --prism-background-color: rgba(0, 143, 143, 0.1);
  --prism-color: #00595A;
  --ifm-color-emphasis-300: rgba(0, 143, 143, 0.22);
}

.theme-code-block button:hover,
.theme-code-block button:focus-visible {
  --prism-background-color: rgba(0, 143, 143, 0.18);
}

html[data-theme='dark'] .theme-code-block button {
  --prism-background-color: rgba(0, 255, 246, 0.08);
  --prism-color: #9FE0DC;
  --ifm-color-emphasis-300: rgba(0, 255, 246, 0.22);
}

html[data-theme='dark'] .theme-code-block button:hover,
html[data-theme='dark'] .theme-code-block button:focus-visible {
  --prism-background-color: rgba(0, 255, 246, 0.16);
}

/* ------------------------------------------------------------
   SUPERFÍCIE ELEVADA — TABELAS

   Mesmo raio, mesma borda e mesma sombra dos cards da home.
   ------------------------------------------------------------ */
.markdown table {
  border-radius: var(--home-radius, 10px);
  border: 1px solid var(--srf-border);
  overflow: hidden;
}

.markdown table thead {
  background: var(--srf-accent-soft);
}

.markdown table th {
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ifm-color-emphasis-800);
}

/* ------------------------------------------------------------
   CALLOUTS

   Borda de acento à esquerda, fundo tingido. Substitui as
   cores default do Docusaurus nos tipos informativos;
   warning e danger mantêm as próprias, que carregam
   significado.
   ------------------------------------------------------------ */
.theme-admonition {
  border-radius: var(--home-radius, 10px);
  border: 1px solid var(--srf-border);
  box-shadow: none;
  max-width: 72ch;
}

/* O fundo tingido e o ícone já distinguem o bloco; uma barra
   colorida grossa à esquerda seria redundante além de ser um
   clichê. A borda inteira recebe o acento em baixa opacidade —
   o bloco se destaca sem tab lateral. */
.theme-admonition-note,
.theme-admonition-info,
.theme-admonition-tip {
  background: var(--srf-accent-soft);
  border-color: rgba(0, 143, 143, 0.28);
}

html[data-theme='dark'] .theme-admonition-note,
html[data-theme='dark'] .theme-admonition-info,
html[data-theme='dark'] .theme-admonition-tip {
  border-color: rgba(0, 255, 246, 0.22);
}

/* O ícone do callout carrega o acento */
.theme-admonition-note svg,
.theme-admonition-info svg,
.theme-admonition-tip svg {
  fill: var(--ifm-color-primary);
}

/* ------------------------------------------------------------
   BREADCRUMB E LINKS DE CORPO NO ACENTO
   ------------------------------------------------------------ */
.breadcrumbs__link {
  font-size: 0.82rem;
}

.breadcrumbs__item--active .breadcrumbs__link {
  background: var(--srf-accent-soft);
  color: var(--ifm-color-primary);
}

.markdown a:not(.card):not(.button) {
  color: var(--ifm-color-primary);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* ------------------------------------------------------------
   NAVEGAÇÃO ANTERIOR / PRÓXIMO COMO CARDS

   O sublabel ("Anterior"/"Próximo") vira label de categoria em
   mono maiúscula; o título do destino ganha o peso.
   ------------------------------------------------------------ */
/* Alinhada totalmente à direita: os dois cards se agrupam no
   fim da linha em vez de ocuparem a largura de leitura. Sem o
   `max-width: 72ch` do resto do conteúdo — é navegação, não
   texto, e não precisa respeitar a medida de leitura.

   O grid do Docusaurus é 1fr 1fr com o "Próximo" na coluna 2;
   `flex` com `justify-content: flex-end` deixa cada card com a
   largura do próprio conteúdo, encostados à direita. */
/* Os dois cards dividem a largura da coluna em partes iguais. Como
   caixas da mesma família das outras, ocupam a medida inteira em
   vez de se encolherem no canto direito. */
.pagination-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: none;
  gap: 0.85rem;
}

/* Os dois cards com a mesma largura, independente do tamanho do
   título do destino: `flex-basis: 0` com `flex-grow: 1` divide o
   espaço em partes iguais em vez de deixar cada um encolher para
   o próprio conteúdo. */
.pagination-nav__link {
  max-width: none;
}

/* Sem irmão "anterior", o "próximo" cairia na coluna 1 e deixaria
   metade da linha vazia. */
.pagination-nav__link--next:only-child {
  grid-column: 2;
}

.pagination-nav__sublabel {
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ifm-color-emphasis-700);
  margin-bottom: 0.35rem;
}

.pagination-nav__label {
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* A seta default do Docusaurus vem no próprio label como texto */
.pagination-nav__link--prev .pagination-nav__label::before,
.pagination-nav__link--next .pagination-nav__label::after {
  color: var(--ifm-color-primary);
}

/* ------------------------------------------------------------
   CÓDIGO INLINE — TINGIDO, NÃO CINZA
   ------------------------------------------------------------ */
.markdown code:not(pre code) {
  background: var(--srf-accent-soft);
  border: 1px solid var(--srf-border);
  border-radius: 4px;
  font-size: 0.86em;
  padding: 0.12em 0.38em;
}

/* ------------------------------------------------------------
   IMAGENS E BLOCOS DENTRO DA COLUNA DE LEITURA
   ------------------------------------------------------------ */
.markdown > img,
.markdown > figure {
  max-width: 72ch;
  border-radius: var(--home-radius, 10px);
}

/* ------------------------------------------------------------
   R20 · GLOSSÁRIO — LISTA DE DEFINIÇÃO
   Substitui tabela "Termo | Definição" (regra R20 do playbook
   Nexa). Sem cabeçalho de tabela, sem zebra, sem borda externa.
   ------------------------------------------------------------ */
.dg-glossario {
  display: flex;
  flex-direction: column;
}
.dg-glossario__linha {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--srf-border);
}
.dg-glossario__linha:first-child {
  border-top: none;
}
.dg-glossario__termo {
  font-weight: 600;
  font-size: 15px;
  color: var(--ifm-color-emphasis-900);
}
.dg-glossario__sinonimo {
  font-family: var(--ifm-font-family-monospace);
  font-size: 11px;
  color: var(--ifm-color-emphasis-600);
  margin-left: 6px;
}
.dg-glossario__def {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ifm-color-emphasis-800);
}

/* ------------------------------------------------------------
   R4 · TABELA DE CÓDIGOS — PARES CÓDIGO → SIGNIFICADO
   Substitui tabela de status/erro/enum (regra R4). Severidade em
   chip pill, nunca cor de fundo na linha inteira.
   ------------------------------------------------------------ */
.dg-codigos {
  display: flex;
  flex-direction: column;
}
.dg-codigos__linha {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid var(--srf-border);
}
.dg-codigos__linha--2cod {
  /* variação com duas colunas de código (ex.: fila + status interno) */
  grid-template-columns: 120px 70px 1fr;
}
.dg-codigos__linha:first-child {
  border-top: none;
}
.dg-codigos__codigo {
  font-family: var(--ifm-font-family-monospace);
  font-size: 12.5px;
  background: var(--srf-accent-soft);
  border-radius: 3px;
  padding: 3px 7px;
  width: fit-content;
}
.dg-codigos__codigo--vazio {
  color: var(--ifm-color-emphasis-500);
  background: transparent;
  padding: 3px 7px;
}
.dg-codigos__significado {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ifm-color-emphasis-800);
}

/* ------------------------------------------------------------
   R15 · ENDPOINT — cabeçalho de método + path, corpo com specs
   Um card por endpoint; chip de método sem semáforo (mesma cor
   para todos os verbos), path em mono, descrição intocada abaixo.
   ------------------------------------------------------------ */
.dg-endpoints {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dg-endpoint {
  background: var(--srf-raised, #fff);
  border: 1px solid var(--srf-border);
  border-radius: 7px;
  overflow: hidden;
}
.dg-endpoint__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  background: var(--srf-accent-soft);
  padding: 10px 14px;
}
.dg-endpoint__metodo {
  font-family: var(--ifm-font-family-monospace);
  font-size: 11.5px;
  text-transform: uppercase;
  color: var(--ifm-color-emphasis-700);
  background: var(--srf-raised, #fff);
  border: 1px solid var(--srf-border-dashed, var(--srf-border));
  border-radius: 4px;
  padding: 2px 7px;
  flex: none;
}
.dg-endpoint__path {
  font-family: var(--ifm-font-family-monospace);
  font-size: 14px;
  color: var(--ifm-color-emphasis-900, #191d1c);
  overflow-wrap: break-word;
  min-width: 0;
}
.dg-endpoint__desc {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ifm-color-emphasis-800);
  padding: 10px 14px;
}

/* ------------------------------------------------------------
   R20 · VARIAÇÃO 3 COLUNAS — item + responsável/atributo + descrição
   Mesma anatomia do glossário, com uma coluna extra estreita.
   ------------------------------------------------------------ */
.dg-glossario__linha--3col {
  grid-template-columns: 180px 130px 1fr;
}
.dg-glossario__atributo {
  font-size: 13px;
  color: var(--ifm-color-emphasis-700);
}

/* ------------------------------------------------------------
   R3 · LINHA DE ESPECIFICAÇÃO — parâmetro/campo/payload
   Nome em chip mono + tipo/formato abaixo; descrição à direita,
   com o default como chip mono inline quando houver.
   ------------------------------------------------------------ */
.dg-spec {
  display: flex;
  flex-direction: column;
}
.dg-spec__linha {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--srf-border);
}
.dg-spec__linha:first-child {
  border-top: none;
}
.dg-spec__nome {
  font-family: var(--ifm-font-family-monospace);
  font-size: 12.5px;
  background: var(--srf-accent-soft);
  border-radius: 3px;
  padding: 3px 7px;
  width: fit-content;
}
.dg-spec__tipo {
  font-family: var(--ifm-font-family-monospace);
  font-size: 10.5px;
  color: var(--ifm-color-emphasis-600);
  margin-top: 4px;
}
.dg-spec__obrigatorio {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--dg-ambar-texto, #7a5c12);
  background: var(--dg-ambar-tint, #fdf4e0);
  border-radius: 999px;
  padding: 1px 8px;
  margin-top: 4px;
}
.dg-spec__desc {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ifm-color-emphasis-800);
}

/* ------------------------------------------------------------
   R22 · CAMPOS DE TELA / FORMULÁRIO — pares rótulo-valor
   Rótulo exatamente como aparece na interface + chip "obrigatório"
   quando a origem disser; explicação à direita.
   ------------------------------------------------------------ */
.dg-campos {
  display: flex;
  flex-direction: column;
}
.dg-campos__linha {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid var(--srf-border);
}
.dg-campos__linha:first-child {
  border-top: none;
}
.dg-campos__rotulo {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ifm-color-emphasis-900);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dg-campos__obrigatorio {
  font-size: 11px;
  font-weight: 600;
  color: var(--dg-ambar-texto, #7a5c12);
  background: var(--dg-ambar-tint, #fdf4e0);
  border-radius: 999px;
  padding: 1px 8px;
}
.dg-campos__explicacao {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ifm-color-emphasis-800);
}

/* ------------------------------------------------------------
   R1 · VARIAÇÃO 2 COLUNAS — intenção → link (sem código de item)
   Mesmas larguras/ritmo da lista de capítulos, sem a coluna 52px
   quando a origem não tem um identificador curto para essa posição.
   ------------------------------------------------------------ */
.dg-rota {
  display: flex;
  flex-direction: column;
}
.dg-rota__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid var(--srf-border);
}
.dg-rota__linha:first-child {
  border-top: none;
}
.dg-rota__intencao {
  font-size: 14.5px;
  color: var(--ifm-color-emphasis-800);
}
.dg-rota__destino {
  font-size: 15px;
  font-weight: 500;
}

/* ------------------------------------------------------------
   R16 · PROCEDIMENTO EM PROSA → PASSOS NUMERADOS
   Substitui lista numerada em Markdown por um card por passo —
   mesma anatomia do Track/TrackGrid do intro (chip numérico
   quadrado + título em negrito + corpo), mantendo o texto do
   passo na redação original.
   ------------------------------------------------------------ */
.dg-passos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.dg-passo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--srf-raised, #fff);
  border: 1px solid var(--srf-border);
  border-radius: var(--home-radius, 10px);
}
.dg-passo__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.3rem;
  border-radius: 5px;
  background: var(--srf-accent-soft);
  border: 1px solid var(--srf-border);
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ifm-color-primary);
  margin-top: 0.1rem;
}
.dg-passo__texto {
  font-size: 15px;
  line-height: 1.55;
}
.dg-passo__texto strong:first-child {
  font-weight: 700;
}
.dg-passo__titulo {
  display: block;
  margin-bottom: 6px;
}
.dg-passo__subitens {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dg-passo__subitens li {
  font-size: 15px;
  line-height: 1.5;
}

/* ============================================================
   DIAGRAMAS RD — TOKENS E PRIMITIVAS

   Substitui fluxograma/mermaid fora do sistema (regra RD do
   playbook Nexa, .claude/skills/impeccable/reference/nexa-docs.md).
   Nenhuma regra abaixo declara `font-family`: nó, aresta e chip
   herdam a tipografia da página — só tamanho, peso e cor mudam.

   Escuro deriva do mesmo princípio do --ifm-color-primary (linha
   ~120 de custom.css): teal clareia para manter contraste sobre
   fundo escuro; superfície e texto seguem a escala --srf-* já
   estabelecida, não uma paleta nova.
   ============================================================ */
:root {
  /* superfícies */
  --dg-bg-pagina: #f7faf9;
  --dg-bg-card: #ffffff;
  --dg-bg-sutil: #ffffff;
  --dg-bg-chip: #eef4f3;

  /* teal */
  --dg-teal: #2c7d75;
  --dg-teal-escuro: #1f5f59;
  --dg-teal-tint: #deeeed;
  --dg-teal-borda: #c9e2df;
  --dg-teal-texto: #35514d;

  /* âmbar — só desvio/exceção */
  --dg-ambar: #d9b24c;
  --dg-ambar-tint: #fdf4e0;
  --dg-ambar-borda: #ecd9a8;
  --dg-ambar-texto: #7a5c12;

  /* vermelho — só semáforo de painel externo (Grafana), nunca em RD */
  --dg-vermelho: #c2603a;
  --dg-vermelho-tint: #f8e3dc;
  --dg-vermelho-borda: #eec7b6;
  --dg-vermelho-texto: #7a3418;

  /* verde — só semáforo de painel externo (Grafana), nunca em RD */
  --dg-verde: #4fa97c;
  --dg-verde-tint: #e4f2e9;
  --dg-verde-borda: #c3e3d1;
  --dg-verde-texto: #2f5641;

  /* neutros */
  --dg-borda-card: #d7e0de;
  --dg-divisor: #dde5e3;
  --dg-divisor-leve: #eef2f1;
  --dg-tracejado: #b9c6c3;
  --dg-tracejado-fraco: #c3cecc;

  /* texto */
  --dg-titulo: #191d1c;
  --dg-corpo: #2f3a38;
  --dg-secundario: #4a5654;
  --dg-terciario: #7a8785;
  --dg-fraco: #8b9997;
  --dg-mono: #6b7876;

  /* geometria */
  --dg-espacador: 26px; /* entre nós de uma tira */
  --dg-linha-h: 16px; /* trecho horizontal dentro do espaçador */
  --dg-descida: 18px; /* descida vertical padrão */
  --dg-descida-n3: 16px; /* descida no 3º nível de hierarquia */
  --dg-traco: 1.5px; /* espessura de toda aresta */
}

html[data-theme='dark'] {
  /* superfícies — mesma escala de --srf-canvas/--srf-raised */
  --dg-bg-pagina: #14201e;
  --dg-bg-card: #1e2a29;
  --dg-bg-sutil: #1e2a29;
  --dg-bg-chip: #223231;

  /* teal — mesmo clareamento do --ifm-color-primary escuro */
  --dg-teal: #4fd8d4;
  --dg-teal-escuro: #8ff0ec;
  --dg-teal-tint: #123634;
  --dg-teal-borda: #2c5451;
  --dg-teal-texto: #a9e8e4;

  /* âmbar — clareado na mesma proporção, mesma função de exceção */
  --dg-ambar: #e8c877;
  --dg-ambar-tint: #3a2f14;
  --dg-ambar-borda: #5c4a20;
  --dg-ambar-texto: #f0cd7e;

  /* vermelho — mesmo clareamento, só semáforo de painel externo */
  --dg-vermelho: #e8916f;
  --dg-vermelho-tint: #3a2318;
  --dg-vermelho-borda: #5c3a28;
  --dg-vermelho-texto: #f0b294;

  /* verde — mesmo clareamento, só semáforo de painel externo */
  --dg-verde: #7cd4ab;
  --dg-verde-tint: #163323;
  --dg-verde-borda: #2c5443;
  --dg-verde-texto: #a9e8cc;

  /* neutros */
  --dg-borda-card: #34413f;
  --dg-divisor: #2c3a38;
  --dg-divisor-leve: #24302e;
  --dg-tracejado: #4a5a57;
  --dg-tracejado-fraco: #3d4c49;

  /* texto — mesma ordem de ênfase, invertida */
  --dg-titulo: #f5f7f6;
  --dg-corpo: #d3dbd9;
  --dg-secundario: #a9b6b3;
  --dg-terciario: #8a9895;
  --dg-fraco: #6f7d7a;
  --dg-mono: #9aa8a5;
}

/* ---------- NÓS ---------- */

.dg-no {
  /* etapa */
  background: var(--dg-bg-card);
  border: 1px solid var(--dg-borda-card);
  border-top: 3px solid var(--dg-teal);
  border-radius: 6px;
  padding: 13px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.dg-no__nome {
  font-size: 15px;
  font-weight: 600;
  color: var(--dg-titulo);
}
.dg-no__nome--compacto {
  /* tira de etapas com muitos nós (RD-A): nome mais curto reduz
     quebra de linha desigual entre nós vizinhos */
  font-size: 13.5px;
}

.dg-decisao {
  /* pílula — nunca losango */
  background: var(--dg-bg-card);
  border: var(--dg-traco) solid var(--dg-teal);
  border-radius: 999px;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dg-teal-escuro);
}

.dg-final {
  /* estado terminal — máx 2 por diagrama */
  background: var(--dg-teal-tint);
  border: 1px solid var(--dg-teal-borda);
  border-radius: 6px;
  padding: 13px 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dg-teal-escuro);
  text-align: center;
}

.dg-desvio {
  /* exceção / retrabalho */
  background: var(--dg-ambar-tint);
  border: 1px solid var(--dg-ambar-borda);
  border-left: 3px solid var(--dg-ambar);
  border-radius: 6px;
  padding: 13px 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dg-ambar-texto);
  text-align: center;
}

/* ---------- RD-B · decisão (pílula com duas saídas simétricas) ---------- */

.dg-b {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 320px;
}
.dg-b > .dg-no,
.dg-b > .dg-decisao {
  width: 100%;
  text-align: center;
}
.dg-b__bifurca {
  position: relative;
  width: 100%;
  height: 18px;
}
.dg-b__bifurca::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--dg-bifurca-abertura-esq, var(--dg-bifurca-abertura, 25%));
  right: var(--dg-bifurca-abertura-dir, var(--dg-bifurca-abertura, 25%));
  height: 8px;
  border-top: var(--dg-traco) solid var(--dg-teal);
  border-left: var(--dg-traco) solid var(--dg-teal);
  border-right: var(--dg-traco) solid var(--dg-teal);
  border-radius: 6px 6px 0 0;
}
.dg-b__ramos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}
.dg-b__ramo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.dg-b__ramo > .dg-rotulo {
  align-self: center;
}
.dg-b__ramo > .dg-final,
.dg-b__ramo > .dg-desvio,
.dg-b__ramo > .dg-no {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

/* ícone de retorno dentro do próprio card de desvio — usar quando o
   card do "SIM" representa voltar a uma etapa anterior do mesmo
   diagrama, sem tentar desenhar a aresta cruzada até lá. */
.dg-b__icone-retorno {
  font-size: 15px;
  line-height: 1;
  color: var(--dg-ambar);
}

/* ---------- RD-A2 · procedimento com exceções embutidas ---------- */

.dg-a2 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dg-a2 > .dg-no,
.dg-a2 > .dg-entrada,
.dg-a2 > .dg-final {
  width: 320px;
}
.dg-a2 > .dg-no {
  overflow: hidden;
  padding: 13px 14px 0;
}
.dg-a2 .dg-no__cabeca {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 13px;
}
.dg-entrada {
  background: var(--dg-bg-sutil);
  border: 1px solid var(--dg-divisor);
  border-top: 1px solid var(--dg-divisor);
  border-radius: 6px;
  padding: 13px 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--dg-fraco);
  text-align: center;
}
.dg-no__excecao {
  margin: 0 -14px;
  background: var(--dg-ambar-tint);
  border-top: 1px solid var(--dg-ambar-borda);
  border-left: 3px solid var(--dg-ambar);
  padding: 9px 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--dg-ambar-texto);
}
.dg-no__excecao .dg-chip {
  background: var(--dg-ambar-borda);
  color: var(--dg-ambar-texto);
}

.dg-servico {
  /* arquitetura: serviço próprio — mesma anatomia de .dg-infra, +rótulo */
  background: var(--dg-bg-card);
  border: 1px solid var(--dg-borda-card);
  border-left: 3px solid var(--dg-teal);
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dg-servico__rotulo {
  font-size: 10.5px;
  color: var(--dg-teal);
  letter-spacing: 0.06em;
}

.dg-infra {
  /* arquitetura: infraestrutura — acento neutro no topo, distinto do
     teal (serviço próprio) e do tracejado (sistema externo) */
  background: var(--dg-bg-card);
  border: 1px solid var(--dg-divisor);
  border-top: 3px solid var(--dg-fraco);
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dg-infra__nome {
  font-size: 15px;
  font-weight: 500;
  color: var(--dg-corpo);
}
.dg-infra__tipo {
  font-size: 10.5px;
  color: var(--dg-fraco);
}

.dg-externo {
  /* sistema de terceiro */
  background: var(--dg-bg-card);
  border: var(--dg-traco) dashed var(--dg-tracejado);
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dg-raiz {
  /* raiz do organograma */
  background: var(--dg-teal-tint);
  border: 1px solid var(--dg-teal-borda);
  border-radius: 6px;
  padding: 12px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dg-raiz__nome {
  font-size: 15px;
  font-weight: 600;
  color: var(--dg-teal-escuro);
}
.dg-raiz__cargo {
  font-size: 13.5px;
  color: var(--dg-teal-texto);
}

.dg-cargo {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--dg-terciario);
}

/* ---------- CHIPS ---------- */

.dg-chip {
  /* técnico, dentro do nó */
  font-size: 10.5px;
  color: var(--dg-mono);
  background: var(--dg-bg-sutil);
  border-radius: 3px;
  padding: 3px 6px;
  align-self: flex-start;
}
.dg-chip--vaga {
  /* vaga aberta / interino */
  color: var(--dg-fraco);
  background: transparent;
  border: var(--dg-traco) dashed var(--dg-tracejado);
}

.dg-rotulo {
  /* rótulo de aresta — sempre chip */
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--dg-teal-texto);
  background: var(--dg-bg-chip);
  border: 1px solid var(--dg-divisor);
  border-radius: 3px;
  padding: 4px 9px;
  white-space: nowrap;
}
.dg-rotulo--desvio {
  color: var(--dg-ambar-texto);
  background: var(--dg-ambar-tint);
  border-color: var(--dg-ambar-borda);
}
/* semáforo de painel externo (Grafana) — nunca usar dentro de um
   diagrama RD, que fica restrito a teal/âmbar por regra do sistema */
.dg-rotulo--erro {
  color: var(--dg-vermelho-texto);
  background: var(--dg-vermelho-tint);
  border-color: var(--dg-vermelho-borda);
}
.dg-rotulo--sucesso {
  color: var(--dg-verde-texto);
  background: var(--dg-verde-tint);
  border-color: var(--dg-verde-borda);
}

/* ---------- ARESTAS ---------- */

/* ponta: 4px transparente + 6px sólido, na cor da linha */
.dg-ponta {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.dg-ponta--dir {
  border-left: 6px solid var(--dg-teal);
}
.dg-ponta--vert {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.dg-ponta--bx {
  border-top: 6px solid var(--dg-teal);
}
.dg-ponta--cima {
  border-bottom: 6px solid var(--dg-ambar);
}
.dg-ponta--ext {
  border-left: 6px solid var(--dg-tracejado);
}

/* espaçador horizontal entre nós de uma tira */
.dg-seta-h {
  width: var(--dg-espacador);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dg-seta-h::before {
  /* trecho de linha */
  content: '';
  width: var(--dg-linha-h);
  border-top: var(--dg-traco) solid var(--dg-teal);
}

/* tira simples RD-A: nós flex:1 ligados por .dg-seta-h, sem rótulo de
   aresta — para fluxo linear cujo original não nomeia a transição */
.dg-tira {
  display: flex;
  width: 100%;
  align-items: stretch;
}
.dg-tira > .dg-no,
.dg-tira > .dg-final {
  flex: 1;
  min-width: 0;
}

/* descida vertical com ponta */
.dg-seta-v {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dg-seta-v::before {
  content: '';
  height: var(--dg-descida);
  border-left: var(--dg-traco) solid var(--dg-teal);
}

/* stem centrado sobre uma linha de filhos (meias-células) */
.dg-stem {
  display: flex;
  height: var(--dg-descida);
}
.dg-stem > :first-child {
  flex: 1;
  border-right: var(--dg-traco) solid var(--dg-teal);
}
.dg-stem > :last-child {
  flex: 1;
}

/* barramento: uma célula por filho, na MESMA estrutura de colunas dos nós */
.dg-bus {
  display: flex;
}
.dg-bus__col {
  flex: 1;
  min-width: 0;
  padding: 0 6px;
  display: flex;
  flex-direction: column;
}
.dg-bus__link {
  display: flex;
  height: var(--dg-descida);
  margin: 0 -6px;
}
.dg-bus__esq {
  flex: 1;
  position: relative;
  border-right: var(--dg-traco) solid var(--dg-teal);
}
.dg-bus__dir {
  flex: 1;
}
.dg-bus__esq.is-bus,
.dg-bus__dir.is-bus {
  border-top: var(--dg-traco) solid var(--dg-teal);
}
/* ponta no fim da descida (só quando há direção — nunca em hierarquia) */
.dg-bus__esq > .dg-ponta--vert {
  position: absolute;
  right: -4.75px;
  bottom: -6px;
}

/* retorno em U — herda a MESMA grade da tira */
.dg-retorno {
  display: flex;
  height: 46px;
}
.dg-retorno__cel {
  flex: 1;
  display: flex;
  min-width: 0;
}
.dg-retorno__meia {
  flex: 1;
}
.dg-retorno__risc-destino {
  /* meia-célula sob o centro do nó de destino */
  position: relative;
  border-left: var(--dg-traco) dashed var(--dg-ambar);
  border-bottom: var(--dg-traco) dashed var(--dg-ambar);
  border-radius: 0 0 0 6px;
}
.dg-retorno__risc-origem {
  /* meia-célula sob o centro do nó de origem */
  border-right: var(--dg-traco) dashed var(--dg-ambar);
  border-bottom: var(--dg-traco) dashed var(--dg-ambar);
  border-radius: 0 0 6px 0;
}
.dg-retorno__span {
  border-bottom: var(--dg-traco) dashed var(--dg-ambar);
}
.dg-retorno__ponta {
  position: absolute;
  left: -5.5px;
  top: -5px;
} /* ANCORADA no riser */
.dg-retorno__rotulo {
  position: absolute;
  left: 50%;
  top: 34px;
  transform: translateX(-50%);
}

/* linha tracejada neutra: reporte matricial e entrada de externo */
.dg-tracejo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dg-tracejo::before {
  content: '';
  width: 22px;
  border-top: var(--dg-traco) dashed var(--dg-tracejado);
  flex: none;
}
.dg-tracejo__rotulo {
  font-size: 10px;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--dg-fraco);
}

/* handoff entre raias */
.dg-handoff {
  position: absolute;
  left: 32px;
  bottom: -8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dg-handoff::before {
  content: '';
  height: 11px;
  border-left: var(--dg-traco) solid var(--dg-teal);
}

/* ---------- FAIXAS, LEGENDA E NOTA ---------- */

.dg-faixa {
  background: var(--dg-bg-sutil);
  border: 1px solid var(--dg-divisor);
  border-radius: 7px;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dg-faixa--externa {
  background: var(--dg-bg-card);
  border: var(--dg-traco) dashed var(--dg-tracejado-fraco);
}
.dg-faixa__rotulo {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--dg-fraco);
}
.dg-faixa__nos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.dg-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 4px 0 6px;
}
.dg-legenda__item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--dg-secundario);
}
.dg-legenda__no {
  width: 40px;
  height: 24px;
  border-radius: 5px;
}
.dg-legenda__linha {
  width: 46px;
  border-top: var(--dg-traco) solid var(--dg-teal);
}
.dg-legenda__linha--desvio {
  border-top: var(--dg-traco) dashed var(--dg-ambar);
}

.dg-nota {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--dg-terciario);
}

.dg-titulo-secao {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.dg-titulo-secao__regua {
  flex: 1;
  height: 1px;
  background: var(--dg-divisor);
}

/* ---------- COMPOSTOS: ÁRVORE EM LISTA (Padrão G) ---------- */

.dg-arvore {
  background: var(--dg-bg-card);
  border: 1px solid var(--dg-borda-card);
  border-radius: 7px;
  padding: 4px 18px 14px;
}
.dg-arvore__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid var(--dg-divisor-leve);
}
.dg-arvore__nome {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.dg-arvore__recuo {
  /* largura = nível × 22px */
  flex: none;
  border-left: 1px solid var(--dg-divisor);
}
.dg-arvore__desc {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--dg-secundario);
}

/* ---------- COMPOSTOS: RAIAS (Padrão C) ---------- */

.dg-raias {
  display: grid;
  grid-template-columns: 104px repeat(3, 1fr);
  border: 1px solid var(--dg-divisor);
  border-radius: 7px;
  overflow: hidden;
  background: var(--dg-bg-card);
}
.dg-raias__head {
  background: var(--dg-bg-sutil);
  border-bottom: 1px solid var(--dg-divisor);
  border-left: 1px solid var(--dg-divisor-leve);
  padding: 9px 12px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--dg-mono);
}
.dg-raias__ator {
  background: var(--dg-bg-sutil);
  border-top: 1px solid var(--dg-divisor-leve);
  padding: 16px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dg-mono);
}
.dg-raias__cel {
  position: relative;
  border-top: 1px solid var(--dg-divisor-leve);
  border-left: 1px solid var(--dg-divisor-leve);
  padding: 12px 10px;
  display: flex;
  align-items: center;
  min-height: 46px;
}
.dg-raias__no {
  flex: 1;
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 500;
}
.dg-raias__no--teal {
  background: var(--dg-teal-tint);
  border: 1px solid var(--dg-teal-borda);
  color: var(--dg-teal-escuro);
}
.dg-raias__no--neutro {
  background: var(--dg-bg-pagina);
  border: 1px solid var(--dg-divisor);
  color: var(--dg-corpo);
}

/* ---------- COMPOSTOS: TABELA DE TRANSIÇÕES (Padrão D) ---------- */

.dg-estados {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.dg-estado {
  background: var(--dg-bg-card);
  border: 1px solid var(--dg-borda-card);
  border-radius: 7px;
  padding: 14px 16px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dg-estado__head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 600;
  color: var(--dg-titulo);
}
.dg-transicao {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid var(--dg-divisor-leve);
}
.dg-transicao__destino {
  font-size: 14.5px;
  font-weight: 500;
}
.dg-transicao__condicao {
  font-size: 14px;
  line-height: 1.4;
  color: var(--dg-secundario);
}
.is-feliz {
  color: var(--dg-teal);
}
.is-desvio {
  color: var(--dg-ambar-texto);
}

/* ---------- COMPOSTOS: ENTIDADES E RELAÇÕES (Padrão H) ----------
   Estrutura 1 (H1, sempre) · cartão por entidade com suas relações de
   saída — cardinalidade, destino e verbo moram aqui, nunca no desenho.
   Estrutura 2 (H2, sempre) · esqueleto das mesmas entidades ligadas
   por linha, zero texto na aresta — responde só "qual é a forma". */

.dg-entidade-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.dg-entidade-card {
  background: var(--dg-bg-card);
  border: 1px solid var(--dg-borda-card);
  border-radius: 7px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dg-entidade-card__head {
  background: var(--dg-bg-sutil);
  border-bottom: 1px solid var(--dg-divisor);
  padding: 10px 13px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dg-titulo);
}
.dg-entidade-card--raiz .dg-entidade-card__head {
  background: var(--dg-teal-tint);
  border-color: var(--dg-teal-borda);
  color: var(--dg-teal-escuro);
}

.dg-entidade-card__linha {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 9px 13px;
  border-top: 1px solid var(--dg-divisor-leve);
}
.dg-entidade-card__cardinalidade {
  font-family: var(--ifm-font-family-monospace);
  font-size: 11px;
  color: var(--dg-mono);
  background: var(--dg-bg-sutil);
  border-radius: 3px;
  padding: 3px 6px;
  text-align: center;
  white-space: nowrap;
}
.dg-entidade-card__destino {
  font-family: var(--ifm-font-family-monospace);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--dg-teal);
  display: block;
}
.dg-entidade-card__verbo {
  font-size: 13.5px;
  color: var(--dg-secundario);
  display: block;
  margin-top: 2px;
}

.dg-entidade-card__rodape {
  margin-top: auto;
  border-top: 1px solid var(--dg-divisor-leve);
  padding: 8px 13px 10px;
  font-size: 13px;
  color: var(--dg-fraco);
}
.dg-entidade-card__pai {
  font-family: var(--ifm-font-family-monospace);
  font-size: 11px;
  color: var(--dg-mono);
}

/* Estrutura 2 · esqueleto — mesma entidade sem cabeçalho de card,
   ligada por linha vertical + barramento, sem nenhum rótulo */
.dg-esqueleto-scroll {
  /* a árvore pode precisar de mais largura que a coluna — sombra de
     borda avisa o corte, como em toda tabela larga desta doc (R12/R19) */
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 18px;
  display: flex;
  justify-content: center;
}
.dg-esqueleto {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
}
.dg-entidade {
  /* mais compacta que o tronco de RD-F: aqui a árvore tende a ter mais
     folhas por nível (até 4 ramos), então cada nó cede largura fixa
     para a coluna inteira caber sem depender só do scroll. 168px
     acomoda nomes técnicos longos (ex.: ExtratorTagModeloDocumento)
     sem quebrar palavra. */
  background: var(--dg-bg-card);
  border: 1px solid var(--dg-borda-card);
  border-radius: 6px;
  padding: 8px 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dg-titulo);
  width: 168px;
  white-space: nowrap;
}
.dg-esqueleto > .dg-entidade {
  /* tronco: card de largura fixa, nunca 100% do contêiner */
  margin: 0 auto;
}
.dg-entidade--raiz {
  background: var(--dg-teal-tint);
  border-color: var(--dg-teal-borda);
  color: var(--dg-teal-escuro);
}

.dg-esqueleto__conector {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dg-esqueleto__conector::before {
  content: '';
  height: 12px;
  border-left: var(--dg-traco) solid var(--dg-teal);
}

.dg-esqueleto__ramos {
  display: flex;
  align-items: flex-start;
  width: max-content;
}
.dg-esqueleto__ramo {
  /* largura pelo próprio conteúdo — um ramo com subárvore funda não
     compete por espaço com o irmão sem filhos; a árvore cresce para
     o lado (scroll) em vez de comprimir o ramo mais profundo */
  flex: 0 0 auto;
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 4px;
}
.dg-esqueleto__ramos--n3 > .dg-esqueleto__ramo {
  padding: 0 3px;
}
.dg-esqueleto__ramos--n4 > .dg-esqueleto__ramo {
  padding: 0 3px;
}
.dg-esqueleto__barra {
  height: 0;
  width: calc(100% + 8px);
  margin: 0 -4px;
}
.dg-esqueleto__ramos--n3 .dg-esqueleto__barra {
  width: calc(100% + 6px);
  margin: 0 -3px;
}
.dg-esqueleto__ramos--n4 .dg-esqueleto__barra {
  width: calc(100% + 6px);
  margin: 0 -3px;
}
.dg-esqueleto__ramo:not(:first-child) .dg-esqueleto__barra {
  border-top: var(--dg-traco) solid var(--dg-teal);
  border-left: var(--dg-traco) solid var(--dg-teal);
}
.dg-esqueleto__ramo:not(:last-child) .dg-esqueleto__barra {
  border-top: var(--dg-traco) solid var(--dg-teal);
}
.dg-esqueleto__stem {
  height: 10px;
  border-left: var(--dg-traco) solid var(--dg-teal);
  align-self: center;
}
.dg-esqueleto__ponta {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--dg-teal);
}

/* ---------- COMPOSTOS: ENTIDADES COM ATRIBUTOS (Padrão H, variante com tipo/campo)
   Para diagramas de entidade que trazem atributos tipados (int id, string nome).
   Estrutura 1 (cards em grade, com todos os atributos) · Estrutura 2 (tabelas
   ligadas por faixa, uma por cadeia de agregado, lado a lado). */

.dg-classe-legenda {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.dg-classe-legenda__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--dg-secundario);
}
.dg-classe-legenda__amostra {
  width: 40px;
  height: 24px;
  border-radius: 4px;
  background: var(--dg-teal-tint);
  border: 1px solid var(--dg-teal-borda);
  display: inline-block;
}
.dg-classe-legenda__chip {
  font-family: var(--ifm-font-family-monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--dg-teal-escuro);
  border: 1px solid var(--dg-teal-borda);
  border-radius: 3px;
  padding: 2px 4px;
}

.dg-classe-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 40px;
}

.dg-classe-card {
  background: var(--dg-bg-card);
  border: 1px solid var(--dg-borda-card);
  border-radius: 7px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dg-classe-card__head {
  background: var(--dg-bg-sutil);
  border-bottom: 1px solid var(--dg-divisor);
  padding: 10px 13px;
  font-family: var(--ifm-font-family-monospace);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--dg-titulo);
}
.dg-classe-card--raiz .dg-classe-card__head {
  background: var(--dg-teal-tint);
  border-color: var(--dg-teal-borda);
  color: var(--dg-teal-escuro);
}

.dg-classe-card__linha {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 26px;
  gap: 10px;
  align-items: baseline;
  padding: 7px 13px;
  border-top: 1px solid var(--dg-divisor-leve);
}
.dg-classe-card__tipo {
  font-family: var(--ifm-font-family-monospace);
  font-size: 11px;
  color: var(--dg-fraco);
}
.dg-classe-card__campo {
  font-family: var(--ifm-font-family-monospace);
  font-size: 12px;
  color: var(--dg-corpo);
}
.dg-classe-card__campo--chave {
  font-weight: 500;
  color: var(--dg-teal-escuro);
}
.dg-classe-card__chip {
  font-family: var(--ifm-font-family-monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--dg-teal-escuro);
  border: 1px solid var(--dg-teal-borda);
  border-radius: 3px;
  padding: 2px 4px;
  text-align: center;
}

.dg-classe-card__relacoes {
  margin-top: auto;
  background: var(--dg-bg-pagina);
  border-top: 1px solid var(--dg-divisor);
  padding: 4px 13px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dg-classe-card__relacao {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.dg-classe-card__cardinalidade {
  font-family: var(--ifm-font-family-monospace);
  font-size: 10.5px;
  color: var(--dg-mono);
  background: var(--dg-bg-chip);
  border-radius: 3px;
  padding: 3px 6px;
  white-space: nowrap;
}
.dg-classe-card__destino {
  font-family: var(--ifm-font-family-monospace);
  font-size: 11.5px;
  color: var(--dg-teal);
}
.dg-classe-card__verbo {
  font-size: 13px;
  color: var(--dg-terciario);
}

.dg-classe-card__entrada {
  margin-top: auto;
  border-top: 1px solid var(--dg-divisor-leve);
  padding: 8px 13px 10px;
  font-size: 13px;
  color: var(--dg-fraco);
}
.dg-classe-card__pai {
  font-family: var(--ifm-font-family-monospace);
  font-size: 11px;
  color: var(--dg-mono);
}

/* Estrutura 2 · tabelas ligadas — uma faixa por cadeia de agregado,
   lado a lado; o desenho mantém os atributos, só o rótulo sai */
.dg-classe-faixas {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 10px;
}
.dg-classe-faixa {
  flex: 1;
  min-width: 0;
  background: var(--dg-bg-sutil);
  border: 1px solid var(--dg-divisor);
  border-radius: 7px;
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dg-classe-faixa__rotulo {
  font-family: var(--ifm-font-family-monospace);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dg-fraco);
  align-self: flex-start;
  padding-bottom: 12px;
}

.dg-classe-tabela {
  width: 300px;
  max-width: 100%;
  background: var(--dg-bg-card);
  border: 1px solid var(--dg-borda-card);
  border-radius: 7px;
  overflow: hidden;
}
.dg-classe-tabela__head {
  background: var(--dg-bg-sutil);
  border-bottom: 1px solid var(--dg-divisor);
  padding: 9px 12px;
  font-family: var(--ifm-font-family-monospace);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--dg-titulo);
}
.dg-classe-tabela--raiz .dg-classe-tabela__head {
  background: var(--dg-teal-tint);
  border-color: var(--dg-teal-borda);
  color: var(--dg-teal-escuro);
}
.dg-classe-tabela__linha {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 26px;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  margin: 0 12px;
  border-top: 1px solid var(--dg-divisor-leve);
}
.dg-classe-tabela__linha:first-of-type {
  border-top: none;
  padding-top: 3px;
}
.dg-classe-tabela__linha:last-of-type {
  padding-bottom: 7px;
}

.dg-classe-conector {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dg-classe-conector::before {
  content: '';
  height: 20px;
  border-left: var(--dg-traco) solid var(--dg-teal);
}
.dg-classe-conector__ponta {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--dg-teal);
}

/* bifurcação dentro de uma faixa: um pai leva a 2+ tabelas-filha,
   lado a lado, mesma anatomia de barramento do esqueleto sem atributos */
.dg-classe-ramos {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: 20px;
}
.dg-classe-ramo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dg-classe-barra {
  height: 0;
  width: calc(100% + 20px);
  margin: 0 -10px;
}
.dg-classe-ramo:not(:first-child) .dg-classe-barra {
  border-top: var(--dg-traco) solid var(--dg-teal);
  border-left: var(--dg-traco) solid var(--dg-teal);
}
.dg-classe-ramo:not(:last-child) .dg-classe-barra {
  border-top: var(--dg-traco) solid var(--dg-teal);
}
.dg-classe-stem {
  height: 10px;
  border-left: var(--dg-traco) solid var(--dg-teal);
}

/* ------------------------------------------------------------
   R21 · CHANGELOG / NOTAS DE VERSÃO
   Por entrada: eyebrow mono (versão/sprint + data, exatamente como
   escritas), título, bullets com chip pill por tipo de mudança.
   ------------------------------------------------------------ */
.dg-versoes {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.dg-versao__eyebrow {
  font-family: var(--ifm-font-family-monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dg-fraco);
}
.dg-versao__titulo {
  font-size: 17px;
  font-weight: 600;
  color: var(--dg-titulo);
  margin: 4px 0 10px;
}
.dg-versao__itens {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dg-versao__item {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--dg-corpo);
}
.dg-versao__tipo {
  flex: none;
  font-family: var(--ifm-font-family-monospace);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 2px 9px;
  background: var(--dg-bg-chip);
  color: var(--dg-teal-texto);
}

/* ------------------------------------------------------------
   Cap. 1 § 1.3 "O que cada estágio entrega" — tabela nativa de
   3 colunas (Estágio | Fila | O que acontece), envolvida no .md
   por .dg-tabela-estagios para poder ser escopada sem afetar
   outras tabelas da doc. Larguras proporcionais e fixas em
   qualquer largura de tela — não é um ajuste só de mobile, por
   isso vive fora do @media abaixo (R0-C trata só do que muda
   COM a largura de tela; isto não muda).
   ------------------------------------------------------------ */
.dg-tabela-estagios table {
  table-layout: fixed;
  width: 100%;
}
.dg-tabela-estagios th:nth-child(1),
.dg-tabela-estagios td:nth-child(1) {
  width: 22%;
}
.dg-tabela-estagios th:nth-child(2),
.dg-tabela-estagios td:nth-child(2) {
  width: 18%;
}
.dg-tabela-estagios th:nth-child(3),
.dg-tabela-estagios td:nth-child(3) {
  width: 60%;
}

@media (max-width: 700px) {
  /* Mesma tabela — table-layout:fixed comprime as 3 colunas até
     quebrar palavra em telas estreitas (mesmo problema de fundo
     do R0-C: colunas com piso zero). Aqui a resposta é diferente
     da R20/R3: em vez de reformatar para grid (R12), a tabela
     ganha um piso de largura REAL (min-width no wrapper) e rola
     horizontal dentro de si mesma — a tabela pedida explicitamente
     continua sendo uma <table>, só contida com scroll próprio. */
  .dg-tabela-estagios {
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .dg-tabela-estagios table {
    width: max-content;
    min-width: 100%;
  }
  .dg-tabela-estagios th:nth-child(1),
  .dg-tabela-estagios td:nth-child(1) {
    width: 140px;
  }
  .dg-tabela-estagios th:nth-child(2),
  .dg-tabela-estagios td:nth-child(2) {
    width: 130px;
  }
  .dg-tabela-estagios th:nth-child(3),
  .dg-tabela-estagios td:nth-child(3) {
    width: 260px;
  }
}

/* ------------------------------------------------------------
   Cap. 1 § 1.6 "Papéis e usuários" — tabela nativa de 3 colunas
   (Papel | Natureza | Responsabilidade). Mesmo tratamento da
   tabela de § 1.3: wrapper .dg-tabela-papeis para escopar sem
   afetar outras tabelas, larguras proporcionais sempre ativas
   (fora do @media — não muda com a largura de tela), scroll
   próprio só em mobile. Papel é um pouco mais largo aqui, porque
   carrega "CIAF — Centro de Inteligência Antifraude", mais longo
   que os `Nexa:*` e "Administrador" ao lado.
   ------------------------------------------------------------ */
.dg-tabela-papeis table {
  table-layout: fixed;
  width: 100%;
}
.dg-tabela-papeis th:nth-child(1),
.dg-tabela-papeis td:nth-child(1) {
  width: 30%;
}
.dg-tabela-papeis th:nth-child(2),
.dg-tabela-papeis td:nth-child(2) {
  width: 16%;
}
.dg-tabela-papeis th:nth-child(3),
.dg-tabela-papeis td:nth-child(3) {
  width: 54%;
}

/* ------------------------------------------------------------
   Cap. 15 § 15.7 "Rejeitar × Deletar" — larguras proporcionais de
   desktop (fora do @media — não mudam com a largura de tela).
   ------------------------------------------------------------ */
.dg-tabela-rejeitar-deletar table {
  table-layout: fixed;
  width: 100%;
}
.dg-tabela-rejeitar-deletar th:nth-child(1),
.dg-tabela-rejeitar-deletar td:nth-child(1) {
  width: 20%;
}
.dg-tabela-rejeitar-deletar th:nth-child(2),
.dg-tabela-rejeitar-deletar td:nth-child(2) {
  width: 55%;
}
.dg-tabela-rejeitar-deletar th:nth-child(3),
.dg-tabela-rejeitar-deletar td:nth-child(3) {
  width: 25%;
}

/* ------------------------------------------------------------
   Cap. 19 § 19.2 "Flow × Extract" — larguras proporcionais de
   desktop (fora do @media — não mudam com a largura de tela).
   ------------------------------------------------------------ */
.dg-tabela-flow-extract table {
  table-layout: fixed;
  width: 100%;
}
.dg-tabela-flow-extract th:nth-child(1),
.dg-tabela-flow-extract td:nth-child(1) {
  width: 26%;
}
.dg-tabela-flow-extract th:nth-child(2),
.dg-tabela-flow-extract td:nth-child(2) {
  width: 37%;
}
.dg-tabela-flow-extract th:nth-child(3),
.dg-tabela-flow-extract td:nth-child(3) {
  width: 37%;
}

/* ------------------------------------------------------------
   Cap. 10 § 10.10 "Exemplo — Modelo Folha de Pagamento" —
   larguras proporcionais de desktop (fora do @media — não mudam
   com a largura de tela).
   ------------------------------------------------------------ */
.dg-tabela-folha-pagamento table {
  table-layout: fixed;
  width: 100%;
}
.dg-tabela-folha-pagamento th:nth-child(1),
.dg-tabela-folha-pagamento td:nth-child(1) {
  width: 18%;
}
.dg-tabela-folha-pagamento th:nth-child(2),
.dg-tabela-folha-pagamento td:nth-child(2) {
  width: 14%;
}
.dg-tabela-folha-pagamento th:nth-child(3),
.dg-tabela-folha-pagamento td:nth-child(3) {
  width: 12%;
}
.dg-tabela-folha-pagamento th:nth-child(4),
.dg-tabela-folha-pagamento td:nth-child(4) {
  width: 56%;
}

/* ------------------------------------------------------------
   Cap. 3 § 3.7 "Relacionamentos e cardinalidades" — larguras
   proporcionais de desktop (fora do @media — não mudam com a
   largura de tela).
   ------------------------------------------------------------ */
.dg-tabela-relacionamentos table {
  table-layout: fixed;
  width: 100%;
}
.dg-tabela-relacionamentos th:nth-child(1),
.dg-tabela-relacionamentos td:nth-child(1) {
  width: 34%;
}
.dg-tabela-relacionamentos th:nth-child(2),
.dg-tabela-relacionamentos td:nth-child(2) {
  width: 14%;
}
.dg-tabela-relacionamentos th:nth-child(3),
.dg-tabela-relacionamentos td:nth-child(3) {
  width: 52%;
}

/* ------------------------------------------------------------
   Cap. 3 § 3.8 "Identificadores e chaves" — larguras
   proporcionais de desktop (fora do @media — não mudam com a
   largura de tela).
   ------------------------------------------------------------ */
.dg-tabela-identificadores table {
  table-layout: fixed;
  width: 100%;
}
.dg-tabela-identificadores th:nth-child(1),
.dg-tabela-identificadores td:nth-child(1) {
  width: 28%;
}
.dg-tabela-identificadores th:nth-child(2),
.dg-tabela-identificadores td:nth-child(2) {
  width: 72%;
}

/* ------------------------------------------------------------
   Cap. 28 § 28.1 "Escopo e convenções" — larguras proporcionais
   de desktop (fora do @media — não mudam com a largura de tela).
   ------------------------------------------------------------ */
.dg-tabela-escopo-convencoes table {
  table-layout: fixed;
  width: 100%;
}
.dg-tabela-escopo-convencoes th:nth-child(1),
.dg-tabela-escopo-convencoes td:nth-child(1) {
  width: 24%;
}
.dg-tabela-escopo-convencoes th:nth-child(2),
.dg-tabela-escopo-convencoes td:nth-child(2) {
  width: 76%;
}

/* ------------------------------------------------------------
   Cap. 27 § 27.1 "Mapa das integrações" — larguras proporcionais
   de desktop (fora do @media — não mudam com a largura de tela).
   ------------------------------------------------------------ */
.dg-tabela-mapa-integracoes table {
  table-layout: fixed;
  width: 100%;
}
.dg-tabela-mapa-integracoes th:nth-child(1),
.dg-tabela-mapa-integracoes td:nth-child(1) {
  width: 24%;
}
.dg-tabela-mapa-integracoes th:nth-child(2),
.dg-tabela-mapa-integracoes td:nth-child(2) {
  width: 22%;
}
.dg-tabela-mapa-integracoes th:nth-child(3),
.dg-tabela-mapa-integracoes td:nth-child(3) {
  width: 54%;
}

/* ------------------------------------------------------------
   Cap. 27 § 27.6 "Bibliotecas WASM e NuGet" — larguras
   proporcionais de desktop (fora do @media — não mudam com a
   largura de tela).
   ------------------------------------------------------------ */
.dg-tabela-wasm-nuget table {
  table-layout: fixed;
  width: 100%;
}
.dg-tabela-wasm-nuget th:nth-child(1),
.dg-tabela-wasm-nuget td:nth-child(1) {
  width: 20%;
}
.dg-tabela-wasm-nuget th:nth-child(2),
.dg-tabela-wasm-nuget td:nth-child(2) {
  width: 24%;
}
.dg-tabela-wasm-nuget th:nth-child(3),
.dg-tabela-wasm-nuget td:nth-child(3) {
  width: 56%;
}

/* ------------------------------------------------------------
   Cap. 35 § 35.5 "Cenários de RBAC" — larguras proporcionais de
   desktop (fora do @media — não mudam com a largura de tela).
   ------------------------------------------------------------ */
.dg-tabela-cenarios-rbac table {
  table-layout: fixed;
  width: 100%;
}
.dg-tabela-cenarios-rbac th:nth-child(1),
.dg-tabela-cenarios-rbac td:nth-child(1) {
  width: 26%;
}
.dg-tabela-cenarios-rbac th:nth-child(2),
.dg-tabela-cenarios-rbac td:nth-child(2) {
  width: 37%;
}
.dg-tabela-cenarios-rbac th:nth-child(3),
.dg-tabela-cenarios-rbac td:nth-child(3) {
  width: 37%;
}

@media (max-width: 700px) {
  .dg-tabela-papeis {
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .dg-tabela-papeis table {
    width: max-content;
    min-width: 100%;
  }
  .dg-tabela-papeis th:nth-child(1),
  .dg-tabela-papeis td:nth-child(1) {
    width: 170px;
  }
  .dg-tabela-papeis th:nth-child(2),
  .dg-tabela-papeis td:nth-child(2) {
    width: 100px;
  }
  .dg-tabela-papeis th:nth-child(3),
  .dg-tabela-papeis td:nth-child(3) {
    width: 260px;
  }

  /* Cap. 15 § 15.7 "Rejeitar × Deletar" — tabela nativa de 3
     colunas (Ação | Significado | Quem pode). Mesmo tratamento de
     § 1.3/§ 1.6: wrapper .dg-tabela-rejeitar-deletar escopa o
     scroll só a esta tabela, com piso real em px (a coluna
     "Significado" carrega frase longa e não pode comprimir a 1fr
     sem piso — mesmo problema de fundo do R0-C). */
  .dg-tabela-rejeitar-deletar {
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .dg-tabela-rejeitar-deletar table {
    width: max-content;
    min-width: 100%;
  }
  .dg-tabela-rejeitar-deletar th:nth-child(1),
  .dg-tabela-rejeitar-deletar td:nth-child(1) {
    width: 100px;
  }
  .dg-tabela-rejeitar-deletar th:nth-child(2),
  .dg-tabela-rejeitar-deletar td:nth-child(2) {
    width: 260px;
  }
  .dg-tabela-rejeitar-deletar th:nth-child(3),
  .dg-tabela-rejeitar-deletar td:nth-child(3) {
    width: 130px;
  }

  /* Cap. 19 § 19.2 "Flow × Extract" — tabela nativa de 3 colunas
     (Aspecto | Flow | Extract). Mesmo tratamento de § 1.3/§ 1.6/
     § 15.7: wrapper .dg-tabela-flow-extract escopa o scroll só a
     esta tabela, com piso real em px — "Cliente, fornecedor,
     contrato" e "Não exige cadastro completo" não cabem em 1fr
     comprimido sem quebrar palavra (mesmo problema do R0-C). */
  .dg-tabela-flow-extract {
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .dg-tabela-flow-extract table {
    width: max-content;
    min-width: 100%;
  }
  .dg-tabela-flow-extract th:nth-child(1),
  .dg-tabela-flow-extract td:nth-child(1) {
    width: 130px;
  }
  .dg-tabela-flow-extract th:nth-child(2),
  .dg-tabela-flow-extract td:nth-child(2) {
    width: 180px;
  }
  .dg-tabela-flow-extract th:nth-child(3),
  .dg-tabela-flow-extract td:nth-child(3) {
    width: 180px;
  }

  /* Cap. 10 § 10.10 "Exemplo — Modelo Folha de Pagamento" — tabela
     nativa de 4 colunas (Tag | Tipo | Ordem | Papel). Mesmo
     tratamento das demais: wrapper .dg-tabela-folha-pagamento
     escopa o scroll só a esta tabela, com piso real em px — a
     coluna "Papel" carrega frases como "Nome de cada colaborador
     (linha da tabela)." que não cabem em 1fr comprimido. */
  .dg-tabela-folha-pagamento {
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .dg-tabela-folha-pagamento table {
    width: max-content;
    min-width: 100%;
  }
  .dg-tabela-folha-pagamento th:nth-child(1),
  .dg-tabela-folha-pagamento td:nth-child(1) {
    width: 110px;
  }
  .dg-tabela-folha-pagamento th:nth-child(2),
  .dg-tabela-folha-pagamento td:nth-child(2) {
    width: 90px;
  }
  .dg-tabela-folha-pagamento th:nth-child(3),
  .dg-tabela-folha-pagamento td:nth-child(3) {
    width: 70px;
  }
  .dg-tabela-folha-pagamento th:nth-child(4),
  .dg-tabela-folha-pagamento td:nth-child(4) {
    width: 260px;
  }

  /* Cap. 3 § 3.7 "Relacionamentos e cardinalidades" — tabela
     nativa de 3 colunas (Relacionamento | Cardinalidade |
     Observação). Mesmo tratamento das demais: wrapper
     .dg-tabela-relacionamentos escopa o scroll só a esta tabela,
     com piso real em px — "Contrato → FluxoProcessamento" e
     "Colaboradores são vinculados por contrato e competência."
     não cabem em 1fr comprimido sem quebrar palavra. */
  .dg-tabela-relacionamentos {
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .dg-tabela-relacionamentos table {
    width: max-content;
    min-width: 100%;
  }
  .dg-tabela-relacionamentos th:nth-child(1),
  .dg-tabela-relacionamentos td:nth-child(1) {
    width: 200px;
  }
  .dg-tabela-relacionamentos th:nth-child(2),
  .dg-tabela-relacionamentos td:nth-child(2) {
    width: 80px;
  }
  .dg-tabela-relacionamentos th:nth-child(3),
  .dg-tabela-relacionamentos td:nth-child(3) {
    width: 260px;
  }

  /* Cap. 3 § 3.8 "Identificadores e chaves" — tabela nativa de 2
     colunas (Identificador | Uso). Mesmo tratamento das demais:
     wrapper .dg-tabela-identificadores escopa o scroll só a esta
     tabela — a coluna "Uso" carrega frases longas com código
     inline (ex.: rota de API completa) que não cabem em 1fr
     comprimido sem quebrar palavra. */
  .dg-tabela-identificadores {
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .dg-tabela-identificadores table {
    width: max-content;
    min-width: 100%;
  }
  .dg-tabela-identificadores th:nth-child(1),
  .dg-tabela-identificadores td:nth-child(1) {
    width: 160px;
  }
  .dg-tabela-identificadores th:nth-child(2),
  .dg-tabela-identificadores td:nth-child(2) {
    width: 320px;
  }

  /* Cap. 28 § 28.1 "Escopo e convenções" — tabela nativa de 2
     colunas (Aspecto | Convenção). Mesmo tratamento das demais:
     wrapper .dg-tabela-escopo-convencoes escopa o scroll só a
     esta tabela — a coluna "Convenção" carrega frases longas com
     código inline que não cabem em 1fr comprimido sem quebrar
     palavra. */
  .dg-tabela-escopo-convencoes {
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .dg-tabela-escopo-convencoes table {
    width: max-content;
    min-width: 100%;
  }
  .dg-tabela-escopo-convencoes th:nth-child(1),
  .dg-tabela-escopo-convencoes td:nth-child(1) {
    width: 130px;
  }
  .dg-tabela-escopo-convencoes th:nth-child(2),
  .dg-tabela-escopo-convencoes td:nth-child(2) {
    width: 280px;
  }

  /* Cap. 27 § 27.1 "Mapa das integrações" — tabela nativa de 3
     colunas (Integração | Tipo | Papel). Mesmo tratamento das
     demais: wrapper .dg-tabela-mapa-integracoes escopa o scroll só
     a esta tabela — a coluna "Papel" carrega frases como "Origem e
     destino dos lotes (importar / exportar)." que não cabem em
     1fr comprimido sem quebrar palavra. */
  .dg-tabela-mapa-integracoes {
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .dg-tabela-mapa-integracoes table {
    width: max-content;
    min-width: 100%;
  }
  .dg-tabela-mapa-integracoes th:nth-child(1),
  .dg-tabela-mapa-integracoes td:nth-child(1) {
    width: 150px;
  }
  .dg-tabela-mapa-integracoes th:nth-child(2),
  .dg-tabela-mapa-integracoes td:nth-child(2) {
    width: 130px;
  }
  .dg-tabela-mapa-integracoes th:nth-child(3),
  .dg-tabela-mapa-integracoes td:nth-child(3) {
    width: 260px;
  }

  /* Cap. 27 § 27.6 "Bibliotecas WASM e NuGet" — tabela nativa de 3
     colunas (Onde | Tecnologia | Uso). Mesmo tratamento das
     demais: wrapper .dg-tabela-wasm-nuget escopa o scroll só a
     esta tabela — a coluna "Uso" carrega frases longas ("Otimização
     de PDF e conversão de imagens/TIFF já no envio, aliviando o
     servidor.") que não cabem em 1fr comprimido. */
  .dg-tabela-wasm-nuget {
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .dg-tabela-wasm-nuget table {
    width: max-content;
    min-width: 100%;
  }
  .dg-tabela-wasm-nuget th:nth-child(1),
  .dg-tabela-wasm-nuget td:nth-child(1) {
    width: 130px;
  }
  .dg-tabela-wasm-nuget th:nth-child(2),
  .dg-tabela-wasm-nuget td:nth-child(2) {
    width: 150px;
  }
  .dg-tabela-wasm-nuget th:nth-child(3),
  .dg-tabela-wasm-nuget td:nth-child(3) {
    width: 280px;
  }

  /* Cap. 35 § 35.5 "Cenários de RBAC" — tabela nativa de 3 colunas
     (Papel | Deve poder | Não pode). Mesmo tratamento das demais:
     wrapper .dg-tabela-cenarios-rbac escopa o scroll só a esta
     tabela — "Acessar Extract; deletar protocolo" e "Acessar (é
     deslogado)" não cabem em 1fr comprimido sem quebrar palavra. */
  .dg-tabela-cenarios-rbac {
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .dg-tabela-cenarios-rbac table {
    width: max-content;
    min-width: 100%;
  }
  .dg-tabela-cenarios-rbac th:nth-child(1),
  .dg-tabela-cenarios-rbac td:nth-child(1) {
    width: 120px;
  }
  .dg-tabela-cenarios-rbac th:nth-child(2),
  .dg-tabela-cenarios-rbac td:nth-child(2) {
    width: 190px;
  }
  .dg-tabela-cenarios-rbac th:nth-child(3),
  .dg-tabela-cenarios-rbac td:nth-child(3) {
    width: 190px;
  }
}

@media (max-width: 700px) {
  /* Cap. 1 § 1.2 "O Nexa ataca o problema em três frentes" — label
     (Volume/Variedade/Precisão) e texto de descrição num grid
     220px 1fr. Em telas estreitas 220px sobra pouco espaço para o
     texto, que é bem mais longo que o label; 20/80% acompanha a
     largura da coluna e dá a maior parte a quem tem mais conteúdo.
     !important: gridTemplateColumns vem de style={{}} inline no
     .md (React), que tem prioridade sobre qualquer CSS externo sem
     !important — sem ele esta regra nunca vence o inline. */
  .dg-frentes__linha {
    grid-template-columns: 30% 70% !important;
  }

  /* Cap. 1 § 1.3 — tira de 5 etapas (Criado → Qualidade →
     Processamento → Extração → Revisão) em 9 colunas de grid
     (5 nós 1fr + 4 setas de 26px). 1fr sem piso deixa o navegador
     comprimir cada nó até a largura de uma letra em telas
     estreitas (texto quebra caractere por caractere) — por isso a
     coluna ainda leva um piso mínimo (minmax). Dentro desse piso,
     clamp() encolhe caixa/texto/chip proporcionalmente à largura
     disponível, para caber com o mínimo de scroll possível (R0-C).

     Escopado a .dg-pipeline-scroll/.dg-pipeline-grid — classes
     próprias deste bloco, adicionadas ao wrapper no .md — e via
     descendente (.dg-pipeline-grid .dg-no, não .dg-no direto), que
     é reaproveitado por outros diagramas de tira horizontal em
     outras páginas; mudar o genérico afetaria todos eles. */
  .dg-pipeline-scroll {
    overflow-x: visible;
    padding-bottom: 0;
  }
  /* Mobile empilha as 5 etapas em coluna, em vez da tira horizontal
     com scroll: display:flex + order reordena visualmente sem
     mudar a ordem do DOM no .md (R0-A — texto e estrutura de origem
     intocados). gridColumn/gridRow de cada .dg-pipeline-item/-seta
     só valem em modo grid; com display:flex eles são ignorados,
     então não precisam de override aqui. */
  .dg-pipeline-grid {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: clamp(6px, 2vw, 10px);
  }
  .dg-pipeline-item,
  .dg-pipeline-seta {
    width: 100%;
    max-width: 320px;
  }
  .dg-pipeline-item .dg-no,
  .dg-pipeline-item .dg-desvio,
  .dg-pipeline-item .dg-final {
    width: 100%;
  }

  /* Anatomia RD-A2 (mesma da § 5.1): a exceção não é um card
     separado — é um rodapé âmbar sangrado dentro do card da etapa
     que a origina. "Processamento da Qualidade" ganha overflow:
     hidden para o sangramento (margin negativo) não vazar do
     radius; o card de desvio perde a borda própria e vira o
     rodapé colado embaixo, sem rótulo "↓ se falhar" separado —
     a ligação visual já é o próprio encaixe. */
  .dg-pipeline-item--processamento .dg-no {
    overflow: hidden;
    padding-bottom: 0;
  }
  .dg-pipeline-item--desvio {
    margin-top: calc(-1 * clamp(6px, 2vw, 10px));
    width: 100%;
    max-width: 320px;
  }
  .dg-pipeline-item--desvio .dg-tracejo__rotulo {
    display: none;
  }
  .dg-pipeline-item--desvio .dg-desvio {
    margin: 0;
    border: none;
    border-top: 1px solid var(--dg-ambar-borda);
    border-left: 3px solid var(--dg-ambar);
    border-radius: 0 0 6px 6px;
    text-align: left;
  }
  /* Seta horizontal (dg-seta-h) não faz sentido entre caixas
     empilhadas — vira descida vertical, mesma anatomia de
     .dg-seta-v usada no restante do sistema RD. */
  .dg-pipeline-seta {
    display: flex;
    justify-content: center;
  }
  .dg-pipeline-seta .dg-seta-h {
    width: auto;
    height: 18px;
    flex-direction: column;
  }
  .dg-pipeline-seta .dg-seta-h::before {
    width: 0;
    height: 12px;
    border-top: none;
    border-left: var(--dg-traco) solid var(--dg-teal);
  }
  .dg-pipeline-seta .dg-ponta--dir {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid var(--dg-teal);
    border-bottom: none;
  }
  /* Ordem visual: Criado → seta → Qualidade → seta → Processamento
     → desvio (Falha) → seta → Extração → seta → Revisão → final
     (Processado). O desvio some do meio do DOM (onde está depois
     de Revisão) para logo após "Processamento da Qualidade", de
     onde ele de fato parte no fluxo. */
  .dg-pipeline-item:nth-of-type(1) { order: 1; }  /* Criado */
  .dg-pipeline-seta:nth-of-type(2) { order: 2; }
  .dg-pipeline-item:nth-of-type(3) { order: 3; }  /* Análise de Qualidade */
  .dg-pipeline-seta:nth-of-type(4) { order: 4; }
  .dg-pipeline-item:nth-of-type(5) { order: 5; }  /* Processamento da Qualidade */
  .dg-pipeline-item--desvio { order: 6; }         /* Falha de Processamento */
  .dg-pipeline-seta:nth-of-type(6) { order: 7; }
  .dg-pipeline-item:nth-of-type(7) { order: 8; }  /* Extração de Dados */
  .dg-pipeline-seta:nth-of-type(8) { order: 9; }
  .dg-pipeline-item:nth-of-type(9) { order: 10; } /* Revisão */
  .dg-pipeline-item--final { order: 11; }         /* Processado */

  .dg-pipeline-grid .dg-no {
    padding: clamp(8px, 2.4vw, 13px) clamp(8px, 2.4vw, 12px);
    gap: clamp(4px, 1.2vw, 7px);
  }
  .dg-pipeline-grid .dg-no__nome--compacto {
    font-size: clamp(12px, 3vw, 13.5px);
  }
  .dg-pipeline-grid .dg-chip {
    font-size: clamp(9.5px, 2.2vw, 10.5px);
    padding: clamp(2px, 0.8vw, 3px) clamp(4px, 1.4vw, 6px);
  }
  .dg-pipeline-grid .dg-desvio,
  .dg-pipeline-grid .dg-final {
    padding: clamp(8px, 2.4vw, 13px) clamp(8px, 2.4vw, 12px);
  }
  .dg-pipeline-grid .dg-tracejo__rotulo {
    font-size: clamp(9.5px, 2.2vw, 11px);
  }
  .dg-legenda {
    font-size: clamp(11px, 2.4vw, 13.5px);
    gap: clamp(10px, 2.4vw, 22px);
  }

  .dg-faixa__nos {
    grid-template-columns: repeat(2, 1fr);
  }
  .dg-raias {
    grid-template-columns: 80px repeat(3, minmax(90px, 1fr));
  }
  .dg-entidade-cards {
    grid-template-columns: 1fr;
  }
  .dg-entidade {
    width: 100%;
    max-width: 240px;
  }
  .dg-classe-cards {
    grid-template-columns: 1fr;
  }
  .dg-classe-faixas {
    flex-direction: column;
  }
  .dg-classe-tabela {
    width: 100%;
  }
  .dg-classe-ramos {
    flex-direction: column;
  }
  .dg-classe-barra {
    width: 0;
    height: 10px;
    margin: 0;
    border-left: var(--dg-traco) solid var(--dg-teal) !important;
    border-top: none !important;
  }
  .dg-r1__linha {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .dg-r1__col3 {
    grid-column: 1 / -1;
    padding-left: 56px;
  }

  /* --------------------------------------------------------------
     RD-M-E · Cap. 1 § 1.5 "Arquitetura de alto nível" — grade de
     camada cai para 1 coluna (sobrescreve o .dg-faixa__nos genérico
     de 2 colunas, escopado a .dg-arq para não afetar outros
     diagramas RD-E da doc) e o barramento horizontal API→Banco/
     Filas/Cache (.dg-bus) vira trilho vertical à esquerda: cada
     dependência ganha sua própria linha com ponta ancorada no
     centro da célula (top:50%, nunca bottom — a célula se estica
     com o conteúdo do card e bottom deslocaria a ponta).
     -------------------------------------------------------------- */
  .dg-arq .dg-faixa__nos {
    grid-template-columns: 1fr;
  }
  .dg-arq__api {
    width: 100% !important;
    margin-bottom: 12px;
  }

  /* Chamada entre camadas: conector + chip do protocolo lado a
     lado, sem o recuo de 78px que alinhava com o centro da API
     numa grade de colunas que não existe mais em mobile. */
  .dg-arq__descida {
    padding-left: 0 !important;
    height: auto !important;
    padding: 7px 0;
  }

  /* Stem do pai (API → barramento) recolhido: em coluna única o
     trilho já nasce colado ao card, sem precisar do stem centrado
     que só fazia sentido acima de um barramento horizontal. */
  .dg-arq__stem {
    display: none;
  }

  /* Trilho vertical: uma coluna, uma linha por dependência. Guarda
     de RD-M0.6 — a ponta ancora no centro do alvo via top:50%, e o
     espaçamento entre linhas vem só do gap do contêiner, nunca de
     margin no card (que entraria na altura da célula e deslocaria
     a ponta). */
  .dg-arq__bus {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 15px;
  }
  .dg-arq__bus .dg-bus__col {
    flex: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  /* .dg-bus__link vira o "ícone" da ponta, irmão de flex do card
     .dg-infra — não mais uma coluna vertical de trilho com a ponta
     ancorada por position:absolute dentro dela. align-items:center
     do .dg-bus__col acima já centraliza o ícone com o card ao lado,
     sem depender de alturas coincidirem nem de top/bottom chutados. */
  .dg-arq__bus .dg-bus__link {
    flex: none;
    width: 10px;
    height: 8px;
    margin: 0;
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dg-arq__bus .dg-bus__esq {
    border: none;
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dg-arq__bus .dg-bus__esq.is-bus {
    border: none;
  }
  .dg-arq__bus .dg-bus__dir {
    display: none;
  }
  /* a ponta nasce --vert (base para baixo, herdada do sistema
     desktop); aqui ela vira --dir (base para a direita) redefinindo
     as 4 bordas juntas — ela já é um item de flex normal agora, sem
     position:absolute, então basta ela ficar reta no fluxo junto do
     ícone-container acima. */
  .dg-arq__bus .dg-bus__esq > .dg-ponta--vert {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 4px solid transparent !important;
    border-bottom: 4px solid transparent !important;
    border-left: 6px solid var(--dg-teal) !important;
    border-right: none !important;
  }
  .dg-arq__bus .dg-infra {
    flex: 1;
    min-width: 0;
    margin-top: 0 !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    gap: 8px;
  }

  /* Motor de extração: 3 serviços em tira horizontal → 1 coluna,
     mesmas setas verticais do resto do sistema RD em mobile. */
  .dg-arq__motor {
    flex-direction: column;
    align-items: stretch;
  }
  .dg-arq__motor .dg-servico {
    border-left: 1px solid var(--dg-borda-card) !important;
    border-top: none !important;
  }
  .dg-arq__motor .dg-seta-h {
    width: auto;
    height: 18px;
    flex-direction: column;
  }
  .dg-arq__motor .dg-seta-h::before {
    width: 0;
    height: 12px;
    border-top: none;
    border-left: var(--dg-traco) solid var(--dg-teal);
  }
  .dg-arq__motor .dg-ponta--dir {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid var(--dg-teal);
    border-bottom: none;
  }

  /* Cap. 28 § 28.3 "Modelo de recursos" — barramento raiz→4
     famílias mantém a MESMA estrutura horizontal do desktop, mesma
     técnica de .dg-modelo__scroll no Cap. 10 § 10.2: 4 colunas de
     130px mínimos + padding somam ~568px, mais largo que os 358px
     de viewport — o wrapper ganha scroll próprio. align-items:center
     no wrapper CENTRALIZARIA um conteúdo mais largo que a tela,
     deslocando a origem do scroll para o meio (scrollLeft nasce em
     0 mostrando só a metade direita, cortando a esquerda sem
     indicar que há mais para rolar) — mesmo bug do Cap. 10, mesma
     correção: flex-start ancora a origem no início real. Raiz e
     stem, presos a 260px, precisam de align-self:center para não
     desalinhar do centro do próprio card quando o pai deixa de
     centralizar. */
  .dg-api__modelo {
    overflow-x: auto;
    padding-bottom: 6px;
    align-items: flex-start !important;
  }
  .dg-api__modelo > .dg-raiz {
    align-self: center;
  }
  .dg-api__modelo > .dg-stem {
    align-self: center;
    width: 260px;
  }
  .dg-api__bus {
    width: max-content !important;
    min-width: 100%;
  }
  .dg-api__bus .dg-bus__col {
    min-width: 130px;
  }

  /* Cap. 27 § 27.1 "Mapa das integrações" — mesma técnica acima:
     barramento raiz→3 sistemas externos mantém a estrutura
     horizontal do desktop, com scroll próprio em vez de virar
     trilho. Cadeia mais longa que o Cap. 28 — antes do stem vêm o
     card "SARS · Montreal" (260px fixos) e o bloco de seta VPN
     (largura automática, já estreito por natureza). Os quatro
     elementos do eixo — card SARS, bloco VPN, raiz "Plataforma
     Nexa", stem — precisam de align-self:center; só os três de
     largura fixa (SARS, raiz, stem) também precisam de
     width:260px, senão desalinham quando o pai troca
     align-items:center por flex-start. */
  .dg-int__mapa {
    overflow-x: auto;
    padding-bottom: 6px;
    align-items: flex-start !important;
  }
  .dg-int__mapa > .dg-externo:first-child,
  .dg-int__mapa > div:nth-child(2),
  .dg-int__mapa > .dg-no,
  .dg-int__mapa > .dg-stem {
    align-self: center;
  }
  .dg-int__mapa > .dg-externo:first-child,
  .dg-int__mapa > .dg-no,
  .dg-int__mapa > .dg-stem {
    width: 260px;
  }
  .dg-int__bus {
    width: max-content !important;
    min-width: 100%;
  }
  .dg-int__bus .dg-bus__col {
    min-width: 130px;
  }

  /* Cap. 27 § 27.2 "Montreal e o SARS" — diagrama horizontal (não
     vertical como os outros RD-E/RD-A2 da doc): dois nós de
     largura fixa (SARS 160px, Nexa·pipeline 180px) ligados por um
     bloco central com rótulos `white-space: nowrap` ("exporta
     lote concluído" sozinho já passa de 150px). Structure inteira
     facilmente estoura 358px — mantém a MESMA estrutura horizontal
     do desktop, com scroll próprio em vez de reempilhar as setas
     na vertical (o que trocaria de padrão sem necessidade: aqui
     não há decisão nem hierarquia, só um ciclo de ida e volta). */
  .dg-int__sars {
    overflow-x: auto;
    padding-bottom: 6px;
    max-width: none !important;
  }
  .dg-int__sars > * {
    flex: none !important;
  }
  .dg-int__sars > div:nth-child(2) {
    min-width: 260px;
  }

  /* Cap. 10 § 10.2 "Anatomia de um modelo" — barramento raiz→4
     filhos (um deles com sub-barramento próprio de 2 colunas)
     mantém a MESMA estrutura horizontal do desktop; em vez de
     recompor a geometria em coluna única, o wrapper ganha scroll
     próprio (mesma técnica de .dg-tabela-*, aqui aplicada a um
     diagrama em vez de uma tabela) e cada .dg-bus__col recebe um
     piso real em px — sem ele as 4 colunas dividiriam 358px e
     "Cruzamento de colaboradores" quebraria palavra sem parar. */
  .dg-modelo__scroll {
    overflow-x: auto;
    padding-bottom: 6px;
  }
  /* o wrapper interno (align-items:center) centraliza o diagrama
     quando ele é mais estreito que a viewport — mas centralizar
     um conteúdo que RESULTA mais largo (max-content) desloca a
     origem do scroll para o meio: scrollLeft nasce em 0 mostrando
     só a metade direita, cortando tudo à esquerda sem indicar que
     há mais para rolar. flex-start ancora a origem no início real
     do conteúdo. */
  .dg-modelo__scroll > div {
    align-items: flex-start !important;
    width: max-content;
    min-width: 100%;
  }
  /* raiz e stem não acompanham a largura do barramento (que agora
     estoura a viewport) — ficam presos aos 260px da caixa "Modelo
     de Documento" e centralizados sobre ela, senão o stem desenha
     a linha vertical no centro do BARRAMENTO todo em vez do centro
     da raiz, torcendo o conector logo na saída. */
  .dg-modelo__scroll > div > .dg-raiz {
    align-self: center;
  }
  .dg-modelo__scroll > div > .dg-stem {
    align-self: center;
    width: 260px;
  }
  .dg-modelo__scroll .dg-raiz,
  .dg-modelo__scroll .dg-modelo__bus {
    width: max-content !important;
    min-width: 100%;
  }
  .dg-modelo__bus .dg-bus__col {
    min-width: 150px;
  }
  .dg-modelo__bus--sub .dg-bus__col {
    min-width: 130px;
  }

  /* Integrações externas: grade de 3 → 1 coluna. */
  .dg-arq__externos {
    grid-template-columns: 1fr;
  }

  /* --------------------------------------------------------------
     RD-M-B · Cap. 1 § 1.9 "Exemplo prático fim a fim" — grid de
     3 colunas (tronco 340px · ramal tracejado 26px · card de
     retrabalho 220px) empilha em eixo único. O split lateral
     desaparece: cada card de retrabalho já vem depois da sua
     decisão de origem na ordem do DOM, então empilhar sem "order"
     já produz a leitura correta (decisão → ramo de exceção →
     próximo passo do tronco). O ramal tracejado âmbar gira de
     horizontal para vertical — mesma anatomia de conector do
     resto do sistema RD em mobile, só na cor/traço de exceção em
     vez do teal do fluxo principal, que é o que RD-M-B pede para
     distinguir os dois ramos sem posição lado a lado.
     -------------------------------------------------------------- */
  .dg-ex {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: none !important;
    gap: 0;
  }
  .dg-ex__tronco,
  .dg-ex__ramo {
    width: 100% !important;
  }
  .dg-ex__ramal {
    height: 22px;
    padding: 2px 0;
  }
  .dg-ex__ramal span:first-child {
    width: 0 !important;
    height: 14px;
    border-top: none !important;
    border-left: var(--dg-traco) dashed var(--dg-ambar);
  }
  .dg-ex__ramal .dg-ponta--dir {
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 6px solid var(--dg-ambar) !important;
    border-bottom: none !important;
  }
}

@media (max-width: 700px) {
  /* --------------------------------------------------------------
     Cap. 2 § 2.2 "Modelo mental do Nexa" — Estrutura 2 (.dg-esqueleto)
     é uma árvore RD-H sem atributos, profundidade 5, que hoje só
     rola horizontal (.dg-esqueleto-scroll: overflow-x:auto) — scroll
     fora da matriz R19 é proibido pela regra de escape do RD-M.
     A skill mobile não tem entrada dedicada para esqueleto-sem-
     atributos; estruturalmente o problema é o mesmo que RD-M-G
     resolve (hierarquia funda demais pra desenhar lado a lado), então
     aplica-se o mesmo princípio: achata para lista recuada por nível,
     uma coluna, sem desenhar linha/barramento — texto e DOM (R0-A)
     intocados, só a apresentação vira bloco em vez de árvore.
     -------------------------------------------------------------- */
  .dg-esqueleto-scroll {
    overflow-x: visible;
    padding-bottom: 0;
    display: block;
  }
  .dg-esqueleto {
    display: block;
    width: 100%;
  }
  .dg-esqueleto__ramos {
    display: block;
    width: 100%;
  }
  .dg-esqueleto__ramo {
    display: block;
    width: 100%;
    padding: 0;
  }
  /* elementos de desenho de linha (barra, conector, ponta, stem)
     só fazem sentido na árvore desenhada — em lista, o recuo por si
     já comunica a hierarquia (mesma anatomia de RD-M-G). */
  .dg-esqueleto__barra,
  .dg-esqueleto__conector,
  .dg-esqueleto__ponta,
  .dg-esqueleto__stem {
    display: none;
  }
  .dg-esqueleto .dg-entidade {
    width: 100%;
    max-width: none;
    text-align: left;
    white-space: normal;
    padding: 9px 12px;
    margin: 0 0 6px;
    border-radius: 6px;
  }
  .dg-esqueleto > .dg-entidade {
    margin: 0 0 6px;
  }
  /* recuo cumulativo por nível: cada .dg-esqueleto__ramos aninhado
     empurra 16px a mais (RD-M0 · piso de recuo da doc), com filete
     vertical marcando a profundidade — mesmo valor de RD-M-G. */
  .dg-esqueleto__ramos .dg-esqueleto__ramo {
    padding-left: 16px;
    border-left: 1px solid var(--dg-divisor);
    margin-left: 6px;
  }
  .dg-esqueleto__ramos .dg-esqueleto__ramos .dg-esqueleto__ramo {
    padding-left: 32px;
  }
  .dg-esqueleto__ramos .dg-esqueleto__ramos .dg-esqueleto__ramos .dg-esqueleto__ramo {
    padding-left: 48px;
  }

  /* --------------------------------------------------------------
     RD-M-A2 · Cap. 2 § 2.8 "Estados do protocolo" — mesmo grid de
     3 colunas (tronco 340px · ramal tracejado 26px · card de desvio
     220px) do Cap. 1 § 1.9, mas linear (1 único desvio, sem decisão
     em cascata): RD-M-A2 diz "muda só o card, de 320px fixos para
     width:100% — nada mais". Aqui isso significa empilhar o card de
     QUALITY ERROR na ordem em que já aparece no DOM (logo após
     PROCESSING QUALITY, de onde ele parte), e girar o ramal
     tracejado de horizontal para vertical — mesma técnica de
     .dg-ex__ramal usada no Cap. 1.
     -------------------------------------------------------------- */
  .dg-est {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: none !important;
    gap: 0;
  }
  .dg-est__tronco,
  .dg-est__ramo {
    width: 100% !important;
  }
  /* legendas de transição (upload concluído, operações enviadas...)
     usavam margin-left:34px para alinhar ao lado da seta dentro do
     grid de coluna única — em flex a seta já não tem coluna própria,
     então a legenda volta a ficar centrada sob a seta, sem recuo. */
  p.dg-est__tronco {
    margin: 2px 0 0 !important;
    text-align: center;
  }
  .dg-est__ramal {
    height: 22px;
    padding: 2px 0;
  }
  .dg-est__ramal span:first-child {
    width: 0 !important;
    height: 14px;
    border-top: none !important;
    border-left: var(--dg-traco) dashed var(--dg-ambar);
  }
  .dg-est__ramal .dg-ponta--dir {
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 6px solid var(--dg-ambar) !important;
    border-bottom: none !important;
  }

  /* Cap. 2 § 2.3, 2.4, 2.5, 2.6, 2.10 — larguras de coluna do
     glossário (label/definição) em mobile: 30%/70% em vez do
     220px 1fr do desktop. Escopado a .dg-glossario--3070 (classe
     própria adicionada só nesses 5 blocos do Cap. 2) para não
     afetar .dg-glossario__linha nos outros capítulos que reusam
     a mesma classe genérica (R0-C).
     min-width:0 na coluna 1 + overflow-wrap:break-word no termo:
     sem os dois, uma coluna em % (sem minmax) deixa o texto
     estourar a célula em vez de quebrar — 30% de 358px são só
     ~107px, e termos como "Credenciais de acesso" (Cap. 4 § 4.2)
     não cabem numa palavra só. overflow-wrap quebra a palavra SÓ
     quando ela não cabe nem numa linha própria — texto com espaço
     continua quebrando por palavra inteira primeiro. */
  .dg-glossario--3070 .dg-glossario__linha {
    grid-template-columns: minmax(0, 30%) minmax(0, 70%);
  }
  .dg-glossario--3070 .dg-glossario__termo {
    overflow-wrap: break-word;
  }

  /* Cap. 3 § 3.3-3.6 — mesmo problema e mesma técnica de
     .dg-glossario--3070 acima, aplicada a .dg-spec (nome/tipo +
     descrição): a grade de 220px fixos sobra ~138px para a
     descrição em 358px, e nomes como "idExtratorCliente" ou
     "dataInicio / dataFim" (Cap. 3 §3.3/3.5) estourariam a célula
     fixa sem quebrar. min-width:0 na coluna 1 + overflow-wrap no
     nome, mesma justificativa da nota acima. */
  .dg-spec--3070 .dg-spec__linha {
    grid-template-columns: minmax(0, 30%) minmax(0, 70%);
  }
  .dg-spec--3070 .dg-spec__nome {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  /* R20 variação 3 colunas (.dg-glossario__linha--3col) — as colunas
     1+2 (termo + atributo) somavam 310px fixos, quase toda a coluna
     útil de 358px, sobrando quase nada para a definição (1fr): o
     texto quebrava caractere por caractere (ver screenshot do
     Cap. 4 § 4.2 "Pré-requisitos"). Classe genérica, reusada por
     16 capítulos — o corte de texto é o mesmo bug em todos eles, não
     uma preferência de página, então a correção vai na regra
     compartilhada dentro do @media (R0-C permite: aqui o "genérico"
     É o escopo certo, porque o defeito também é genérico). Termo e
     atributo encolhem para % pequenas; definição vai a 1fr. */
  .dg-glossario__linha--3col {
    grid-template-columns: 34% 28% 1fr;
    gap: 10px;
  }

  /* RD-M-A2 · Cap. 5 § 5.1 "Visão geral da autenticação" — ponto de
     entrada + 3 etapas + desfecho, todos com width:320px fixo via
     style={{}} inline no .md. RD-M-A2 muda só isso: 320px → 100%,
     nada mais (já nasce em eixo único, sem grid a reestruturar).
     !important necessário porque width vem de style={{}} inline,
     que vence CSS externo sem !important (R0-C). */
  .dg-auth__no {
    width: 100% !important;
  }

  /* Cap. 12 § 12.3 "Status internos (8–12)" — coluna 1 do --3col
     carrega só um número curto (8, 9, 10, 11, 12); os 34% genéricos
     da regra compartilhada sobram muito espaço vazio à esquerda.
     Escopado a .dg-glossario--status-interno (só esta seção) para
     não encolher a coluna 1 nos outros 15 capítulos que usam --3col
     com termo mais longo — pedido explícito de mobile apenas, o
     desktop continua com a regra base (180px). */
  .dg-glossario--status-interno .dg-glossario__linha--3col {
    grid-template-columns: 14% 42% 1fr;
  }

  /* RD-M-A · Cap. 13 § 13.2 "Seleção em cascata" — tira horizontal
     simples (.dg-tira: 4 nós, Cliente→Fornecedor→Contrato→Upload,
     sem decisão nem retorno) vira pilha vertical. .dg-tira só é
     usada neste único bloco em toda a doc — ajustar aqui não afeta
     nenhuma outra página. */
  .dg-tira {
    flex-direction: column;
    align-items: center;
  }
  .dg-tira > .dg-no,
  .dg-tira > .dg-final {
    flex: none;
    width: 100%;
  }
  .dg-tira > .dg-seta-h {
    width: auto;
    height: 18px;
    flex-direction: column;
  }
  .dg-tira > .dg-seta-h::before {
    width: 0;
    height: 12px;
    border-top: none;
    border-left: var(--dg-traco) solid var(--dg-teal);
  }
  .dg-tira > .dg-seta-h .dg-ponta--dir {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid var(--dg-teal);
    border-bottom: none;
  }
}

/* ------------------------------------------------------------
   Cap. 6 § 6.5 "Guardas de rota e verificação" — RD-B em cascata
   de 3 decisões aninhadas (Sessão válida? → Rota exige papel? →
   Usuário tem o papel?), cada uma com T de dois ramos. Só este
   diagrama tem 3 níveis de T aninhado; escopado por :has(#rbac-…)
   no root .dg-b para não afetar os outros diagramas RD-B da doc
   (todos com no máximo 1 nível).

   Em 358px de coluna útil, 3 T's aninhados dividem a largura por
   8 no nível mais interno (~40px por ramo) — menos que a largura
   de "Permitir acesso" em qualquer fonte legível. Comprimir os
   3 níveis por igual não é opção (regra de escape do RD-M: card
   <240px é card cortado) e abreviar o texto viola R0-A (texto
   imutável). A saída: níveis 1 e 2 mantêm o T lado a lado, bem
   compactados (fonte, padding e gap no piso); só o nível 3 — o
   único que não cabe de nenhum jeito — empilha seus dois
   desfechos. Node/edge count idêntico ao desktop; muda só a
   geometria de um nível. */
@media (max-width: 700px) {
  .dg-b:has(#rbac-decisao-sessao) {
    width: 100%;
  }
  .dg-b:has(#rbac-decisao-sessao) .dg-decisao {
    padding: 8px 16px;
    font-size: 13.5px;
  }
  .dg-b:has(#rbac-decisao-sessao) .dg-rotulo {
    font-size: 10px;
    padding: 3px 7px;
  }
  .dg-b:has(#rbac-decisao-sessao) .dg-no,
  .dg-b:has(#rbac-decisao-sessao) .dg-final,
  .dg-b:has(#rbac-decisao-sessao) .dg-desvio {
    padding: 9px 8px;
  }
  .dg-b:has(#rbac-decisao-sessao) .dg-no__nome {
    font-size: 13.5px;
  }
  /* níveis 1 e 2: T compactado (gap mínimo, sem perder a leitura
     lado a lado). O seletor de profundidade pega os dois primeiros
     .dg-b__ramos a partir da raiz — o 3º é sobrescrito abaixo. */
  .dg-b:has(#rbac-decisao-sessao) .dg-b__ramos {
    gap: 8px;
  }
  .dg-b:has(#rbac-decisao-sessao) .dg-b__ramo {
    gap: 5px;
  }
  .dg-b:has(#rbac-decisao-sessao) .dg-b__bifurca {
    height: 12px;
  }
  .dg-b:has(#rbac-decisao-sessao) .dg-b__bifurca::before {
    height: 6px;
  }
  /* nível 3 (dentro de "Rota exige papel? → SIM" → "Usuário tem o
     papel?"): único que fisicamente não cabe em T — empilha. */
  .dg-b:has(#rbac-decisao-sessao) .dg-b__ramos .dg-b__ramos .dg-b__ramos {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .dg-b:has(#rbac-decisao-sessao) .dg-b__ramos .dg-b__ramos .dg-b__bifurca {
    display: none;
  }
  .dg-b:has(#rbac-decisao-sessao) .dg-b__ramos .dg-b__ramos .dg-b__ramo {
    align-items: center;
  }
  /* conector estático entre a decisão de nível 3 e cada desfecho —
     linha 10px → rótulo → linha 10px → ponta, no fluxo (RD-M0.5).
     Cor/traço seguem a classe semântica do card (.dg-desvio =
     exceção), nunca a ordem. */
  .dg-b:has(#rbac-decisao-sessao) .dg-b__ramos .dg-b__ramos .dg-b__ramo::before {
    content: '';
    display: block;
    width: 0;
    height: 10px;
    border-left: var(--dg-traco) solid var(--dg-teal);
  }
  .dg-b:has(#rbac-decisao-sessao) .dg-b__ramos .dg-b__ramos .dg-b__ramo:has(> .dg-desvio)::before {
    border-left: var(--dg-traco) dashed var(--dg-ambar);
  }
}

/* ------------------------------------------------------------
   Cap. 20 § 20.7 "Boundaries e agrupamento de páginas" — RD-B cujo
   ramo NÃO carrega um card de 220px fixos, maior que a própria
   coluna do grid (.dg-b__ramos é 1fr 1fr dentro de .dg-b de
   320px — a coluna real é ~152px, menos que o card). Comprimir o
   T (como no Cap. 6) não resolve aqui porque o card não é texto
   que aceita padding/fonte menores — é uma largura hard-coded no
   markdown. Mantém a MESMA estrutura horizontal do desktop, com
   scroll próprio no .dg-b inteiro em vez de reempilhar os ramos:
   width:max-content permite que o card de 220px tenha seu espaço
   garantido sem espremer o ramo SIM ao lado. */
@media (max-width: 700px) {
  /* .dg-b nasce align-items:center — centralizar um .dg-b__ramos
     que RESULTA mais largo que a tela (width:max-content abaixo)
     desloca a origem do scroll para o meio: scrollLeft nasce em 0
     mostrando só a metade direita, cortando "Agrupa na mesma peça"
     à esquerda sem indicar que há mais para rolar (mesmo bug do
     Cap. 10 e do Cap. 27 § 27.1 — mesma correção: flex-start ancora
     a origem no início real). A decisão e o nó do topo, presos a
     100% do .dg-b original, precisam de align-self:center para não
     desalinhar do centro quando o pai troca align-items por
     flex-start. */
  .dg-cls__boundaries {
    width: 100%;
    max-width: 100%;
    align-items: flex-start !important;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  .dg-cls__boundaries > .dg-no,
  .dg-cls__boundaries > .dg-decisao {
    align-self: center;
    width: 320px;
  }
  .dg-cls__boundaries .dg-b__bifurca {
    width: 320px;
    align-self: center;
  }
  .dg-cls__boundaries .dg-b__ramos {
    grid-template-columns: 220px 180px;
    width: max-content;
    min-width: 100%;
  }

  /* Cap. 25 § 25.5 "Filas RabbitMQ" — mesma técnica de scroll
     horizontal + centralização já validada (Cap. 10, Cap. 27
     §27.1, Cap. 20 §20.7): barramento de 3 workers mantém a
     estrutura horizontal do desktop; align-items:flex-start desde
     o início evita o corte por centralização que apareceu nas
     tentativas anteriores. Cadeia antes do stem tem DOIS elementos
     de 260px ("API publica mensagem", "Fila") ligados por uma
     .dg-seta-v (largura automática, só precisa centralizar). */
  .dg-proc__filas {
    width: 100%;
    max-width: 100%;
    align-items: flex-start !important;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  .dg-proc__filas > .dg-infra,
  .dg-proc__filas > .dg-stem {
    align-self: center;
    width: 260px;
  }
  .dg-proc__filas > .dg-seta-v {
    align-self: center;
  }
  .dg-proc__bus {
    width: max-content !important;
    min-width: 100%;
  }
  .dg-proc__bus .dg-bus__col {
    min-width: 150px;
  }

  /* --------------------------------------------------------------
     Cap. 29 § 29.2 "Stack de monitoramento" — funil de convergência
     (Banco + Métricas de infra → Grafana) seguido de divergência em
     barramento (Grafana → 2 dashboards). Não é RD-B (sem decisão
     SIM/NÃO) nem o caso de scroll dos diagramas anteriores: aqui,
     como no Cap. 6 § 6.5, a saída é COMPACTAR mantendo os pares
     lado a lado, porque cada metade sozinha (Banco 190px, Métricas
     190px) cabe perfeitamente bem em 358px — só o total de 420px é
     que sobra 62px. O "Y" invertido usa position:absolute em %
     (25%/75%/50%) sobre a largura do próprio container: encolher o
     container para 100% mantém as três linhas geometricamente
     corretas sem recalcular nenhum valor, desde que o grid de cards
     acima encolha na MESMA largura — os dois ficam presos ao
     mesmo width:100% para não desalinhar o Y dos cards.
     -------------------------------------------------------------- */
  .dg-obs__stack {
    width: 100%;
  }
  .dg-obs__funil,
  .dg-obs__y,
  .dg-obs__bus {
    width: 100% !important;
  }
  .dg-obs__funil .dg-infra {
    width: 100% !important;
    max-width: 165px;
    padding: 9px 10px;
  }
  .dg-obs__funil .dg-infra__nome {
    font-size: 13.5px;
  }
  .dg-obs__funil .dg-infra__tipo {
    font-size: 10px;
  }
  /* barramento de saída (2 dashboards): já cabe folgado em 358px
     (cada coluna ~175px), mas compacta por consistência com o
     resto do diagrama em vez de deixar a fonte maior que o funil
     de entrada logo acima. */
  .dg-obs__bus .dg-final {
    padding: 9px 10px;
    font-size: 13.5px;
  }
}

/* ------------------------------------------------------------
   R1 · TABELA DE LISTAGEM → LINHAS EM GRID
   Código + título linkado + descrição curta. Larguras idênticas
   em toda a documentação — nunca recalcular por página.
   ------------------------------------------------------------ */
.dg-r1 {
  display: flex;
  flex-direction: column;
}
.dg-r1__linha {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid var(--dg-divisor-leve);
}
.dg-r1__linha:first-child {
  border-top: none;
}
.dg-r1__codigo {
  font-family: var(--ifm-font-family-monospace);
  font-size: 12.5px;
  color: var(--dg-fraco);
}
.dg-r1__titulo {
  font-size: 15px;
  font-weight: 500;
}
.dg-r1__desc {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--dg-secundario);
}

/* ============================================================
   TRILHOS — SIDEBAR E "NESTA PÁGINA"

   Os dois lados da página de documentação seguem o mesmo
   sistema. Três regras os costuram:

   1. Mesmo label — mono maiúscula com tracking aberto nos dois
      topos.
   2. Mesma linha-guia — 1px, e a barra de ativo é 2px no acento
      sobrepondo essa linha.
   3. Mesma superfície — trilho um passo acima do canvas. A
      separação vem do contraste de fundo; a borda é reforço.

   Única diferença intencional: na sidebar o ativo tem fundo
   tingido e radius (navegação persistente, precisa de presença);
   no TOC é só cor e barra (indicador de posição, deve ser leve).
   ============================================================ */

:root {
  /* Tema claro: mesma lógica de superfícies, tons derivados */
  --rail-bg: #F7FAF9;
  --rail-border: rgba(6, 48, 42, 0.08);
  --rail-guide: rgba(6, 48, 42, 0.11);
  --rail-label: #5F7570;
  --rail-item: #46534F;
  --rail-item-strong: #12211E;
  --rail-hover-bg: rgba(6, 48, 42, 0.045);
  --rail-accent: #00706B;
  --rail-accent-bg: rgba(0, 112, 107, 0.09);
  --rail-top: 64px;
  /* Largura do trilho esquerdo (sidebar de navegação). */
  --rail-sidebar-width: 300px;
  /* Largura do trilho direito. Vive na coluna do grid e no
     trilho, então é um token — os dois têm de casar. */
  --rail-toc-width: 236px;
  /* Scrollbar do menu da sidebar — mais forte que --rail-guide de
     propósito: aquele é linha decorativa, este é affordance de
     interação e precisa ficar visível em repouso. */
  --rail-scrollbar-thumb: rgba(6, 48, 42, 0.22);
  --rail-scrollbar-track: rgba(6, 48, 42, 0.04);
}

html[data-theme='dark'] {
  --rail-bg: #0B1917;
  --rail-border: rgba(255, 255, 255, 0.07);
  --rail-guide: rgba(255, 255, 255, 0.09);
  --rail-label: #6F8580;
  --rail-item: #9DB0AC;
  --rail-item-strong: #E4EEEB;
  --rail-hover-bg: rgba(255, 255, 255, 0.045);
  --rail-accent: #2DE2C6;
  --rail-accent-bg: rgba(45, 226, 198, 0.09);
  --rail-scrollbar-thumb: rgba(255, 255, 255, 0.18);
  --rail-scrollbar-track: rgba(255, 255, 255, 0.03);
}

/* ------------------------------------------------------------
   SIDEBAR — CONTAINER
   ------------------------------------------------------------ */
/* Confirmado via DevTools (inspeção real do elemento, não CSS
   fonte): quem tem a barra de scroll de fato é o próprio <aside>,
   não nenhum dos filhos (sidebarViewport/div.sidebar/nav.menu).
   As tentativas anteriores falhavam porque tentavam mover o
   scroll para dentro do menu, mas o navegador já tinha decidido
   que o overflow acontece aqui, no container raiz. A correção é
   parar de competir com isso: dar ao aside a mesma barra
   estilizada, e deixar os filhos com overflow visible. */
.theme-doc-sidebar-container,
aside[class*='docSidebarContainer'] {
  background: var(--rail-bg) !important;
  border: none !important;
  border-right: 1px solid var(--rail-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: fit-content !important;
  min-width: var(--rail-sidebar-width) !important;
  max-width: 480px !important;
  flex: 0 0 auto !important;
  /* O nativo tem clip-path: inset(0) — ele recorta a scrollbar
     deste elemento. Sem isto, nenhuma customização de
     ::-webkit-scrollbar chega a desenhar. */
  clip-path: none !important;
  /* Zera o deslocamento nativo (compensava o navbar para o
     sidebarViewport interno) — agora é o próprio aside que fica
     sticky sob o navbar, então o deslocamento é feito uma vez só,
     aqui. */
  margin-top: 0 !important;
  height: calc(100vh - var(--rail-top)) !important;
  position: sticky !important;
  top: var(--rail-top) !important;
  /* auto, não scroll: a barra só existe quando o conteúdo do
     sidebar realmente excede a altura disponível. Quando existe,
     a cor fica transparente em repouso e só aparece no hover. */
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: transparent transparent !important;
  scrollbar-gutter: auto !important;
  transition: scrollbar-color 150ms ease;
}

.theme-doc-sidebar-container:hover,
aside[class*='docSidebarContainer']:hover {
  scrollbar-color: var(--rail-scrollbar-thumb) var(--rail-scrollbar-track) !important;
}

.theme-doc-sidebar-container::-webkit-scrollbar,
aside[class*='docSidebarContainer']::-webkit-scrollbar {
  width: 10px !important;
  display: block !important;
}

/* Remove os botões de seta do topo/fundo da barra clássica —
   a customização de track/thumb já basta como affordance. */
.theme-doc-sidebar-container::-webkit-scrollbar-button,
aside[class*='docSidebarContainer']::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.theme-doc-sidebar-container::-webkit-scrollbar-track,
aside[class*='docSidebarContainer']::-webkit-scrollbar-track {
  background: transparent !important;
  border-radius: 4px;
}

.theme-doc-sidebar-container::-webkit-scrollbar-thumb,
aside[class*='docSidebarContainer']::-webkit-scrollbar-thumb {
  background: transparent !important;
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
  -webkit-transition: background-color 150ms ease;
  transition: background-color 150ms ease;
}

.theme-doc-sidebar-container:hover::-webkit-scrollbar-track,
aside[class*='docSidebarContainer']:hover::-webkit-scrollbar-track {
  background: var(--rail-scrollbar-track) !important;
}

.theme-doc-sidebar-container:hover::-webkit-scrollbar-thumb,
aside[class*='docSidebarContainer']:hover::-webkit-scrollbar-thumb {
  background: var(--rail-scrollbar-thumb) !important;
  border-color: var(--rail-bg);
}

.theme-doc-sidebar-container::-webkit-scrollbar-thumb:hover,
aside[class*='docSidebarContainer']::-webkit-scrollbar-thumb:hover {
  background: var(--rail-accent) !important;
}

/* Os filhos nunca competem pelo overflow — o aside já resolve. */
.theme-doc-sidebar-container [class*='sidebarViewport'] {
  position: static !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.theme-doc-sidebar-container [class*='sidebarViewport'] > div[class*='sidebar'] {
  height: auto;
  overflow: visible;
}

.theme-doc-sidebar-container .menu {
  padding: 26px 18px 40px !important;
  height: auto;
  overflow: visible !important;
}

/* A scrollbar em si vive no <aside> (regra acima) — o nav.menu
   não deve competir com overflow ou customização próprios,
   por isso .thin-scrollbar não é redefinido aqui. */
.theme-doc-sidebar-container .thin-scrollbar {
  scrollbar-width: none !important;
}

.theme-doc-sidebar-container .thin-scrollbar::-webkit-scrollbar {
  display: none !important;
}

/* Gap mínimo: o padding faz o respiro, não a margem — mantém os
   alvos de clique colados. */
.theme-doc-sidebar-container .menu__list-item {
  margin-top: 1px;
}

/* ------------------------------------------------------------
   NÍVEL 1 — GRUPO (Soluções, SDK, API, Institucional)

   Label de categoria, o mesmo tratamento do topo do TOC.
   ------------------------------------------------------------ */
.theme-doc-sidebar-container > div > nav > ul > li > .menu__list-item-collapsible > .menu__link,
.theme-doc-sidebar-container > div > nav > ul > li > .menu__link--sublist {
  font-family: var(--ifm-font-family-monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rail-label);
  padding: 8px 10px;
}

/* ------------------------------------------------------------
   NÍVEL 2 — PRODUTO (Spekter, Liveness…)
   ------------------------------------------------------------ */
.theme-doc-sidebar-container .menu__list .menu__list-item-collapsible > .menu__link {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--rail-item-strong);
  padding: 8px 10px;
}

/* Chevron dos colapsáveis */
.theme-doc-sidebar-container .menu__caret::before,
.theme-doc-sidebar-container .menu__link--sublist-caret::after {
  opacity: 0.7;
}

/* ------------------------------------------------------------
   LINHA-GUIA — envolve os filhos do grupo aberto
   ------------------------------------------------------------ */
.theme-doc-sidebar-container .menu__list .menu__list {
  margin-left: 11px;
  padding-left: 5px;
  border-left: 1px solid var(--rail-guide);
}

/* ------------------------------------------------------------
   NÍVEL 3 — PÁGINA (Visão Geral, Tipificação, OCR…)
   ------------------------------------------------------------ */
.theme-doc-sidebar-container .menu__list .menu__list .menu__link {
  position: relative;
  font-size: 14px;
  font-weight: 400;
  color: var(--rail-item);
  padding: 7px 12px 7px 20px;
  border-radius: 7px;
  transition: background-color 150ms ease, color 150ms ease;
}

.theme-doc-sidebar-container .menu__link:hover {
  color: var(--rail-item-strong);
  background: var(--rail-hover-bg);
}

/* ------------------------------------------------------------
   ATIVO NA SIDEBAR — cor, fundo tingido e barra

   A barra fica em left:-9px para cobrir a linha-guia exatamente
   na altura do item.
   ------------------------------------------------------------ */
.theme-doc-sidebar-container .menu__link--active:not(.menu__link--sublist) {
  color: var(--rail-accent) !important;
  background: var(--rail-accent-bg);
  font-weight: 500;
}

.theme-doc-sidebar-container
  .menu__list
  .menu__list
  .menu__link--active:not(.menu__link--sublist)::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--rail-accent);
}

/* Separador entre blocos de primeiro nível */
.theme-doc-sidebar-container > div > nav > ul > li + li {
  position: relative;
  margin-top: 22px;
}

.theme-doc-sidebar-container > div > nav > ul > li + li::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 10px;
  right: 10px;
  height: 1px;
  background: var(--rail-border);
}

/* ------------------------------------------------------------
   LARGURA DA PÁGINA DE DOC

   O `.container` do Docusaurus tem max-width e padding
   horizontal próprios. Como os dois trilhos são colunas —
   superfície própria, borda própria — eles precisam alcançar as
   bordas do viewport; com o container padrão ficavam flutuando
   para dentro. Só o conteúdo central mantém largura de leitura
   (o `max-width: 72ch` em src/css/docs.css).
   ------------------------------------------------------------ */
/* `:not(.footer *)` porque `docs-wrapper` fica no <html>: sem o
   recorte, o seletor também alcançava o `.container` do rodapé e
   soltava a largura dele. Como este arquivo é importado depois do
   custom.css e a especificidade empata (duas classes), era esta
   regra que ganhava — o rodapé ficava full-bleed na doc e contido
   em 1200px na home. O alvo aqui é só o conteúdo da doc. */
.docs-wrapper .container:not(.footer *),
div[class*='docPage'] .container {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ------------------------------------------------------------
   TOC — CONTAINER

   Altura do próprio conteúdo: o trilho é uma caixa que termina
   no último link, não uma coluna que desce até o rodapé. Sem
   `align-self: stretch` — como a coluna é flex, o padrão
   esticaria a caixa até o fim da row.
   ------------------------------------------------------------ */
.theme-doc-toc-desktop {
  width: var(--rail-toc-width);
  flex: 0 0 var(--rail-toc-width);
  height: fit-content;
  align-self: flex-start;
  padding: 30px 20px 40px;
  background: var(--rail-bg);
  border-left: 1px solid var(--rail-border);
}

/* A coluna do grid que embrulha o TOC (`col col--3`) carrega o
   `--ifm-spacing-horizontal` do Infima — 2rem de cada lado. Era
   esse padding que mantinha o trilho afastado da borda direita.
   O respiro interno já vem do padding do próprio trilho.

   A coluna `col--3` é mais larga que o trilho, e essa sobra
   aparecia como faixa vazia à DIREITA do sumário. A largura da
   coluna fica como está — o trilho é que é empurrado para a
   ponta direita dela. */
.docs-wrapper .row > .col:has(> .theme-doc-toc-desktop) {
  display: flex;
  justify-content: flex-end;
  padding-left: 0;
  padding-right: 0;
}

/* Label idêntico ao de grupo da sidebar — é o que costura os
   dois trilhos. */
.theme-doc-toc-desktop::before {
  content: 'nesta página';
  display: block;
  margin-bottom: 14px;
  font-family: var(--ifm-font-family-monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rail-label);
}

.table-of-contents {
  padding: 0 0 0 1px;
  border-left: 1px solid var(--rail-guide);
  font-size: 13.5px;
}

.table-of-contents__left-border {
  border: none;
}

.table-of-contents ul {
  padding-left: 0;
}

.table-of-contents li {
  margin: 0;
}

.table-of-contents__link {
  position: relative;
  display: block;
  padding: 6px 0 6px 14px;
  color: var(--rail-item);
  transition: color 150ms ease;
}

/* Nível 2 recua mais */
.table-of-contents ul ul .table-of-contents__link {
  padding-left: 26px;
  font-size: 13px;
}

.table-of-contents__link:hover {
  color: var(--rail-item-strong);
  background: transparent;
}

/* ------------------------------------------------------------
   ATIVO NO TOC — só cor e barra

   Sem fundo e sem radius: é indicador de posição, não navegação
   persistente. A barra sobrepõe a linha-guia.
   ------------------------------------------------------------ */
.table-of-contents__link--active,
.table-of-contents__link--active code {
  color: var(--rail-accent) !important;
  background: transparent;
}

.table-of-contents__link--active::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--rail-accent);
}

/* ------------------------------------------------------------
   RODAPÉ DO TOC — links utilitários
   ------------------------------------------------------------ */
.theme-doc-toc-desktop .railFooter {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--rail-border);
}

.theme-doc-toc-desktop .railFooter a {
  font-size: 13px;
  color: var(--rail-item);
  transition: color 150ms ease;
}

.theme-doc-toc-desktop .railFooter a:hover {
  color: var(--rail-accent);
  -webkit-text-decoration: none;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .theme-doc-sidebar-container .menu__link,
  .table-of-contents__link,
  .theme-doc-toc-desktop .railFooter a {
    transition: none;
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

#__docusaurus-base-url-issue-banner-container {
  display: none;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.tabList__CuJ {
  margin-bottom: var(--ifm-leading);
}

.tabItem_LNqP {
  margin-top: 0 !important;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.tabItem_Ymn6 > *:last-child {
  margin-bottom: 0;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

:root {
  --docusaurus-tag-list-border: var(--ifm-color-emphasis-300);
}

.tag_zVej {
  border: 1px solid var(--docusaurus-tag-list-border);
  transition: border var(--ifm-transition-fast);
}

.tag_zVej:hover {
  --docusaurus-tag-list-border: var(--ifm-link-color);
  -webkit-text-decoration: none;
  text-decoration: none;
}

.tagRegular_sFm0 {
  border-radius: var(--ifm-global-radius);
  padding: 0.2rem 0.5rem 0.3rem;
  font-size: 90%;
}

.tagWithCount_h2kH {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 0.5rem 0 1rem;
  border-left: 0;
}

.tagWithCount_h2kH::before,
.tagWithCount_h2kH::after {
  content: '';
  position: absolute;
  top: 50%;
  border: 1px solid var(--docusaurus-tag-list-border);
  transition: inherit;
}

.tagWithCount_h2kH::before {
  right: 100%;
  transform: translate(50%, -50%) rotate(-45deg);
  width: 1.18rem;
  height: 1.18rem;
  border-right: 0;
  border-bottom: 0;
}

.tagWithCount_h2kH::after {
  left: 0;
  transform: translateY(-50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.tagWithCount_h2kH span {
  background: var(--ifm-color-secondary);
  color: var(--ifm-color-black);
  font-size: 0.7rem;
  line-height: 1.2;
  border-radius: var(--ifm-global-radius);
  padding: 0.1rem 0.4rem;
  margin-left: 0.3rem;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.tags_jXut {
  display: inline;
}

.tag_QGVx {
  margin: 0 0.4rem 0.5rem 0;
  display: inline-block;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.backToTopButton_sjWU {
  position: fixed;
  right: 1.3rem;
  bottom: 1.3rem;
  border-radius: 50%;
  background-color: var(--ifm-color-emphasis-200);
  width: 3rem;
  height: 3rem;
  z-index: calc(var(--ifm-z-index-fixed) - 1);
  box-shadow: var(--ifm-global-shadow-lw);
  transition: all var(--ifm-transition-fast)
    var(--ifm-transition-timing-default);
  opacity: 0;
  transform: scale(0);
  visibility: hidden;
}

.backToTopButton_sjWU::after {
  content: ' ';
  display: inline-block;
  -webkit-mask: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem no-repeat;
          mask: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem no-repeat;
  background-color: var(--ifm-color-emphasis-1000);
  width: 100%;
  height: 100%;
}

@media (hover: hover) {
  .backToTopButton_sjWU:hover {
    background-color: var(--ifm-color-emphasis-300);
  }
}

.backToTopButtonShow_xfvO {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}

/*! @docsearch/css 4.7.0 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
:root{--docsearch-primary-color:#003dff;--docsearch-soft-primary-color:rgba(0,61,255,.1);--docsearch-subtle-color:#d6d6e7;--docsearch-text-color:#36395a;--docsearch-error-color:#ef5350;--docsearch-success-color:#e8f5e9;--docsearch-secondary-text-color:#5a5e9a;--docsearch-background-color:#f5f5fa;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-focus-color:#005fcc;--docsearch-highlight-color:#003dff;--docsearch-muted-color:#9698c3;--docsearch-muted-color-darker:rgba(120,122,165,.25);--docsearch-icon-color:#5a5e9a;--docsearch-container-background:rgba(101,108,133,.8);--docsearch-logo-color:#003dff;--docsearch-border-radius:4px;--docsearch-search-button-background:#fff;--docsearch-search-button-text-color:var(--docsearch-secondary-text-color);--docsearch-modal-width:800px;--docsearch-modal-height:600px;--docsearch-modal-variable-height:60dvh;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:rgba(0,0,0,.2) 0px 12px 28px 0px,rgba(0,0,0,.1) 0px 2px 4px 0px,hsla(0,0%,100%,.05) 0px 0px 0px 1px inset;--docsearch-searchbox-height:56px;--docsearch-searchbox-initial-height:56px;--docsearch-searchbox-background:#ffffffa6;--docsearch-searchbox-focus-background:#ffffffa6;--docsearch-actions-width:99px;--docsearch-actions-height:44px;--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-highlight-color:rgba(0,61,255,.1);--docsearch-hit-background:#fff;--docsearch-key-background:#f5f5fa;--docsearch-key-color:#5a5e9a;--docsearch-key-pressed-shadow:inset 0 2px 4px rgba(120,122,165,.25);--docsearch-footer-height:52px;--docsearch-footer-background:#ffffffa6;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,.12);--fav-out-dur:160ms;--del-dur:150ms;--ease-smooth:cubic-bezier(0.25,0.8,0.4,1);--ease-fast:cubic-bezier(0.45,0.15,0.6,0.9);--shadow-pop:0 4px 12px rgba(0,0,0,.06);--shimmer-bg:linear-gradient(90deg,#e0e3e8 0%,var(--docsearch-muted-color) 20%,var(--docsearch-muted-color) 60%,#e0e3e8 95%);--docsearch-dropdown-menu-background:var(--docsearch-hit-background);--docsearch-dropdown-menu-item-hover-background:var(--docsearch-modal-background)}html[data-theme=dark]{--docsearch-text-color:#c4c7dc;--docsearch-secondary-text-color:#b6b7d5;--docsearch-subtle-color:#212139;--docsearch-error-color:#ef5350;--docsearch-success-color:rgba(67,160,71,.2);--docsearch-highlight-color:#457aff;--docsearch-focus-color:#9ac8ff;--docsearch-background-color:#36395a;--docsearch-icon-color:#b6b7d5;--docsearch-container-background:rgba(9,10,17,.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#000000a6;--docsearch-searchbox-focus-background:#000000a6;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-background:#36395a;--docsearch-key-color:#b6b7d5;--docsearch-key-pressed-shadow:inset 0 2px 4px rgba(12,13,20,.4);--docsearch-footer-background:#000000a6;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,.5),0 -4px 8px 0 rgba(0,0,0,.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497;--shimmer-bg:linear-gradient(90deg,#e0e3e8 0%,var(--docsearch-muted-color) 20%,var(--docsearch-muted-color) 60%,#e0e3e8 95%);--docsearch-dropdown-menu-background:var(--docsearch-hit-background);--docsearch-dropdown-menu-item-hover-background:var(--docsearch-modal-background);--docsearch-search-button-background:var(--docsearch-modal-background);--docsearch-search-button-text-color:var(--docsearch-text-color)}.DocSearch-Button{all:unset;align-items:center;background-color:var(--docsearch-search-button-background);border:1px solid var(--docsearch-subtle-color);border-radius:.5rem;color:var(--docsearch-search-button-text-color);cursor:pointer;display:flex;height:36px;justify-content:space-between;padding:0 8px;-webkit-user-select:none;user-select:none}.DocSearch-Button-Container{align-items:center;display:flex;height:100%}.DocSearch-Button-Container svg{color:currentColor}.DocSearch-Back-Icon,.DocSearch-Search-Icon{color:var(--docsearch-highlight-color);stroke-width:1.6}.DocSearch-Button-Placeholder{color:currentColor;display:inline-block;font-size:1rem;line-height:normal;padding-block:0;padding-inline:8px 12px}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-background);border:0;border-radius:4px;box-shadow:none!important;color:var(--docsearch-key-color);display:flex;font-family:system-ui,-apple-system,sans-serif;font-size:14px;height:24px;justify-content:center;position:relative;transition-duration:.1s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:24px}

@supports (color: color-mix(in lch, red, blue)){
.DocSearch-Button-Key{border:1px solid color-mix(in srgb,var(--docsearch-subtle-color) 20%,transparent)}
}.DocSearch-Button-Key--ctrl{width:33px}.DocSearch-Button-Key:first-child{margin-inline-end:.4em}@media (prefers-reduced-motion){.DocSearch-Button-Key{transition:none}}.DocSearch-Button-Key--pressed{box-shadow:var(--docsearch-key-pressed-shadow)!important;transform:translateY(1px)}@media (max-width:768px){.DocSearch-Button{width:auto}.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{backdrop-filter:blur(4px);background-color:var(--docsearch-container-background);height:100vh;inset-block-start:0;inset-inline-start:0;position:fixed;width:100vw;z-index:400}.DocSearch-Container a{-webkit-text-decoration:none;text-decoration:none}.DocSearch-Link{appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:4px;box-shadow:var(--docsearch-modal-shadow);display:flex;flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex}.DocSearch-SearchBar-Magnifier{color:var(--docsearch-highlight-color)}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-block-end:1px solid var(--docsearch-subtle-color);border-radius:4px 4px 0 0;display:flex;height:var(
    --docsearch-searchbox-height,var(--docsearch-searchbox-initial-height)
  );margin:0;min-height:var(--docsearch-searchbox-initial-height);padding-block:var(--docsearch-spacing);padding-inline:16px;position:relative;width:100%}.DocSearch-Input,.DocSearch-Modal-heading{appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1 1 0%;font:inherit;font-size:1.2em;font-weight:300;height:100%;line-height:1.4;min-width:0;outline:none;overflow-y:hidden;padding-block-start:0;padding-inline-start:8px;resize:none}.DocSearch-Input{overflow-x:hidden;text-overflow:ellipsis}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-Actions{align-items:center;display:flex;flex:0 0 auto;gap:8px;height:var(--docsearch-actions-height);justify-content:flex-end;padding:0 2px;width:auto}.DocSearch-Divider{border-inline-start:1px solid var(--docsearch-subtle-color);height:16px}.DocSearch-Action{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center;min-height:24px;min-width:24px}.DocSearch-Action,.DocSearch-AskAi-Return,.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel{margin:0;padding:0}.DocSearch-AskAi-Return{cursor:pointer}.DocSearch-AskAi-Return,.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Action{animation:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;inset-inline-end:0;stroke-width:var(--docsearch-icon-stroke-width)}}.DocSearch-Action,.DocSearch-AskAi-Return{animation:fade-in .1s ease-in forwards;appearance:none;background:none;border:none;border-radius:var(--docsearch-border-radius);color:var(--docsearch-icon-color);cursor:pointer;inset-inline-end:0;padding:2px;stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-AskAi-Return[hidden],.DocSearch-Close[hidden],.DocSearch-Input[hidden],.DocSearch-StreamingIndicator[hidden]{display:none}.DocSearch-Action:hover,.DocSearch-AskAi-Return:hover{background:var(--docsearch-soft-primary-color);color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{color:var(--docsearch-icon-color);height:24px;width:24px}.DocSearch-Form:focus-within .DocSearch-MagnifierLabel svg{color:var(--docsearch-highlight-color)}.DocSearch-Clear{appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;flex:none;font:inherit;font-size:.9em;font-weight:300;height:28px;margin-inline-start:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;-webkit-user-select:none;user-select:none;white-space:nowrap}.DocSearch-Clear:focus-visible,.DocSearch-Close:focus-visible{border-radius:4px;outline:2px solid var(--docsearch-focus-color);outline-offset:1px}.DocSearch-Dropdown{height:var(--docsearch-modal-variable-height);max-height:calc(var(--docsearch-modal-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown-Container ul{list-style:none;margin:0;padding:0}.DocSearch-Label{color:var(--docsearch-secondary-text-color);font-size:.875em;font-weight:400;line-height:1.6em}.DocSearch-Help,.DocSearch-NoResults-Help{color:var(--docsearch-secondary-text-color);font-size:.8em;font-weight:300;line-height:1.5em;margin:0;-webkit-user-select:none;user-select:none}.DocSearch-Title{color:var(--docsearch-text-color);font-size:1.1em;font-weight:300;line-height:1.5em;vertical-align:middle}.DocSearch-Title strong{font-weight:500}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-inline-start:8px}.DocSearch-Hits:last-of-type{margin-block-end:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-block-end:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-block-end:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-block-end:4px;position:relative;scroll-margin-block-start:40px}.DocSearch-Hit:first-of-type{margin-block-start:4px}.DocSearch-Hit a,.DocSearch-Hit--AskAI{background:var(--docsearch-hit-background);border-radius:4px;cursor:pointer;display:block;padding-inline-start:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-text-color);font-size:.9em;font-weight:600;inset-block-start:0;line-height:32px;margin:0 -4px;padding:8px 4px 4px;position:sticky;z-index:10}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;stroke-width:var(--docsearch-icon-stroke-width);width:24px}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit--AskAI,.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-hit-highlight-color)}.DocSearch-Conversation-History .DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-hit-background)}.DocSearch-Hit mark{color:var(--docsearch-highlight-color);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:.3em}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-text-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{color:var(--docsearch-secondary-text-color);height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Hit-action{align-items:center;color:var(--docsearch-muted-color);display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-inline-start:6px}.DocSearch-Hit-action-button{appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:background-color .1s ease-in}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:400;gap:4px;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-secondary-text-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title{color:var(--docsearch-text-color)}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-highlight-color)}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:none}}.DocSearch-AskAiScreen,.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{align-items:center;color:var(--docsearch-secondary-text-color);display:flex;flex-direction:column;font-size:1.25em;font-weight:400;justify-content:center;margin:0 auto;text-align:center;width:80%}.DocSearch-AskAiScreen,.DocSearch-ErrorScreen,.DocSearch-NoResults{max-height:80%}.DocSearch-StartScreen{height:100%}.DocSearch-NoResults{gap:.8em;margin-block-start:2em}.DocSearch-NoResults--withAskAi{justify-content:flex-start;margin-block-start:0}.DocSearch-AskAiScreen,.DocSearch-ErrorScreen,.DocSearch-StartScreen{gap:24px}.DocSearch-StartScreen-Icon{height:64px;stroke:var(--docsearch-icon-color);width:64px}.DocSearch-Screen-Icon{color:var(--docsearch-icon-color)}.DocSearch-NoResults-Prefill-List{display:flex;flex-direction:column;gap:12px;text-align:center}.DocSearch-NoResults-Prefill-List-Items{display:flex;flex-direction:column;gap:2px}.DocSearch-NoResults-Prefill-List-Items p{align-items:center;display:flex;margin:0;text-align:start}.DocSearch-Prefill{align-items:center;appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-flex;font-size:.8em;font-weight:300;gap:4px;height:40px;padding:0 4px}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;-webkit-text-decoration:underline;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-block-start:1px solid var(--docsearch-subtle-color);border-radius:0 0 4px 4px;display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;-webkit-user-select:none;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;gap:16px;list-style:none;margin:0;padding:0}.DocSearch-Commands li,.DocSearch-Commands-Key{align-items:center;display:flex}.DocSearch-Commands-Key{background-color:var(--docsearch-background-color);border:0;border-radius:2px;box-shadow:none!important;color:var(--docsearch-icon-color);height:24px;justify-content:center;margin-inline-end:4px;width:24px}.DocSearch-Commands-Key:last-of-type{margin-inline-end:8px}.DocSearch-Escape-Key{font-size:10px;font-weight:300;letter-spacing:normal;line-height:16px;text-align:center;text-transform:uppercase}.DocSearch-VisuallyHiddenForAccessibility{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.DocSearch-AskAi-Section{display:flex;flex-direction:column;gap:8px;padding:12px 0}.DocSearch-Hit-AskAIButton{align-items:center;color:var(--docsearch-text-color);display:flex;flex-direction:row}.DocSearch-Hit-AskAIButton-icon{color:var(--docsearch-icon-color);flex-shrink:0;margin-inline-end:12px}.DocSearch-Hit-AskAIButton-title{color:var(--docsearch-hit-color);display:flex;flex:1 1 auto;font-weight:400;gap:4px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-AskAIButton-title-query{background:none;margin-inline-start:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.DocSearch-Hit-AskAIButton-title mark{-webkit-text-decoration:none;text-decoration:none}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.DocSearch-AskAiScreen-Container{display:flex;flex-direction:column;gap:0;height:100%;justify-content:flex-start;padding:0;text-align:start;width:100%}.DocSearch-AskAiScreen-Disclaimer{align-self:flex-start;display:flex;font-size:.6em;font-weight:300;margin:0;padding-block:1.5em .5em;padding-inline:0;text-align:start}.DocSearch-AskAiScreen-Body{gap:24px;width:100%}.DocSearch-AskAiScreen-Body,.DocSearch-AskAiScreen-Response,.DocSearch-AskAiScreen-Response-Container{display:flex;flex-direction:column}.DocSearch-AskAiScreen-Response{align-self:flex-start;background:var(--docsearch-hit-background);border-radius:4px;color:var(--docsearch-text-color);font-size:.8em;gap:1em;margin-block-end:8px;padding:24px;width:100%}.DocSearch-AskAiScreen-Query{font-size:1.25em;font-weight:600;line-break:loose;line-height:1.4;margin:0}.DocSearch-AskAiScreen-Answer{line-height:1.5}.DocSearch-AskAiScreen-Answer,.DocSearch-AskAiScreen-ThinkingDots{color:var(--docsearch-secondary-text-color);font-weight:400;margin:0}.DocSearch-AskAiScreen-ThinkingDots{font-size:.8em}.DocSearch-AskAiScreen-Answer-Footer{align-items:center;display:flex;flex-direction:row;gap:8px;justify-content:space-between}.DocSearch-AskAiScreen-Actions{align-items:center;display:flex;flex-direction:row;gap:12px;margin-inline-start:auto}.DocSearch-AskAiScreen-ActionButton{align-items:center;background:none;border:none;border-radius:4px;cursor:pointer;display:flex;justify-content:center;margin:0;padding:4px;transition:background-color .2s ease;width:24px}.DocSearch-AskAiScreen-ActionButton:hover{background:var(--docsearch-hit-highlight-color)}.DocSearch-AskAiScreen-ActionButton svg{color:var(--docsearch-icon-color);height:20px;stroke-width:1.5;width:20px}.DocSearch-AskAiScreen-CopyButton--copied{background-color:var(--docsearch-success-color);cursor:default}.DocSearch-AskAiScreen-MessageContent{display:flex;flex-direction:column;row-gap:1em}.DocSearch-AskAiScreen-Error{background-color:rgba(239,83,80,.1);border-radius:4px;color:var(--docsearch-error-color);flex-direction:row;font-size:1em;font-weight:400;gap:8px;padding:1em}.DocSearch-AskAiScreen-Error svg{margin-top:.25rem}.DocSearch-AskAiScreen-Error svg,.DocSearch-AskAiScreen-MessageContent-Tool svg{flex-shrink:0;height:16px;width:16px}.DocSearch-AskAiScreen-Error p{margin:0}.DocSearch-AskAiScreen-Error-Content{display:flex;flex:1 1 0%;flex-direction:column}.DocSearch-AskAiScreen-Error-Title{font-weight:700;margin-bottom:4px}.DocSearch-AskAiScreen-Error .DocSearch-Markdown-Content{color:var(--docsearch-error-color)}.DocSearch-AskAiScreen-Error--ThreadDepth{animation:slideDown .3s ease-out;border:1px solid #febdc5;color:var(--docsearch-text-color);font-size:12px;margin:12px 0 8px;width:100%}.DocSearch-AskAiScreen-Error--ThreadDepth .DocSearch-AskAiScreen-Error-Title{margin-bottom:6px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.DocSearch-ThreadDepthError-Link{background:none;border:none;color:var(--docsearch-highlight-color);cursor:pointer;font-family:inherit;font-size:inherit;padding:0;-webkit-text-decoration:underline;text-decoration:underline}.DocSearch-ThreadDepthError-Link:hover{opacity:.8}.DocSearch-ThreadDepthError-Link:active{color:#991b1b}.DocSearch-AskAiScreen-FeedbackText{color:var(--docsearch-muted-color);font-size:.7em;font-weight:400;margin:0}.DocSearch-AskAiScreen-FeedbackText--visible{animation:fade-in .3s ease-in forwards}.DocSearch-AskAiScreen-RelatedSources{display:flex;flex-direction:column;gap:4px;width:100%}.DocSearch-AskAiScreen-RelatedSources-List{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;width:100%}.DocSearch-AskAiScreen-RelatedSources-Title{color:var(--docsearch-secondary-text-color);font-size:.7em;font-weight:400;margin:0;padding:6px 0}.DocSearch-AskAiScreen-RelatedSources-NoResults{color:var(--docsearch-text-color);font-size:.8rem;font-weight:400;margin:0}.DocSearch-AskAiScreen-RelatedSources-Error{color:var(--docsearch-error-color);font-size:.8rem;font-weight:400;margin:0}.DocSearch-AskAiScreen-RelatedSources-Item-Link{align-items:center;background:var(--docsearch-hit-background);border-radius:4px;color:var(--docsearch-text-color);display:flex;font-size:.75em;gap:6px;max-width:70%;padding:12px 8px;-webkit-text-decoration:none;text-decoration:none;transition:background-color .2s ease}.DocSearch-AskAiScreen-RelatedSources-Item-Link svg{color:var(--docsearch-icon-color);flex-shrink:0;stroke-width:1.2}.DocSearch-AskAiScreen-RelatedSources-Item-Link span{flex:1 1 0;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.DocSearch-AskAiScreen-ExchangesList{display:flex;flex-direction:column;gap:24px;margin:8px 0}.DocSearch-AskAiScreen-RelatedSources-Item-Link:hover{background:var(--docsearch-hit-highlight-color)}.DocSearch-Markdown-Content{color:var(--docsearch-text-color);font-size:.9355em;line-height:1.6;word-wrap:break-word}.DocSearch-Markdown-Content--streaming{animation:fade-in .3s ease-in-out both}.DocSearch-Markdown-Content p{margin:1em 0}.DocSearch-Markdown-Content p:last-child{margin-block-end:0}.DocSearch-Markdown-Content p:first-child{margin-block-start:0}.DocSearch-Markdown-Content code{border-radius:3px;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.9em;letter-spacing:normal;margin:0;padding:.2em 0}.DocSearch-Markdown-Content code,.DocSearch-Markdown-Content pre{background-color:var(--docsearch-key-background);color:var(--docsearch-text-color)}.DocSearch-Markdown-Content pre{border-radius:6px;margin:1.5em 0;overflow-x:auto;padding:1.2em}.DocSearch-Markdown-Content pre code{background-color:transparent;border-radius:0;color:inherit;font-size:.8em;margin:0;padding:0;white-space:pre-wrap;word-wrap:break-word;line-height:1.5}.DocSearch-Markdown-Content h1,.DocSearch-Markdown-Content h2,.DocSearch-Markdown-Content h3,.DocSearch-Markdown-Content h4,.DocSearch-Markdown-Content h5,.DocSearch-Markdown-Content h6{color:var(--docsearch-text-color);font-weight:600;letter-spacing:-.02em;line-height:1.3;margin:1em 0}.DocSearch-Markdown-Content h1{font-size:1.5em}.DocSearch-Markdown-Content h2{font-size:1.2em}.DocSearch-Markdown-Content h3{font-size:1em}.DocSearch-Markdown-Content h4{font-size:.9em}.DocSearch-Markdown-Content h5,.DocSearch-Markdown-Content h6{font-size:.8em}.DocSearch-Markdown-Content ol,.DocSearch-Markdown-Content ul{color:var(--docsearch-text-color);margin:1.2em 0;padding-inline-start:1.5em}.DocSearch-Markdown-Content ul{list-style-type:disc}.DocSearch-Markdown-Content ol{list-style-type:decimal}.DocSearch-Markdown-Content li{color:var(--docsearch-text-color);line-height:1.6;margin:.8em 0;padding-inline-start:.3em}.DocSearch-Markdown-Content li>ol,.DocSearch-Markdown-Content li>ul{margin:.5em}.DocSearch-Markdown-Content li::marker{color:var(--docsearch-muted-color)}.DocSearch-Markdown-Content a{color:var(--docsearch-highlight-color);-webkit-text-decoration:none;text-decoration:none;transition:all .2s ease}.DocSearch-Markdown-Content a:hover{opacity:.9;-webkit-text-decoration:underline;text-decoration:underline}.DocSearch-Markdown-Content blockquote{border-inline-start:4px solid var(--docsearch-hit-highlight-color);color:var(--docsearch-secondary-text-color);font-style:italic;margin:1.5em 0;padding-block:.5em;padding-inline:1em 0}.DocSearch-Markdown-Content hr{border:none;border-block-start:1px solid var(--docsearch-subtle-color);margin:1em 0}.DocSearch-Markdown-Content table{border-collapse:collapse;margin:1.5em 0;width:100%}.DocSearch-Markdown-Content td,.DocSearch-Markdown-Content th{border:1px solid var(--docsearch-subtle-color);padding:.75em;text-align:start}.DocSearch-Markdown-Content th{background-color:var(--docsearch-hit-background);font-weight:600}.DocSearch-AskAiScreen-MessageContent-Reasoning{align-items:center;color:var(--docsearch-muted-color);display:flex;font-size:1em;gap:4px}.DocSearch-AskAiScreen-MessageContent-Reasoning svg{color:var(--docsearch-icon-color)}.DocSearch-AskAiScreen-MessageContent-Tool{align-items:center;color:var(--docsearch-muted-color);display:flex;line-height:1.2;width:100%}.DocSearch-AskAiScreen-MessageContent-Tool.Tool--Result{padding-block-start:0}.DocSearch-AskAiScreen-MessageContent-Tool>svg{color:var(--docsearch-icon-color);margin-inline-end:8px}.DocSearch-AskAiScreen-MessageContent-Tool-Query{color:var(--docsearch-muted-color);transition:box-shadow .2s ease}.DocSearch-AskAiScreen-MessageContent-Tool-Query svg{color:var(--docsearch-muted-color)}.DocSearch-AskAiScreen-MessageContent-Tool-Query:hover{box-shadow:0 1px 0 0 var(--docsearch-highlight-color);color:var(--docsearch-highlight-color);cursor:pointer}.DocSearch-AskAiScreen-MessageContent-Tool-Query:hover svg{color:var(--docsearch-highlight-color)}.DocSearck-AskAiScreen-MessageContent-Stopped{color:var(--docsearch-muted-color);font-style:italic;margin-block-start:1em}.DocSearch-AskAiScreen-SmallerLoadingIcon{height:16px;width:16px}.shimmer{background:var(--shimmer-bg);background-clip:text;-webkit-background-clip:text;background-size:200% auto;color:transparent;display:flex;-webkit-text-fill-color:transparent;animation:shimmerText 2.5s linear infinite;pointer-events:none}@keyframes shimmerText{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{opacity:.3}50%{opacity:.6}}@media (max-width:768px){:root{--docsearch-spacing:10px;--docsearch-footer-height:48px}.DocSearch-Input{font-size:1rem}.DocSearch-Hit-AskAIButton-icon{margin-inline-end:8px}body:has(.DocSearch-Container){overflow:hidden;position:fixed}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:calc(var(--docsearch-vh, 1vh)*100);height:100dvh}.DocSearch-Footer{border-radius:0;inset-block-end:0;position:static}.DocSearch-Hit-content-wrapper{display:flex;overflow-wrap:break-word;position:relative;white-space:normal;width:80%}.DocSearch-Hit-Container{height:auto;min-height:var(--docsearch-hit-height);padding-block:8px}.DocSearch-Modal{border-radius:0;box-shadow:none;height:calc(var(--docsearch-vh, 1vh)*100);height:100dvh;margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:none}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}.DocSearch-AskAiScreen-Response-Container{flex-direction:column}.DocSearch-AskAiScreen-RelatedSources,.DocSearch-AskAiScreen-Response{width:100%}}.DocSearch-CodeSnippet{position:relative}.DocSearch-CodeSnippet-CopyButton{align-items:center;background:var(--docsearch-key-background);border:none;border-radius:4px;color:var(--docsearch-text-color);cursor:pointer;display:flex;font-size:.75em;inset-block-start:8px;inset-inline-end:8px;padding:.2em .6em;position:absolute;transition:opacity .2s ease}.DocSearch-CodeSnippet-CopyButton:hover{opacity:.8}.DocSearch-CodeSnippet-CopyButton:active{opacity:.6}.DocSearch-CodeSnippet-CopyButton svg{height:16px;margin-inline-end:4px;width:16px}.DocSearch-CodeSnippet-CheckIcon,.DocSearch-CodeSnippet-CopyButton--copied .DocSearch-CodeSnippet-CopyIcon{display:none}.DocSearch-CodeSnippet-CopyButton--copied .DocSearch-CodeSnippet-CheckIcon{display:inline-block}.DocSearch-Markdown-Content--streaming .DocSearch-CodeSnippet-CopyButton{display:none}.DocSearch-NewConversationScreen{padding:3em var(--docsearch-spacing)}.DocSearch-NewConversationScreen-Title{color:var(--docsearch-text-color);font-size:26px;font-weight:600;margin-block-end:.15em}.DocSearch-NewConversationScreen-Description{color:var(--docsearch-muted-color);font-size:14px}.DocSearch-NewConversationScreen-SuggestedQuestions{align-items:start;display:flex;flex-direction:column;gap:var(--docsearch-spacing);margin-block-start:1.5em}.DocSearch-NewConversationScreen-SuggestedQuestion{align-items:center;background-color:var(--docsearch-searchbox-background);border:1px solid var(--docsearch-subtle-color);border-radius:var(--docsearch-border-radius);color:var(--docsearch-text-color);cursor:pointer;display:inline-flex;height:40px;justify-content:center;padding:12px}.DocSearch-Menu{position:relative}.DocSearch-Menu-content{background-color:var(--docsearch-dropdown-menu-background);border-radius:var(--docsearch-border-radius);box-shadow:0 0 0 1px #21243d0d,0 8px 16px -4px #21243d40;display:none;flex-direction:column;inset-block-start:calc(100% + 12px);inset-inline-end:0;min-width:195px;padding:8px 0;position:absolute;z-index:422}.DocSearch-Menu-content.open{display:flex}.DocSearch-Menu-item{align-items:center;background-color:transparent;border:0;color:var(--docsearch-text-color);cursor:pointer;display:flex;font-size:14px;gap:8px;padding:10px 16px;white-space:nowrap}.DocSearch-Menu-item:hover{background-color:var(--docsearch-dropdown-menu-item-hover-background)}
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

:root {
  --docsearch-primary-color: var(--ifm-color-primary);
  --docsearch-text-color: var(--ifm-font-color-base);
}

.DocSearch-Button {
  margin: 0;
  transition: all var(--ifm-transition-fast)
    var(--ifm-transition-timing-default);
}

.DocSearch-Container {
  z-index: calc(var(--ifm-z-index-fixed) + 1);
}

.DocSearch-Button-Key {
  padding: 0;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.skipToContent_fXgn {
  position: fixed;
  top: 1rem;
  left: 100%;
  z-index: calc(var(--ifm-z-index-fixed) + 1);
  padding: calc(var(--ifm-global-spacing) / 2) var(--ifm-global-spacing);
  color: var(--ifm-color-emphasis-900);
  background-color: var(--ifm-background-surface-color);
}

.skipToContent_fXgn:focus {
  left: 1rem;
  box-shadow: var(--ifm-global-shadow-md);
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.closeButton_CVFx {
  padding: 0;
  line-height: 0;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.content_knG7 {
  font-size: 85%;
  text-align: center;
  padding: 5px 0;
}

.content_knG7 a {
  color: inherit;
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

:root {
  --docusaurus-announcement-bar-height: auto;
}

.announcementBar_mb4j {
  display: flex;
  align-items: center;
  height: var(--docusaurus-announcement-bar-height);
  background-color: var(--ifm-color-white);
  color: var(--ifm-color-black);

  /*
  Unfortunately we can't make announcement bar render above the navbar
  IE need to use border-bottom instead of shadow
  See https://github.com/facebookincubator/infima/issues/275

  box-shadow: var(--ifm-global-shadow-lw);
  z-index: calc(var(--ifm-z-index-fixed) + 1);
  */
  border-bottom: 1px solid var(--ifm-color-emphasis-100);
}

html[data-announcement-bar-initially-dismissed='true'] .announcementBar_mb4j {
  display: none;
}

.announcementBarPlaceholder_vyr4 {
  flex: 0 0 10px;
}

.announcementBarClose_gvF7 {
  flex: 0 0 30px;
  align-self: stretch;
}

.announcementBarContent_xLdY {
  flex: 1 1 auto;
}

@media print {
  .announcementBar_mb4j {
    display: none;
  }
}

@media (min-width: 997px) {
  :root {
    --docusaurus-announcement-bar-height: 30px;
  }

  .announcementBarPlaceholder_vyr4,
  .announcementBarClose_gvF7 {
    flex-basis: 50px;
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.toggle_vylO {
  width: 2rem;
  height: 2rem;
}

.toggleButton_gllP {
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: background var(--ifm-transition-fast);
}

.toggleButton_gllP:hover {
  background: var(--ifm-color-emphasis-200);
}

.toggleIcon_g3eP {
  display: none;
}

[data-theme-choice='system'] .systemToggleIcon_QzmC,
[data-theme-choice='light'] .lightToggleIcon_pyhR,
[data-theme-choice='dark'] .darkToggleIcon_wfgR {
  display: initial;
}

.toggleButtonDisabled_aARS {
  cursor: not-allowed;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.darkNavbarColorModeToggle_X3D1:hover {
  background: var(--ifm-color-gray-800);
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.themedComponent_mlkZ {
  display: none;
}

[data-theme='light'] .themedComponent--light_NVdE {
  display: initial;
}

[data-theme='dark'] .themedComponent--dark_xIcU {
  display: initial;
}

/*
JS disabled??? Show light version by default => better than showing nothing
TODO bad, but we currently always show light mode when there's no data-theme
 */
html:not([data-theme]) .themedComponent--light_NVdE {
  display: initial;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

:root {
  --docusaurus-collapse-button-bg: transparent;
  --docusaurus-collapse-button-bg-hover: rgb(0 0 0 / 10%);
}

[data-theme='dark']:root {
  --docusaurus-collapse-button-bg: rgb(255 255 255 / 5%);
  --docusaurus-collapse-button-bg-hover: rgb(255 255 255 / 10%);
}

@media (min-width: 997px) {
  .collapseSidebarButton_PEFL {
    display: block !important;
    background-color: var(--docusaurus-collapse-button-bg);
    height: 40px;
    position: sticky;
    bottom: 0;
    border-radius: 0;
    border: 1px solid var(--ifm-toc-border-color);
  }

  .collapseSidebarButtonIcon_kv0_ {
    transform: rotate(180deg);
    margin-top: 4px;
  }

  [dir='rtl'] .collapseSidebarButtonIcon_kv0_ {
    transform: rotate(0);
  }

  .collapseSidebarButton_PEFL:hover,
  .collapseSidebarButton_PEFL:focus {
    background-color: var(--docusaurus-collapse-button-bg-hover);
  }
}

.collapseSidebarButton_PEFL {
  display: none;
  margin: 0;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.iconExternalLink_nPIU {
  margin-left: 0.3rem;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.menuExternalLink_NnFM {
  align-items: center;
}

.linkLabel_CDUV {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}

.linkLabelText_Ad40 {
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.brandKicker_gDja {
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ifm-color-emphasis-800);
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.categoryLink_m60s {
  overflow: hidden;
}

/*
TODO merge this logic back in Infima?
 */
.menu__link--sublist-caret::after {
  margin-left: var(--ifm-menu-link-padding-vertical);
}

.categoryLinkLabel_V03G {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}

.categoryLinkLabelText_Hwc2 {
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.brandKicker_hlET {
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ifm-color-emphasis-800);
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

@media (min-width: 997px) {
  .menuHtmlItem_M9Kj {
    padding: var(--ifm-menu-link-padding-vertical)
      var(--ifm-menu-link-padding-horizontal);
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

@media (min-width: 997px) {
  .menu_SIkG {
    flex-grow: 1;
    padding: 0.5rem;
  }
  @supports (scrollbar-gutter: stable) {
    .menu_SIkG {
      padding: 0.5rem 0 0.5rem 0.5rem;
      scrollbar-gutter: stable;
    }
  }

  .menuWithAnnouncementBar_GW3s {
    margin-bottom: var(--docusaurus-announcement-bar-height);
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

@media (min-width: 997px) {
  .sidebar_njMd {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: var(--ifm-navbar-height);
    width: var(--doc-sidebar-width);
  }

  .sidebarWithHideableNavbar_wUlq {
    padding-top: 0;
  }

  .sidebarHidden_VK0M {
    opacity: 0;
    visibility: hidden;
  }

  .sidebarLogo_isFc {
    display: flex !important;
    align-items: center;
    margin: 0 var(--ifm-navbar-padding-horizontal);
    min-height: var(--ifm-navbar-height);
    max-height: var(--ifm-navbar-height);
    color: inherit !important;
    -webkit-text-decoration: none !important;
    text-decoration: none !important;
  }

  .sidebarLogo_isFc img {
    margin-right: 0.5rem;
    height: 2rem;
  }
}

.sidebarLogo_isFc {
  display: none;
}

/* Container do sidebar mobile encapsulado */
.mobileSidebarContainer_xtWn {
  margin: 16px 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  border: 2px solid rgba(236, 236, 236, 0.6);
  box-shadow:
    0 8px 2px rgba(236, 235, 235, 0),
    inset 0 1px 0 rgba(228, 226, 226, 0.027),
    inset 0 -1px 0 rgba(196, 195, 195, 0.575),
    inset 0 0 20px 2px rgba(204, 204, 204, 0.384);
  overflow: hidden;
}

/* Botão toggle principal */
.mobileSidebarToggle_ZHrX {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: inherit;
  transition: all 0.2s ease;
}

.mobileSidebarToggle_ZHrX:hover {
  background: rgba(118, 163, 230, 0.1);
}

.mobileSidebarLabel_usdU {
  flex: 1;
  text-align: left;
}

.mobileSidebarIcon_YrTv {
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 8px;
}

/* Conteúdo do sidebar */
.mobileSidebarContent_eSd3 {
  padding: 0 20px 16px 20px;
  max-height: 60vh;
  overflow-y: auto;
  animation: slideDown_ueF3 0.3s ease;
}

@keyframes slideDown_ueF3 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Categoria do sidebar */
.sidebarCategory_ZO7u {
  margin-bottom: 8px;
}

.sidebarCategoryButton_Iy5E {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: inherit;
  transition: all 0.2s ease;
  text-align: left;
}

.sidebarItemLabel_NxXG {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}

.brandKicker_mJJU {
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ifm-color-emphasis-800);
}

.sidebarCategoryButton_Iy5E:hover {
  background: rgba(118, 163, 230, 0.1);
}

.sidebarCategoryButton_Iy5E svg {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 8px;
}

/* Items dentro da categoria */
.sidebarCategoryItems_L8dp {
  padding-left: 16px;
  margin-top: 4px;
  animation: slideDown_ueF3 0.2s ease;
}

/* Links do sidebar */
.sidebarLink_zSKf {
  display: block;
  padding: 10px 12px;
  margin: 2px 0;
  border-radius: 6px;
  font-size: 0.9rem;
  color: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sidebarLink_zSKf:hover {
  background: rgba(118, 163, 230, 0.15);
  color: var(--ifm-color-primary);
}

/* Dark mode */
[data-theme='dark'] .mobileSidebarContainer_xtWn {
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(63, 63, 63, 0.5);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 18px 10px rgba(29, 29, 29, 0.788);
}

[data-theme='dark'] .mobileSidebarToggle_ZHrX:hover {
  background: rgba(90, 154, 243, 0.1);
}

[data-theme='dark'] .sidebarCategoryButton_Iy5E:hover {
  background: rgba(90, 154, 243, 0.1);
}

[data-theme='dark'] .sidebarLink_zSKf:hover {
  background: rgba(90, 154, 243, 0.15);
  color: var(--ifm-color-primary);
}

/* Scrollbar customizada */
.mobileSidebarContent_eSd3::-webkit-scrollbar {
  width: 6px;
}

.mobileSidebarContent_eSd3::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

.mobileSidebarContent_eSd3::-webkit-scrollbar-thumb {
  background: rgba(118, 163, 230, 0.3);
  border-radius: 3px;
}

.mobileSidebarContent_eSd3::-webkit-scrollbar-thumb:hover {
  background: rgba(118, 163, 230, 0.5);
}

[data-theme='dark'] .mobileSidebarContent_eSd3::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme='dark'] .mobileSidebarContent_eSd3::-webkit-scrollbar-thumb {
  background: rgba(90, 154, 243, 0.3);
}

[data-theme='dark'] .mobileSidebarContent_eSd3::-webkit-scrollbar-thumb:hover {
  background: rgba(90, 154, 243, 0.5);
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

@media (min-width: 997px) {
  .expandButton_TmdG {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--ifm-transition-fast) ease;
    background-color: var(--docusaurus-collapse-button-bg);
  }

  .expandButton_TmdG:hover,
  .expandButton_TmdG:focus {
    background-color: var(--docusaurus-collapse-button-bg-hover);
  }

  .expandButtonIcon_i1dp {
    transform: rotate(0);
  }

  [dir='rtl'] .expandButtonIcon_i1dp {
    transform: rotate(180deg);
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

:root {
  --doc-sidebar-width: 300px;
  --doc-sidebar-hidden-width: 30px;
}

.docSidebarContainer_YfHR {
  display: none;
}

@media (min-width: 997px) {
  .docSidebarContainer_YfHR {
    display: block;
    width: var(--doc-sidebar-width);
    margin-top: calc(-1 * var(--ifm-navbar-height));
    border-right: 1px solid var(--ifm-toc-border-color);
    will-change: width;
    transition: width var(--ifm-transition-fast) ease;
    clip-path: inset(0);
  }

  .docSidebarContainerHidden_DPk8 {
    width: var(--doc-sidebar-hidden-width);
    cursor: pointer;
  }

  .sidebarViewport_aRkj {
    top: 0;
    position: sticky;
    height: 100%;
    max-height: 100vh;
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.docMainContainer_TBSr {
  display: flex;
  width: 100%;
}

@media (min-width: 997px) {
  .docMainContainer_TBSr {
    flex-grow: 1;
    max-width: calc(100% - var(--doc-sidebar-width));
  }

  .docMainContainerEnhanced_lQrH {
    max-width: calc(100% - var(--doc-sidebar-hidden-width));
  }

  .docItemWrapperEnhanced_JWYK {
    max-width: calc(
      var(--ifm-container-width) + var(--doc-sidebar-width)
    ) !important;
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.docRoot_UBD9 {
  display: flex;
  width: 100%;
}

.docsWrapper_hBAB {
  display: flex;
  flex: 1 0 auto;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.anchorTargetStickyNavbar_Vzrq {
  scroll-margin-top: calc(var(--ifm-navbar-height) + 0.5rem);
}

.anchorTargetHideOnScrollNavbar_vjPI {
  scroll-margin-top: 0.5rem;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.hash-link {
  opacity: 0;
  padding-left: 0.5rem;
  transition: opacity var(--ifm-transition-fast);
  -webkit-user-select: none;
          user-select: none;
}

.hash-link::before {
  content: '#';
}

.hash-link:focus,
*:hover > .hash-link {
  opacity: 1;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.dropdownNavbarItemMobile_J0Sd {
  cursor: pointer;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.iconLanguage_nlXk {
  vertical-align: text-bottom;
  margin-right: 5px;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/*
Workaround to avoid rendering empty search container
See https://github.com/facebook/docusaurus/pull/9385
*/
.navbarSearchContainer_Bca1:empty {
  display: none;
}

@media (max-width: 996px) {
  .navbarSearchContainer_Bca1 {
    position: absolute;
    right: var(--ifm-navbar-padding-horizontal);
  }
}

@media (min-width: 997px) {
  .navbarSearchContainer_Bca1 {
    padding: 0 var(--ifm-navbar-item-padding-horizontal);
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.navbarHideable_m1mJ {
  transition: transform var(--ifm-transition-fast) ease;
}

.navbarHidden_jGov {
  transform: translate3d(0, calc(-100% - 2px), 0);
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.errorBoundaryError_a6uf {
  white-space: pre-wrap;
  color: red;
}

.errorBoundaryFallback_VBag {
  color: red;
  padding: 0.55rem;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/*
Hide color mode toggle in small viewports
 */
@media (max-width: 996px) {
  .colorModeToggle_DEke {
    display: none;
  }
}

/*
Restore some Infima style that broke with CSS Cascade Layers
See https://github.com/facebook/docusaurus/pull/11142
 */
.navbar__items--right > :last-child {
  padding-right: 0;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.footerLogoLink_BH7S {
  opacity: 0.5;
  transition: opacity var(--ifm-transition-fast)
    var(--ifm-transition-timing-default);
}

.footerLogoLink_BH7S:hover {
  opacity: 1;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

html,
body {
  height: 100%;
}

.mainWrapper_z2l0 {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* Docusaurus-specific utility class */
.docusaurus-mt-lg {
  margin-top: 3rem;
}

#__docusaurus {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.searchQueryInput_u2C7,
.searchVersionInput_m0Ui {
  border-radius: var(--ifm-global-radius);
  border: 2px solid var(--ifm-toc-border-color);
  font: var(--ifm-font-size-base) var(--ifm-font-family-base);
  padding: 0.8rem;
  width: 100%;
  background: var(--docsearch-searchbox-focus-background);
  color: var(--docsearch-text-color);
  margin-bottom: 0.5rem;
  transition: border var(--ifm-transition-fast) ease;
}

.searchQueryInput_u2C7:focus,
.searchVersionInput_m0Ui:focus {
  border-color: var(--docsearch-primary-color);
  outline: none;
}

.searchQueryInput_u2C7::placeholder {
  color: var(--docsearch-muted-color);
}

.searchResultsColumn_JPFH {
  font-size: 0.9rem;
  font-weight: bold;
}

.searchLogoColumn_rJIA {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}

.searchLogoColumn_rJIA a {
  display: flex;
}

.searchLogoColumn_rJIA span {
  color: var(--docsearch-muted-color);
  font-weight: normal;
}

.searchResultItem_Tv2o {
  padding: 1rem 0;
  border-bottom: 1px solid var(--ifm-toc-border-color);
}

.searchResultItemHeading_KbCB {
  font-weight: 400;
  margin-bottom: 0;
}

.searchResultItemPath_lhe1 {
  font-size: 0.8rem;
  color: var(--ifm-color-content-secondary);
  --ifm-breadcrumb-separator-size-multiplier: 1;
}

.searchResultItemSummary_AEaO {
  margin: 0.5rem 0 0;
  font-style: italic;
}

@media only screen and (max-width: 996px) {
  .searchQueryColumn_RTkw {
    max-width: 60% !important;
  }

  .searchVersionColumn_ypXd {
    max-width: 40% !important;
  }

  .searchResultsColumn_JPFH {
    max-width: 60% !important;
  }

  .searchLogoColumn_rJIA {
    max-width: 40% !important;
    padding-left: 0 !important;
  }
}

@media screen and (max-width: 576px) {
  .searchQueryColumn_RTkw {
    max-width: 100% !important;
  }

  .searchVersionColumn_ypXd {
    max-width: 100% !important;
    padding-left: var(--ifm-spacing-horizontal) !important;
  }
}

.loadingSpinner_XVxU {
  width: 3rem;
  height: 3rem;
  border: 0.4em solid #eee;
  border-top-color: var(--ifm-color-primary);
  border-radius: 50%;
  animation: loading-spin_vzvp 1s linear infinite;
  margin: 0 auto;
}

@keyframes loading-spin_vzvp {
  100% {
    transform: rotate(360deg);
  }
}

.loader_vvXV {
  margin-top: 2rem;
}

.search-result-match {
  color: var(--docsearch-hit-color);
  background: rgb(255 215 142 / 25%);
  padding: 0.09em 0;
}

/* ============================================
   HOMEPAGE - CONTAINER PRINCIPAL
   ============================================ */

/* Garantir que o conteúdo ocupe 100% do wrapper */
body:has(main > .container > header.hero) main,
body:has(.heroBanner) main {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mesma largura e mesmo padding lateral do hero — nav, hero,
   seções e rodapé alinham na mesma coluna. */
.container_a30C {
  max-width: var(--home-max, 1200px);
  margin: 0 auto;
  padding: 0 var(--home-pad, 2.5rem);
}

/* ============================================
   SEÇÃO DE SOLUÇÕES

   Navegação por produto. Dois níveis de texto apenas:
   nome + uma linha do que faz. Detalhe mora na página
   do produto e no rodapé de links.
   ============================================ */
/* Começa no branco em que o fade termina e ganha tom ao descer:
   os cartões são brancos e precisam de um leito que os destaque,
   mas a emenda com o hero tem de permanecer invisível. */
.features_t9lD {
  padding: 0 0 clamp(3.5rem, 7svh, 5.5rem);
  overflow-x: hidden;
  box-sizing: border-box;
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F6F5 22%, #F1F6F5 100%);
}

[data-theme='dark'] .features_t9lD {
  background: #1a1b1b;
}

.sectionHeader_fLny {
  padding-top: clamp(1.5rem, 3.8svh, 3rem);
  margin: 0 0 1.25rem;
}

.sectionTitle_JIRO {
  margin: 0;
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ifm-color-emphasis-800);
}

/* ============================================
   GRID
   Alturas iguais, independente do tamanho do texto.
   ============================================ */
.row_kvGa {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  align-items: stretch;
}

/* ============================================
   CARTÃO DE PRODUTO
   ============================================ */
.productCard_qymA {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.35rem 1.4rem 1.4rem;
  color: inherit;
  background: #ffffff;
  border: 1px solid rgba(0, 77, 74, 0.1);
  border-radius: var(--home-radius, 10px);
  box-shadow: var(--home-shadow, 0 1px 2px rgba(0, 30, 29, 0.06));
  transition:
    border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.productCard_qymA:hover {
  color: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
  border-color: var(--trl-teal);
  box-shadow: 0 2px 4px rgba(0, 46, 44, 0.08), 0 8px 20px rgba(0, 77, 74, 0.13);
  transform: translateY(-2px);
}

.productCard_qymA:focus-visible {
  outline: 2px solid var(--trl-teal);
  outline-offset: 3px;
}

[data-theme='dark'] .productCard_qymA {
  background: #1E2A29;
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.22);
}

[data-theme='dark'] .productCard_qymA:hover {
  background: #22302F;
  border-color: rgba(0, 255, 246, 0.4);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* ============================================
   ÍCONE
   Âncora de varredura: o olho encontra o símbolo
   antes de ler o nome.
   ============================================ */
.productIcon_EXjw {
  margin-bottom: 0.55rem;
  color: var(--trl-teal);
}

[data-theme='dark'] .productIcon_EXjw {
  color: #4FD8D4;
}

.productTitle__mTY {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ifm-heading-color);
}

.productSummary_SOaw {
  font-size: 0.88rem;
  line-height: 1.5;
  /* Teal escurecido: o #008F8F da marca dá 3,94:1 sobre branco e
     reprova em AA. Este tom mantém a família e alcança 5,17:1. */
  color: #007A7A;
}

[data-theme='dark'] .productSummary_SOaw {
  color: #4FD8D4;
}

/* ============================================
   SETA
   Invisível em repouso, aparece no hover.
   ============================================ */
.productArrow_eJK1 {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  color: var(--trl-teal);
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 180ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.productCard_qymA:hover .productArrow_eJK1,
.productCard_qymA:focus-visible .productArrow_eJK1 {
  opacity: 1;
  transform: translateX(0);
}

[data-theme='dark'] .productArrow_eJK1 {
  color: #4FD8D4;
}

/* ============================================
   CARTÃO SEM DESTINO (em breve)

   Não é link: sem hover de navegação, sem foco de
   teclado, sem corpo de texto. Borda tracejada e
   nome esmaecido dizem o suficiente.
   ============================================ */
.productCardMuted_JdIW {
  cursor: default;
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}

[data-theme='dark'] .productCardMuted_JdIW {
  background: transparent;
  box-shadow: none;
}

/* Atenuação por cor, não por opacity: opacidade arrastaria o selo
   junto, e é o selo que explica por que o cartão está apagado.
   Ícone é gráfico não-textual e precisa de 3:1 — emphasis-500
   daria 1,62:1 sobre o leito. */
.productCardMuted_JdIW .productIcon_EXjw,
.productCardMuted_JdIW .productTitle__mTY {
  color: var(--ifm-color-emphasis-700);
}

[data-theme='dark'] .productCardMuted_JdIW .productIcon_EXjw,
[data-theme='dark'] .productCardMuted_JdIW .productTitle__mTY {
  color: rgba(255, 255, 255, 0.55);
}

.badge_GpeJ {
  padding: 0.15rem 0.45rem;
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: #005E5B;
  background: rgba(0, 143, 143, 0.12);
  border-radius: 4px;
  white-space: nowrap;
}

[data-theme='dark'] .badge_GpeJ {
  color: #7DE8E4;
  background: rgba(0, 255, 246, 0.11);
}

/* ============================================
   RESPONSIVIDADE
   ============================================ */
@media (max-width: 996px) {
  .row_kvGa {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .row_kvGa {
    grid-template-columns: 1fr;
  }

  .sectionHeader_fLny {
    padding-top: clamp(1.5rem, 3.2dvh, 2.5rem);
  }

  /* Sem hover em toque: a seta fica sempre visível */
  .productArrow_eJK1 {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .productCard_qymA,
  .productArrow_eJK1 {
    transition: none;
  }

  .productCard_qymA:hover {
    transform: none;
  }
}

/**
 * HOME DA DOCUMENTAÇÃO
 *
 * Duas atmosferas apenas: faixa escura no topo (nav + hero) e neutro
 * claro no resto. A transição entre elas é um gradiente, não uma linha.
 *
 * Todos os containers compartilham --home-max e --home-pad, então nav,
 * hero, seções e rodapé alinham na mesma coluna. Esses tokens moram em
 * src/css/custom.css: este arquivo é um CSS Module e só é carregado na
 * rota `/`, então declará-los aqui deixaria o footer das outras páginas
 * sem eles.
 */

:root {
  /* Altura da faixa escura: cobre o navbar mais o hero de 80vh.
     Consumida pelo body::before em custom.css, que a pinta de
     uma vez só. Só a home tem faixa, então fica no módulo. */
  --home-band: 80vh;
}

/* Garante que o wrapper do Docusaurus não limite a faixa escura */
.hero_aEcG {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  /* 80vh menos a altura do navbar, que fica acima e ocupa espaço
     no fluxo (é sticky, não fixed). min-height em vez de height:
     se o conteúdo crescer — texto maior, mais linhas no código —
     o hero acompanha em vez de vazar. */
  min-height: calc(80vh - var(--ifm-navbar-height, 3.75rem));
  box-sizing: border-box;
  padding: clamp(2rem, 5svh, 3.5rem) var(--home-pad) clamp(3rem, 7svh, 5rem);
  /* Sem fundo próprio: a faixa escura é pintada uma única vez no
     body (src/css/custom.css) e cobre nav e hero juntos. Duas
     superfícies pintadas em separado sempre deixariam uma emenda. */
  background: transparent;
}

.heroInner_V4lS {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  width: 100%;
  max-width: var(--home-max);
  margin: 0 auto;
}

/* CAMADA 3 — dissolução para o fundo claro.

   A cor é a mesma do fundo da página, variando só o alfa de 0 a 1.
   Assim funciona sobre qualquer coisa atrás e elimina o corte duro.

   O rgba(...,0) repete o RGB da cor final de propósito: com
   `transparent`, alguns navegadores interpolam via preto e o
   gradiente ganha um véu cinza no meio. */
.heroFade_Cvlm {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Atrás do conteúdo: o fade é alto e alcança os botões em telas
     baixas. Passando por baixo ele dissolve só o fundo — sem essa
     camada o branco lavava o botão primário até 4,48:1. */
  z-index: 0;
  height: clamp(160px, 26svh, 260px);
  /* Paradas intermediárias em vez de duas pontas: um gradiente
     linear de 0 a 1 sobe rápido demais no meio e o olho enxerga
     onde a dissolução "começa". A curva aqui é lenta no início e
     só fecha perto do fim, então a passagem não tem ponto de
     partida visível. */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.04) 22%,
    rgba(255, 255, 255, 0.14) 42%,
    rgba(255, 255, 255, 0.34) 60%,
    rgba(255, 255, 255, 0.64) 78%,
    rgba(255, 255, 255, 0.89) 91%,
    #FFFFFF 100%
  );
  pointer-events: none;
}

[data-theme='dark'] .heroFade_Cvlm {
  background: linear-gradient(
    180deg,
    rgba(26, 27, 27, 0) 0%,
    rgba(26, 27, 27, 0.04) 22%,
    rgba(26, 27, 27, 0.14) 42%,
    rgba(26, 27, 27, 0.34) 60%,
    rgba(26, 27, 27, 0.64) 78%,
    rgba(26, 27, 27, 0.89) 91%,
    #1a1b1b 100%
  );
}

/* ============================================
   COLUNA ESQUERDA
   ============================================ */
.heroContent_mKPX {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* Monoespaçada maiúscula: marca contexto técnico e diferencia
   rótulo de conteúdo sem precisar de outra cor. */
.eyebrow_kY3W {
  margin: 0 0 0.9rem;
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hero-accent);
}

/* Cores do hero por tema: a base clara pede texto escuro.
   Definidas como variáveis para não repetir cada seletor. */
.hero_aEcG {
  --hero-fg: #06302A;
  --hero-fg-soft: #35544D;
  /* Sob o círculo de acento a base clareia até ~#B9E3DB; um teal
     mais claro cairia para 4,27:1 ali. Este mantém 4,9:1 no pior
     ponto do gradiente. */
  --hero-accent: #005E5B;
}

[data-theme='dark'] .hero_aEcG {
  --hero-fg: #ffffff;
  --hero-fg-soft: rgba(255, 255, 255, 0.8);
  --hero-accent: var(--trl-cyan);
}

.heroTitle_qg2I {
  margin: 0 0 0.85rem;
  font-size: clamp(2.1rem, 4.2vw, 3.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--hero-fg);
  text-wrap: balance;
}

.heroSubtitle_jFu1 {
  margin: 0 0 clamp(1.25rem, 3svh, 1.85rem);
  max-width: 42ch;
  font-size: clamp(0.98rem, 1.3vw, 1.1rem);
  line-height: 1.5;
  color: var(--hero-fg-soft);
}

/* ============================================
   BUSCA
   Dispara o DocSearch da navbar — não instancia
   um segundo cliente Algolia.
   ============================================ */
/* Branco sólido: sobre a faixa escura, o campo precisa parecer
   uma entrada de texto real, não mais um botão translúcido.
   É o elemento mais claro da dobra depois do título. */
.searchTrigger_xxCg {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 29rem;
  margin: 0 0 clamp(1.1rem, 2.6svh, 1.6rem);
  padding: 0.95rem 1.1rem;
  font-family: inherit;
  font-size: 0.98rem;
  text-align: left;
  color: #5B6663;
  background: #ffffff;
  /* Sobre a base clara, a sombra sozinha não separa o campo do
     fundo — a borda faz esse trabalho. No escuro ela some e a
     sombra volta a bastar. */
  border: 1px solid #C9DCD8;
  border-radius: var(--home-radius);
  box-shadow: 0 1px 3px rgba(6, 48, 42, 0.07);
  cursor: pointer;
  transition:
    box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.searchTrigger_xxCg:hover {
  border-color: var(--hero-accent);
  box-shadow: 0 2px 8px rgba(6, 48, 42, 0.12);
}

[data-theme='dark'] .searchTrigger_xxCg {
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

[data-theme='dark'] .searchTrigger_xxCg:hover {
  border-color: var(--trl-cyan);
  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.24);
}

.searchTrigger_xxCg:focus-visible {
  outline: 2px solid var(--trl-cyan);
  outline-offset: 3px;
}

.searchIcon_Lofc {
  flex-shrink: 0;
  color: #7A8683;
}

.searchLabel_MPhK {
  flex: 1 1 auto;
}

.searchKbd_pMNM {
  flex-shrink: 0;
  padding: 0.22rem 0.5rem;
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
  /* 4,52:1 sobre o fundo do kbd — o tom anterior dava 4,25 */
  color: #63706D;
  background: #F1F4F3;
  border: 1px solid #DFE5E4;
  border-radius: 5px;
}

/* ============================================
   AÇÕES
   Uma primária sólida, duas secundárias em texto.
   ============================================ */
.actions_OvQX {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1.4rem;
}

.actionPrimary_RIrk,
.actionPrimary_RIrk:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.78rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  /* No escuro, ciano sólido é o ponto mais luminoso da dobra.
     No claro ele sumiria contra a base — aí o botão inverte:
     teal escuro com texto claro, mantendo o mesmo peso. */
  color: #ffffff;
  background: #00706B;
  border-radius: var(--home-radius);
  transition:
    background-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.actionPrimary_RIrk:hover {
  color: #ffffff;
  -webkit-text-decoration: none;
  text-decoration: none;
  background: #005E5B;
  transform: translateY(-1px);
}

[data-theme='dark'] .actionPrimary_RIrk,
[data-theme='dark'] .actionPrimary_RIrk:visited {
  color: var(--trl-deep);
  background: var(--trl-cyan);
}

[data-theme='dark'] .actionPrimary_RIrk:hover {
  color: var(--trl-deep);
  background: var(--trl-cyan-bright);
}

.actionArrow_i9Sx {
  flex-shrink: 0;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.actionPrimary_RIrk:hover .actionArrow_i9Sx {
  transform: translateX(3px);
}

.actionPrimary_RIrk:active {
  transform: translateY(0);
}

.actionPrimary_RIrk:focus-visible,
.actionLink_h9qY:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
  border-radius: 4px;
}

.actionLink_h9qY,
.actionLink_h9qY:visited {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--hero-accent);
  text-underline-offset: 0.25em;
  transition: color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.actionLink_h9qY:hover {
  color: var(--hero-fg);
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-decoration-color: var(--hero-accent);
  text-decoration-thickness: 1px;
}

/* ============================================
   PAINEL DE CÓDIGO

   Substitui o copy institucional: mostra a primeira
   chamada real da API em vez de afirmar que integrar
   é fácil.
   ============================================ */
.heroPanel_Nvjb {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* Superfície própria, mais escura que o hero: o painel é um objeto
   sobre o fundo, não uma janela translúcida nele. */
.codePanel_iUFZ {
  overflow: hidden;
  background: #04100F;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

.codeTabs_X13T {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.35rem 0.9rem 0 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Label discreta à direita das abas — diz o que o exemplo é
   sem competir com o código. */
.codeCaption_BxwV {
  margin-left: auto;
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.38);
  white-space: nowrap;
}

.codeTab_ea_V {
  padding: 0.5rem 0.85rem;
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}

.codeTab_ea_V:hover {
  color: rgba(255, 255, 255, 0.85);
}

.codeTab_ea_V:focus-visible {
  outline: 2px solid var(--trl-cyan);
  outline-offset: -2px;
}

/* O ativo é marcado por underline no acento */
.codeTabActive_mnNV,
.codeTabActive_mnNV:hover {
  color: var(--trl-cyan);
  border-bottom-color: var(--trl-cyan);
}

.codeBody_QrS6 {
  margin: 0;
  /* O <pre> fecha o painel: o padding inferior é o respiro final */
  padding: 1.1rem 1.15rem 1.25rem;
  overflow-x: auto;
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.8rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
}

.codeBody_QrS6 code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* URLs longas quebram em vez de cortar */
.tokenWrap_kDEW {
  word-break: break-all;
}

.tok_kw_m3pN {
  color: #7DE8E4;
}

/* Âmbar para strings: separa valor de estrutura sem puxar mais
   uma variação de verde para dentro do painel. */
.tok_str_Cylm {
  color: #E8B87A;
}

.tok_fn_UsQj {
  color: var(--trl-cyan);
}

.tok_op_RH9j {
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================
   RESPONSIVO
   ============================================ */

/* O hero colapsa para coluna única quando o painel não caberia */
@media screen and (max-width: 940px) {
  /* A faixa deixa de seguir 80vh e volta a cobrir o hero empilhado.
     `:global` porque a variável é lida pelo body::before, fora
     do escopo deste módulo. */
  :root {
    --home-band: clamp(560px, 82dvh, 820px);
  }

  .heroInner_V4lS {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 4dvh, 2.5rem);
  }

  /* Empilhado, o conteúdo já ultrapassa 80vh — travar a altura só
     comprimiria. Aqui o hero volta a ser dimensionado pelo que
     tem dentro. */
  .hero_aEcG {
    min-height: 0;
    padding: clamp(1.5rem, 3.5dvh, 2.5rem) var(--home-pad) clamp(2.5rem, 6dvh, 4rem);
  }

  .heroSubtitle_jFu1 {
    margin-bottom: clamp(1rem, 2.4dvh, 1.5rem);
  }

  .searchTrigger_xxCg {
    margin-bottom: clamp(1rem, 2.2dvh, 1.4rem);
  }
}

@media screen and (max-width: 510px) {
  .searchKbd_pMNM {
    display: none;
  }

  .actions_OvQX {
    gap: 0.6rem 1rem;
  }

  .actionPrimary_RIrk {
    width: 100%;
    text-align: center;
  }

  .codeBody_QrS6 {
    font-size: 0.74rem;
    padding: 0.9rem 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .searchTrigger_xxCg,
  .actionPrimary_RIrk,
  .actionLink_h9qY,
  .codeTab_ea_V {
    transition: none;
  }

  .actionPrimary_RIrk:hover {
    transform: none;
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.codeBlockContainer_Ckt0 {
  background: var(--prism-background-color);
  color: var(--prism-color);
  margin-bottom: var(--ifm-leading);
  box-shadow: var(--ifm-global-shadow-lw);
  border-radius: var(--ifm-code-border-radius);
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.codeBlock_bY9V {
  --ifm-pre-background: var(--prism-background-color);
  margin: 0;
  padding: 0;
}

.codeBlockStandalone_MEMb {
  padding: 0;
}

.codeBlockLines_e6Vv {
  font: inherit;
  /* rtl:ignore */
  float: left;
  min-width: 100%;
  padding: var(--ifm-pre-padding);
}

.codeBlockLinesWithNumbering_o6Pm {
  display: table;
  padding: var(--ifm-pre-padding) 0;
}

@media print {
  .codeBlockLines_e6Vv {
    white-space: pre-wrap;
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/* Intentionally has zero specificity, so that to be able to override
the background in custom CSS file due bug https://github.com/facebook/docusaurus/issues/3678 */
:where(:root) {
  --docusaurus-highlighted-code-line-bg: rgb(72 77 91);
}

:where([data-theme='dark']) {
  --docusaurus-highlighted-code-line-bg: rgb(100 100 100);
}

.theme-code-block-highlighted-line {
  background-color: var(--docusaurus-highlighted-code-line-bg);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

.codeLine_lJS_ {
  display: table-row;
  counter-increment: line-count;
}

.codeLineNumber_Tfdd {
  display: table-cell;
  text-align: right;
  width: 1%;
  position: sticky;
  left: 0;
  padding: 0 var(--ifm-pre-padding);
  background: var(--ifm-pre-background);
  overflow-wrap: normal;
}

.codeLineNumber_Tfdd::before {
  content: counter(line-count);
  opacity: 0.4;
}

.theme-code-block-highlighted-line .codeLineNumber_Tfdd::before {
  opacity: 0.8;
}

.codeLineContent_feaV {
  padding-right: var(--ifm-pre-padding);
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.theme-code-block:hover .copyButtonCopied_Vdqa {
  opacity: 1 !important;
}

.copyButtonIcons_IEyt {
  position: relative;
  width: 1.125rem;
  height: 1.125rem;
}

.copyButtonIcon_TrPX,
.copyButtonSuccessIcon_cVMy {
  position: absolute;
  top: 0;
  left: 0;
  fill: currentColor;
  opacity: inherit;
  width: inherit;
  height: inherit;
  transition: all var(--ifm-transition-fast) ease;
}

.copyButtonSuccessIcon_cVMy {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.33);
  opacity: 0;
  color: #00d600;
}

.copyButtonCopied_Vdqa .copyButtonIcon_TrPX {
  transform: scale(0.33);
  opacity: 0;
}

.copyButtonCopied_Vdqa .copyButtonSuccessIcon_cVMy {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition-delay: 0.075s;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.wordWrapButtonIcon_b1P5 {
  width: 1.2rem;
  height: 1.2rem;
}

.wordWrapButtonEnabled_uzNF .wordWrapButtonIcon_b1P5 {
  color: var(--ifm-color-primary);
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.buttonGroup_M5ko {
  display: flex;
  column-gap: 0.2rem;
  position: absolute;
  /* rtl:ignore */
  right: calc(var(--ifm-pre-padding) / 2);
  top: calc(var(--ifm-pre-padding) / 2);
}

.buttonGroup_M5ko button {
  display: flex;
  align-items: center;
  background: var(--prism-background-color);
  color: var(--prism-color);
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: var(--ifm-global-radius);
  padding: 0.4rem;
  line-height: 0;
  transition: opacity var(--ifm-transition-fast) ease-in-out;
  opacity: 0;
}

.buttonGroup_M5ko button:focus-visible,
.buttonGroup_M5ko button:hover {
  opacity: 1 !important;
}

.theme-code-block:hover .buttonGroup_M5ko button {
  opacity: 0.4;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.codeBlockContent_QJqH {
  position: relative;
  /* rtl:ignore */
  direction: ltr;
  border-radius: inherit;
}

.codeBlockTitle_OeMC {
  border-bottom: 1px solid var(--ifm-color-emphasis-300);
  font-size: var(--ifm-code-font-size);
  font-weight: 500;
  padding: 0.75rem var(--ifm-pre-padding);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.codeBlockTitle_OeMC + .codeBlockContent_QJqH .codeBlock_a8dz {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/*
CSS variables, meant to be overridden by final theme
 */
.details_lb9f {
  --docusaurus-details-summary-arrow-size: 0.38rem;
  --docusaurus-details-transition: transform 200ms ease;
  --docusaurus-details-decoration-color: grey;
}

.details_lb9f > summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding-left: 1rem;
}

/* TODO: deprecation, need to remove this after Safari will support `::marker` */
.details_lb9f > summary::-webkit-details-marker {
  display: none;
}

.details_lb9f > summary::before {
  position: absolute;
  top: 0.45rem;
  left: 0;

  /* CSS-only Arrow */
  content: '';
  border-width: var(--docusaurus-details-summary-arrow-size);
  border-style: solid;
  border-color: transparent transparent transparent
    var(--docusaurus-details-decoration-color);

  /* Arrow rotation anim */
  transform: rotate(0deg);
  transition: var(--docusaurus-details-transition);
  transform-origin: calc(var(--docusaurus-details-summary-arrow-size) / 2) 50%;
}

/* When JS disabled/failed to load: we use the open property for arrow animation: */
.details_lb9f[open]:not(.isBrowser_bmU9) > summary::before,

.details_lb9f[data-collapsed='false'].isBrowser_bmU9 > summary::before {
  transform: rotate(90deg);
}

.collapsibleContent_i85q {
  margin-top: 1rem;
  border-top: 1px solid var(--docusaurus-details-decoration-color);
  padding-top: 1rem;
}

.collapsibleContent_i85q p:last-child {
  margin-bottom: 0;
}

.details_lb9f > summary > p:last-child {
  margin-bottom: 0;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.details_b_Ee {
  --docusaurus-details-decoration-color: var(--ifm-alert-border-color);
  --docusaurus-details-transition: transform var(--ifm-transition-fast) ease;
  margin: 0 0 var(--ifm-spacing-vertical);
  border: 1px solid var(--ifm-alert-border-color);
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.containsTaskList_mC6p {
  list-style: none;
}

:not(.containsTaskList_mC6p > li) > .containsTaskList_mC6p {
  padding-left: 0;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.img_ev3q {
  height: auto;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.admonition_xJq3 {
  margin-bottom: 1em;
}

.admonitionHeading_Gvgb {
  font: var(--ifm-heading-font-weight) var(--ifm-h5-font-size) /
    var(--ifm-heading-line-height) var(--ifm-heading-font-family);
  text-transform: uppercase;
}

/* Heading alone without content (does not handle fragment content) */
.admonitionHeading_Gvgb:not(:last-child) {
  margin-bottom: 0.3rem;
}

.admonitionHeading_Gvgb code {
  text-transform: none;
}

.admonitionIcon_Rf37 {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.4em;
}

.admonitionIcon_Rf37 svg {
  display: inline-block;
  height: 1.6em;
  width: 1.6em;
  fill: var(--ifm-alert-foreground-color);
}

.admonitionContent_BuS1 > :last-child {
  margin-bottom: 0;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.iconEdit_Z9Sw {
  margin-right: 0.3em;
  vertical-align: sub;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.container_lyt7 {
  max-width: 100%;
}

.container_lyt7 > svg {
  max-width: 100%;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.lastUpdated_JAkA {
  font-size: smaller;
  font-style: italic;
  margin-top: 0.2rem;
}

@media (min-width: 997px) {
  .lastUpdated_JAkA {
    text-align: right;
  }
}

@media print {
  .noPrint_WFHX {
    display: none;
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.tocCollapsibleButton_TO0P {
  font-size: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.8rem;
  width: 100%;
}

.tocCollapsibleButton_TO0P::after {
  content: '';
  background: var(--ifm-menu-link-sublist-icon) 50% 50% / 2rem 2rem no-repeat;
  filter: var(--ifm-menu-link-sublist-icon-filter);
  height: 1.25rem;
  width: 1.25rem;
  transform: rotate(180deg);
  transition: transform var(--ifm-transition-fast);
}

.tocCollapsibleButtonExpanded_MG3E::after {
  transform: none;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.tocCollapsible_ETCw {
  background-color: var(--ifm-menu-color-background-active);
  border-radius: var(--ifm-global-radius);
  margin: 1rem 0;
}

.tocCollapsibleContent_vkbj > ul {
  border-left: none;
  border-top: 1px solid var(--ifm-color-emphasis-300);
  padding: 0.2rem 0;
  font-size: 15px;
}

.tocCollapsibleContent_vkbj ul li {
  margin: 0.4rem 0.8rem;
}

.tocCollapsibleContent_vkbj a {
  display: block;
}

.tocCollapsibleExpanded_sAul {
  transform: none;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

@media (min-width: 997px) {
  /* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
  .tocMobile_ITEo {
    display: none;
  }
}

@media print {
  .tocMobile_ITEo {
    display: none;
  }
}

/* ============================================
   PAINEL DE CÓDIGO — COMPONENTE COMPARTILHADO

   Superfície própria, mais escura que o fundo: o painel é um
   objeto sobre a página, não uma janela nela. Sempre escuro,
   nos dois temas — editores de código são escuros por convenção
   e no tema claro ele vira o ponto focal da dobra.
   ============================================ */
.panel_c00k {
  overflow: hidden;
  margin: 1.25rem 0;
  max-width: 72ch;
  background: #04100F;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--home-radius, 10px);
  box-shadow: 0 1px 2px rgba(0, 30, 29, 0.08), 0 4px 16px rgba(0, 30, 29, 0.1);
}

/* Na home o painel vive no hero e não tem limite de leitura */
.hero .panel_c00k {
  margin: 0;
  max-width: none;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

.tabs_GaVA {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.35rem 0.9rem 0 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.tab_gg3H {
  padding: 0.5rem 0.85rem;
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}

.tab_gg3H:hover {
  color: rgba(255, 255, 255, 0.85);
}

.tab_gg3H:focus-visible {
  outline: 2px solid var(--trl-cyan);
  outline-offset: -2px;
}

/* Aba única não é controle: sem cursor de clique nem hover */
.tabStatic_m96i {
  cursor: default;
}

.tabStatic_m96i:hover {
  color: rgba(255, 255, 255, 0.55);
}

.tabActive_lk79,
.tabActive_lk79:hover {
  color: var(--trl-cyan);
  border-bottom-color: var(--trl-cyan);
}

.tabStatic_m96i.tabActive_lk79,
.tabStatic_m96i.tabActive_lk79:hover {
  color: var(--trl-cyan);
}

/* Label discreta à direita — normalmente o endpoint */
.caption_PWLF {
  margin-left: auto;
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.42);
  white-space: nowrap;
}

.body_De59 {
  margin: 0;
  padding: 1.1rem 1.15rem 1.25rem;
  overflow-x: auto;
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.8rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
}

.body_De59 code {
  padding: 0;
  font-size: inherit;
  background: transparent;
  border: none;
  color: inherit;
}

@media screen and (max-width: 510px) {
  .body_De59 {
    padding: 0.9rem 0.95rem 1rem;
    font-size: 0.74rem;
  }

  .caption_PWLF {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab_gg3H {
    transition: none;
  }
}

/* ============================================
   FAIXA DE ABERTURA DE PRODUTO

   Gradiente sutil no acento e borda em baixa opacidade — o mesmo
   vocabulário do hero, em escala de ferramenta. A home é vitrine
   e pode ter escala; aqui a faixa orienta e sai do caminho.
   ============================================ */
.band_qDcu {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 0 0 2rem;
  padding: 1.4rem 1.5rem 1.5rem;
  max-width: 72ch;
  background:
    radial-gradient(ellipse 60% 120% at 88% 0%, rgba(0, 143, 143, 0.1) 0%, transparent 62%),
    linear-gradient(140deg, rgba(0, 143, 143, 0.06) 0%, rgba(0, 143, 143, 0.02) 100%);
  border: 1px solid rgba(0, 143, 143, 0.2);
  border-radius: var(--home-radius, 10px);
}

html[data-theme='dark'] .band_qDcu {
  background:
    radial-gradient(ellipse 60% 120% at 88% 0%, rgba(0, 255, 246, 0.08) 0%, transparent 62%),
    linear-gradient(140deg, rgba(0, 255, 246, 0.05) 0%, rgba(0, 255, 246, 0.015) 100%);
  border-color: rgba(0, 255, 246, 0.16);
}

.iconBox_wswq {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: rgba(0, 143, 143, 0.1);
  border: 1px solid rgba(0, 143, 143, 0.2);
}

html[data-theme='dark'] .iconBox_wswq {
  background: rgba(0, 255, 246, 0.07);
  border-color: rgba(0, 255, 246, 0.16);
}

.icon_Pg6f {
  color: var(--ifm-color-primary);
}

.content_vW4Y {
  min-width: 0;
}

/* H1 em escala de ferramenta, não de hero */
.name_r40A {
  margin: 0 0 0.35rem;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ifm-heading-color);
}

.summary_q2DO {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ifm-color-emphasis-700);
}

.links_qfTd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-top: 1rem;
}

.linkPrimary__uGd,
.linkPrimary__uGd:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ifm-color-primary);
  transition: gap 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.linkPrimary__uGd:hover {
  gap: 0.6rem;
  color: var(--ifm-color-primary);
  -webkit-text-decoration: none;
  text-decoration: none;
}

.arrow_WicS {
  flex-shrink: 0;
}

.link_Ir1o,
.link_Ir1o:visited {
  font-size: 0.9rem;
  color: var(--ifm-color-emphasis-700);
  transition: color 160ms ease;
}

.link_Ir1o:hover {
  color: var(--ifm-color-primary);
  -webkit-text-decoration: none;
  text-decoration: none;
}

.linkPrimary__uGd:focus-visible,
.link_Ir1o:focus-visible {
  outline: 2px solid var(--ifm-color-primary);
  outline-offset: 3px;
  border-radius: 3px;
}

@media screen and (max-width: 560px) {
  .band_qDcu {
    padding: 1.15rem 1.2rem 1.3rem;
    gap: 0.85rem;
  }

  .iconBox_wswq {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .linkPrimary__uGd,
  .link_Ir1o {
    transition: none;
  }

  .linkPrimary__uGd:hover {
    gap: 0.4rem;
  }
}

/* ============================================
   CARDS DE RECURSO

   Mesma superfície dos cards da home: raio, borda e sombra
   compartilhados. Sem hover — não são navegação, são
   características.
   ============================================ */
.grid_AwtA {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  align-items: stretch;
  margin: 1.25rem 0 1.75rem;
  max-width: 72ch;
}

.card_L6WD {
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--srf-raised, #ffffff);
  border: 1px solid var(--srf-border, rgba(0, 77, 74, 0.1));
  border-radius: var(--home-radius, 10px);
  box-shadow: 0 1px 2px rgba(0, 30, 29, 0.06), 0 2px 8px rgba(0, 30, 29, 0.05);
}

html[data-theme='dark'] .card_L6WD {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.22);
}

.title_sjcM {
  margin: 0 0 0.35rem;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ifm-heading-color);
}

.text_Pp7U {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ifm-color-emphasis-700);
}

@media screen and (max-width: 620px) {
  .grid_AwtA {
    grid-template-columns: 1fr;
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.tableOfContents_bqdL {
  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
  overflow-y: auto;
  position: sticky;
  top: calc(var(--ifm-navbar-height) + 1rem);
}

@media (max-width: 996px) {
  .tableOfContents_bqdL {
    display: none;
  }

  .docItemContainer_F8PC {
    padding: 0 0.3rem;
  }
}

/* ============================================================
   BOXES DA COLUNA DE CONTEÚDO

   Dois intervalos em toda a página:
     --box-gap  entre caixas
     --row-gap  entre linhas dentro de uma caixa

   Toda caixa: largura 100%, padding próprio, margem externa zero.
   Se um bloco precisar de margem, o erro está no gap do pai.
   ============================================================ */

/* Os tokens vivem no :root para que também resolvam nos irmãos da
   pilha (os h2 de seção, que ficam fora dela). Dentro de .stack
   eles não alcançariam. */
:root {
  --box-gap: 1.15rem;
  --row-gap: 0.55rem;
  --box-pad: 1.15rem;

  /* Colunas da linha de capítulo — idênticas em TODA trilha. É o
     que faz as listas alinharem entre accordions diferentes. */
  --chap-code: 3.5rem;
  --chap-title: 16rem;
}

.stack_ds28 {
  display: flex;
  flex-direction: column;
  gap: var(--box-gap);
  max-width: 100%;
}

/* O ritmo de markdown do Docusaurus não se aplica dentro da
   pilha: quem manda é o gap. */
.stack_ds28 > * {
  margin: 0;
}

/* Os títulos de seção (h2) ficam FORA da pilha — é o que os põe no
   sumário do trilho, que só lista nível 2. A pilha seguinte então
   encosta no título; este par de regras devolve o respiro usando o
   mesmo --box-gap, para não inventar um terceiro intervalo. */
.stack_ds28:not(:first-child) {
  margin-top: var(--box-gap);
}

.stack_ds28 + h2,
.stack_ds28 ~ h2 {
  margin-top: calc(var(--box-gap) * 2);
}

.rowStack_FjlM {
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
}

.rowStack_FjlM > p {
  margin: 0;
}

/* ------------------------------------------------------------
   SUPERFÍCIE COMPARTILHADA

   Mesma superfície dos cards da home: raio, borda e sombra. A
   página não deve parecer um segundo sistema.
   ------------------------------------------------------------ */
.metaBar_M4hw,
.pipelineBox_X242,
.trackCard_kvO5,
.track_pFaQ,
.linkCard_aMmo,
.callout_mRmQ,
.internalNote_Xnz4 {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  border-radius: var(--home-radius, 10px);
  border: 1px solid var(--srf-border, rgba(0, 77, 74, 0.1));
  background: var(--srf-raised, #fff);
}

.pipelineBox_X242,
.trackCard_kvO5,
.track_pFaQ,
.linkCard_aMmo {
  box-shadow: 0 1px 2px rgba(0, 30, 29, 0.06), 0 2px 8px rgba(0, 30, 29, 0.05);
}

html[data-theme='dark'] .pipelineBox_X242,
html[data-theme='dark'] .trackCard_kvO5,
html[data-theme='dark'] .track_pFaQ,
html[data-theme='dark'] .linkCard_aMmo {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* ------------------------------------------------------------
   TÍTULO DE BLOCO — terceiro degrau da escala

   h1 (2rem) › h2 de seção (1.3rem) › este (0.72rem mono). O salto
   é deliberado: um título de bloco rotula uma caixa, não abre uma
   seção, então desce para label.
   ------------------------------------------------------------ */
.boxLabel_UsNU {
  display: block;
  margin: 0 0 0.7rem;
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rail-label, #5f7570);
}

/* ------------------------------------------------------------
   CHIP — toda a metadata da página

   Público, pré-requisito e contagem eram frases em negrito no meio
   do parágrafo. Como chip, o leitor filtra por varredura.
   ------------------------------------------------------------ */
.chip_kAd9 {
  display: inline-flex;
  align-items: baseline;
  gap: 0.34rem;
  padding: 0.16rem 0.5rem;
  background: var(--srf-accent-soft, rgba(0, 143, 143, 0.08));
  border: 1px solid var(--srf-border, rgba(0, 77, 74, 0.1));
  border-radius: 5px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--ifm-color-emphasis-800);
}

/* A chave em mono apagada, o valor com o peso. Se os dois tiverem
   a mesma ênfase o chip vira ruído. */
.chipKey_HWYX {
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rail-label, #5f7570);
}

.chipValue_fkqJ {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Chip técnico: status de máquina. Mono porque É um identificador
   do sistema, não decoração "técnica". */
.chipMono__7CU {
  display: inline-block;
  padding: 0.12rem 0.4rem;
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 4px;
  background: var(--srf-accent-soft, rgba(0, 143, 143, 0.08));
  border: 1px solid var(--srf-border, rgba(0, 77, 74, 0.1));
  color: var(--ifm-color-emphasis-700);
  white-space: nowrap;
}

.chipRow_iv7G {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ------------------------------------------------------------
   BADGE DE PÚBLICO-ALVO

   Todos os capítulos abrem declarando o público. Como admonition
   isso gastava uma caixa com ícone acima do lede para entregar uma
   palavra; como badge cabe na barra de metadados.

   Recebe o acento teal porque é o único metadado que responde
   "isto é para mim?" — a primeira pergunta ao abrir o capítulo.
   Os chips vizinhos ficam neutros para que o acento signifique.
   ------------------------------------------------------------ */
.audience_O_nB {
  display: inline-flex;
  align-items: baseline;
  gap: 0.34rem;
  padding: 0.16rem 0.5rem;
  border: 1px solid rgba(0, 143, 143, 0.45);
  border-radius: 5px;
  background: var(--srf-accent-soft, rgba(0, 143, 143, 0.08));
  font-size: 0.76rem;
  line-height: 1.45;
}

html[data-theme='dark'] .audience_O_nB {
  border-color: rgba(45, 226, 198, 0.38);
}

.audienceKey_VXoU {
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ifm-color-primary);
}

.audienceValue_uQ_q {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ifm-color-emphasis-800);
}

/* ------------------------------------------------------------
   BARRA DE METADADOS
   ------------------------------------------------------------ */
.metaBar_M4hw {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.6rem 0.75rem;
  background: transparent;
  box-shadow: none;
}

/* Ocupa a sobra da linha, o que mantém o link ao lado dos chips em
   vez de mandá-lo para uma segunda linha. */
.metaBar_M4hw > .chipRow_iv7G {
  flex: 1 1 auto;
}

/* Ação, não metadado — fica na ponta oposta para não ser lida como
   parte da série de chips. */
.metaAction_N5ZA {
  font-size: 0.78rem;
  color: var(--ifm-color-primary);
  text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------
   CALLOUT

   Sem barra colorida grossa à esquerda: o fundo tingido e o label
   já distinguem o bloco. A borda inteira recebe o acento em baixa
   opacidade.
   ------------------------------------------------------------ */
.callout_mRmQ {
  padding: var(--box-pad);
  box-shadow: none;
}

.tone_accent_CsGV {
  background: var(--srf-accent-soft, rgba(0, 143, 143, 0.08));
  border-color: rgba(0, 143, 143, 0.28);
}

html[data-theme='dark'] .tone_accent_CsGV {
  border-color: rgba(0, 255, 246, 0.22);
}

/* Escopo: informativo e datado, não acionável. Fica na superfície
   neutra para pesar menos que a orientação. */
.tone_neutral_SB8j {
  background: transparent;
}

.calloutLabel_ZWfC {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ifm-heading-color);
}

.callout_mRmQ p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

.callout_mRmQ ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------
   PIPELINE

   Etapas em sequência. O nome legível recebe o peso; o status
   técnico da máquina desce para chip mono. No diagrama anterior os
   dois eram irmãos na mesma linha, o que fazia
   `PROCESSING QUALITY` parecer tão importante quanto
   "Processamento".
   ------------------------------------------------------------ */
.pipelineBox_X242 {
  padding: var(--box-pad);
}

/* Seis colunas numa linha só: são etapas EM SEQUÊNCIA, e uma grade
   3×2 faz o leitor ler duas fileiras em vez de um percurso. */
.pipeline_Qu2Y {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step_8pkp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.5rem 0.45rem 0.55rem;
  border: 1px solid var(--srf-border, rgba(0, 77, 74, 0.1));
  border-radius: 7px;
  background: var(--srf-canvas, #f1f6f5);
}

/* A seta entre etapas: é o que transforma seis caixas numa
   sequência. Fica no espaço do gap, sem ocupar coluna. */
.step_8pkp + .step_8pkp {
  position: relative;
}

.step_8pkp + .step_8pkp::before {
  content: '';
  position: absolute;
  left: calc(-0.35rem / 2 - 2px);
  top: 1.15rem;
  width: 4px;
  height: 4px;
  border-right: 1.2px solid var(--rail-guide, rgba(6, 48, 42, 0.3));
  border-bottom: 1.2px solid var(--rail-guide, rgba(6, 48, 42, 0.3));
  transform: rotate(-45deg);
}

.stepIndex_iKQ9 {
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.64rem;
  font-weight: 500;
  color: var(--rail-label, #5f7570);
}

.stepName_OFTW {
  font-size: 0.83rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ifm-heading-color);
}

/* Em seis colunas o chip técnico não cabe numa linha (o pior caso é
   `PROCESSING QUALITY`). Ele quebra em vez de estourar a caixa —
   por isso o `white-space: nowrap` do chip mono é anulado aqui. */
.step_8pkp .chipMono__7CU {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.caption_F8NM {
  margin: 0.75rem 0 0;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--ifm-color-emphasis-700);
}

/* ------------------------------------------------------------
   SELETOR DE TRILHA

   Substitui o fluxograma E a tabela-resumo — os três diziam a
   mesma coisa, e este é o único que também é navegação.
   ------------------------------------------------------------ */
.trackGrid_PUSS {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.trackCard_kvO5 {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.85rem 0.9rem 0.9rem;
  transition: border-color 150ms ease, transform 150ms ease;
}

.trackCard_kvO5:hover {
  border-color: rgba(0, 143, 143, 0.4);
  -webkit-text-decoration: none;
  text-decoration: none;
  transform: translateY(-1px);
}

html[data-theme='dark'] .trackCard_kvO5:hover {
  border-color: rgba(45, 226, 198, 0.4);
}

.trackTop_epfp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.trackNum_DhVL {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.3rem;
  border-radius: 5px;
  background: var(--srf-accent-soft, rgba(0, 143, 143, 0.08));
  border: 1px solid var(--srf-border, rgba(0, 77, 74, 0.1));
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ifm-color-primary);
}

/* Trilha cruzada: recorta seções de outras trilhas em vez de ser
   leitura sequencial. No diagrama isso era uma linha tracejada,
   que não sobrevive fora do diagrama. */
.crossFlag_V8AK {
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rail-label, #5f7570);
}

.crossCutting_mTOg {
  border-style: dashed;
}

.trackName_RsFS {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ifm-heading-color);
}

/* Empurra os chips para a base: as perguntas têm 1 ou 2 linhas, e
   sem isto o card curto ficava com um vazio no meio enquanto o
   irmão alto definia a altura da fileira. */
.trackQuestion_qCPI {
  flex: 1 1 auto;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ifm-color-emphasis-700);
}

/* ------------------------------------------------------------
   TRILHA DETALHADA — accordion

   <details> nativo: funciona sem JS, responde ao Ctrl+F do
   navegador e já vem acessível por teclado.
   ------------------------------------------------------------ */
.track_pFaQ {
  overflow: hidden;
  /* Âncora vinda do seletor de trilha: sem isso o link levaria o
     leitor até uma caixa fechada, que parece um destino errado. */
  scroll-margin-top: calc(var(--rail-top, 64px) + 1rem);
}

/* Abre a trilha alvo do link e marca qual é. `open` no <details>
   continua sendo o padrão; isto só cobre o salto por âncora. */
.track_pFaQ:target {
  border-color: rgba(0, 143, 143, 0.45);
}

html[data-theme='dark'] .track_pFaQ:target {
  border-color: rgba(45, 226, 198, 0.45);
}

.trackSummary_E8gi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  padding: 0.8rem 0.9rem;
  cursor: pointer;
  list-style: none;
}

.trackSummary_E8gi::-webkit-details-marker {
  display: none;
}

.trackSummary_E8gi:hover {
  background: var(--srf-accent-soft, rgba(0, 143, 143, 0.08));
}

.trackSummary_E8gi:focus-visible {
  outline: 2px solid var(--ifm-color-primary);
  outline-offset: -2px;
}

/* É um <h3> real, para entrar no outline do documento — então
   precisa perder a margem e o tamanho de heading e voltar ao
   tamanho de título de bloco. */
.trackHead_oPGO {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto 0 0;
  font-size: inherit;
  font-weight: inherit;
  scroll-margin-top: calc(var(--rail-top, 64px) + 1rem);
}

/* Marcador de aberto/fechado: chevron por borda rotacionada, sem
   dependência de fonte de ícone. */
.trackHead_oPGO::before {
  content: '';
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.15rem;
  border-right: 1.5px solid var(--rail-label, #5f7570);
  border-bottom: 1.5px solid var(--rail-label, #5f7570);
  transform: rotate(-45deg);
  transition: transform 150ms ease;
}

.track_pFaQ[open] .trackHead_oPGO::before {
  transform: rotate(45deg);
}

.trackBody_KPpc {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.15rem 0.9rem 0.9rem;
}

.trackNote_efX1 {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ifm-color-emphasis-700);
}

.trackLink_JT4O {
  align-self: flex-start;
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ifm-color-primary);
}

/* ------------------------------------------------------------
   LINHA DE CAPÍTULO

   UMA estrutura reaproveitada por todas as trilhas. Antes eram
   sete <table> independentes, cada uma calculando a largura das
   colunas pelo próprio conteúdo — nada alinhava de uma trilha
   para a outra. As larguras agora são tokens do .stack.
   ------------------------------------------------------------ */
.chapters_xL4P {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--srf-border, rgba(0, 77, 74, 0.1));
}

.chapRow__1DR {
  display: grid;
  grid-template-columns: var(--chap-code) var(--chap-title) minmax(0, 1fr);
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--srf-border, rgba(0, 77, 74, 0.1));
}

.chapRow__1DR:last-child {
  border-bottom: none;
}

.chapCode_ABoT {
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--rail-label, #5f7570);
}

.chapTitle_SR4c {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.chapWhy_Db9O {
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--ifm-color-emphasis-700);
}

/* ------------------------------------------------------------
   MAPA POR ÁREA

   Um eixo de colunas para os 38 capítulos. Antes eram dez <table>
   independentes: dez eixos na mesma página, nenhum alinhado com as
   trilhas da Introdução. O código do capítulo agora cai na mesma
   coluna --chap-code da .chapRow das trilhas.

   A faixa de Área não é caixa: é régua com rótulo. Dez caixas
   empilhadas seriam dez containers compensando proximidade que a
   própria faixa já resolve.
   ------------------------------------------------------------ */
/* Gap de 8px entre accordions, como manda a R2 — mais apertado que
   o --box-gap entre caixas, porque os dez são uma série só. */
.areaMap_m5HB {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Os nomes de Área são longos ("Cadastros e Configuração da
   Extração"): no estreito eles quebram em duas linhas e o chip de
   contagem caía numa TERCEIRA linha, encostado à esquerda, onde se
   lia como item da lista em vez de contagem do cabeçalho.
   Aqui o chip fica travado na primeira linha, ao lado do título. */
.areaMap_m5HB .trackSummary_E8gi {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.areaMap_m5HB .trackHead_oPGO {
  align-items: flex-start;
}

/* Alinha o chevron e o badge com a primeira linha do título quando
   ele quebra, em vez de centralizar no bloco de duas linhas. */
.areaMap_m5HB .trackHead_oPGO::before {
  margin-top: 0.42rem;
  flex: 0 0 auto;
}

.areaMap_m5HB .trackNum_DhVL {
  flex: 0 0 auto;
}

.areaMap_m5HB .trackSummary_E8gi > .chipRow_iv7G {
  flex: 0 0 auto;
  padding-top: 0.1rem;
}

/* As linhas da área: mesma anatomia da .chapRow, sem a coluna de
   motivo — a origem tem só código e título, e inventar descrição
   seria conteúdo novo. */
.areaMap_m5HB .chapRow__1DR {
  grid-template-columns: var(--chap-code) minmax(0, 1fr);
}

/* ------------------------------------------------------------
   CARD DE LINK — página inteira reduzida a um destino
   ------------------------------------------------------------ */
.linkCard_aMmo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--box-pad);
  transition: border-color 150ms ease;
}

.linkCard_aMmo:hover {
  border-color: rgba(0, 143, 143, 0.4);
  -webkit-text-decoration: none;
  text-decoration: none;
}

html[data-theme='dark'] .linkCard_aMmo:hover {
  border-color: rgba(45, 226, 198, 0.4);
}

.linkCardTitle_hcM4 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ifm-heading-color);
}

.arrow_V3D9 {
  color: var(--ifm-color-primary);
  transition: transform 150ms ease;
}

.linkCard_aMmo:hover .arrow_V3D9 {
  transform: translateX(2px);
}

.linkCardText_YAye {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ifm-color-emphasis-700);
}

/* ------------------------------------------------------------
   NOTA INTERNA — atrás de flag; em build público nem entra no DOM
   ------------------------------------------------------------ */
.internalNote_Xnz4 {
  padding: var(--box-pad);
  border-style: dashed;
  border-color: rgba(194, 96, 58, 0.45);
  background: rgba(194, 96, 58, 0.06);
  box-shadow: none;
}

.internalLabel_OO1Y {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a24f2c;
}

html[data-theme='dark'] .internalLabel_OO1Y {
  color: #e0906c;
}

.internalNote_Xnz4 p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------
   ADAPTAÇÃO

   O que colapsa é estrutural: o pipeline vira duas colunas e
   depois uma; a linha de capítulo perde a grade de três colunas e
   passa a empilhar título e motivo, porque a 320px a coluna do
   "por que ler" ficaria com duas palavras por linha.
   ------------------------------------------------------------ */
/* A seta só faz sentido enquanto as etapas estão numa linha; nas
   grades quebradas ela apontaria para o lugar errado. */
@media (max-width: 996px) {
  .pipeline_Qu2Y {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .step_8pkp + .step_8pkp::before {
    display: none;
  }
}

@media (max-width: 700px) {
  :root {
    --chap-title: 12rem;
  }

  .trackGrid_PUSS {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .pipeline_Qu2Y {
    grid-template-columns: 1fr;
  }

  .chapRow__1DR {
    grid-template-columns: var(--chap-code) minmax(0, 1fr);
    gap: 0.15rem 0.75rem;
    padding: 0.6rem 0;
  }

  /* O motivo desce para baixo do título, alinhado com ele */
  .chapWhy_Db9O {
    grid-column: 2;
  }

  .metaBar_M4hw {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trackCard_kvO5,
  .linkCard_aMmo,
  .arrow_V3D9,
  .trackHead_oPGO::before {
    transition: none;
  }

  .trackCard_kvO5:hover {
    transform: none;
  }

  .linkCard_aMmo:hover .arrow_V3D9 {
    transform: none;
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.breadcrumbHomeIcon_YNFT {
  position: relative;
  top: 1px;
  vertical-align: top;
  height: 1.1rem;
  width: 1.1rem;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.breadcrumbsContainer_Z_bl {
  --ifm-breadcrumb-size-multiplier: 0.8;
  margin-bottom: 0.8rem;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.docItemContainer_Djhp header + *,
.docItemContainer_Djhp article > *:first-child {
  margin-top: 0;
}

@media (min-width: 997px) {
  .docItemCol_VOVn {
    max-width: 75% !important;
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.mdxPageWrapper_j9I6 {
  justify-content: center;
}