/* Cascade-Layer: dieses Legacy-Stylesheet liegt in @layer legacy und damit VOR den
   Tailwind-Utilities (Reihenfolge in tailwind.input.css: theme, base, legacy,
   components, utilities). Ohne Layer wuerde jede Regel hier - auch ein blosses
   "h1 { font-size: 1.4rem }" - jede Tailwind-Klasse ueberstimmen, weil ungelayertes
   CSS in der Kaskade immer vor gelayertem gewinnt. */
@layer legacy {
  /* Auto-pruned: only rules used by the /docs page (light+dark) */
  @layer properties {
      @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
          *, ::backdrop, ::after, ::before {
              --tw-border-spacing-x: 0;
              --tw-border-spacing-y: 0;
              --tw-translate-x: 0;
              --tw-translate-y: 0;
              --tw-translate-z: 0;
              --tw-duration: initial;
              --tw-rotate-x: initial;
              --tw-rotate-y: initial;
              --tw-rotate-z: initial;
              --tw-skew-x: initial;
              --tw-skew-y: initial;
              --tw-space-y-reverse: 0;
              --tw-space-x-reverse: 0;
              --tw-divide-x-reverse: 0;
              --tw-border-style: solid;
              --tw-divide-y-reverse: 0;
              --tw-gradient-position: initial;
              --tw-gradient-from: #0000;
              --tw-gradient-via: #0000;
              --tw-gradient-to: #0000;
              --tw-gradient-stops: initial;
              --tw-gradient-via-stops: initial;
              --tw-gradient-from-position: 0%;
              --tw-gradient-via-position: 50%;
              --tw-gradient-to-position: 100%;
              --tw-leading: initial;
              --tw-font-weight: initial;
              --tw-tracking: initial;
              --tw-shadow: 0 0 #0000;
              --tw-shadow-color: initial;
              --tw-shadow-alpha: 100%;
              --tw-inset-shadow: 0 0 #0000;
              --tw-inset-shadow-color: initial;
              --tw-inset-shadow-alpha: 100%;
              --tw-ring-color: initial;
              --tw-ring-shadow: 0 0 #0000;
              --tw-inset-ring-color: initial;
              --tw-inset-ring-shadow: 0 0 #0000;
              --tw-ring-inset: initial;
              --tw-ring-offset-width: 0px;
              --tw-ring-offset-color: #fff;
              --tw-ring-offset-shadow: 0 0 #0000;
              --tw-outline-style: solid;
              --tw-blur: initial;
              --tw-brightness: initial;
              --tw-contrast: initial;
              --tw-grayscale: initial;
              --tw-hue-rotate: initial;
              --tw-invert: initial;
              --tw-opacity: initial;
              --tw-saturate: initial;
              --tw-sepia: initial;
              --tw-drop-shadow: initial;
              --tw-drop-shadow-color: initial;
              --tw-drop-shadow-alpha: 100%;
              --tw-drop-shadow-size: initial;
              --tw-backdrop-blur: initial;
              --tw-backdrop-brightness: initial;
              --tw-backdrop-contrast: initial;
              --tw-backdrop-grayscale: initial;
              --tw-backdrop-hue-rotate: initial;
              --tw-backdrop-invert: initial;
              --tw-backdrop-opacity: initial;
              --tw-backdrop-saturate: initial;
              --tw-backdrop-sepia: initial;
              --tw-ease: initial;
              --tw-content: "";
              --tw-scale-x: 1;
              --tw-scale-y: 1;
              --tw-scale-z: 1;
              --mask-left-stop: 0%;
              --mask-right-stop: 100%;
              --tw-ordinal: initial;
              --tw-slashed-zero: initial;
              --tw-numeric-figure: initial;
              --tw-numeric-spacing: initial;
              --tw-numeric-fraction: initial;
          }
      }
  }

  @layer theme {
      :host, :root {
          --spacing: .25rem;
          --container-xs: 20rem;
          --container-md: 28rem;
          --container-lg: 32rem;
          --container-5xl: 64rem;
          --container-7xl: 80rem;
          --text-xs: .75rem;
          --text-xs--line-height: 1.33333;
          --text-sm: .875rem;
          --text-sm--line-height: 1.42857;
          --text-base: 1rem;
          --text-base--line-height: 1.5;
          --text-lg: 1.125rem;
          --text-lg--line-height: 1.55556;
          --text-xl: 1.25rem;
          --text-xl--line-height: 1.4;
          --text-2xl: 1.5rem;
          --text-2xl--line-height: 1.33333;
          --text-4xl: 2.25rem;
          --text-4xl--line-height: 1.11111;
          --font-weight-light: 300;
          --font-weight-normal: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-extrabold: 800;
          --tracking-tighter: -.05em;
          --tracking-tight: -.025em;
          --tracking-normal: 0em;
          --tracking-wide: .025em;
          --leading-tight: 1.25;
          --leading-snug: 1.375;
          --leading-normal: 1.5;
          --leading-relaxed: 1.625;
          --ease-out: cubic-bezier(0,0,.2,1);
          --ease-in-out: cubic-bezier(.4,0,.2,1);
          --animate-spin: spin 1s linear infinite;
          --animate-ping: ping 1s cubic-bezier(0,0,.2,1)infinite;
          --animate-pulse: pulse 2s cubic-bezier(.4,0,.6,1)infinite;
          --blur-sm: 8px;
          --blur-md: 12px;
          --blur-lg: 16px;
          --blur-xl: 24px;
          --blur-2xl: 40px;
          --aspect-video: 16/9;
          --default-transition-duration: .15s;
          --default-transition-timing-function: cubic-bezier(.4,0,.2,1);
          --grayscale-1: var(--gray-1);
          --grayscale-2: var(--gray-2);
          --grayscale-3: var(--gray-3);
          --grayscale-4: var(--gray-4);
          --grayscale-5: var(--gray-5);
          --grayscale-6: var(--gray-6);
          --grayscale-9: var(--gray-9);
          --grayscale-10: var(--gray-10);
          --grayscale-11: var(--gray-11);
          --grayscale-12: var(--gray-12);
          --grayscale-a1: var(--gray-a1);
          --grayscale-a2: var(--gray-a2);
          --grayscale-a3: var(--gray-a3);
          --grayscale-a4: var(--gray-a4);
          --grayscale-a5: var(--gray-a5);
          --grayscale-a6: var(--gray-a6);
          --grayscale-a7: var(--gray-a7);
          --grayscale-a8: var(--gray-a8);
          --grayscale-a9: var(--gray-a9);
          --grayscale-a10: var(--gray-a10);
          --grayscale-a11: var(--gray-a11);
          --grayscale-a12: var(--gray-a12);
          --shiki-dark: #fff;
          --spacing-page-padding: var(--page-padding);
          --color-black: #2a2a2a;
          --color-white: #fff;
          --color-zplcloud: #1ba32a;
          --color-zplcloud-air: #fbfffa;
          --color-zplcloud-ground: #081008;
          --ease-collapse: cubic-bezier(.25,.46,.45,.94);
          --ease-shift: cubic-bezier(.16,1,.3,1);
          --ease-slide: cubic-bezier(.87,0,.13,1);
          --animate-slide-down-and-fade: slide-down-and-fade .4s var(--ease-shift);
          --animate-slide-left-and-fade: slide-left-and-fade .4s var(--ease-shift);
          --animate-slide-up-and-fade: slide-up-and-fade .4s var(--ease-shift);
          --animate-slide-right-and-fade: slide-right-and-fade .4s var(--ease-shift);
          --animate-shine: shine 5s ease-in-out infinite;
          --animate-slide-down: slide-down .4s var(--ease-slide);
          --animate-thumb-rock: thumb-rock .5s both;
          --animate-overlay-show: overlay-show .15s var(--ease-shift);
          --animate-dropdown-expand: dropdown-expand .3s var(--ease-shift);
          --radius-3\/2: calc(var(--radius)*1.5);
          --radius-1: var(--radius);
          --radius-3: calc(var(--radius)*3);
          --radius-full: calc(var(--radius)*9999);
          --color-background: var(--background);
          --color-background-a12: var(--color-background);
      }

      @supports (color:lab(0% 0 0)) {
          :host, :root {
              --color-zplcloud: lab(58.6413% -53.3238 48.9768);
              --color-zplcloud-air: lab(99.5904% -2.02343 1.9148);
              --color-zplcloud-ground: lab(3.97522% -3.40538 2.57078);
          }
      }

      @supports (color:color-mix(in lab,red,red)) {
          :host, :root {
              --color-background-a12: color-mix(in oklab,var(--color-background)95%,transparent);
          }
      }

      :host, :root {
          --color-background-a3: var(--color-background);
      }

      @supports (color:color-mix(in lab,red,red)) {
          :host, :root {
              --color-background-a3: color-mix(in oklab,var(--color-background)6.27%,transparent);
          }
      }

      :host, :root {
          --color-border-default: var(--border,var(--grayscale-a5));
          --spacing-page-width: var(--page-width,88rem);
          --spacing-content-width: var(--content-width,40rem);
          --spacing-sidebar-width: var(--sidebar-width,18rem);
          --spacing-header-height-real: var(--header-height-real);
          --spacing-header-height: var(--header-height,var(--spacing-header-height-real));
          --spacing-header-height-padded: calc(var(--spacing-header-height) + var(--spacing)*4);
          --spacing-content-height: calc(100dvh - var(--spacing-header-height));
      }
  }

  @layer base {
      *, ::backdrop, ::after, ::before {
          box-sizing: border-box;
          border: 0px solid;
          margin: 0px;
          padding: 0px;
      }

      ::file-selector-button {
          box-sizing: border-box;
          border: 0px solid;
          margin: 0px;
          padding: 0px;
      }

      :host, html {
          text-size-adjust: 100%;
          font-family: var(--default-font-family,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");
          font-feature-settings: var(--default-font-feature-settings,normal);
          font-variation-settings: var(--default-font-variation-settings,normal);
          tab-size: 4;
          -webkit-tap-highlight-color: transparent;
          line-height: 1.5;
      }

      h1, h2, h3, h4, h5, h6 {
          font-size: inherit;
          font-weight: inherit;
      }

      a {
          color: inherit;
          text-decoration: inherit;
      }

      code, kbd, pre, samp {
          font-family: var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);
          font-feature-settings: var(--default-mono-font-feature-settings,normal);
          font-variation-settings: var(--default-mono-font-variation-settings,normal);
          font-size: 1em;
      }

      table {
          border-collapse: collapse;
          border-color: inherit;
          text-indent: 0px;
      }

      menu, ol, ul {
          list-style: none;
      }

      audio, canvas, embed, iframe, img, object, svg, video {
          vertical-align: middle;
          display: block;
      }

      img, video {
          max-width: 100%;
          height: auto;
      }

      button, input, optgroup, select, textarea {
          color: inherit;
          font: inherit;
          letter-spacing: inherit;
          opacity: 1;
          background-color: rgba(0, 0, 0, 0);
          border-radius: 0px;
      }

      ::file-selector-button {
          color: inherit;
          font: inherit;
          letter-spacing: inherit;
          opacity: 1;
          background-color: rgba(0, 0, 0, 0);
          border-radius: 0px;
      }

      ::file-selector-button {
          margin-inline-end: 4px;
      }

      ::placeholder {
          opacity: 1;
      }

      @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
          ::placeholder {
              color: currentcolor;
          }

          @supports (color:color-mix(in lab,red,red)) {
              ::placeholder {
                  color: color-mix(currentcolor, transparent);
              }
          }
      }

      ::-webkit-search-decoration {
          appearance: none;
      }

      ::-webkit-date-and-time-value {
          min-height: 1lh;
          text-align: inherit;
      }

      ::-webkit-datetime-edit {
          display: inline-flex;
      }

      ::-webkit-datetime-edit-fields-wrapper {
          padding: 0px;
      }

      ::-webkit-datetime-edit {
          padding-block: 0px;
      }

      ::-webkit-datetime-edit-year-field {
          padding-block: 0px;
      }

      ::-webkit-datetime-edit-day-field {
          padding-block: 0px;
      }

      ::-webkit-datetime-edit-month-field {
          padding-block: 0px;
      }

      ::-webkit-datetime-edit-hour-field {
          padding-block: 0px;
      }

      ::-webkit-datetime-edit-minute-field {
          padding-block: 0px;
      }

      ::-webkit-datetime-edit-millisecond-field {
          padding-block: 0px;
      }

      ::-webkit-datetime-edit-second-field {
          padding-block: 0px;
      }

      ::-webkit-datetime-edit-meridiem-field {
          padding-block: 0px;
      }

      ::-webkit-calendar-picker-indicator {
          line-height: 1;
      }

      button, input:where([type="button"], [type="reset"], [type="submit"]) {
          appearance: button;
      }

      ::file-selector-button {
          appearance: button;
      }

      ::-webkit-inner-spin-button {
          height: auto;
      }

      ::-webkit-outer-spin-button {
          height: auto;
      }

      [hidden]:where(:not([hidden="until-found"])) {
          display: none !important;
      }

      kbd {
          font-variant-numeric: slashed-zero;
          font-weight: 600;
          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
      }

      body, html {
          color: var(--color-black);
          font-family: var(--font-body);
          font-size: var(--text-base);
          line-height: var(--tw-leading,var(--text-base--line-height));
      }

      :is(html, body):is(.dark, .dark *) {
          color: var(--color-white);
      }

      body, html {
          background-color: var(--background,lightdark(#fff,#000));
      }

      .zplcloud-background-image {
          background-position: 50% center;
          background-repeat: no-repeat;
          background-size: cover;
          background-attachment: fixed;
      }

      code, pre {
          font-family: var(--font-code);
      }

      h1, h2, h3, h4, h5, h6 {
          font-family: var(--font-heading);
      }

      :is(h1, h2, h3, h4, h5, h6):first-child {
          margin-top: calc(var(--spacing)*0);
      }

      html {
          box-sizing: border-box;
          -webkit-tap-highlight-color: transparent;
      }

      ::details-content {
          box-sizing: inherit;
      }

      *, ::after, ::before {
          box-sizing: inherit;
          outline-color: rgba(0, 0, 0, 0);
      }

      :is(*):focus-visible {
          outline-color: var(--accent-a5);
      }

      ::selection {
          background-color: var(--accent-a6);
      }

      h1 {
          --tw-leading: var(--leading-tight);
          --tw-font-weight: var(--font-weight-semibold);
          font-size: var(--text-4xl);
          font-weight: var(--font-weight-semibold);
          line-height: var(--tw-leading,var(--text-4xl--line-height));
      }

      h2 {
          --tw-leading: var(--leading-tight);
          --tw-font-weight: var(--font-weight-semibold);
          font-size: var(--text-2xl);
          font-weight: var(--font-weight-semibold);
          line-height: var(--tw-leading,var(--text-2xl--line-height));
      }

      h3 {
          font-size: var(--text-xl);
          line-height: var(--tw-leading,var(--text-xl--line-height));
      }

      h3, h4 {
          --tw-leading: var(--leading-tight);
          --tw-font-weight: var(--font-weight-semibold);
          font-weight: var(--font-weight-semibold);
      }

      code:not(.code-block) {
          background-color: var(--card-background,var(--grayscale-surface));
          border-radius: var(--radius);
          font-family: var(--font-code);
          padding-block: calc(var(--spacing)*.5);
          padding-inline: calc(var(--spacing)*1);
          --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);
          box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
          --tw-ring-color: var(--border,var(--grayscale-a5));
          --tw-ring-inset: inset;
          font-size: 0.875em;
          font-weight: inherit;
      }
  }

  @layer components {
      .zplcloud-button {
          transition-duration: var(--tw-duration,var(--default-transition-duration));
          transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
          transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
      }

      @media (hover: hover) {
          .zplcloud-button:hover {
              transition-property: none;
          }
      }

      .zplcloud-button {
          border-radius: calc(var(--radius)*2);
          font-size: var(--text-sm);
          height: calc(var(--spacing)*10);
          line-height: var(--tw-leading,var(--text-sm--line-height));
          padding-block: calc(var(--spacing)*1);
          padding-inline: calc(var(--spacing)*3);
          justify-content: center;
          align-items: center;
          display: inline-flex;
      }

      @media (min-width: 40rem) {
          .zplcloud-button {
              height: calc(var(--spacing)*8);
          }
      }

      .zplcloud-button {
          cursor: pointer;
      }

          .zplcloud-button svg {
              height: calc(var(--spacing)*4);
              width: calc(var(--spacing)*4);
              flex-shrink: 0;
          }

          .zplcloud-button:not(.square):has(> .zplcloud-button-content > svg:first-child) {
              padding-left: calc(var(--spacing)*2);
          }

          .zplcloud-button:not(.square):has(> .zplcloud-button-content > svg:last-child) {
              padding-right: calc(var(--spacing)*2);
          }

          .zplcloud-button > .zplcloud-button-content {
              align-items: center;
              gap: calc(var(--spacing)*1.5);
              height: calc(var(--spacing)*6);
              display: inline-flex;
          }

              .zplcloud-button > .zplcloud-button-content, .zplcloud-button > .zplcloud-button-content .zplcloud-button-text {
                  min-width: calc(var(--spacing)*0);
                  flex-shrink: 1;
              }

          .zplcloud-button:not(.multiline) .zplcloud-button-text {
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
          }

          .zplcloud-button:not(.text-left, .text-right) > .zplcloud-button-content {
              text-align: center;
              justify-content: center;
          }

          .zplcloud-button:not([disabled]).minimal {
              color: var(--grayscale-a11);
              background-color: rgba(0, 0, 0, 0);
          }

              .zplcloud-button:not([disabled]).minimal:focus-visible, .zplcloud-button:not([disabled]).minimal:hover {
                  color: var(--color-black);
              }

      :is(.zplcloud-button:not([disabled]).minimal:hover, .zplcloud-button:not([disabled]).minimal:focus-visible):is(.dark, .dark *) {
          color: var(--color-white);
      }

      .zplcloud-button:not([disabled]).minimal:focus-visible {
          background-color: var(--grayscale-a3);
          --tw-outline-style: none;
          outline-style: none;
      }

      @media (hover: hover) {
          .zplcloud-button:not([disabled]).minimal:hover {
              background-color: var(--grayscale-a3);
          }
      }

      .zplcloud-button:not([disabled]).filled {
          background-color: var(--grayscale-12);
          color: var(--grayscale-1);
      }

          .zplcloud-button:not([disabled]).filled:focus-visible, .zplcloud-button:not([disabled]).filled:hover, .zplcloud-button:not([disabled]).filled[data-state="checked"], .zplcloud-button:not([disabled]).filled[data-state="on"], .zplcloud-button:not([disabled]).filled[data-state="open"], .zplcloud-button:not([disabled]).filled[data-state="opening"] {
              background-color: var(--grayscale-11);
              color: var(--grayscale-1);
          }

          .zplcloud-button:not([disabled]).filled:focus-visible {
              --tw-outline-style: none;
              outline-style: none;
          }

          .zplcloud-button:not([disabled]).filled.primary {
              background-color: var(--accent);
              color: var(--accent-contrast);
          }

      @media (hover: hover) {
          .zplcloud-button:not([disabled]).filled.primary:hover {
              background-color: var(--accent);
          }
      }

      .zplcloud-button:not([disabled]).filled.primary:focus-visible, .zplcloud-button:not([disabled]).filled.primary:hover, .zplcloud-button:not([disabled]).filled.primary[data-state="checked"], .zplcloud-button:not([disabled]).filled.primary[data-state="on"], .zplcloud-button:not([disabled]).filled.primary[data-state="open"], .zplcloud-button:not([disabled]).filled.primary[data-state="opening"] {
          background-color: var(--accent-a10);
          color: var(--accent-contrast);
      }

      .zplcloud-button-group {
          align-items: center;
          display: inline-flex;
      }

      .zplcloud-copy-button, .zplcloud-expand-button {
          --tw-backdrop-blur: blur(8px);
          backdrop-filter: var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);
          width: fit-content;
          height: fit-content;
      }

      .zplcloud-card {
          background-color: var(--card-background,var(--grayscale-surface));
          border-color: var(--border,var(--grayscale-a5));
          border-style: var(--tw-border-style);
          color: var(--color-black);
          border-width: 1px;
      }

          .zplcloud-card:is(.dark, .dark *) {
              color: var(--color-white);
          }

      .zplcloud-card {
          --tw-shadow: 0 1px 2px var(--tw-shadow-color,var(--grayscale-a3));
          box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
          transition-duration: var(--tw-duration,var(--default-transition-duration));
          transition-property: all;
          transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
      }

      @media (hover: hover) {
          .zplcloud-card:hover {
              color: var(--color-black);
          }

              .zplcloud-card:hover:is(.dark, .dark *) {
                  color: var(--color-white);
              }

          .zplcloud-card:hover {
              transition-property: none;
          }
      }

      .zplcloud-card:is(.dark, .dark *) {
          box-shadow: 0 2px 4px var(--grayscale-a3);
      }

      @media (hover: hover) {
          .zplcloud-card.interactive:hover {
              --tw-shadow: 0 1px 2px var(--tw-shadow-color,var(--grayscale-a3)),0 3px 6px var(--tw-shadow-color,var(--grayscale-a3));
              border-color: var(--accent-a9);
              box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
          }
      }

      .zplcloud-numeric-input-group:focus-within .zplcloud-numeric-input-step:not(:disabled) {
          border-color: var(--accent-a5);
          color: var(--accent-a11);
          --tw-ring-color: var(--accent);
      }

      @media (hover: hover) {
          .zplcloud-numeric-input-group:focus-within .zplcloud-numeric-input-step:not(:disabled):hover {
              background-color: var(--accent-a3);
              color: var(--accent-a11);
          }
      }

      .zplcloud-scroll-area {
          z-index: 0;
          overflow: hidden;
      }

      .zplcloud-scroll-area, .zplcloud-scroll-area-viewport {
          flex-direction: column;
          width: 100%;
          height: 100%;
          display: flex;
      }

      .zplcloud-scroll-area-viewport {
          border-radius: inherit;
          min-height: calc(var(--spacing)*0);
          flex-shrink: 1;
      }

          .zplcloud-scroll-area-viewport > div {
              flex-grow: 1;
              display: block !important;
          }

          .zplcloud-scroll-area-viewport[data-scrollbars="vertical"] > div {
              max-width: 100%;
          }

      @keyframes zplcloud-scroll-area-scrollbar-fade-in {
          0% {
              opacity: 0;
          }
      }

      @keyframes zplcloud-scroll-area-scrollbar-fade-out {
          100% {
              opacity: 0;
          }
      }

      .zplcloud-breadcrumb {
          --tw-font-weight: var(--font-weight-medium);
          font-weight: var(--font-weight-medium);
          flex-wrap: wrap;
          align-items: baseline;
          max-width: 100%;
          height: fit-content;
          display: inline-flex;
      }

          .zplcloud-breadcrumb .zplcloud-breadcrumb-item {
              color: var(--accent-a11);
              font-size: var(--text-sm);
              line-height: var(--tw-leading,var(--text-sm--line-height));
              min-width: calc(var(--spacing)*0);
              flex-shrink: 1;
          }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined)[data-state="open"]:not(:disabled) {
          background-color: var(--grayscale-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).accent.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).accent[data-state="open"]:not(:disabled) {
          background-color: var(--accent-a4,var(--grayscale-a4));
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).gray.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).gray[data-state="open"]:not(:disabled) {
          background-color: var(--gray-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).gray-hover-accent.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).gray-hover-accent[data-state="open"]:not(:disabled) {
          background-color: var(--accent-a9);
          color: var(--accent-contrast);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).mauve.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).mauve[data-state="open"]:not(:disabled) {
          background-color: var(--mauve-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).slate.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).slate[data-state="open"]:not(:disabled) {
          background-color: var(--slate-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).sage.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).sage[data-state="open"]:not(:disabled) {
          background-color: var(--sage-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).olive.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).olive[data-state="open"]:not(:disabled) {
          background-color: var(--olive-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).sand.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).sand[data-state="open"]:not(:disabled) {
          background-color: var(--sand-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).tomato.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).tomato[data-state="open"]:not(:disabled) {
          background-color: var(--tomato-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).red.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).red[data-state="open"]:not(:disabled) {
          background-color: var(--red-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).ruby.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).ruby[data-state="open"]:not(:disabled) {
          background-color: var(--ruby-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).crimson.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).crimson[data-state="open"]:not(:disabled) {
          background-color: var(--crimson-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).pink.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).pink[data-state="open"]:not(:disabled) {
          background-color: var(--pink-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).plum.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).plum[data-state="open"]:not(:disabled) {
          background-color: var(--plum-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).purple.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).purple[data-state="open"]:not(:disabled) {
          background-color: var(--purple-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).violet.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).violet[data-state="open"]:not(:disabled) {
          background-color: var(--violet-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).iris.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).iris[data-state="open"]:not(:disabled) {
          background-color: var(--iris-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).indigo.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).indigo[data-state="open"]:not(:disabled) {
          background-color: var(--indigo-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).blue.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).blue[data-state="open"]:not(:disabled) {
          background-color: var(--blue-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).cyan.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).cyan[data-state="open"]:not(:disabled) {
          background-color: var(--cyan-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).teal.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).teal[data-state="open"]:not(:disabled) {
          background-color: var(--teal-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).jade.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).jade[data-state="open"]:not(:disabled) {
          background-color: var(--jade-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).green.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).green[data-state="open"]:not(:disabled) {
          background-color: var(--green-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).grass.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).grass[data-state="open"]:not(:disabled) {
          background-color: var(--grass-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).bronze.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).bronze[data-state="open"]:not(:disabled) {
          background-color: var(--bronze-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).gold.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).gold[data-state="open"]:not(:disabled) {
          background-color: var(--gold-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).brown.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).brown[data-state="open"]:not(:disabled) {
          background-color: var(--brown-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).orange.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).orange[data-state="open"]:not(:disabled) {
          background-color: var(--orange-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).amber.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).amber[data-state="open"]:not(:disabled) {
          background-color: var(--amber-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).yellow.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).yellow[data-state="open"]:not(:disabled) {
          background-color: var(--yellow-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).lime.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).lime[data-state="open"]:not(:disabled) {
          background-color: var(--lime-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).mint.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).mint[data-state="open"]:not(:disabled) {
          background-color: var(--mint-a4);
      }

      :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).sky.interactive:not(:disabled):hover, :is(.zplcloud-docs-badge.subtle, .zplcloud-docs-badge.outlined).sky[data-state="open"]:not(:disabled) {
          background-color: var(--sky-a4);
      }

      .zplcloud-docs-badge.subtle-solid-hover.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover[data-state="open"]:not(:disabled) {
          background-color: var(--grayscale-a10);
          color: var(--accent-contrast);
      }

      .zplcloud-docs-badge.subtle-solid-hover.accent.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.accent[data-state="open"]:not(:disabled) {
          background-color: var(--accent-a9,var(--grayscale-a10));
          color: var(--accent-contrast);
      }

      .zplcloud-docs-badge.subtle-solid-hover.gray.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.gray[data-state="open"]:not(:disabled) {
          background-color: var(--gray-a9);
          color: var(--gray-a1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.gray-hover-accent.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.gray-hover-accent[data-state="open"]:not(:disabled) {
          background-color: var(--accent-a10);
          color: var(--accent-contrast);
      }

      .zplcloud-docs-badge.subtle-solid-hover.mauve.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.mauve[data-state="open"]:not(:disabled) {
          background-color: var(--mauve-10);
          color: var(--mauve-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.slate.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.slate[data-state="open"]:not(:disabled) {
          background-color: var(--slate-10);
          color: var(--slate-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.sage.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.sage[data-state="open"]:not(:disabled) {
          background-color: var(--sage-10);
          color: var(--sage-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.olive.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.olive[data-state="open"]:not(:disabled) {
          background-color: var(--olive-10);
          color: var(--olive-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.sand.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.sand[data-state="open"]:not(:disabled) {
          background-color: var(--sand-10);
          color: var(--sand-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.tomato.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.tomato[data-state="open"]:not(:disabled) {
          background-color: var(--tomato-10);
          color: var(--tomato-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.red.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.red[data-state="open"]:not(:disabled) {
          background-color: var(--red-10);
          color: var(--red-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.ruby.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.ruby[data-state="open"]:not(:disabled) {
          background-color: var(--ruby-10);
          color: var(--ruby-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.crimson.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.crimson[data-state="open"]:not(:disabled) {
          background-color: var(--crimson-10);
          color: var(--crimson-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.pink.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.pink[data-state="open"]:not(:disabled) {
          background-color: var(--pink-10);
          color: var(--pink-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.plum.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.plum[data-state="open"]:not(:disabled) {
          background-color: var(--plum-10);
          color: var(--plum-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.purple.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.purple[data-state="open"]:not(:disabled) {
          background-color: var(--purple-10);
          color: var(--purple-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.violet.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.violet[data-state="open"]:not(:disabled) {
          background-color: var(--violet-10);
          color: var(--violet-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.iris.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.iris[data-state="open"]:not(:disabled) {
          background-color: var(--iris-10);
          color: var(--iris-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.indigo.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.indigo[data-state="open"]:not(:disabled) {
          background-color: var(--indigo-10);
          color: var(--indigo-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.blue.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.blue[data-state="open"]:not(:disabled) {
          background-color: var(--blue-10);
          color: var(--blue-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.cyan.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.cyan[data-state="open"]:not(:disabled) {
          background-color: var(--cyan-10);
          color: var(--cyan-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.teal.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.teal[data-state="open"]:not(:disabled) {
          background-color: var(--teal-10);
          color: var(--teal-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.jade.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.jade[data-state="open"]:not(:disabled) {
          background-color: var(--jade-10);
          color: var(--jade-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.green.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.green[data-state="open"]:not(:disabled) {
          background-color: var(--green-10);
          color: var(--green-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.grass.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.grass[data-state="open"]:not(:disabled) {
          background-color: var(--grass-10);
          color: var(--grass-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.bronze.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.bronze[data-state="open"]:not(:disabled) {
          background-color: var(--bronze-10);
          color: var(--bronze-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.gold.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.gold[data-state="open"]:not(:disabled) {
          background-color: var(--gold-9);
          color: var(--gold-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.brown.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.brown[data-state="open"]:not(:disabled) {
          background-color: var(--brown-9);
          color: var(--brown-1);
      }

      .zplcloud-docs-badge.subtle-solid-hover.orange.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.orange[data-state="open"]:not(:disabled) {
          background-color: var(--orange-10);
          color: var(--orange-12);
      }

      .zplcloud-docs-badge.subtle-solid-hover.amber.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.amber[data-state="open"]:not(:disabled) {
          background-color: var(--amber-10);
          color: var(--amber-12);
      }

      .zplcloud-docs-badge.subtle-solid-hover.yellow.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.yellow[data-state="open"]:not(:disabled) {
          background-color: var(--yellow-10);
          color: var(--yellow-12);
      }

      .zplcloud-docs-badge.subtle-solid-hover.lime.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.lime[data-state="open"]:not(:disabled) {
          background-color: var(--lime-10);
          color: var(--lime-12);
      }

      .zplcloud-docs-badge.subtle-solid-hover.mint.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.mint[data-state="open"]:not(:disabled) {
          background-color: var(--mint-10);
          color: var(--mint-12);
      }

      .zplcloud-docs-badge.subtle-solid-hover.sky.interactive:not(:disabled):hover, .zplcloud-docs-badge.subtle-solid-hover.sky[data-state="open"]:not(:disabled) {
          background-color: var(--sky-10);
          color: var(--sky-12);
      }

      .zplcloud-docs-badge.outlined-subtle.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle[data-state="open"]:not(:disabled) {
          background-color: var(--grayscale-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.accent.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.accent[data-state="open"]:not(:disabled) {
          background-color: var(--accent-a2,var(--grayscale-a2));
      }

      .zplcloud-docs-badge.outlined-subtle.gray.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.gray[data-state="open"]:not(:disabled) {
          background-color: var(--gray-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.gray-hover-accent.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.gray-hover-accent[data-state="open"]:not(:disabled) {
          background-color: var(--accent-a9);
          color: var(--accent-contrast);
      }

      .zplcloud-docs-badge.outlined-subtle.mauve.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.mauve[data-state="open"]:not(:disabled) {
          background-color: var(--mauve-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.slate.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.slate[data-state="open"]:not(:disabled) {
          background-color: var(--slate-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.sage.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.sage[data-state="open"]:not(:disabled) {
          background-color: var(--sage-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.olive.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.olive[data-state="open"]:not(:disabled) {
          background-color: var(--olive-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.sand.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.sand[data-state="open"]:not(:disabled) {
          background-color: var(--sand-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.tomato.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.tomato[data-state="open"]:not(:disabled) {
          background-color: var(--tomato-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.red.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.red[data-state="open"]:not(:disabled) {
          background-color: var(--red-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.ruby.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.ruby[data-state="open"]:not(:disabled) {
          background-color: var(--ruby-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.crimson.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.crimson[data-state="open"]:not(:disabled) {
          background-color: var(--crimson-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.pink.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.pink[data-state="open"]:not(:disabled) {
          background-color: var(--pink-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.plum.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.plum[data-state="open"]:not(:disabled) {
          background-color: var(--plum-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.purple.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.purple[data-state="open"]:not(:disabled) {
          background-color: var(--purple-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.violet.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.violet[data-state="open"]:not(:disabled) {
          background-color: var(--violet-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.iris.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.iris[data-state="open"]:not(:disabled) {
          background-color: var(--iris-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.indigo.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.indigo[data-state="open"]:not(:disabled) {
          background-color: var(--indigo-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.blue.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.blue[data-state="open"]:not(:disabled) {
          background-color: var(--blue-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.cyan.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.cyan[data-state="open"]:not(:disabled) {
          background-color: var(--cyan-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.teal.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.teal[data-state="open"]:not(:disabled) {
          background-color: var(--teal-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.jade.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.jade[data-state="open"]:not(:disabled) {
          background-color: var(--jade-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.green.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.green[data-state="open"]:not(:disabled) {
          background-color: var(--green-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.grass.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.grass[data-state="open"]:not(:disabled) {
          background-color: var(--grass-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.bronze.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.bronze[data-state="open"]:not(:disabled) {
          background-color: var(--bronze-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.gold.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.gold[data-state="open"]:not(:disabled) {
          background-color: var(--gold-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.brown.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.brown[data-state="open"]:not(:disabled) {
          background-color: var(--brown-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.orange.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.orange[data-state="open"]:not(:disabled) {
          background-color: var(--orange-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.amber.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.amber[data-state="open"]:not(:disabled) {
          background-color: var(--amber-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.yellow.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.yellow[data-state="open"]:not(:disabled) {
          background-color: var(--yellow-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.lime.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.lime[data-state="open"]:not(:disabled) {
          background-color: var(--lime-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.mint.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.mint[data-state="open"]:not(:disabled) {
          background-color: var(--mint-a2);
      }

      .zplcloud-docs-badge.outlined-subtle.sky.interactive:not(:disabled):hover, .zplcloud-docs-badge.outlined-subtle.sky[data-state="open"]:not(:disabled) {
          background-color: var(--sky-a2);
      }

      .zplcloud-docs-badge.solid.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid[data-state="open"]:not(:disabled) {
          background-color: var(--grayscale-10);
      }

      .zplcloud-docs-badge.solid.accent.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.accent[data-state="open"]:not(:disabled) {
          background-color: var(--accent-10,var(--gray-10));
      }

      .zplcloud-docs-badge.solid.gray.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.gray[data-state="open"]:not(:disabled) {
          background-color: var(--gray-10);
      }

      .zplcloud-docs-badge.solid.gray-hover-accent.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.gray-hover-accent[data-state="open"]:not(:disabled) {
          background-color: var(--accent-10);
      }

      .zplcloud-docs-badge.solid.mauve.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.mauve[data-state="open"]:not(:disabled) {
          background-color: var(--mauve-10);
      }

      .zplcloud-docs-badge.solid.slate.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.slate[data-state="open"]:not(:disabled) {
          background-color: var(--slate-10);
      }

      .zplcloud-docs-badge.solid.sage.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.sage[data-state="open"]:not(:disabled) {
          background-color: var(--sage-10);
      }

      .zplcloud-docs-badge.solid.olive.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.olive[data-state="open"]:not(:disabled) {
          background-color: var(--olive-10);
      }

      .zplcloud-docs-badge.solid.sand.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.sand[data-state="open"]:not(:disabled) {
          background-color: var(--sand-10);
      }

      .zplcloud-docs-badge.solid.tomato.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.tomato[data-state="open"]:not(:disabled) {
          background-color: var(--tomato-10);
      }

      .zplcloud-docs-badge.solid.red.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.red[data-state="open"]:not(:disabled) {
          background-color: var(--red-10);
      }

      .zplcloud-docs-badge.solid.ruby.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.ruby[data-state="open"]:not(:disabled) {
          background-color: var(--ruby-10);
      }

      .zplcloud-docs-badge.solid.crimson.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.crimson[data-state="open"]:not(:disabled) {
          background-color: var(--crimson-10);
      }

      .zplcloud-docs-badge.solid.pink.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.pink[data-state="open"]:not(:disabled) {
          background-color: var(--pink-10);
      }

      .zplcloud-docs-badge.solid.plum.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.plum[data-state="open"]:not(:disabled) {
          background-color: var(--plum-10);
      }

      .zplcloud-docs-badge.solid.purple.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.purple[data-state="open"]:not(:disabled) {
          background-color: var(--purple-10);
      }

      .zplcloud-docs-badge.solid.violet.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.violet[data-state="open"]:not(:disabled) {
          background-color: var(--violet-10);
      }

      .zplcloud-docs-badge.solid.iris.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.iris[data-state="open"]:not(:disabled) {
          background-color: var(--iris-10);
      }

      .zplcloud-docs-badge.solid.indigo.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.indigo[data-state="open"]:not(:disabled) {
          background-color: var(--indigo-10);
      }

      .zplcloud-docs-badge.solid.blue.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.blue[data-state="open"]:not(:disabled) {
          background-color: var(--blue-10);
      }

      .zplcloud-docs-badge.solid.cyan.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.cyan[data-state="open"]:not(:disabled) {
          background-color: var(--cyan-10);
      }

      .zplcloud-docs-badge.solid.teal.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.teal[data-state="open"]:not(:disabled) {
          background-color: var(--teal-10);
      }

      .zplcloud-docs-badge.solid.jade.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.jade[data-state="open"]:not(:disabled) {
          background-color: var(--jade-10);
      }

      .zplcloud-docs-badge.solid.green.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.green[data-state="open"]:not(:disabled) {
          background-color: var(--green-10);
      }

      .zplcloud-docs-badge.solid.grass.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.grass[data-state="open"]:not(:disabled) {
          background-color: var(--grass-10);
      }

      .zplcloud-docs-badge.solid.bronze.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.bronze[data-state="open"]:not(:disabled) {
          background-color: var(--bronze-10);
      }

      .zplcloud-docs-badge.solid.gold.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.gold[data-state="open"]:not(:disabled) {
          background-color: var(--gold-10);
      }

      .zplcloud-docs-badge.solid.brown.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.brown[data-state="open"]:not(:disabled) {
          background-color: var(--brown-10);
      }

      .zplcloud-docs-badge.solid.orange.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.orange[data-state="open"]:not(:disabled) {
          background-color: var(--orange-10);
      }

      .zplcloud-docs-badge.solid.amber.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.amber[data-state="open"]:not(:disabled) {
          background-color: var(--amber-10);
      }

      .zplcloud-docs-badge.solid.yellow.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.yellow[data-state="open"]:not(:disabled) {
          background-color: var(--yellow-10);
      }

      .zplcloud-docs-badge.solid.lime.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.lime[data-state="open"]:not(:disabled) {
          background-color: var(--lime-10);
      }

      .zplcloud-docs-badge.solid.mint.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.mint[data-state="open"]:not(:disabled) {
          background-color: var(--mint-10);
      }

      .zplcloud-docs-badge.solid.sky.interactive:not(:disabled):hover, .zplcloud-docs-badge.solid.sky[data-state="open"]:not(:disabled) {
          background-color: var(--sky-10);
      }

      .zplcloud-docs-badge.interactive:not(:disabled):hover, .zplcloud-docs-badge[data-state="open"]:not(:disabled) {
          transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
      }

      .zplcloud-kbd {
          background-color: var(--grayscale-surface);
          border-color: var(--grayscale-a6);
          border-radius: calc(var(--radius)*1.5);
          border-style: var(--tw-border-style);
          color: var(--grayscale-a12);
          font-size: var(--text-xs);
          line-height: var(--tw-leading,var(--text-xs--line-height));
          padding-block: calc(var(--spacing)*.5);
          padding-inline: calc(var(--spacing)*1.5);
          border-width: 1px;
      }

      .zplcloud-accordion-trigger {
          border-radius: inherit;
          cursor: pointer;
          align-items: center;
          gap: calc(var(--spacing)*3);
          padding: calc(var(--spacing)*4);
          transition-duration: var(--tw-duration,var(--default-transition-duration));
          transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
          transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
          display: flex;
      }

      @media (hover: hover) {
          .zplcloud-accordion-trigger:hover {
              background-color: var(--grayscale-a2);
              transition-property: none;
          }
      }

      .zplcloud-accordion-trigger[data-state="open"] {
          border-bottom-right-radius: 0px;
          border-bottom-left-radius: 0px;
      }

      .zplcloud-accordion-trigger {
          list-style-type: none;
          overflow: auto;
      }

          .zplcloud-accordion-trigger::-webkit-details-marker {
              display: none;
          }

          .zplcloud-accordion-trigger .zplcloud-accordion-trigger-arrow {
              color: var(--grayscale-a11);
              height: calc(var(--spacing)*4);
              transition-property: transform, translate, scale, rotate;
              width: calc(var(--spacing)*4);
              --tw-duration: .4s;
              --tw-ease: var(--ease-shift);
              transition-duration: 0.4s;
              transition-timing-function: var(--ease-shift);
              flex-shrink: 0;
          }

          .zplcloud-accordion-trigger[data-state="open"] .zplcloud-accordion-trigger-arrow {
              rotate: 90deg;
          }

      .code-block-root {
          counter-reset: code-block-line 0;
          flex-direction: column;
          width: 100%;
          display: flex;
          overflow: hidden;
          background-color: unset !important;
      }

          .code-block-root > .zplcloud-scroll-area {
              min-height: calc(var(--spacing)*0);
              flex-shrink: 1;
          }

      .code-block, .code-block.text-base, .code-block.text-sm, .code-block.text-xs {
          font-family: var(--font-code);
          --tw-leading: var(--leading-relaxed);
          line-height: var(--leading-relaxed);
      }

      .code-block-inner {
          padding-block: calc(var(--spacing)*3);
      }

      .code-block-line-group {
          --tw-border-spacing-x: calc(var(--spacing)*0);
          --tw-border-spacing-y: calc(var(--spacing)*0);
          border-spacing: var(--tw-border-spacing-x)var(--tw-border-spacing-y);
          min-width: 100%;
      }

      .code-block-line-gutter {
          padding: calc(var(--spacing)*0);
          user-select: none;
          vertical-align: top;
          width: calc(var(--spacing)*0);
      }

          .code-block-line-gutter > span {
              color: var(--grayscale-a9,var(--gray-a9));
              padding-left: calc(var(--spacing)*3);
          }

      .code-block-line-content {
          padding-block: calc(var(--spacing)*0);
          padding-inline: calc(var(--spacing)*3);
      }

          .code-block-line-content .line {
              vertical-align: top;
              display: inline-block;
          }

      .dark .code-block-line-content span {
          color: var(--shiki-dark) !important;
          font-style: var(--shiki-dark-font-style) !important;
          font-weight: var(--shiki-dark-font-weight) !important;
          text-decoration: var(--shiki-dark-text-decoration) !important;
      }

      .zplcloud-header-logo-container {
          gap: calc(var(--spacing)*2);
          min-width: fit-content;
          height: 100%;
          padding-block: calc(var(--spacing)*1);
          flex: 1 0 0%;
          display: flex;
          position: relative;
      }

      .zplcloud-header-tabs {
          user-select: none;
          max-width: 100%;
          display: none;
      }

      @media (min-width: 64rem) {
          .zplcloud-header-tabs {
              justify-content: space-between;
              align-items: center;
              display: flex;
          }
      }

      .zplcloud-header-selectors {
          align-items: baseline;
          display: none;
      }

      @media (min-width: 64rem) {
          .zplcloud-header-selectors {
              display: flex;
          }
      }

      .zplcloud-sidebar-desktop {
          display: none;
      }

      @media (min-width: 64rem) {
          .zplcloud-sidebar-desktop {
              display: block;
          }
      }

      .zplcloud-header-navbar-links {
          flex: 1 1 0%;
          display: none;
      }

      @media (min-width: 64rem) {
          .zplcloud-header-navbar-links {
              justify-content: flex-end;
              align-items: center;
              display: flex;
          }
      }

      .zplcloud-header-mobile-menu-button {
          flex: 1 1 0%;
          justify-content: flex-end;
          align-items: center;
          display: flex;
      }

      .zplcloud-header-search-bar {
          max-width: var(--content-width,40rem);
          min-width: calc(var(--spacing)*0);
          flex-shrink: 1;
          width: 100%;
          display: none;
      }

      @media (min-width: 64rem) {
          .zplcloud-header-search-bar {
              display: inline-flex;
          }
      }

      :where(a, button, [role="tab"], [role="button"], [tabindex="0"]):focus-visible {
          outline: 2px solid var(--accent-9,Highlight);
          outline-offset: 2px;
          border-radius: 4px;
      }

      [data-theme="default"]#zplcloud-header {
          background-color: var(--header-background);
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 1px;
          border-color: var(--border,var(--grayscale-a3));
          inset-inline: calc(var(--spacing)*0);
          pointer-events: auto;
          top: calc(var(--spacing)*0);
          z-index: 30;
          --tw-backdrop-blur: blur(var(--blur-lg));
          backdrop-filter: var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);
          position: fixed;
      }

          [data-theme="default"]#zplcloud-header .zplcloud-header-content {
              height: var(--mobile-header-height-real);
              padding-inline: var(--page-padding);
              align-items: center;
              display: flex;
          }

      @media (min-width: 48rem) {
          [data-theme="default"]#zplcloud-header .zplcloud-header-content {
              height: var(--header-height-real);
          }
      }

      [data-theme="default"]#zplcloud-header .zplcloud-header-tabs {
          padding-inline: var(--page-padding);
          width: calc(var(--spacing-page-width) + var(--spacing-page-padding)*2);
          margin-inline: auto;
      }

      [data-theme="default"]#zplcloud-header [role="tablist"] {
          font-size: var(--text-sm);
          line-height: var(--tw-leading,var(--text-sm--line-height));
          margin-inline: calc(var(--spacing)*-3);
          vertical-align: bottom;
          display: flex;
      }

      [data-theme="default"]#zplcloud-header [data-radix-collection-item] {
          height: calc(var(--spacing)*11);
          min-width: calc(var(--spacing)*0);
          justify-content: flex-start;
          align-items: center;
          display: flex;
          position: relative;
      }

      :where([data-theme="default"]#zplcloud-header [data-radix-collection-item] > :not(:last-child)) {
          --tw-space-x-reverse: 0;
          margin-inline-start: calc(var(--spacing)*2*var(--tw-space-x-reverse));
          margin-inline-end: calc(var(--spacing)*2*(1 - var(--tw-space-x-reverse)));
      }

      [data-theme="default"]#zplcloud-header [data-radix-collection-item] {
          padding-inline: calc(var(--spacing)*3);
          --tw-font-weight: var(--font-weight-medium);
          font-weight: var(--font-weight-medium);
      }

          [data-theme="default"]#zplcloud-header [data-radix-collection-item]::after {
              background-color: var(--accent-indicator);
              height: calc(var(--spacing)*.5);
              inset-inline: calc(var(--spacing)*3);
              opacity: 0;
              --tw-content: "";
              content: var(--tw-content);
              position: absolute;
              bottom: -1px;
          }

          [data-theme="default"]#zplcloud-header [data-radix-collection-item][data-state="active"] {
              color: var(--accent-11);
          }

              [data-theme="default"]#zplcloud-header [data-radix-collection-item][data-state="active"] > span {
                  -webkit-text-stroke: 0.5px currentcolor;
              }

              [data-theme="default"]#zplcloud-header [data-radix-collection-item][data-state="active"]::after {
                  opacity: 1;
              }

              [data-theme="default"]#zplcloud-header [data-radix-collection-item][data-state="active"]:focus-visible {
                  background-color: var(--accent-a3);
                  --tw-outline-style: none;
                  outline-style: none;
              }

          [data-theme="default"]#zplcloud-header [data-radix-collection-item][data-state="inactive"] {
              color: var(--grayscale-a11);
          }

              [data-theme="default"]#zplcloud-header [data-radix-collection-item][data-state="inactive"]:focus-visible, [data-theme="default"]#zplcloud-header [data-radix-collection-item][data-state="inactive"]:hover {
                  color: var(--color-black);
              }

      :is([data-theme="default"]#zplcloud-header [data-radix-collection-item][data-state="inactive"]:hover, [data-theme="default"]#zplcloud-header [data-radix-collection-item][data-state="inactive"]:focus-visible):is(.dark, .dark *) {
          color: var(--color-white);
      }

      [data-theme="default"]#zplcloud-header [data-radix-collection-item][data-state="inactive"]:focus-visible {
          --tw-outline-style: none;
          outline-style: none;
      }

      [data-theme="default"]#zplcloud-header [data-radix-collection-item] svg {
          height: calc(var(--spacing)*3.5);
          width: calc(var(--spacing)*3.5);
      }

      [data-theme="default"] #zplcloud-sidebar[data-viewport="desktop"] {
          pointer-events: auto;
          top: var(--header-height);
          z-index: 30;
          display: none;
      }

      @media (min-width: 64rem) {
          [data-theme="default"] #zplcloud-sidebar[data-viewport="desktop"] {
              --tw-translate-x: calc(var(--spacing)*0);
              translate: var(--tw-translate-x)var(--tw-translate-y);
              flex-direction: column;
              flex-shrink: 0;
              display: flex;
          }
      }

      [data-theme="default"] #zplcloud-sidebar[data-viewport="desktop"] {
          padding-left: var(--aside-offset);
          width: var(--sticky-aside-width);
      }

          [data-theme="default"] #zplcloud-sidebar[data-viewport="desktop"][data-state="fixed"], [data-theme="default"] #zplcloud-sidebar[data-viewport="desktop"][data-state="sticky"] {
              border-color: var(--border,var(--grayscale-a3));
              border-right-style: var(--tw-border-style);
              --tw-backdrop-blur: blur(var(--blur-xl));
              backdrop-filter: var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);
              border-right-width: 1px;
              overflow-y: auto;
          }

          [data-theme="default"] #zplcloud-sidebar[data-viewport="desktop"][data-state="sticky"] {
              background-color: var(--sidebar-background);
              height: calc(100dvh - var(--header-height) - var(--custom-footer-visible-height,0px));
              flex-shrink: 0;
              align-self: flex-start;
              position: sticky;
          }

      [data-theme="default"] #zplcloud-sidebar-scroll-area {
          padding-block: calc(var(--spacing)*6);
          padding-inline: calc(var(--spacing)*4);
          padding-bottom: calc(var(--spacing)*12);
      }

      @media (min-width: 64rem) {
          [data-theme="default"] #zplcloud-sidebar-scroll-area {
              padding-left: calc(var(--spacing)*5);
          }
      }

      .zplcloud-sidebar-heading {
          margin-bottom: calc(var(--spacing)*1);
          min-height: 32px;
          display: flex;
      }

      @media (min-width: 64rem) {
          .zplcloud-sidebar-heading {
              min-height: 36px;
          }
      }

      .zplcloud-sidebar-heading {
          padding-inline: calc(var(--spacing)*4);
          align-items: center;
          display: inline-flex;
      }

      @media (min-width: 64rem) {
          .zplcloud-sidebar-heading {
              padding-inline: calc(var(--spacing)*2);
          }
      }

      .zplcloud-sidebar-heading .zplcloud-sidebar-heading-content {
          font-size: var(--text-base);
          margin: calc(var(--spacing)*0);
          --tw-leading: calc(var(--spacing)*6);
          line-height: calc(var(--spacing)*6);
          --tw-font-weight: var(--font-weight-semibold);
          font-weight: var(--font-weight-semibold);
      }

      @media (min-width: 64rem) {
          .zplcloud-sidebar-heading .zplcloud-sidebar-heading-content {
              font-size: var(--text-sm);
              --tw-leading: calc(var(--spacing)*5);
              line-height: calc(var(--spacing)*5);
          }
      }

      .zplcloud-sidebar-link {
          font-size: var(--text-base);
          align-items: center;
          gap: calc(var(--spacing)*3);
          padding-block: calc(var(--spacing)*2);
          padding-inline: calc(var(--spacing)*4);
          text-align: left;
          --tw-leading: var(--leading-tight);
          width: 100%;
          color: var(--grayscale-a12);
          line-height: var(--leading-tight);
          transition-duration: var(--tw-duration,var(--default-transition-duration));
          transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
          transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
          display: flex;
      }

      @media (min-width: 64rem) {
          .zplcloud-sidebar-link {
              border-radius: calc(var(--radius)*2);
              font-size: var(--text-sm);
              line-height: var(--tw-leading,var(--text-sm--line-height));
              padding: calc(var(--spacing)*2);
          }
      }

      @media (hover: hover) {
          .zplcloud-sidebar-link:hover {
              background-color: var(--grayscale-a3);
              color: var(--grayscale-a12);
              transition-property: none;
          }
      }

      .zplcloud-sidebar-link svg {
          color: var(--grayscale-a9);
          height: calc(var(--spacing)*4);
          width: calc(var(--spacing)*4);
          flex-shrink: 0;
      }

      .zplcloud-sidebar-link .expand-indicator[data-state="active"], .zplcloud-sidebar-link[data-state="active"] {
          background-color: var(--accent-a3);
          color: var(--accent-a11);
      }

          .zplcloud-sidebar-link[data-state="active"] svg {
              color: var(--accent-a9);
          }

          .zplcloud-sidebar-link[data-state="active"] .zplcloud-sidebar-link-title-inner {
              -webkit-text-stroke: 0.5px currentcolor;
          }

      .zplcloud-sidebar-link-title {
          text-overflow: ellipsis;
          white-space: nowrap;
          min-width: 0px;
          overflow: hidden;
      }

      .zplcloud-sidebar-link-title-inner {
          will-change: transform;
          display: inline;
          transform: translate(0px);
      }

      @keyframes zplcloud-sidebar-marquee {
          100% {
              transform: translateX(var(--marquee-translate,0));
          }
      }

      .zplcloud-sidebar-group {
          list-style-type: none;
      }

      :where(.zplcloud-sidebar-group > :not(:last-child)) {
          --tw-space-y-reverse: 0;
          margin-block-start: calc(1px*var(--tw-space-y-reverse));
          margin-block-end: calc(1px*(1 - var(--tw-space-y-reverse)));
      }

      @media not all and (min-width: 64rem) {
          .zplcloud-sidebar-group {
              margin-inline: calc(var(--spacing)*-4);
          }

              .zplcloud-sidebar-group .zplcloud-sidebar-group {
                  margin-inline: calc(var(--spacing)*0);
              }
      }

      .zplcloud-layout-guide {
          margin-inline: auto;
          margin-bottom: calc(var(--spacing)*12);
          min-width: calc(var(--spacing)*0);
          flex-shrink: 1;
      }

      :where(.zplcloud-layout-guide > :not(:last-child)) {
          --tw-space-y-reverse: 0;
          margin-block-start: calc(var(--spacing)*8*var(--tw-space-y-reverse));
          margin-block-end: calc(var(--spacing)*8*(1 - var(--tw-space-y-reverse)));
      }

      .zplcloud-layout-guide {
          padding-inline: var(--page-padding);
      }

      .zplcloud-layout-changelog-entry, .zplcloud-layout-guide {
          min-height: calc(100vh - var(--header-height));
          flex-direction: column;
          display: flex;
      }

      .zplcloud-layout-footer {
          margin-block: calc(var(--spacing)*16);
          max-width: 100%;
          width: var(--content-width,40rem);
          margin-inline: auto;
      }

      :where(.zplcloud-layout-footer > :not(:last-child)) {
          --tw-space-y-reverse: 0;
          margin-block-start: calc(var(--spacing)*8*var(--tw-space-y-reverse));
          margin-block-end: calc(var(--spacing)*8*(1 - var(--tw-space-y-reverse)));
      }

      .zplcloud-layout-footer .zplcloud-layout-footer-toolbar {
          column-gap:;
          row-gap: calc(var(--spacing)*8);
          display: flex;
      }

      @media not all and (min-width: 40rem) {
          .zplcloud-layout-footer .zplcloud-layout-footer-toolbar {
              flex-direction: column;
          }
      }

      @media (min-width: 40rem) {
          .zplcloud-layout-footer .zplcloud-layout-footer-toolbar {
              justify-content: space-between;
          }
      }

      @keyframes loading-dots {
          0% {
              content: ".";
          }

          33% {
              content: "..";
          }

          66% {
              content: "...";
          }
      }

      [data-rmiz-btn-zoom]:not(:focus, :active) {
          clip: rect(0px, 0px, 0px, 0px);
          clip-path: inset(50%);
          pointer-events: none;
          white-space: nowrap;
          width: 1px;
          height: 1px;
          position: absolute;
          overflow: hidden;
      }

      .zplcloud-mdx-link {
          color: var(--accent-a11);
          --tw-font-weight: var(--font-weight-semibold);
          font-weight: var(--font-weight-semibold);
          text-underline-offset: calc(var(--spacing)*1);
          text-decoration-line: underline;
          text-decoration-color: currentcolor;
          text-decoration-thickness: 1px !important;
      }

          .zplcloud-mdx-link svg.external-link-icon {
              color: currentcolor;
              height: calc(var(--spacing)*3.5);
              margin-left: calc(var(--spacing)*.5);
              opacity: 0.7;
              width: calc(var(--spacing)*3.5);
              display: inline-block;
              overflow: visible;
          }

              .zplcloud-mdx-link svg.external-link-icon path:first-child, .zplcloud-mdx-link svg.external-link-icon path:nth-child(2) {
                  transition: transform 0.2s;
              }

          .zplcloud-mdx-link:hover {
              text-decoration-thickness: 2px !important;
          }

              .zplcloud-mdx-link:hover svg.external-link-icon path:first-child, .zplcloud-mdx-link:hover svg.external-link-icon path:nth-child(2) {
                  transform: translate(2px, -2px);
              }

      .zplcloud-page-heading {
          margin-block: calc(var(--spacing)*0);
          --tw-leading: var(--leading-tight);
          line-height: var(--leading-tight);
          text-wrap: balance;
          overflow-wrap: break-word;
          display: inline-block;
      }

      a.zplcloud-anchor {
          border-radius: calc(var(--radius)*1.5);
          border-style: var(--tw-border-style);
          border-width: 0px;
          position: relative;
      }

      .zplcloud-anchor-icon, a.zplcloud-anchor {
          height: calc(var(--spacing)*6);
          width: calc(var(--spacing)*6);
          align-items: center;
          display: flex;
      }

      .zplcloud-anchor-icon {
          border-radius: calc(var(--radius)*1.5);
          left: calc(var(--spacing)*0);
          justify-content: center;
          position: absolute;
      }

          .zplcloud-anchor-icon:not(.copied) {
              background-color: var(--card-background,var(--grayscale-surface));
              border-color: var(--card-border,var(--color-border-default));
              border-style: var(--tw-border-style);
              color: var(--grayscale-a11);
              border-width: 1px;
          }

          .zplcloud-anchor-icon.copied, .zplcloud-anchor-icon:not(.copied) {
              --tw-backdrop-blur: blur(8px);
              backdrop-filter: var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);
          }

      .zplcloud-page-actions.zplcloud-toolbar {
          gap: calc(var(--spacing)*0);
      }

      .zplcloud-footer-nav {
          background-color: var(--grayscale-a3);
          border-radius: calc(var(--radius)*4);
          margin-inline: calc(var(--spacing)*-1);
          padding: calc(var(--spacing)*1);
          display: flex;
      }

          .zplcloud-footer-nav > a {
              border-radius: calc(var(--radius)*3);
          }

          .zplcloud-footer-nav .zplcloud-footer-prev {
              gap: calc(var(--spacing)*1);
              padding-right: calc(var(--spacing)*6);
              flex-shrink: 0;
          }

          .zplcloud-footer-nav .zplcloud-footer-next, .zplcloud-footer-nav .zplcloud-footer-prev {
              height: calc(var(--spacing)*16);
              padding-inline: calc(var(--spacing)*3);
              align-items: center;
              display: flex;
          }

          .zplcloud-footer-nav .zplcloud-footer-next {
              background-color: var(--card-background,var(--card-surface-fallback));
              border-color: var(--card-border,var(--color-border-default));
              border-style: var(--tw-border-style);
              gap: calc(var(--spacing)*4);
              min-width: calc(var(--spacing)*0);
              transition-duration: var(--tw-duration,var(--default-transition-duration));
              transition-property: all;
              transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
              border-width: 1px;
              flex: 1 1 0%;
              justify-content: flex-end;
              position: relative;
              overflow: clip;
          }

      @media (hover: hover) {
          .zplcloud-footer-nav .zplcloud-footer-next:hover {
              border-color: var(--accent-a9);
              transition-property: none;
          }
      }

      .zplcloud-footer-nav--simple {
          gap: calc(var(--spacing)*2);
          margin: calc(var(--spacing)*0);
          padding: calc(var(--spacing)*0);
          background-color: rgba(0, 0, 0, 0);
          justify-content: space-between;
      }

          .zplcloud-footer-nav--simple .zplcloud-footer-prev {
              border-radius: var(--radius);
              border-style: var(--tw-border-style);
              align-items: flex-start;
              gap: calc(var(--spacing)*2);
              height: auto;
              min-width: calc(var(--spacing)*0);
              padding: calc(var(--spacing)*2);
              background-color: rgba(0, 0, 0, 0);
              border-width: 0px;
              flex-direction: column;
              flex: 1 1 0%;
              justify-content: flex-start;
              overflow: hidden;
          }

          .zplcloud-footer-nav--simple .zplcloud-footer-next {
              border-radius: var(--radius);
              border-style: var(--tw-border-style);
              align-items: flex-end;
              gap: calc(var(--spacing)*2);
              height: auto;
              min-width: calc(var(--spacing)*0);
              padding: calc(var(--spacing)*2);
              background-color: rgba(0, 0, 0, 0);
              border-width: 0px;
              flex-direction: column;
              flex: 1 1 0%;
              justify-content: flex-end;
              overflow: hidden;
          }

              .zplcloud-footer-nav--simple .zplcloud-footer-next span:first-child span {
                  color: var(--grayscale-a11);
              }

              .zplcloud-footer-nav--simple .zplcloud-footer-next span:first-child svg {
                  color: var(--grayscale-a9);
                  transition: transform 0.2s;
              }

              .zplcloud-footer-nav--simple .zplcloud-footer-next:hover span:first-child span {
                  color: var(--grayscale-a12);
              }

              .zplcloud-footer-nav--simple .zplcloud-footer-next:hover span:first-child svg {
                  color: var(--grayscale-a12);
                  transform: translate(4px);
              }

      .zplcloud-steps {
          border-color: var(--border,var(--grayscale-a5));
          border-left-style: var(--tw-border-style);
          margin-bottom: calc(var(--spacing)*12);
          margin-left: calc(var(--spacing)*3);
          margin-top: calc(var(--spacing)*4);
          padding-left: calc(var(--spacing)*7);
          border-left-width: 1px;
      }

      .zplcloud-step > .zplcloud-anchor {
          margin-left: -40px;
          margin-top: calc(var(--spacing)*1);
          position: absolute;
      }

      .zplcloud-walkthrough-control:hover:not(:disabled) {
          background-color: var(--grayscale-a3);
          color: var(--grayscale-a12);
      }
  }

  @layer utilities {
      .pointer-events-none {
          pointer-events: none;
      }

      .invisible {
          visibility: hidden;
      }

      .sr-only {
          clip-path: inset(50%);
          white-space: nowrap;
          border-width: 0px;
          width: 1px;
          height: 1px;
          margin: -1px;
          padding: 0px;
          overflow: hidden;
      }

      .absolute, .sr-only {
          position: absolute;
      }

      .fixed {
          position: fixed;
      }

      .relative {
          position: relative;
      }

      .sticky {
          position: sticky;
      }

      .inset-0 {
          inset: calc(var(--spacing)*0);
      }

      .top-2 {
          top: calc(var(--spacing)*2);
      }

      .right-2 {
          right: calc(var(--spacing)*2);
      }

      .z-0 {
          z-index: 0;
      }

      .z-20 {
          z-index: 20;
      }

      .-mx-4 {
          margin-inline: calc(var(--spacing)*-4);
      }

      .mx-auto {
          margin-inline: auto;
      }

      .mx-px {
          margin-inline: 1px;
      }

      .-my-2 {
          margin-block: calc(var(--spacing)*-2);
      }

      .my-6 {
          margin-block: calc(var(--spacing)*6);
      }

      .my-8 {
          margin-block: calc(var(--spacing)*8);
      }

      .prose {
          color: inherit;
          max-width: unset;
      }

          .prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
              margin-top: 1.25em;
              margin-bottom: 1.25em;
          }

          .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
              color: var(--tw-prose-links);
              font-weight: 500;
              text-decoration: underline;
          }

          .prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
              color: var(--tw-prose-headings);
              margin-top: 2em;
              margin-bottom: 1em;
              font-size: 1.5em;
              font-weight: 600;
              line-height: 1.33333;
          }

          .prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
              color: var(--tw-prose-headings);
              margin-top: 1.6em;
              margin-bottom: 0.6em;
              font-size: 1.25em;
              font-weight: 600;
              line-height: 1.6;
          }

          .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
              color: var(--tw-prose-code);
              font-size: 0.875em;
              font-weight: 600;
          }

      .prose {
          --tw-prose-body: inherit;
          --tw-prose-headings: inherit;
          --tw-prose-lead: var(--grayscale-a11);
          --tw-prose-links: var(--accent-a11);
          --tw-prose-bold: inherit;
          --tw-prose-counters: var(--grayscale-a10);
          --tw-prose-bullets: var(--grayscale-a9);
          --tw-prose-hr: var(--color-border-default);
          --tw-prose-quotes: var(--grayscale-a11);
          --tw-prose-quote-borders: var(--accent-a6);
          --tw-prose-captions: var(--grayscale-a11);
          --tw-prose-kbd: var(--grayscale-a11);
          --tw-prose-kbd-shadows: var(--color-border-default);
          --tw-prose-code: var(--accent-a11);
          --tw-prose-pre-code: inherit;
          --tw-prose-pre-bg: initial;
          --tw-prose-th-borders: var(--color-border-default);
          --tw-prose-td-borders: var(--color-border-default);
          --tw-prose-invert-body: #d1d5dc;
          --tw-prose-invert-headings: #fff;
          --tw-prose-invert-lead: #99a1af;
          --tw-prose-invert-links: #fff;
          --tw-prose-invert-bold: #fff;
          --tw-prose-invert-counters: #99a1af;
          --tw-prose-invert-bullets: #4a5565;
          --tw-prose-invert-hr: #364153;
          --tw-prose-invert-quotes: #f3f4f6;
          --tw-prose-invert-quote-borders: #364153;
          --tw-prose-invert-captions: #99a1af;
          --tw-prose-invert-kbd: #fff;
          --tw-prose-invert-kbd-shadows: #ffffff1a;
          --tw-prose-invert-code: #fff;
          --tw-prose-invert-pre-code: #d1d5dc;
          --tw-prose-invert-pre-bg: #00000080;
          --tw-prose-invert-th-borders: #4a5565;
          --tw-prose-invert-td-borders: #364153;
          font-size: 1rem;
          line-height: 1.75;
      }

      @supports (color:lab(0% 0 0)) {
          .prose {
              --tw-prose-invert-body: lab(85.1236% -.612259 -3.7138);
              --tw-prose-invert-lead: lab(65.9269% -.832707 -8.17473);
              --tw-prose-invert-counters: lab(65.9269% -.832707 -8.17473);
              --tw-prose-invert-bullets: lab(35.6337% -1.58697 -10.8425);
              --tw-prose-invert-hr: lab(27.1134% -.956401 -12.3224);
              --tw-prose-invert-quotes: lab(96.1596% -.0823438 -1.13575);
              --tw-prose-invert-quote-borders: lab(27.1134% -.956401 -12.3224);
              --tw-prose-invert-captions: lab(65.9269% -.832707 -8.17473);
              --tw-prose-invert-pre-code: lab(85.1236% -.612259 -3.7138);
              --tw-prose-invert-th-borders: lab(35.6337% -1.58697 -10.8425);
              --tw-prose-invert-td-borders: lab(27.1134% -.956401 -12.3224);
          }
      }

      .prose :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
          margin-top: 0px;
      }

      .prose :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
          margin-top: 0px;
      }

      .prose :where(.prose > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
          margin-bottom: 0px;
      }

      .prose :where(h1, h2, h3, h4, h5, h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
          letter-spacing: -0.02em;
      }

      .m-mdx {
          margin-bottom: calc(var(--spacing)*6);
          margin-top: calc(var(--spacing)*4);
      }

      .mt-\(--header-height\) {
          margin-top: var(--header-height);
      }

      .mt-2 {
          margin-top: calc(var(--spacing)*2);
      }

      .mt-4 {
          margin-top: calc(var(--spacing)*4);
      }

      .-mr-1 {
          margin-right: calc(var(--spacing)*-1);
      }

      .mr-1 {
          margin-right: calc(var(--spacing)*1);
      }

      .mr-4 {
          margin-right: calc(var(--spacing)*4);
      }

      .mr-auto {
          margin-right: auto;
      }

      .mb-0 {
          margin-bottom: calc(var(--spacing)*0);
      }

      .mb-6 {
          margin-bottom: calc(var(--spacing)*6);
      }

      .-ml-2 {
          margin-left: calc(var(--spacing)*-2);
      }

      .ml-4 {
          margin-left: calc(var(--spacing)*4);
      }

      .ml-auto {
          margin-left: auto;
      }

      .block {
          display: block;
      }

      .flex {
          display: flex;
      }

      .grid {
          display: grid;
      }

      .hidden {
          display: none;
      }

      .inline-flex {
          display: inline-flex;
      }

      .size-4 {
          height: calc(var(--spacing)*4);
          width: calc(var(--spacing)*4);
      }

      .size-6 {
          height: calc(var(--spacing)*6);
          width: calc(var(--spacing)*6);
      }

      .size-7 {
          height: calc(var(--spacing)*7);
          width: calc(var(--spacing)*7);
      }

      .size-9 {
          height: calc(var(--spacing)*9);
          width: calc(var(--spacing)*9);
      }

      .size-icon {
          height: calc(var(--spacing)*4);
          width: calc(var(--spacing)*4);
      }

      .h-5 {
          height: calc(var(--spacing)*5);
      }

      .h-6 {
          height: calc(var(--spacing)*6);
      }

      .h-8 {
          height: calc(var(--spacing)*8);
      }

      .h-9 {
          height: calc(var(--spacing)*9);
      }

      .h-px {
          height: 1px;
      }

      .max-h-full {
          max-height: 100%;
      }

      .min-h-8 {
          min-height: calc(var(--spacing)*8);
      }

      .min-h-10 {
          min-height: calc(var(--spacing)*10);
      }

      .w-6 {
          width: calc(var(--spacing)*6);
      }

      .w-content-width {
          width: var(--content-width,40rem);
      }

      .w-fit {
          width: fit-content;
      }

      .w-full {
          width: 100%;
      }

      .w-px {
          width: 1px;
      }

      .max-w-\[640px\] {
          max-width: 640px;
      }

      .max-w-full {
          max-width: 100%;
      }

      .max-w-page-width {
          max-width: var(--page-width,88rem);
      }

      .min-w-0 {
          min-width: calc(var(--spacing)*0);
      }

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

      .flex-shrink-0 {
          flex-shrink: 0;
      }

      .shrink {
          flex-shrink: 1;
      }

      .shrink-0 {
          flex-shrink: 0;
      }

      .grow {
          flex-grow: 1;
      }

      .animate-dropdown-chevron {
          transition-property: transform, translate, scale, rotate;
          transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
          --tw-duration: .25s;
          transition-duration: 0.25s;
      }

      .cursor-pointer {
          cursor: pointer;
      }

      .cursor-wait {
          cursor: wait;
      }

      .list-none {
          list-style-type: none;
      }

      .grid-cols-1 {
          grid-template-columns: repeat(1, minmax(0px, 1fr));
      }

      .flex-col {
          flex-direction: column;
      }

      .flex-row {
          flex-direction: row;
      }

      .flex-wrap {
          flex-wrap: wrap;
      }

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

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

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

      .justify-between {
          justify-content: space-between;
      }

      .justify-center {
          justify-content: center;
      }

      .justify-start {
          justify-content: flex-start;
      }

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

      .gap-1 {
          gap: calc(var(--spacing)*1);
      }

      .gap-1\.5 {
          gap: calc(var(--spacing)*1.5);
      }

      .gap-2 {
          gap: calc(var(--spacing)*2);
      }

      .gap-3 {
          gap: calc(var(--spacing)*3);
      }

      .gap-4 {
          gap: calc(var(--spacing)*4);
      }

      :where(.space-y-1 > :not(:last-child)) {
          --tw-space-y-reverse: 0;
          margin-block-start: calc(var(--spacing)*1*var(--tw-space-y-reverse));
          margin-block-end: calc(var(--spacing)*1*(1 - var(--tw-space-y-reverse)));
      }

      :where(.space-y-2 > :not(:last-child)) {
          --tw-space-y-reverse: 0;
          margin-block-start: calc(var(--spacing)*2*var(--tw-space-y-reverse));
          margin-block-end: calc(var(--spacing)*2*(1 - var(--tw-space-y-reverse)));
      }

      :where(.space-y-3 > :not(:last-child)) {
          --tw-space-y-reverse: 0;
          margin-block-start: calc(var(--spacing)*3*var(--tw-space-y-reverse));
          margin-block-end: calc(var(--spacing)*3*(1 - var(--tw-space-y-reverse)));
      }

      :where(.space-y-6 > :not(:last-child)) {
          --tw-space-y-reverse: 0;
          margin-block-start: calc(var(--spacing)*6*var(--tw-space-y-reverse));
          margin-block-end: calc(var(--spacing)*6*(1 - var(--tw-space-y-reverse)));
      }

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

      .overflow-hidden {
          overflow: hidden;
      }

      .overflow-x-auto {
          overflow-x: auto;
      }

      .overscroll-contain {
          overscroll-behavior: contain;
      }

      .rounded-1 {
          border-radius: var(--radius);
      }

      .rounded-2 {
          border-radius: calc(var(--radius)*2);
      }

      .rounded-3 {
          border-radius: calc(var(--radius)*3);
      }

      .rounded-3\/2 {
          border-radius: calc(var(--radius)*1.5);
      }

      .rounded-t-\[inherit\] {
          border-top-left-radius: inherit;
          border-top-right-radius: inherit;
      }

      .rounded-b-\[inherit\] {
          border-bottom-left-radius: inherit;
          border-bottom-right-radius: inherit;
      }

      .border {
          border-style: var(--tw-border-style);
          border-width: 1px;
      }

      .border-0 {
          border-style: var(--tw-border-style);
          border-width: 0px;
      }

      .border-t {
          border-top-style: var(--tw-border-style);
          border-top-width: 1px;
      }

      .border-border-concealed {
          border-color: var(--border,var(--grayscale-a3));
      }

      .border-border-default {
          border-color: var(--border,var(--grayscale-a5));
      }

      .border-card-border {
          border-color: var(--card-border,var(--color-border-default));
      }

      .bg-\(color\:--grayscale-a2\) {
          background-color: var(--grayscale-a2);
      }

      .bg-border-concealed {
          background-color: var(--border,var(--grayscale-a3));
      }

      .bg-border-default {
          background-color: var(--border,var(--grayscale-a5));
      }

      .bg-card-background {
          background-color: var(--card-background,var(--grayscale-surface));
      }

      .bg-transparent {
          background-color: rgba(0, 0, 0, 0);
      }

      .mask-grad-y-3 {
          mask-image: linear-gradient(to bottom,transparent 0,#000 calc(var(--spacing)*3),#000 calc(100% - var(--spacing)*3),transparent 100%);
      }

      .object-contain {
          object-fit: contain;
      }

      .p-0 {
          padding: calc(var(--spacing)*0);
      }

      .p-1 {
          padding: calc(var(--spacing)*1);
      }

      .p-2 {
          padding: calc(var(--spacing)*2);
      }

      .p-4 {
          padding: calc(var(--spacing)*4);
      }

      .p-6 {
          padding: calc(var(--spacing)*6);
      }

      .px-2 {
          padding-inline: calc(var(--spacing)*2);
      }

      .px-3 {
          padding-inline: calc(var(--spacing)*3);
      }

      .py-1 {
          padding-block: calc(var(--spacing)*1);
      }

      .py-1\.5 {
          padding-block: calc(var(--spacing)*1.5);
      }

      .py-2 {
          padding-block: calc(var(--spacing)*2);
      }

      .py-4 {
          padding-block: calc(var(--spacing)*4);
      }

      .pl-2 {
          padding-left: calc(var(--spacing)*2);
      }

      .pl-4 {
          padding-left: calc(var(--spacing)*4);
      }

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

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

      .font-mono {
          font-family: var(--font-code);
      }

      .text-base {
          font-size: var(--text-base);
          line-height: var(--tw-leading,var(--text-base--line-height));
      }

      .text-sm {
          font-size: var(--text-sm);
          line-height: var(--tw-leading,var(--text-sm--line-height));
      }

      .text-xs {
          font-size: var(--text-xs);
          line-height: var(--tw-leading,var(--text-xs--line-height));
      }

      .leading-7 {
          --tw-leading: calc(var(--spacing)*7);
          line-height: calc(var(--spacing)*7);
      }

      .font-bold {
          --tw-font-weight: var(--font-weight-semibold);
          font-weight: var(--font-weight-semibold);
      }

      .font-medium {
          --tw-font-weight: var(--font-weight-medium);
          font-weight: var(--font-weight-medium);
      }

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

      .text-balance {
          text-wrap: balance;
      }

      .break-words {
          overflow-wrap: break-word;
      }

      .whitespace-nowrap {
          white-space: nowrap;
      }

      .text-body {
          color: var(--color-black);
      }

          .text-body:is(.dark, .dark *) {
              color: var(--color-white);
          }

      .text-\(color\:--grayscale-11\) {
          color: var(--grayscale-11);
      }

      .text-\(color\:--grayscale-a8\) {
          color: var(--grayscale-a8);
      }

      .text-\(color\:--grayscale-a9\) {
          color: var(--grayscale-a9);
      }

      .text-\(color\:--grayscale-a11\) {
          color: var(--grayscale-a11);
      }

      .text-\(color\:--grayscale-a12\) {
          color: var(--grayscale-a12);
      }

      .antialiased {
          -webkit-font-smoothing: antialiased;
      }

      .opacity-0 {
          opacity: 0;
      }

      .shadow-\[0_2px_2px\], .shadow-\[inset_0_-1px_0_0\] {
          box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
      }

      .shadow-\[inset_0_-1px_0_0\] {
          --tw-shadow: inset 0 -1px 0 0 var(--tw-shadow-color,currentcolor);
      }

      .shadow-card-grayscale {
          --tw-shadow: 0 1px 2px var(--tw-shadow-color,var(--grayscale-a3));
      }

      .shadow-card-grayscale, .shadow-lg {
          box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
      }

      .ring-1 {
          --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);
      }

      .ring-1, .ring-2 {
          box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
      }

      .shadow-border-default {
          --tw-shadow-color: var(--border,var(--grayscale-a5));
      }

      @supports (color:color-mix(in lab,red,red)) {
          .shadow-border-default {
              --tw-shadow-color: color-mix(in oklab,var(--border,var(--grayscale-a5))var(--tw-shadow-alpha),transparent);
          }
      }

      .ring-border-default {
          --tw-ring-color: var(--border,var(--grayscale-a5));
      }

      .backdrop-blur {
          --tw-backdrop-blur: blur(8px);
      }

      .backdrop-blur, .backdrop-blur-lg {
          backdrop-filter: var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);
      }

      .transition-all {
          transition-duration: var(--tw-duration,var(--default-transition-duration));
          transition-property: all;
          transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
      }

      .transition-colors {
          transition-duration: var(--tw-duration,var(--default-transition-duration));
          transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
          transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
      }

      .transition-opacity {
          transition-duration: var(--tw-duration,var(--default-transition-duration));
          transition-property: opacity;
          transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
      }

      .duration-200 {
          --tw-duration: .2s;
          transition-duration: 0.2s;
      }

      .duration-500 {
          --tw-duration: .5s;
          transition-duration: 0.5s;
      }

      .ease-out {
          --tw-ease: var(--ease-out);
          transition-timing-function: var(--ease-out);
      }

      .select-none {
          user-select: none;
      }

      .\[clip\:rect\(0\,0\,0\,0\)\] {
          clip: rect(0px, 0px, 0px, 0px);
      }

      .ring-inset {
          --tw-ring-inset: inset;
      }

      @media (hover: hover) {
          .group-hover\:pointer-events-auto:is(:where(.group):hover *) {
              pointer-events: auto;
          }

          .group-hover\/cb-container\:opacity-100:is(:where(.group\/cb-container):hover *), .group-hover\:opacity-100:is(:where(.group):hover *) {
              opacity: 1;
          }
      }

      .group-data-\[state\=active\]\:border-transparent:is(:where(.group)[data-state="active"] *) {
          border-color: rgba(0, 0, 0, 0);
      }

      .group-data-\[state\=active\]\:bg-\(color\:--accent-10\):is(:where(.group)[data-state="active"] *) {
          background-color: var(--accent-10);
      }

      .group-data-\[state\=active\]\:font-semibold:is(:where(.group)[data-state="active"] *) {
          --tw-font-weight: var(--font-weight-semibold);
          font-weight: var(--font-weight-semibold);
      }

      .group-data-\[state\=active\]\:text-background:is(:where(.group)[data-state="active"] *) {
          color: var(--background);
      }

      .group-data-\[state\=active\]\:shadow-none:is(:where(.group)[data-state="active"] *) {
          --tw-shadow: 0 0 #0000;
          box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
      }

      @media (hover: hover) {
          .group-hover\:group-data-\[state\=inactive\]\:border-\(color\:--accent-a8\):is(:where(.group):hover *):is(:where(.group)[data-state="inactive"] *) {
              border-color: var(--accent-a8);
          }

          .group-hover\:group-data-\[state\=inactive\]\:bg-\(color\:--accent-a3\):is(:where(.group):hover *):is(:where(.group)[data-state="inactive"] *) {
              background-color: var(--accent-a3);
          }

          .group-hover\:group-data-\[state\=inactive\]\:text-\(color\:--accent-a11\):is(:where(.group):hover *):is(:where(.group)[data-state="inactive"] *) {
              color: var(--accent-a11);
          }
      }

      .group-focus-visible\:group-data-\[state\=inactive\]\:border-\(color\:--accent-a8\):is(:where(.group):focus-visible *):is(:where(.group)[data-state="inactive"] *) {
          border-color: var(--accent-a8);
      }

      .group-focus-visible\:group-data-\[state\=inactive\]\:bg-\(color\:--accent-a3\):is(:where(.group):focus-visible *):is(:where(.group)[data-state="inactive"] *) {
          background-color: var(--accent-a3);
      }

      .group-focus-visible\:group-data-\[state\=inactive\]\:text-\(color\:--accent-a11\):is(:where(.group):focus-visible *):is(:where(.group)[data-state="inactive"] *) {
          color: var(--accent-a11);
      }

      .before\:absolute::before {
          content: var(--tw-content);
          position: absolute;
      }

      .before\:top-2::before {
          content: var(--tw-content);
          top: calc(var(--spacing)*2);
      }

      .before\:bottom-2::before {
          bottom: calc(var(--spacing)*2);
          content: var(--tw-content);
      }

      .before\:left-0::before {
          content: var(--tw-content);
          left: calc(var(--spacing)*0);
      }

      .before\:border-l::before {
          border-left-style: var(--tw-border-style);
          content: var(--tw-content);
          border-left-width: 1px;
      }

      .before\:border-border-default::before {
          border-color: var(--border,var(--grayscale-a5));
          content: var(--tw-content);
      }

      .before\:content-\[\'\'\]::before {
          --tw-content: "";
          content: var(--tw-content);
      }

      .focus-within\:pointer-events-auto:focus-within {
          pointer-events: auto;
      }

      .focus-within\:opacity-100:focus-within {
          opacity: 1;
      }

      @media (hover: hover) {
          .hover\:bg-\(color\:--accent-a3\):hover {
              background-color: var(--accent-a3);
          }

          .hover\:bg-\(color\:--grayscale-a4\):hover {
              background-color: var(--grayscale-a4);
          }

          .hover\:text-\(color\:--accent\):hover {
              color: var(--accent);
          }

          .hover\:text-\(color\:--accent-11\):hover {
              color: var(--accent-11);
          }

          .hover\:text-\(color\:--accent-12\):hover {
              color: var(--accent-12);
          }

          .hover\:text-\(color\:--grayscale-12\):hover {
              color: var(--grayscale-12);
          }

          .hover\:transition-none:hover {
              transition-property: none;
          }
      }

      .focus-visible\:text-\(color\:--accent\):focus-visible {
          color: var(--accent);
      }

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

      .focus-visible\:ring-\(color\:--accent\):focus-visible {
          --tw-ring-color: var(--accent);
      }

      .focus-visible\:outline-none:focus-visible {
          --tw-outline-style: none;
          outline-style: none;
      }

      .disabled\:pointer-events-none:disabled {
          pointer-events: none;
      }

      .disabled\:opacity-50:disabled {
          opacity: 0.5;
      }

      .data-\[state\=active\]\:text-\(color\:--accent-a11\)[data-state="active"] {
          color: var(--accent-a11);
      }

      .data-\[state\=inactive\]\:text-\(color\:--grayscale-a11\)[data-state="inactive"] {
          color: var(--grayscale-a11);
      }

      @media not all and (min-width: 48rem) {
          .max-md\:\!max-h-8 {
              max-height: calc(var(--spacing)*8) !important;
          }
      }

      @media (min-width: 40rem) {
          .sm\:block {
              display: block;
          }

          .sm\:grid-cols-2 {
              grid-template-columns: repeat(2, minmax(0px, 1fr));
          }

          .sm\:gap-4 {
              gap: calc(var(--spacing)*4);
          }
      }

      @media (min-width: 64rem) {
          .lg\:flex {
              display: flex;
          }

          .lg\:hidden {
              display: none;
          }

          .lg\:min-h-9 {
              min-height: calc(var(--spacing)*9);
          }

          .lg\:items-start {
              align-items: flex-start;
          }

          .lg\:px-1 {
              padding-inline: calc(var(--spacing)*1);
          }

          .lg\:px-3 {
              padding-inline: calc(var(--spacing)*3);
          }

          .lg\:text-sm {
              font-size: var(--text-sm);
              line-height: var(--tw-leading,var(--text-sm--line-height));
          }
      }

      @media (pointer: coarse) {
          .pointer-coarse\:hidden {
              display: none;
          }

          .pointer-coarse\:size-9 {
              width: calc(var(--spacing)*9);
          }

          .pointer-coarse\:h-9, .pointer-coarse\:size-9 {
              height: calc(var(--spacing)*9);
          }
      }

      .\[\&_svg\]\:pointer-events-none svg {
          pointer-events: none;
      }

      .\[\&_svg\]\:size-4 svg, .\[\&_svg\]\:size-icon svg {
          height: calc(var(--spacing)*4);
          width: calc(var(--spacing)*4);
      }

      .\[\&_svg\]\:shrink-0 svg {
          flex-shrink: 0;
      }

      .\[\&\>\*\]\:flex > * {
          display: flex;
      }

      :where(.\[\&\>div\]\:space-y-6 > div > :not(:last-child)) {
          --tw-space-y-reverse: 0;
          margin-block-start: calc(var(--spacing)*6*var(--tw-space-y-reverse));
          margin-block-end: calc(var(--spacing)*6*(1 - var(--tw-space-y-reverse)));
      }
  }

  :root {
      --black-a1: #0000000d;
      --black-a2: #0000001a;
      --black-a3: #00000026;
      --black-a4: #0003;
      --black-a5: #0000004d;
      --black-a6: #0006;
      --black-a7: #00000080;
      --black-a8: #0009;
      --black-a9: #000000b3;
      --black-a10: #000c;
      --black-a11: #000000e6;
      --black-a12: #000000f2;
      --white-a1: #ffffff0d;
      --white-a2: #ffffff1a;
      --white-a3: #ffffff26;
      --white-a4: #fff3;
      --white-a5: #ffffff4d;
      --white-a6: #fff6;
      --white-a7: #ffffff80;
      --white-a8: #fff9;
      --white-a9: #ffffffb3;
      --white-a10: #fffc;
      --white-a11: #ffffffe6;
      --white-a12: #fffffff2;
  }

  .light, .light-theme, :root {
      --gray-1: #fcfcfc;
      --gray-2: #f9f9f9;
      --gray-3: #f0f0f0;
      --gray-4: #e8e8e8;
      --gray-5: #e0e0e0;
      --gray-6: #d9d9d9;
      --gray-7: #cecece;
      --gray-8: #bbb;
      --gray-9: #8d8d8d;
      --gray-10: #838383;
      --gray-11: #646464;
      --gray-12: #202020;
      --gray-a1: #00000003;
      --gray-a2: #00000006;
      --gray-a3: #0000000f;
      --gray-a4: #00000017;
      --gray-a5: #0000001f;
      --gray-a6: #00000026;
      --gray-a7: #00000031;
      --gray-a8: #0004;
      --gray-a9: #00000072;
      --gray-a10: #0000007c;
      --gray-a11: #0000009b;
      --gray-a12: #000000df;
  }

  .dark, .dark-theme {
      --gray-1: #111;
      --gray-2: #191919;
      --gray-3: #222;
      --gray-4: #2a2a2a;
      --gray-5: #313131;
      --gray-6: #3a3a3a;
      --gray-7: #484848;
      --gray-8: #606060;
      --gray-9: #6e6e6e;
      --gray-10: #7b7b7b;
      --gray-11: #b4b4b4;
      --gray-12: #eee;
      --gray-a1: #0000;
      --gray-a2: #ffffff09;
      --gray-a3: #ffffff12;
      --gray-a4: #ffffff1b;
      --gray-a5: #fff2;
      --gray-a6: #ffffff2c;
      --gray-a7: #ffffff3b;
      --gray-a8: #fff5;
      --gray-a9: #ffffff64;
      --gray-a10: #ffffff72;
      --gray-a11: #ffffffaf;
      --gray-a12: #ffffffed;
  }

  .light, .light-theme, :root {
      --mauve-1: #fdfcfd;
      --mauve-9: #8e8c99;
      --mauve-10: #84828e;
      --mauve-11: #65636d;
      --mauve-12: #211f26;
      --mauve-a1: #55005503;
      --mauve-a2: #2b005506;
      --mauve-a3: #30004010;
      --mauve-a4: #20003618;
      --mauve-a5: #20003820;
      --mauve-a6: #14003527;
      --mauve-a9: #05001d73;
      --mauve-a10: #0500197d;
      --mauve-a11: #0400119c;
      --mauve-a12: #020008e0;
  }

  .dark, .dark-theme {
      --mauve-1: #121113;
      --mauve-9: #6f6d78;
      --mauve-10: #7c7a85;
      --mauve-11: #b5b2bc;
      --mauve-12: #eeeef0;
      --mauve-a1: #0000;
      --mauve-a2: #f5f4f609;
      --mauve-a3: #ebeaf814;
      --mauve-a4: #eee5f81d;
      --mauve-a5: #efe6fe25;
      --mauve-a6: #f1e6fd30;
      --mauve-a9: #eae6fd6e;
      --mauve-a10: #ece9fd7c;
      --mauve-a11: #f5f1ffb7;
      --mauve-a12: #fdfdffef;
  }

  .light, .light-theme, :root {
      --slate-1: #fcfcfd;
      --slate-9: #8b8d98;
      --slate-10: #80838d;
      --slate-11: #60646c;
      --slate-12: #1c2024;
      --slate-a1: #00005503;
      --slate-a2: #00005506;
      --slate-a3: #0000330f;
      --slate-a4: #00002d17;
      --slate-a5: #0009321f;
      --slate-a6: #00002f26;
      --slate-a9: #00051d74;
      --slate-a10: #00071b7f;
      --slate-a11: #0007149f;
      --slate-a12: #000509e3;
  }

  .dark, .dark-theme {
      --slate-1: #111113;
      --slate-9: #696e77;
      --slate-10: #777b84;
      --slate-11: #b0b4ba;
      --slate-12: #edeef0;
      --slate-a1: #0000;
      --slate-a2: #d8f4f609;
      --slate-a3: #ddeaf814;
      --slate-a4: #d3edf81d;
      --slate-a5: #d9edfe25;
      --slate-a6: #d6ebfd30;
      --slate-a9: #dfebfd6d;
      --slate-a10: #e5edfd7b;
      --slate-a11: #f1f7feb5;
      --slate-a12: #fcfdffef;
  }

  .light, .light-theme, :root {
      --sage-1: #fbfdfc;
      --sage-9: #868e8b;
      --sage-10: #7c8481;
      --sage-11: #5f6563;
      --sage-12: #1a211e;
      --sage-a1: #00804004;
      --sage-a2: #00402008;
      --sage-a3: #002d1e11;
      --sage-a4: #001f1519;
      --sage-a5: #00180820;
      --sage-a6: #00140d28;
      --sage-a9: #00110b79;
      --sage-a10: #00100a83;
      --sage-a11: #000a07a0;
      --sage-a12: #000805e5;
  }

  .dark, .dark-theme {
      --sage-1: #101211;
      --sage-9: #63706b;
      --sage-10: #717d79;
      --sage-11: #adb5b2;
      --sage-12: #eceeed;
      --sage-a1: #0000;
      --sage-a2: #f0f2f108;
      --sage-a3: #f3f5f412;
      --sage-a4: #f2fefd1a;
      --sage-a5: #f1fbfa22;
      --sage-a6: #edfbf42d;
      --sage-a9: #dffdf266;
      --sage-a10: #e5fdf674;
      --sage-a11: #f4fefbb0;
      --sage-a12: #fdfffeed;
  }

  .light, .light-theme, :root {
      --olive-1: #fcfdfc;
      --olive-9: #898e87;
      --olive-10: #7f847d;
      --olive-11: #60655f;
      --olive-12: #1d211c;
      --olive-a1: #00550003;
      --olive-a2: #00490007;
      --olive-a3: #00200010;
      --olive-a4: #00160018;
      --olive-a5: #00180020;
      --olive-a6: #00140028;
      --olive-a9: #050f0078;
      --olive-a10: #040e0082;
      --olive-a11: #020a00a0;
      --olive-a12: #010600e3;
  }

  .dark, .dark-theme {
      --olive-1: #111210;
      --olive-9: #687066;
      --olive-10: #767d74;
      --olive-11: #afb5ad;
      --olive-12: #eceeec;
      --olive-a1: #0000;
      --olive-a2: #f1f2f008;
      --olive-a3: #f4f5f312;
      --olive-a4: #f3fef21a;
      --olive-a5: #f2fbf122;
      --olive-a6: #f4faed2c;
      --olive-a9: #ebfde766;
      --olive-a10: #f0fdec74;
      --olive-a11: #f6fef4b0;
      --olive-a12: #fdfffded;
  }

  .light, .light-theme, :root {
      --sand-1: #fdfdfc;
      --sand-9: #8d8d86;
      --sand-10: #82827c;
      --sand-11: #63635e;
      --sand-12: #21201c;
      --sand-a1: #55550003;
      --sand-a2: #25250007;
      --sand-a3: #20100010;
      --sand-a4: #1f150019;
      --sand-a5: #1f180021;
      --sand-a6: #19130029;
      --sand-a9: #0f0f0079;
      --sand-a10: #0c0c0083;
      --sand-a11: #080800a1;
      --sand-a12: #060500e3;
  }

  .dark, .dark-theme {
      --sand-1: #111110;
      --sand-9: #6f6d66;
      --sand-10: #7c7b74;
      --sand-11: #b5b3ad;
      --sand-12: #eeeeec;
      --sand-a1: #0000;
      --sand-a2: #f4f4f309;
      --sand-a3: #f6f6f513;
      --sand-a4: #fefef31b;
      --sand-a5: #fbfbeb23;
      --sand-a6: #fffaed2d;
      --sand-a9: #fffae965;
      --sand-a10: #fffdee73;
      --sand-a11: #fffcf4b0;
      --sand-a12: #fffffded;
  }

  .light, .light-theme, :root {
      --tomato-1: #fffcfc;
      --tomato-9: #e54d2e;
      --tomato-10: #dd4425;
      --tomato-11: #d13415;
      --tomato-12: #5c271f;
      --tomato-a1: #ff000003;
      --tomato-a2: #ff200008;
      --tomato-a3: #f52b0018;
      --tomato-a4: #ff35002c;
      --tomato-a5: #ff2e003d;
      --tomato-a6: #f92d0050;
      --tomato-a9: #df2600d1;
      --tomato-a10: #d72400da;
      --tomato-a11: #cd2200ea;
      --tomato-a12: #460900e0;
  }

  .dark, .dark-theme {
      --tomato-1: #181111;
      --tomato-9: #e54d2e;
      --tomato-10: #ec6142;
      --tomato-11: #ff977d;
      --tomato-12: #fbd3cb;
      --tomato-a1: #f1121208;
      --tomato-a2: #ff55330f;
      --tomato-a3: #ff35232b;
      --tomato-a4: #fd201142;
      --tomato-a5: #fe332153;
      --tomato-a6: #ff4f3864;
      --tomato-a9: #fe5431e4;
      --tomato-a10: #ff6847eb;
      --tomato-a11: #ff977d;
      --tomato-a12: #ffd6cefb;
  }

  .light, .light-theme, :root {
      --red-1: #fffcfc;
      --red-9: #e5484d;
      --red-10: #dc3e42;
      --red-11: #ce2c31;
      --red-12: #641723;
      --red-a1: #ff000003;
      --red-a2: #ff000008;
      --red-a3: #f3000d14;
      --red-a4: #ff000824;
      --red-a5: #ff000632;
      --red-a6: #f8000442;
      --red-a9: #db0007b7;
      --red-a10: #d10005c1;
      --red-a11: #c40006d3;
      --red-a12: #55000de8;
  }

  .dark, .dark-theme {
      --red-1: #191111;
      --red-9: #e5484d;
      --red-10: #ec5d5e;
      --red-11: #ff9592;
      --red-12: #ffd1d9;
      --red-a1: #f4121209;
      --red-a2: #f22f3e11;
      --red-a3: #ff173f2d;
      --red-a4: #fe0a3b44;
      --red-a5: #ff204756;
      --red-a6: #ff3e5668;
      --red-a9: #fe4e54e4;
      --red-a10: #ff6465eb;
      --red-a11: #ff9592;
      --red-a12: #ffd1d9;
  }

  .light, .light-theme, :root {
      --ruby-1: #fffcfd;
      --ruby-9: #e54666;
      --ruby-10: #dc3b5d;
      --ruby-11: #ca244d;
      --ruby-12: #64172b;
      --ruby-a1: #ff005503;
      --ruby-a2: #ff002008;
      --ruby-a3: #f3002515;
      --ruby-a4: #ff002523;
      --ruby-a5: #ff002a31;
      --ruby-a6: #e4002440;
      --ruby-a9: #db002cb9;
      --ruby-a10: #d2002cc4;
      --ruby-a11: #c10030db;
      --ruby-a12: #550016e8;
  }

  .dark, .dark-theme {
      --ruby-1: #191113;
      --ruby-9: #e54666;
      --ruby-10: #ec5a72;
      --ruby-11: #ff949d;
      --ruby-12: #fed2e1;
      --ruby-a1: #f4124a09;
      --ruby-a2: #fe5a7f0e;
      --ruby-a3: #ff235d2c;
      --ruby-a4: #fd195e42;
      --ruby-a5: #fe2d6b53;
      --ruby-a6: #ff447665;
      --ruby-a9: #fe4c70e4;
      --ruby-a10: #ff617beb;
      --ruby-a11: #ff949d;
      --ruby-a12: #ffd3e2;
  }

  .light, .light-theme, :root {
      --crimson-1: #fffcfd;
      --crimson-9: #e93d82;
      --crimson-10: #df3478;
      --crimson-11: #cb1d63;
      --crimson-12: #621639;
      --crimson-a1: #ff005503;
      --crimson-a2: #e0004008;
      --crimson-a3: #ff005216;
      --crimson-a4: #f8005123;
      --crimson-a5: #e5004f31;
      --crimson-a6: #d0004b41;
      --crimson-a9: #e2005bc2;
      --crimson-a10: #d70056cb;
      --crimson-a11: #c4004fe2;
      --crimson-a12: #530026e9;
  }

  .dark, .dark-theme {
      --crimson-1: #191114;
      --crimson-9: #e93d82;
      --crimson-10: #ee518a;
      --crimson-11: #ff92ad;
      --crimson-12: #fdd3e8;
      --crimson-a1: #f4126709;
      --crimson-a2: #f22f7a11;
      --crimson-a3: #fe2a8b2a;
      --crimson-a4: #fd158741;
      --crimson-a5: #fd278f51;
      --crimson-a6: #fe459763;
      --crimson-a9: #fe418de8;
      --crimson-a10: #ff5693ed;
      --crimson-a11: #ff92ad;
      --crimson-a12: #ffd5eafd;
  }

  .light, .light-theme, :root {
      --pink-1: #fffcfe;
      --pink-9: #d6409f;
      --pink-10: #cf3897;
      --pink-11: #c2298a;
      --pink-12: #651249;
      --pink-a1: #ff00aa03;
      --pink-a2: #e0008008;
      --pink-a3: #f4008c16;
      --pink-a4: #e2008b23;
      --pink-a5: #d1008331;
      --pink-a6: #c0007840;
      --pink-a9: #c8007fbf;
      --pink-a10: #c2007ac7;
      --pink-a11: #b60074d6;
      --pink-a12: #59003bed;
  }

  .dark, .dark-theme {
      --pink-1: #191117;
      --pink-9: #d6409f;
      --pink-10: #de51a8;
      --pink-11: #ff8dcc;
      --pink-12: #fdd1ea;
      --pink-a1: #f412bc09;
      --pink-a2: #f420bb12;
      --pink-a3: #fe37cc29;
      --pink-a4: #fc1ec43f;
      --pink-a5: #fd35c24e;
      --pink-a6: #fd51c75f;
      --pink-a9: #fe49bcd4;
      --pink-a10: #ff5cc0dc;
      --pink-a11: #ff8dcc;
      --pink-a12: #ffd3ecfd;
  }

  .light, .light-theme, :root {
      --plum-1: #fefcff;
      --plum-9: #ab4aba;
      --plum-10: #a144af;
      --plum-11: #953ea3;
      --plum-12: #53195d;
      --plum-a1: #aa00ff03;
      --plum-a2: #c000c008;
      --plum-a3: #cc00cc14;
      --plum-a4: #c200c921;
      --plum-a5: #b700bd2e;
      --plum-a6: #a400b03d;
      --plum-a9: #89009eb5;
      --plum-a10: #7f0092bb;
      --plum-a11: #730086c1;
      --plum-a12: #40004be6;
  }

  .dark, .dark-theme {
      --plum-1: #181118;
      --plum-9: #ab4aba;
      --plum-10: #b658c4;
      --plum-11: #e796f3;
      --plum-12: #f4d4f4;
      --plum-a1: #f112f108;
      --plum-a2: #f22ff211;
      --plum-a3: #fd4cfd27;
      --plum-a4: #f646ff3a;
      --plum-a5: #f455ff48;
      --plum-a6: #f66dff56;
      --plum-a9: #e961feb6;
      --plum-a10: #ed70ffc0;
      --plum-a11: #f19cfef3;
      --plum-a12: #feddfef4;
  }

  .light, .light-theme, :root {
      --purple-1: #fefcfe;
      --purple-9: #8e4ec6;
      --purple-10: #8347b9;
      --purple-11: #8145b5;
      --purple-12: #402060;
      --purple-a1: #aa00aa03;
      --purple-a2: #8000e008;
      --purple-a3: #8e00f112;
      --purple-a4: #8d00e51d;
      --purple-a5: #8000db2a;
      --purple-a6: #7a01d03b;
      --purple-a9: #5c00adb1;
      --purple-a10: #53009eb8;
      --purple-a11: #52009aba;
      --purple-a12: #250049df;
  }

  .dark, .dark-theme {
      --purple-1: #18111b;
      --purple-9: #8e4ec6;
      --purple-10: #9a5cd0;
      --purple-11: #d19dff;
      --purple-12: #ecd9fa;
      --purple-a1: #b412f90b;
      --purple-a2: #b744f714;
      --purple-a3: #c150ff2d;
      --purple-a4: #bb53fd42;
      --purple-a5: #be5cfd51;
      --purple-a6: #c16dfd61;
      --purple-a9: #b661ffc2;
      --purple-a10: #bc6fffcd;
      --purple-a11: #d19dff;
      --purple-a12: #f1ddfffa;
  }

  .light, .light-theme, :root {
      --violet-1: #fdfcfe;
      --violet-9: #6e56cf;
      --violet-10: #654dc4;
      --violet-11: #6550b9;
      --violet-12: #2f265f;
      --violet-a1: #5500aa03;
      --violet-a2: #4900ff07;
      --violet-a3: #4400ee0f;
      --violet-a4: #4300ff1b;
      --violet-a5: #3600ff26;
      --violet-a6: #3100fb35;
      --violet-a9: #2400b7a9;
      --violet-a10: #2300abb2;
      --violet-a11: #1f0099af;
      --violet-a12: #0b0043d9;
  }

  .dark, .dark-theme {
      --violet-1: #14121f;
      --violet-9: #6e56cf;
      --violet-10: #7d66d9;
      --violet-11: #baa7ff;
      --violet-12: #e2ddfe;
      --violet-a1: #4422ff0f;
      --violet-a2: #853ff916;
      --violet-a3: #8354fe36;
      --violet-a4: #7d51fd50;
      --violet-a5: #845ffd5f;
      --violet-a6: #8f6cfd6d;
      --violet-a9: #8668ffcc;
      --violet-a10: #9176fed7;
      --violet-a11: #baa7ff;
      --violet-a12: #e3deff;
  }

  .light, .light-theme, :root {
      --iris-1: #fdfdff;
      --iris-9: #5b5bd6;
      --iris-10: #5151cd;
      --iris-11: #5753c6;
      --iris-12: #272962;
      --iris-a1: #0000ff02;
      --iris-a2: #0000ff07;
      --iris-a3: #0011ee0f;
      --iris-a4: #000bff19;
      --iris-a5: #000eff25;
      --iris-a6: #000aff34;
      --iris-a9: #0000c0a4;
      --iris-a10: #0000b6ae;
      --iris-a11: #0600abac;
      --iris-a12: #000246d8;
  }

  .dark, .dark-theme {
      --iris-1: #13131e;
      --iris-9: #5b5bd6;
      --iris-10: #6e6ade;
      --iris-11: #b1a9ff;
      --iris-12: #e0dffe;
      --iris-a1: #3636fe0e;
      --iris-a2: #564bf916;
      --iris-a3: #525bff3b;
      --iris-a4: #4d58ff5a;
      --iris-a5: #5b62fd6b;
      --iris-a6: #6d6ffd7a;
      --iris-a9: #6a6afed4;
      --iris-a10: #7d79ffdc;
      --iris-a11: #b1a9ff;
      --iris-a12: #e1e0ff;
  }

  .light, .light-theme, :root {
      --indigo-1: #fdfdfe;
      --indigo-9: #3e63dd;
      --indigo-10: #3358d4;
      --indigo-11: #3a5bc7;
      --indigo-12: #1f2d5c;
      --indigo-a1: #00008002;
      --indigo-a2: #0040ff08;
      --indigo-a3: #0047f112;
      --indigo-a4: #0044ff1e;
      --indigo-a5: #0044ff2d;
      --indigo-a6: #003eff3e;
      --indigo-a9: #0031d2c1;
      --indigo-a10: #002ec9cc;
      --indigo-a11: #002bb7c5;
      --indigo-a12: #001046e0;
  }

  .dark, .dark-theme {
      --indigo-1: #11131f;
      --indigo-9: #3e63dd;
      --indigo-10: #5472e4;
      --indigo-11: #9eb1ff;
      --indigo-12: #d6e1ff;
      --indigo-a1: #1133ff0f;
      --indigo-a2: #3354fa17;
      --indigo-a3: #2f62ff3c;
      --indigo-a4: #3566ff57;
      --indigo-a5: #4171fd6b;
      --indigo-a6: #5178fd7c;
      --indigo-a9: #4671ffdb;
      --indigo-a10: #5c7efee3;
      --indigo-a11: #9eb1ff;
      --indigo-a12: #d6e1ff;
  }

  .light, .light-theme, :root {
      --blue-1: #fbfdff;
      --blue-9: #0090ff;
      --blue-10: #0588f0;
      --blue-11: #0d74ce;
      --blue-12: #113264;
      --blue-a1: #0080ff04;
      --blue-a2: #008cff0b;
      --blue-a3: #008ff519;
      --blue-a4: #009eff2a;
      --blue-a5: #0093ff3d;
      --blue-a6: #0088f653;
      --blue-a9: #0090ff;
      --blue-a10: #0086f0fa;
      --blue-a11: #006dcbf2;
      --blue-a12: #002359ee;
  }

  .dark, .dark-theme {
      --blue-1: #0d1520;
      --blue-9: #0090ff;
      --blue-10: #3b9eff;
      --blue-11: #70b8ff;
      --blue-12: #c2e6ff;
      --blue-a1: #004df211;
      --blue-a2: #1166fb18;
      --blue-a3: #0077ff3a;
      --blue-a4: #0075ff57;
      --blue-a5: #0081fd6b;
      --blue-a6: #0f89fd7f;
      --blue-a9: #0090ff;
      --blue-a10: #3b9eff;
      --blue-a11: #70b8ff;
      --blue-a12: #c2e6ff;
  }

  .light, .light-theme, :root {
      --cyan-1: #fafdfe;
      --cyan-9: #00a2c7;
      --cyan-10: #0797b9;
      --cyan-11: #107d98;
      --cyan-12: #0d3c48;
      --cyan-a1: #0099cc05;
      --cyan-a2: #009db10d;
      --cyan-a3: #00c2d121;
      --cyan-a4: #00bcd435;
      --cyan-a5: #01b4cc4a;
      --cyan-a6: #00a7c162;
      --cyan-a9: #00a2c7;
      --cyan-a10: #0094b7f8;
      --cyan-a11: #007491ef;
      --cyan-a12: #00323ef2;
  }

  .dark, .dark-theme {
      --cyan-1: #0b161a;
      --cyan-9: #00a2c7;
      --cyan-10: #23afd0;
      --cyan-11: #4ccce6;
      --cyan-12: #b6ecf7;
      --cyan-a1: #0091f70a;
      --cyan-a2: #02a7f211;
      --cyan-a3: #00befd28;
      --cyan-a4: #00baff3b;
      --cyan-a5: #00befd4d;
      --cyan-a6: #00c7fd5e;
      --cyan-a9: #00cfffc3;
      --cyan-a10: #28d6ffcd;
      --cyan-a11: #52e1fee5;
      --cyan-a12: #bbf3fef7;
  }

  .light, .light-theme, :root {
      --teal-1: #fafefd;
      --teal-9: #12a594;
      --teal-10: #0d9b8a;
      --teal-11: #008573;
      --teal-12: #0d3d38;
      --teal-a1: #00cc9905;
      --teal-a2: #00aa800c;
      --teal-a3: #00c69d1f;
      --teal-a4: #00c39633;
      --teal-a5: #00b49047;
      --teal-a6: #00a6855e;
      --teal-a9: #009e8ced;
      --teal-a10: #009684f2;
      --teal-a11: #008573;
      --teal-a12: #00332df2;
  }

  .dark, .dark-theme {
      --teal-1: #0d1514;
      --teal-9: #12a594;
      --teal-10: #0eb39e;
      --teal-11: #0bd8b6;
      --teal-12: #adf0dd;
      --teal-a1: #00deab05;
      --teal-a2: #12fbe60c;
      --teal-a3: #00ffe61e;
      --teal-a4: #00ffe92d;
      --teal-a5: #00ffea3b;
      --teal-a6: #1cffe84b;
      --teal-a9: #13ffe49f;
      --teal-a10: #0dffe0ae;
      --teal-a11: #0afed5d6;
      --teal-a12: #b8ffebef;
  }

  .light, .light-theme, :root {
      --jade-1: #fbfefd;
      --jade-9: #29a383;
      --jade-10: #26997b;
      --jade-11: #208368;
      --jade-12: #1d3b31;
      --jade-a1: #00c08004;
      --jade-a2: #00a3460b;
      --jade-a3: #00ae4819;
      --jade-a4: #00a85129;
      --jade-a5: #00a2553c;
      --jade-a6: #009a5753;
      --jade-a9: #00916bd6;
      --jade-a10: #008764d9;
      --jade-a11: #007152df;
      --jade-a12: #002217e2;
  }

  .dark, .dark-theme {
      --jade-1: #0d1512;
      --jade-9: #29a383;
      --jade-10: #27b08b;
      --jade-11: #1fd8a4;
      --jade-12: #adf0d4;
      --jade-a1: #00de4505;
      --jade-a2: #27fba60c;
      --jade-a3: #02f99920;
      --jade-a4: #00ffaa2d;
      --jade-a5: #11ffb63b;
      --jade-a6: #34ffc24b;
      --jade-a9: #38feca9d;
      --jade-a10: #31fec7ab;
      --jade-a11: #21fec0d6;
      --jade-a12: #b8ffe1ef;
  }

  .light, .light-theme, :root {
      --green-1: #fbfefc;
      --green-9: #30a46c;
      --green-10: #2b9a66;
      --green-11: #218358;
      --green-12: #193b2d;
      --green-a1: #00c04004;
      --green-a2: #00a32f0b;
      --green-a3: #00a43319;
      --green-a4: #00a83829;
      --green-a5: #019c393b;
      --green-a6: #00963c52;
      --green-a9: #008f4acf;
      --green-a10: #008647d4;
      --green-a11: #00713fde;
      --green-a12: #002616e6;
  }

  .dark, .dark-theme {
      --green-1: #0e1512;
      --green-9: #30a46c;
      --green-10: #33b074;
      --green-11: #3dd68c;
      --green-12: #b1f1cb;
      --green-a1: #00de4505;
      --green-a2: #29f99d0b;
      --green-a3: #22ff991e;
      --green-a4: #11ff992d;
      --green-a5: #2bffa23c;
      --green-a6: #44ffaa4b;
      --green-a9: #44ffa49e;
      --green-a10: #43fea4ab;
      --green-a11: #46fea5d4;
      --green-a12: #bbffd7f0;
  }

  .light, .light-theme, :root {
      --grass-1: #fbfefb;
      --grass-9: #46a758;
      --grass-10: #3e9b4f;
      --grass-11: #2a7e3b;
      --grass-12: #203c25;
      --grass-a1: #00c00004;
      --grass-a2: #0099000a;
      --grass-a3: #00970016;
      --grass-a4: #009f0725;
      --grass-a5: #00930536;
      --grass-a6: #008f0a4d;
      --grass-a9: #008619b9;
      --grass-a10: #007b17c1;
      --grass-a11: #006514d5;
      --grass-a12: #002006df;
  }

  .dark, .dark-theme {
      --grass-1: #0e1511;
      --grass-9: #46a758;
      --grass-10: #53b365;
      --grass-11: #71d083;
      --grass-12: #c2f0c2;
      --grass-a1: #00de1205;
      --grass-a2: #5ef7780a;
      --grass-a3: #70fe8c1b;
      --grass-a4: #57ff802c;
      --grass-a5: #68ff8b3b;
      --grass-a6: #71ff8f4b;
      --grass-a9: #65ff82a1;
      --grass-a10: #72ff8dae;
      --grass-a11: #89ff9fcd;
      --grass-a12: #ceffceef;
  }

  .light, .light-theme, :root {
      --bronze-1: #fdfcfc;
      --bronze-9: #a18072;
      --bronze-10: #957468;
      --bronze-11: #7d5e54;
      --bronze-12: #43302b;
      --bronze-a1: #55000003;
      --bronze-a2: #cc33000a;
      --bronze-a3: #92250015;
      --bronze-a4: #80280020;
      --bronze-a5: #7423002c;
      --bronze-a6: #7324003a;
      --bronze-a9: #551a008d;
      --bronze-a10: #4c150097;
      --bronze-a11: #3d0f00ab;
      --bronze-a12: #1d0600d4;
  }

  .dark, .dark-theme {
      --bronze-1: #141110;
      --bronze-9: #a18072;
      --bronze-10: #ae8c7e;
      --bronze-11: #d4b3a5;
      --bronze-12: #ede0d9;
      --bronze-a1: #d1110004;
      --bronze-a2: #fbbc910c;
      --bronze-a3: #faceb817;
      --bronze-a4: #facdb622;
      --bronze-a5: #ffd2c12d;
      --bronze-a6: #ffd1c03c;
      --bronze-a9: #fec7b09b;
      --bronze-a10: #fecab5a9;
      --bronze-a11: #ffd7c6d1;
      --bronze-a12: #fff1e9ec;
  }

  .light, .light-theme, :root {
      --gold-1: #fdfdfc;
      --gold-9: #978365;
      --gold-10: #8c7a5e;
      --gold-11: #71624b;
      --gold-12: #3b352b;
      --gold-a1: #55550003;
      --gold-a2: #9d8a000d;
      --gold-a3: #75600018;
      --gold-a4: #6b4e0024;
      --gold-a5: #60460030;
      --gold-a6: #64440040;
      --gold-a9: #5332009a;
      --gold-a10: #492d00a1;
      --gold-a11: #362100b4;
      --gold-a12: #130c00d4;
  }

  .dark, .dark-theme {
      --gold-1: #121211;
      --gold-9: #978365;
      --gold-10: #a39073;
      --gold-11: #cbb99f;
      --gold-12: #e8e2d9;
      --gold-a1: #91911102;
      --gold-a2: #f9e29d0b;
      --gold-a3: #f8ecbb15;
      --gold-a4: #ffeec41e;
      --gold-a5: #feecc22a;
      --gold-a6: #feebcb37;
      --gold-a9: #ffdba690;
      --gold-a10: #fedfb09d;
      --gold-a11: #fee7c6c8;
      --gold-a12: #fef7ede7;
  }

  .light, .light-theme, :root {
      --brown-1: #fefdfc;
      --brown-9: #ad7f58;
      --brown-10: #a07553;
      --brown-11: #815e46;
      --brown-12: #3e332e;
      --brown-a1: #aa550003;
      --brown-a2: #aa550009;
      --brown-a3: #a04b0018;
      --brown-a4: #9b4a0026;
      --brown-a5: #9f4d0035;
      --brown-a6: #a04e0048;
      --brown-a9: #823c00a7;
      --brown-a10: #723300ac;
      --brown-a11: #522100b9;
      --brown-a12: #140600d1;
  }

  .dark, .dark-theme {
      --brown-1: #12110f;
      --brown-9: #ad7f58;
      --brown-10: #b88c67;
      --brown-11: #dbb594;
      --brown-12: #f2e1ca;
      --brown-a1: #91110002;
      --brown-a2: #fba67c0c;
      --brown-a3: #fcb58c19;
      --brown-a4: #fbbb8a24;
      --brown-a5: #fcb88931;
      --brown-a6: #fdba8741;
      --brown-a9: #feb87da8;
      --brown-a10: #ffc18cb3;
      --brown-a11: #fed1aad9;
      --brown-a12: #feecd4f2;
  }

  .light, .light-theme, :root {
      --orange-1: #fefcfb;
      --orange-9: #f76b15;
      --orange-10: #ef5f00;
      --orange-11: #cc4e00;
      --orange-12: #582d1d;
      --orange-a1: #c0400004;
      --orange-a2: #ff8e0012;
      --orange-a3: #ff9c0029;
      --orange-a4: #ff91014a;
      --orange-a5: #ff8b0065;
      --orange-a6: #ff81007d;
      --orange-a9: #f65e00ea;
      --orange-a10: #ef5f00;
      --orange-a11: #cc4e00;
      --orange-a12: #431200e2;
  }

  .dark, .dark-theme {
      --orange-1: #17120e;
      --orange-9: #f76b15;
      --orange-10: #ff801f;
      --orange-11: #ffa057;
      --orange-12: #ffe0c2;
      --orange-a1: #ec360007;
      --orange-a2: #fe6d000e;
      --orange-a3: #fb6a0025;
      --orange-a4: #ff590039;
      --orange-a5: #ff61004a;
      --orange-a6: #fd75045c;
      --orange-a9: #fe6d15f7;
      --orange-a10: #ff801f;
      --orange-a11: #ffa057;
      --orange-a12: #ffe0c2;
  }

  .light, .light-theme, :root {
      --amber-1: #fefdfb;
      --amber-9: #ffc53d;
      --amber-10: #ffba18;
      --amber-11: #ab6400;
      --amber-12: #4f3422;
      --amber-a1: #c0800004;
      --amber-a2: #f4d10016;
      --amber-a3: #ffde003d;
      --amber-a4: #ffd40063;
      --amber-a5: #f8cf0088;
      --amber-a6: #eab5008c;
      --amber-a9: #ffb300c2;
      --amber-a10: #ffb300e7;
      --amber-a11: #ab6400;
      --amber-a12: #341500dd;
  }

  .dark, .dark-theme {
      --amber-1: #16120c;
      --amber-9: #ffc53d;
      --amber-10: #ffd60a;
      --amber-11: #ffca16;
      --amber-12: #ffe7b3;
      --amber-a1: #e63c0006;
      --amber-a2: #fd9b000d;
      --amber-a3: #fa820022;
      --amber-a4: #fc820032;
      --amber-a5: #fd8b0041;
      --amber-a6: #fd9b0051;
      --amber-a9: #ffc53d;
      --amber-a10: #ffd60a;
      --amber-a11: #ffca16;
      --amber-a12: #ffe7b3;
  }

  .light, .light-theme, :root {
      --yellow-1: #fdfdf9;
      --yellow-9: #ffe629;
      --yellow-10: #ffdc00;
      --yellow-11: #9e6c00;
      --yellow-12: #473b1f;
      --yellow-a1: #aaaa0006;
      --yellow-a2: #f4dd0016;
      --yellow-a3: #ffee0047;
      --yellow-a4: #ffe3016b;
      --yellow-a5: #ffd5008f;
      --yellow-a6: #ebbc0097;
      --yellow-a9: #ffe100d6;
      --yellow-a10: #ffdc00;
      --yellow-a11: #9e6c00;
      --yellow-a12: #2e2000e0;
  }

  .dark, .dark-theme {
      --yellow-1: #14120b;
      --yellow-9: #ffe629;
      --yellow-10: #ffff57;
      --yellow-11: #f5e147;
      --yellow-12: #f6eeb4;
      --yellow-a1: #d1510004;
      --yellow-a2: #f9b4000b;
      --yellow-a3: #ffaa001e;
      --yellow-a4: #fdb70028;
      --yellow-a5: #febb0036;
      --yellow-a6: #fec40046;
      --yellow-a9: #ffe629;
      --yellow-a10: #ffff57;
      --yellow-a11: #fee949f5;
      --yellow-a12: #fef6baf6;
  }

  .light, .light-theme, :root {
      --lime-1: #fcfdfa;
      --lime-9: #bdee63;
      --lime-10: #b0e64c;
      --lime-11: #5c7c2f;
      --lime-12: #37401c;
      --lime-a1: #66990005;
      --lime-a2: #6b95000c;
      --lime-a3: #96c80029;
      --lime-a4: #8fc60042;
      --lime-a5: #81bb0059;
      --lime-a6: #72aa006e;
      --lime-a9: #93e4009c;
      --lime-a10: #8fdc00b3;
      --lime-a11: #375f00d0;
      --lime-a12: #1e2900e3;
  }

  .dark, .dark-theme {
      --lime-1: #11130c;
      --lime-9: #bdee63;
      --lime-10: #d4ff70;
      --lime-11: #bde56c;
      --lime-12: #e3f7ba;
      --lime-a1: #11bb0003;
      --lime-a2: #78f7000a;
      --lime-a3: #9bfd4c1a;
      --lime-a4: #a7fe5c29;
      --lime-a5: #affe6537;
      --lime-a6: #b2fe6d46;
      --lime-a9: #caff69ed;
      --lime-a10: #d4ff70;
      --lime-a11: #d1fe77e4;
      --lime-a12: #e9febff7;
  }

  .light, .light-theme, :root {
      --mint-1: #f9fefd;
      --mint-9: #86ead4;
      --mint-10: #7de0cb;
      --mint-11: #027864;
      --mint-12: #16433c;
      --mint-a1: #00d5aa06;
      --mint-a2: #00b18a0d;
      --mint-a3: #00d29e22;
      --mint-a4: #00cc9937;
      --mint-a5: #00c0914c;
      --mint-a6: #00b08663;
      --mint-a9: #00d3a579;
      --mint-a10: #00c39982;
      --mint-a11: #007763fd;
      --mint-a12: #00312ae9;
  }

  .dark, .dark-theme {
      --mint-1: #0e1515;
      --mint-9: #86ead4;
      --mint-10: #a8f5e5;
      --mint-11: #58d5ba;
      --mint-12: #c4f5e1;
      --mint-a1: #00dede05;
      --mint-a2: #00f9f90b;
      --mint-a3: #00fff61d;
      --mint-a4: #00fff42c;
      --mint-a5: #00fff23a;
      --mint-a6: #0effeb4a;
      --mint-a9: #92ffe7e9;
      --mint-a10: #aefeedf5;
      --mint-a11: #67ffded2;
      --mint-a12: #cbfee9f5;
  }

  .light, .light-theme, :root {
      --sky-1: #f9feff;
      --sky-9: #7ce2fe;
      --sky-10: #74daf8;
      --sky-11: #00749e;
      --sky-12: #1d3e56;
      --sky-a1: #00d5ff06;
      --sky-a2: #00a4db0e;
      --sky-a3: #00b3ee1e;
      --sky-a4: #00ace42e;
      --sky-a5: #00a1d841;
      --sky-a6: #0092ca56;
      --sky-a9: #00c7fe83;
      --sky-a10: #00bcf38b;
      --sky-a11: #00749e;
      --sky-a12: #002540e2;
  }

  .dark, .dark-theme {
      --sky-1: #0d141f;
      --sky-9: #7ce2fe;
      --sky-10: #a8eeff;
      --sky-11: #75c7f0;
      --sky-12: #c2f3ff;
      --sky-a1: #0044ff0f;
      --sky-a2: #1171fb18;
      --sky-a3: #1184fc33;
      --sky-a4: #128fff49;
      --sky-a5: #1c9dfd5d;
      --sky-a6: #28a5ff72;
      --sky-a9: #7ce3ff;
      --sky-a10: #a8eeff;
      --sky-a11: #7cd3ffef;
      --sky-a12: #c2f3ff;
  }

  @page {
      size: a4;
      margin: 0px;
  }

  @keyframes collapsible-closed {
      0% {
          height: var(--radix-collapsible-content-height);
          opacity: 1;
      }

      100% {
          opacity: 0;
          height: 0px;
      }
  }

  @keyframes collapsible-open {
      0% {
          opacity: 0;
          height: 0px;
      }

      100% {
          height: var(--radix-collapsible-content-height);
          opacity: 1;
      }
  }

  @keyframes slide-up {
      0% {
          transform: translateY(0px);
      }

      100% {
          transform: translateY(-100%);
      }
  }

  @keyframes slide-down {
      0% {
          transform: translateY(-150%);
      }

      100% {
          transform: translateY(0px);
      }
  }

  :root {
      --radius: .25rem;
      --color-body: var(--color-black);
      --header-height-real: 4rem;
      --card-surface-fallback: var(--background);
  }

  @supports (color:color-mix(in lab,red,red)) {
      :root {
          --card-surface-fallback: color-mix(in srgb,var(--background),#fff 80%);
      }
  }

  .dark {
      --color-body: var(--color-white);
      --card-surface-fallback: var(--background);
  }

  @supports (color:color-mix(in lab,red,red)) {
      .dark {
          --card-surface-fallback: color-mix(in srgb,var(--background),#000 5%);
      }
  }

  @property --mask-left-stop {
      syntax: "<percentage>";
      inherits: false;
      initial-value: 0%;
  }

  @property --mask-right-stop {
      syntax: "<percentage>";
      inherits: false;
      initial-value: 100%;
  }

  :root {
      --page-padding: 1rem;
      --page-margin: calc((100vw - var(--page-width))/2);
      --aside-offset: max(0px,calc(var(--page-margin) - var(--page-padding)));
      --sticky-aside-width: calc(var(--spacing-sidebar-width) + var(--aside-offset));
  }

  @media (min-width: 768px) {
      :root {
          --page-padding: 1.5rem;
      }
  }

  @media (min-width: 1024px) {
      :root {
          --page-padding: 2rem;
      }
  }

  @property --tw-border-spacing-x {
      syntax: "<length>";
      inherits: false;
      initial-value: 0;
  }

  @property --tw-border-spacing-y {
      syntax: "<length>";
      inherits: false;
      initial-value: 0;
  }

  @property --tw-translate-x {
      syntax: "*";
      inherits: false;
      initial-value: 0;
  }

  @property --tw-translate-y {
      syntax: "*";
      inherits: false;
      initial-value: 0;
  }

  @property --tw-translate-z {
      syntax: "*";
      inherits: false;
      initial-value: 0;
  }

  @property --tw-duration {
      syntax: "*";
      inherits: false;
  }

  @property --tw-rotate-x {
      syntax: "*";
      inherits: false;
  }

  @property --tw-rotate-y {
      syntax: "*";
      inherits: false;
  }

  @property --tw-rotate-z {
      syntax: "*";
      inherits: false;
  }

  @property --tw-skew-x {
      syntax: "*";
      inherits: false;
  }

  @property --tw-skew-y {
      syntax: "*";
      inherits: false;
  }

  @property --tw-space-y-reverse {
      syntax: "*";
      inherits: false;
      initial-value: 0;
  }

  @property --tw-space-x-reverse {
      syntax: "*";
      inherits: false;
      initial-value: 0;
  }

  @property --tw-divide-x-reverse {
      syntax: "*";
      inherits: false;
      initial-value: 0;
  }

  @property --tw-border-style {
      syntax: "*";
      inherits: false;
      initial-value: solid;
  }

  @property --tw-divide-y-reverse {
      syntax: "*";
      inherits: false;
      initial-value: 0;
  }

  @property --tw-gradient-position {
      syntax: "*";
      inherits: false;
  }

  @property --tw-gradient-from {
      syntax: "<color>";
      inherits: false;
      initial-value: #0000;
  }

  @property --tw-gradient-via {
      syntax: "<color>";
      inherits: false;
      initial-value: #0000;
  }

  @property --tw-gradient-to {
      syntax: "<color>";
      inherits: false;
      initial-value: #0000;
  }

  @property --tw-gradient-stops {
      syntax: "*";
      inherits: false;
  }

  @property --tw-gradient-via-stops {
      syntax: "*";
      inherits: false;
  }

  @property --tw-gradient-from-position {
      syntax: "<length-percentage>";
      inherits: false;
      initial-value: 0%;
  }

  @property --tw-gradient-via-position {
      syntax: "<length-percentage>";
      inherits: false;
      initial-value: 50%;
  }

  @property --tw-gradient-to-position {
      syntax: "<length-percentage>";
      inherits: false;
      initial-value: 100%;
  }

  @property --tw-leading {
      syntax: "*";
      inherits: false;
  }

  @property --tw-font-weight {
      syntax: "*";
      inherits: false;
  }

  @property --tw-tracking {
      syntax: "*";
      inherits: false;
  }

  @property --tw-shadow {
      syntax: "*";
      inherits: false;
      initial-value: 0 0 #0000;
  }

  @property --tw-shadow-color {
      syntax: "*";
      inherits: false;
  }

  @property --tw-shadow-alpha {
      syntax: "<percentage>";
      inherits: false;
      initial-value: 100%;
  }

  @property --tw-inset-shadow {
      syntax: "*";
      inherits: false;
      initial-value: 0 0 #0000;
  }

  @property --tw-inset-shadow-color {
      syntax: "*";
      inherits: false;
  }

  @property --tw-inset-shadow-alpha {
      syntax: "<percentage>";
      inherits: false;
      initial-value: 100%;
  }

  @property --tw-ring-color {
      syntax: "*";
      inherits: false;
  }

  @property --tw-ring-shadow {
      syntax: "*";
      inherits: false;
      initial-value: 0 0 #0000;
  }

  @property --tw-inset-ring-color {
      syntax: "*";
      inherits: false;
  }

  @property --tw-inset-ring-shadow {
      syntax: "*";
      inherits: false;
      initial-value: 0 0 #0000;
  }

  @property --tw-ring-inset {
      syntax: "*";
      inherits: false;
  }

  @property --tw-ring-offset-width {
      syntax: "<length>";
      inherits: false;
      initial-value: 0;
  }

  @property --tw-ring-offset-color {
      syntax: "*";
      inherits: false;
      initial-value: #fff;
  }

  @property --tw-ring-offset-shadow {
      syntax: "*";
      inherits: false;
      initial-value: 0 0 #0000;
  }

  @property --tw-outline-style {
      syntax: "*";
      inherits: false;
      initial-value: solid;
  }

  @property --tw-blur {
      syntax: "*";
      inherits: false;
  }

  @property --tw-brightness {
      syntax: "*";
      inherits: false;
  }

  @property --tw-contrast {
      syntax: "*";
      inherits: false;
  }

  @property --tw-grayscale {
      syntax: "*";
      inherits: false;
  }

  @property --tw-hue-rotate {
      syntax: "*";
      inherits: false;
  }

  @property --tw-invert {
      syntax: "*";
      inherits: false;
  }

  @property --tw-opacity {
      syntax: "*";
      inherits: false;
  }

  @property --tw-saturate {
      syntax: "*";
      inherits: false;
  }

  @property --tw-sepia {
      syntax: "*";
      inherits: false;
  }

  @property --tw-drop-shadow {
      syntax: "*";
      inherits: false;
  }

  @property --tw-drop-shadow-color {
      syntax: "*";
      inherits: false;
  }

  @property --tw-drop-shadow-alpha {
      syntax: "<percentage>";
      inherits: false;
      initial-value: 100%;
  }

  @property --tw-drop-shadow-size {
      syntax: "*";
      inherits: false;
  }

  @property --tw-backdrop-blur {
      syntax: "*";
      inherits: false;
  }

  @property --tw-backdrop-brightness {
      syntax: "*";
      inherits: false;
  }

  @property --tw-backdrop-contrast {
      syntax: "*";
      inherits: false;
  }

  @property --tw-backdrop-grayscale {
      syntax: "*";
      inherits: false;
  }

  @property --tw-backdrop-hue-rotate {
      syntax: "*";
      inherits: false;
  }

  @property --tw-backdrop-invert {
      syntax: "*";
      inherits: false;
  }

  @property --tw-backdrop-opacity {
      syntax: "*";
      inherits: false;
  }

  @property --tw-backdrop-saturate {
      syntax: "*";
      inherits: false;
  }

  @property --tw-backdrop-sepia {
      syntax: "*";
      inherits: false;
  }

  @property --tw-ease {
      syntax: "*";
      inherits: false;
  }

  @property --tw-content {
      syntax: "*";
      inherits: false;
      initial-value: "";
  }

  @property --tw-scale-x {
      syntax: "*";
      inherits: false;
      initial-value: 1;
  }

  @property --tw-scale-y {
      syntax: "*";
      inherits: false;
      initial-value: 1;
  }

  @property --tw-scale-z {
      syntax: "*";
      inherits: false;
      initial-value: 1;
  }

  @property --tw-ordinal {
      syntax: "*";
      inherits: false;
  }

  @property --tw-slashed-zero {
      syntax: "*";
      inherits: false;
  }

  @property --tw-numeric-figure {
      syntax: "*";
      inherits: false;
  }

  @property --tw-numeric-spacing {
      syntax: "*";
      inherits: false;
  }

  @property --tw-numeric-fraction {
      syntax: "*";
      inherits: false;
  }

  @keyframes spin {
      100% {
          transform: rotate(1turn);
      }
  }

  @keyframes ping {
      75%, 100% {
          opacity: 0;
          transform: scale(2);
      }
  }

  @keyframes pulse {
      50% {
          opacity: 0.5;
      }
  }

  @keyframes slide-down-and-fade {
      0% {
          opacity: 0;
          transform: translateY(-2px);
      }

      100% {
          opacity: 1;
          transform: translateY(0px);
      }
  }

  @keyframes slide-left-and-fade {
      0% {
          opacity: 0;
          transform: translate(2px);
      }

      100% {
          opacity: 1;
          transform: translate(0px);
      }
  }

  @keyframes slide-up-and-fade {
      0% {
          opacity: 0;
          transform: translateY(2px);
      }

      100% {
          opacity: 1;
          transform: translateY(0px);
      }
  }

  @keyframes slide-right-and-fade {
      0% {
          opacity: 0;
          transform: translate(-2px);
      }

      100% {
          opacity: 1;
          transform: translate(0px);
      }
  }

  @keyframes shine {
      0% {
          opacity: 0.5;
          transform: translate(-100px) skew(-15deg);
      }

      33% {
          opacity: 0.6;
          transform: translate(300px) skew(-15deg);
      }

      100% {
          opacity: 0.6;
          transform: translate(300px) skew(-15deg);
      }
  }

  @keyframes thumb-rock {
      0% {
          transform: rotate(0deg);
      }

      30% {
          transform: rotate(15deg);
      }

      80% {
          transform: rotate(-10deg);
      }

      100% {
          transform: rotate(0deg);
      }
  }

  @keyframes overlay-show {
      0% {
          backdrop-filter: blur();
          opacity: 0;
      }

      100% {
          backdrop-filter: blur(4px);
          opacity: 1;
      }
  }

  @keyframes dropdown-expand {
      0% {
          opacity: 0;
          transform: scale(0.8);
      }

      100% {
          opacity: 1;
          transform: scale(1);
      }
  }

  [data-radix-scroll-area-viewport] {
      scrollbar-width: none;
  }

      [data-radix-scroll-area-viewport]::-webkit-scrollbar {
          display: none;
      }

  :root {
      --header-height: 108px;
      --header-height-real: 64px;
      --mobile-header-height-real: 64px;
      --content-width: 640px;
      --sidebar-width: 288px;
      --page-width: 100vw;
      --logo-height: 20px;
      --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
      --font-heading: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
      --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  }

  :root {
      --typography-body-font-family: var(--font-body);
      --typography-heading-font-family: var(--font-heading);
      --typography-code-font-family: var(--font-code);
  }

  .light, :root {
      --accent-1: #fafefa;
      --accent-2: #3D6D9E;
      --accent-3: #3D6D9E;
      --accent-4: #3D6D9E;
      --accent-5: #3D6D9E;
      --accent-6: #3D6D9E;
      --accent-7: #3D6D9E;
      --accent-8: #3D6D9E;
      --accent-9: #3D6D9E;
      --accent-10: #3D6D9E;
      --accent-11: #3D6D9E;
      --accent-12: #3D6D9E;
      --accent-a1: #3D6D9E05;
      --accent-a2: #3D6D9E0c;
      --accent-a3: #3D6D9E1b;
      --accent-a4: #3D6D9E2c;
      --accent-a5: #3D6D9E41;
      --accent-a6: #3D6D9E5a;
      --accent-a7: #3D6D9E7d;
      --accent-a8: #3D6D9Eb3;
      --accent-a9: #3D6D9E;
      --accent-a10: #3D6D9E;
      --accent-a11: #3D6D9E;
      --accent-a12: #3D6D9Ee7;
      --accent-contrast: #fff;
      --accent-surface: #3D6D9Ecc;
      --accent-indicator: #3D6D9E;
      --accent-track: #3D6D9E;
  }

  @supports (color: color(display-p3 1 1 1)) {
      @media (color-gamut: p3) {
          .light, :root {
              --accent-1: #3D6D9E;
              --accent-2: #3D6D9E;
              --accent-3: #3D6D9E;
              --accent-4: #3D6D9E;
              --accent-5: #3D6D9E;
              --accent-6: #3D6D9E;
              --accent-7: #3D6D9E;
              --accent-8: #3D6D9E;
              --accent-9: #3D6D9E;
              --accent-10: #3D6D9E;
              --accent-11: #3D6D9E;
              --accent-12: #3D6D9E;
              --accent-a1: color(display-p3 0.2839 0.4228 0.6040 / 0.02);
              --accent-a2: color(display-p3 0.2839 0.4228 0.6040 / 0.044);
              --accent-a3: color(display-p3 0.2839 0.4228 0.6040 / 0.099);
              --accent-a4: color(display-p3 0.2839 0.4228 0.6040 / 0.161);
              --accent-a5: color(display-p3 0.2839 0.4228 0.6040 / 0.24);
              --accent-a6: color(display-p3 0.2839 0.4228 0.6040 / 0.334);
              --accent-a7: color(display-p3 0.2839 0.4228 0.6040 / 0.459);
              --accent-a8: color(display-p3 0.2839 0.4228 0.6040 / 0.644);
              --accent-a9: color(display-p3 0.2839 0.4228 0.6040 / 0.859);
              --accent-a10: color(display-p3 0.2839 0.4228 0.6040 / 0.879);
              --accent-a11: color(display-p3 0.2839 0.4228 0.6040 / 0.863);
              --accent-a12: color(display-p3 0.2839 0.4228 0.6040 / 0.887);
              --accent-contrast: #fff;
              --accent-surface: color(display-p3 0.2839 0.4228 0.6040 / 0.8);
              --accent-indicator: #3D6D9E;
              --accent-track: #3D6D9E;
          }
      }
  }

  .light, :root {
      --grayscale-1: #fcfdfc;
      --grayscale-2: #f8faf8;
      --grayscale-3: #eff1ef;
      --grayscale-4: #e7e9e7;
      --grayscale-5: #dfe2df;
      --grayscale-6: #d7dad7;
      --grayscale-7: #cccfcc;
      --grayscale-8: #b9bcb8;
      --grayscale-9: #898e87;
      --grayscale-10: #7f847d;
      --grayscale-11: #60655f;
      --grayscale-12: #1d211c;
      --grayscale-a1: #00550003;
      --grayscale-a2: #00490007;
      --grayscale-a3: #00200010;
      --grayscale-a4: #00160018;
      --grayscale-a5: #00180020;
      --grayscale-a6: #00140028;
      --grayscale-a7: #000f0033;
      --grayscale-a8: #040f0047;
      --grayscale-a9: #050f0078;
      --grayscale-a10: #040e0082;
      --grayscale-a11: #020a00a0;
      --grayscale-a12: #010600e3;
      --grayscale-contrast: #000;
      --grayscale-surface: #ffffffcc;
      --grayscale-indicator: #898e87;
      --grayscale-track: #898e87;
  }

  @supports (color: color(display-p3 1 1 1)) {
      @media (color-gamut: p3) {
          .light, :root {
              --grayscale-1: color(display-p3 0.989 0.992 0.989);
              --grayscale-2: color(display-p3 0.974 0.98 0.973);
              --grayscale-3: color(display-p3 0.939 0.945 0.937);
              --grayscale-4: color(display-p3 0.907 0.914 0.905);
              --grayscale-5: color(display-p3 0.878 0.885 0.875);
              --grayscale-6: color(display-p3 0.846 0.855 0.843);
              --grayscale-7: color(display-p3 0.803 0.812 0.8);
              --grayscale-8: color(display-p3 0.727 0.738 0.723);
              --grayscale-9: color(display-p3 0.541 0.556 0.532);
              --grayscale-10: color(display-p3 0.5 0.515 0.491);
              --grayscale-11: color(display-p3 0.38 0.395 0.374);
              --grayscale-12: color(display-p3 0.117 0.129 0.111);
              --grayscale-a1: #00550003;
              --grayscale-a2: #00490007;
              --grayscale-a3: #00200010;
              --grayscale-a4: #00160018;
              --grayscale-a5: #00180020;
              --grayscale-a6: #00140028;
              --grayscale-a7: #000f0033;
              --grayscale-a8: #040f0047;
              --grayscale-a9: #050f0078;
              --grayscale-a10: #040e0082;
              --grayscale-a11: #020a00a0;
              --grayscale-a12: #010600e3;
              --grayscale-contrast: #000;
              --grayscale-surface: color(display-p3 1 1 1 / 80%);
              --grayscale-indicator: color(display-p3 0.541 0.556 0.532);
              --grayscale-track: color(display-p3 0.541 0.556 0.532);
          }
      }
  }

  .dark {
      --accent-1: #3D6D9E;
      --accent-2: #3D6D9E;
      --accent-3: #3D6D9E;
      --accent-4: #3D6D9E;
      --accent-5: #3D6D9E;
      --accent-6: #3D6D9E;
      --accent-7: #3D6D9E;
      --accent-8: #3D6D9E;
      --accent-9: #3D6D9E;
      --accent-10: #3D6D9E;
      --accent-11: #3D6D9E;
      --accent-12: #3D6D9E;
      --accent-a1: #3D6D9E03;
      --accent-a2: #3D6D9E0b;
      --accent-a3: #3D6D9E1d;
      --accent-a4: #3D6D9E2d;
      --accent-a5: #3D6D9E3c;
      --accent-a6: #3D6D9E4d;
      --accent-a7: #3D6D9E5f;
      --accent-a8: #3D6D9E73;
      --accent-a9: #3D6D9Edf;
      --accent-a10: #3D6D9Ed4;
      --accent-a11: #3D6D9Ed2;
      --accent-a12: #3D6D9Ef3;
      --accent-contrast: #ffffff;
      --accent-surface: #3D6D9E80;
      --accent-indicator: #3D6D9E;
      --accent-track: #3D6D9E;
  }

  @supports (color: color(display-p3 1 1 1)) {
      @media (color-gamut: p3) {
          .dark {
              --accent-1: #3D6D9E;
              --accent-2: #3D6D9E;
              --accent-3: #3D6D9E;
              --accent-4: #3D6D9E;
              --accent-5: #3D6D9E;
              --accent-6: #3D6D9E;
              --accent-7: #3D6D9E;
              --accent-8: #3D6D9E;
              --accent-9: #3D6D9E;
              --accent-10: #3D6D9E;
              --accent-11: #3D6D9E;
              --accent-12: #3D6D9E;
              --accent-a1: color(display-p3 0.2839 0.4228 0.6040 / 0.009);
              --accent-a2: color(display-p3 0.2839 0.4228 0.6040 / 0.043);
              --accent-a3: color(display-p3 0.2839 0.4228 0.6040 / 0.114);
              --accent-a4: color(display-p3 0.2839 0.4228 0.6040 / 0.173);
              --accent-a5: color(display-p3 0.2839 0.4228 0.6040 / 0.232);
              --accent-a6: color(display-p3 0.2839 0.4228 0.6040 / 0.295);
              --accent-a7: color(display-p3 0.2839 0.4228 0.6040 / 0.366);
              --accent-a8: color(display-p3 0.2839 0.4228 0.6040 / 0.446);
              --accent-a9: color(display-p3 0.2839 0.4228 0.6040 / 0.862);
              --accent-a10: color(display-p3 0.2839 0.4228 0.6040 / 0.816);
              --accent-a11: color(display-p3 0.2839 0.4228 0.6040 / 0.811);
              --accent-a12: color(display-p3 0.2839 0.4228 0.6040 / 0.942);
              --accent-contrast: #ffffff;
              --accent-surface: color(display-p3 0.2839 0.4228 0.6040 / 0.5);
              --accent-indicator: #3D6D9E;
              --accent-track: #3D6D9E;
          }
      }
  }

  .dark {
      --grayscale-1: #111113;
      --grayscale-2: #18191b;
      --grayscale-3: #212225;
      --grayscale-4: #272a2d;
      --grayscale-5: #2e3135;
      --grayscale-6: #363a3f;
      --grayscale-7: #43484e;
      --grayscale-8: #5a6169;
      --grayscale-9: #696e77;
      --grayscale-10: #777b84;
      --grayscale-11: #b0b4ba;
      --grayscale-12: #edeef0;
      --grayscale-a1: #00000000;
      --grayscale-a2: #d8f4f609;
      --grayscale-a3: #ddeaf814;
      --grayscale-a4: #d3edf81d;
      --grayscale-a5: #d9edfe25;
      --grayscale-a6: #d6ebfd30;
      --grayscale-a7: #d9edff40;
      --grayscale-a8: #d9edff5d;
      --grayscale-a9: #dfebfd6d;
      --grayscale-a10: #e5edfd7b;
      --grayscale-a11: #f1f7feb5;
      --grayscale-a12: #fcfdffef;
      --grayscale-contrast: #fff;
      --grayscale-surface: rgba(0, 0, 0, 0.05);
      --grayscale-indicator: #696e77;
      --grayscale-track: #696e77;
  }

  @supports (color: color(display-p3 1 1 1)) {
      @media (color-gamut: p3) {
          .dark {
              --grayscale-1: color(display-p3 0.067 0.067 0.074);
              --grayscale-2: color(display-p3 0.095 0.098 0.105);
              --grayscale-3: color(display-p3 0.13 0.135 0.145);
              --grayscale-4: color(display-p3 0.156 0.163 0.176);
              --grayscale-5: color(display-p3 0.183 0.191 0.206);
              --grayscale-6: color(display-p3 0.215 0.226 0.244);
              --grayscale-7: color(display-p3 0.265 0.28 0.302);
              --grayscale-8: color(display-p3 0.357 0.381 0.409);
              --grayscale-9: color(display-p3 0.415 0.431 0.463);
              --grayscale-10: color(display-p3 0.469 0.483 0.514);
              --grayscale-11: color(display-p3 0.692 0.704 0.728);
              --grayscale-12: color(display-p3 0.93 0.933 0.94);
              --grayscale-a1: #00000000;
              --grayscale-a2: #d8f4f609;
              --grayscale-a3: #ddeaf814;
              --grayscale-a4: #d3edf81d;
              --grayscale-a5: #d9edfe25;
              --grayscale-a6: #d6ebfd30;
              --grayscale-a7: #d9edff40;
              --grayscale-a8: #d9edff5d;
              --grayscale-a9: #dfebfd6d;
              --grayscale-a10: #e5edfd7b;
              --grayscale-a11: #f1f7feb5;
              --grayscale-a12: #fcfdffef;
              --grayscale-contrast: #fff;
              --grayscale-surface: color(display-p3 0 0 0 / 5%);
              --grayscale-indicator: color(display-p3 0.415 0.431 0.463);
              --grayscale-track: color(display-p3 0.415 0.431 0.463);
          }
      }
  }

  .light, :root {
      color-scheme: light;
      --accent: rgba(61, 109, 158, 1);
      --background: rgba(255, 255, 255, 1);
      --border: initial;
      --sidebar-background: initial;
      --header-background: color-mix(in srgb, var(--background), transparent 30%);
      --card-background: initial;
      --theme-color: #fff;
  }

  .dark {
      color-scheme: dark;
      --accent: rgba(61, 109, 158, 1);
      --background: rgba(17, 17, 19, 1);
      --border: initial;
      --sidebar-background: initial;
      --header-background: color-mix(in srgb, var(--background), transparent 30%);
      --card-background: initial;
      --theme-color: #111113;
  }

  .zplcloud-background-image {
      background-image: linear-gradient(rgba(61, 109, 158, 0.03) 0%, transparent 50%);
  }

  :root.dark .zplcloud-background-image {
      background-image: linear-gradient(rgba(61, 109, 158, 0.03) 0%, transparent 50%);
  }

  [data-theme-toggle] .theme-icon-sun {
      display: block;
  }

  [data-theme-toggle] .theme-icon-moon {
      display: none;
  }

  .dark [data-theme-toggle] .theme-icon-sun {
      display: none;
  }

  .dark [data-theme-toggle] .theme-icon-moon {
      display: block;
  }

  @media (min-width: 1024px) {
      .zplcloud-layout-content-wrapper article.w-content-width {
          margin-left: 0px !important;
      }
  }

  :root {
      --bprogress-color: var(--accent);
      --bprogress-height: 3px;
      --bprogress-spinner-size: 18px;
      --bprogress-spinner-animation-duration: 400ms;
      --bprogress-spinner-border-size: 2px;
      --bprogress-box-shadow: 0 0 10px var(--accent), 0 0 5px var(--accent);
      --bprogress-z-index: 99999;
      --bprogress-spinner-top: 15px;
      --bprogress-spinner-bottom: auto;
      --bprogress-spinner-right: 15px;
      --bprogress-spinner-left: auto;
  }

  @-webkit-keyframes bprogress-spinner {
      0% {
          transform: rotate(0deg);
      }

      100% {
          transform: rotate(360deg);
      }
  }

  @keyframes bprogress-spinner {
      0% {
          transform: rotate(0deg);
      }

      100% {
          transform: rotate(360deg);
      }
  }

  @keyframes bprogress-indeterminate-increase {
      0% {
          left: -5%;
          width: 5%;
      }

      100% {
          left: 130%;
          width: 100%;
      }
  }

  @keyframes bprogress-indeterminate-decrease {
      0% {
          left: -80%;
          width: 80%;
      }

      100% {
          left: 110%;
          width: 10%;
      }
  }

  html, body {
      scroll-padding-top: calc( var(--header-height) + var(--mobile-toc-height, 0px) + (var(--spacing) * 4) );
  }

  .fa-secondary {
      opacity: 0.4;
  }

  [data-radix-scroll-area-viewport] {
      scrollbar-width: none;
  }

      [data-radix-scroll-area-viewport]::-webkit-scrollbar {
          display: none;
      }

  div > .card-icon {
      color: var(--accent-a10);
      width: 32px;
      height: 32px;
  }

      div > .card-icon:is(.dark *) {
          color: var(--accent-a10);
      }

  div > .card-icon {
      color: var(--accent-a10);
      width: 32px;
      height: 32px;
  }

      div > .card-icon:is(.dark *) {
          color: var(--accent-a10);
      }

  div > .card-icon {
      color: var(--accent-a10);
      width: 32px;
      height: 32px;
  }

      div > .card-icon:is(.dark *) {
          color: var(--accent-a10);
      }

  div > .card-icon {
      color: var(--accent-a10);
      width: 32px;
      height: 32px;
  }

      div > .card-icon:is(.dark *) {
          color: var(--accent-a10);
      }

  /* Suppress transitions/animations while the theme toggle flips light<->dark (added by JS as .theme-no-transition) */
  .theme-no-transition, .theme-no-transition *, .theme-no-transition *::before, .theme-no-transition *::after {
    transition: none !important;
    animation: none !important;
  }

  /* zplCloud-Logo: je nach Theme hell/dunkel */
  .zpl-logo-dark { display: none !important; }
  .dark .zpl-logo-light, [data-theme='dark'] .zpl-logo-light { display: none !important; }
  .dark .zpl-logo-dark, [data-theme='dark'] .zpl-logo-dark { display: block !important; }

  /* ── Mobile-Menü: Sidebar als Overlay über den Burger öffnen ─────────────── */
  /* Backdrop: verdunkelt die Seite beim Öffnen des Menüs */
  .zplcloud-mobile-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 55;
  }
  [data-theme="default"] #zplcloud-sidebar[data-viewport="desktop"].zplcloud-mobile-open {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      height: 100dvh;
      width: min(19rem, 85vw);
      display: flex;
      flex-direction: column;
      background: var(--background, #fff);
      border-right: 1px solid var(--border, var(--grayscale-a3));
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
      z-index: 60;
      overflow-y: auto;
      padding: 1rem;
  }
  html.zplcloud-menu-lock {
      overflow: hidden;
  }

}