@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&family=Puritan:ital,wght@0,400;0,700;1,400;1,700&family=Special+Gothic+Condensed+One&display=swap");
@layer theme, base, components, utilities;
@layer utilities {
  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  .align-self-auto {
    align-self: auto;
  }
  .align-self-start {
    align-self: flex-start;
  }
  .align-self-end {
    align-self: flex-end;
  }
  .align-self-center {
    align-self: center;
  }
  .align-self-baseline {
    align-self: baseline;
  }
  .align-self-stretch {
    align-self: stretch;
  }
  .align-items-start {
    align-items: flex-start;
  }
  .align-items-end {
    align-items: flex-end;
  }
  .align-items-center {
    align-items: center;
  }
  .align-items-baseline {
    align-items: baseline;
  }
  .align-items-stretch {
    align-items: stretch;
  }
  .flex-direction-row {
    flex-direction: row;
  }
  .flex-direction-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-direction-column {
    flex-direction: column;
  }
  .flex-direction-column-reverse {
    flex-direction: column-reverse;
  }
  .justify-content-start {
    justify-content: flex-start;
  }
  .justify-content-end {
    justify-content: flex-end;
  }
  .justify-content-center {
    justify-content: center;
  }
  .justify-content-between {
    justify-content: space-between;
  }
  .justify-content-around {
    justify-content: space-around;
  }
  .justify-content-evenly {
    justify-content: space-evenly;
  }
  @media (min-width: 40rem) {
    .tablet\:align-self-auto {
      align-self: auto;
    }
    .tablet\:align-self-start {
      align-self: flex-start;
    }
    .tablet\:align-self-end {
      align-self: flex-end;
    }
    .tablet\:align-self-center {
      align-self: center;
    }
    .tablet\:align-self-baseline {
      align-self: baseline;
    }
    .tablet\:align-self-stretch {
      align-self: stretch;
    }
  }
  @media (min-width: 50rem) {
    .tablet-lg\:align-self-auto {
      align-self: auto;
    }
    .tablet-lg\:align-self-start {
      align-self: flex-start;
    }
    .tablet-lg\:align-self-end {
      align-self: flex-end;
    }
    .tablet-lg\:align-self-center {
      align-self: center;
    }
    .tablet-lg\:align-self-baseline {
      align-self: baseline;
    }
    .tablet-lg\:align-self-stretch {
      align-self: stretch;
    }
  }
  @media (min-width: 70rem) {
    .desktop\:align-self-auto {
      align-self: auto;
    }
    .desktop\:align-self-start {
      align-self: flex-start;
    }
    .desktop\:align-self-end {
      align-self: flex-end;
    }
    .desktop\:align-self-center {
      align-self: center;
    }
    .desktop\:align-self-baseline {
      align-self: baseline;
    }
    .desktop\:align-self-stretch {
      align-self: stretch;
    }
  }
  @media (min-width: 80rem) {
    .desktop-lg\:align-self-auto {
      align-self: auto;
    }
    .desktop-lg\:align-self-start {
      align-self: flex-start;
    }
    .desktop-lg\:align-self-end {
      align-self: flex-end;
    }
    .desktop-lg\:align-self-center {
      align-self: center;
    }
    .desktop-lg\:align-self-baseline {
      align-self: baseline;
    }
    .desktop-lg\:align-self-stretch {
      align-self: stretch;
    }
  }
  @media (min-width: 100rem) {
    .widescreen\:align-self-auto {
      align-self: auto;
    }
    .widescreen\:align-self-start {
      align-self: flex-start;
    }
    .widescreen\:align-self-end {
      align-self: flex-end;
    }
    .widescreen\:align-self-center {
      align-self: center;
    }
    .widescreen\:align-self-baseline {
      align-self: baseline;
    }
    .widescreen\:align-self-stretch {
      align-self: stretch;
    }
  }
  @media (min-width: 40rem) {
    .tablet\:align-items-start {
      align-items: flex-start;
    }
    .tablet\:align-items-end {
      align-items: flex-end;
    }
    .tablet\:align-items-center {
      align-items: center;
    }
    .tablet\:align-items-baseline {
      align-items: baseline;
    }
    .tablet\:align-items-stretch {
      align-items: stretch;
    }
  }
  @media (min-width: 50rem) {
    .tablet-lg\:align-items-start {
      align-items: flex-start;
    }
    .tablet-lg\:align-items-end {
      align-items: flex-end;
    }
    .tablet-lg\:align-items-center {
      align-items: center;
    }
    .tablet-lg\:align-items-baseline {
      align-items: baseline;
    }
    .tablet-lg\:align-items-stretch {
      align-items: stretch;
    }
  }
  @media (min-width: 70rem) {
    .desktop\:align-items-start {
      align-items: flex-start;
    }
    .desktop\:align-items-end {
      align-items: flex-end;
    }
    .desktop\:align-items-center {
      align-items: center;
    }
    .desktop\:align-items-baseline {
      align-items: baseline;
    }
    .desktop\:align-items-stretch {
      align-items: stretch;
    }
  }
  @media (min-width: 80rem) {
    .desktop-lg\:align-items-start {
      align-items: flex-start;
    }
    .desktop-lg\:align-items-end {
      align-items: flex-end;
    }
    .desktop-lg\:align-items-center {
      align-items: center;
    }
    .desktop-lg\:align-items-baseline {
      align-items: baseline;
    }
    .desktop-lg\:align-items-stretch {
      align-items: stretch;
    }
  }
  @media (min-width: 100rem) {
    .widescreen\:align-items-start {
      align-items: flex-start;
    }
    .widescreen\:align-items-end {
      align-items: flex-end;
    }
    .widescreen\:align-items-center {
      align-items: center;
    }
    .widescreen\:align-items-baseline {
      align-items: baseline;
    }
    .widescreen\:align-items-stretch {
      align-items: stretch;
    }
  }
  @media (min-width: 40rem) {
    .tablet\:flex-direction-row {
      flex-direction: row;
    }
    .tablet\:flex-direction-row-reverse {
      flex-direction: row-reverse;
    }
    .tablet\:flex-direction-column {
      flex-direction: column;
    }
    .tablet\:flex-direction-column-reverse {
      flex-direction: column-reverse;
    }
  }
  @media (min-width: 50rem) {
    .tablet-lg\:flex-direction-row {
      flex-direction: row;
    }
    .tablet-lg\:flex-direction-row-reverse {
      flex-direction: row-reverse;
    }
    .tablet-lg\:flex-direction-column {
      flex-direction: column;
    }
    .tablet-lg\:flex-direction-column-reverse {
      flex-direction: column-reverse;
    }
  }
  @media (min-width: 70rem) {
    .desktop\:flex-direction-row {
      flex-direction: row;
    }
    .desktop\:flex-direction-row-reverse {
      flex-direction: row-reverse;
    }
    .desktop\:flex-direction-column {
      flex-direction: column;
    }
    .desktop\:flex-direction-column-reverse {
      flex-direction: column-reverse;
    }
  }
  @media (min-width: 80rem) {
    .desktop-lg\:flex-direction-row {
      flex-direction: row;
    }
    .desktop-lg\:flex-direction-row-reverse {
      flex-direction: row-reverse;
    }
    .desktop-lg\:flex-direction-column {
      flex-direction: column;
    }
    .desktop-lg\:flex-direction-column-reverse {
      flex-direction: column-reverse;
    }
  }
  @media (min-width: 100rem) {
    .widescreen\:flex-direction-row {
      flex-direction: row;
    }
    .widescreen\:flex-direction-row-reverse {
      flex-direction: row-reverse;
    }
    .widescreen\:flex-direction-column {
      flex-direction: column;
    }
    .widescreen\:flex-direction-column-reverse {
      flex-direction: column-reverse;
    }
  }
  @media (min-width: 40rem) {
    .tablet\:justify-content-start {
      justify-content: flex-start;
    }
    .tablet\:justify-content-end {
      justify-content: flex-end;
    }
    .tablet\:justify-content-center {
      justify-content: center;
    }
    .tablet\:justify-content-between {
      justify-content: space-between;
    }
    .tablet\:justify-content-around {
      justify-content: space-around;
    }
    .tablet\:justify-content-evenly {
      justify-content: space-evenly;
    }
  }
  @media (min-width: 50rem) {
    .tablet-lg\:justify-content-start {
      justify-content: flex-start;
    }
    .tablet-lg\:justify-content-end {
      justify-content: flex-end;
    }
    .tablet-lg\:justify-content-center {
      justify-content: center;
    }
    .tablet-lg\:justify-content-between {
      justify-content: space-between;
    }
    .tablet-lg\:justify-content-around {
      justify-content: space-around;
    }
    .tablet-lg\:justify-content-evenly {
      justify-content: space-evenly;
    }
  }
  @media (min-width: 70rem) {
    .desktop\:justify-content-start {
      justify-content: flex-start;
    }
    .desktop\:justify-content-end {
      justify-content: flex-end;
    }
    .desktop\:justify-content-center {
      justify-content: center;
    }
    .desktop\:justify-content-between {
      justify-content: space-between;
    }
    .desktop\:justify-content-around {
      justify-content: space-around;
    }
    .desktop\:justify-content-evenly {
      justify-content: space-evenly;
    }
  }
  @media (min-width: 80rem) {
    .desktop-lg\:justify-content-start {
      justify-content: flex-start;
    }
    .desktop-lg\:justify-content-end {
      justify-content: flex-end;
    }
    .desktop-lg\:justify-content-center {
      justify-content: center;
    }
    .desktop-lg\:justify-content-between {
      justify-content: space-between;
    }
    .desktop-lg\:justify-content-around {
      justify-content: space-around;
    }
    .desktop-lg\:justify-content-evenly {
      justify-content: space-evenly;
    }
  }
  @media (min-width: 100rem) {
    .widescreen\:justify-content-start {
      justify-content: flex-start;
    }
    .widescreen\:justify-content-end {
      justify-content: flex-end;
    }
    .widescreen\:justify-content-center {
      justify-content: center;
    }
    .widescreen\:justify-content-between {
      justify-content: space-between;
    }
    .widescreen\:justify-content-around {
      justify-content: space-around;
    }
    .widescreen\:justify-content-evenly {
      justify-content: space-evenly;
    }
  }
  .display-flex {
    display: flex;
  }
  .display-inline-flex {
    display: inline-flex;
  }
  .display-block {
    display: block;
  }
  .display-inline-block {
    display: inline-block;
  }
  .display-inline {
    display: inline;
  }
  .display-none {
    display: none;
  }
  @media (min-width: 40rem) {
    .tablet\:display-flex {
      display: flex;
    }
    .tablet\:display-inline-flex {
      display: inline-flex;
    }
    .tablet\:display-block {
      display: block;
    }
    .tablet\:display-inline-block {
      display: inline-block;
    }
    .tablet\:display-inline {
      display: inline;
    }
    .tablet\:display-none {
      display: none;
    }
  }
  @media (min-width: 50rem) {
    .tablet-lg\:display-flex {
      display: flex;
    }
    .tablet-lg\:display-inline-flex {
      display: inline-flex;
    }
    .tablet-lg\:display-block {
      display: block;
    }
    .tablet-lg\:display-inline-block {
      display: inline-block;
    }
    .tablet-lg\:display-inline {
      display: inline;
    }
    .tablet-lg\:display-none {
      display: none;
    }
  }
  @media (min-width: 70rem) {
    .desktop\:display-flex {
      display: flex;
    }
    .desktop\:display-inline-flex {
      display: inline-flex;
    }
    .desktop\:display-block {
      display: block;
    }
    .desktop\:display-inline-block {
      display: inline-block;
    }
    .desktop\:display-inline {
      display: inline;
    }
    .desktop\:display-none {
      display: none;
    }
  }
  @media (min-width: 80rem) {
    .desktop-lg\:display-flex {
      display: flex;
    }
    .desktop-lg\:display-inline-flex {
      display: inline-flex;
    }
    .desktop-lg\:display-block {
      display: block;
    }
    .desktop-lg\:display-inline-block {
      display: inline-block;
    }
    .desktop-lg\:display-inline {
      display: inline;
    }
    .desktop-lg\:display-none {
      display: none;
    }
  }
  @media (min-width: 100rem) {
    .widescreen\:display-flex {
      display: flex;
    }
    .widescreen\:display-inline-flex {
      display: inline-flex;
    }
    .widescreen\:display-block {
      display: block;
    }
    .widescreen\:display-inline-block {
      display: inline-block;
    }
    .widescreen\:display-inline {
      display: inline;
    }
    .widescreen\:display-none {
      display: none;
    }
  }
}
@layer utilities {
  .font-primary {
    font-family: var(--zbk-font-family-primary);
  }
  .font-alt {
    font-family: var(--zbk-font-family-alt);
  }
  .font-monospace {
    font-family: var(--zbk-font-family-monospace);
  }
  .font-interface {
    font-family: var(--zbk-font-family-interface);
  }
  .font-heading {
    font-family: var(--zbk-font-family-heading);
  }
  .font-body {
    font-family: var(--zbk-font-family-body);
  }
  .font-code {
    font-family: var(--zbk-font-family-code);
  }
  .font-3xs,
  .text-3xs {
    font-size: var(--zbk-font-size-3xs);
  }
  .font-2xs,
  .text-2xs {
    font-size: var(--zbk-font-size-2xs);
  }
  .font-xs,
  .text-xs {
    font-size: var(--zbk-font-size-xs);
  }
  .font-sm,
  .text-sm {
    font-size: var(--zbk-font-size-sm);
  }
  .font-md,
  .text-md {
    font-size: var(--zbk-font-size-md);
  }
  .font-lg,
  .text-lg {
    font-size: var(--zbk-font-size-lg);
  }
  .font-xl,
  .text-xl {
    font-size: var(--zbk-font-size-xl);
  }
  .font-2xl,
  .text-2xl {
    font-size: var(--zbk-font-size-2xl);
  }
  .font-3xl,
  .text-3xl {
    font-size: var(--zbk-font-size-3xl);
  }
  @media (min-width: 40rem) {
    .tablet\:font-3xs,
    .tablet\:text-3xs {
      font-size: var(--zbk-font-size-3xs);
    }
    .tablet\:font-2xs,
    .tablet\:text-2xs {
      font-size: var(--zbk-font-size-2xs);
    }
    .tablet\:font-xs,
    .tablet\:text-xs {
      font-size: var(--zbk-font-size-xs);
    }
    .tablet\:font-sm,
    .tablet\:text-sm {
      font-size: var(--zbk-font-size-sm);
    }
    .tablet\:font-md,
    .tablet\:text-md {
      font-size: var(--zbk-font-size-md);
    }
    .tablet\:font-lg,
    .tablet\:text-lg {
      font-size: var(--zbk-font-size-lg);
    }
    .tablet\:font-xl,
    .tablet\:text-xl {
      font-size: var(--zbk-font-size-xl);
    }
    .tablet\:font-2xl,
    .tablet\:text-2xl {
      font-size: var(--zbk-font-size-2xl);
    }
    .tablet\:font-3xl,
    .tablet\:text-3xl {
      font-size: var(--zbk-font-size-3xl);
    }
  }
  @media (min-width: 50rem) {
    .tablet-lg\:font-3xs,
    .tablet-lg\:text-3xs {
      font-size: var(--zbk-font-size-3xs);
    }
    .tablet-lg\:font-2xs,
    .tablet-lg\:text-2xs {
      font-size: var(--zbk-font-size-2xs);
    }
    .tablet-lg\:font-xs,
    .tablet-lg\:text-xs {
      font-size: var(--zbk-font-size-xs);
    }
    .tablet-lg\:font-sm,
    .tablet-lg\:text-sm {
      font-size: var(--zbk-font-size-sm);
    }
    .tablet-lg\:font-md,
    .tablet-lg\:text-md {
      font-size: var(--zbk-font-size-md);
    }
    .tablet-lg\:font-lg,
    .tablet-lg\:text-lg {
      font-size: var(--zbk-font-size-lg);
    }
    .tablet-lg\:font-xl,
    .tablet-lg\:text-xl {
      font-size: var(--zbk-font-size-xl);
    }
    .tablet-lg\:font-2xl,
    .tablet-lg\:text-2xl {
      font-size: var(--zbk-font-size-2xl);
    }
    .tablet-lg\:font-3xl,
    .tablet-lg\:text-3xl {
      font-size: var(--zbk-font-size-3xl);
    }
  }
  @media (min-width: 70rem) {
    .desktop\:font-3xs,
    .desktop\:text-3xs {
      font-size: var(--zbk-font-size-3xs);
    }
    .desktop\:font-2xs,
    .desktop\:text-2xs {
      font-size: var(--zbk-font-size-2xs);
    }
    .desktop\:font-xs,
    .desktop\:text-xs {
      font-size: var(--zbk-font-size-xs);
    }
    .desktop\:font-sm,
    .desktop\:text-sm {
      font-size: var(--zbk-font-size-sm);
    }
    .desktop\:font-md,
    .desktop\:text-md {
      font-size: var(--zbk-font-size-md);
    }
    .desktop\:font-lg,
    .desktop\:text-lg {
      font-size: var(--zbk-font-size-lg);
    }
    .desktop\:font-xl,
    .desktop\:text-xl {
      font-size: var(--zbk-font-size-xl);
    }
    .desktop\:font-2xl,
    .desktop\:text-2xl {
      font-size: var(--zbk-font-size-2xl);
    }
    .desktop\:font-3xl,
    .desktop\:text-3xl {
      font-size: var(--zbk-font-size-3xl);
    }
  }
  @media (min-width: 80rem) {
    .desktop-lg\:font-3xs,
    .desktop-lg\:text-3xs {
      font-size: var(--zbk-font-size-3xs);
    }
    .desktop-lg\:font-2xs,
    .desktop-lg\:text-2xs {
      font-size: var(--zbk-font-size-2xs);
    }
    .desktop-lg\:font-xs,
    .desktop-lg\:text-xs {
      font-size: var(--zbk-font-size-xs);
    }
    .desktop-lg\:font-sm,
    .desktop-lg\:text-sm {
      font-size: var(--zbk-font-size-sm);
    }
    .desktop-lg\:font-md,
    .desktop-lg\:text-md {
      font-size: var(--zbk-font-size-md);
    }
    .desktop-lg\:font-lg,
    .desktop-lg\:text-lg {
      font-size: var(--zbk-font-size-lg);
    }
    .desktop-lg\:font-xl,
    .desktop-lg\:text-xl {
      font-size: var(--zbk-font-size-xl);
    }
    .desktop-lg\:font-2xl,
    .desktop-lg\:text-2xl {
      font-size: var(--zbk-font-size-2xl);
    }
    .desktop-lg\:font-3xl,
    .desktop-lg\:text-3xl {
      font-size: var(--zbk-font-size-3xl);
    }
  }
  @media (min-width: 100rem) {
    .widescreen\:font-3xs,
    .widescreen\:text-3xs {
      font-size: var(--zbk-font-size-3xs);
    }
    .widescreen\:font-2xs,
    .widescreen\:text-2xs {
      font-size: var(--zbk-font-size-2xs);
    }
    .widescreen\:font-xs,
    .widescreen\:text-xs {
      font-size: var(--zbk-font-size-xs);
    }
    .widescreen\:font-sm,
    .widescreen\:text-sm {
      font-size: var(--zbk-font-size-sm);
    }
    .widescreen\:font-md,
    .widescreen\:text-md {
      font-size: var(--zbk-font-size-md);
    }
    .widescreen\:font-lg,
    .widescreen\:text-lg {
      font-size: var(--zbk-font-size-lg);
    }
    .widescreen\:font-xl,
    .widescreen\:text-xl {
      font-size: var(--zbk-font-size-xl);
    }
    .widescreen\:font-2xl,
    .widescreen\:text-2xl {
      font-size: var(--zbk-font-size-2xl);
    }
    .widescreen\:font-3xl,
    .widescreen\:text-3xl {
      font-size: var(--zbk-font-size-3xl);
    }
  }
  .line-height-0 {
    line-height: 0;
  }
  .line-height-1 {
    line-height: var(--zbk-line-height-1);
  }
  .line-height-2 {
    line-height: var(--zbk-line-height-2);
  }
  .line-height-3 {
    line-height: var(--zbk-line-height-3);
  }
  .line-height-4 {
    line-height: var(--zbk-line-height-4);
  }
  .line-height-5 {
    line-height: var(--zbk-line-height-5);
  }
  @media (min-width: 40rem) {
    .tablet\:line-height-0 {
      line-height: 0;
    }
    .tablet\:line-height-1 {
      line-height: var(--zbk-line-height-1);
    }
    .tablet\:line-height-2 {
      line-height: var(--zbk-line-height-2);
    }
    .tablet\:line-height-3 {
      line-height: var(--zbk-line-height-3);
    }
    .tablet\:line-height-4 {
      line-height: var(--zbk-line-height-4);
    }
    .tablet\:line-height-5 {
      line-height: var(--zbk-line-height-5);
    }
  }
  @media (min-width: 50rem) {
    .tablet-lg\:line-height-0 {
      line-height: 0;
    }
    .tablet-lg\:line-height-1 {
      line-height: var(--zbk-line-height-1);
    }
    .tablet-lg\:line-height-2 {
      line-height: var(--zbk-line-height-2);
    }
    .tablet-lg\:line-height-3 {
      line-height: var(--zbk-line-height-3);
    }
    .tablet-lg\:line-height-4 {
      line-height: var(--zbk-line-height-4);
    }
    .tablet-lg\:line-height-5 {
      line-height: var(--zbk-line-height-5);
    }
  }
  @media (min-width: 70rem) {
    .desktop\:line-height-0 {
      line-height: 0;
    }
    .desktop\:line-height-1 {
      line-height: var(--zbk-line-height-1);
    }
    .desktop\:line-height-2 {
      line-height: var(--zbk-line-height-2);
    }
    .desktop\:line-height-3 {
      line-height: var(--zbk-line-height-3);
    }
    .desktop\:line-height-4 {
      line-height: var(--zbk-line-height-4);
    }
    .desktop\:line-height-5 {
      line-height: var(--zbk-line-height-5);
    }
  }
  @media (min-width: 80rem) {
    .desktop-lg\:line-height-0 {
      line-height: 0;
    }
    .desktop-lg\:line-height-1 {
      line-height: var(--zbk-line-height-1);
    }
    .desktop-lg\:line-height-2 {
      line-height: var(--zbk-line-height-2);
    }
    .desktop-lg\:line-height-3 {
      line-height: var(--zbk-line-height-3);
    }
    .desktop-lg\:line-height-4 {
      line-height: var(--zbk-line-height-4);
    }
    .desktop-lg\:line-height-5 {
      line-height: var(--zbk-line-height-5);
    }
  }
  @media (min-width: 100rem) {
    .widescreen\:line-height-0 {
      line-height: 0;
    }
    .widescreen\:line-height-1 {
      line-height: var(--zbk-line-height-1);
    }
    .widescreen\:line-height-2 {
      line-height: var(--zbk-line-height-2);
    }
    .widescreen\:line-height-3 {
      line-height: var(--zbk-line-height-3);
    }
    .widescreen\:line-height-4 {
      line-height: var(--zbk-line-height-4);
    }
    .widescreen\:line-height-5 {
      line-height: var(--zbk-line-height-5);
    }
  }
  .font-weight-thin,
  .text-thin {
    font-weight: 100;
  }
  .font-weight-extralight,
  .font-weight-light,
  .text-extralight,
  .text-light {
    font-weight: 300;
  }
  .font-weight-normal,
  .text-normal {
    font-weight: 400;
  }
  .font-weight-medium,
  .text-medium {
    font-weight: 500;
  }
  .font-weight-semibold,
  .text-semibold {
    font-weight: 600;
  }
  .font-weight-bold,
  .text-bold {
    font-weight: 700;
  }
  .font-weight-extrabold,
  .text-extrabold {
    font-weight: 800;
  }
  .font-weight-black,
  .text-black {
    font-weight: 900;
  }
  @media (min-width: 40rem) {
    .tablet\:font-weight-thin,
    .tablet\:text-thin {
      line-height: 100;
    }
    .tablet\:font-weight-extralight,
    .tablet\:font-weight-light,
    .tablet\:text-extralight,
    .tablet\:text-light {
      line-height: 300;
    }
    .tablet\:font-weight-normal,
    .tablet\:text-normal {
      line-height: 400;
    }
    .tablet\:font-weight-medium,
    .tablet\:text-medium {
      line-height: 500;
    }
    .tablet\:font-weight-semibold,
    .tablet\:text-semibold {
      line-height: 600;
    }
    .tablet\:font-weight-bold,
    .tablet\:text-bold {
      line-height: 700;
    }
    .tablet\:font-weight-extrabold,
    .tablet\:text-extrabold {
      line-height: 800;
    }
    .tablet\:font-weight-black,
    .tablet\:text-black {
      line-height: 900;
    }
  }
  @media (min-width: 50rem) {
    .tablet-lg\:font-weight-thin,
    .tablet-lg\:text-thin {
      line-height: 100;
    }
    .tablet-lg\:font-weight-extralight,
    .tablet-lg\:font-weight-light,
    .tablet-lg\:text-extralight,
    .tablet-lg\:text-light {
      line-height: 300;
    }
    .tablet-lg\:font-weight-normal,
    .tablet-lg\:text-normal {
      line-height: 400;
    }
    .tablet-lg\:font-weight-medium,
    .tablet-lg\:text-medium {
      line-height: 500;
    }
    .tablet-lg\:font-weight-semibold,
    .tablet-lg\:text-semibold {
      line-height: 600;
    }
    .tablet-lg\:font-weight-bold,
    .tablet-lg\:text-bold {
      line-height: 700;
    }
    .tablet-lg\:font-weight-extrabold,
    .tablet-lg\:text-extrabold {
      line-height: 800;
    }
    .tablet-lg\:font-weight-black,
    .tablet-lg\:text-black {
      line-height: 900;
    }
  }
  @media (min-width: 70rem) {
    .desktop\:font-weight-thin,
    .desktop\:text-thin {
      line-height: 100;
    }
    .desktop\:font-weight-extralight,
    .desktop\:font-weight-light,
    .desktop\:text-extralight,
    .desktop\:text-light {
      line-height: 300;
    }
    .desktop\:font-weight-normal,
    .desktop\:text-normal {
      line-height: 400;
    }
    .desktop\:font-weight-medium,
    .desktop\:text-medium {
      line-height: 500;
    }
    .desktop\:font-weight-semibold,
    .desktop\:text-semibold {
      line-height: 600;
    }
    .desktop\:font-weight-bold,
    .desktop\:text-bold {
      line-height: 700;
    }
    .desktop\:font-weight-extrabold,
    .desktop\:text-extrabold {
      line-height: 800;
    }
    .desktop\:font-weight-black,
    .desktop\:text-black {
      line-height: 900;
    }
  }
  @media (min-width: 80rem) {
    .desktop-lg\:font-weight-thin,
    .desktop-lg\:text-thin {
      line-height: 100;
    }
    .desktop-lg\:font-weight-extralight,
    .desktop-lg\:font-weight-light,
    .desktop-lg\:text-extralight,
    .desktop-lg\:text-light {
      line-height: 300;
    }
    .desktop-lg\:font-weight-normal,
    .desktop-lg\:text-normal {
      line-height: 400;
    }
    .desktop-lg\:font-weight-medium,
    .desktop-lg\:text-medium {
      line-height: 500;
    }
    .desktop-lg\:font-weight-semibold,
    .desktop-lg\:text-semibold {
      line-height: 600;
    }
    .desktop-lg\:font-weight-bold,
    .desktop-lg\:text-bold {
      line-height: 700;
    }
    .desktop-lg\:font-weight-extrabold,
    .desktop-lg\:text-extrabold {
      line-height: 800;
    }
    .desktop-lg\:font-weight-black,
    .desktop-lg\:text-black {
      line-height: 900;
    }
  }
  @media (min-width: 100rem) {
    .widescreen\:font-weight-thin,
    .widescreen\:text-thin {
      line-height: 100;
    }
    .widescreen\:font-weight-extralight,
    .widescreen\:font-weight-light,
    .widescreen\:text-extralight,
    .widescreen\:text-light {
      line-height: 300;
    }
    .widescreen\:font-weight-normal,
    .widescreen\:text-normal {
      line-height: 400;
    }
    .widescreen\:font-weight-medium,
    .widescreen\:text-medium {
      line-height: 500;
    }
    .widescreen\:font-weight-semibold,
    .widescreen\:text-semibold {
      line-height: 600;
    }
    .widescreen\:font-weight-bold,
    .widescreen\:text-bold {
      line-height: 700;
    }
    .widescreen\:font-weight-extrabold,
    .widescreen\:text-extrabold {
      line-height: 800;
    }
    .widescreen\:font-weight-black,
    .widescreen\:text-black {
      line-height: 900;
    }
  }
  .letter-spacing-tighter,
  .tracking-tighter {
    letter-spacing: -0.05rem;
  }
  .letter-spacing-tight,
  .tracking-tight {
    letter-spacing: -0.025rem;
  }
  .letter-spacing-normal,
  .tracking-normal {
    letter-spacing: 0;
  }
  .letter-spacing-wide,
  .tracking-wide {
    letter-spacing: 0.025rem;
  }
  .letter-spacing-wider,
  .tracking-wider {
    letter-spacing: 0.05rem;
  }
  .measure-0 {
    max-width: "none";
  }
  .measure-1 {
    max-width: var(--zbk-text-measure-1);
  }
  .measure-2 {
    max-width: var(--zbk-text-measure-2);
  }
  .measure-3 {
    max-width: var(--zbk-text-measure-3);
  }
  .measure-4 {
    max-width: var(--zbk-text-measure-4);
  }
  .measure-5 {
    max-width: var(--zbk-text-measure-5);
  }
  @media (min-width: 40rem) {
    .tablet\:measure-0 {
      max-width: "none";
    }
    .tablet\:measure-1 {
      max-width: var(--zbk-text-measure-1);
    }
    .tablet\:measure-2 {
      max-width: var(--zbk-text-measure-2);
    }
    .tablet\:measure-3 {
      max-width: var(--zbk-text-measure-3);
    }
    .tablet\:measure-4 {
      max-width: var(--zbk-text-measure-4);
    }
    .tablet\:measure-5 {
      max-width: var(--zbk-text-measure-5);
    }
  }
  @media (min-width: 50rem) {
    .tablet-lg\:measure-0 {
      max-width: "none";
    }
    .tablet-lg\:measure-1 {
      max-width: var(--zbk-text-measure-1);
    }
    .tablet-lg\:measure-2 {
      max-width: var(--zbk-text-measure-2);
    }
    .tablet-lg\:measure-3 {
      max-width: var(--zbk-text-measure-3);
    }
    .tablet-lg\:measure-4 {
      max-width: var(--zbk-text-measure-4);
    }
    .tablet-lg\:measure-5 {
      max-width: var(--zbk-text-measure-5);
    }
  }
  @media (min-width: 70rem) {
    .desktop\:measure-0 {
      max-width: "none";
    }
    .desktop\:measure-1 {
      max-width: var(--zbk-text-measure-1);
    }
    .desktop\:measure-2 {
      max-width: var(--zbk-text-measure-2);
    }
    .desktop\:measure-3 {
      max-width: var(--zbk-text-measure-3);
    }
    .desktop\:measure-4 {
      max-width: var(--zbk-text-measure-4);
    }
    .desktop\:measure-5 {
      max-width: var(--zbk-text-measure-5);
    }
  }
  @media (min-width: 80rem) {
    .desktop-lg\:measure-0 {
      max-width: "none";
    }
    .desktop-lg\:measure-1 {
      max-width: var(--zbk-text-measure-1);
    }
    .desktop-lg\:measure-2 {
      max-width: var(--zbk-text-measure-2);
    }
    .desktop-lg\:measure-3 {
      max-width: var(--zbk-text-measure-3);
    }
    .desktop-lg\:measure-4 {
      max-width: var(--zbk-text-measure-4);
    }
    .desktop-lg\:measure-5 {
      max-width: var(--zbk-text-measure-5);
    }
  }
  @media (min-width: 100rem) {
    .widescreen\:measure-0 {
      max-width: "none";
    }
    .widescreen\:measure-1 {
      max-width: var(--zbk-text-measure-1);
    }
    .widescreen\:measure-2 {
      max-width: var(--zbk-text-measure-2);
    }
    .widescreen\:measure-3 {
      max-width: var(--zbk-text-measure-3);
    }
    .widescreen\:measure-4 {
      max-width: var(--zbk-text-measure-4);
    }
    .widescreen\:measure-5 {
      max-width: var(--zbk-text-measure-5);
    }
  }
}
@layer utilities {
  .height-auto {
    height: auto;
  }
  .height-full {
    height: 100%;
  }
  .height-viewport {
    height: 100vw;
  }
  .height-min {
    height: -moz-min-content;
    height: min-content;
  }
  .height-max {
    height: -moz-max-content;
    height: max-content;
  }
  .height-inherit {
    height: inherit;
  }
  .height-neg-1px {
    height: var(--zbk-spacing-neg-1px);
  }
  .height-0 {
    height: var(--zbk-spacing-0);
  }
  .height-1px {
    height: var(--zbk-spacing-1px);
  }
  .height-2px {
    height: var(--zbk-spacing-2px);
  }
  .height-025 {
    height: var(--zbk-spacing-025);
  }
  .height-05 {
    height: var(--zbk-spacing-05);
  }
  .height-1 {
    height: var(--zbk-spacing-1);
  }
  .height-105 {
    height: var(--zbk-spacing-105);
  }
  .height-2 {
    height: var(--zbk-spacing-2);
  }
  .height-205 {
    height: var(--zbk-spacing-205);
  }
  .height-3 {
    height: var(--zbk-spacing-3);
  }
  .height-4 {
    height: var(--zbk-spacing-4);
  }
  .height-5 {
    height: var(--zbk-spacing-5);
  }
  .height-6 {
    height: var(--zbk-spacing-6);
  }
  .height-7 {
    height: var(--zbk-spacing-7);
  }
  .height-8 {
    height: var(--zbk-spacing-8);
  }
  .height-9 {
    height: var(--zbk-spacing-9);
  }
  .height-10 {
    height: var(--zbk-spacing-10);
  }
  .height-15 {
    height: var(--zbk-spacing-15);
  }
  .height-20 {
    height: var(--zbk-spacing-20);
  }
  .height-25 {
    height: var(--zbk-spacing-25);
  }
  .height-30 {
    height: var(--zbk-spacing-30);
  }
  .height-40 {
    height: var(--zbk-spacing-40);
  }
  .height-50 {
    height: var(--zbk-spacing-50);
  }
  .height-60 {
    height: var(--zbk-spacing-60);
  }
  .height-70 {
    height: var(--zbk-spacing-70);
  }
  .height-80 {
    height: var(--zbk-spacing-80);
  }
  .height-90 {
    height: var(--zbk-spacing-90);
  }
  .height-100 {
    height: var(--zbk-spacing-100);
  }
  .min-height-auto {
    min-height: auto;
  }
  .min-height-full {
    min-height: 100%;
  }
  .min-height-viewport {
    min-height: 100vw;
  }
  .min-height-min {
    min-height: -moz-min-content;
    min-height: min-content;
  }
  .min-height-max {
    min-height: -moz-max-content;
    min-height: max-content;
  }
  .min-height-inherit {
    min-height: inherit;
  }
  .min-height-neg-1px {
    min-height: var(--zbk-spacing-neg-1px);
  }
  .min-height-0 {
    min-height: var(--zbk-spacing-0);
  }
  .min-height-1px {
    min-height: var(--zbk-spacing-1px);
  }
  .min-height-2px {
    min-height: var(--zbk-spacing-2px);
  }
  .min-height-025 {
    min-height: var(--zbk-spacing-025);
  }
  .min-height-05 {
    min-height: var(--zbk-spacing-05);
  }
  .min-height-1 {
    min-height: var(--zbk-spacing-1);
  }
  .min-height-105 {
    min-height: var(--zbk-spacing-105);
  }
  .min-height-2 {
    min-height: var(--zbk-spacing-2);
  }
  .min-height-205 {
    min-height: var(--zbk-spacing-205);
  }
  .min-height-3 {
    min-height: var(--zbk-spacing-3);
  }
  .min-height-4 {
    min-height: var(--zbk-spacing-4);
  }
  .min-height-5 {
    min-height: var(--zbk-spacing-5);
  }
  .min-height-6 {
    min-height: var(--zbk-spacing-6);
  }
  .min-height-7 {
    min-height: var(--zbk-spacing-7);
  }
  .min-height-8 {
    min-height: var(--zbk-spacing-8);
  }
  .min-height-9 {
    min-height: var(--zbk-spacing-9);
  }
  .min-height-10 {
    min-height: var(--zbk-spacing-10);
  }
  .min-height-15 {
    min-height: var(--zbk-spacing-15);
  }
  .min-height-20 {
    min-height: var(--zbk-spacing-20);
  }
  .min-height-25 {
    min-height: var(--zbk-spacing-25);
  }
  .min-height-30 {
    min-height: var(--zbk-spacing-30);
  }
  .min-height-40 {
    min-height: var(--zbk-spacing-40);
  }
  .min-height-50 {
    min-height: var(--zbk-spacing-50);
  }
  .min-height-60 {
    min-height: var(--zbk-spacing-60);
  }
  .min-height-70 {
    min-height: var(--zbk-spacing-70);
  }
  .min-height-80 {
    min-height: var(--zbk-spacing-80);
  }
  .min-height-90 {
    min-height: var(--zbk-spacing-90);
  }
  .min-height-100 {
    min-height: var(--zbk-spacing-100);
  }
  .max-height-auto {
    max-height: auto;
  }
  .max-height-full {
    max-height: 100%;
  }
  .max-height-viewport {
    max-height: 100vw;
  }
  .max-height-min {
    max-height: -moz-min-content;
    max-height: min-content;
  }
  .max-height-max {
    max-height: -moz-max-content;
    max-height: max-content;
  }
  .max-height-inherit {
    max-height: inherit;
  }
  .max-height-neg-1px {
    max-height: var(--zbk-spacing-neg-1px);
  }
  .max-height-0 {
    max-height: var(--zbk-spacing-0);
  }
  .max-height-1px {
    max-height: var(--zbk-spacing-1px);
  }
  .max-height-2px {
    max-height: var(--zbk-spacing-2px);
  }
  .max-height-025 {
    max-height: var(--zbk-spacing-025);
  }
  .max-height-05 {
    max-height: var(--zbk-spacing-05);
  }
  .max-height-1 {
    max-height: var(--zbk-spacing-1);
  }
  .max-height-105 {
    max-height: var(--zbk-spacing-105);
  }
  .max-height-2 {
    max-height: var(--zbk-spacing-2);
  }
  .max-height-205 {
    max-height: var(--zbk-spacing-205);
  }
  .max-height-3 {
    max-height: var(--zbk-spacing-3);
  }
  .max-height-4 {
    max-height: var(--zbk-spacing-4);
  }
  .max-height-5 {
    max-height: var(--zbk-spacing-5);
  }
  .max-height-6 {
    max-height: var(--zbk-spacing-6);
  }
  .max-height-7 {
    max-height: var(--zbk-spacing-7);
  }
  .max-height-8 {
    max-height: var(--zbk-spacing-8);
  }
  .max-height-9 {
    max-height: var(--zbk-spacing-9);
  }
  .max-height-10 {
    max-height: var(--zbk-spacing-10);
  }
  .max-height-15 {
    max-height: var(--zbk-spacing-15);
  }
  .max-height-20 {
    max-height: var(--zbk-spacing-20);
  }
  .max-height-25 {
    max-height: var(--zbk-spacing-25);
  }
  .max-height-30 {
    max-height: var(--zbk-spacing-30);
  }
  .max-height-40 {
    max-height: var(--zbk-spacing-40);
  }
  .max-height-50 {
    max-height: var(--zbk-spacing-50);
  }
  .max-height-60 {
    max-height: var(--zbk-spacing-60);
  }
  .max-height-70 {
    max-height: var(--zbk-spacing-70);
  }
  .max-height-80 {
    max-height: var(--zbk-spacing-80);
  }
  .max-height-90 {
    max-height: var(--zbk-spacing-90);
  }
  .max-height-100 {
    max-height: var(--zbk-spacing-100);
  }
  .width-auto {
    width: auto;
  }
  .width-full {
    width: 100%;
  }
  .width-viewport {
    width: 100vw;
  }
  .width-min {
    width: -moz-min-content;
    width: min-content;
  }
  .width-max {
    width: -moz-max-content;
    width: max-content;
  }
  .width-inherit {
    width: inherit;
  }
  .width-neg-1px {
    width: var(--zbk-spacing-neg-1px);
  }
  .width-0 {
    width: var(--zbk-spacing-0);
  }
  .width-1px {
    width: var(--zbk-spacing-1px);
  }
  .width-2px {
    width: var(--zbk-spacing-2px);
  }
  .width-025 {
    width: var(--zbk-spacing-025);
  }
  .width-05 {
    width: var(--zbk-spacing-05);
  }
  .width-1 {
    width: var(--zbk-spacing-1);
  }
  .width-105 {
    width: var(--zbk-spacing-105);
  }
  .width-2 {
    width: var(--zbk-spacing-2);
  }
  .width-205 {
    width: var(--zbk-spacing-205);
  }
  .width-3 {
    width: var(--zbk-spacing-3);
  }
  .width-4 {
    width: var(--zbk-spacing-4);
  }
  .width-5 {
    width: var(--zbk-spacing-5);
  }
  .width-6 {
    width: var(--zbk-spacing-6);
  }
  .width-7 {
    width: var(--zbk-spacing-7);
  }
  .width-8 {
    width: var(--zbk-spacing-8);
  }
  .width-9 {
    width: var(--zbk-spacing-9);
  }
  .width-10 {
    width: var(--zbk-spacing-10);
  }
  .width-15 {
    width: var(--zbk-spacing-15);
  }
  .width-20 {
    width: var(--zbk-spacing-20);
  }
  .width-25 {
    width: var(--zbk-spacing-25);
  }
  .width-30 {
    width: var(--zbk-spacing-30);
  }
  .width-40 {
    width: var(--zbk-spacing-40);
  }
  .width-50 {
    width: var(--zbk-spacing-50);
  }
  .width-60 {
    width: var(--zbk-spacing-60);
  }
  .width-70 {
    width: var(--zbk-spacing-70);
  }
  .width-80 {
    width: var(--zbk-spacing-80);
  }
  .width-90 {
    width: var(--zbk-spacing-90);
  }
  .width-100 {
    width: var(--zbk-spacing-100);
  }
  .min-width-auto {
    min-width: auto;
  }
  .min-width-full {
    min-width: 100%;
  }
  .min-width-viewport {
    min-width: 100vw;
  }
  .min-width-min {
    min-width: -moz-min-content;
    min-width: min-content;
  }
  .min-width-max {
    min-width: -moz-max-content;
    min-width: max-content;
  }
  .min-width-inherit {
    min-width: inherit;
  }
  .min-width-neg-1px {
    min-width: var(--zbk-spacing-neg-1px);
  }
  .min-width-0 {
    min-width: var(--zbk-spacing-0);
  }
  .min-width-1px {
    min-width: var(--zbk-spacing-1px);
  }
  .min-width-2px {
    min-width: var(--zbk-spacing-2px);
  }
  .min-width-025 {
    min-width: var(--zbk-spacing-025);
  }
  .min-width-05 {
    min-width: var(--zbk-spacing-05);
  }
  .min-width-1 {
    min-width: var(--zbk-spacing-1);
  }
  .min-width-105 {
    min-width: var(--zbk-spacing-105);
  }
  .min-width-2 {
    min-width: var(--zbk-spacing-2);
  }
  .min-width-205 {
    min-width: var(--zbk-spacing-205);
  }
  .min-width-3 {
    min-width: var(--zbk-spacing-3);
  }
  .min-width-4 {
    min-width: var(--zbk-spacing-4);
  }
  .min-width-5 {
    min-width: var(--zbk-spacing-5);
  }
  .min-width-6 {
    min-width: var(--zbk-spacing-6);
  }
  .min-width-7 {
    min-width: var(--zbk-spacing-7);
  }
  .min-width-8 {
    min-width: var(--zbk-spacing-8);
  }
  .min-width-9 {
    min-width: var(--zbk-spacing-9);
  }
  .min-width-10 {
    min-width: var(--zbk-spacing-10);
  }
  .min-width-15 {
    min-width: var(--zbk-spacing-15);
  }
  .min-width-20 {
    min-width: var(--zbk-spacing-20);
  }
  .min-width-25 {
    min-width: var(--zbk-spacing-25);
  }
  .min-width-30 {
    min-width: var(--zbk-spacing-30);
  }
  .min-width-40 {
    min-width: var(--zbk-spacing-40);
  }
  .min-width-50 {
    min-width: var(--zbk-spacing-50);
  }
  .min-width-60 {
    min-width: var(--zbk-spacing-60);
  }
  .min-width-70 {
    min-width: var(--zbk-spacing-70);
  }
  .min-width-80 {
    min-width: var(--zbk-spacing-80);
  }
  .min-width-90 {
    min-width: var(--zbk-spacing-90);
  }
  .min-width-100 {
    min-width: var(--zbk-spacing-100);
  }
  .max-width-auto {
    max-width: auto;
  }
  .max-width-full {
    max-width: 100%;
  }
  .max-width-viewport {
    max-width: 100vw;
  }
  .max-width-min {
    max-width: -moz-min-content;
    max-width: min-content;
  }
  .max-width-max {
    max-width: -moz-max-content;
    max-width: max-content;
  }
  .max-width-inherit {
    max-width: inherit;
  }
  .max-width-neg-1px {
    max-width: var(--zbk-spacing-neg-1px);
  }
  .max-width-0 {
    max-width: var(--zbk-spacing-0);
  }
  .max-width-1px {
    max-width: var(--zbk-spacing-1px);
  }
  .max-width-2px {
    max-width: var(--zbk-spacing-2px);
  }
  .max-width-025 {
    max-width: var(--zbk-spacing-025);
  }
  .max-width-05 {
    max-width: var(--zbk-spacing-05);
  }
  .max-width-1 {
    max-width: var(--zbk-spacing-1);
  }
  .max-width-105 {
    max-width: var(--zbk-spacing-105);
  }
  .max-width-2 {
    max-width: var(--zbk-spacing-2);
  }
  .max-width-205 {
    max-width: var(--zbk-spacing-205);
  }
  .max-width-3 {
    max-width: var(--zbk-spacing-3);
  }
  .max-width-4 {
    max-width: var(--zbk-spacing-4);
  }
  .max-width-5 {
    max-width: var(--zbk-spacing-5);
  }
  .max-width-6 {
    max-width: var(--zbk-spacing-6);
  }
  .max-width-7 {
    max-width: var(--zbk-spacing-7);
  }
  .max-width-8 {
    max-width: var(--zbk-spacing-8);
  }
  .max-width-9 {
    max-width: var(--zbk-spacing-9);
  }
  .max-width-10 {
    max-width: var(--zbk-spacing-10);
  }
  .max-width-15 {
    max-width: var(--zbk-spacing-15);
  }
  .max-width-20 {
    max-width: var(--zbk-spacing-20);
  }
  .max-width-25 {
    max-width: var(--zbk-spacing-25);
  }
  .max-width-30 {
    max-width: var(--zbk-spacing-30);
  }
  .max-width-40 {
    max-width: var(--zbk-spacing-40);
  }
  .max-width-50 {
    max-width: var(--zbk-spacing-50);
  }
  .max-width-60 {
    max-width: var(--zbk-spacing-60);
  }
  .max-width-70 {
    max-width: var(--zbk-spacing-70);
  }
  .max-width-80 {
    max-width: var(--zbk-spacing-80);
  }
  .max-width-90 {
    max-width: var(--zbk-spacing-90);
  }
  .max-width-100 {
    max-width: var(--zbk-spacing-100);
  }
  @media (min-width: 40rem) {
    .tablet\:height-auto {
      height: auto;
    }
    .tablet\:height-full {
      height: 100%;
    }
    .tablet\:height-viewport {
      height: 100vw;
    }
    .tablet\:height-min {
      height: -moz-min-content;
      height: min-content;
    }
    .tablet\:height-max {
      height: -moz-max-content;
      height: max-content;
    }
    .tablet\:height-inherit {
      height: inherit;
    }
    .tablet\:height-neg-1px {
      height: var(--zbk-spacing-neg-1px);
    }
    .tablet\:height-0 {
      height: var(--zbk-spacing-0);
    }
    .tablet\:height-1px {
      height: var(--zbk-spacing-1px);
    }
    .tablet\:height-2px {
      height: var(--zbk-spacing-2px);
    }
    .tablet\:height-025 {
      height: var(--zbk-spacing-025);
    }
    .tablet\:height-05 {
      height: var(--zbk-spacing-05);
    }
    .tablet\:height-1 {
      height: var(--zbk-spacing-1);
    }
    .tablet\:height-105 {
      height: var(--zbk-spacing-105);
    }
    .tablet\:height-2 {
      height: var(--zbk-spacing-2);
    }
    .tablet\:height-205 {
      height: var(--zbk-spacing-205);
    }
    .tablet\:height-3 {
      height: var(--zbk-spacing-3);
    }
    .tablet\:height-4 {
      height: var(--zbk-spacing-4);
    }
    .tablet\:height-5 {
      height: var(--zbk-spacing-5);
    }
    .tablet\:height-6 {
      height: var(--zbk-spacing-6);
    }
    .tablet\:height-7 {
      height: var(--zbk-spacing-7);
    }
    .tablet\:height-8 {
      height: var(--zbk-spacing-8);
    }
    .tablet\:height-9 {
      height: var(--zbk-spacing-9);
    }
    .tablet\:height-10 {
      height: var(--zbk-spacing-10);
    }
    .tablet\:height-15 {
      height: var(--zbk-spacing-15);
    }
    .tablet\:height-20 {
      height: var(--zbk-spacing-20);
    }
    .tablet\:height-25 {
      height: var(--zbk-spacing-25);
    }
    .tablet\:height-30 {
      height: var(--zbk-spacing-30);
    }
    .tablet\:height-40 {
      height: var(--zbk-spacing-40);
    }
    .tablet\:height-50 {
      height: var(--zbk-spacing-50);
    }
    .tablet\:height-60 {
      height: var(--zbk-spacing-60);
    }
    .tablet\:height-70 {
      height: var(--zbk-spacing-70);
    }
    .tablet\:height-80 {
      height: var(--zbk-spacing-80);
    }
    .tablet\:height-90 {
      height: var(--zbk-spacing-90);
    }
    .tablet\:height-100 {
      height: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 50rem) {
    .tablet-lg\:height-auto {
      height: auto;
    }
    .tablet-lg\:height-full {
      height: 100%;
    }
    .tablet-lg\:height-viewport {
      height: 100vw;
    }
    .tablet-lg\:height-min {
      height: -moz-min-content;
      height: min-content;
    }
    .tablet-lg\:height-max {
      height: -moz-max-content;
      height: max-content;
    }
    .tablet-lg\:height-inherit {
      height: inherit;
    }
    .tablet-lg\:height-neg-1px {
      height: var(--zbk-spacing-neg-1px);
    }
    .tablet-lg\:height-0 {
      height: var(--zbk-spacing-0);
    }
    .tablet-lg\:height-1px {
      height: var(--zbk-spacing-1px);
    }
    .tablet-lg\:height-2px {
      height: var(--zbk-spacing-2px);
    }
    .tablet-lg\:height-025 {
      height: var(--zbk-spacing-025);
    }
    .tablet-lg\:height-05 {
      height: var(--zbk-spacing-05);
    }
    .tablet-lg\:height-1 {
      height: var(--zbk-spacing-1);
    }
    .tablet-lg\:height-105 {
      height: var(--zbk-spacing-105);
    }
    .tablet-lg\:height-2 {
      height: var(--zbk-spacing-2);
    }
    .tablet-lg\:height-205 {
      height: var(--zbk-spacing-205);
    }
    .tablet-lg\:height-3 {
      height: var(--zbk-spacing-3);
    }
    .tablet-lg\:height-4 {
      height: var(--zbk-spacing-4);
    }
    .tablet-lg\:height-5 {
      height: var(--zbk-spacing-5);
    }
    .tablet-lg\:height-6 {
      height: var(--zbk-spacing-6);
    }
    .tablet-lg\:height-7 {
      height: var(--zbk-spacing-7);
    }
    .tablet-lg\:height-8 {
      height: var(--zbk-spacing-8);
    }
    .tablet-lg\:height-9 {
      height: var(--zbk-spacing-9);
    }
    .tablet-lg\:height-10 {
      height: var(--zbk-spacing-10);
    }
    .tablet-lg\:height-15 {
      height: var(--zbk-spacing-15);
    }
    .tablet-lg\:height-20 {
      height: var(--zbk-spacing-20);
    }
    .tablet-lg\:height-25 {
      height: var(--zbk-spacing-25);
    }
    .tablet-lg\:height-30 {
      height: var(--zbk-spacing-30);
    }
    .tablet-lg\:height-40 {
      height: var(--zbk-spacing-40);
    }
    .tablet-lg\:height-50 {
      height: var(--zbk-spacing-50);
    }
    .tablet-lg\:height-60 {
      height: var(--zbk-spacing-60);
    }
    .tablet-lg\:height-70 {
      height: var(--zbk-spacing-70);
    }
    .tablet-lg\:height-80 {
      height: var(--zbk-spacing-80);
    }
    .tablet-lg\:height-90 {
      height: var(--zbk-spacing-90);
    }
    .tablet-lg\:height-100 {
      height: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 70rem) {
    .desktop\:height-auto {
      height: auto;
    }
    .desktop\:height-full {
      height: 100%;
    }
    .desktop\:height-viewport {
      height: 100vw;
    }
    .desktop\:height-min {
      height: -moz-min-content;
      height: min-content;
    }
    .desktop\:height-max {
      height: -moz-max-content;
      height: max-content;
    }
    .desktop\:height-inherit {
      height: inherit;
    }
    .desktop\:height-neg-1px {
      height: var(--zbk-spacing-neg-1px);
    }
    .desktop\:height-0 {
      height: var(--zbk-spacing-0);
    }
    .desktop\:height-1px {
      height: var(--zbk-spacing-1px);
    }
    .desktop\:height-2px {
      height: var(--zbk-spacing-2px);
    }
    .desktop\:height-025 {
      height: var(--zbk-spacing-025);
    }
    .desktop\:height-05 {
      height: var(--zbk-spacing-05);
    }
    .desktop\:height-1 {
      height: var(--zbk-spacing-1);
    }
    .desktop\:height-105 {
      height: var(--zbk-spacing-105);
    }
    .desktop\:height-2 {
      height: var(--zbk-spacing-2);
    }
    .desktop\:height-205 {
      height: var(--zbk-spacing-205);
    }
    .desktop\:height-3 {
      height: var(--zbk-spacing-3);
    }
    .desktop\:height-4 {
      height: var(--zbk-spacing-4);
    }
    .desktop\:height-5 {
      height: var(--zbk-spacing-5);
    }
    .desktop\:height-6 {
      height: var(--zbk-spacing-6);
    }
    .desktop\:height-7 {
      height: var(--zbk-spacing-7);
    }
    .desktop\:height-8 {
      height: var(--zbk-spacing-8);
    }
    .desktop\:height-9 {
      height: var(--zbk-spacing-9);
    }
    .desktop\:height-10 {
      height: var(--zbk-spacing-10);
    }
    .desktop\:height-15 {
      height: var(--zbk-spacing-15);
    }
    .desktop\:height-20 {
      height: var(--zbk-spacing-20);
    }
    .desktop\:height-25 {
      height: var(--zbk-spacing-25);
    }
    .desktop\:height-30 {
      height: var(--zbk-spacing-30);
    }
    .desktop\:height-40 {
      height: var(--zbk-spacing-40);
    }
    .desktop\:height-50 {
      height: var(--zbk-spacing-50);
    }
    .desktop\:height-60 {
      height: var(--zbk-spacing-60);
    }
    .desktop\:height-70 {
      height: var(--zbk-spacing-70);
    }
    .desktop\:height-80 {
      height: var(--zbk-spacing-80);
    }
    .desktop\:height-90 {
      height: var(--zbk-spacing-90);
    }
    .desktop\:height-100 {
      height: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 80rem) {
    .desktop-lg\:height-auto {
      height: auto;
    }
    .desktop-lg\:height-full {
      height: 100%;
    }
    .desktop-lg\:height-viewport {
      height: 100vw;
    }
    .desktop-lg\:height-min {
      height: -moz-min-content;
      height: min-content;
    }
    .desktop-lg\:height-max {
      height: -moz-max-content;
      height: max-content;
    }
    .desktop-lg\:height-inherit {
      height: inherit;
    }
    .desktop-lg\:height-neg-1px {
      height: var(--zbk-spacing-neg-1px);
    }
    .desktop-lg\:height-0 {
      height: var(--zbk-spacing-0);
    }
    .desktop-lg\:height-1px {
      height: var(--zbk-spacing-1px);
    }
    .desktop-lg\:height-2px {
      height: var(--zbk-spacing-2px);
    }
    .desktop-lg\:height-025 {
      height: var(--zbk-spacing-025);
    }
    .desktop-lg\:height-05 {
      height: var(--zbk-spacing-05);
    }
    .desktop-lg\:height-1 {
      height: var(--zbk-spacing-1);
    }
    .desktop-lg\:height-105 {
      height: var(--zbk-spacing-105);
    }
    .desktop-lg\:height-2 {
      height: var(--zbk-spacing-2);
    }
    .desktop-lg\:height-205 {
      height: var(--zbk-spacing-205);
    }
    .desktop-lg\:height-3 {
      height: var(--zbk-spacing-3);
    }
    .desktop-lg\:height-4 {
      height: var(--zbk-spacing-4);
    }
    .desktop-lg\:height-5 {
      height: var(--zbk-spacing-5);
    }
    .desktop-lg\:height-6 {
      height: var(--zbk-spacing-6);
    }
    .desktop-lg\:height-7 {
      height: var(--zbk-spacing-7);
    }
    .desktop-lg\:height-8 {
      height: var(--zbk-spacing-8);
    }
    .desktop-lg\:height-9 {
      height: var(--zbk-spacing-9);
    }
    .desktop-lg\:height-10 {
      height: var(--zbk-spacing-10);
    }
    .desktop-lg\:height-15 {
      height: var(--zbk-spacing-15);
    }
    .desktop-lg\:height-20 {
      height: var(--zbk-spacing-20);
    }
    .desktop-lg\:height-25 {
      height: var(--zbk-spacing-25);
    }
    .desktop-lg\:height-30 {
      height: var(--zbk-spacing-30);
    }
    .desktop-lg\:height-40 {
      height: var(--zbk-spacing-40);
    }
    .desktop-lg\:height-50 {
      height: var(--zbk-spacing-50);
    }
    .desktop-lg\:height-60 {
      height: var(--zbk-spacing-60);
    }
    .desktop-lg\:height-70 {
      height: var(--zbk-spacing-70);
    }
    .desktop-lg\:height-80 {
      height: var(--zbk-spacing-80);
    }
    .desktop-lg\:height-90 {
      height: var(--zbk-spacing-90);
    }
    .desktop-lg\:height-100 {
      height: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 100rem) {
    .widescreen\:height-auto {
      height: auto;
    }
    .widescreen\:height-full {
      height: 100%;
    }
    .widescreen\:height-viewport {
      height: 100vw;
    }
    .widescreen\:height-min {
      height: -moz-min-content;
      height: min-content;
    }
    .widescreen\:height-max {
      height: -moz-max-content;
      height: max-content;
    }
    .widescreen\:height-inherit {
      height: inherit;
    }
    .widescreen\:height-neg-1px {
      height: var(--zbk-spacing-neg-1px);
    }
    .widescreen\:height-0 {
      height: var(--zbk-spacing-0);
    }
    .widescreen\:height-1px {
      height: var(--zbk-spacing-1px);
    }
    .widescreen\:height-2px {
      height: var(--zbk-spacing-2px);
    }
    .widescreen\:height-025 {
      height: var(--zbk-spacing-025);
    }
    .widescreen\:height-05 {
      height: var(--zbk-spacing-05);
    }
    .widescreen\:height-1 {
      height: var(--zbk-spacing-1);
    }
    .widescreen\:height-105 {
      height: var(--zbk-spacing-105);
    }
    .widescreen\:height-2 {
      height: var(--zbk-spacing-2);
    }
    .widescreen\:height-205 {
      height: var(--zbk-spacing-205);
    }
    .widescreen\:height-3 {
      height: var(--zbk-spacing-3);
    }
    .widescreen\:height-4 {
      height: var(--zbk-spacing-4);
    }
    .widescreen\:height-5 {
      height: var(--zbk-spacing-5);
    }
    .widescreen\:height-6 {
      height: var(--zbk-spacing-6);
    }
    .widescreen\:height-7 {
      height: var(--zbk-spacing-7);
    }
    .widescreen\:height-8 {
      height: var(--zbk-spacing-8);
    }
    .widescreen\:height-9 {
      height: var(--zbk-spacing-9);
    }
    .widescreen\:height-10 {
      height: var(--zbk-spacing-10);
    }
    .widescreen\:height-15 {
      height: var(--zbk-spacing-15);
    }
    .widescreen\:height-20 {
      height: var(--zbk-spacing-20);
    }
    .widescreen\:height-25 {
      height: var(--zbk-spacing-25);
    }
    .widescreen\:height-30 {
      height: var(--zbk-spacing-30);
    }
    .widescreen\:height-40 {
      height: var(--zbk-spacing-40);
    }
    .widescreen\:height-50 {
      height: var(--zbk-spacing-50);
    }
    .widescreen\:height-60 {
      height: var(--zbk-spacing-60);
    }
    .widescreen\:height-70 {
      height: var(--zbk-spacing-70);
    }
    .widescreen\:height-80 {
      height: var(--zbk-spacing-80);
    }
    .widescreen\:height-90 {
      height: var(--zbk-spacing-90);
    }
    .widescreen\:height-100 {
      height: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 40rem) {
    .tablet\:min-height-auto {
      min-height: auto;
    }
    .tablet\:min-height-full {
      min-height: 100%;
    }
    .tablet\:min-height-viewport {
      min-height: 100vw;
    }
    .tablet\:min-height-min {
      min-height: -moz-min-content;
      min-height: min-content;
    }
    .tablet\:min-height-max {
      min-height: -moz-max-content;
      min-height: max-content;
    }
    .tablet\:min-height-inherit {
      min-height: inherit;
    }
    .tablet\:min-height-neg-1px {
      min-height: var(--zbk-spacing-neg-1px);
    }
    .tablet\:min-height-0 {
      min-height: var(--zbk-spacing-0);
    }
    .tablet\:min-height-1px {
      min-height: var(--zbk-spacing-1px);
    }
    .tablet\:min-height-2px {
      min-height: var(--zbk-spacing-2px);
    }
    .tablet\:min-height-025 {
      min-height: var(--zbk-spacing-025);
    }
    .tablet\:min-height-05 {
      min-height: var(--zbk-spacing-05);
    }
    .tablet\:min-height-1 {
      min-height: var(--zbk-spacing-1);
    }
    .tablet\:min-height-105 {
      min-height: var(--zbk-spacing-105);
    }
    .tablet\:min-height-2 {
      min-height: var(--zbk-spacing-2);
    }
    .tablet\:min-height-205 {
      min-height: var(--zbk-spacing-205);
    }
    .tablet\:min-height-3 {
      min-height: var(--zbk-spacing-3);
    }
    .tablet\:min-height-4 {
      min-height: var(--zbk-spacing-4);
    }
    .tablet\:min-height-5 {
      min-height: var(--zbk-spacing-5);
    }
    .tablet\:min-height-6 {
      min-height: var(--zbk-spacing-6);
    }
    .tablet\:min-height-7 {
      min-height: var(--zbk-spacing-7);
    }
    .tablet\:min-height-8 {
      min-height: var(--zbk-spacing-8);
    }
    .tablet\:min-height-9 {
      min-height: var(--zbk-spacing-9);
    }
    .tablet\:min-height-10 {
      min-height: var(--zbk-spacing-10);
    }
    .tablet\:min-height-15 {
      min-height: var(--zbk-spacing-15);
    }
    .tablet\:min-height-20 {
      min-height: var(--zbk-spacing-20);
    }
    .tablet\:min-height-25 {
      min-height: var(--zbk-spacing-25);
    }
    .tablet\:min-height-30 {
      min-height: var(--zbk-spacing-30);
    }
    .tablet\:min-height-40 {
      min-height: var(--zbk-spacing-40);
    }
    .tablet\:min-height-50 {
      min-height: var(--zbk-spacing-50);
    }
    .tablet\:min-height-60 {
      min-height: var(--zbk-spacing-60);
    }
    .tablet\:min-height-70 {
      min-height: var(--zbk-spacing-70);
    }
    .tablet\:min-height-80 {
      min-height: var(--zbk-spacing-80);
    }
    .tablet\:min-height-90 {
      min-height: var(--zbk-spacing-90);
    }
    .tablet\:min-height-100 {
      min-height: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 50rem) {
    .tablet-lg\:min-height-auto {
      min-height: auto;
    }
    .tablet-lg\:min-height-full {
      min-height: 100%;
    }
    .tablet-lg\:min-height-viewport {
      min-height: 100vw;
    }
    .tablet-lg\:min-height-min {
      min-height: -moz-min-content;
      min-height: min-content;
    }
    .tablet-lg\:min-height-max {
      min-height: -moz-max-content;
      min-height: max-content;
    }
    .tablet-lg\:min-height-inherit {
      min-height: inherit;
    }
    .tablet-lg\:min-height-neg-1px {
      min-height: var(--zbk-spacing-neg-1px);
    }
    .tablet-lg\:min-height-0 {
      min-height: var(--zbk-spacing-0);
    }
    .tablet-lg\:min-height-1px {
      min-height: var(--zbk-spacing-1px);
    }
    .tablet-lg\:min-height-2px {
      min-height: var(--zbk-spacing-2px);
    }
    .tablet-lg\:min-height-025 {
      min-height: var(--zbk-spacing-025);
    }
    .tablet-lg\:min-height-05 {
      min-height: var(--zbk-spacing-05);
    }
    .tablet-lg\:min-height-1 {
      min-height: var(--zbk-spacing-1);
    }
    .tablet-lg\:min-height-105 {
      min-height: var(--zbk-spacing-105);
    }
    .tablet-lg\:min-height-2 {
      min-height: var(--zbk-spacing-2);
    }
    .tablet-lg\:min-height-205 {
      min-height: var(--zbk-spacing-205);
    }
    .tablet-lg\:min-height-3 {
      min-height: var(--zbk-spacing-3);
    }
    .tablet-lg\:min-height-4 {
      min-height: var(--zbk-spacing-4);
    }
    .tablet-lg\:min-height-5 {
      min-height: var(--zbk-spacing-5);
    }
    .tablet-lg\:min-height-6 {
      min-height: var(--zbk-spacing-6);
    }
    .tablet-lg\:min-height-7 {
      min-height: var(--zbk-spacing-7);
    }
    .tablet-lg\:min-height-8 {
      min-height: var(--zbk-spacing-8);
    }
    .tablet-lg\:min-height-9 {
      min-height: var(--zbk-spacing-9);
    }
    .tablet-lg\:min-height-10 {
      min-height: var(--zbk-spacing-10);
    }
    .tablet-lg\:min-height-15 {
      min-height: var(--zbk-spacing-15);
    }
    .tablet-lg\:min-height-20 {
      min-height: var(--zbk-spacing-20);
    }
    .tablet-lg\:min-height-25 {
      min-height: var(--zbk-spacing-25);
    }
    .tablet-lg\:min-height-30 {
      min-height: var(--zbk-spacing-30);
    }
    .tablet-lg\:min-height-40 {
      min-height: var(--zbk-spacing-40);
    }
    .tablet-lg\:min-height-50 {
      min-height: var(--zbk-spacing-50);
    }
    .tablet-lg\:min-height-60 {
      min-height: var(--zbk-spacing-60);
    }
    .tablet-lg\:min-height-70 {
      min-height: var(--zbk-spacing-70);
    }
    .tablet-lg\:min-height-80 {
      min-height: var(--zbk-spacing-80);
    }
    .tablet-lg\:min-height-90 {
      min-height: var(--zbk-spacing-90);
    }
    .tablet-lg\:min-height-100 {
      min-height: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 70rem) {
    .desktop\:min-height-auto {
      min-height: auto;
    }
    .desktop\:min-height-full {
      min-height: 100%;
    }
    .desktop\:min-height-viewport {
      min-height: 100vw;
    }
    .desktop\:min-height-min {
      min-height: -moz-min-content;
      min-height: min-content;
    }
    .desktop\:min-height-max {
      min-height: -moz-max-content;
      min-height: max-content;
    }
    .desktop\:min-height-inherit {
      min-height: inherit;
    }
    .desktop\:min-height-neg-1px {
      min-height: var(--zbk-spacing-neg-1px);
    }
    .desktop\:min-height-0 {
      min-height: var(--zbk-spacing-0);
    }
    .desktop\:min-height-1px {
      min-height: var(--zbk-spacing-1px);
    }
    .desktop\:min-height-2px {
      min-height: var(--zbk-spacing-2px);
    }
    .desktop\:min-height-025 {
      min-height: var(--zbk-spacing-025);
    }
    .desktop\:min-height-05 {
      min-height: var(--zbk-spacing-05);
    }
    .desktop\:min-height-1 {
      min-height: var(--zbk-spacing-1);
    }
    .desktop\:min-height-105 {
      min-height: var(--zbk-spacing-105);
    }
    .desktop\:min-height-2 {
      min-height: var(--zbk-spacing-2);
    }
    .desktop\:min-height-205 {
      min-height: var(--zbk-spacing-205);
    }
    .desktop\:min-height-3 {
      min-height: var(--zbk-spacing-3);
    }
    .desktop\:min-height-4 {
      min-height: var(--zbk-spacing-4);
    }
    .desktop\:min-height-5 {
      min-height: var(--zbk-spacing-5);
    }
    .desktop\:min-height-6 {
      min-height: var(--zbk-spacing-6);
    }
    .desktop\:min-height-7 {
      min-height: var(--zbk-spacing-7);
    }
    .desktop\:min-height-8 {
      min-height: var(--zbk-spacing-8);
    }
    .desktop\:min-height-9 {
      min-height: var(--zbk-spacing-9);
    }
    .desktop\:min-height-10 {
      min-height: var(--zbk-spacing-10);
    }
    .desktop\:min-height-15 {
      min-height: var(--zbk-spacing-15);
    }
    .desktop\:min-height-20 {
      min-height: var(--zbk-spacing-20);
    }
    .desktop\:min-height-25 {
      min-height: var(--zbk-spacing-25);
    }
    .desktop\:min-height-30 {
      min-height: var(--zbk-spacing-30);
    }
    .desktop\:min-height-40 {
      min-height: var(--zbk-spacing-40);
    }
    .desktop\:min-height-50 {
      min-height: var(--zbk-spacing-50);
    }
    .desktop\:min-height-60 {
      min-height: var(--zbk-spacing-60);
    }
    .desktop\:min-height-70 {
      min-height: var(--zbk-spacing-70);
    }
    .desktop\:min-height-80 {
      min-height: var(--zbk-spacing-80);
    }
    .desktop\:min-height-90 {
      min-height: var(--zbk-spacing-90);
    }
    .desktop\:min-height-100 {
      min-height: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 80rem) {
    .desktop-lg\:min-height-auto {
      min-height: auto;
    }
    .desktop-lg\:min-height-full {
      min-height: 100%;
    }
    .desktop-lg\:min-height-viewport {
      min-height: 100vw;
    }
    .desktop-lg\:min-height-min {
      min-height: -moz-min-content;
      min-height: min-content;
    }
    .desktop-lg\:min-height-max {
      min-height: -moz-max-content;
      min-height: max-content;
    }
    .desktop-lg\:min-height-inherit {
      min-height: inherit;
    }
    .desktop-lg\:min-height-neg-1px {
      min-height: var(--zbk-spacing-neg-1px);
    }
    .desktop-lg\:min-height-0 {
      min-height: var(--zbk-spacing-0);
    }
    .desktop-lg\:min-height-1px {
      min-height: var(--zbk-spacing-1px);
    }
    .desktop-lg\:min-height-2px {
      min-height: var(--zbk-spacing-2px);
    }
    .desktop-lg\:min-height-025 {
      min-height: var(--zbk-spacing-025);
    }
    .desktop-lg\:min-height-05 {
      min-height: var(--zbk-spacing-05);
    }
    .desktop-lg\:min-height-1 {
      min-height: var(--zbk-spacing-1);
    }
    .desktop-lg\:min-height-105 {
      min-height: var(--zbk-spacing-105);
    }
    .desktop-lg\:min-height-2 {
      min-height: var(--zbk-spacing-2);
    }
    .desktop-lg\:min-height-205 {
      min-height: var(--zbk-spacing-205);
    }
    .desktop-lg\:min-height-3 {
      min-height: var(--zbk-spacing-3);
    }
    .desktop-lg\:min-height-4 {
      min-height: var(--zbk-spacing-4);
    }
    .desktop-lg\:min-height-5 {
      min-height: var(--zbk-spacing-5);
    }
    .desktop-lg\:min-height-6 {
      min-height: var(--zbk-spacing-6);
    }
    .desktop-lg\:min-height-7 {
      min-height: var(--zbk-spacing-7);
    }
    .desktop-lg\:min-height-8 {
      min-height: var(--zbk-spacing-8);
    }
    .desktop-lg\:min-height-9 {
      min-height: var(--zbk-spacing-9);
    }
    .desktop-lg\:min-height-10 {
      min-height: var(--zbk-spacing-10);
    }
    .desktop-lg\:min-height-15 {
      min-height: var(--zbk-spacing-15);
    }
    .desktop-lg\:min-height-20 {
      min-height: var(--zbk-spacing-20);
    }
    .desktop-lg\:min-height-25 {
      min-height: var(--zbk-spacing-25);
    }
    .desktop-lg\:min-height-30 {
      min-height: var(--zbk-spacing-30);
    }
    .desktop-lg\:min-height-40 {
      min-height: var(--zbk-spacing-40);
    }
    .desktop-lg\:min-height-50 {
      min-height: var(--zbk-spacing-50);
    }
    .desktop-lg\:min-height-60 {
      min-height: var(--zbk-spacing-60);
    }
    .desktop-lg\:min-height-70 {
      min-height: var(--zbk-spacing-70);
    }
    .desktop-lg\:min-height-80 {
      min-height: var(--zbk-spacing-80);
    }
    .desktop-lg\:min-height-90 {
      min-height: var(--zbk-spacing-90);
    }
    .desktop-lg\:min-height-100 {
      min-height: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 100rem) {
    .widescreen\:min-height-auto {
      min-height: auto;
    }
    .widescreen\:min-height-full {
      min-height: 100%;
    }
    .widescreen\:min-height-viewport {
      min-height: 100vw;
    }
    .widescreen\:min-height-min {
      min-height: -moz-min-content;
      min-height: min-content;
    }
    .widescreen\:min-height-max {
      min-height: -moz-max-content;
      min-height: max-content;
    }
    .widescreen\:min-height-inherit {
      min-height: inherit;
    }
    .widescreen\:min-height-neg-1px {
      min-height: var(--zbk-spacing-neg-1px);
    }
    .widescreen\:min-height-0 {
      min-height: var(--zbk-spacing-0);
    }
    .widescreen\:min-height-1px {
      min-height: var(--zbk-spacing-1px);
    }
    .widescreen\:min-height-2px {
      min-height: var(--zbk-spacing-2px);
    }
    .widescreen\:min-height-025 {
      min-height: var(--zbk-spacing-025);
    }
    .widescreen\:min-height-05 {
      min-height: var(--zbk-spacing-05);
    }
    .widescreen\:min-height-1 {
      min-height: var(--zbk-spacing-1);
    }
    .widescreen\:min-height-105 {
      min-height: var(--zbk-spacing-105);
    }
    .widescreen\:min-height-2 {
      min-height: var(--zbk-spacing-2);
    }
    .widescreen\:min-height-205 {
      min-height: var(--zbk-spacing-205);
    }
    .widescreen\:min-height-3 {
      min-height: var(--zbk-spacing-3);
    }
    .widescreen\:min-height-4 {
      min-height: var(--zbk-spacing-4);
    }
    .widescreen\:min-height-5 {
      min-height: var(--zbk-spacing-5);
    }
    .widescreen\:min-height-6 {
      min-height: var(--zbk-spacing-6);
    }
    .widescreen\:min-height-7 {
      min-height: var(--zbk-spacing-7);
    }
    .widescreen\:min-height-8 {
      min-height: var(--zbk-spacing-8);
    }
    .widescreen\:min-height-9 {
      min-height: var(--zbk-spacing-9);
    }
    .widescreen\:min-height-10 {
      min-height: var(--zbk-spacing-10);
    }
    .widescreen\:min-height-15 {
      min-height: var(--zbk-spacing-15);
    }
    .widescreen\:min-height-20 {
      min-height: var(--zbk-spacing-20);
    }
    .widescreen\:min-height-25 {
      min-height: var(--zbk-spacing-25);
    }
    .widescreen\:min-height-30 {
      min-height: var(--zbk-spacing-30);
    }
    .widescreen\:min-height-40 {
      min-height: var(--zbk-spacing-40);
    }
    .widescreen\:min-height-50 {
      min-height: var(--zbk-spacing-50);
    }
    .widescreen\:min-height-60 {
      min-height: var(--zbk-spacing-60);
    }
    .widescreen\:min-height-70 {
      min-height: var(--zbk-spacing-70);
    }
    .widescreen\:min-height-80 {
      min-height: var(--zbk-spacing-80);
    }
    .widescreen\:min-height-90 {
      min-height: var(--zbk-spacing-90);
    }
    .widescreen\:min-height-100 {
      min-height: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 40rem) {
    .tablet\:max-height-auto {
      max-height: auto;
    }
    .tablet\:max-height-full {
      max-height: 100%;
    }
    .tablet\:max-height-viewport {
      max-height: 100vw;
    }
    .tablet\:max-height-min {
      max-height: -moz-min-content;
      max-height: min-content;
    }
    .tablet\:max-height-max {
      max-height: -moz-max-content;
      max-height: max-content;
    }
    .tablet\:max-height-inherit {
      max-height: inherit;
    }
    .tablet\:max-height-neg-1px {
      max-height: var(--zbk-spacing-neg-1px);
    }
    .tablet\:max-height-0 {
      max-height: var(--zbk-spacing-0);
    }
    .tablet\:max-height-1px {
      max-height: var(--zbk-spacing-1px);
    }
    .tablet\:max-height-2px {
      max-height: var(--zbk-spacing-2px);
    }
    .tablet\:max-height-025 {
      max-height: var(--zbk-spacing-025);
    }
    .tablet\:max-height-05 {
      max-height: var(--zbk-spacing-05);
    }
    .tablet\:max-height-1 {
      max-height: var(--zbk-spacing-1);
    }
    .tablet\:max-height-105 {
      max-height: var(--zbk-spacing-105);
    }
    .tablet\:max-height-2 {
      max-height: var(--zbk-spacing-2);
    }
    .tablet\:max-height-205 {
      max-height: var(--zbk-spacing-205);
    }
    .tablet\:max-height-3 {
      max-height: var(--zbk-spacing-3);
    }
    .tablet\:max-height-4 {
      max-height: var(--zbk-spacing-4);
    }
    .tablet\:max-height-5 {
      max-height: var(--zbk-spacing-5);
    }
    .tablet\:max-height-6 {
      max-height: var(--zbk-spacing-6);
    }
    .tablet\:max-height-7 {
      max-height: var(--zbk-spacing-7);
    }
    .tablet\:max-height-8 {
      max-height: var(--zbk-spacing-8);
    }
    .tablet\:max-height-9 {
      max-height: var(--zbk-spacing-9);
    }
    .tablet\:max-height-10 {
      max-height: var(--zbk-spacing-10);
    }
    .tablet\:max-height-15 {
      max-height: var(--zbk-spacing-15);
    }
    .tablet\:max-height-20 {
      max-height: var(--zbk-spacing-20);
    }
    .tablet\:max-height-25 {
      max-height: var(--zbk-spacing-25);
    }
    .tablet\:max-height-30 {
      max-height: var(--zbk-spacing-30);
    }
    .tablet\:max-height-40 {
      max-height: var(--zbk-spacing-40);
    }
    .tablet\:max-height-50 {
      max-height: var(--zbk-spacing-50);
    }
    .tablet\:max-height-60 {
      max-height: var(--zbk-spacing-60);
    }
    .tablet\:max-height-70 {
      max-height: var(--zbk-spacing-70);
    }
    .tablet\:max-height-80 {
      max-height: var(--zbk-spacing-80);
    }
    .tablet\:max-height-90 {
      max-height: var(--zbk-spacing-90);
    }
    .tablet\:max-height-100 {
      max-height: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 50rem) {
    .tablet-lg\:max-height-auto {
      max-height: auto;
    }
    .tablet-lg\:max-height-full {
      max-height: 100%;
    }
    .tablet-lg\:max-height-viewport {
      max-height: 100vw;
    }
    .tablet-lg\:max-height-min {
      max-height: -moz-min-content;
      max-height: min-content;
    }
    .tablet-lg\:max-height-max {
      max-height: -moz-max-content;
      max-height: max-content;
    }
    .tablet-lg\:max-height-inherit {
      max-height: inherit;
    }
    .tablet-lg\:max-height-neg-1px {
      max-height: var(--zbk-spacing-neg-1px);
    }
    .tablet-lg\:max-height-0 {
      max-height: var(--zbk-spacing-0);
    }
    .tablet-lg\:max-height-1px {
      max-height: var(--zbk-spacing-1px);
    }
    .tablet-lg\:max-height-2px {
      max-height: var(--zbk-spacing-2px);
    }
    .tablet-lg\:max-height-025 {
      max-height: var(--zbk-spacing-025);
    }
    .tablet-lg\:max-height-05 {
      max-height: var(--zbk-spacing-05);
    }
    .tablet-lg\:max-height-1 {
      max-height: var(--zbk-spacing-1);
    }
    .tablet-lg\:max-height-105 {
      max-height: var(--zbk-spacing-105);
    }
    .tablet-lg\:max-height-2 {
      max-height: var(--zbk-spacing-2);
    }
    .tablet-lg\:max-height-205 {
      max-height: var(--zbk-spacing-205);
    }
    .tablet-lg\:max-height-3 {
      max-height: var(--zbk-spacing-3);
    }
    .tablet-lg\:max-height-4 {
      max-height: var(--zbk-spacing-4);
    }
    .tablet-lg\:max-height-5 {
      max-height: var(--zbk-spacing-5);
    }
    .tablet-lg\:max-height-6 {
      max-height: var(--zbk-spacing-6);
    }
    .tablet-lg\:max-height-7 {
      max-height: var(--zbk-spacing-7);
    }
    .tablet-lg\:max-height-8 {
      max-height: var(--zbk-spacing-8);
    }
    .tablet-lg\:max-height-9 {
      max-height: var(--zbk-spacing-9);
    }
    .tablet-lg\:max-height-10 {
      max-height: var(--zbk-spacing-10);
    }
    .tablet-lg\:max-height-15 {
      max-height: var(--zbk-spacing-15);
    }
    .tablet-lg\:max-height-20 {
      max-height: var(--zbk-spacing-20);
    }
    .tablet-lg\:max-height-25 {
      max-height: var(--zbk-spacing-25);
    }
    .tablet-lg\:max-height-30 {
      max-height: var(--zbk-spacing-30);
    }
    .tablet-lg\:max-height-40 {
      max-height: var(--zbk-spacing-40);
    }
    .tablet-lg\:max-height-50 {
      max-height: var(--zbk-spacing-50);
    }
    .tablet-lg\:max-height-60 {
      max-height: var(--zbk-spacing-60);
    }
    .tablet-lg\:max-height-70 {
      max-height: var(--zbk-spacing-70);
    }
    .tablet-lg\:max-height-80 {
      max-height: var(--zbk-spacing-80);
    }
    .tablet-lg\:max-height-90 {
      max-height: var(--zbk-spacing-90);
    }
    .tablet-lg\:max-height-100 {
      max-height: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 70rem) {
    .desktop\:max-height-auto {
      max-height: auto;
    }
    .desktop\:max-height-full {
      max-height: 100%;
    }
    .desktop\:max-height-viewport {
      max-height: 100vw;
    }
    .desktop\:max-height-min {
      max-height: -moz-min-content;
      max-height: min-content;
    }
    .desktop\:max-height-max {
      max-height: -moz-max-content;
      max-height: max-content;
    }
    .desktop\:max-height-inherit {
      max-height: inherit;
    }
    .desktop\:max-height-neg-1px {
      max-height: var(--zbk-spacing-neg-1px);
    }
    .desktop\:max-height-0 {
      max-height: var(--zbk-spacing-0);
    }
    .desktop\:max-height-1px {
      max-height: var(--zbk-spacing-1px);
    }
    .desktop\:max-height-2px {
      max-height: var(--zbk-spacing-2px);
    }
    .desktop\:max-height-025 {
      max-height: var(--zbk-spacing-025);
    }
    .desktop\:max-height-05 {
      max-height: var(--zbk-spacing-05);
    }
    .desktop\:max-height-1 {
      max-height: var(--zbk-spacing-1);
    }
    .desktop\:max-height-105 {
      max-height: var(--zbk-spacing-105);
    }
    .desktop\:max-height-2 {
      max-height: var(--zbk-spacing-2);
    }
    .desktop\:max-height-205 {
      max-height: var(--zbk-spacing-205);
    }
    .desktop\:max-height-3 {
      max-height: var(--zbk-spacing-3);
    }
    .desktop\:max-height-4 {
      max-height: var(--zbk-spacing-4);
    }
    .desktop\:max-height-5 {
      max-height: var(--zbk-spacing-5);
    }
    .desktop\:max-height-6 {
      max-height: var(--zbk-spacing-6);
    }
    .desktop\:max-height-7 {
      max-height: var(--zbk-spacing-7);
    }
    .desktop\:max-height-8 {
      max-height: var(--zbk-spacing-8);
    }
    .desktop\:max-height-9 {
      max-height: var(--zbk-spacing-9);
    }
    .desktop\:max-height-10 {
      max-height: var(--zbk-spacing-10);
    }
    .desktop\:max-height-15 {
      max-height: var(--zbk-spacing-15);
    }
    .desktop\:max-height-20 {
      max-height: var(--zbk-spacing-20);
    }
    .desktop\:max-height-25 {
      max-height: var(--zbk-spacing-25);
    }
    .desktop\:max-height-30 {
      max-height: var(--zbk-spacing-30);
    }
    .desktop\:max-height-40 {
      max-height: var(--zbk-spacing-40);
    }
    .desktop\:max-height-50 {
      max-height: var(--zbk-spacing-50);
    }
    .desktop\:max-height-60 {
      max-height: var(--zbk-spacing-60);
    }
    .desktop\:max-height-70 {
      max-height: var(--zbk-spacing-70);
    }
    .desktop\:max-height-80 {
      max-height: var(--zbk-spacing-80);
    }
    .desktop\:max-height-90 {
      max-height: var(--zbk-spacing-90);
    }
    .desktop\:max-height-100 {
      max-height: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 80rem) {
    .desktop-lg\:max-height-auto {
      max-height: auto;
    }
    .desktop-lg\:max-height-full {
      max-height: 100%;
    }
    .desktop-lg\:max-height-viewport {
      max-height: 100vw;
    }
    .desktop-lg\:max-height-min {
      max-height: -moz-min-content;
      max-height: min-content;
    }
    .desktop-lg\:max-height-max {
      max-height: -moz-max-content;
      max-height: max-content;
    }
    .desktop-lg\:max-height-inherit {
      max-height: inherit;
    }
    .desktop-lg\:max-height-neg-1px {
      max-height: var(--zbk-spacing-neg-1px);
    }
    .desktop-lg\:max-height-0 {
      max-height: var(--zbk-spacing-0);
    }
    .desktop-lg\:max-height-1px {
      max-height: var(--zbk-spacing-1px);
    }
    .desktop-lg\:max-height-2px {
      max-height: var(--zbk-spacing-2px);
    }
    .desktop-lg\:max-height-025 {
      max-height: var(--zbk-spacing-025);
    }
    .desktop-lg\:max-height-05 {
      max-height: var(--zbk-spacing-05);
    }
    .desktop-lg\:max-height-1 {
      max-height: var(--zbk-spacing-1);
    }
    .desktop-lg\:max-height-105 {
      max-height: var(--zbk-spacing-105);
    }
    .desktop-lg\:max-height-2 {
      max-height: var(--zbk-spacing-2);
    }
    .desktop-lg\:max-height-205 {
      max-height: var(--zbk-spacing-205);
    }
    .desktop-lg\:max-height-3 {
      max-height: var(--zbk-spacing-3);
    }
    .desktop-lg\:max-height-4 {
      max-height: var(--zbk-spacing-4);
    }
    .desktop-lg\:max-height-5 {
      max-height: var(--zbk-spacing-5);
    }
    .desktop-lg\:max-height-6 {
      max-height: var(--zbk-spacing-6);
    }
    .desktop-lg\:max-height-7 {
      max-height: var(--zbk-spacing-7);
    }
    .desktop-lg\:max-height-8 {
      max-height: var(--zbk-spacing-8);
    }
    .desktop-lg\:max-height-9 {
      max-height: var(--zbk-spacing-9);
    }
    .desktop-lg\:max-height-10 {
      max-height: var(--zbk-spacing-10);
    }
    .desktop-lg\:max-height-15 {
      max-height: var(--zbk-spacing-15);
    }
    .desktop-lg\:max-height-20 {
      max-height: var(--zbk-spacing-20);
    }
    .desktop-lg\:max-height-25 {
      max-height: var(--zbk-spacing-25);
    }
    .desktop-lg\:max-height-30 {
      max-height: var(--zbk-spacing-30);
    }
    .desktop-lg\:max-height-40 {
      max-height: var(--zbk-spacing-40);
    }
    .desktop-lg\:max-height-50 {
      max-height: var(--zbk-spacing-50);
    }
    .desktop-lg\:max-height-60 {
      max-height: var(--zbk-spacing-60);
    }
    .desktop-lg\:max-height-70 {
      max-height: var(--zbk-spacing-70);
    }
    .desktop-lg\:max-height-80 {
      max-height: var(--zbk-spacing-80);
    }
    .desktop-lg\:max-height-90 {
      max-height: var(--zbk-spacing-90);
    }
    .desktop-lg\:max-height-100 {
      max-height: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 100rem) {
    .widescreen\:max-height-auto {
      max-height: auto;
    }
    .widescreen\:max-height-full {
      max-height: 100%;
    }
    .widescreen\:max-height-viewport {
      max-height: 100vw;
    }
    .widescreen\:max-height-min {
      max-height: -moz-min-content;
      max-height: min-content;
    }
    .widescreen\:max-height-max {
      max-height: -moz-max-content;
      max-height: max-content;
    }
    .widescreen\:max-height-inherit {
      max-height: inherit;
    }
    .widescreen\:max-height-neg-1px {
      max-height: var(--zbk-spacing-neg-1px);
    }
    .widescreen\:max-height-0 {
      max-height: var(--zbk-spacing-0);
    }
    .widescreen\:max-height-1px {
      max-height: var(--zbk-spacing-1px);
    }
    .widescreen\:max-height-2px {
      max-height: var(--zbk-spacing-2px);
    }
    .widescreen\:max-height-025 {
      max-height: var(--zbk-spacing-025);
    }
    .widescreen\:max-height-05 {
      max-height: var(--zbk-spacing-05);
    }
    .widescreen\:max-height-1 {
      max-height: var(--zbk-spacing-1);
    }
    .widescreen\:max-height-105 {
      max-height: var(--zbk-spacing-105);
    }
    .widescreen\:max-height-2 {
      max-height: var(--zbk-spacing-2);
    }
    .widescreen\:max-height-205 {
      max-height: var(--zbk-spacing-205);
    }
    .widescreen\:max-height-3 {
      max-height: var(--zbk-spacing-3);
    }
    .widescreen\:max-height-4 {
      max-height: var(--zbk-spacing-4);
    }
    .widescreen\:max-height-5 {
      max-height: var(--zbk-spacing-5);
    }
    .widescreen\:max-height-6 {
      max-height: var(--zbk-spacing-6);
    }
    .widescreen\:max-height-7 {
      max-height: var(--zbk-spacing-7);
    }
    .widescreen\:max-height-8 {
      max-height: var(--zbk-spacing-8);
    }
    .widescreen\:max-height-9 {
      max-height: var(--zbk-spacing-9);
    }
    .widescreen\:max-height-10 {
      max-height: var(--zbk-spacing-10);
    }
    .widescreen\:max-height-15 {
      max-height: var(--zbk-spacing-15);
    }
    .widescreen\:max-height-20 {
      max-height: var(--zbk-spacing-20);
    }
    .widescreen\:max-height-25 {
      max-height: var(--zbk-spacing-25);
    }
    .widescreen\:max-height-30 {
      max-height: var(--zbk-spacing-30);
    }
    .widescreen\:max-height-40 {
      max-height: var(--zbk-spacing-40);
    }
    .widescreen\:max-height-50 {
      max-height: var(--zbk-spacing-50);
    }
    .widescreen\:max-height-60 {
      max-height: var(--zbk-spacing-60);
    }
    .widescreen\:max-height-70 {
      max-height: var(--zbk-spacing-70);
    }
    .widescreen\:max-height-80 {
      max-height: var(--zbk-spacing-80);
    }
    .widescreen\:max-height-90 {
      max-height: var(--zbk-spacing-90);
    }
    .widescreen\:max-height-100 {
      max-height: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 40rem) {
    .tablet\:width-auto {
      width: auto;
    }
    .tablet\:width-full {
      width: 100%;
    }
    .tablet\:width-viewport {
      width: 100vw;
    }
    .tablet\:width-min {
      width: -moz-min-content;
      width: min-content;
    }
    .tablet\:width-max {
      width: -moz-max-content;
      width: max-content;
    }
    .tablet\:width-inherit {
      width: inherit;
    }
    .tablet\:width-neg-1px {
      width: var(--zbk-spacing-neg-1px);
    }
    .tablet\:width-0 {
      width: var(--zbk-spacing-0);
    }
    .tablet\:width-1px {
      width: var(--zbk-spacing-1px);
    }
    .tablet\:width-2px {
      width: var(--zbk-spacing-2px);
    }
    .tablet\:width-025 {
      width: var(--zbk-spacing-025);
    }
    .tablet\:width-05 {
      width: var(--zbk-spacing-05);
    }
    .tablet\:width-1 {
      width: var(--zbk-spacing-1);
    }
    .tablet\:width-105 {
      width: var(--zbk-spacing-105);
    }
    .tablet\:width-2 {
      width: var(--zbk-spacing-2);
    }
    .tablet\:width-205 {
      width: var(--zbk-spacing-205);
    }
    .tablet\:width-3 {
      width: var(--zbk-spacing-3);
    }
    .tablet\:width-4 {
      width: var(--zbk-spacing-4);
    }
    .tablet\:width-5 {
      width: var(--zbk-spacing-5);
    }
    .tablet\:width-6 {
      width: var(--zbk-spacing-6);
    }
    .tablet\:width-7 {
      width: var(--zbk-spacing-7);
    }
    .tablet\:width-8 {
      width: var(--zbk-spacing-8);
    }
    .tablet\:width-9 {
      width: var(--zbk-spacing-9);
    }
    .tablet\:width-10 {
      width: var(--zbk-spacing-10);
    }
    .tablet\:width-15 {
      width: var(--zbk-spacing-15);
    }
    .tablet\:width-20 {
      width: var(--zbk-spacing-20);
    }
    .tablet\:width-25 {
      width: var(--zbk-spacing-25);
    }
    .tablet\:width-30 {
      width: var(--zbk-spacing-30);
    }
    .tablet\:width-40 {
      width: var(--zbk-spacing-40);
    }
    .tablet\:width-50 {
      width: var(--zbk-spacing-50);
    }
    .tablet\:width-60 {
      width: var(--zbk-spacing-60);
    }
    .tablet\:width-70 {
      width: var(--zbk-spacing-70);
    }
    .tablet\:width-80 {
      width: var(--zbk-spacing-80);
    }
    .tablet\:width-90 {
      width: var(--zbk-spacing-90);
    }
    .tablet\:width-100 {
      width: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 50rem) {
    .tablet-lg\:width-auto {
      width: auto;
    }
    .tablet-lg\:width-full {
      width: 100%;
    }
    .tablet-lg\:width-viewport {
      width: 100vw;
    }
    .tablet-lg\:width-min {
      width: -moz-min-content;
      width: min-content;
    }
    .tablet-lg\:width-max {
      width: -moz-max-content;
      width: max-content;
    }
    .tablet-lg\:width-inherit {
      width: inherit;
    }
    .tablet-lg\:width-neg-1px {
      width: var(--zbk-spacing-neg-1px);
    }
    .tablet-lg\:width-0 {
      width: var(--zbk-spacing-0);
    }
    .tablet-lg\:width-1px {
      width: var(--zbk-spacing-1px);
    }
    .tablet-lg\:width-2px {
      width: var(--zbk-spacing-2px);
    }
    .tablet-lg\:width-025 {
      width: var(--zbk-spacing-025);
    }
    .tablet-lg\:width-05 {
      width: var(--zbk-spacing-05);
    }
    .tablet-lg\:width-1 {
      width: var(--zbk-spacing-1);
    }
    .tablet-lg\:width-105 {
      width: var(--zbk-spacing-105);
    }
    .tablet-lg\:width-2 {
      width: var(--zbk-spacing-2);
    }
    .tablet-lg\:width-205 {
      width: var(--zbk-spacing-205);
    }
    .tablet-lg\:width-3 {
      width: var(--zbk-spacing-3);
    }
    .tablet-lg\:width-4 {
      width: var(--zbk-spacing-4);
    }
    .tablet-lg\:width-5 {
      width: var(--zbk-spacing-5);
    }
    .tablet-lg\:width-6 {
      width: var(--zbk-spacing-6);
    }
    .tablet-lg\:width-7 {
      width: var(--zbk-spacing-7);
    }
    .tablet-lg\:width-8 {
      width: var(--zbk-spacing-8);
    }
    .tablet-lg\:width-9 {
      width: var(--zbk-spacing-9);
    }
    .tablet-lg\:width-10 {
      width: var(--zbk-spacing-10);
    }
    .tablet-lg\:width-15 {
      width: var(--zbk-spacing-15);
    }
    .tablet-lg\:width-20 {
      width: var(--zbk-spacing-20);
    }
    .tablet-lg\:width-25 {
      width: var(--zbk-spacing-25);
    }
    .tablet-lg\:width-30 {
      width: var(--zbk-spacing-30);
    }
    .tablet-lg\:width-40 {
      width: var(--zbk-spacing-40);
    }
    .tablet-lg\:width-50 {
      width: var(--zbk-spacing-50);
    }
    .tablet-lg\:width-60 {
      width: var(--zbk-spacing-60);
    }
    .tablet-lg\:width-70 {
      width: var(--zbk-spacing-70);
    }
    .tablet-lg\:width-80 {
      width: var(--zbk-spacing-80);
    }
    .tablet-lg\:width-90 {
      width: var(--zbk-spacing-90);
    }
    .tablet-lg\:width-100 {
      width: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 70rem) {
    .desktop\:width-auto {
      width: auto;
    }
    .desktop\:width-full {
      width: 100%;
    }
    .desktop\:width-viewport {
      width: 100vw;
    }
    .desktop\:width-min {
      width: -moz-min-content;
      width: min-content;
    }
    .desktop\:width-max {
      width: -moz-max-content;
      width: max-content;
    }
    .desktop\:width-inherit {
      width: inherit;
    }
    .desktop\:width-neg-1px {
      width: var(--zbk-spacing-neg-1px);
    }
    .desktop\:width-0 {
      width: var(--zbk-spacing-0);
    }
    .desktop\:width-1px {
      width: var(--zbk-spacing-1px);
    }
    .desktop\:width-2px {
      width: var(--zbk-spacing-2px);
    }
    .desktop\:width-025 {
      width: var(--zbk-spacing-025);
    }
    .desktop\:width-05 {
      width: var(--zbk-spacing-05);
    }
    .desktop\:width-1 {
      width: var(--zbk-spacing-1);
    }
    .desktop\:width-105 {
      width: var(--zbk-spacing-105);
    }
    .desktop\:width-2 {
      width: var(--zbk-spacing-2);
    }
    .desktop\:width-205 {
      width: var(--zbk-spacing-205);
    }
    .desktop\:width-3 {
      width: var(--zbk-spacing-3);
    }
    .desktop\:width-4 {
      width: var(--zbk-spacing-4);
    }
    .desktop\:width-5 {
      width: var(--zbk-spacing-5);
    }
    .desktop\:width-6 {
      width: var(--zbk-spacing-6);
    }
    .desktop\:width-7 {
      width: var(--zbk-spacing-7);
    }
    .desktop\:width-8 {
      width: var(--zbk-spacing-8);
    }
    .desktop\:width-9 {
      width: var(--zbk-spacing-9);
    }
    .desktop\:width-10 {
      width: var(--zbk-spacing-10);
    }
    .desktop\:width-15 {
      width: var(--zbk-spacing-15);
    }
    .desktop\:width-20 {
      width: var(--zbk-spacing-20);
    }
    .desktop\:width-25 {
      width: var(--zbk-spacing-25);
    }
    .desktop\:width-30 {
      width: var(--zbk-spacing-30);
    }
    .desktop\:width-40 {
      width: var(--zbk-spacing-40);
    }
    .desktop\:width-50 {
      width: var(--zbk-spacing-50);
    }
    .desktop\:width-60 {
      width: var(--zbk-spacing-60);
    }
    .desktop\:width-70 {
      width: var(--zbk-spacing-70);
    }
    .desktop\:width-80 {
      width: var(--zbk-spacing-80);
    }
    .desktop\:width-90 {
      width: var(--zbk-spacing-90);
    }
    .desktop\:width-100 {
      width: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 80rem) {
    .desktop-lg\:width-auto {
      width: auto;
    }
    .desktop-lg\:width-full {
      width: 100%;
    }
    .desktop-lg\:width-viewport {
      width: 100vw;
    }
    .desktop-lg\:width-min {
      width: -moz-min-content;
      width: min-content;
    }
    .desktop-lg\:width-max {
      width: -moz-max-content;
      width: max-content;
    }
    .desktop-lg\:width-inherit {
      width: inherit;
    }
    .desktop-lg\:width-neg-1px {
      width: var(--zbk-spacing-neg-1px);
    }
    .desktop-lg\:width-0 {
      width: var(--zbk-spacing-0);
    }
    .desktop-lg\:width-1px {
      width: var(--zbk-spacing-1px);
    }
    .desktop-lg\:width-2px {
      width: var(--zbk-spacing-2px);
    }
    .desktop-lg\:width-025 {
      width: var(--zbk-spacing-025);
    }
    .desktop-lg\:width-05 {
      width: var(--zbk-spacing-05);
    }
    .desktop-lg\:width-1 {
      width: var(--zbk-spacing-1);
    }
    .desktop-lg\:width-105 {
      width: var(--zbk-spacing-105);
    }
    .desktop-lg\:width-2 {
      width: var(--zbk-spacing-2);
    }
    .desktop-lg\:width-205 {
      width: var(--zbk-spacing-205);
    }
    .desktop-lg\:width-3 {
      width: var(--zbk-spacing-3);
    }
    .desktop-lg\:width-4 {
      width: var(--zbk-spacing-4);
    }
    .desktop-lg\:width-5 {
      width: var(--zbk-spacing-5);
    }
    .desktop-lg\:width-6 {
      width: var(--zbk-spacing-6);
    }
    .desktop-lg\:width-7 {
      width: var(--zbk-spacing-7);
    }
    .desktop-lg\:width-8 {
      width: var(--zbk-spacing-8);
    }
    .desktop-lg\:width-9 {
      width: var(--zbk-spacing-9);
    }
    .desktop-lg\:width-10 {
      width: var(--zbk-spacing-10);
    }
    .desktop-lg\:width-15 {
      width: var(--zbk-spacing-15);
    }
    .desktop-lg\:width-20 {
      width: var(--zbk-spacing-20);
    }
    .desktop-lg\:width-25 {
      width: var(--zbk-spacing-25);
    }
    .desktop-lg\:width-30 {
      width: var(--zbk-spacing-30);
    }
    .desktop-lg\:width-40 {
      width: var(--zbk-spacing-40);
    }
    .desktop-lg\:width-50 {
      width: var(--zbk-spacing-50);
    }
    .desktop-lg\:width-60 {
      width: var(--zbk-spacing-60);
    }
    .desktop-lg\:width-70 {
      width: var(--zbk-spacing-70);
    }
    .desktop-lg\:width-80 {
      width: var(--zbk-spacing-80);
    }
    .desktop-lg\:width-90 {
      width: var(--zbk-spacing-90);
    }
    .desktop-lg\:width-100 {
      width: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 100rem) {
    .widescreen\:width-auto {
      width: auto;
    }
    .widescreen\:width-full {
      width: 100%;
    }
    .widescreen\:width-viewport {
      width: 100vw;
    }
    .widescreen\:width-min {
      width: -moz-min-content;
      width: min-content;
    }
    .widescreen\:width-max {
      width: -moz-max-content;
      width: max-content;
    }
    .widescreen\:width-inherit {
      width: inherit;
    }
    .widescreen\:width-neg-1px {
      width: var(--zbk-spacing-neg-1px);
    }
    .widescreen\:width-0 {
      width: var(--zbk-spacing-0);
    }
    .widescreen\:width-1px {
      width: var(--zbk-spacing-1px);
    }
    .widescreen\:width-2px {
      width: var(--zbk-spacing-2px);
    }
    .widescreen\:width-025 {
      width: var(--zbk-spacing-025);
    }
    .widescreen\:width-05 {
      width: var(--zbk-spacing-05);
    }
    .widescreen\:width-1 {
      width: var(--zbk-spacing-1);
    }
    .widescreen\:width-105 {
      width: var(--zbk-spacing-105);
    }
    .widescreen\:width-2 {
      width: var(--zbk-spacing-2);
    }
    .widescreen\:width-205 {
      width: var(--zbk-spacing-205);
    }
    .widescreen\:width-3 {
      width: var(--zbk-spacing-3);
    }
    .widescreen\:width-4 {
      width: var(--zbk-spacing-4);
    }
    .widescreen\:width-5 {
      width: var(--zbk-spacing-5);
    }
    .widescreen\:width-6 {
      width: var(--zbk-spacing-6);
    }
    .widescreen\:width-7 {
      width: var(--zbk-spacing-7);
    }
    .widescreen\:width-8 {
      width: var(--zbk-spacing-8);
    }
    .widescreen\:width-9 {
      width: var(--zbk-spacing-9);
    }
    .widescreen\:width-10 {
      width: var(--zbk-spacing-10);
    }
    .widescreen\:width-15 {
      width: var(--zbk-spacing-15);
    }
    .widescreen\:width-20 {
      width: var(--zbk-spacing-20);
    }
    .widescreen\:width-25 {
      width: var(--zbk-spacing-25);
    }
    .widescreen\:width-30 {
      width: var(--zbk-spacing-30);
    }
    .widescreen\:width-40 {
      width: var(--zbk-spacing-40);
    }
    .widescreen\:width-50 {
      width: var(--zbk-spacing-50);
    }
    .widescreen\:width-60 {
      width: var(--zbk-spacing-60);
    }
    .widescreen\:width-70 {
      width: var(--zbk-spacing-70);
    }
    .widescreen\:width-80 {
      width: var(--zbk-spacing-80);
    }
    .widescreen\:width-90 {
      width: var(--zbk-spacing-90);
    }
    .widescreen\:width-100 {
      width: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 40rem) {
    .tablet\:min-width-auto {
      min-width: auto;
    }
    .tablet\:min-width-full {
      min-width: 100%;
    }
    .tablet\:min-width-viewport {
      min-width: 100vw;
    }
    .tablet\:min-width-min {
      min-width: -moz-min-content;
      min-width: min-content;
    }
    .tablet\:min-width-max {
      min-width: -moz-max-content;
      min-width: max-content;
    }
    .tablet\:min-width-inherit {
      min-width: inherit;
    }
    .tablet\:min-width-neg-1px {
      min-width: var(--zbk-spacing-neg-1px);
    }
    .tablet\:min-width-0 {
      min-width: var(--zbk-spacing-0);
    }
    .tablet\:min-width-1px {
      min-width: var(--zbk-spacing-1px);
    }
    .tablet\:min-width-2px {
      min-width: var(--zbk-spacing-2px);
    }
    .tablet\:min-width-025 {
      min-width: var(--zbk-spacing-025);
    }
    .tablet\:min-width-05 {
      min-width: var(--zbk-spacing-05);
    }
    .tablet\:min-width-1 {
      min-width: var(--zbk-spacing-1);
    }
    .tablet\:min-width-105 {
      min-width: var(--zbk-spacing-105);
    }
    .tablet\:min-width-2 {
      min-width: var(--zbk-spacing-2);
    }
    .tablet\:min-width-205 {
      min-width: var(--zbk-spacing-205);
    }
    .tablet\:min-width-3 {
      min-width: var(--zbk-spacing-3);
    }
    .tablet\:min-width-4 {
      min-width: var(--zbk-spacing-4);
    }
    .tablet\:min-width-5 {
      min-width: var(--zbk-spacing-5);
    }
    .tablet\:min-width-6 {
      min-width: var(--zbk-spacing-6);
    }
    .tablet\:min-width-7 {
      min-width: var(--zbk-spacing-7);
    }
    .tablet\:min-width-8 {
      min-width: var(--zbk-spacing-8);
    }
    .tablet\:min-width-9 {
      min-width: var(--zbk-spacing-9);
    }
    .tablet\:min-width-10 {
      min-width: var(--zbk-spacing-10);
    }
    .tablet\:min-width-15 {
      min-width: var(--zbk-spacing-15);
    }
    .tablet\:min-width-20 {
      min-width: var(--zbk-spacing-20);
    }
    .tablet\:min-width-25 {
      min-width: var(--zbk-spacing-25);
    }
    .tablet\:min-width-30 {
      min-width: var(--zbk-spacing-30);
    }
    .tablet\:min-width-40 {
      min-width: var(--zbk-spacing-40);
    }
    .tablet\:min-width-50 {
      min-width: var(--zbk-spacing-50);
    }
    .tablet\:min-width-60 {
      min-width: var(--zbk-spacing-60);
    }
    .tablet\:min-width-70 {
      min-width: var(--zbk-spacing-70);
    }
    .tablet\:min-width-80 {
      min-width: var(--zbk-spacing-80);
    }
    .tablet\:min-width-90 {
      min-width: var(--zbk-spacing-90);
    }
    .tablet\:min-width-100 {
      min-width: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 50rem) {
    .tablet-lg\:min-width-auto {
      min-width: auto;
    }
    .tablet-lg\:min-width-full {
      min-width: 100%;
    }
    .tablet-lg\:min-width-viewport {
      min-width: 100vw;
    }
    .tablet-lg\:min-width-min {
      min-width: -moz-min-content;
      min-width: min-content;
    }
    .tablet-lg\:min-width-max {
      min-width: -moz-max-content;
      min-width: max-content;
    }
    .tablet-lg\:min-width-inherit {
      min-width: inherit;
    }
    .tablet-lg\:min-width-neg-1px {
      min-width: var(--zbk-spacing-neg-1px);
    }
    .tablet-lg\:min-width-0 {
      min-width: var(--zbk-spacing-0);
    }
    .tablet-lg\:min-width-1px {
      min-width: var(--zbk-spacing-1px);
    }
    .tablet-lg\:min-width-2px {
      min-width: var(--zbk-spacing-2px);
    }
    .tablet-lg\:min-width-025 {
      min-width: var(--zbk-spacing-025);
    }
    .tablet-lg\:min-width-05 {
      min-width: var(--zbk-spacing-05);
    }
    .tablet-lg\:min-width-1 {
      min-width: var(--zbk-spacing-1);
    }
    .tablet-lg\:min-width-105 {
      min-width: var(--zbk-spacing-105);
    }
    .tablet-lg\:min-width-2 {
      min-width: var(--zbk-spacing-2);
    }
    .tablet-lg\:min-width-205 {
      min-width: var(--zbk-spacing-205);
    }
    .tablet-lg\:min-width-3 {
      min-width: var(--zbk-spacing-3);
    }
    .tablet-lg\:min-width-4 {
      min-width: var(--zbk-spacing-4);
    }
    .tablet-lg\:min-width-5 {
      min-width: var(--zbk-spacing-5);
    }
    .tablet-lg\:min-width-6 {
      min-width: var(--zbk-spacing-6);
    }
    .tablet-lg\:min-width-7 {
      min-width: var(--zbk-spacing-7);
    }
    .tablet-lg\:min-width-8 {
      min-width: var(--zbk-spacing-8);
    }
    .tablet-lg\:min-width-9 {
      min-width: var(--zbk-spacing-9);
    }
    .tablet-lg\:min-width-10 {
      min-width: var(--zbk-spacing-10);
    }
    .tablet-lg\:min-width-15 {
      min-width: var(--zbk-spacing-15);
    }
    .tablet-lg\:min-width-20 {
      min-width: var(--zbk-spacing-20);
    }
    .tablet-lg\:min-width-25 {
      min-width: var(--zbk-spacing-25);
    }
    .tablet-lg\:min-width-30 {
      min-width: var(--zbk-spacing-30);
    }
    .tablet-lg\:min-width-40 {
      min-width: var(--zbk-spacing-40);
    }
    .tablet-lg\:min-width-50 {
      min-width: var(--zbk-spacing-50);
    }
    .tablet-lg\:min-width-60 {
      min-width: var(--zbk-spacing-60);
    }
    .tablet-lg\:min-width-70 {
      min-width: var(--zbk-spacing-70);
    }
    .tablet-lg\:min-width-80 {
      min-width: var(--zbk-spacing-80);
    }
    .tablet-lg\:min-width-90 {
      min-width: var(--zbk-spacing-90);
    }
    .tablet-lg\:min-width-100 {
      min-width: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 70rem) {
    .desktop\:min-width-auto {
      min-width: auto;
    }
    .desktop\:min-width-full {
      min-width: 100%;
    }
    .desktop\:min-width-viewport {
      min-width: 100vw;
    }
    .desktop\:min-width-min {
      min-width: -moz-min-content;
      min-width: min-content;
    }
    .desktop\:min-width-max {
      min-width: -moz-max-content;
      min-width: max-content;
    }
    .desktop\:min-width-inherit {
      min-width: inherit;
    }
    .desktop\:min-width-neg-1px {
      min-width: var(--zbk-spacing-neg-1px);
    }
    .desktop\:min-width-0 {
      min-width: var(--zbk-spacing-0);
    }
    .desktop\:min-width-1px {
      min-width: var(--zbk-spacing-1px);
    }
    .desktop\:min-width-2px {
      min-width: var(--zbk-spacing-2px);
    }
    .desktop\:min-width-025 {
      min-width: var(--zbk-spacing-025);
    }
    .desktop\:min-width-05 {
      min-width: var(--zbk-spacing-05);
    }
    .desktop\:min-width-1 {
      min-width: var(--zbk-spacing-1);
    }
    .desktop\:min-width-105 {
      min-width: var(--zbk-spacing-105);
    }
    .desktop\:min-width-2 {
      min-width: var(--zbk-spacing-2);
    }
    .desktop\:min-width-205 {
      min-width: var(--zbk-spacing-205);
    }
    .desktop\:min-width-3 {
      min-width: var(--zbk-spacing-3);
    }
    .desktop\:min-width-4 {
      min-width: var(--zbk-spacing-4);
    }
    .desktop\:min-width-5 {
      min-width: var(--zbk-spacing-5);
    }
    .desktop\:min-width-6 {
      min-width: var(--zbk-spacing-6);
    }
    .desktop\:min-width-7 {
      min-width: var(--zbk-spacing-7);
    }
    .desktop\:min-width-8 {
      min-width: var(--zbk-spacing-8);
    }
    .desktop\:min-width-9 {
      min-width: var(--zbk-spacing-9);
    }
    .desktop\:min-width-10 {
      min-width: var(--zbk-spacing-10);
    }
    .desktop\:min-width-15 {
      min-width: var(--zbk-spacing-15);
    }
    .desktop\:min-width-20 {
      min-width: var(--zbk-spacing-20);
    }
    .desktop\:min-width-25 {
      min-width: var(--zbk-spacing-25);
    }
    .desktop\:min-width-30 {
      min-width: var(--zbk-spacing-30);
    }
    .desktop\:min-width-40 {
      min-width: var(--zbk-spacing-40);
    }
    .desktop\:min-width-50 {
      min-width: var(--zbk-spacing-50);
    }
    .desktop\:min-width-60 {
      min-width: var(--zbk-spacing-60);
    }
    .desktop\:min-width-70 {
      min-width: var(--zbk-spacing-70);
    }
    .desktop\:min-width-80 {
      min-width: var(--zbk-spacing-80);
    }
    .desktop\:min-width-90 {
      min-width: var(--zbk-spacing-90);
    }
    .desktop\:min-width-100 {
      min-width: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 80rem) {
    .desktop-lg\:min-width-auto {
      min-width: auto;
    }
    .desktop-lg\:min-width-full {
      min-width: 100%;
    }
    .desktop-lg\:min-width-viewport {
      min-width: 100vw;
    }
    .desktop-lg\:min-width-min {
      min-width: -moz-min-content;
      min-width: min-content;
    }
    .desktop-lg\:min-width-max {
      min-width: -moz-max-content;
      min-width: max-content;
    }
    .desktop-lg\:min-width-inherit {
      min-width: inherit;
    }
    .desktop-lg\:min-width-neg-1px {
      min-width: var(--zbk-spacing-neg-1px);
    }
    .desktop-lg\:min-width-0 {
      min-width: var(--zbk-spacing-0);
    }
    .desktop-lg\:min-width-1px {
      min-width: var(--zbk-spacing-1px);
    }
    .desktop-lg\:min-width-2px {
      min-width: var(--zbk-spacing-2px);
    }
    .desktop-lg\:min-width-025 {
      min-width: var(--zbk-spacing-025);
    }
    .desktop-lg\:min-width-05 {
      min-width: var(--zbk-spacing-05);
    }
    .desktop-lg\:min-width-1 {
      min-width: var(--zbk-spacing-1);
    }
    .desktop-lg\:min-width-105 {
      min-width: var(--zbk-spacing-105);
    }
    .desktop-lg\:min-width-2 {
      min-width: var(--zbk-spacing-2);
    }
    .desktop-lg\:min-width-205 {
      min-width: var(--zbk-spacing-205);
    }
    .desktop-lg\:min-width-3 {
      min-width: var(--zbk-spacing-3);
    }
    .desktop-lg\:min-width-4 {
      min-width: var(--zbk-spacing-4);
    }
    .desktop-lg\:min-width-5 {
      min-width: var(--zbk-spacing-5);
    }
    .desktop-lg\:min-width-6 {
      min-width: var(--zbk-spacing-6);
    }
    .desktop-lg\:min-width-7 {
      min-width: var(--zbk-spacing-7);
    }
    .desktop-lg\:min-width-8 {
      min-width: var(--zbk-spacing-8);
    }
    .desktop-lg\:min-width-9 {
      min-width: var(--zbk-spacing-9);
    }
    .desktop-lg\:min-width-10 {
      min-width: var(--zbk-spacing-10);
    }
    .desktop-lg\:min-width-15 {
      min-width: var(--zbk-spacing-15);
    }
    .desktop-lg\:min-width-20 {
      min-width: var(--zbk-spacing-20);
    }
    .desktop-lg\:min-width-25 {
      min-width: var(--zbk-spacing-25);
    }
    .desktop-lg\:min-width-30 {
      min-width: var(--zbk-spacing-30);
    }
    .desktop-lg\:min-width-40 {
      min-width: var(--zbk-spacing-40);
    }
    .desktop-lg\:min-width-50 {
      min-width: var(--zbk-spacing-50);
    }
    .desktop-lg\:min-width-60 {
      min-width: var(--zbk-spacing-60);
    }
    .desktop-lg\:min-width-70 {
      min-width: var(--zbk-spacing-70);
    }
    .desktop-lg\:min-width-80 {
      min-width: var(--zbk-spacing-80);
    }
    .desktop-lg\:min-width-90 {
      min-width: var(--zbk-spacing-90);
    }
    .desktop-lg\:min-width-100 {
      min-width: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 100rem) {
    .widescreen\:min-width-auto {
      min-width: auto;
    }
    .widescreen\:min-width-full {
      min-width: 100%;
    }
    .widescreen\:min-width-viewport {
      min-width: 100vw;
    }
    .widescreen\:min-width-min {
      min-width: -moz-min-content;
      min-width: min-content;
    }
    .widescreen\:min-width-max {
      min-width: -moz-max-content;
      min-width: max-content;
    }
    .widescreen\:min-width-inherit {
      min-width: inherit;
    }
    .widescreen\:min-width-neg-1px {
      min-width: var(--zbk-spacing-neg-1px);
    }
    .widescreen\:min-width-0 {
      min-width: var(--zbk-spacing-0);
    }
    .widescreen\:min-width-1px {
      min-width: var(--zbk-spacing-1px);
    }
    .widescreen\:min-width-2px {
      min-width: var(--zbk-spacing-2px);
    }
    .widescreen\:min-width-025 {
      min-width: var(--zbk-spacing-025);
    }
    .widescreen\:min-width-05 {
      min-width: var(--zbk-spacing-05);
    }
    .widescreen\:min-width-1 {
      min-width: var(--zbk-spacing-1);
    }
    .widescreen\:min-width-105 {
      min-width: var(--zbk-spacing-105);
    }
    .widescreen\:min-width-2 {
      min-width: var(--zbk-spacing-2);
    }
    .widescreen\:min-width-205 {
      min-width: var(--zbk-spacing-205);
    }
    .widescreen\:min-width-3 {
      min-width: var(--zbk-spacing-3);
    }
    .widescreen\:min-width-4 {
      min-width: var(--zbk-spacing-4);
    }
    .widescreen\:min-width-5 {
      min-width: var(--zbk-spacing-5);
    }
    .widescreen\:min-width-6 {
      min-width: var(--zbk-spacing-6);
    }
    .widescreen\:min-width-7 {
      min-width: var(--zbk-spacing-7);
    }
    .widescreen\:min-width-8 {
      min-width: var(--zbk-spacing-8);
    }
    .widescreen\:min-width-9 {
      min-width: var(--zbk-spacing-9);
    }
    .widescreen\:min-width-10 {
      min-width: var(--zbk-spacing-10);
    }
    .widescreen\:min-width-15 {
      min-width: var(--zbk-spacing-15);
    }
    .widescreen\:min-width-20 {
      min-width: var(--zbk-spacing-20);
    }
    .widescreen\:min-width-25 {
      min-width: var(--zbk-spacing-25);
    }
    .widescreen\:min-width-30 {
      min-width: var(--zbk-spacing-30);
    }
    .widescreen\:min-width-40 {
      min-width: var(--zbk-spacing-40);
    }
    .widescreen\:min-width-50 {
      min-width: var(--zbk-spacing-50);
    }
    .widescreen\:min-width-60 {
      min-width: var(--zbk-spacing-60);
    }
    .widescreen\:min-width-70 {
      min-width: var(--zbk-spacing-70);
    }
    .widescreen\:min-width-80 {
      min-width: var(--zbk-spacing-80);
    }
    .widescreen\:min-width-90 {
      min-width: var(--zbk-spacing-90);
    }
    .widescreen\:min-width-100 {
      min-width: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 40rem) {
    .tablet\:max-width-auto {
      max-width: auto;
    }
    .tablet\:max-width-full {
      max-width: 100%;
    }
    .tablet\:max-width-viewport {
      max-width: 100vw;
    }
    .tablet\:max-width-min {
      max-width: -moz-min-content;
      max-width: min-content;
    }
    .tablet\:max-width-max {
      max-width: -moz-max-content;
      max-width: max-content;
    }
    .tablet\:max-width-inherit {
      max-width: inherit;
    }
    .tablet\:max-width-neg-1px {
      max-width: var(--zbk-spacing-neg-1px);
    }
    .tablet\:max-width-0 {
      max-width: var(--zbk-spacing-0);
    }
    .tablet\:max-width-1px {
      max-width: var(--zbk-spacing-1px);
    }
    .tablet\:max-width-2px {
      max-width: var(--zbk-spacing-2px);
    }
    .tablet\:max-width-025 {
      max-width: var(--zbk-spacing-025);
    }
    .tablet\:max-width-05 {
      max-width: var(--zbk-spacing-05);
    }
    .tablet\:max-width-1 {
      max-width: var(--zbk-spacing-1);
    }
    .tablet\:max-width-105 {
      max-width: var(--zbk-spacing-105);
    }
    .tablet\:max-width-2 {
      max-width: var(--zbk-spacing-2);
    }
    .tablet\:max-width-205 {
      max-width: var(--zbk-spacing-205);
    }
    .tablet\:max-width-3 {
      max-width: var(--zbk-spacing-3);
    }
    .tablet\:max-width-4 {
      max-width: var(--zbk-spacing-4);
    }
    .tablet\:max-width-5 {
      max-width: var(--zbk-spacing-5);
    }
    .tablet\:max-width-6 {
      max-width: var(--zbk-spacing-6);
    }
    .tablet\:max-width-7 {
      max-width: var(--zbk-spacing-7);
    }
    .tablet\:max-width-8 {
      max-width: var(--zbk-spacing-8);
    }
    .tablet\:max-width-9 {
      max-width: var(--zbk-spacing-9);
    }
    .tablet\:max-width-10 {
      max-width: var(--zbk-spacing-10);
    }
    .tablet\:max-width-15 {
      max-width: var(--zbk-spacing-15);
    }
    .tablet\:max-width-20 {
      max-width: var(--zbk-spacing-20);
    }
    .tablet\:max-width-25 {
      max-width: var(--zbk-spacing-25);
    }
    .tablet\:max-width-30 {
      max-width: var(--zbk-spacing-30);
    }
    .tablet\:max-width-40 {
      max-width: var(--zbk-spacing-40);
    }
    .tablet\:max-width-50 {
      max-width: var(--zbk-spacing-50);
    }
    .tablet\:max-width-60 {
      max-width: var(--zbk-spacing-60);
    }
    .tablet\:max-width-70 {
      max-width: var(--zbk-spacing-70);
    }
    .tablet\:max-width-80 {
      max-width: var(--zbk-spacing-80);
    }
    .tablet\:max-width-90 {
      max-width: var(--zbk-spacing-90);
    }
    .tablet\:max-width-100 {
      max-width: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 50rem) {
    .tablet-lg\:max-width-auto {
      max-width: auto;
    }
    .tablet-lg\:max-width-full {
      max-width: 100%;
    }
    .tablet-lg\:max-width-viewport {
      max-width: 100vw;
    }
    .tablet-lg\:max-width-min {
      max-width: -moz-min-content;
      max-width: min-content;
    }
    .tablet-lg\:max-width-max {
      max-width: -moz-max-content;
      max-width: max-content;
    }
    .tablet-lg\:max-width-inherit {
      max-width: inherit;
    }
    .tablet-lg\:max-width-neg-1px {
      max-width: var(--zbk-spacing-neg-1px);
    }
    .tablet-lg\:max-width-0 {
      max-width: var(--zbk-spacing-0);
    }
    .tablet-lg\:max-width-1px {
      max-width: var(--zbk-spacing-1px);
    }
    .tablet-lg\:max-width-2px {
      max-width: var(--zbk-spacing-2px);
    }
    .tablet-lg\:max-width-025 {
      max-width: var(--zbk-spacing-025);
    }
    .tablet-lg\:max-width-05 {
      max-width: var(--zbk-spacing-05);
    }
    .tablet-lg\:max-width-1 {
      max-width: var(--zbk-spacing-1);
    }
    .tablet-lg\:max-width-105 {
      max-width: var(--zbk-spacing-105);
    }
    .tablet-lg\:max-width-2 {
      max-width: var(--zbk-spacing-2);
    }
    .tablet-lg\:max-width-205 {
      max-width: var(--zbk-spacing-205);
    }
    .tablet-lg\:max-width-3 {
      max-width: var(--zbk-spacing-3);
    }
    .tablet-lg\:max-width-4 {
      max-width: var(--zbk-spacing-4);
    }
    .tablet-lg\:max-width-5 {
      max-width: var(--zbk-spacing-5);
    }
    .tablet-lg\:max-width-6 {
      max-width: var(--zbk-spacing-6);
    }
    .tablet-lg\:max-width-7 {
      max-width: var(--zbk-spacing-7);
    }
    .tablet-lg\:max-width-8 {
      max-width: var(--zbk-spacing-8);
    }
    .tablet-lg\:max-width-9 {
      max-width: var(--zbk-spacing-9);
    }
    .tablet-lg\:max-width-10 {
      max-width: var(--zbk-spacing-10);
    }
    .tablet-lg\:max-width-15 {
      max-width: var(--zbk-spacing-15);
    }
    .tablet-lg\:max-width-20 {
      max-width: var(--zbk-spacing-20);
    }
    .tablet-lg\:max-width-25 {
      max-width: var(--zbk-spacing-25);
    }
    .tablet-lg\:max-width-30 {
      max-width: var(--zbk-spacing-30);
    }
    .tablet-lg\:max-width-40 {
      max-width: var(--zbk-spacing-40);
    }
    .tablet-lg\:max-width-50 {
      max-width: var(--zbk-spacing-50);
    }
    .tablet-lg\:max-width-60 {
      max-width: var(--zbk-spacing-60);
    }
    .tablet-lg\:max-width-70 {
      max-width: var(--zbk-spacing-70);
    }
    .tablet-lg\:max-width-80 {
      max-width: var(--zbk-spacing-80);
    }
    .tablet-lg\:max-width-90 {
      max-width: var(--zbk-spacing-90);
    }
    .tablet-lg\:max-width-100 {
      max-width: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 70rem) {
    .desktop\:max-width-auto {
      max-width: auto;
    }
    .desktop\:max-width-full {
      max-width: 100%;
    }
    .desktop\:max-width-viewport {
      max-width: 100vw;
    }
    .desktop\:max-width-min {
      max-width: -moz-min-content;
      max-width: min-content;
    }
    .desktop\:max-width-max {
      max-width: -moz-max-content;
      max-width: max-content;
    }
    .desktop\:max-width-inherit {
      max-width: inherit;
    }
    .desktop\:max-width-neg-1px {
      max-width: var(--zbk-spacing-neg-1px);
    }
    .desktop\:max-width-0 {
      max-width: var(--zbk-spacing-0);
    }
    .desktop\:max-width-1px {
      max-width: var(--zbk-spacing-1px);
    }
    .desktop\:max-width-2px {
      max-width: var(--zbk-spacing-2px);
    }
    .desktop\:max-width-025 {
      max-width: var(--zbk-spacing-025);
    }
    .desktop\:max-width-05 {
      max-width: var(--zbk-spacing-05);
    }
    .desktop\:max-width-1 {
      max-width: var(--zbk-spacing-1);
    }
    .desktop\:max-width-105 {
      max-width: var(--zbk-spacing-105);
    }
    .desktop\:max-width-2 {
      max-width: var(--zbk-spacing-2);
    }
    .desktop\:max-width-205 {
      max-width: var(--zbk-spacing-205);
    }
    .desktop\:max-width-3 {
      max-width: var(--zbk-spacing-3);
    }
    .desktop\:max-width-4 {
      max-width: var(--zbk-spacing-4);
    }
    .desktop\:max-width-5 {
      max-width: var(--zbk-spacing-5);
    }
    .desktop\:max-width-6 {
      max-width: var(--zbk-spacing-6);
    }
    .desktop\:max-width-7 {
      max-width: var(--zbk-spacing-7);
    }
    .desktop\:max-width-8 {
      max-width: var(--zbk-spacing-8);
    }
    .desktop\:max-width-9 {
      max-width: var(--zbk-spacing-9);
    }
    .desktop\:max-width-10 {
      max-width: var(--zbk-spacing-10);
    }
    .desktop\:max-width-15 {
      max-width: var(--zbk-spacing-15);
    }
    .desktop\:max-width-20 {
      max-width: var(--zbk-spacing-20);
    }
    .desktop\:max-width-25 {
      max-width: var(--zbk-spacing-25);
    }
    .desktop\:max-width-30 {
      max-width: var(--zbk-spacing-30);
    }
    .desktop\:max-width-40 {
      max-width: var(--zbk-spacing-40);
    }
    .desktop\:max-width-50 {
      max-width: var(--zbk-spacing-50);
    }
    .desktop\:max-width-60 {
      max-width: var(--zbk-spacing-60);
    }
    .desktop\:max-width-70 {
      max-width: var(--zbk-spacing-70);
    }
    .desktop\:max-width-80 {
      max-width: var(--zbk-spacing-80);
    }
    .desktop\:max-width-90 {
      max-width: var(--zbk-spacing-90);
    }
    .desktop\:max-width-100 {
      max-width: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 80rem) {
    .desktop-lg\:max-width-auto {
      max-width: auto;
    }
    .desktop-lg\:max-width-full {
      max-width: 100%;
    }
    .desktop-lg\:max-width-viewport {
      max-width: 100vw;
    }
    .desktop-lg\:max-width-min {
      max-width: -moz-min-content;
      max-width: min-content;
    }
    .desktop-lg\:max-width-max {
      max-width: -moz-max-content;
      max-width: max-content;
    }
    .desktop-lg\:max-width-inherit {
      max-width: inherit;
    }
    .desktop-lg\:max-width-neg-1px {
      max-width: var(--zbk-spacing-neg-1px);
    }
    .desktop-lg\:max-width-0 {
      max-width: var(--zbk-spacing-0);
    }
    .desktop-lg\:max-width-1px {
      max-width: var(--zbk-spacing-1px);
    }
    .desktop-lg\:max-width-2px {
      max-width: var(--zbk-spacing-2px);
    }
    .desktop-lg\:max-width-025 {
      max-width: var(--zbk-spacing-025);
    }
    .desktop-lg\:max-width-05 {
      max-width: var(--zbk-spacing-05);
    }
    .desktop-lg\:max-width-1 {
      max-width: var(--zbk-spacing-1);
    }
    .desktop-lg\:max-width-105 {
      max-width: var(--zbk-spacing-105);
    }
    .desktop-lg\:max-width-2 {
      max-width: var(--zbk-spacing-2);
    }
    .desktop-lg\:max-width-205 {
      max-width: var(--zbk-spacing-205);
    }
    .desktop-lg\:max-width-3 {
      max-width: var(--zbk-spacing-3);
    }
    .desktop-lg\:max-width-4 {
      max-width: var(--zbk-spacing-4);
    }
    .desktop-lg\:max-width-5 {
      max-width: var(--zbk-spacing-5);
    }
    .desktop-lg\:max-width-6 {
      max-width: var(--zbk-spacing-6);
    }
    .desktop-lg\:max-width-7 {
      max-width: var(--zbk-spacing-7);
    }
    .desktop-lg\:max-width-8 {
      max-width: var(--zbk-spacing-8);
    }
    .desktop-lg\:max-width-9 {
      max-width: var(--zbk-spacing-9);
    }
    .desktop-lg\:max-width-10 {
      max-width: var(--zbk-spacing-10);
    }
    .desktop-lg\:max-width-15 {
      max-width: var(--zbk-spacing-15);
    }
    .desktop-lg\:max-width-20 {
      max-width: var(--zbk-spacing-20);
    }
    .desktop-lg\:max-width-25 {
      max-width: var(--zbk-spacing-25);
    }
    .desktop-lg\:max-width-30 {
      max-width: var(--zbk-spacing-30);
    }
    .desktop-lg\:max-width-40 {
      max-width: var(--zbk-spacing-40);
    }
    .desktop-lg\:max-width-50 {
      max-width: var(--zbk-spacing-50);
    }
    .desktop-lg\:max-width-60 {
      max-width: var(--zbk-spacing-60);
    }
    .desktop-lg\:max-width-70 {
      max-width: var(--zbk-spacing-70);
    }
    .desktop-lg\:max-width-80 {
      max-width: var(--zbk-spacing-80);
    }
    .desktop-lg\:max-width-90 {
      max-width: var(--zbk-spacing-90);
    }
    .desktop-lg\:max-width-100 {
      max-width: var(--zbk-spacing-100);
    }
  }
  @media (min-width: 100rem) {
    .widescreen\:max-width-auto {
      max-width: auto;
    }
    .widescreen\:max-width-full {
      max-width: 100%;
    }
    .widescreen\:max-width-viewport {
      max-width: 100vw;
    }
    .widescreen\:max-width-min {
      max-width: -moz-min-content;
      max-width: min-content;
    }
    .widescreen\:max-width-max {
      max-width: -moz-max-content;
      max-width: max-content;
    }
    .widescreen\:max-width-inherit {
      max-width: inherit;
    }
    .widescreen\:max-width-neg-1px {
      max-width: var(--zbk-spacing-neg-1px);
    }
    .widescreen\:max-width-0 {
      max-width: var(--zbk-spacing-0);
    }
    .widescreen\:max-width-1px {
      max-width: var(--zbk-spacing-1px);
    }
    .widescreen\:max-width-2px {
      max-width: var(--zbk-spacing-2px);
    }
    .widescreen\:max-width-025 {
      max-width: var(--zbk-spacing-025);
    }
    .widescreen\:max-width-05 {
      max-width: var(--zbk-spacing-05);
    }
    .widescreen\:max-width-1 {
      max-width: var(--zbk-spacing-1);
    }
    .widescreen\:max-width-105 {
      max-width: var(--zbk-spacing-105);
    }
    .widescreen\:max-width-2 {
      max-width: var(--zbk-spacing-2);
    }
    .widescreen\:max-width-205 {
      max-width: var(--zbk-spacing-205);
    }
    .widescreen\:max-width-3 {
      max-width: var(--zbk-spacing-3);
    }
    .widescreen\:max-width-4 {
      max-width: var(--zbk-spacing-4);
    }
    .widescreen\:max-width-5 {
      max-width: var(--zbk-spacing-5);
    }
    .widescreen\:max-width-6 {
      max-width: var(--zbk-spacing-6);
    }
    .widescreen\:max-width-7 {
      max-width: var(--zbk-spacing-7);
    }
    .widescreen\:max-width-8 {
      max-width: var(--zbk-spacing-8);
    }
    .widescreen\:max-width-9 {
      max-width: var(--zbk-spacing-9);
    }
    .widescreen\:max-width-10 {
      max-width: var(--zbk-spacing-10);
    }
    .widescreen\:max-width-15 {
      max-width: var(--zbk-spacing-15);
    }
    .widescreen\:max-width-20 {
      max-width: var(--zbk-spacing-20);
    }
    .widescreen\:max-width-25 {
      max-width: var(--zbk-spacing-25);
    }
    .widescreen\:max-width-30 {
      max-width: var(--zbk-spacing-30);
    }
    .widescreen\:max-width-40 {
      max-width: var(--zbk-spacing-40);
    }
    .widescreen\:max-width-50 {
      max-width: var(--zbk-spacing-50);
    }
    .widescreen\:max-width-60 {
      max-width: var(--zbk-spacing-60);
    }
    .widescreen\:max-width-70 {
      max-width: var(--zbk-spacing-70);
    }
    .widescreen\:max-width-80 {
      max-width: var(--zbk-spacing-80);
    }
    .widescreen\:max-width-90 {
      max-width: var(--zbk-spacing-90);
    }
    .widescreen\:max-width-100 {
      max-width: var(--zbk-spacing-100);
    }
  }
  .margin-neg-15 {
    margin-inline: var(--zbk-spacing-neg-15);
  }
  .margin-block-neg-15,
  .margin-neg-15 {
    margin-block: var(--zbk-spacing-neg-15);
  }
  .margin-inline-neg-15 {
    margin-inline: var(--zbk-spacing-neg-15);
  }
  .margin-block-start-neg-15 {
    margin-block-start: var(--zbk-spacing-neg-15);
  }
  .margin-inline-end-neg-15 {
    margin-inline-end: var(--zbk-spacing-neg-15);
  }
  .margin-block-end-neg-15 {
    margin-block-end: var(--zbk-spacing-neg-15);
  }
  .margin-inline-start-neg-15 {
    margin-inline-start: var(--zbk-spacing-neg-15);
  }
  .margin-neg-10 {
    margin-inline: var(--zbk-spacing-neg-10);
  }
  .margin-block-neg-10,
  .margin-neg-10 {
    margin-block: var(--zbk-spacing-neg-10);
  }
  .margin-inline-neg-10 {
    margin-inline: var(--zbk-spacing-neg-10);
  }
  .margin-block-start-neg-10 {
    margin-block-start: var(--zbk-spacing-neg-10);
  }
  .margin-inline-end-neg-10 {
    margin-inline-end: var(--zbk-spacing-neg-10);
  }
  .margin-block-end-neg-10 {
    margin-block-end: var(--zbk-spacing-neg-10);
  }
  .margin-inline-start-neg-10 {
    margin-inline-start: var(--zbk-spacing-neg-10);
  }
  .margin-neg-9 {
    margin-inline: var(--zbk-spacing-neg-9);
  }
  .margin-block-neg-9,
  .margin-neg-9 {
    margin-block: var(--zbk-spacing-neg-9);
  }
  .margin-inline-neg-9 {
    margin-inline: var(--zbk-spacing-neg-9);
  }
  .margin-block-start-neg-9 {
    margin-block-start: var(--zbk-spacing-neg-9);
  }
  .margin-inline-end-neg-9 {
    margin-inline-end: var(--zbk-spacing-neg-9);
  }
  .margin-block-end-neg-9 {
    margin-block-end: var(--zbk-spacing-neg-9);
  }
  .margin-inline-start-neg-9 {
    margin-inline-start: var(--zbk-spacing-neg-9);
  }
  .margin-neg-8 {
    margin-inline: var(--zbk-spacing-neg-8);
  }
  .margin-block-neg-8,
  .margin-neg-8 {
    margin-block: var(--zbk-spacing-neg-8);
  }
  .margin-inline-neg-8 {
    margin-inline: var(--zbk-spacing-neg-8);
  }
  .margin-block-start-neg-8 {
    margin-block-start: var(--zbk-spacing-neg-8);
  }
  .margin-inline-end-neg-8 {
    margin-inline-end: var(--zbk-spacing-neg-8);
  }
  .margin-block-end-neg-8 {
    margin-block-end: var(--zbk-spacing-neg-8);
  }
  .margin-inline-start-neg-8 {
    margin-inline-start: var(--zbk-spacing-neg-8);
  }
  .margin-neg-7 {
    margin-inline: var(--zbk-spacing-neg-7);
  }
  .margin-block-neg-7,
  .margin-neg-7 {
    margin-block: var(--zbk-spacing-neg-7);
  }
  .margin-inline-neg-7 {
    margin-inline: var(--zbk-spacing-neg-7);
  }
  .margin-block-start-neg-7 {
    margin-block-start: var(--zbk-spacing-neg-7);
  }
  .margin-inline-end-neg-7 {
    margin-inline-end: var(--zbk-spacing-neg-7);
  }
  .margin-block-end-neg-7 {
    margin-block-end: var(--zbk-spacing-neg-7);
  }
  .margin-inline-start-neg-7 {
    margin-inline-start: var(--zbk-spacing-neg-7);
  }
  .margin-neg-6 {
    margin-inline: var(--zbk-spacing-neg-6);
  }
  .margin-block-neg-6,
  .margin-neg-6 {
    margin-block: var(--zbk-spacing-neg-6);
  }
  .margin-inline-neg-6 {
    margin-inline: var(--zbk-spacing-neg-6);
  }
  .margin-block-start-neg-6 {
    margin-block-start: var(--zbk-spacing-neg-6);
  }
  .margin-inline-end-neg-6 {
    margin-inline-end: var(--zbk-spacing-neg-6);
  }
  .margin-block-end-neg-6 {
    margin-block-end: var(--zbk-spacing-neg-6);
  }
  .margin-inline-start-neg-6 {
    margin-inline-start: var(--zbk-spacing-neg-6);
  }
  .margin-neg-5 {
    margin-inline: var(--zbk-spacing-neg-5);
  }
  .margin-block-neg-5,
  .margin-neg-5 {
    margin-block: var(--zbk-spacing-neg-5);
  }
  .margin-inline-neg-5 {
    margin-inline: var(--zbk-spacing-neg-5);
  }
  .margin-block-start-neg-5 {
    margin-block-start: var(--zbk-spacing-neg-5);
  }
  .margin-inline-end-neg-5 {
    margin-inline-end: var(--zbk-spacing-neg-5);
  }
  .margin-block-end-neg-5 {
    margin-block-end: var(--zbk-spacing-neg-5);
  }
  .margin-inline-start-neg-5 {
    margin-inline-start: var(--zbk-spacing-neg-5);
  }
  .margin-neg-4 {
    margin-inline: var(--zbk-spacing-neg-4);
  }
  .margin-block-neg-4,
  .margin-neg-4 {
    margin-block: var(--zbk-spacing-neg-4);
  }
  .margin-inline-neg-4 {
    margin-inline: var(--zbk-spacing-neg-4);
  }
  .margin-block-start-neg-4 {
    margin-block-start: var(--zbk-spacing-neg-4);
  }
  .margin-inline-end-neg-4 {
    margin-inline-end: var(--zbk-spacing-neg-4);
  }
  .margin-block-end-neg-4 {
    margin-block-end: var(--zbk-spacing-neg-4);
  }
  .margin-inline-start-neg-4 {
    margin-inline-start: var(--zbk-spacing-neg-4);
  }
  .margin-neg-3 {
    margin-inline: var(--zbk-spacing-neg-3);
  }
  .margin-block-neg-3,
  .margin-neg-3 {
    margin-block: var(--zbk-spacing-neg-3);
  }
  .margin-inline-neg-3 {
    margin-inline: var(--zbk-spacing-neg-3);
  }
  .margin-block-start-neg-3 {
    margin-block-start: var(--zbk-spacing-neg-3);
  }
  .margin-inline-end-neg-3 {
    margin-inline-end: var(--zbk-spacing-neg-3);
  }
  .margin-block-end-neg-3 {
    margin-block-end: var(--zbk-spacing-neg-3);
  }
  .margin-inline-start-neg-3 {
    margin-inline-start: var(--zbk-spacing-neg-3);
  }
  .margin-neg-205 {
    margin-inline: var(--zbk-spacing-neg-205);
  }
  .margin-block-neg-205,
  .margin-neg-205 {
    margin-block: var(--zbk-spacing-neg-205);
  }
  .margin-inline-neg-205 {
    margin-inline: var(--zbk-spacing-neg-205);
  }
  .margin-block-start-neg-205 {
    margin-block-start: var(--zbk-spacing-neg-205);
  }
  .margin-inline-end-neg-205 {
    margin-inline-end: var(--zbk-spacing-neg-205);
  }
  .margin-block-end-neg-205 {
    margin-block-end: var(--zbk-spacing-neg-205);
  }
  .margin-inline-start-neg-205 {
    margin-inline-start: var(--zbk-spacing-neg-205);
  }
  .margin-neg-2 {
    margin-inline: var(--zbk-spacing-neg-2);
  }
  .margin-block-neg-2,
  .margin-neg-2 {
    margin-block: var(--zbk-spacing-neg-2);
  }
  .margin-inline-neg-2 {
    margin-inline: var(--zbk-spacing-neg-2);
  }
  .margin-block-start-neg-2 {
    margin-block-start: var(--zbk-spacing-neg-2);
  }
  .margin-inline-end-neg-2 {
    margin-inline-end: var(--zbk-spacing-neg-2);
  }
  .margin-block-end-neg-2 {
    margin-block-end: var(--zbk-spacing-neg-2);
  }
  .margin-inline-start-neg-2 {
    margin-inline-start: var(--zbk-spacing-neg-2);
  }
  .margin-neg-105 {
    margin-inline: var(--zbk-spacing-neg-105);
  }
  .margin-block-neg-105,
  .margin-neg-105 {
    margin-block: var(--zbk-spacing-neg-105);
  }
  .margin-inline-neg-105 {
    margin-inline: var(--zbk-spacing-neg-105);
  }
  .margin-block-start-neg-105 {
    margin-block-start: var(--zbk-spacing-neg-105);
  }
  .margin-inline-end-neg-105 {
    margin-inline-end: var(--zbk-spacing-neg-105);
  }
  .margin-block-end-neg-105 {
    margin-block-end: var(--zbk-spacing-neg-105);
  }
  .margin-inline-start-neg-105 {
    margin-inline-start: var(--zbk-spacing-neg-105);
  }
  .margin-neg-1 {
    margin-inline: var(--zbk-spacing-neg-1);
  }
  .margin-block-neg-1,
  .margin-neg-1 {
    margin-block: var(--zbk-spacing-neg-1);
  }
  .margin-inline-neg-1 {
    margin-inline: var(--zbk-spacing-neg-1);
  }
  .margin-block-start-neg-1 {
    margin-block-start: var(--zbk-spacing-neg-1);
  }
  .margin-inline-end-neg-1 {
    margin-inline-end: var(--zbk-spacing-neg-1);
  }
  .margin-block-end-neg-1 {
    margin-block-end: var(--zbk-spacing-neg-1);
  }
  .margin-inline-start-neg-1 {
    margin-inline-start: var(--zbk-spacing-neg-1);
  }
  .margin-neg-05 {
    margin-inline: var(--zbk-spacing-neg-05);
  }
  .margin-block-neg-05,
  .margin-neg-05 {
    margin-block: var(--zbk-spacing-neg-05);
  }
  .margin-inline-neg-05 {
    margin-inline: var(--zbk-spacing-neg-05);
  }
  .margin-block-start-neg-05 {
    margin-block-start: var(--zbk-spacing-neg-05);
  }
  .margin-inline-end-neg-05 {
    margin-inline-end: var(--zbk-spacing-neg-05);
  }
  .margin-block-end-neg-05 {
    margin-block-end: var(--zbk-spacing-neg-05);
  }
  .margin-inline-start-neg-05 {
    margin-inline-start: var(--zbk-spacing-neg-05);
  }
  .margin-neg-025 {
    margin-inline: var(--zbk-spacing-neg-025);
  }
  .margin-block-neg-025,
  .margin-neg-025 {
    margin-block: var(--zbk-spacing-neg-025);
  }
  .margin-inline-neg-025 {
    margin-inline: var(--zbk-spacing-neg-025);
  }
  .margin-block-start-neg-025 {
    margin-block-start: var(--zbk-spacing-neg-025);
  }
  .margin-inline-end-neg-025 {
    margin-inline-end: var(--zbk-spacing-neg-025);
  }
  .margin-block-end-neg-025 {
    margin-block-end: var(--zbk-spacing-neg-025);
  }
  .margin-inline-start-neg-025 {
    margin-inline-start: var(--zbk-spacing-neg-025);
  }
  .margin-neg-2px {
    margin-inline: var(--zbk-spacing-neg-2px);
  }
  .margin-block-neg-2px,
  .margin-neg-2px {
    margin-block: var(--zbk-spacing-neg-2px);
  }
  .margin-inline-neg-2px {
    margin-inline: var(--zbk-spacing-neg-2px);
  }
  .margin-block-start-neg-2px {
    margin-block-start: var(--zbk-spacing-neg-2px);
  }
  .margin-inline-end-neg-2px {
    margin-inline-end: var(--zbk-spacing-neg-2px);
  }
  .margin-block-end-neg-2px {
    margin-block-end: var(--zbk-spacing-neg-2px);
  }
  .margin-inline-start-neg-2px {
    margin-inline-start: var(--zbk-spacing-neg-2px);
  }
  .margin-neg-1px {
    margin-inline: var(--zbk-spacing-neg-1px);
  }
  .margin-block-neg-1px,
  .margin-neg-1px {
    margin-block: var(--zbk-spacing-neg-1px);
  }
  .margin-inline-neg-1px {
    margin-inline: var(--zbk-spacing-neg-1px);
  }
  .margin-block-start-neg-1px {
    margin-block-start: var(--zbk-spacing-neg-1px);
  }
  .margin-inline-end-neg-1px {
    margin-inline-end: var(--zbk-spacing-neg-1px);
  }
  .margin-block-end-neg-1px {
    margin-block-end: var(--zbk-spacing-neg-1px);
  }
  .margin-inline-start-neg-1px {
    margin-inline-start: var(--zbk-spacing-neg-1px);
  }
  .margin-0 {
    margin-inline: var(--zbk-spacing-0);
  }
  .margin-0,
  .margin-block-0 {
    margin-block: var(--zbk-spacing-0);
  }
  .margin-inline-0 {
    margin-inline: var(--zbk-spacing-0);
  }
  .margin-block-start-0 {
    margin-block-start: var(--zbk-spacing-0);
  }
  .margin-inline-end-0 {
    margin-inline-end: var(--zbk-spacing-0);
  }
  .margin-block-end-0 {
    margin-block-end: var(--zbk-spacing-0);
  }
  .margin-inline-start-0 {
    margin-inline-start: var(--zbk-spacing-0);
  }
  .margin-1px {
    margin-inline: var(--zbk-spacing-1px);
  }
  .margin-1px,
  .margin-block-1px {
    margin-block: var(--zbk-spacing-1px);
  }
  .margin-inline-1px {
    margin-inline: var(--zbk-spacing-1px);
  }
  .margin-block-start-1px {
    margin-block-start: var(--zbk-spacing-1px);
  }
  .margin-inline-end-1px {
    margin-inline-end: var(--zbk-spacing-1px);
  }
  .margin-block-end-1px {
    margin-block-end: var(--zbk-spacing-1px);
  }
  .margin-inline-start-1px {
    margin-inline-start: var(--zbk-spacing-1px);
  }
  .margin-2px {
    margin-inline: var(--zbk-spacing-2px);
  }
  .margin-2px,
  .margin-block-2px {
    margin-block: var(--zbk-spacing-2px);
  }
  .margin-inline-2px {
    margin-inline: var(--zbk-spacing-2px);
  }
  .margin-block-start-2px {
    margin-block-start: var(--zbk-spacing-2px);
  }
  .margin-inline-end-2px {
    margin-inline-end: var(--zbk-spacing-2px);
  }
  .margin-block-end-2px {
    margin-block-end: var(--zbk-spacing-2px);
  }
  .margin-inline-start-2px {
    margin-inline-start: var(--zbk-spacing-2px);
  }
  .margin-025 {
    margin-inline: var(--zbk-spacing-025);
  }
  .margin-025,
  .margin-block-025 {
    margin-block: var(--zbk-spacing-025);
  }
  .margin-inline-025 {
    margin-inline: var(--zbk-spacing-025);
  }
  .margin-block-start-025 {
    margin-block-start: var(--zbk-spacing-025);
  }
  .margin-inline-end-025 {
    margin-inline-end: var(--zbk-spacing-025);
  }
  .margin-block-end-025 {
    margin-block-end: var(--zbk-spacing-025);
  }
  .margin-inline-start-025 {
    margin-inline-start: var(--zbk-spacing-025);
  }
  .margin-05 {
    margin-inline: var(--zbk-spacing-05);
  }
  .margin-05,
  .margin-block-05 {
    margin-block: var(--zbk-spacing-05);
  }
  .margin-inline-05 {
    margin-inline: var(--zbk-spacing-05);
  }
  .margin-block-start-05 {
    margin-block-start: var(--zbk-spacing-05);
  }
  .margin-inline-end-05 {
    margin-inline-end: var(--zbk-spacing-05);
  }
  .margin-block-end-05 {
    margin-block-end: var(--zbk-spacing-05);
  }
  .margin-inline-start-05 {
    margin-inline-start: var(--zbk-spacing-05);
  }
  .margin-1 {
    margin-inline: var(--zbk-spacing-1);
  }
  .margin-1,
  .margin-block-1 {
    margin-block: var(--zbk-spacing-1);
  }
  .margin-inline-1 {
    margin-inline: var(--zbk-spacing-1);
  }
  .margin-block-start-1 {
    margin-block-start: var(--zbk-spacing-1);
  }
  .margin-inline-end-1 {
    margin-inline-end: var(--zbk-spacing-1);
  }
  .margin-block-end-1 {
    margin-block-end: var(--zbk-spacing-1);
  }
  .margin-inline-start-1 {
    margin-inline-start: var(--zbk-spacing-1);
  }
  .margin-105 {
    margin-inline: var(--zbk-spacing-105);
  }
  .margin-105,
  .margin-block-105 {
    margin-block: var(--zbk-spacing-105);
  }
  .margin-inline-105 {
    margin-inline: var(--zbk-spacing-105);
  }
  .margin-block-start-105 {
    margin-block-start: var(--zbk-spacing-105);
  }
  .margin-inline-end-105 {
    margin-inline-end: var(--zbk-spacing-105);
  }
  .margin-block-end-105 {
    margin-block-end: var(--zbk-spacing-105);
  }
  .margin-inline-start-105 {
    margin-inline-start: var(--zbk-spacing-105);
  }
  .margin-2 {
    margin-inline: var(--zbk-spacing-2);
  }
  .margin-2,
  .margin-block-2 {
    margin-block: var(--zbk-spacing-2);
  }
  .margin-inline-2 {
    margin-inline: var(--zbk-spacing-2);
  }
  .margin-block-start-2 {
    margin-block-start: var(--zbk-spacing-2);
  }
  .margin-inline-end-2 {
    margin-inline-end: var(--zbk-spacing-2);
  }
  .margin-block-end-2 {
    margin-block-end: var(--zbk-spacing-2);
  }
  .margin-inline-start-2 {
    margin-inline-start: var(--zbk-spacing-2);
  }
  .margin-205 {
    margin-inline: var(--zbk-spacing-205);
  }
  .margin-205,
  .margin-block-205 {
    margin-block: var(--zbk-spacing-205);
  }
  .margin-inline-205 {
    margin-inline: var(--zbk-spacing-205);
  }
  .margin-block-start-205 {
    margin-block-start: var(--zbk-spacing-205);
  }
  .margin-inline-end-205 {
    margin-inline-end: var(--zbk-spacing-205);
  }
  .margin-block-end-205 {
    margin-block-end: var(--zbk-spacing-205);
  }
  .margin-inline-start-205 {
    margin-inline-start: var(--zbk-spacing-205);
  }
  .margin-3 {
    margin-inline: var(--zbk-spacing-3);
  }
  .margin-3,
  .margin-block-3 {
    margin-block: var(--zbk-spacing-3);
  }
  .margin-inline-3 {
    margin-inline: var(--zbk-spacing-3);
  }
  .margin-block-start-3 {
    margin-block-start: var(--zbk-spacing-3);
  }
  .margin-inline-end-3 {
    margin-inline-end: var(--zbk-spacing-3);
  }
  .margin-block-end-3 {
    margin-block-end: var(--zbk-spacing-3);
  }
  .margin-inline-start-3 {
    margin-inline-start: var(--zbk-spacing-3);
  }
  .margin-4 {
    margin-inline: var(--zbk-spacing-4);
  }
  .margin-4,
  .margin-block-4 {
    margin-block: var(--zbk-spacing-4);
  }
  .margin-inline-4 {
    margin-inline: var(--zbk-spacing-4);
  }
  .margin-block-start-4 {
    margin-block-start: var(--zbk-spacing-4);
  }
  .margin-inline-end-4 {
    margin-inline-end: var(--zbk-spacing-4);
  }
  .margin-block-end-4 {
    margin-block-end: var(--zbk-spacing-4);
  }
  .margin-inline-start-4 {
    margin-inline-start: var(--zbk-spacing-4);
  }
  .margin-5 {
    margin-inline: var(--zbk-spacing-5);
  }
  .margin-5,
  .margin-block-5 {
    margin-block: var(--zbk-spacing-5);
  }
  .margin-inline-5 {
    margin-inline: var(--zbk-spacing-5);
  }
  .margin-block-start-5 {
    margin-block-start: var(--zbk-spacing-5);
  }
  .margin-inline-end-5 {
    margin-inline-end: var(--zbk-spacing-5);
  }
  .margin-block-end-5 {
    margin-block-end: var(--zbk-spacing-5);
  }
  .margin-inline-start-5 {
    margin-inline-start: var(--zbk-spacing-5);
  }
  .margin-6 {
    margin-inline: var(--zbk-spacing-6);
  }
  .margin-6,
  .margin-block-6 {
    margin-block: var(--zbk-spacing-6);
  }
  .margin-inline-6 {
    margin-inline: var(--zbk-spacing-6);
  }
  .margin-block-start-6 {
    margin-block-start: var(--zbk-spacing-6);
  }
  .margin-inline-end-6 {
    margin-inline-end: var(--zbk-spacing-6);
  }
  .margin-block-end-6 {
    margin-block-end: var(--zbk-spacing-6);
  }
  .margin-inline-start-6 {
    margin-inline-start: var(--zbk-spacing-6);
  }
  .margin-7 {
    margin-inline: var(--zbk-spacing-7);
  }
  .margin-7,
  .margin-block-7 {
    margin-block: var(--zbk-spacing-7);
  }
  .margin-inline-7 {
    margin-inline: var(--zbk-spacing-7);
  }
  .margin-block-start-7 {
    margin-block-start: var(--zbk-spacing-7);
  }
  .margin-inline-end-7 {
    margin-inline-end: var(--zbk-spacing-7);
  }
  .margin-block-end-7 {
    margin-block-end: var(--zbk-spacing-7);
  }
  .margin-inline-start-7 {
    margin-inline-start: var(--zbk-spacing-7);
  }
  .margin-8 {
    margin-inline: var(--zbk-spacing-8);
  }
  .margin-8,
  .margin-block-8 {
    margin-block: var(--zbk-spacing-8);
  }
  .margin-inline-8 {
    margin-inline: var(--zbk-spacing-8);
  }
  .margin-block-start-8 {
    margin-block-start: var(--zbk-spacing-8);
  }
  .margin-inline-end-8 {
    margin-inline-end: var(--zbk-spacing-8);
  }
  .margin-block-end-8 {
    margin-block-end: var(--zbk-spacing-8);
  }
  .margin-inline-start-8 {
    margin-inline-start: var(--zbk-spacing-8);
  }
  .margin-9 {
    margin-inline: var(--zbk-spacing-9);
  }
  .margin-9,
  .margin-block-9 {
    margin-block: var(--zbk-spacing-9);
  }
  .margin-inline-9 {
    margin-inline: var(--zbk-spacing-9);
  }
  .margin-block-start-9 {
    margin-block-start: var(--zbk-spacing-9);
  }
  .margin-inline-end-9 {
    margin-inline-end: var(--zbk-spacing-9);
  }
  .margin-block-end-9 {
    margin-block-end: var(--zbk-spacing-9);
  }
  .margin-inline-start-9 {
    margin-inline-start: var(--zbk-spacing-9);
  }
  .margin-10 {
    margin-inline: var(--zbk-spacing-10);
  }
  .margin-10,
  .margin-block-10 {
    margin-block: var(--zbk-spacing-10);
  }
  .margin-inline-10 {
    margin-inline: var(--zbk-spacing-10);
  }
  .margin-block-start-10 {
    margin-block-start: var(--zbk-spacing-10);
  }
  .margin-inline-end-10 {
    margin-inline-end: var(--zbk-spacing-10);
  }
  .margin-block-end-10 {
    margin-block-end: var(--zbk-spacing-10);
  }
  .margin-inline-start-10 {
    margin-inline-start: var(--zbk-spacing-10);
  }
  .margin-15 {
    margin-inline: var(--zbk-spacing-15);
  }
  .margin-15,
  .margin-block-15 {
    margin-block: var(--zbk-spacing-15);
  }
  .margin-inline-15 {
    margin-inline: var(--zbk-spacing-15);
  }
  .margin-block-start-15 {
    margin-block-start: var(--zbk-spacing-15);
  }
  .margin-inline-end-15 {
    margin-inline-end: var(--zbk-spacing-15);
  }
  .margin-block-end-15 {
    margin-block-end: var(--zbk-spacing-15);
  }
  .margin-inline-start-15 {
    margin-inline-start: var(--zbk-spacing-15);
  }
  .margin-20 {
    margin-inline: var(--zbk-spacing-20);
  }
  .margin-20,
  .margin-block-20 {
    margin-block: var(--zbk-spacing-20);
  }
  .margin-inline-20 {
    margin-inline: var(--zbk-spacing-20);
  }
  .margin-block-start-20 {
    margin-block-start: var(--zbk-spacing-20);
  }
  .margin-inline-end-20 {
    margin-inline-end: var(--zbk-spacing-20);
  }
  .margin-block-end-20 {
    margin-block-end: var(--zbk-spacing-20);
  }
  .margin-inline-start-20 {
    margin-inline-start: var(--zbk-spacing-20);
  }
  .padding-neg-15 {
    padding-inline: var(--zbk-spacing-neg-15);
  }
  .padding-block-neg-15,
  .padding-neg-15 {
    padding-block: var(--zbk-spacing-neg-15);
  }
  .padding-inline-neg-15 {
    padding-inline: var(--zbk-spacing-neg-15);
  }
  .padding-block-start-neg-15 {
    padding-block-start: var(--zbk-spacing-neg-15);
  }
  .padding-inline-end-neg-15 {
    padding-inline-end: var(--zbk-spacing-neg-15);
  }
  .padding-block-end-neg-15 {
    padding-block-end: var(--zbk-spacing-neg-15);
  }
  .padding-inline-start-neg-15 {
    padding-inline-start: var(--zbk-spacing-neg-15);
  }
  .padding-neg-10 {
    padding-inline: var(--zbk-spacing-neg-10);
  }
  .padding-block-neg-10,
  .padding-neg-10 {
    padding-block: var(--zbk-spacing-neg-10);
  }
  .padding-inline-neg-10 {
    padding-inline: var(--zbk-spacing-neg-10);
  }
  .padding-block-start-neg-10 {
    padding-block-start: var(--zbk-spacing-neg-10);
  }
  .padding-inline-end-neg-10 {
    padding-inline-end: var(--zbk-spacing-neg-10);
  }
  .padding-block-end-neg-10 {
    padding-block-end: var(--zbk-spacing-neg-10);
  }
  .padding-inline-start-neg-10 {
    padding-inline-start: var(--zbk-spacing-neg-10);
  }
  .padding-neg-9 {
    padding-inline: var(--zbk-spacing-neg-9);
  }
  .padding-block-neg-9,
  .padding-neg-9 {
    padding-block: var(--zbk-spacing-neg-9);
  }
  .padding-inline-neg-9 {
    padding-inline: var(--zbk-spacing-neg-9);
  }
  .padding-block-start-neg-9 {
    padding-block-start: var(--zbk-spacing-neg-9);
  }
  .padding-inline-end-neg-9 {
    padding-inline-end: var(--zbk-spacing-neg-9);
  }
  .padding-block-end-neg-9 {
    padding-block-end: var(--zbk-spacing-neg-9);
  }
  .padding-inline-start-neg-9 {
    padding-inline-start: var(--zbk-spacing-neg-9);
  }
  .padding-neg-8 {
    padding-inline: var(--zbk-spacing-neg-8);
  }
  .padding-block-neg-8,
  .padding-neg-8 {
    padding-block: var(--zbk-spacing-neg-8);
  }
  .padding-inline-neg-8 {
    padding-inline: var(--zbk-spacing-neg-8);
  }
  .padding-block-start-neg-8 {
    padding-block-start: var(--zbk-spacing-neg-8);
  }
  .padding-inline-end-neg-8 {
    padding-inline-end: var(--zbk-spacing-neg-8);
  }
  .padding-block-end-neg-8 {
    padding-block-end: var(--zbk-spacing-neg-8);
  }
  .padding-inline-start-neg-8 {
    padding-inline-start: var(--zbk-spacing-neg-8);
  }
  .padding-neg-7 {
    padding-inline: var(--zbk-spacing-neg-7);
  }
  .padding-block-neg-7,
  .padding-neg-7 {
    padding-block: var(--zbk-spacing-neg-7);
  }
  .padding-inline-neg-7 {
    padding-inline: var(--zbk-spacing-neg-7);
  }
  .padding-block-start-neg-7 {
    padding-block-start: var(--zbk-spacing-neg-7);
  }
  .padding-inline-end-neg-7 {
    padding-inline-end: var(--zbk-spacing-neg-7);
  }
  .padding-block-end-neg-7 {
    padding-block-end: var(--zbk-spacing-neg-7);
  }
  .padding-inline-start-neg-7 {
    padding-inline-start: var(--zbk-spacing-neg-7);
  }
  .padding-neg-6 {
    padding-inline: var(--zbk-spacing-neg-6);
  }
  .padding-block-neg-6,
  .padding-neg-6 {
    padding-block: var(--zbk-spacing-neg-6);
  }
  .padding-inline-neg-6 {
    padding-inline: var(--zbk-spacing-neg-6);
  }
  .padding-block-start-neg-6 {
    padding-block-start: var(--zbk-spacing-neg-6);
  }
  .padding-inline-end-neg-6 {
    padding-inline-end: var(--zbk-spacing-neg-6);
  }
  .padding-block-end-neg-6 {
    padding-block-end: var(--zbk-spacing-neg-6);
  }
  .padding-inline-start-neg-6 {
    padding-inline-start: var(--zbk-spacing-neg-6);
  }
  .padding-neg-5 {
    padding-inline: var(--zbk-spacing-neg-5);
  }
  .padding-block-neg-5,
  .padding-neg-5 {
    padding-block: var(--zbk-spacing-neg-5);
  }
  .padding-inline-neg-5 {
    padding-inline: var(--zbk-spacing-neg-5);
  }
  .padding-block-start-neg-5 {
    padding-block-start: var(--zbk-spacing-neg-5);
  }
  .padding-inline-end-neg-5 {
    padding-inline-end: var(--zbk-spacing-neg-5);
  }
  .padding-block-end-neg-5 {
    padding-block-end: var(--zbk-spacing-neg-5);
  }
  .padding-inline-start-neg-5 {
    padding-inline-start: var(--zbk-spacing-neg-5);
  }
  .padding-neg-4 {
    padding-inline: var(--zbk-spacing-neg-4);
  }
  .padding-block-neg-4,
  .padding-neg-4 {
    padding-block: var(--zbk-spacing-neg-4);
  }
  .padding-inline-neg-4 {
    padding-inline: var(--zbk-spacing-neg-4);
  }
  .padding-block-start-neg-4 {
    padding-block-start: var(--zbk-spacing-neg-4);
  }
  .padding-inline-end-neg-4 {
    padding-inline-end: var(--zbk-spacing-neg-4);
  }
  .padding-block-end-neg-4 {
    padding-block-end: var(--zbk-spacing-neg-4);
  }
  .padding-inline-start-neg-4 {
    padding-inline-start: var(--zbk-spacing-neg-4);
  }
  .padding-neg-3 {
    padding-inline: var(--zbk-spacing-neg-3);
  }
  .padding-block-neg-3,
  .padding-neg-3 {
    padding-block: var(--zbk-spacing-neg-3);
  }
  .padding-inline-neg-3 {
    padding-inline: var(--zbk-spacing-neg-3);
  }
  .padding-block-start-neg-3 {
    padding-block-start: var(--zbk-spacing-neg-3);
  }
  .padding-inline-end-neg-3 {
    padding-inline-end: var(--zbk-spacing-neg-3);
  }
  .padding-block-end-neg-3 {
    padding-block-end: var(--zbk-spacing-neg-3);
  }
  .padding-inline-start-neg-3 {
    padding-inline-start: var(--zbk-spacing-neg-3);
  }
  .padding-neg-205 {
    padding-inline: var(--zbk-spacing-neg-205);
  }
  .padding-block-neg-205,
  .padding-neg-205 {
    padding-block: var(--zbk-spacing-neg-205);
  }
  .padding-inline-neg-205 {
    padding-inline: var(--zbk-spacing-neg-205);
  }
  .padding-block-start-neg-205 {
    padding-block-start: var(--zbk-spacing-neg-205);
  }
  .padding-inline-end-neg-205 {
    padding-inline-end: var(--zbk-spacing-neg-205);
  }
  .padding-block-end-neg-205 {
    padding-block-end: var(--zbk-spacing-neg-205);
  }
  .padding-inline-start-neg-205 {
    padding-inline-start: var(--zbk-spacing-neg-205);
  }
  .padding-neg-2 {
    padding-inline: var(--zbk-spacing-neg-2);
  }
  .padding-block-neg-2,
  .padding-neg-2 {
    padding-block: var(--zbk-spacing-neg-2);
  }
  .padding-inline-neg-2 {
    padding-inline: var(--zbk-spacing-neg-2);
  }
  .padding-block-start-neg-2 {
    padding-block-start: var(--zbk-spacing-neg-2);
  }
  .padding-inline-end-neg-2 {
    padding-inline-end: var(--zbk-spacing-neg-2);
  }
  .padding-block-end-neg-2 {
    padding-block-end: var(--zbk-spacing-neg-2);
  }
  .padding-inline-start-neg-2 {
    padding-inline-start: var(--zbk-spacing-neg-2);
  }
  .padding-neg-105 {
    padding-inline: var(--zbk-spacing-neg-105);
  }
  .padding-block-neg-105,
  .padding-neg-105 {
    padding-block: var(--zbk-spacing-neg-105);
  }
  .padding-inline-neg-105 {
    padding-inline: var(--zbk-spacing-neg-105);
  }
  .padding-block-start-neg-105 {
    padding-block-start: var(--zbk-spacing-neg-105);
  }
  .padding-inline-end-neg-105 {
    padding-inline-end: var(--zbk-spacing-neg-105);
  }
  .padding-block-end-neg-105 {
    padding-block-end: var(--zbk-spacing-neg-105);
  }
  .padding-inline-start-neg-105 {
    padding-inline-start: var(--zbk-spacing-neg-105);
  }
  .padding-neg-1 {
    padding-inline: var(--zbk-spacing-neg-1);
  }
  .padding-block-neg-1,
  .padding-neg-1 {
    padding-block: var(--zbk-spacing-neg-1);
  }
  .padding-inline-neg-1 {
    padding-inline: var(--zbk-spacing-neg-1);
  }
  .padding-block-start-neg-1 {
    padding-block-start: var(--zbk-spacing-neg-1);
  }
  .padding-inline-end-neg-1 {
    padding-inline-end: var(--zbk-spacing-neg-1);
  }
  .padding-block-end-neg-1 {
    padding-block-end: var(--zbk-spacing-neg-1);
  }
  .padding-inline-start-neg-1 {
    padding-inline-start: var(--zbk-spacing-neg-1);
  }
  .padding-neg-05 {
    padding-inline: var(--zbk-spacing-neg-05);
  }
  .padding-block-neg-05,
  .padding-neg-05 {
    padding-block: var(--zbk-spacing-neg-05);
  }
  .padding-inline-neg-05 {
    padding-inline: var(--zbk-spacing-neg-05);
  }
  .padding-block-start-neg-05 {
    padding-block-start: var(--zbk-spacing-neg-05);
  }
  .padding-inline-end-neg-05 {
    padding-inline-end: var(--zbk-spacing-neg-05);
  }
  .padding-block-end-neg-05 {
    padding-block-end: var(--zbk-spacing-neg-05);
  }
  .padding-inline-start-neg-05 {
    padding-inline-start: var(--zbk-spacing-neg-05);
  }
  .padding-neg-025 {
    padding-inline: var(--zbk-spacing-neg-025);
  }
  .padding-block-neg-025,
  .padding-neg-025 {
    padding-block: var(--zbk-spacing-neg-025);
  }
  .padding-inline-neg-025 {
    padding-inline: var(--zbk-spacing-neg-025);
  }
  .padding-block-start-neg-025 {
    padding-block-start: var(--zbk-spacing-neg-025);
  }
  .padding-inline-end-neg-025 {
    padding-inline-end: var(--zbk-spacing-neg-025);
  }
  .padding-block-end-neg-025 {
    padding-block-end: var(--zbk-spacing-neg-025);
  }
  .padding-inline-start-neg-025 {
    padding-inline-start: var(--zbk-spacing-neg-025);
  }
  .padding-neg-2px {
    padding-inline: var(--zbk-spacing-neg-2px);
  }
  .padding-block-neg-2px,
  .padding-neg-2px {
    padding-block: var(--zbk-spacing-neg-2px);
  }
  .padding-inline-neg-2px {
    padding-inline: var(--zbk-spacing-neg-2px);
  }
  .padding-block-start-neg-2px {
    padding-block-start: var(--zbk-spacing-neg-2px);
  }
  .padding-inline-end-neg-2px {
    padding-inline-end: var(--zbk-spacing-neg-2px);
  }
  .padding-block-end-neg-2px {
    padding-block-end: var(--zbk-spacing-neg-2px);
  }
  .padding-inline-start-neg-2px {
    padding-inline-start: var(--zbk-spacing-neg-2px);
  }
  .padding-neg-1px {
    padding-inline: var(--zbk-spacing-neg-1px);
  }
  .padding-block-neg-1px,
  .padding-neg-1px {
    padding-block: var(--zbk-spacing-neg-1px);
  }
  .padding-inline-neg-1px {
    padding-inline: var(--zbk-spacing-neg-1px);
  }
  .padding-block-start-neg-1px {
    padding-block-start: var(--zbk-spacing-neg-1px);
  }
  .padding-inline-end-neg-1px {
    padding-inline-end: var(--zbk-spacing-neg-1px);
  }
  .padding-block-end-neg-1px {
    padding-block-end: var(--zbk-spacing-neg-1px);
  }
  .padding-inline-start-neg-1px {
    padding-inline-start: var(--zbk-spacing-neg-1px);
  }
  .padding-0 {
    padding-inline: var(--zbk-spacing-0);
  }
  .padding-0,
  .padding-block-0 {
    padding-block: var(--zbk-spacing-0);
  }
  .padding-inline-0 {
    padding-inline: var(--zbk-spacing-0);
  }
  .padding-block-start-0 {
    padding-block-start: var(--zbk-spacing-0);
  }
  .padding-inline-end-0 {
    padding-inline-end: var(--zbk-spacing-0);
  }
  .padding-block-end-0 {
    padding-block-end: var(--zbk-spacing-0);
  }
  .padding-inline-start-0 {
    padding-inline-start: var(--zbk-spacing-0);
  }
  .padding-1px {
    padding-inline: var(--zbk-spacing-1px);
  }
  .padding-1px,
  .padding-block-1px {
    padding-block: var(--zbk-spacing-1px);
  }
  .padding-inline-1px {
    padding-inline: var(--zbk-spacing-1px);
  }
  .padding-block-start-1px {
    padding-block-start: var(--zbk-spacing-1px);
  }
  .padding-inline-end-1px {
    padding-inline-end: var(--zbk-spacing-1px);
  }
  .padding-block-end-1px {
    padding-block-end: var(--zbk-spacing-1px);
  }
  .padding-inline-start-1px {
    padding-inline-start: var(--zbk-spacing-1px);
  }
  .padding-2px {
    padding-inline: var(--zbk-spacing-2px);
  }
  .padding-2px,
  .padding-block-2px {
    padding-block: var(--zbk-spacing-2px);
  }
  .padding-inline-2px {
    padding-inline: var(--zbk-spacing-2px);
  }
  .padding-block-start-2px {
    padding-block-start: var(--zbk-spacing-2px);
  }
  .padding-inline-end-2px {
    padding-inline-end: var(--zbk-spacing-2px);
  }
  .padding-block-end-2px {
    padding-block-end: var(--zbk-spacing-2px);
  }
  .padding-inline-start-2px {
    padding-inline-start: var(--zbk-spacing-2px);
  }
  .padding-025 {
    padding-inline: var(--zbk-spacing-025);
  }
  .padding-025,
  .padding-block-025 {
    padding-block: var(--zbk-spacing-025);
  }
  .padding-inline-025 {
    padding-inline: var(--zbk-spacing-025);
  }
  .padding-block-start-025 {
    padding-block-start: var(--zbk-spacing-025);
  }
  .padding-inline-end-025 {
    padding-inline-end: var(--zbk-spacing-025);
  }
  .padding-block-end-025 {
    padding-block-end: var(--zbk-spacing-025);
  }
  .padding-inline-start-025 {
    padding-inline-start: var(--zbk-spacing-025);
  }
  .padding-05 {
    padding-inline: var(--zbk-spacing-05);
  }
  .padding-05,
  .padding-block-05 {
    padding-block: var(--zbk-spacing-05);
  }
  .padding-inline-05 {
    padding-inline: var(--zbk-spacing-05);
  }
  .padding-block-start-05 {
    padding-block-start: var(--zbk-spacing-05);
  }
  .padding-inline-end-05 {
    padding-inline-end: var(--zbk-spacing-05);
  }
  .padding-block-end-05 {
    padding-block-end: var(--zbk-spacing-05);
  }
  .padding-inline-start-05 {
    padding-inline-start: var(--zbk-spacing-05);
  }
  .padding-1 {
    padding-inline: var(--zbk-spacing-1);
  }
  .padding-1,
  .padding-block-1 {
    padding-block: var(--zbk-spacing-1);
  }
  .padding-inline-1 {
    padding-inline: var(--zbk-spacing-1);
  }
  .padding-block-start-1 {
    padding-block-start: var(--zbk-spacing-1);
  }
  .padding-inline-end-1 {
    padding-inline-end: var(--zbk-spacing-1);
  }
  .padding-block-end-1 {
    padding-block-end: var(--zbk-spacing-1);
  }
  .padding-inline-start-1 {
    padding-inline-start: var(--zbk-spacing-1);
  }
  .padding-105 {
    padding-inline: var(--zbk-spacing-105);
  }
  .padding-105,
  .padding-block-105 {
    padding-block: var(--zbk-spacing-105);
  }
  .padding-inline-105 {
    padding-inline: var(--zbk-spacing-105);
  }
  .padding-block-start-105 {
    padding-block-start: var(--zbk-spacing-105);
  }
  .padding-inline-end-105 {
    padding-inline-end: var(--zbk-spacing-105);
  }
  .padding-block-end-105 {
    padding-block-end: var(--zbk-spacing-105);
  }
  .padding-inline-start-105 {
    padding-inline-start: var(--zbk-spacing-105);
  }
  .padding-2 {
    padding-inline: var(--zbk-spacing-2);
  }
  .padding-2,
  .padding-block-2 {
    padding-block: var(--zbk-spacing-2);
  }
  .padding-inline-2 {
    padding-inline: var(--zbk-spacing-2);
  }
  .padding-block-start-2 {
    padding-block-start: var(--zbk-spacing-2);
  }
  .padding-inline-end-2 {
    padding-inline-end: var(--zbk-spacing-2);
  }
  .padding-block-end-2 {
    padding-block-end: var(--zbk-spacing-2);
  }
  .padding-inline-start-2 {
    padding-inline-start: var(--zbk-spacing-2);
  }
  .padding-205 {
    padding-inline: var(--zbk-spacing-205);
  }
  .padding-205,
  .padding-block-205 {
    padding-block: var(--zbk-spacing-205);
  }
  .padding-inline-205 {
    padding-inline: var(--zbk-spacing-205);
  }
  .padding-block-start-205 {
    padding-block-start: var(--zbk-spacing-205);
  }
  .padding-inline-end-205 {
    padding-inline-end: var(--zbk-spacing-205);
  }
  .padding-block-end-205 {
    padding-block-end: var(--zbk-spacing-205);
  }
  .padding-inline-start-205 {
    padding-inline-start: var(--zbk-spacing-205);
  }
  .padding-3 {
    padding-inline: var(--zbk-spacing-3);
  }
  .padding-3,
  .padding-block-3 {
    padding-block: var(--zbk-spacing-3);
  }
  .padding-inline-3 {
    padding-inline: var(--zbk-spacing-3);
  }
  .padding-block-start-3 {
    padding-block-start: var(--zbk-spacing-3);
  }
  .padding-inline-end-3 {
    padding-inline-end: var(--zbk-spacing-3);
  }
  .padding-block-end-3 {
    padding-block-end: var(--zbk-spacing-3);
  }
  .padding-inline-start-3 {
    padding-inline-start: var(--zbk-spacing-3);
  }
  .padding-4 {
    padding-inline: var(--zbk-spacing-4);
  }
  .padding-4,
  .padding-block-4 {
    padding-block: var(--zbk-spacing-4);
  }
  .padding-inline-4 {
    padding-inline: var(--zbk-spacing-4);
  }
  .padding-block-start-4 {
    padding-block-start: var(--zbk-spacing-4);
  }
  .padding-inline-end-4 {
    padding-inline-end: var(--zbk-spacing-4);
  }
  .padding-block-end-4 {
    padding-block-end: var(--zbk-spacing-4);
  }
  .padding-inline-start-4 {
    padding-inline-start: var(--zbk-spacing-4);
  }
  .padding-5 {
    padding-inline: var(--zbk-spacing-5);
  }
  .padding-5,
  .padding-block-5 {
    padding-block: var(--zbk-spacing-5);
  }
  .padding-inline-5 {
    padding-inline: var(--zbk-spacing-5);
  }
  .padding-block-start-5 {
    padding-block-start: var(--zbk-spacing-5);
  }
  .padding-inline-end-5 {
    padding-inline-end: var(--zbk-spacing-5);
  }
  .padding-block-end-5 {
    padding-block-end: var(--zbk-spacing-5);
  }
  .padding-inline-start-5 {
    padding-inline-start: var(--zbk-spacing-5);
  }
  .padding-6 {
    padding-inline: var(--zbk-spacing-6);
  }
  .padding-6,
  .padding-block-6 {
    padding-block: var(--zbk-spacing-6);
  }
  .padding-inline-6 {
    padding-inline: var(--zbk-spacing-6);
  }
  .padding-block-start-6 {
    padding-block-start: var(--zbk-spacing-6);
  }
  .padding-inline-end-6 {
    padding-inline-end: var(--zbk-spacing-6);
  }
  .padding-block-end-6 {
    padding-block-end: var(--zbk-spacing-6);
  }
  .padding-inline-start-6 {
    padding-inline-start: var(--zbk-spacing-6);
  }
  .padding-7 {
    padding-inline: var(--zbk-spacing-7);
  }
  .padding-7,
  .padding-block-7 {
    padding-block: var(--zbk-spacing-7);
  }
  .padding-inline-7 {
    padding-inline: var(--zbk-spacing-7);
  }
  .padding-block-start-7 {
    padding-block-start: var(--zbk-spacing-7);
  }
  .padding-inline-end-7 {
    padding-inline-end: var(--zbk-spacing-7);
  }
  .padding-block-end-7 {
    padding-block-end: var(--zbk-spacing-7);
  }
  .padding-inline-start-7 {
    padding-inline-start: var(--zbk-spacing-7);
  }
  .padding-8 {
    padding-inline: var(--zbk-spacing-8);
  }
  .padding-8,
  .padding-block-8 {
    padding-block: var(--zbk-spacing-8);
  }
  .padding-inline-8 {
    padding-inline: var(--zbk-spacing-8);
  }
  .padding-block-start-8 {
    padding-block-start: var(--zbk-spacing-8);
  }
  .padding-inline-end-8 {
    padding-inline-end: var(--zbk-spacing-8);
  }
  .padding-block-end-8 {
    padding-block-end: var(--zbk-spacing-8);
  }
  .padding-inline-start-8 {
    padding-inline-start: var(--zbk-spacing-8);
  }
  .padding-9 {
    padding-inline: var(--zbk-spacing-9);
  }
  .padding-9,
  .padding-block-9 {
    padding-block: var(--zbk-spacing-9);
  }
  .padding-inline-9 {
    padding-inline: var(--zbk-spacing-9);
  }
  .padding-block-start-9 {
    padding-block-start: var(--zbk-spacing-9);
  }
  .padding-inline-end-9 {
    padding-inline-end: var(--zbk-spacing-9);
  }
  .padding-block-end-9 {
    padding-block-end: var(--zbk-spacing-9);
  }
  .padding-inline-start-9 {
    padding-inline-start: var(--zbk-spacing-9);
  }
  .padding-10 {
    padding-inline: var(--zbk-spacing-10);
  }
  .padding-10,
  .padding-block-10 {
    padding-block: var(--zbk-spacing-10);
  }
  .padding-inline-10 {
    padding-inline: var(--zbk-spacing-10);
  }
  .padding-block-start-10 {
    padding-block-start: var(--zbk-spacing-10);
  }
  .padding-inline-end-10 {
    padding-inline-end: var(--zbk-spacing-10);
  }
  .padding-block-end-10 {
    padding-block-end: var(--zbk-spacing-10);
  }
  .padding-inline-start-10 {
    padding-inline-start: var(--zbk-spacing-10);
  }
  .padding-15 {
    padding-inline: var(--zbk-spacing-15);
  }
  .padding-15,
  .padding-block-15 {
    padding-block: var(--zbk-spacing-15);
  }
  .padding-inline-15 {
    padding-inline: var(--zbk-spacing-15);
  }
  .padding-block-start-15 {
    padding-block-start: var(--zbk-spacing-15);
  }
  .padding-inline-end-15 {
    padding-inline-end: var(--zbk-spacing-15);
  }
  .padding-block-end-15 {
    padding-block-end: var(--zbk-spacing-15);
  }
  .padding-inline-start-15 {
    padding-inline-start: var(--zbk-spacing-15);
  }
  .padding-20 {
    padding-inline: var(--zbk-spacing-20);
  }
  .padding-20,
  .padding-block-20 {
    padding-block: var(--zbk-spacing-20);
  }
  .padding-inline-20 {
    padding-inline: var(--zbk-spacing-20);
  }
  .padding-block-start-20 {
    padding-block-start: var(--zbk-spacing-20);
  }
  .padding-inline-end-20 {
    padding-inline-end: var(--zbk-spacing-20);
  }
  .padding-block-end-20 {
    padding-block-end: var(--zbk-spacing-20);
  }
  .padding-inline-start-20 {
    padding-inline-start: var(--zbk-spacing-20);
  }
  .gap-neg-15 {
    gap: var(--zbk-spacing-neg-15);
  }
  .gap-neg-10 {
    gap: var(--zbk-spacing-neg-10);
  }
  .gap-neg-9 {
    gap: var(--zbk-spacing-neg-9);
  }
  .gap-neg-8 {
    gap: var(--zbk-spacing-neg-8);
  }
  .gap-neg-7 {
    gap: var(--zbk-spacing-neg-7);
  }
  .gap-neg-6 {
    gap: var(--zbk-spacing-neg-6);
  }
  .gap-neg-5 {
    gap: var(--zbk-spacing-neg-5);
  }
  .gap-neg-4 {
    gap: var(--zbk-spacing-neg-4);
  }
  .gap-neg-3 {
    gap: var(--zbk-spacing-neg-3);
  }
  .gap-neg-205 {
    gap: var(--zbk-spacing-neg-205);
  }
  .gap-neg-2 {
    gap: var(--zbk-spacing-neg-2);
  }
  .gap-neg-105 {
    gap: var(--zbk-spacing-neg-105);
  }
  .gap-neg-1 {
    gap: var(--zbk-spacing-neg-1);
  }
  .gap-neg-05 {
    gap: var(--zbk-spacing-neg-05);
  }
  .gap-neg-025 {
    gap: var(--zbk-spacing-neg-025);
  }
  .gap-neg-2px {
    gap: var(--zbk-spacing-neg-2px);
  }
  .gap-neg-1px {
    gap: var(--zbk-spacing-neg-1px);
  }
  .gap-0 {
    gap: var(--zbk-spacing-0);
  }
  .gap-1px {
    gap: var(--zbk-spacing-1px);
  }
  .gap-2px {
    gap: var(--zbk-spacing-2px);
  }
  .gap-025 {
    gap: var(--zbk-spacing-025);
  }
  .gap-05 {
    gap: var(--zbk-spacing-05);
  }
  .gap-1 {
    gap: var(--zbk-spacing-1);
  }
  .gap-105 {
    gap: var(--zbk-spacing-105);
  }
  .gap-2 {
    gap: var(--zbk-spacing-2);
  }
  .gap-205 {
    gap: var(--zbk-spacing-205);
  }
  .gap-3 {
    gap: var(--zbk-spacing-3);
  }
  .gap-4 {
    gap: var(--zbk-spacing-4);
  }
  .gap-5 {
    gap: var(--zbk-spacing-5);
  }
  .gap-6 {
    gap: var(--zbk-spacing-6);
  }
  .gap-7 {
    gap: var(--zbk-spacing-7);
  }
  .gap-8 {
    gap: var(--zbk-spacing-8);
  }
  .gap-9 {
    gap: var(--zbk-spacing-9);
  }
  .gap-10 {
    gap: var(--zbk-spacing-10);
  }
  .gap-15 {
    gap: var(--zbk-spacing-15);
  }
  .gap-20 {
    gap: var(--zbk-spacing-20);
  }
  @media (min-width: 40rem) {
    .tablet\:margin-neg-15 {
      margin-inline: var(--zbk-spacing-neg-15);
    }
    .tablet\:margin-block-neg-15,
    .tablet\:margin-neg-15 {
      margin-block: var(--zbk-spacing-neg-15);
    }
    .tablet\:margin-inline-neg-15 {
      margin-inline: var(--zbk-spacing-neg-15);
    }
    .tablet\:margin-block-start-neg-15 {
      margin-block-start: var(--zbk-spacing-neg-15);
    }
    .tablet\:margin-inline-end-neg-15 {
      margin-inline-end: var(--zbk-spacing-neg-15);
    }
    .tablet\:margin-block-end-neg-15 {
      margin-block-end: var(--zbk-spacing-neg-15);
    }
    .tablet\:margin-inline-start-neg-15 {
      margin-inline-start: var(--zbk-spacing-neg-15);
    }
    .tablet\:margin-neg-10 {
      margin-inline: var(--zbk-spacing-neg-10);
    }
    .tablet\:margin-block-neg-10,
    .tablet\:margin-neg-10 {
      margin-block: var(--zbk-spacing-neg-10);
    }
    .tablet\:margin-inline-neg-10 {
      margin-inline: var(--zbk-spacing-neg-10);
    }
    .tablet\:margin-block-start-neg-10 {
      margin-block-start: var(--zbk-spacing-neg-10);
    }
    .tablet\:margin-inline-end-neg-10 {
      margin-inline-end: var(--zbk-spacing-neg-10);
    }
    .tablet\:margin-block-end-neg-10 {
      margin-block-end: var(--zbk-spacing-neg-10);
    }
    .tablet\:margin-inline-start-neg-10 {
      margin-inline-start: var(--zbk-spacing-neg-10);
    }
    .tablet\:margin-neg-9 {
      margin-inline: var(--zbk-spacing-neg-9);
    }
    .tablet\:margin-block-neg-9,
    .tablet\:margin-neg-9 {
      margin-block: var(--zbk-spacing-neg-9);
    }
    .tablet\:margin-inline-neg-9 {
      margin-inline: var(--zbk-spacing-neg-9);
    }
    .tablet\:margin-block-start-neg-9 {
      margin-block-start: var(--zbk-spacing-neg-9);
    }
    .tablet\:margin-inline-end-neg-9 {
      margin-inline-end: var(--zbk-spacing-neg-9);
    }
    .tablet\:margin-block-end-neg-9 {
      margin-block-end: var(--zbk-spacing-neg-9);
    }
    .tablet\:margin-inline-start-neg-9 {
      margin-inline-start: var(--zbk-spacing-neg-9);
    }
    .tablet\:margin-neg-8 {
      margin-inline: var(--zbk-spacing-neg-8);
    }
    .tablet\:margin-block-neg-8,
    .tablet\:margin-neg-8 {
      margin-block: var(--zbk-spacing-neg-8);
    }
    .tablet\:margin-inline-neg-8 {
      margin-inline: var(--zbk-spacing-neg-8);
    }
    .tablet\:margin-block-start-neg-8 {
      margin-block-start: var(--zbk-spacing-neg-8);
    }
    .tablet\:margin-inline-end-neg-8 {
      margin-inline-end: var(--zbk-spacing-neg-8);
    }
    .tablet\:margin-block-end-neg-8 {
      margin-block-end: var(--zbk-spacing-neg-8);
    }
    .tablet\:margin-inline-start-neg-8 {
      margin-inline-start: var(--zbk-spacing-neg-8);
    }
    .tablet\:margin-neg-7 {
      margin-inline: var(--zbk-spacing-neg-7);
    }
    .tablet\:margin-block-neg-7,
    .tablet\:margin-neg-7 {
      margin-block: var(--zbk-spacing-neg-7);
    }
    .tablet\:margin-inline-neg-7 {
      margin-inline: var(--zbk-spacing-neg-7);
    }
    .tablet\:margin-block-start-neg-7 {
      margin-block-start: var(--zbk-spacing-neg-7);
    }
    .tablet\:margin-inline-end-neg-7 {
      margin-inline-end: var(--zbk-spacing-neg-7);
    }
    .tablet\:margin-block-end-neg-7 {
      margin-block-end: var(--zbk-spacing-neg-7);
    }
    .tablet\:margin-inline-start-neg-7 {
      margin-inline-start: var(--zbk-spacing-neg-7);
    }
    .tablet\:margin-neg-6 {
      margin-inline: var(--zbk-spacing-neg-6);
    }
    .tablet\:margin-block-neg-6,
    .tablet\:margin-neg-6 {
      margin-block: var(--zbk-spacing-neg-6);
    }
    .tablet\:margin-inline-neg-6 {
      margin-inline: var(--zbk-spacing-neg-6);
    }
    .tablet\:margin-block-start-neg-6 {
      margin-block-start: var(--zbk-spacing-neg-6);
    }
    .tablet\:margin-inline-end-neg-6 {
      margin-inline-end: var(--zbk-spacing-neg-6);
    }
    .tablet\:margin-block-end-neg-6 {
      margin-block-end: var(--zbk-spacing-neg-6);
    }
    .tablet\:margin-inline-start-neg-6 {
      margin-inline-start: var(--zbk-spacing-neg-6);
    }
    .tablet\:margin-neg-5 {
      margin-inline: var(--zbk-spacing-neg-5);
    }
    .tablet\:margin-block-neg-5,
    .tablet\:margin-neg-5 {
      margin-block: var(--zbk-spacing-neg-5);
    }
    .tablet\:margin-inline-neg-5 {
      margin-inline: var(--zbk-spacing-neg-5);
    }
    .tablet\:margin-block-start-neg-5 {
      margin-block-start: var(--zbk-spacing-neg-5);
    }
    .tablet\:margin-inline-end-neg-5 {
      margin-inline-end: var(--zbk-spacing-neg-5);
    }
    .tablet\:margin-block-end-neg-5 {
      margin-block-end: var(--zbk-spacing-neg-5);
    }
    .tablet\:margin-inline-start-neg-5 {
      margin-inline-start: var(--zbk-spacing-neg-5);
    }
    .tablet\:margin-neg-4 {
      margin-inline: var(--zbk-spacing-neg-4);
    }
    .tablet\:margin-block-neg-4,
    .tablet\:margin-neg-4 {
      margin-block: var(--zbk-spacing-neg-4);
    }
    .tablet\:margin-inline-neg-4 {
      margin-inline: var(--zbk-spacing-neg-4);
    }
    .tablet\:margin-block-start-neg-4 {
      margin-block-start: var(--zbk-spacing-neg-4);
    }
    .tablet\:margin-inline-end-neg-4 {
      margin-inline-end: var(--zbk-spacing-neg-4);
    }
    .tablet\:margin-block-end-neg-4 {
      margin-block-end: var(--zbk-spacing-neg-4);
    }
    .tablet\:margin-inline-start-neg-4 {
      margin-inline-start: var(--zbk-spacing-neg-4);
    }
    .tablet\:margin-neg-3 {
      margin-inline: var(--zbk-spacing-neg-3);
    }
    .tablet\:margin-block-neg-3,
    .tablet\:margin-neg-3 {
      margin-block: var(--zbk-spacing-neg-3);
    }
    .tablet\:margin-inline-neg-3 {
      margin-inline: var(--zbk-spacing-neg-3);
    }
    .tablet\:margin-block-start-neg-3 {
      margin-block-start: var(--zbk-spacing-neg-3);
    }
    .tablet\:margin-inline-end-neg-3 {
      margin-inline-end: var(--zbk-spacing-neg-3);
    }
    .tablet\:margin-block-end-neg-3 {
      margin-block-end: var(--zbk-spacing-neg-3);
    }
    .tablet\:margin-inline-start-neg-3 {
      margin-inline-start: var(--zbk-spacing-neg-3);
    }
    .tablet\:margin-neg-205 {
      margin-inline: var(--zbk-spacing-neg-205);
    }
    .tablet\:margin-block-neg-205,
    .tablet\:margin-neg-205 {
      margin-block: var(--zbk-spacing-neg-205);
    }
    .tablet\:margin-inline-neg-205 {
      margin-inline: var(--zbk-spacing-neg-205);
    }
    .tablet\:margin-block-start-neg-205 {
      margin-block-start: var(--zbk-spacing-neg-205);
    }
    .tablet\:margin-inline-end-neg-205 {
      margin-inline-end: var(--zbk-spacing-neg-205);
    }
    .tablet\:margin-block-end-neg-205 {
      margin-block-end: var(--zbk-spacing-neg-205);
    }
    .tablet\:margin-inline-start-neg-205 {
      margin-inline-start: var(--zbk-spacing-neg-205);
    }
    .tablet\:margin-neg-2 {
      margin-inline: var(--zbk-spacing-neg-2);
    }
    .tablet\:margin-block-neg-2,
    .tablet\:margin-neg-2 {
      margin-block: var(--zbk-spacing-neg-2);
    }
    .tablet\:margin-inline-neg-2 {
      margin-inline: var(--zbk-spacing-neg-2);
    }
    .tablet\:margin-block-start-neg-2 {
      margin-block-start: var(--zbk-spacing-neg-2);
    }
    .tablet\:margin-inline-end-neg-2 {
      margin-inline-end: var(--zbk-spacing-neg-2);
    }
    .tablet\:margin-block-end-neg-2 {
      margin-block-end: var(--zbk-spacing-neg-2);
    }
    .tablet\:margin-inline-start-neg-2 {
      margin-inline-start: var(--zbk-spacing-neg-2);
    }
    .tablet\:margin-neg-105 {
      margin-inline: var(--zbk-spacing-neg-105);
    }
    .tablet\:margin-block-neg-105,
    .tablet\:margin-neg-105 {
      margin-block: var(--zbk-spacing-neg-105);
    }
    .tablet\:margin-inline-neg-105 {
      margin-inline: var(--zbk-spacing-neg-105);
    }
    .tablet\:margin-block-start-neg-105 {
      margin-block-start: var(--zbk-spacing-neg-105);
    }
    .tablet\:margin-inline-end-neg-105 {
      margin-inline-end: var(--zbk-spacing-neg-105);
    }
    .tablet\:margin-block-end-neg-105 {
      margin-block-end: var(--zbk-spacing-neg-105);
    }
    .tablet\:margin-inline-start-neg-105 {
      margin-inline-start: var(--zbk-spacing-neg-105);
    }
    .tablet\:margin-neg-1 {
      margin-inline: var(--zbk-spacing-neg-1);
    }
    .tablet\:margin-block-neg-1,
    .tablet\:margin-neg-1 {
      margin-block: var(--zbk-spacing-neg-1);
    }
    .tablet\:margin-inline-neg-1 {
      margin-inline: var(--zbk-spacing-neg-1);
    }
    .tablet\:margin-block-start-neg-1 {
      margin-block-start: var(--zbk-spacing-neg-1);
    }
    .tablet\:margin-inline-end-neg-1 {
      margin-inline-end: var(--zbk-spacing-neg-1);
    }
    .tablet\:margin-block-end-neg-1 {
      margin-block-end: var(--zbk-spacing-neg-1);
    }
    .tablet\:margin-inline-start-neg-1 {
      margin-inline-start: var(--zbk-spacing-neg-1);
    }
    .tablet\:margin-neg-05 {
      margin-inline: var(--zbk-spacing-neg-05);
    }
    .tablet\:margin-block-neg-05,
    .tablet\:margin-neg-05 {
      margin-block: var(--zbk-spacing-neg-05);
    }
    .tablet\:margin-inline-neg-05 {
      margin-inline: var(--zbk-spacing-neg-05);
    }
    .tablet\:margin-block-start-neg-05 {
      margin-block-start: var(--zbk-spacing-neg-05);
    }
    .tablet\:margin-inline-end-neg-05 {
      margin-inline-end: var(--zbk-spacing-neg-05);
    }
    .tablet\:margin-block-end-neg-05 {
      margin-block-end: var(--zbk-spacing-neg-05);
    }
    .tablet\:margin-inline-start-neg-05 {
      margin-inline-start: var(--zbk-spacing-neg-05);
    }
    .tablet\:margin-neg-025 {
      margin-inline: var(--zbk-spacing-neg-025);
    }
    .tablet\:margin-block-neg-025,
    .tablet\:margin-neg-025 {
      margin-block: var(--zbk-spacing-neg-025);
    }
    .tablet\:margin-inline-neg-025 {
      margin-inline: var(--zbk-spacing-neg-025);
    }
    .tablet\:margin-block-start-neg-025 {
      margin-block-start: var(--zbk-spacing-neg-025);
    }
    .tablet\:margin-inline-end-neg-025 {
      margin-inline-end: var(--zbk-spacing-neg-025);
    }
    .tablet\:margin-block-end-neg-025 {
      margin-block-end: var(--zbk-spacing-neg-025);
    }
    .tablet\:margin-inline-start-neg-025 {
      margin-inline-start: var(--zbk-spacing-neg-025);
    }
    .tablet\:margin-neg-2px {
      margin-inline: var(--zbk-spacing-neg-2px);
    }
    .tablet\:margin-block-neg-2px,
    .tablet\:margin-neg-2px {
      margin-block: var(--zbk-spacing-neg-2px);
    }
    .tablet\:margin-inline-neg-2px {
      margin-inline: var(--zbk-spacing-neg-2px);
    }
    .tablet\:margin-block-start-neg-2px {
      margin-block-start: var(--zbk-spacing-neg-2px);
    }
    .tablet\:margin-inline-end-neg-2px {
      margin-inline-end: var(--zbk-spacing-neg-2px);
    }
    .tablet\:margin-block-end-neg-2px {
      margin-block-end: var(--zbk-spacing-neg-2px);
    }
    .tablet\:margin-inline-start-neg-2px {
      margin-inline-start: var(--zbk-spacing-neg-2px);
    }
    .tablet\:margin-neg-1px {
      margin-inline: var(--zbk-spacing-neg-1px);
    }
    .tablet\:margin-block-neg-1px,
    .tablet\:margin-neg-1px {
      margin-block: var(--zbk-spacing-neg-1px);
    }
    .tablet\:margin-inline-neg-1px {
      margin-inline: var(--zbk-spacing-neg-1px);
    }
    .tablet\:margin-block-start-neg-1px {
      margin-block-start: var(--zbk-spacing-neg-1px);
    }
    .tablet\:margin-inline-end-neg-1px {
      margin-inline-end: var(--zbk-spacing-neg-1px);
    }
    .tablet\:margin-block-end-neg-1px {
      margin-block-end: var(--zbk-spacing-neg-1px);
    }
    .tablet\:margin-inline-start-neg-1px {
      margin-inline-start: var(--zbk-spacing-neg-1px);
    }
    .tablet\:margin-0 {
      margin-inline: var(--zbk-spacing-0);
    }
    .tablet\:margin-0,
    .tablet\:margin-block-0 {
      margin-block: var(--zbk-spacing-0);
    }
    .tablet\:margin-inline-0 {
      margin-inline: var(--zbk-spacing-0);
    }
    .tablet\:margin-block-start-0 {
      margin-block-start: var(--zbk-spacing-0);
    }
    .tablet\:margin-inline-end-0 {
      margin-inline-end: var(--zbk-spacing-0);
    }
    .tablet\:margin-block-end-0 {
      margin-block-end: var(--zbk-spacing-0);
    }
    .tablet\:margin-inline-start-0 {
      margin-inline-start: var(--zbk-spacing-0);
    }
    .tablet\:margin-1px {
      margin-inline: var(--zbk-spacing-1px);
    }
    .tablet\:margin-1px,
    .tablet\:margin-block-1px {
      margin-block: var(--zbk-spacing-1px);
    }
    .tablet\:margin-inline-1px {
      margin-inline: var(--zbk-spacing-1px);
    }
    .tablet\:margin-block-start-1px {
      margin-block-start: var(--zbk-spacing-1px);
    }
    .tablet\:margin-inline-end-1px {
      margin-inline-end: var(--zbk-spacing-1px);
    }
    .tablet\:margin-block-end-1px {
      margin-block-end: var(--zbk-spacing-1px);
    }
    .tablet\:margin-inline-start-1px {
      margin-inline-start: var(--zbk-spacing-1px);
    }
    .tablet\:margin-2px {
      margin-inline: var(--zbk-spacing-2px);
    }
    .tablet\:margin-2px,
    .tablet\:margin-block-2px {
      margin-block: var(--zbk-spacing-2px);
    }
    .tablet\:margin-inline-2px {
      margin-inline: var(--zbk-spacing-2px);
    }
    .tablet\:margin-block-start-2px {
      margin-block-start: var(--zbk-spacing-2px);
    }
    .tablet\:margin-inline-end-2px {
      margin-inline-end: var(--zbk-spacing-2px);
    }
    .tablet\:margin-block-end-2px {
      margin-block-end: var(--zbk-spacing-2px);
    }
    .tablet\:margin-inline-start-2px {
      margin-inline-start: var(--zbk-spacing-2px);
    }
    .tablet\:margin-025 {
      margin-inline: var(--zbk-spacing-025);
    }
    .tablet\:margin-025,
    .tablet\:margin-block-025 {
      margin-block: var(--zbk-spacing-025);
    }
    .tablet\:margin-inline-025 {
      margin-inline: var(--zbk-spacing-025);
    }
    .tablet\:margin-block-start-025 {
      margin-block-start: var(--zbk-spacing-025);
    }
    .tablet\:margin-inline-end-025 {
      margin-inline-end: var(--zbk-spacing-025);
    }
    .tablet\:margin-block-end-025 {
      margin-block-end: var(--zbk-spacing-025);
    }
    .tablet\:margin-inline-start-025 {
      margin-inline-start: var(--zbk-spacing-025);
    }
    .tablet\:margin-05 {
      margin-inline: var(--zbk-spacing-05);
    }
    .tablet\:margin-05,
    .tablet\:margin-block-05 {
      margin-block: var(--zbk-spacing-05);
    }
    .tablet\:margin-inline-05 {
      margin-inline: var(--zbk-spacing-05);
    }
    .tablet\:margin-block-start-05 {
      margin-block-start: var(--zbk-spacing-05);
    }
    .tablet\:margin-inline-end-05 {
      margin-inline-end: var(--zbk-spacing-05);
    }
    .tablet\:margin-block-end-05 {
      margin-block-end: var(--zbk-spacing-05);
    }
    .tablet\:margin-inline-start-05 {
      margin-inline-start: var(--zbk-spacing-05);
    }
    .tablet\:margin-1 {
      margin-inline: var(--zbk-spacing-1);
    }
    .tablet\:margin-1,
    .tablet\:margin-block-1 {
      margin-block: var(--zbk-spacing-1);
    }
    .tablet\:margin-inline-1 {
      margin-inline: var(--zbk-spacing-1);
    }
    .tablet\:margin-block-start-1 {
      margin-block-start: var(--zbk-spacing-1);
    }
    .tablet\:margin-inline-end-1 {
      margin-inline-end: var(--zbk-spacing-1);
    }
    .tablet\:margin-block-end-1 {
      margin-block-end: var(--zbk-spacing-1);
    }
    .tablet\:margin-inline-start-1 {
      margin-inline-start: var(--zbk-spacing-1);
    }
    .tablet\:margin-105 {
      margin-inline: var(--zbk-spacing-105);
    }
    .tablet\:margin-105,
    .tablet\:margin-block-105 {
      margin-block: var(--zbk-spacing-105);
    }
    .tablet\:margin-inline-105 {
      margin-inline: var(--zbk-spacing-105);
    }
    .tablet\:margin-block-start-105 {
      margin-block-start: var(--zbk-spacing-105);
    }
    .tablet\:margin-inline-end-105 {
      margin-inline-end: var(--zbk-spacing-105);
    }
    .tablet\:margin-block-end-105 {
      margin-block-end: var(--zbk-spacing-105);
    }
    .tablet\:margin-inline-start-105 {
      margin-inline-start: var(--zbk-spacing-105);
    }
    .tablet\:margin-2 {
      margin-inline: var(--zbk-spacing-2);
    }
    .tablet\:margin-2,
    .tablet\:margin-block-2 {
      margin-block: var(--zbk-spacing-2);
    }
    .tablet\:margin-inline-2 {
      margin-inline: var(--zbk-spacing-2);
    }
    .tablet\:margin-block-start-2 {
      margin-block-start: var(--zbk-spacing-2);
    }
    .tablet\:margin-inline-end-2 {
      margin-inline-end: var(--zbk-spacing-2);
    }
    .tablet\:margin-block-end-2 {
      margin-block-end: var(--zbk-spacing-2);
    }
    .tablet\:margin-inline-start-2 {
      margin-inline-start: var(--zbk-spacing-2);
    }
    .tablet\:margin-205 {
      margin-inline: var(--zbk-spacing-205);
    }
    .tablet\:margin-205,
    .tablet\:margin-block-205 {
      margin-block: var(--zbk-spacing-205);
    }
    .tablet\:margin-inline-205 {
      margin-inline: var(--zbk-spacing-205);
    }
    .tablet\:margin-block-start-205 {
      margin-block-start: var(--zbk-spacing-205);
    }
    .tablet\:margin-inline-end-205 {
      margin-inline-end: var(--zbk-spacing-205);
    }
    .tablet\:margin-block-end-205 {
      margin-block-end: var(--zbk-spacing-205);
    }
    .tablet\:margin-inline-start-205 {
      margin-inline-start: var(--zbk-spacing-205);
    }
    .tablet\:margin-3 {
      margin-inline: var(--zbk-spacing-3);
    }
    .tablet\:margin-3,
    .tablet\:margin-block-3 {
      margin-block: var(--zbk-spacing-3);
    }
    .tablet\:margin-inline-3 {
      margin-inline: var(--zbk-spacing-3);
    }
    .tablet\:margin-block-start-3 {
      margin-block-start: var(--zbk-spacing-3);
    }
    .tablet\:margin-inline-end-3 {
      margin-inline-end: var(--zbk-spacing-3);
    }
    .tablet\:margin-block-end-3 {
      margin-block-end: var(--zbk-spacing-3);
    }
    .tablet\:margin-inline-start-3 {
      margin-inline-start: var(--zbk-spacing-3);
    }
    .tablet\:margin-4 {
      margin-inline: var(--zbk-spacing-4);
    }
    .tablet\:margin-4,
    .tablet\:margin-block-4 {
      margin-block: var(--zbk-spacing-4);
    }
    .tablet\:margin-inline-4 {
      margin-inline: var(--zbk-spacing-4);
    }
    .tablet\:margin-block-start-4 {
      margin-block-start: var(--zbk-spacing-4);
    }
    .tablet\:margin-inline-end-4 {
      margin-inline-end: var(--zbk-spacing-4);
    }
    .tablet\:margin-block-end-4 {
      margin-block-end: var(--zbk-spacing-4);
    }
    .tablet\:margin-inline-start-4 {
      margin-inline-start: var(--zbk-spacing-4);
    }
    .tablet\:margin-5 {
      margin-inline: var(--zbk-spacing-5);
    }
    .tablet\:margin-5,
    .tablet\:margin-block-5 {
      margin-block: var(--zbk-spacing-5);
    }
    .tablet\:margin-inline-5 {
      margin-inline: var(--zbk-spacing-5);
    }
    .tablet\:margin-block-start-5 {
      margin-block-start: var(--zbk-spacing-5);
    }
    .tablet\:margin-inline-end-5 {
      margin-inline-end: var(--zbk-spacing-5);
    }
    .tablet\:margin-block-end-5 {
      margin-block-end: var(--zbk-spacing-5);
    }
    .tablet\:margin-inline-start-5 {
      margin-inline-start: var(--zbk-spacing-5);
    }
    .tablet\:margin-6 {
      margin-inline: var(--zbk-spacing-6);
    }
    .tablet\:margin-6,
    .tablet\:margin-block-6 {
      margin-block: var(--zbk-spacing-6);
    }
    .tablet\:margin-inline-6 {
      margin-inline: var(--zbk-spacing-6);
    }
    .tablet\:margin-block-start-6 {
      margin-block-start: var(--zbk-spacing-6);
    }
    .tablet\:margin-inline-end-6 {
      margin-inline-end: var(--zbk-spacing-6);
    }
    .tablet\:margin-block-end-6 {
      margin-block-end: var(--zbk-spacing-6);
    }
    .tablet\:margin-inline-start-6 {
      margin-inline-start: var(--zbk-spacing-6);
    }
    .tablet\:margin-7 {
      margin-inline: var(--zbk-spacing-7);
    }
    .tablet\:margin-7,
    .tablet\:margin-block-7 {
      margin-block: var(--zbk-spacing-7);
    }
    .tablet\:margin-inline-7 {
      margin-inline: var(--zbk-spacing-7);
    }
    .tablet\:margin-block-start-7 {
      margin-block-start: var(--zbk-spacing-7);
    }
    .tablet\:margin-inline-end-7 {
      margin-inline-end: var(--zbk-spacing-7);
    }
    .tablet\:margin-block-end-7 {
      margin-block-end: var(--zbk-spacing-7);
    }
    .tablet\:margin-inline-start-7 {
      margin-inline-start: var(--zbk-spacing-7);
    }
    .tablet\:margin-8 {
      margin-inline: var(--zbk-spacing-8);
    }
    .tablet\:margin-8,
    .tablet\:margin-block-8 {
      margin-block: var(--zbk-spacing-8);
    }
    .tablet\:margin-inline-8 {
      margin-inline: var(--zbk-spacing-8);
    }
    .tablet\:margin-block-start-8 {
      margin-block-start: var(--zbk-spacing-8);
    }
    .tablet\:margin-inline-end-8 {
      margin-inline-end: var(--zbk-spacing-8);
    }
    .tablet\:margin-block-end-8 {
      margin-block-end: var(--zbk-spacing-8);
    }
    .tablet\:margin-inline-start-8 {
      margin-inline-start: var(--zbk-spacing-8);
    }
    .tablet\:margin-9 {
      margin-inline: var(--zbk-spacing-9);
    }
    .tablet\:margin-9,
    .tablet\:margin-block-9 {
      margin-block: var(--zbk-spacing-9);
    }
    .tablet\:margin-inline-9 {
      margin-inline: var(--zbk-spacing-9);
    }
    .tablet\:margin-block-start-9 {
      margin-block-start: var(--zbk-spacing-9);
    }
    .tablet\:margin-inline-end-9 {
      margin-inline-end: var(--zbk-spacing-9);
    }
    .tablet\:margin-block-end-9 {
      margin-block-end: var(--zbk-spacing-9);
    }
    .tablet\:margin-inline-start-9 {
      margin-inline-start: var(--zbk-spacing-9);
    }
    .tablet\:margin-10 {
      margin-inline: var(--zbk-spacing-10);
    }
    .tablet\:margin-10,
    .tablet\:margin-block-10 {
      margin-block: var(--zbk-spacing-10);
    }
    .tablet\:margin-inline-10 {
      margin-inline: var(--zbk-spacing-10);
    }
    .tablet\:margin-block-start-10 {
      margin-block-start: var(--zbk-spacing-10);
    }
    .tablet\:margin-inline-end-10 {
      margin-inline-end: var(--zbk-spacing-10);
    }
    .tablet\:margin-block-end-10 {
      margin-block-end: var(--zbk-spacing-10);
    }
    .tablet\:margin-inline-start-10 {
      margin-inline-start: var(--zbk-spacing-10);
    }
    .tablet\:margin-15 {
      margin-inline: var(--zbk-spacing-15);
    }
    .tablet\:margin-15,
    .tablet\:margin-block-15 {
      margin-block: var(--zbk-spacing-15);
    }
    .tablet\:margin-inline-15 {
      margin-inline: var(--zbk-spacing-15);
    }
    .tablet\:margin-block-start-15 {
      margin-block-start: var(--zbk-spacing-15);
    }
    .tablet\:margin-inline-end-15 {
      margin-inline-end: var(--zbk-spacing-15);
    }
    .tablet\:margin-block-end-15 {
      margin-block-end: var(--zbk-spacing-15);
    }
    .tablet\:margin-inline-start-15 {
      margin-inline-start: var(--zbk-spacing-15);
    }
    .tablet\:margin-20 {
      margin-inline: var(--zbk-spacing-20);
    }
    .tablet\:margin-20,
    .tablet\:margin-block-20 {
      margin-block: var(--zbk-spacing-20);
    }
    .tablet\:margin-inline-20 {
      margin-inline: var(--zbk-spacing-20);
    }
    .tablet\:margin-block-start-20 {
      margin-block-start: var(--zbk-spacing-20);
    }
    .tablet\:margin-inline-end-20 {
      margin-inline-end: var(--zbk-spacing-20);
    }
    .tablet\:margin-block-end-20 {
      margin-block-end: var(--zbk-spacing-20);
    }
    .tablet\:margin-inline-start-20 {
      margin-inline-start: var(--zbk-spacing-20);
    }
  }
  @media (min-width: 50rem) {
    .tablet-lg\:margin-neg-15 {
      margin-inline: var(--zbk-spacing-neg-15);
    }
    .tablet-lg\:margin-block-neg-15,
    .tablet-lg\:margin-neg-15 {
      margin-block: var(--zbk-spacing-neg-15);
    }
    .tablet-lg\:margin-inline-neg-15 {
      margin-inline: var(--zbk-spacing-neg-15);
    }
    .tablet-lg\:margin-block-start-neg-15 {
      margin-block-start: var(--zbk-spacing-neg-15);
    }
    .tablet-lg\:margin-inline-end-neg-15 {
      margin-inline-end: var(--zbk-spacing-neg-15);
    }
    .tablet-lg\:margin-block-end-neg-15 {
      margin-block-end: var(--zbk-spacing-neg-15);
    }
    .tablet-lg\:margin-inline-start-neg-15 {
      margin-inline-start: var(--zbk-spacing-neg-15);
    }
    .tablet-lg\:margin-neg-10 {
      margin-inline: var(--zbk-spacing-neg-10);
    }
    .tablet-lg\:margin-block-neg-10,
    .tablet-lg\:margin-neg-10 {
      margin-block: var(--zbk-spacing-neg-10);
    }
    .tablet-lg\:margin-inline-neg-10 {
      margin-inline: var(--zbk-spacing-neg-10);
    }
    .tablet-lg\:margin-block-start-neg-10 {
      margin-block-start: var(--zbk-spacing-neg-10);
    }
    .tablet-lg\:margin-inline-end-neg-10 {
      margin-inline-end: var(--zbk-spacing-neg-10);
    }
    .tablet-lg\:margin-block-end-neg-10 {
      margin-block-end: var(--zbk-spacing-neg-10);
    }
    .tablet-lg\:margin-inline-start-neg-10 {
      margin-inline-start: var(--zbk-spacing-neg-10);
    }
    .tablet-lg\:margin-neg-9 {
      margin-inline: var(--zbk-spacing-neg-9);
    }
    .tablet-lg\:margin-block-neg-9,
    .tablet-lg\:margin-neg-9 {
      margin-block: var(--zbk-spacing-neg-9);
    }
    .tablet-lg\:margin-inline-neg-9 {
      margin-inline: var(--zbk-spacing-neg-9);
    }
    .tablet-lg\:margin-block-start-neg-9 {
      margin-block-start: var(--zbk-spacing-neg-9);
    }
    .tablet-lg\:margin-inline-end-neg-9 {
      margin-inline-end: var(--zbk-spacing-neg-9);
    }
    .tablet-lg\:margin-block-end-neg-9 {
      margin-block-end: var(--zbk-spacing-neg-9);
    }
    .tablet-lg\:margin-inline-start-neg-9 {
      margin-inline-start: var(--zbk-spacing-neg-9);
    }
    .tablet-lg\:margin-neg-8 {
      margin-inline: var(--zbk-spacing-neg-8);
    }
    .tablet-lg\:margin-block-neg-8,
    .tablet-lg\:margin-neg-8 {
      margin-block: var(--zbk-spacing-neg-8);
    }
    .tablet-lg\:margin-inline-neg-8 {
      margin-inline: var(--zbk-spacing-neg-8);
    }
    .tablet-lg\:margin-block-start-neg-8 {
      margin-block-start: var(--zbk-spacing-neg-8);
    }
    .tablet-lg\:margin-inline-end-neg-8 {
      margin-inline-end: var(--zbk-spacing-neg-8);
    }
    .tablet-lg\:margin-block-end-neg-8 {
      margin-block-end: var(--zbk-spacing-neg-8);
    }
    .tablet-lg\:margin-inline-start-neg-8 {
      margin-inline-start: var(--zbk-spacing-neg-8);
    }
    .tablet-lg\:margin-neg-7 {
      margin-inline: var(--zbk-spacing-neg-7);
    }
    .tablet-lg\:margin-block-neg-7,
    .tablet-lg\:margin-neg-7 {
      margin-block: var(--zbk-spacing-neg-7);
    }
    .tablet-lg\:margin-inline-neg-7 {
      margin-inline: var(--zbk-spacing-neg-7);
    }
    .tablet-lg\:margin-block-start-neg-7 {
      margin-block-start: var(--zbk-spacing-neg-7);
    }
    .tablet-lg\:margin-inline-end-neg-7 {
      margin-inline-end: var(--zbk-spacing-neg-7);
    }
    .tablet-lg\:margin-block-end-neg-7 {
      margin-block-end: var(--zbk-spacing-neg-7);
    }
    .tablet-lg\:margin-inline-start-neg-7 {
      margin-inline-start: var(--zbk-spacing-neg-7);
    }
    .tablet-lg\:margin-neg-6 {
      margin-inline: var(--zbk-spacing-neg-6);
    }
    .tablet-lg\:margin-block-neg-6,
    .tablet-lg\:margin-neg-6 {
      margin-block: var(--zbk-spacing-neg-6);
    }
    .tablet-lg\:margin-inline-neg-6 {
      margin-inline: var(--zbk-spacing-neg-6);
    }
    .tablet-lg\:margin-block-start-neg-6 {
      margin-block-start: var(--zbk-spacing-neg-6);
    }
    .tablet-lg\:margin-inline-end-neg-6 {
      margin-inline-end: var(--zbk-spacing-neg-6);
    }
    .tablet-lg\:margin-block-end-neg-6 {
      margin-block-end: var(--zbk-spacing-neg-6);
    }
    .tablet-lg\:margin-inline-start-neg-6 {
      margin-inline-start: var(--zbk-spacing-neg-6);
    }
    .tablet-lg\:margin-neg-5 {
      margin-inline: var(--zbk-spacing-neg-5);
    }
    .tablet-lg\:margin-block-neg-5,
    .tablet-lg\:margin-neg-5 {
      margin-block: var(--zbk-spacing-neg-5);
    }
    .tablet-lg\:margin-inline-neg-5 {
      margin-inline: var(--zbk-spacing-neg-5);
    }
    .tablet-lg\:margin-block-start-neg-5 {
      margin-block-start: var(--zbk-spacing-neg-5);
    }
    .tablet-lg\:margin-inline-end-neg-5 {
      margin-inline-end: var(--zbk-spacing-neg-5);
    }
    .tablet-lg\:margin-block-end-neg-5 {
      margin-block-end: var(--zbk-spacing-neg-5);
    }
    .tablet-lg\:margin-inline-start-neg-5 {
      margin-inline-start: var(--zbk-spacing-neg-5);
    }
    .tablet-lg\:margin-neg-4 {
      margin-inline: var(--zbk-spacing-neg-4);
    }
    .tablet-lg\:margin-block-neg-4,
    .tablet-lg\:margin-neg-4 {
      margin-block: var(--zbk-spacing-neg-4);
    }
    .tablet-lg\:margin-inline-neg-4 {
      margin-inline: var(--zbk-spacing-neg-4);
    }
    .tablet-lg\:margin-block-start-neg-4 {
      margin-block-start: var(--zbk-spacing-neg-4);
    }
    .tablet-lg\:margin-inline-end-neg-4 {
      margin-inline-end: var(--zbk-spacing-neg-4);
    }
    .tablet-lg\:margin-block-end-neg-4 {
      margin-block-end: var(--zbk-spacing-neg-4);
    }
    .tablet-lg\:margin-inline-start-neg-4 {
      margin-inline-start: var(--zbk-spacing-neg-4);
    }
    .tablet-lg\:margin-neg-3 {
      margin-inline: var(--zbk-spacing-neg-3);
    }
    .tablet-lg\:margin-block-neg-3,
    .tablet-lg\:margin-neg-3 {
      margin-block: var(--zbk-spacing-neg-3);
    }
    .tablet-lg\:margin-inline-neg-3 {
      margin-inline: var(--zbk-spacing-neg-3);
    }
    .tablet-lg\:margin-block-start-neg-3 {
      margin-block-start: var(--zbk-spacing-neg-3);
    }
    .tablet-lg\:margin-inline-end-neg-3 {
      margin-inline-end: var(--zbk-spacing-neg-3);
    }
    .tablet-lg\:margin-block-end-neg-3 {
      margin-block-end: var(--zbk-spacing-neg-3);
    }
    .tablet-lg\:margin-inline-start-neg-3 {
      margin-inline-start: var(--zbk-spacing-neg-3);
    }
    .tablet-lg\:margin-neg-205 {
      margin-inline: var(--zbk-spacing-neg-205);
    }
    .tablet-lg\:margin-block-neg-205,
    .tablet-lg\:margin-neg-205 {
      margin-block: var(--zbk-spacing-neg-205);
    }
    .tablet-lg\:margin-inline-neg-205 {
      margin-inline: var(--zbk-spacing-neg-205);
    }
    .tablet-lg\:margin-block-start-neg-205 {
      margin-block-start: var(--zbk-spacing-neg-205);
    }
    .tablet-lg\:margin-inline-end-neg-205 {
      margin-inline-end: var(--zbk-spacing-neg-205);
    }
    .tablet-lg\:margin-block-end-neg-205 {
      margin-block-end: var(--zbk-spacing-neg-205);
    }
    .tablet-lg\:margin-inline-start-neg-205 {
      margin-inline-start: var(--zbk-spacing-neg-205);
    }
    .tablet-lg\:margin-neg-2 {
      margin-inline: var(--zbk-spacing-neg-2);
    }
    .tablet-lg\:margin-block-neg-2,
    .tablet-lg\:margin-neg-2 {
      margin-block: var(--zbk-spacing-neg-2);
    }
    .tablet-lg\:margin-inline-neg-2 {
      margin-inline: var(--zbk-spacing-neg-2);
    }
    .tablet-lg\:margin-block-start-neg-2 {
      margin-block-start: var(--zbk-spacing-neg-2);
    }
    .tablet-lg\:margin-inline-end-neg-2 {
      margin-inline-end: var(--zbk-spacing-neg-2);
    }
    .tablet-lg\:margin-block-end-neg-2 {
      margin-block-end: var(--zbk-spacing-neg-2);
    }
    .tablet-lg\:margin-inline-start-neg-2 {
      margin-inline-start: var(--zbk-spacing-neg-2);
    }
    .tablet-lg\:margin-neg-105 {
      margin-inline: var(--zbk-spacing-neg-105);
    }
    .tablet-lg\:margin-block-neg-105,
    .tablet-lg\:margin-neg-105 {
      margin-block: var(--zbk-spacing-neg-105);
    }
    .tablet-lg\:margin-inline-neg-105 {
      margin-inline: var(--zbk-spacing-neg-105);
    }
    .tablet-lg\:margin-block-start-neg-105 {
      margin-block-start: var(--zbk-spacing-neg-105);
    }
    .tablet-lg\:margin-inline-end-neg-105 {
      margin-inline-end: var(--zbk-spacing-neg-105);
    }
    .tablet-lg\:margin-block-end-neg-105 {
      margin-block-end: var(--zbk-spacing-neg-105);
    }
    .tablet-lg\:margin-inline-start-neg-105 {
      margin-inline-start: var(--zbk-spacing-neg-105);
    }
    .tablet-lg\:margin-neg-1 {
      margin-inline: var(--zbk-spacing-neg-1);
    }
    .tablet-lg\:margin-block-neg-1,
    .tablet-lg\:margin-neg-1 {
      margin-block: var(--zbk-spacing-neg-1);
    }
    .tablet-lg\:margin-inline-neg-1 {
      margin-inline: var(--zbk-spacing-neg-1);
    }
    .tablet-lg\:margin-block-start-neg-1 {
      margin-block-start: var(--zbk-spacing-neg-1);
    }
    .tablet-lg\:margin-inline-end-neg-1 {
      margin-inline-end: var(--zbk-spacing-neg-1);
    }
    .tablet-lg\:margin-block-end-neg-1 {
      margin-block-end: var(--zbk-spacing-neg-1);
    }
    .tablet-lg\:margin-inline-start-neg-1 {
      margin-inline-start: var(--zbk-spacing-neg-1);
    }
    .tablet-lg\:margin-neg-05 {
      margin-inline: var(--zbk-spacing-neg-05);
    }
    .tablet-lg\:margin-block-neg-05,
    .tablet-lg\:margin-neg-05 {
      margin-block: var(--zbk-spacing-neg-05);
    }
    .tablet-lg\:margin-inline-neg-05 {
      margin-inline: var(--zbk-spacing-neg-05);
    }
    .tablet-lg\:margin-block-start-neg-05 {
      margin-block-start: var(--zbk-spacing-neg-05);
    }
    .tablet-lg\:margin-inline-end-neg-05 {
      margin-inline-end: var(--zbk-spacing-neg-05);
    }
    .tablet-lg\:margin-block-end-neg-05 {
      margin-block-end: var(--zbk-spacing-neg-05);
    }
    .tablet-lg\:margin-inline-start-neg-05 {
      margin-inline-start: var(--zbk-spacing-neg-05);
    }
    .tablet-lg\:margin-neg-025 {
      margin-inline: var(--zbk-spacing-neg-025);
    }
    .tablet-lg\:margin-block-neg-025,
    .tablet-lg\:margin-neg-025 {
      margin-block: var(--zbk-spacing-neg-025);
    }
    .tablet-lg\:margin-inline-neg-025 {
      margin-inline: var(--zbk-spacing-neg-025);
    }
    .tablet-lg\:margin-block-start-neg-025 {
      margin-block-start: var(--zbk-spacing-neg-025);
    }
    .tablet-lg\:margin-inline-end-neg-025 {
      margin-inline-end: var(--zbk-spacing-neg-025);
    }
    .tablet-lg\:margin-block-end-neg-025 {
      margin-block-end: var(--zbk-spacing-neg-025);
    }
    .tablet-lg\:margin-inline-start-neg-025 {
      margin-inline-start: var(--zbk-spacing-neg-025);
    }
    .tablet-lg\:margin-neg-2px {
      margin-inline: var(--zbk-spacing-neg-2px);
    }
    .tablet-lg\:margin-block-neg-2px,
    .tablet-lg\:margin-neg-2px {
      margin-block: var(--zbk-spacing-neg-2px);
    }
    .tablet-lg\:margin-inline-neg-2px {
      margin-inline: var(--zbk-spacing-neg-2px);
    }
    .tablet-lg\:margin-block-start-neg-2px {
      margin-block-start: var(--zbk-spacing-neg-2px);
    }
    .tablet-lg\:margin-inline-end-neg-2px {
      margin-inline-end: var(--zbk-spacing-neg-2px);
    }
    .tablet-lg\:margin-block-end-neg-2px {
      margin-block-end: var(--zbk-spacing-neg-2px);
    }
    .tablet-lg\:margin-inline-start-neg-2px {
      margin-inline-start: var(--zbk-spacing-neg-2px);
    }
    .tablet-lg\:margin-neg-1px {
      margin-inline: var(--zbk-spacing-neg-1px);
    }
    .tablet-lg\:margin-block-neg-1px,
    .tablet-lg\:margin-neg-1px {
      margin-block: var(--zbk-spacing-neg-1px);
    }
    .tablet-lg\:margin-inline-neg-1px {
      margin-inline: var(--zbk-spacing-neg-1px);
    }
    .tablet-lg\:margin-block-start-neg-1px {
      margin-block-start: var(--zbk-spacing-neg-1px);
    }
    .tablet-lg\:margin-inline-end-neg-1px {
      margin-inline-end: var(--zbk-spacing-neg-1px);
    }
    .tablet-lg\:margin-block-end-neg-1px {
      margin-block-end: var(--zbk-spacing-neg-1px);
    }
    .tablet-lg\:margin-inline-start-neg-1px {
      margin-inline-start: var(--zbk-spacing-neg-1px);
    }
    .tablet-lg\:margin-0 {
      margin-inline: var(--zbk-spacing-0);
    }
    .tablet-lg\:margin-0,
    .tablet-lg\:margin-block-0 {
      margin-block: var(--zbk-spacing-0);
    }
    .tablet-lg\:margin-inline-0 {
      margin-inline: var(--zbk-spacing-0);
    }
    .tablet-lg\:margin-block-start-0 {
      margin-block-start: var(--zbk-spacing-0);
    }
    .tablet-lg\:margin-inline-end-0 {
      margin-inline-end: var(--zbk-spacing-0);
    }
    .tablet-lg\:margin-block-end-0 {
      margin-block-end: var(--zbk-spacing-0);
    }
    .tablet-lg\:margin-inline-start-0 {
      margin-inline-start: var(--zbk-spacing-0);
    }
    .tablet-lg\:margin-1px {
      margin-inline: var(--zbk-spacing-1px);
    }
    .tablet-lg\:margin-1px,
    .tablet-lg\:margin-block-1px {
      margin-block: var(--zbk-spacing-1px);
    }
    .tablet-lg\:margin-inline-1px {
      margin-inline: var(--zbk-spacing-1px);
    }
    .tablet-lg\:margin-block-start-1px {
      margin-block-start: var(--zbk-spacing-1px);
    }
    .tablet-lg\:margin-inline-end-1px {
      margin-inline-end: var(--zbk-spacing-1px);
    }
    .tablet-lg\:margin-block-end-1px {
      margin-block-end: var(--zbk-spacing-1px);
    }
    .tablet-lg\:margin-inline-start-1px {
      margin-inline-start: var(--zbk-spacing-1px);
    }
    .tablet-lg\:margin-2px {
      margin-inline: var(--zbk-spacing-2px);
    }
    .tablet-lg\:margin-2px,
    .tablet-lg\:margin-block-2px {
      margin-block: var(--zbk-spacing-2px);
    }
    .tablet-lg\:margin-inline-2px {
      margin-inline: var(--zbk-spacing-2px);
    }
    .tablet-lg\:margin-block-start-2px {
      margin-block-start: var(--zbk-spacing-2px);
    }
    .tablet-lg\:margin-inline-end-2px {
      margin-inline-end: var(--zbk-spacing-2px);
    }
    .tablet-lg\:margin-block-end-2px {
      margin-block-end: var(--zbk-spacing-2px);
    }
    .tablet-lg\:margin-inline-start-2px {
      margin-inline-start: var(--zbk-spacing-2px);
    }
    .tablet-lg\:margin-025 {
      margin-inline: var(--zbk-spacing-025);
    }
    .tablet-lg\:margin-025,
    .tablet-lg\:margin-block-025 {
      margin-block: var(--zbk-spacing-025);
    }
    .tablet-lg\:margin-inline-025 {
      margin-inline: var(--zbk-spacing-025);
    }
    .tablet-lg\:margin-block-start-025 {
      margin-block-start: var(--zbk-spacing-025);
    }
    .tablet-lg\:margin-inline-end-025 {
      margin-inline-end: var(--zbk-spacing-025);
    }
    .tablet-lg\:margin-block-end-025 {
      margin-block-end: var(--zbk-spacing-025);
    }
    .tablet-lg\:margin-inline-start-025 {
      margin-inline-start: var(--zbk-spacing-025);
    }
    .tablet-lg\:margin-05 {
      margin-inline: var(--zbk-spacing-05);
    }
    .tablet-lg\:margin-05,
    .tablet-lg\:margin-block-05 {
      margin-block: var(--zbk-spacing-05);
    }
    .tablet-lg\:margin-inline-05 {
      margin-inline: var(--zbk-spacing-05);
    }
    .tablet-lg\:margin-block-start-05 {
      margin-block-start: var(--zbk-spacing-05);
    }
    .tablet-lg\:margin-inline-end-05 {
      margin-inline-end: var(--zbk-spacing-05);
    }
    .tablet-lg\:margin-block-end-05 {
      margin-block-end: var(--zbk-spacing-05);
    }
    .tablet-lg\:margin-inline-start-05 {
      margin-inline-start: var(--zbk-spacing-05);
    }
    .tablet-lg\:margin-1 {
      margin-inline: var(--zbk-spacing-1);
    }
    .tablet-lg\:margin-1,
    .tablet-lg\:margin-block-1 {
      margin-block: var(--zbk-spacing-1);
    }
    .tablet-lg\:margin-inline-1 {
      margin-inline: var(--zbk-spacing-1);
    }
    .tablet-lg\:margin-block-start-1 {
      margin-block-start: var(--zbk-spacing-1);
    }
    .tablet-lg\:margin-inline-end-1 {
      margin-inline-end: var(--zbk-spacing-1);
    }
    .tablet-lg\:margin-block-end-1 {
      margin-block-end: var(--zbk-spacing-1);
    }
    .tablet-lg\:margin-inline-start-1 {
      margin-inline-start: var(--zbk-spacing-1);
    }
    .tablet-lg\:margin-105 {
      margin-inline: var(--zbk-spacing-105);
    }
    .tablet-lg\:margin-105,
    .tablet-lg\:margin-block-105 {
      margin-block: var(--zbk-spacing-105);
    }
    .tablet-lg\:margin-inline-105 {
      margin-inline: var(--zbk-spacing-105);
    }
    .tablet-lg\:margin-block-start-105 {
      margin-block-start: var(--zbk-spacing-105);
    }
    .tablet-lg\:margin-inline-end-105 {
      margin-inline-end: var(--zbk-spacing-105);
    }
    .tablet-lg\:margin-block-end-105 {
      margin-block-end: var(--zbk-spacing-105);
    }
    .tablet-lg\:margin-inline-start-105 {
      margin-inline-start: var(--zbk-spacing-105);
    }
    .tablet-lg\:margin-2 {
      margin-inline: var(--zbk-spacing-2);
    }
    .tablet-lg\:margin-2,
    .tablet-lg\:margin-block-2 {
      margin-block: var(--zbk-spacing-2);
    }
    .tablet-lg\:margin-inline-2 {
      margin-inline: var(--zbk-spacing-2);
    }
    .tablet-lg\:margin-block-start-2 {
      margin-block-start: var(--zbk-spacing-2);
    }
    .tablet-lg\:margin-inline-end-2 {
      margin-inline-end: var(--zbk-spacing-2);
    }
    .tablet-lg\:margin-block-end-2 {
      margin-block-end: var(--zbk-spacing-2);
    }
    .tablet-lg\:margin-inline-start-2 {
      margin-inline-start: var(--zbk-spacing-2);
    }
    .tablet-lg\:margin-205 {
      margin-inline: var(--zbk-spacing-205);
    }
    .tablet-lg\:margin-205,
    .tablet-lg\:margin-block-205 {
      margin-block: var(--zbk-spacing-205);
    }
    .tablet-lg\:margin-inline-205 {
      margin-inline: var(--zbk-spacing-205);
    }
    .tablet-lg\:margin-block-start-205 {
      margin-block-start: var(--zbk-spacing-205);
    }
    .tablet-lg\:margin-inline-end-205 {
      margin-inline-end: var(--zbk-spacing-205);
    }
    .tablet-lg\:margin-block-end-205 {
      margin-block-end: var(--zbk-spacing-205);
    }
    .tablet-lg\:margin-inline-start-205 {
      margin-inline-start: var(--zbk-spacing-205);
    }
    .tablet-lg\:margin-3 {
      margin-inline: var(--zbk-spacing-3);
    }
    .tablet-lg\:margin-3,
    .tablet-lg\:margin-block-3 {
      margin-block: var(--zbk-spacing-3);
    }
    .tablet-lg\:margin-inline-3 {
      margin-inline: var(--zbk-spacing-3);
    }
    .tablet-lg\:margin-block-start-3 {
      margin-block-start: var(--zbk-spacing-3);
    }
    .tablet-lg\:margin-inline-end-3 {
      margin-inline-end: var(--zbk-spacing-3);
    }
    .tablet-lg\:margin-block-end-3 {
      margin-block-end: var(--zbk-spacing-3);
    }
    .tablet-lg\:margin-inline-start-3 {
      margin-inline-start: var(--zbk-spacing-3);
    }
    .tablet-lg\:margin-4 {
      margin-inline: var(--zbk-spacing-4);
    }
    .tablet-lg\:margin-4,
    .tablet-lg\:margin-block-4 {
      margin-block: var(--zbk-spacing-4);
    }
    .tablet-lg\:margin-inline-4 {
      margin-inline: var(--zbk-spacing-4);
    }
    .tablet-lg\:margin-block-start-4 {
      margin-block-start: var(--zbk-spacing-4);
    }
    .tablet-lg\:margin-inline-end-4 {
      margin-inline-end: var(--zbk-spacing-4);
    }
    .tablet-lg\:margin-block-end-4 {
      margin-block-end: var(--zbk-spacing-4);
    }
    .tablet-lg\:margin-inline-start-4 {
      margin-inline-start: var(--zbk-spacing-4);
    }
    .tablet-lg\:margin-5 {
      margin-inline: var(--zbk-spacing-5);
    }
    .tablet-lg\:margin-5,
    .tablet-lg\:margin-block-5 {
      margin-block: var(--zbk-spacing-5);
    }
    .tablet-lg\:margin-inline-5 {
      margin-inline: var(--zbk-spacing-5);
    }
    .tablet-lg\:margin-block-start-5 {
      margin-block-start: var(--zbk-spacing-5);
    }
    .tablet-lg\:margin-inline-end-5 {
      margin-inline-end: var(--zbk-spacing-5);
    }
    .tablet-lg\:margin-block-end-5 {
      margin-block-end: var(--zbk-spacing-5);
    }
    .tablet-lg\:margin-inline-start-5 {
      margin-inline-start: var(--zbk-spacing-5);
    }
    .tablet-lg\:margin-6 {
      margin-inline: var(--zbk-spacing-6);
    }
    .tablet-lg\:margin-6,
    .tablet-lg\:margin-block-6 {
      margin-block: var(--zbk-spacing-6);
    }
    .tablet-lg\:margin-inline-6 {
      margin-inline: var(--zbk-spacing-6);
    }
    .tablet-lg\:margin-block-start-6 {
      margin-block-start: var(--zbk-spacing-6);
    }
    .tablet-lg\:margin-inline-end-6 {
      margin-inline-end: var(--zbk-spacing-6);
    }
    .tablet-lg\:margin-block-end-6 {
      margin-block-end: var(--zbk-spacing-6);
    }
    .tablet-lg\:margin-inline-start-6 {
      margin-inline-start: var(--zbk-spacing-6);
    }
    .tablet-lg\:margin-7 {
      margin-inline: var(--zbk-spacing-7);
    }
    .tablet-lg\:margin-7,
    .tablet-lg\:margin-block-7 {
      margin-block: var(--zbk-spacing-7);
    }
    .tablet-lg\:margin-inline-7 {
      margin-inline: var(--zbk-spacing-7);
    }
    .tablet-lg\:margin-block-start-7 {
      margin-block-start: var(--zbk-spacing-7);
    }
    .tablet-lg\:margin-inline-end-7 {
      margin-inline-end: var(--zbk-spacing-7);
    }
    .tablet-lg\:margin-block-end-7 {
      margin-block-end: var(--zbk-spacing-7);
    }
    .tablet-lg\:margin-inline-start-7 {
      margin-inline-start: var(--zbk-spacing-7);
    }
    .tablet-lg\:margin-8 {
      margin-inline: var(--zbk-spacing-8);
    }
    .tablet-lg\:margin-8,
    .tablet-lg\:margin-block-8 {
      margin-block: var(--zbk-spacing-8);
    }
    .tablet-lg\:margin-inline-8 {
      margin-inline: var(--zbk-spacing-8);
    }
    .tablet-lg\:margin-block-start-8 {
      margin-block-start: var(--zbk-spacing-8);
    }
    .tablet-lg\:margin-inline-end-8 {
      margin-inline-end: var(--zbk-spacing-8);
    }
    .tablet-lg\:margin-block-end-8 {
      margin-block-end: var(--zbk-spacing-8);
    }
    .tablet-lg\:margin-inline-start-8 {
      margin-inline-start: var(--zbk-spacing-8);
    }
    .tablet-lg\:margin-9 {
      margin-inline: var(--zbk-spacing-9);
    }
    .tablet-lg\:margin-9,
    .tablet-lg\:margin-block-9 {
      margin-block: var(--zbk-spacing-9);
    }
    .tablet-lg\:margin-inline-9 {
      margin-inline: var(--zbk-spacing-9);
    }
    .tablet-lg\:margin-block-start-9 {
      margin-block-start: var(--zbk-spacing-9);
    }
    .tablet-lg\:margin-inline-end-9 {
      margin-inline-end: var(--zbk-spacing-9);
    }
    .tablet-lg\:margin-block-end-9 {
      margin-block-end: var(--zbk-spacing-9);
    }
    .tablet-lg\:margin-inline-start-9 {
      margin-inline-start: var(--zbk-spacing-9);
    }
    .tablet-lg\:margin-10 {
      margin-inline: var(--zbk-spacing-10);
    }
    .tablet-lg\:margin-10,
    .tablet-lg\:margin-block-10 {
      margin-block: var(--zbk-spacing-10);
    }
    .tablet-lg\:margin-inline-10 {
      margin-inline: var(--zbk-spacing-10);
    }
    .tablet-lg\:margin-block-start-10 {
      margin-block-start: var(--zbk-spacing-10);
    }
    .tablet-lg\:margin-inline-end-10 {
      margin-inline-end: var(--zbk-spacing-10);
    }
    .tablet-lg\:margin-block-end-10 {
      margin-block-end: var(--zbk-spacing-10);
    }
    .tablet-lg\:margin-inline-start-10 {
      margin-inline-start: var(--zbk-spacing-10);
    }
    .tablet-lg\:margin-15 {
      margin-inline: var(--zbk-spacing-15);
    }
    .tablet-lg\:margin-15,
    .tablet-lg\:margin-block-15 {
      margin-block: var(--zbk-spacing-15);
    }
    .tablet-lg\:margin-inline-15 {
      margin-inline: var(--zbk-spacing-15);
    }
    .tablet-lg\:margin-block-start-15 {
      margin-block-start: var(--zbk-spacing-15);
    }
    .tablet-lg\:margin-inline-end-15 {
      margin-inline-end: var(--zbk-spacing-15);
    }
    .tablet-lg\:margin-block-end-15 {
      margin-block-end: var(--zbk-spacing-15);
    }
    .tablet-lg\:margin-inline-start-15 {
      margin-inline-start: var(--zbk-spacing-15);
    }
    .tablet-lg\:margin-20 {
      margin-inline: var(--zbk-spacing-20);
    }
    .tablet-lg\:margin-20,
    .tablet-lg\:margin-block-20 {
      margin-block: var(--zbk-spacing-20);
    }
    .tablet-lg\:margin-inline-20 {
      margin-inline: var(--zbk-spacing-20);
    }
    .tablet-lg\:margin-block-start-20 {
      margin-block-start: var(--zbk-spacing-20);
    }
    .tablet-lg\:margin-inline-end-20 {
      margin-inline-end: var(--zbk-spacing-20);
    }
    .tablet-lg\:margin-block-end-20 {
      margin-block-end: var(--zbk-spacing-20);
    }
    .tablet-lg\:margin-inline-start-20 {
      margin-inline-start: var(--zbk-spacing-20);
    }
  }
  @media (min-width: 70rem) {
    .desktop\:margin-neg-15 {
      margin-inline: var(--zbk-spacing-neg-15);
    }
    .desktop\:margin-block-neg-15,
    .desktop\:margin-neg-15 {
      margin-block: var(--zbk-spacing-neg-15);
    }
    .desktop\:margin-inline-neg-15 {
      margin-inline: var(--zbk-spacing-neg-15);
    }
    .desktop\:margin-block-start-neg-15 {
      margin-block-start: var(--zbk-spacing-neg-15);
    }
    .desktop\:margin-inline-end-neg-15 {
      margin-inline-end: var(--zbk-spacing-neg-15);
    }
    .desktop\:margin-block-end-neg-15 {
      margin-block-end: var(--zbk-spacing-neg-15);
    }
    .desktop\:margin-inline-start-neg-15 {
      margin-inline-start: var(--zbk-spacing-neg-15);
    }
    .desktop\:margin-neg-10 {
      margin-inline: var(--zbk-spacing-neg-10);
    }
    .desktop\:margin-block-neg-10,
    .desktop\:margin-neg-10 {
      margin-block: var(--zbk-spacing-neg-10);
    }
    .desktop\:margin-inline-neg-10 {
      margin-inline: var(--zbk-spacing-neg-10);
    }
    .desktop\:margin-block-start-neg-10 {
      margin-block-start: var(--zbk-spacing-neg-10);
    }
    .desktop\:margin-inline-end-neg-10 {
      margin-inline-end: var(--zbk-spacing-neg-10);
    }
    .desktop\:margin-block-end-neg-10 {
      margin-block-end: var(--zbk-spacing-neg-10);
    }
    .desktop\:margin-inline-start-neg-10 {
      margin-inline-start: var(--zbk-spacing-neg-10);
    }
    .desktop\:margin-neg-9 {
      margin-inline: var(--zbk-spacing-neg-9);
    }
    .desktop\:margin-block-neg-9,
    .desktop\:margin-neg-9 {
      margin-block: var(--zbk-spacing-neg-9);
    }
    .desktop\:margin-inline-neg-9 {
      margin-inline: var(--zbk-spacing-neg-9);
    }
    .desktop\:margin-block-start-neg-9 {
      margin-block-start: var(--zbk-spacing-neg-9);
    }
    .desktop\:margin-inline-end-neg-9 {
      margin-inline-end: var(--zbk-spacing-neg-9);
    }
    .desktop\:margin-block-end-neg-9 {
      margin-block-end: var(--zbk-spacing-neg-9);
    }
    .desktop\:margin-inline-start-neg-9 {
      margin-inline-start: var(--zbk-spacing-neg-9);
    }
    .desktop\:margin-neg-8 {
      margin-inline: var(--zbk-spacing-neg-8);
    }
    .desktop\:margin-block-neg-8,
    .desktop\:margin-neg-8 {
      margin-block: var(--zbk-spacing-neg-8);
    }
    .desktop\:margin-inline-neg-8 {
      margin-inline: var(--zbk-spacing-neg-8);
    }
    .desktop\:margin-block-start-neg-8 {
      margin-block-start: var(--zbk-spacing-neg-8);
    }
    .desktop\:margin-inline-end-neg-8 {
      margin-inline-end: var(--zbk-spacing-neg-8);
    }
    .desktop\:margin-block-end-neg-8 {
      margin-block-end: var(--zbk-spacing-neg-8);
    }
    .desktop\:margin-inline-start-neg-8 {
      margin-inline-start: var(--zbk-spacing-neg-8);
    }
    .desktop\:margin-neg-7 {
      margin-inline: var(--zbk-spacing-neg-7);
    }
    .desktop\:margin-block-neg-7,
    .desktop\:margin-neg-7 {
      margin-block: var(--zbk-spacing-neg-7);
    }
    .desktop\:margin-inline-neg-7 {
      margin-inline: var(--zbk-spacing-neg-7);
    }
    .desktop\:margin-block-start-neg-7 {
      margin-block-start: var(--zbk-spacing-neg-7);
    }
    .desktop\:margin-inline-end-neg-7 {
      margin-inline-end: var(--zbk-spacing-neg-7);
    }
    .desktop\:margin-block-end-neg-7 {
      margin-block-end: var(--zbk-spacing-neg-7);
    }
    .desktop\:margin-inline-start-neg-7 {
      margin-inline-start: var(--zbk-spacing-neg-7);
    }
    .desktop\:margin-neg-6 {
      margin-inline: var(--zbk-spacing-neg-6);
    }
    .desktop\:margin-block-neg-6,
    .desktop\:margin-neg-6 {
      margin-block: var(--zbk-spacing-neg-6);
    }
    .desktop\:margin-inline-neg-6 {
      margin-inline: var(--zbk-spacing-neg-6);
    }
    .desktop\:margin-block-start-neg-6 {
      margin-block-start: var(--zbk-spacing-neg-6);
    }
    .desktop\:margin-inline-end-neg-6 {
      margin-inline-end: var(--zbk-spacing-neg-6);
    }
    .desktop\:margin-block-end-neg-6 {
      margin-block-end: var(--zbk-spacing-neg-6);
    }
    .desktop\:margin-inline-start-neg-6 {
      margin-inline-start: var(--zbk-spacing-neg-6);
    }
    .desktop\:margin-neg-5 {
      margin-inline: var(--zbk-spacing-neg-5);
    }
    .desktop\:margin-block-neg-5,
    .desktop\:margin-neg-5 {
      margin-block: var(--zbk-spacing-neg-5);
    }
    .desktop\:margin-inline-neg-5 {
      margin-inline: var(--zbk-spacing-neg-5);
    }
    .desktop\:margin-block-start-neg-5 {
      margin-block-start: var(--zbk-spacing-neg-5);
    }
    .desktop\:margin-inline-end-neg-5 {
      margin-inline-end: var(--zbk-spacing-neg-5);
    }
    .desktop\:margin-block-end-neg-5 {
      margin-block-end: var(--zbk-spacing-neg-5);
    }
    .desktop\:margin-inline-start-neg-5 {
      margin-inline-start: var(--zbk-spacing-neg-5);
    }
    .desktop\:margin-neg-4 {
      margin-inline: var(--zbk-spacing-neg-4);
    }
    .desktop\:margin-block-neg-4,
    .desktop\:margin-neg-4 {
      margin-block: var(--zbk-spacing-neg-4);
    }
    .desktop\:margin-inline-neg-4 {
      margin-inline: var(--zbk-spacing-neg-4);
    }
    .desktop\:margin-block-start-neg-4 {
      margin-block-start: var(--zbk-spacing-neg-4);
    }
    .desktop\:margin-inline-end-neg-4 {
      margin-inline-end: var(--zbk-spacing-neg-4);
    }
    .desktop\:margin-block-end-neg-4 {
      margin-block-end: var(--zbk-spacing-neg-4);
    }
    .desktop\:margin-inline-start-neg-4 {
      margin-inline-start: var(--zbk-spacing-neg-4);
    }
    .desktop\:margin-neg-3 {
      margin-inline: var(--zbk-spacing-neg-3);
    }
    .desktop\:margin-block-neg-3,
    .desktop\:margin-neg-3 {
      margin-block: var(--zbk-spacing-neg-3);
    }
    .desktop\:margin-inline-neg-3 {
      margin-inline: var(--zbk-spacing-neg-3);
    }
    .desktop\:margin-block-start-neg-3 {
      margin-block-start: var(--zbk-spacing-neg-3);
    }
    .desktop\:margin-inline-end-neg-3 {
      margin-inline-end: var(--zbk-spacing-neg-3);
    }
    .desktop\:margin-block-end-neg-3 {
      margin-block-end: var(--zbk-spacing-neg-3);
    }
    .desktop\:margin-inline-start-neg-3 {
      margin-inline-start: var(--zbk-spacing-neg-3);
    }
    .desktop\:margin-neg-205 {
      margin-inline: var(--zbk-spacing-neg-205);
    }
    .desktop\:margin-block-neg-205,
    .desktop\:margin-neg-205 {
      margin-block: var(--zbk-spacing-neg-205);
    }
    .desktop\:margin-inline-neg-205 {
      margin-inline: var(--zbk-spacing-neg-205);
    }
    .desktop\:margin-block-start-neg-205 {
      margin-block-start: var(--zbk-spacing-neg-205);
    }
    .desktop\:margin-inline-end-neg-205 {
      margin-inline-end: var(--zbk-spacing-neg-205);
    }
    .desktop\:margin-block-end-neg-205 {
      margin-block-end: var(--zbk-spacing-neg-205);
    }
    .desktop\:margin-inline-start-neg-205 {
      margin-inline-start: var(--zbk-spacing-neg-205);
    }
    .desktop\:margin-neg-2 {
      margin-inline: var(--zbk-spacing-neg-2);
    }
    .desktop\:margin-block-neg-2,
    .desktop\:margin-neg-2 {
      margin-block: var(--zbk-spacing-neg-2);
    }
    .desktop\:margin-inline-neg-2 {
      margin-inline: var(--zbk-spacing-neg-2);
    }
    .desktop\:margin-block-start-neg-2 {
      margin-block-start: var(--zbk-spacing-neg-2);
    }
    .desktop\:margin-inline-end-neg-2 {
      margin-inline-end: var(--zbk-spacing-neg-2);
    }
    .desktop\:margin-block-end-neg-2 {
      margin-block-end: var(--zbk-spacing-neg-2);
    }
    .desktop\:margin-inline-start-neg-2 {
      margin-inline-start: var(--zbk-spacing-neg-2);
    }
    .desktop\:margin-neg-105 {
      margin-inline: var(--zbk-spacing-neg-105);
    }
    .desktop\:margin-block-neg-105,
    .desktop\:margin-neg-105 {
      margin-block: var(--zbk-spacing-neg-105);
    }
    .desktop\:margin-inline-neg-105 {
      margin-inline: var(--zbk-spacing-neg-105);
    }
    .desktop\:margin-block-start-neg-105 {
      margin-block-start: var(--zbk-spacing-neg-105);
    }
    .desktop\:margin-inline-end-neg-105 {
      margin-inline-end: var(--zbk-spacing-neg-105);
    }
    .desktop\:margin-block-end-neg-105 {
      margin-block-end: var(--zbk-spacing-neg-105);
    }
    .desktop\:margin-inline-start-neg-105 {
      margin-inline-start: var(--zbk-spacing-neg-105);
    }
    .desktop\:margin-neg-1 {
      margin-inline: var(--zbk-spacing-neg-1);
    }
    .desktop\:margin-block-neg-1,
    .desktop\:margin-neg-1 {
      margin-block: var(--zbk-spacing-neg-1);
    }
    .desktop\:margin-inline-neg-1 {
      margin-inline: var(--zbk-spacing-neg-1);
    }
    .desktop\:margin-block-start-neg-1 {
      margin-block-start: var(--zbk-spacing-neg-1);
    }
    .desktop\:margin-inline-end-neg-1 {
      margin-inline-end: var(--zbk-spacing-neg-1);
    }
    .desktop\:margin-block-end-neg-1 {
      margin-block-end: var(--zbk-spacing-neg-1);
    }
    .desktop\:margin-inline-start-neg-1 {
      margin-inline-start: var(--zbk-spacing-neg-1);
    }
    .desktop\:margin-neg-05 {
      margin-inline: var(--zbk-spacing-neg-05);
    }
    .desktop\:margin-block-neg-05,
    .desktop\:margin-neg-05 {
      margin-block: var(--zbk-spacing-neg-05);
    }
    .desktop\:margin-inline-neg-05 {
      margin-inline: var(--zbk-spacing-neg-05);
    }
    .desktop\:margin-block-start-neg-05 {
      margin-block-start: var(--zbk-spacing-neg-05);
    }
    .desktop\:margin-inline-end-neg-05 {
      margin-inline-end: var(--zbk-spacing-neg-05);
    }
    .desktop\:margin-block-end-neg-05 {
      margin-block-end: var(--zbk-spacing-neg-05);
    }
    .desktop\:margin-inline-start-neg-05 {
      margin-inline-start: var(--zbk-spacing-neg-05);
    }
    .desktop\:margin-neg-025 {
      margin-inline: var(--zbk-spacing-neg-025);
    }
    .desktop\:margin-block-neg-025,
    .desktop\:margin-neg-025 {
      margin-block: var(--zbk-spacing-neg-025);
    }
    .desktop\:margin-inline-neg-025 {
      margin-inline: var(--zbk-spacing-neg-025);
    }
    .desktop\:margin-block-start-neg-025 {
      margin-block-start: var(--zbk-spacing-neg-025);
    }
    .desktop\:margin-inline-end-neg-025 {
      margin-inline-end: var(--zbk-spacing-neg-025);
    }
    .desktop\:margin-block-end-neg-025 {
      margin-block-end: var(--zbk-spacing-neg-025);
    }
    .desktop\:margin-inline-start-neg-025 {
      margin-inline-start: var(--zbk-spacing-neg-025);
    }
    .desktop\:margin-neg-2px {
      margin-inline: var(--zbk-spacing-neg-2px);
    }
    .desktop\:margin-block-neg-2px,
    .desktop\:margin-neg-2px {
      margin-block: var(--zbk-spacing-neg-2px);
    }
    .desktop\:margin-inline-neg-2px {
      margin-inline: var(--zbk-spacing-neg-2px);
    }
    .desktop\:margin-block-start-neg-2px {
      margin-block-start: var(--zbk-spacing-neg-2px);
    }
    .desktop\:margin-inline-end-neg-2px {
      margin-inline-end: var(--zbk-spacing-neg-2px);
    }
    .desktop\:margin-block-end-neg-2px {
      margin-block-end: var(--zbk-spacing-neg-2px);
    }
    .desktop\:margin-inline-start-neg-2px {
      margin-inline-start: var(--zbk-spacing-neg-2px);
    }
    .desktop\:margin-neg-1px {
      margin-inline: var(--zbk-spacing-neg-1px);
    }
    .desktop\:margin-block-neg-1px,
    .desktop\:margin-neg-1px {
      margin-block: var(--zbk-spacing-neg-1px);
    }
    .desktop\:margin-inline-neg-1px {
      margin-inline: var(--zbk-spacing-neg-1px);
    }
    .desktop\:margin-block-start-neg-1px {
      margin-block-start: var(--zbk-spacing-neg-1px);
    }
    .desktop\:margin-inline-end-neg-1px {
      margin-inline-end: var(--zbk-spacing-neg-1px);
    }
    .desktop\:margin-block-end-neg-1px {
      margin-block-end: var(--zbk-spacing-neg-1px);
    }
    .desktop\:margin-inline-start-neg-1px {
      margin-inline-start: var(--zbk-spacing-neg-1px);
    }
    .desktop\:margin-0 {
      margin-inline: var(--zbk-spacing-0);
    }
    .desktop\:margin-0,
    .desktop\:margin-block-0 {
      margin-block: var(--zbk-spacing-0);
    }
    .desktop\:margin-inline-0 {
      margin-inline: var(--zbk-spacing-0);
    }
    .desktop\:margin-block-start-0 {
      margin-block-start: var(--zbk-spacing-0);
    }
    .desktop\:margin-inline-end-0 {
      margin-inline-end: var(--zbk-spacing-0);
    }
    .desktop\:margin-block-end-0 {
      margin-block-end: var(--zbk-spacing-0);
    }
    .desktop\:margin-inline-start-0 {
      margin-inline-start: var(--zbk-spacing-0);
    }
    .desktop\:margin-1px {
      margin-inline: var(--zbk-spacing-1px);
    }
    .desktop\:margin-1px,
    .desktop\:margin-block-1px {
      margin-block: var(--zbk-spacing-1px);
    }
    .desktop\:margin-inline-1px {
      margin-inline: var(--zbk-spacing-1px);
    }
    .desktop\:margin-block-start-1px {
      margin-block-start: var(--zbk-spacing-1px);
    }
    .desktop\:margin-inline-end-1px {
      margin-inline-end: var(--zbk-spacing-1px);
    }
    .desktop\:margin-block-end-1px {
      margin-block-end: var(--zbk-spacing-1px);
    }
    .desktop\:margin-inline-start-1px {
      margin-inline-start: var(--zbk-spacing-1px);
    }
    .desktop\:margin-2px {
      margin-inline: var(--zbk-spacing-2px);
    }
    .desktop\:margin-2px,
    .desktop\:margin-block-2px {
      margin-block: var(--zbk-spacing-2px);
    }
    .desktop\:margin-inline-2px {
      margin-inline: var(--zbk-spacing-2px);
    }
    .desktop\:margin-block-start-2px {
      margin-block-start: var(--zbk-spacing-2px);
    }
    .desktop\:margin-inline-end-2px {
      margin-inline-end: var(--zbk-spacing-2px);
    }
    .desktop\:margin-block-end-2px {
      margin-block-end: var(--zbk-spacing-2px);
    }
    .desktop\:margin-inline-start-2px {
      margin-inline-start: var(--zbk-spacing-2px);
    }
    .desktop\:margin-025 {
      margin-inline: var(--zbk-spacing-025);
    }
    .desktop\:margin-025,
    .desktop\:margin-block-025 {
      margin-block: var(--zbk-spacing-025);
    }
    .desktop\:margin-inline-025 {
      margin-inline: var(--zbk-spacing-025);
    }
    .desktop\:margin-block-start-025 {
      margin-block-start: var(--zbk-spacing-025);
    }
    .desktop\:margin-inline-end-025 {
      margin-inline-end: var(--zbk-spacing-025);
    }
    .desktop\:margin-block-end-025 {
      margin-block-end: var(--zbk-spacing-025);
    }
    .desktop\:margin-inline-start-025 {
      margin-inline-start: var(--zbk-spacing-025);
    }
    .desktop\:margin-05 {
      margin-inline: var(--zbk-spacing-05);
    }
    .desktop\:margin-05,
    .desktop\:margin-block-05 {
      margin-block: var(--zbk-spacing-05);
    }
    .desktop\:margin-inline-05 {
      margin-inline: var(--zbk-spacing-05);
    }
    .desktop\:margin-block-start-05 {
      margin-block-start: var(--zbk-spacing-05);
    }
    .desktop\:margin-inline-end-05 {
      margin-inline-end: var(--zbk-spacing-05);
    }
    .desktop\:margin-block-end-05 {
      margin-block-end: var(--zbk-spacing-05);
    }
    .desktop\:margin-inline-start-05 {
      margin-inline-start: var(--zbk-spacing-05);
    }
    .desktop\:margin-1 {
      margin-inline: var(--zbk-spacing-1);
    }
    .desktop\:margin-1,
    .desktop\:margin-block-1 {
      margin-block: var(--zbk-spacing-1);
    }
    .desktop\:margin-inline-1 {
      margin-inline: var(--zbk-spacing-1);
    }
    .desktop\:margin-block-start-1 {
      margin-block-start: var(--zbk-spacing-1);
    }
    .desktop\:margin-inline-end-1 {
      margin-inline-end: var(--zbk-spacing-1);
    }
    .desktop\:margin-block-end-1 {
      margin-block-end: var(--zbk-spacing-1);
    }
    .desktop\:margin-inline-start-1 {
      margin-inline-start: var(--zbk-spacing-1);
    }
    .desktop\:margin-105 {
      margin-inline: var(--zbk-spacing-105);
    }
    .desktop\:margin-105,
    .desktop\:margin-block-105 {
      margin-block: var(--zbk-spacing-105);
    }
    .desktop\:margin-inline-105 {
      margin-inline: var(--zbk-spacing-105);
    }
    .desktop\:margin-block-start-105 {
      margin-block-start: var(--zbk-spacing-105);
    }
    .desktop\:margin-inline-end-105 {
      margin-inline-end: var(--zbk-spacing-105);
    }
    .desktop\:margin-block-end-105 {
      margin-block-end: var(--zbk-spacing-105);
    }
    .desktop\:margin-inline-start-105 {
      margin-inline-start: var(--zbk-spacing-105);
    }
    .desktop\:margin-2 {
      margin-inline: var(--zbk-spacing-2);
    }
    .desktop\:margin-2,
    .desktop\:margin-block-2 {
      margin-block: var(--zbk-spacing-2);
    }
    .desktop\:margin-inline-2 {
      margin-inline: var(--zbk-spacing-2);
    }
    .desktop\:margin-block-start-2 {
      margin-block-start: var(--zbk-spacing-2);
    }
    .desktop\:margin-inline-end-2 {
      margin-inline-end: var(--zbk-spacing-2);
    }
    .desktop\:margin-block-end-2 {
      margin-block-end: var(--zbk-spacing-2);
    }
    .desktop\:margin-inline-start-2 {
      margin-inline-start: var(--zbk-spacing-2);
    }
    .desktop\:margin-205 {
      margin-inline: var(--zbk-spacing-205);
    }
    .desktop\:margin-205,
    .desktop\:margin-block-205 {
      margin-block: var(--zbk-spacing-205);
    }
    .desktop\:margin-inline-205 {
      margin-inline: var(--zbk-spacing-205);
    }
    .desktop\:margin-block-start-205 {
      margin-block-start: var(--zbk-spacing-205);
    }
    .desktop\:margin-inline-end-205 {
      margin-inline-end: var(--zbk-spacing-205);
    }
    .desktop\:margin-block-end-205 {
      margin-block-end: var(--zbk-spacing-205);
    }
    .desktop\:margin-inline-start-205 {
      margin-inline-start: var(--zbk-spacing-205);
    }
    .desktop\:margin-3 {
      margin-inline: var(--zbk-spacing-3);
    }
    .desktop\:margin-3,
    .desktop\:margin-block-3 {
      margin-block: var(--zbk-spacing-3);
    }
    .desktop\:margin-inline-3 {
      margin-inline: var(--zbk-spacing-3);
    }
    .desktop\:margin-block-start-3 {
      margin-block-start: var(--zbk-spacing-3);
    }
    .desktop\:margin-inline-end-3 {
      margin-inline-end: var(--zbk-spacing-3);
    }
    .desktop\:margin-block-end-3 {
      margin-block-end: var(--zbk-spacing-3);
    }
    .desktop\:margin-inline-start-3 {
      margin-inline-start: var(--zbk-spacing-3);
    }
    .desktop\:margin-4 {
      margin-inline: var(--zbk-spacing-4);
    }
    .desktop\:margin-4,
    .desktop\:margin-block-4 {
      margin-block: var(--zbk-spacing-4);
    }
    .desktop\:margin-inline-4 {
      margin-inline: var(--zbk-spacing-4);
    }
    .desktop\:margin-block-start-4 {
      margin-block-start: var(--zbk-spacing-4);
    }
    .desktop\:margin-inline-end-4 {
      margin-inline-end: var(--zbk-spacing-4);
    }
    .desktop\:margin-block-end-4 {
      margin-block-end: var(--zbk-spacing-4);
    }
    .desktop\:margin-inline-start-4 {
      margin-inline-start: var(--zbk-spacing-4);
    }
    .desktop\:margin-5 {
      margin-inline: var(--zbk-spacing-5);
    }
    .desktop\:margin-5,
    .desktop\:margin-block-5 {
      margin-block: var(--zbk-spacing-5);
    }
    .desktop\:margin-inline-5 {
      margin-inline: var(--zbk-spacing-5);
    }
    .desktop\:margin-block-start-5 {
      margin-block-start: var(--zbk-spacing-5);
    }
    .desktop\:margin-inline-end-5 {
      margin-inline-end: var(--zbk-spacing-5);
    }
    .desktop\:margin-block-end-5 {
      margin-block-end: var(--zbk-spacing-5);
    }
    .desktop\:margin-inline-start-5 {
      margin-inline-start: var(--zbk-spacing-5);
    }
    .desktop\:margin-6 {
      margin-inline: var(--zbk-spacing-6);
    }
    .desktop\:margin-6,
    .desktop\:margin-block-6 {
      margin-block: var(--zbk-spacing-6);
    }
    .desktop\:margin-inline-6 {
      margin-inline: var(--zbk-spacing-6);
    }
    .desktop\:margin-block-start-6 {
      margin-block-start: var(--zbk-spacing-6);
    }
    .desktop\:margin-inline-end-6 {
      margin-inline-end: var(--zbk-spacing-6);
    }
    .desktop\:margin-block-end-6 {
      margin-block-end: var(--zbk-spacing-6);
    }
    .desktop\:margin-inline-start-6 {
      margin-inline-start: var(--zbk-spacing-6);
    }
    .desktop\:margin-7 {
      margin-inline: var(--zbk-spacing-7);
    }
    .desktop\:margin-7,
    .desktop\:margin-block-7 {
      margin-block: var(--zbk-spacing-7);
    }
    .desktop\:margin-inline-7 {
      margin-inline: var(--zbk-spacing-7);
    }
    .desktop\:margin-block-start-7 {
      margin-block-start: var(--zbk-spacing-7);
    }
    .desktop\:margin-inline-end-7 {
      margin-inline-end: var(--zbk-spacing-7);
    }
    .desktop\:margin-block-end-7 {
      margin-block-end: var(--zbk-spacing-7);
    }
    .desktop\:margin-inline-start-7 {
      margin-inline-start: var(--zbk-spacing-7);
    }
    .desktop\:margin-8 {
      margin-inline: var(--zbk-spacing-8);
    }
    .desktop\:margin-8,
    .desktop\:margin-block-8 {
      margin-block: var(--zbk-spacing-8);
    }
    .desktop\:margin-inline-8 {
      margin-inline: var(--zbk-spacing-8);
    }
    .desktop\:margin-block-start-8 {
      margin-block-start: var(--zbk-spacing-8);
    }
    .desktop\:margin-inline-end-8 {
      margin-inline-end: var(--zbk-spacing-8);
    }
    .desktop\:margin-block-end-8 {
      margin-block-end: var(--zbk-spacing-8);
    }
    .desktop\:margin-inline-start-8 {
      margin-inline-start: var(--zbk-spacing-8);
    }
    .desktop\:margin-9 {
      margin-inline: var(--zbk-spacing-9);
    }
    .desktop\:margin-9,
    .desktop\:margin-block-9 {
      margin-block: var(--zbk-spacing-9);
    }
    .desktop\:margin-inline-9 {
      margin-inline: var(--zbk-spacing-9);
    }
    .desktop\:margin-block-start-9 {
      margin-block-start: var(--zbk-spacing-9);
    }
    .desktop\:margin-inline-end-9 {
      margin-inline-end: var(--zbk-spacing-9);
    }
    .desktop\:margin-block-end-9 {
      margin-block-end: var(--zbk-spacing-9);
    }
    .desktop\:margin-inline-start-9 {
      margin-inline-start: var(--zbk-spacing-9);
    }
    .desktop\:margin-10 {
      margin-inline: var(--zbk-spacing-10);
    }
    .desktop\:margin-10,
    .desktop\:margin-block-10 {
      margin-block: var(--zbk-spacing-10);
    }
    .desktop\:margin-inline-10 {
      margin-inline: var(--zbk-spacing-10);
    }
    .desktop\:margin-block-start-10 {
      margin-block-start: var(--zbk-spacing-10);
    }
    .desktop\:margin-inline-end-10 {
      margin-inline-end: var(--zbk-spacing-10);
    }
    .desktop\:margin-block-end-10 {
      margin-block-end: var(--zbk-spacing-10);
    }
    .desktop\:margin-inline-start-10 {
      margin-inline-start: var(--zbk-spacing-10);
    }
    .desktop\:margin-15 {
      margin-inline: var(--zbk-spacing-15);
    }
    .desktop\:margin-15,
    .desktop\:margin-block-15 {
      margin-block: var(--zbk-spacing-15);
    }
    .desktop\:margin-inline-15 {
      margin-inline: var(--zbk-spacing-15);
    }
    .desktop\:margin-block-start-15 {
      margin-block-start: var(--zbk-spacing-15);
    }
    .desktop\:margin-inline-end-15 {
      margin-inline-end: var(--zbk-spacing-15);
    }
    .desktop\:margin-block-end-15 {
      margin-block-end: var(--zbk-spacing-15);
    }
    .desktop\:margin-inline-start-15 {
      margin-inline-start: var(--zbk-spacing-15);
    }
    .desktop\:margin-20 {
      margin-inline: var(--zbk-spacing-20);
    }
    .desktop\:margin-20,
    .desktop\:margin-block-20 {
      margin-block: var(--zbk-spacing-20);
    }
    .desktop\:margin-inline-20 {
      margin-inline: var(--zbk-spacing-20);
    }
    .desktop\:margin-block-start-20 {
      margin-block-start: var(--zbk-spacing-20);
    }
    .desktop\:margin-inline-end-20 {
      margin-inline-end: var(--zbk-spacing-20);
    }
    .desktop\:margin-block-end-20 {
      margin-block-end: var(--zbk-spacing-20);
    }
    .desktop\:margin-inline-start-20 {
      margin-inline-start: var(--zbk-spacing-20);
    }
  }
  @media (min-width: 80rem) {
    .desktop-lg\:margin-neg-15 {
      margin-inline: var(--zbk-spacing-neg-15);
    }
    .desktop-lg\:margin-block-neg-15,
    .desktop-lg\:margin-neg-15 {
      margin-block: var(--zbk-spacing-neg-15);
    }
    .desktop-lg\:margin-inline-neg-15 {
      margin-inline: var(--zbk-spacing-neg-15);
    }
    .desktop-lg\:margin-block-start-neg-15 {
      margin-block-start: var(--zbk-spacing-neg-15);
    }
    .desktop-lg\:margin-inline-end-neg-15 {
      margin-inline-end: var(--zbk-spacing-neg-15);
    }
    .desktop-lg\:margin-block-end-neg-15 {
      margin-block-end: var(--zbk-spacing-neg-15);
    }
    .desktop-lg\:margin-inline-start-neg-15 {
      margin-inline-start: var(--zbk-spacing-neg-15);
    }
    .desktop-lg\:margin-neg-10 {
      margin-inline: var(--zbk-spacing-neg-10);
    }
    .desktop-lg\:margin-block-neg-10,
    .desktop-lg\:margin-neg-10 {
      margin-block: var(--zbk-spacing-neg-10);
    }
    .desktop-lg\:margin-inline-neg-10 {
      margin-inline: var(--zbk-spacing-neg-10);
    }
    .desktop-lg\:margin-block-start-neg-10 {
      margin-block-start: var(--zbk-spacing-neg-10);
    }
    .desktop-lg\:margin-inline-end-neg-10 {
      margin-inline-end: var(--zbk-spacing-neg-10);
    }
    .desktop-lg\:margin-block-end-neg-10 {
      margin-block-end: var(--zbk-spacing-neg-10);
    }
    .desktop-lg\:margin-inline-start-neg-10 {
      margin-inline-start: var(--zbk-spacing-neg-10);
    }
    .desktop-lg\:margin-neg-9 {
      margin-inline: var(--zbk-spacing-neg-9);
    }
    .desktop-lg\:margin-block-neg-9,
    .desktop-lg\:margin-neg-9 {
      margin-block: var(--zbk-spacing-neg-9);
    }
    .desktop-lg\:margin-inline-neg-9 {
      margin-inline: var(--zbk-spacing-neg-9);
    }
    .desktop-lg\:margin-block-start-neg-9 {
      margin-block-start: var(--zbk-spacing-neg-9);
    }
    .desktop-lg\:margin-inline-end-neg-9 {
      margin-inline-end: var(--zbk-spacing-neg-9);
    }
    .desktop-lg\:margin-block-end-neg-9 {
      margin-block-end: var(--zbk-spacing-neg-9);
    }
    .desktop-lg\:margin-inline-start-neg-9 {
      margin-inline-start: var(--zbk-spacing-neg-9);
    }
    .desktop-lg\:margin-neg-8 {
      margin-inline: var(--zbk-spacing-neg-8);
    }
    .desktop-lg\:margin-block-neg-8,
    .desktop-lg\:margin-neg-8 {
      margin-block: var(--zbk-spacing-neg-8);
    }
    .desktop-lg\:margin-inline-neg-8 {
      margin-inline: var(--zbk-spacing-neg-8);
    }
    .desktop-lg\:margin-block-start-neg-8 {
      margin-block-start: var(--zbk-spacing-neg-8);
    }
    .desktop-lg\:margin-inline-end-neg-8 {
      margin-inline-end: var(--zbk-spacing-neg-8);
    }
    .desktop-lg\:margin-block-end-neg-8 {
      margin-block-end: var(--zbk-spacing-neg-8);
    }
    .desktop-lg\:margin-inline-start-neg-8 {
      margin-inline-start: var(--zbk-spacing-neg-8);
    }
    .desktop-lg\:margin-neg-7 {
      margin-inline: var(--zbk-spacing-neg-7);
    }
    .desktop-lg\:margin-block-neg-7,
    .desktop-lg\:margin-neg-7 {
      margin-block: var(--zbk-spacing-neg-7);
    }
    .desktop-lg\:margin-inline-neg-7 {
      margin-inline: var(--zbk-spacing-neg-7);
    }
    .desktop-lg\:margin-block-start-neg-7 {
      margin-block-start: var(--zbk-spacing-neg-7);
    }
    .desktop-lg\:margin-inline-end-neg-7 {
      margin-inline-end: var(--zbk-spacing-neg-7);
    }
    .desktop-lg\:margin-block-end-neg-7 {
      margin-block-end: var(--zbk-spacing-neg-7);
    }
    .desktop-lg\:margin-inline-start-neg-7 {
      margin-inline-start: var(--zbk-spacing-neg-7);
    }
    .desktop-lg\:margin-neg-6 {
      margin-inline: var(--zbk-spacing-neg-6);
    }
    .desktop-lg\:margin-block-neg-6,
    .desktop-lg\:margin-neg-6 {
      margin-block: var(--zbk-spacing-neg-6);
    }
    .desktop-lg\:margin-inline-neg-6 {
      margin-inline: var(--zbk-spacing-neg-6);
    }
    .desktop-lg\:margin-block-start-neg-6 {
      margin-block-start: var(--zbk-spacing-neg-6);
    }
    .desktop-lg\:margin-inline-end-neg-6 {
      margin-inline-end: var(--zbk-spacing-neg-6);
    }
    .desktop-lg\:margin-block-end-neg-6 {
      margin-block-end: var(--zbk-spacing-neg-6);
    }
    .desktop-lg\:margin-inline-start-neg-6 {
      margin-inline-start: var(--zbk-spacing-neg-6);
    }
    .desktop-lg\:margin-neg-5 {
      margin-inline: var(--zbk-spacing-neg-5);
    }
    .desktop-lg\:margin-block-neg-5,
    .desktop-lg\:margin-neg-5 {
      margin-block: var(--zbk-spacing-neg-5);
    }
    .desktop-lg\:margin-inline-neg-5 {
      margin-inline: var(--zbk-spacing-neg-5);
    }
    .desktop-lg\:margin-block-start-neg-5 {
      margin-block-start: var(--zbk-spacing-neg-5);
    }
    .desktop-lg\:margin-inline-end-neg-5 {
      margin-inline-end: var(--zbk-spacing-neg-5);
    }
    .desktop-lg\:margin-block-end-neg-5 {
      margin-block-end: var(--zbk-spacing-neg-5);
    }
    .desktop-lg\:margin-inline-start-neg-5 {
      margin-inline-start: var(--zbk-spacing-neg-5);
    }
    .desktop-lg\:margin-neg-4 {
      margin-inline: var(--zbk-spacing-neg-4);
    }
    .desktop-lg\:margin-block-neg-4,
    .desktop-lg\:margin-neg-4 {
      margin-block: var(--zbk-spacing-neg-4);
    }
    .desktop-lg\:margin-inline-neg-4 {
      margin-inline: var(--zbk-spacing-neg-4);
    }
    .desktop-lg\:margin-block-start-neg-4 {
      margin-block-start: var(--zbk-spacing-neg-4);
    }
    .desktop-lg\:margin-inline-end-neg-4 {
      margin-inline-end: var(--zbk-spacing-neg-4);
    }
    .desktop-lg\:margin-block-end-neg-4 {
      margin-block-end: var(--zbk-spacing-neg-4);
    }
    .desktop-lg\:margin-inline-start-neg-4 {
      margin-inline-start: var(--zbk-spacing-neg-4);
    }
    .desktop-lg\:margin-neg-3 {
      margin-inline: var(--zbk-spacing-neg-3);
    }
    .desktop-lg\:margin-block-neg-3,
    .desktop-lg\:margin-neg-3 {
      margin-block: var(--zbk-spacing-neg-3);
    }
    .desktop-lg\:margin-inline-neg-3 {
      margin-inline: var(--zbk-spacing-neg-3);
    }
    .desktop-lg\:margin-block-start-neg-3 {
      margin-block-start: var(--zbk-spacing-neg-3);
    }
    .desktop-lg\:margin-inline-end-neg-3 {
      margin-inline-end: var(--zbk-spacing-neg-3);
    }
    .desktop-lg\:margin-block-end-neg-3 {
      margin-block-end: var(--zbk-spacing-neg-3);
    }
    .desktop-lg\:margin-inline-start-neg-3 {
      margin-inline-start: var(--zbk-spacing-neg-3);
    }
    .desktop-lg\:margin-neg-205 {
      margin-inline: var(--zbk-spacing-neg-205);
    }
    .desktop-lg\:margin-block-neg-205,
    .desktop-lg\:margin-neg-205 {
      margin-block: var(--zbk-spacing-neg-205);
    }
    .desktop-lg\:margin-inline-neg-205 {
      margin-inline: var(--zbk-spacing-neg-205);
    }
    .desktop-lg\:margin-block-start-neg-205 {
      margin-block-start: var(--zbk-spacing-neg-205);
    }
    .desktop-lg\:margin-inline-end-neg-205 {
      margin-inline-end: var(--zbk-spacing-neg-205);
    }
    .desktop-lg\:margin-block-end-neg-205 {
      margin-block-end: var(--zbk-spacing-neg-205);
    }
    .desktop-lg\:margin-inline-start-neg-205 {
      margin-inline-start: var(--zbk-spacing-neg-205);
    }
    .desktop-lg\:margin-neg-2 {
      margin-inline: var(--zbk-spacing-neg-2);
    }
    .desktop-lg\:margin-block-neg-2,
    .desktop-lg\:margin-neg-2 {
      margin-block: var(--zbk-spacing-neg-2);
    }
    .desktop-lg\:margin-inline-neg-2 {
      margin-inline: var(--zbk-spacing-neg-2);
    }
    .desktop-lg\:margin-block-start-neg-2 {
      margin-block-start: var(--zbk-spacing-neg-2);
    }
    .desktop-lg\:margin-inline-end-neg-2 {
      margin-inline-end: var(--zbk-spacing-neg-2);
    }
    .desktop-lg\:margin-block-end-neg-2 {
      margin-block-end: var(--zbk-spacing-neg-2);
    }
    .desktop-lg\:margin-inline-start-neg-2 {
      margin-inline-start: var(--zbk-spacing-neg-2);
    }
    .desktop-lg\:margin-neg-105 {
      margin-inline: var(--zbk-spacing-neg-105);
    }
    .desktop-lg\:margin-block-neg-105,
    .desktop-lg\:margin-neg-105 {
      margin-block: var(--zbk-spacing-neg-105);
    }
    .desktop-lg\:margin-inline-neg-105 {
      margin-inline: var(--zbk-spacing-neg-105);
    }
    .desktop-lg\:margin-block-start-neg-105 {
      margin-block-start: var(--zbk-spacing-neg-105);
    }
    .desktop-lg\:margin-inline-end-neg-105 {
      margin-inline-end: var(--zbk-spacing-neg-105);
    }
    .desktop-lg\:margin-block-end-neg-105 {
      margin-block-end: var(--zbk-spacing-neg-105);
    }
    .desktop-lg\:margin-inline-start-neg-105 {
      margin-inline-start: var(--zbk-spacing-neg-105);
    }
    .desktop-lg\:margin-neg-1 {
      margin-inline: var(--zbk-spacing-neg-1);
    }
    .desktop-lg\:margin-block-neg-1,
    .desktop-lg\:margin-neg-1 {
      margin-block: var(--zbk-spacing-neg-1);
    }
    .desktop-lg\:margin-inline-neg-1 {
      margin-inline: var(--zbk-spacing-neg-1);
    }
    .desktop-lg\:margin-block-start-neg-1 {
      margin-block-start: var(--zbk-spacing-neg-1);
    }
    .desktop-lg\:margin-inline-end-neg-1 {
      margin-inline-end: var(--zbk-spacing-neg-1);
    }
    .desktop-lg\:margin-block-end-neg-1 {
      margin-block-end: var(--zbk-spacing-neg-1);
    }
    .desktop-lg\:margin-inline-start-neg-1 {
      margin-inline-start: var(--zbk-spacing-neg-1);
    }
    .desktop-lg\:margin-neg-05 {
      margin-inline: var(--zbk-spacing-neg-05);
    }
    .desktop-lg\:margin-block-neg-05,
    .desktop-lg\:margin-neg-05 {
      margin-block: var(--zbk-spacing-neg-05);
    }
    .desktop-lg\:margin-inline-neg-05 {
      margin-inline: var(--zbk-spacing-neg-05);
    }
    .desktop-lg\:margin-block-start-neg-05 {
      margin-block-start: var(--zbk-spacing-neg-05);
    }
    .desktop-lg\:margin-inline-end-neg-05 {
      margin-inline-end: var(--zbk-spacing-neg-05);
    }
    .desktop-lg\:margin-block-end-neg-05 {
      margin-block-end: var(--zbk-spacing-neg-05);
    }
    .desktop-lg\:margin-inline-start-neg-05 {
      margin-inline-start: var(--zbk-spacing-neg-05);
    }
    .desktop-lg\:margin-neg-025 {
      margin-inline: var(--zbk-spacing-neg-025);
    }
    .desktop-lg\:margin-block-neg-025,
    .desktop-lg\:margin-neg-025 {
      margin-block: var(--zbk-spacing-neg-025);
    }
    .desktop-lg\:margin-inline-neg-025 {
      margin-inline: var(--zbk-spacing-neg-025);
    }
    .desktop-lg\:margin-block-start-neg-025 {
      margin-block-start: var(--zbk-spacing-neg-025);
    }
    .desktop-lg\:margin-inline-end-neg-025 {
      margin-inline-end: var(--zbk-spacing-neg-025);
    }
    .desktop-lg\:margin-block-end-neg-025 {
      margin-block-end: var(--zbk-spacing-neg-025);
    }
    .desktop-lg\:margin-inline-start-neg-025 {
      margin-inline-start: var(--zbk-spacing-neg-025);
    }
    .desktop-lg\:margin-neg-2px {
      margin-inline: var(--zbk-spacing-neg-2px);
    }
    .desktop-lg\:margin-block-neg-2px,
    .desktop-lg\:margin-neg-2px {
      margin-block: var(--zbk-spacing-neg-2px);
    }
    .desktop-lg\:margin-inline-neg-2px {
      margin-inline: var(--zbk-spacing-neg-2px);
    }
    .desktop-lg\:margin-block-start-neg-2px {
      margin-block-start: var(--zbk-spacing-neg-2px);
    }
    .desktop-lg\:margin-inline-end-neg-2px {
      margin-inline-end: var(--zbk-spacing-neg-2px);
    }
    .desktop-lg\:margin-block-end-neg-2px {
      margin-block-end: var(--zbk-spacing-neg-2px);
    }
    .desktop-lg\:margin-inline-start-neg-2px {
      margin-inline-start: var(--zbk-spacing-neg-2px);
    }
    .desktop-lg\:margin-neg-1px {
      margin-inline: var(--zbk-spacing-neg-1px);
    }
    .desktop-lg\:margin-block-neg-1px,
    .desktop-lg\:margin-neg-1px {
      margin-block: var(--zbk-spacing-neg-1px);
    }
    .desktop-lg\:margin-inline-neg-1px {
      margin-inline: var(--zbk-spacing-neg-1px);
    }
    .desktop-lg\:margin-block-start-neg-1px {
      margin-block-start: var(--zbk-spacing-neg-1px);
    }
    .desktop-lg\:margin-inline-end-neg-1px {
      margin-inline-end: var(--zbk-spacing-neg-1px);
    }
    .desktop-lg\:margin-block-end-neg-1px {
      margin-block-end: var(--zbk-spacing-neg-1px);
    }
    .desktop-lg\:margin-inline-start-neg-1px {
      margin-inline-start: var(--zbk-spacing-neg-1px);
    }
    .desktop-lg\:margin-0 {
      margin-inline: var(--zbk-spacing-0);
    }
    .desktop-lg\:margin-0,
    .desktop-lg\:margin-block-0 {
      margin-block: var(--zbk-spacing-0);
    }
    .desktop-lg\:margin-inline-0 {
      margin-inline: var(--zbk-spacing-0);
    }
    .desktop-lg\:margin-block-start-0 {
      margin-block-start: var(--zbk-spacing-0);
    }
    .desktop-lg\:margin-inline-end-0 {
      margin-inline-end: var(--zbk-spacing-0);
    }
    .desktop-lg\:margin-block-end-0 {
      margin-block-end: var(--zbk-spacing-0);
    }
    .desktop-lg\:margin-inline-start-0 {
      margin-inline-start: var(--zbk-spacing-0);
    }
    .desktop-lg\:margin-1px {
      margin-inline: var(--zbk-spacing-1px);
    }
    .desktop-lg\:margin-1px,
    .desktop-lg\:margin-block-1px {
      margin-block: var(--zbk-spacing-1px);
    }
    .desktop-lg\:margin-inline-1px {
      margin-inline: var(--zbk-spacing-1px);
    }
    .desktop-lg\:margin-block-start-1px {
      margin-block-start: var(--zbk-spacing-1px);
    }
    .desktop-lg\:margin-inline-end-1px {
      margin-inline-end: var(--zbk-spacing-1px);
    }
    .desktop-lg\:margin-block-end-1px {
      margin-block-end: var(--zbk-spacing-1px);
    }
    .desktop-lg\:margin-inline-start-1px {
      margin-inline-start: var(--zbk-spacing-1px);
    }
    .desktop-lg\:margin-2px {
      margin-inline: var(--zbk-spacing-2px);
    }
    .desktop-lg\:margin-2px,
    .desktop-lg\:margin-block-2px {
      margin-block: var(--zbk-spacing-2px);
    }
    .desktop-lg\:margin-inline-2px {
      margin-inline: var(--zbk-spacing-2px);
    }
    .desktop-lg\:margin-block-start-2px {
      margin-block-start: var(--zbk-spacing-2px);
    }
    .desktop-lg\:margin-inline-end-2px {
      margin-inline-end: var(--zbk-spacing-2px);
    }
    .desktop-lg\:margin-block-end-2px {
      margin-block-end: var(--zbk-spacing-2px);
    }
    .desktop-lg\:margin-inline-start-2px {
      margin-inline-start: var(--zbk-spacing-2px);
    }
    .desktop-lg\:margin-025 {
      margin-inline: var(--zbk-spacing-025);
    }
    .desktop-lg\:margin-025,
    .desktop-lg\:margin-block-025 {
      margin-block: var(--zbk-spacing-025);
    }
    .desktop-lg\:margin-inline-025 {
      margin-inline: var(--zbk-spacing-025);
    }
    .desktop-lg\:margin-block-start-025 {
      margin-block-start: var(--zbk-spacing-025);
    }
    .desktop-lg\:margin-inline-end-025 {
      margin-inline-end: var(--zbk-spacing-025);
    }
    .desktop-lg\:margin-block-end-025 {
      margin-block-end: var(--zbk-spacing-025);
    }
    .desktop-lg\:margin-inline-start-025 {
      margin-inline-start: var(--zbk-spacing-025);
    }
    .desktop-lg\:margin-05 {
      margin-inline: var(--zbk-spacing-05);
    }
    .desktop-lg\:margin-05,
    .desktop-lg\:margin-block-05 {
      margin-block: var(--zbk-spacing-05);
    }
    .desktop-lg\:margin-inline-05 {
      margin-inline: var(--zbk-spacing-05);
    }
    .desktop-lg\:margin-block-start-05 {
      margin-block-start: var(--zbk-spacing-05);
    }
    .desktop-lg\:margin-inline-end-05 {
      margin-inline-end: var(--zbk-spacing-05);
    }
    .desktop-lg\:margin-block-end-05 {
      margin-block-end: var(--zbk-spacing-05);
    }
    .desktop-lg\:margin-inline-start-05 {
      margin-inline-start: var(--zbk-spacing-05);
    }
    .desktop-lg\:margin-1 {
      margin-inline: var(--zbk-spacing-1);
    }
    .desktop-lg\:margin-1,
    .desktop-lg\:margin-block-1 {
      margin-block: var(--zbk-spacing-1);
    }
    .desktop-lg\:margin-inline-1 {
      margin-inline: var(--zbk-spacing-1);
    }
    .desktop-lg\:margin-block-start-1 {
      margin-block-start: var(--zbk-spacing-1);
    }
    .desktop-lg\:margin-inline-end-1 {
      margin-inline-end: var(--zbk-spacing-1);
    }
    .desktop-lg\:margin-block-end-1 {
      margin-block-end: var(--zbk-spacing-1);
    }
    .desktop-lg\:margin-inline-start-1 {
      margin-inline-start: var(--zbk-spacing-1);
    }
    .desktop-lg\:margin-105 {
      margin-inline: var(--zbk-spacing-105);
    }
    .desktop-lg\:margin-105,
    .desktop-lg\:margin-block-105 {
      margin-block: var(--zbk-spacing-105);
    }
    .desktop-lg\:margin-inline-105 {
      margin-inline: var(--zbk-spacing-105);
    }
    .desktop-lg\:margin-block-start-105 {
      margin-block-start: var(--zbk-spacing-105);
    }
    .desktop-lg\:margin-inline-end-105 {
      margin-inline-end: var(--zbk-spacing-105);
    }
    .desktop-lg\:margin-block-end-105 {
      margin-block-end: var(--zbk-spacing-105);
    }
    .desktop-lg\:margin-inline-start-105 {
      margin-inline-start: var(--zbk-spacing-105);
    }
    .desktop-lg\:margin-2 {
      margin-inline: var(--zbk-spacing-2);
    }
    .desktop-lg\:margin-2,
    .desktop-lg\:margin-block-2 {
      margin-block: var(--zbk-spacing-2);
    }
    .desktop-lg\:margin-inline-2 {
      margin-inline: var(--zbk-spacing-2);
    }
    .desktop-lg\:margin-block-start-2 {
      margin-block-start: var(--zbk-spacing-2);
    }
    .desktop-lg\:margin-inline-end-2 {
      margin-inline-end: var(--zbk-spacing-2);
    }
    .desktop-lg\:margin-block-end-2 {
      margin-block-end: var(--zbk-spacing-2);
    }
    .desktop-lg\:margin-inline-start-2 {
      margin-inline-start: var(--zbk-spacing-2);
    }
    .desktop-lg\:margin-205 {
      margin-inline: var(--zbk-spacing-205);
    }
    .desktop-lg\:margin-205,
    .desktop-lg\:margin-block-205 {
      margin-block: var(--zbk-spacing-205);
    }
    .desktop-lg\:margin-inline-205 {
      margin-inline: var(--zbk-spacing-205);
    }
    .desktop-lg\:margin-block-start-205 {
      margin-block-start: var(--zbk-spacing-205);
    }
    .desktop-lg\:margin-inline-end-205 {
      margin-inline-end: var(--zbk-spacing-205);
    }
    .desktop-lg\:margin-block-end-205 {
      margin-block-end: var(--zbk-spacing-205);
    }
    .desktop-lg\:margin-inline-start-205 {
      margin-inline-start: var(--zbk-spacing-205);
    }
    .desktop-lg\:margin-3 {
      margin-inline: var(--zbk-spacing-3);
    }
    .desktop-lg\:margin-3,
    .desktop-lg\:margin-block-3 {
      margin-block: var(--zbk-spacing-3);
    }
    .desktop-lg\:margin-inline-3 {
      margin-inline: var(--zbk-spacing-3);
    }
    .desktop-lg\:margin-block-start-3 {
      margin-block-start: var(--zbk-spacing-3);
    }
    .desktop-lg\:margin-inline-end-3 {
      margin-inline-end: var(--zbk-spacing-3);
    }
    .desktop-lg\:margin-block-end-3 {
      margin-block-end: var(--zbk-spacing-3);
    }
    .desktop-lg\:margin-inline-start-3 {
      margin-inline-start: var(--zbk-spacing-3);
    }
    .desktop-lg\:margin-4 {
      margin-inline: var(--zbk-spacing-4);
    }
    .desktop-lg\:margin-4,
    .desktop-lg\:margin-block-4 {
      margin-block: var(--zbk-spacing-4);
    }
    .desktop-lg\:margin-inline-4 {
      margin-inline: var(--zbk-spacing-4);
    }
    .desktop-lg\:margin-block-start-4 {
      margin-block-start: var(--zbk-spacing-4);
    }
    .desktop-lg\:margin-inline-end-4 {
      margin-inline-end: var(--zbk-spacing-4);
    }
    .desktop-lg\:margin-block-end-4 {
      margin-block-end: var(--zbk-spacing-4);
    }
    .desktop-lg\:margin-inline-start-4 {
      margin-inline-start: var(--zbk-spacing-4);
    }
    .desktop-lg\:margin-5 {
      margin-inline: var(--zbk-spacing-5);
    }
    .desktop-lg\:margin-5,
    .desktop-lg\:margin-block-5 {
      margin-block: var(--zbk-spacing-5);
    }
    .desktop-lg\:margin-inline-5 {
      margin-inline: var(--zbk-spacing-5);
    }
    .desktop-lg\:margin-block-start-5 {
      margin-block-start: var(--zbk-spacing-5);
    }
    .desktop-lg\:margin-inline-end-5 {
      margin-inline-end: var(--zbk-spacing-5);
    }
    .desktop-lg\:margin-block-end-5 {
      margin-block-end: var(--zbk-spacing-5);
    }
    .desktop-lg\:margin-inline-start-5 {
      margin-inline-start: var(--zbk-spacing-5);
    }
    .desktop-lg\:margin-6 {
      margin-inline: var(--zbk-spacing-6);
    }
    .desktop-lg\:margin-6,
    .desktop-lg\:margin-block-6 {
      margin-block: var(--zbk-spacing-6);
    }
    .desktop-lg\:margin-inline-6 {
      margin-inline: var(--zbk-spacing-6);
    }
    .desktop-lg\:margin-block-start-6 {
      margin-block-start: var(--zbk-spacing-6);
    }
    .desktop-lg\:margin-inline-end-6 {
      margin-inline-end: var(--zbk-spacing-6);
    }
    .desktop-lg\:margin-block-end-6 {
      margin-block-end: var(--zbk-spacing-6);
    }
    .desktop-lg\:margin-inline-start-6 {
      margin-inline-start: var(--zbk-spacing-6);
    }
    .desktop-lg\:margin-7 {
      margin-inline: var(--zbk-spacing-7);
    }
    .desktop-lg\:margin-7,
    .desktop-lg\:margin-block-7 {
      margin-block: var(--zbk-spacing-7);
    }
    .desktop-lg\:margin-inline-7 {
      margin-inline: var(--zbk-spacing-7);
    }
    .desktop-lg\:margin-block-start-7 {
      margin-block-start: var(--zbk-spacing-7);
    }
    .desktop-lg\:margin-inline-end-7 {
      margin-inline-end: var(--zbk-spacing-7);
    }
    .desktop-lg\:margin-block-end-7 {
      margin-block-end: var(--zbk-spacing-7);
    }
    .desktop-lg\:margin-inline-start-7 {
      margin-inline-start: var(--zbk-spacing-7);
    }
    .desktop-lg\:margin-8 {
      margin-inline: var(--zbk-spacing-8);
    }
    .desktop-lg\:margin-8,
    .desktop-lg\:margin-block-8 {
      margin-block: var(--zbk-spacing-8);
    }
    .desktop-lg\:margin-inline-8 {
      margin-inline: var(--zbk-spacing-8);
    }
    .desktop-lg\:margin-block-start-8 {
      margin-block-start: var(--zbk-spacing-8);
    }
    .desktop-lg\:margin-inline-end-8 {
      margin-inline-end: var(--zbk-spacing-8);
    }
    .desktop-lg\:margin-block-end-8 {
      margin-block-end: var(--zbk-spacing-8);
    }
    .desktop-lg\:margin-inline-start-8 {
      margin-inline-start: var(--zbk-spacing-8);
    }
    .desktop-lg\:margin-9 {
      margin-inline: var(--zbk-spacing-9);
    }
    .desktop-lg\:margin-9,
    .desktop-lg\:margin-block-9 {
      margin-block: var(--zbk-spacing-9);
    }
    .desktop-lg\:margin-inline-9 {
      margin-inline: var(--zbk-spacing-9);
    }
    .desktop-lg\:margin-block-start-9 {
      margin-block-start: var(--zbk-spacing-9);
    }
    .desktop-lg\:margin-inline-end-9 {
      margin-inline-end: var(--zbk-spacing-9);
    }
    .desktop-lg\:margin-block-end-9 {
      margin-block-end: var(--zbk-spacing-9);
    }
    .desktop-lg\:margin-inline-start-9 {
      margin-inline-start: var(--zbk-spacing-9);
    }
    .desktop-lg\:margin-10 {
      margin-inline: var(--zbk-spacing-10);
    }
    .desktop-lg\:margin-10,
    .desktop-lg\:margin-block-10 {
      margin-block: var(--zbk-spacing-10);
    }
    .desktop-lg\:margin-inline-10 {
      margin-inline: var(--zbk-spacing-10);
    }
    .desktop-lg\:margin-block-start-10 {
      margin-block-start: var(--zbk-spacing-10);
    }
    .desktop-lg\:margin-inline-end-10 {
      margin-inline-end: var(--zbk-spacing-10);
    }
    .desktop-lg\:margin-block-end-10 {
      margin-block-end: var(--zbk-spacing-10);
    }
    .desktop-lg\:margin-inline-start-10 {
      margin-inline-start: var(--zbk-spacing-10);
    }
    .desktop-lg\:margin-15 {
      margin-inline: var(--zbk-spacing-15);
    }
    .desktop-lg\:margin-15,
    .desktop-lg\:margin-block-15 {
      margin-block: var(--zbk-spacing-15);
    }
    .desktop-lg\:margin-inline-15 {
      margin-inline: var(--zbk-spacing-15);
    }
    .desktop-lg\:margin-block-start-15 {
      margin-block-start: var(--zbk-spacing-15);
    }
    .desktop-lg\:margin-inline-end-15 {
      margin-inline-end: var(--zbk-spacing-15);
    }
    .desktop-lg\:margin-block-end-15 {
      margin-block-end: var(--zbk-spacing-15);
    }
    .desktop-lg\:margin-inline-start-15 {
      margin-inline-start: var(--zbk-spacing-15);
    }
    .desktop-lg\:margin-20 {
      margin-inline: var(--zbk-spacing-20);
    }
    .desktop-lg\:margin-20,
    .desktop-lg\:margin-block-20 {
      margin-block: var(--zbk-spacing-20);
    }
    .desktop-lg\:margin-inline-20 {
      margin-inline: var(--zbk-spacing-20);
    }
    .desktop-lg\:margin-block-start-20 {
      margin-block-start: var(--zbk-spacing-20);
    }
    .desktop-lg\:margin-inline-end-20 {
      margin-inline-end: var(--zbk-spacing-20);
    }
    .desktop-lg\:margin-block-end-20 {
      margin-block-end: var(--zbk-spacing-20);
    }
    .desktop-lg\:margin-inline-start-20 {
      margin-inline-start: var(--zbk-spacing-20);
    }
  }
  @media (min-width: 100rem) {
    .widescreen\:margin-neg-15 {
      margin-inline: var(--zbk-spacing-neg-15);
    }
    .widescreen\:margin-block-neg-15,
    .widescreen\:margin-neg-15 {
      margin-block: var(--zbk-spacing-neg-15);
    }
    .widescreen\:margin-inline-neg-15 {
      margin-inline: var(--zbk-spacing-neg-15);
    }
    .widescreen\:margin-block-start-neg-15 {
      margin-block-start: var(--zbk-spacing-neg-15);
    }
    .widescreen\:margin-inline-end-neg-15 {
      margin-inline-end: var(--zbk-spacing-neg-15);
    }
    .widescreen\:margin-block-end-neg-15 {
      margin-block-end: var(--zbk-spacing-neg-15);
    }
    .widescreen\:margin-inline-start-neg-15 {
      margin-inline-start: var(--zbk-spacing-neg-15);
    }
    .widescreen\:margin-neg-10 {
      margin-inline: var(--zbk-spacing-neg-10);
    }
    .widescreen\:margin-block-neg-10,
    .widescreen\:margin-neg-10 {
      margin-block: var(--zbk-spacing-neg-10);
    }
    .widescreen\:margin-inline-neg-10 {
      margin-inline: var(--zbk-spacing-neg-10);
    }
    .widescreen\:margin-block-start-neg-10 {
      margin-block-start: var(--zbk-spacing-neg-10);
    }
    .widescreen\:margin-inline-end-neg-10 {
      margin-inline-end: var(--zbk-spacing-neg-10);
    }
    .widescreen\:margin-block-end-neg-10 {
      margin-block-end: var(--zbk-spacing-neg-10);
    }
    .widescreen\:margin-inline-start-neg-10 {
      margin-inline-start: var(--zbk-spacing-neg-10);
    }
    .widescreen\:margin-neg-9 {
      margin-inline: var(--zbk-spacing-neg-9);
    }
    .widescreen\:margin-block-neg-9,
    .widescreen\:margin-neg-9 {
      margin-block: var(--zbk-spacing-neg-9);
    }
    .widescreen\:margin-inline-neg-9 {
      margin-inline: var(--zbk-spacing-neg-9);
    }
    .widescreen\:margin-block-start-neg-9 {
      margin-block-start: var(--zbk-spacing-neg-9);
    }
    .widescreen\:margin-inline-end-neg-9 {
      margin-inline-end: var(--zbk-spacing-neg-9);
    }
    .widescreen\:margin-block-end-neg-9 {
      margin-block-end: var(--zbk-spacing-neg-9);
    }
    .widescreen\:margin-inline-start-neg-9 {
      margin-inline-start: var(--zbk-spacing-neg-9);
    }
    .widescreen\:margin-neg-8 {
      margin-inline: var(--zbk-spacing-neg-8);
    }
    .widescreen\:margin-block-neg-8,
    .widescreen\:margin-neg-8 {
      margin-block: var(--zbk-spacing-neg-8);
    }
    .widescreen\:margin-inline-neg-8 {
      margin-inline: var(--zbk-spacing-neg-8);
    }
    .widescreen\:margin-block-start-neg-8 {
      margin-block-start: var(--zbk-spacing-neg-8);
    }
    .widescreen\:margin-inline-end-neg-8 {
      margin-inline-end: var(--zbk-spacing-neg-8);
    }
    .widescreen\:margin-block-end-neg-8 {
      margin-block-end: var(--zbk-spacing-neg-8);
    }
    .widescreen\:margin-inline-start-neg-8 {
      margin-inline-start: var(--zbk-spacing-neg-8);
    }
    .widescreen\:margin-neg-7 {
      margin-inline: var(--zbk-spacing-neg-7);
    }
    .widescreen\:margin-block-neg-7,
    .widescreen\:margin-neg-7 {
      margin-block: var(--zbk-spacing-neg-7);
    }
    .widescreen\:margin-inline-neg-7 {
      margin-inline: var(--zbk-spacing-neg-7);
    }
    .widescreen\:margin-block-start-neg-7 {
      margin-block-start: var(--zbk-spacing-neg-7);
    }
    .widescreen\:margin-inline-end-neg-7 {
      margin-inline-end: var(--zbk-spacing-neg-7);
    }
    .widescreen\:margin-block-end-neg-7 {
      margin-block-end: var(--zbk-spacing-neg-7);
    }
    .widescreen\:margin-inline-start-neg-7 {
      margin-inline-start: var(--zbk-spacing-neg-7);
    }
    .widescreen\:margin-neg-6 {
      margin-inline: var(--zbk-spacing-neg-6);
    }
    .widescreen\:margin-block-neg-6,
    .widescreen\:margin-neg-6 {
      margin-block: var(--zbk-spacing-neg-6);
    }
    .widescreen\:margin-inline-neg-6 {
      margin-inline: var(--zbk-spacing-neg-6);
    }
    .widescreen\:margin-block-start-neg-6 {
      margin-block-start: var(--zbk-spacing-neg-6);
    }
    .widescreen\:margin-inline-end-neg-6 {
      margin-inline-end: var(--zbk-spacing-neg-6);
    }
    .widescreen\:margin-block-end-neg-6 {
      margin-block-end: var(--zbk-spacing-neg-6);
    }
    .widescreen\:margin-inline-start-neg-6 {
      margin-inline-start: var(--zbk-spacing-neg-6);
    }
    .widescreen\:margin-neg-5 {
      margin-inline: var(--zbk-spacing-neg-5);
    }
    .widescreen\:margin-block-neg-5,
    .widescreen\:margin-neg-5 {
      margin-block: var(--zbk-spacing-neg-5);
    }
    .widescreen\:margin-inline-neg-5 {
      margin-inline: var(--zbk-spacing-neg-5);
    }
    .widescreen\:margin-block-start-neg-5 {
      margin-block-start: var(--zbk-spacing-neg-5);
    }
    .widescreen\:margin-inline-end-neg-5 {
      margin-inline-end: var(--zbk-spacing-neg-5);
    }
    .widescreen\:margin-block-end-neg-5 {
      margin-block-end: var(--zbk-spacing-neg-5);
    }
    .widescreen\:margin-inline-start-neg-5 {
      margin-inline-start: var(--zbk-spacing-neg-5);
    }
    .widescreen\:margin-neg-4 {
      margin-inline: var(--zbk-spacing-neg-4);
    }
    .widescreen\:margin-block-neg-4,
    .widescreen\:margin-neg-4 {
      margin-block: var(--zbk-spacing-neg-4);
    }
    .widescreen\:margin-inline-neg-4 {
      margin-inline: var(--zbk-spacing-neg-4);
    }
    .widescreen\:margin-block-start-neg-4 {
      margin-block-start: var(--zbk-spacing-neg-4);
    }
    .widescreen\:margin-inline-end-neg-4 {
      margin-inline-end: var(--zbk-spacing-neg-4);
    }
    .widescreen\:margin-block-end-neg-4 {
      margin-block-end: var(--zbk-spacing-neg-4);
    }
    .widescreen\:margin-inline-start-neg-4 {
      margin-inline-start: var(--zbk-spacing-neg-4);
    }
    .widescreen\:margin-neg-3 {
      margin-inline: var(--zbk-spacing-neg-3);
    }
    .widescreen\:margin-block-neg-3,
    .widescreen\:margin-neg-3 {
      margin-block: var(--zbk-spacing-neg-3);
    }
    .widescreen\:margin-inline-neg-3 {
      margin-inline: var(--zbk-spacing-neg-3);
    }
    .widescreen\:margin-block-start-neg-3 {
      margin-block-start: var(--zbk-spacing-neg-3);
    }
    .widescreen\:margin-inline-end-neg-3 {
      margin-inline-end: var(--zbk-spacing-neg-3);
    }
    .widescreen\:margin-block-end-neg-3 {
      margin-block-end: var(--zbk-spacing-neg-3);
    }
    .widescreen\:margin-inline-start-neg-3 {
      margin-inline-start: var(--zbk-spacing-neg-3);
    }
    .widescreen\:margin-neg-205 {
      margin-inline: var(--zbk-spacing-neg-205);
    }
    .widescreen\:margin-block-neg-205,
    .widescreen\:margin-neg-205 {
      margin-block: var(--zbk-spacing-neg-205);
    }
    .widescreen\:margin-inline-neg-205 {
      margin-inline: var(--zbk-spacing-neg-205);
    }
    .widescreen\:margin-block-start-neg-205 {
      margin-block-start: var(--zbk-spacing-neg-205);
    }
    .widescreen\:margin-inline-end-neg-205 {
      margin-inline-end: var(--zbk-spacing-neg-205);
    }
    .widescreen\:margin-block-end-neg-205 {
      margin-block-end: var(--zbk-spacing-neg-205);
    }
    .widescreen\:margin-inline-start-neg-205 {
      margin-inline-start: var(--zbk-spacing-neg-205);
    }
    .widescreen\:margin-neg-2 {
      margin-inline: var(--zbk-spacing-neg-2);
    }
    .widescreen\:margin-block-neg-2,
    .widescreen\:margin-neg-2 {
      margin-block: var(--zbk-spacing-neg-2);
    }
    .widescreen\:margin-inline-neg-2 {
      margin-inline: var(--zbk-spacing-neg-2);
    }
    .widescreen\:margin-block-start-neg-2 {
      margin-block-start: var(--zbk-spacing-neg-2);
    }
    .widescreen\:margin-inline-end-neg-2 {
      margin-inline-end: var(--zbk-spacing-neg-2);
    }
    .widescreen\:margin-block-end-neg-2 {
      margin-block-end: var(--zbk-spacing-neg-2);
    }
    .widescreen\:margin-inline-start-neg-2 {
      margin-inline-start: var(--zbk-spacing-neg-2);
    }
    .widescreen\:margin-neg-105 {
      margin-inline: var(--zbk-spacing-neg-105);
    }
    .widescreen\:margin-block-neg-105,
    .widescreen\:margin-neg-105 {
      margin-block: var(--zbk-spacing-neg-105);
    }
    .widescreen\:margin-inline-neg-105 {
      margin-inline: var(--zbk-spacing-neg-105);
    }
    .widescreen\:margin-block-start-neg-105 {
      margin-block-start: var(--zbk-spacing-neg-105);
    }
    .widescreen\:margin-inline-end-neg-105 {
      margin-inline-end: var(--zbk-spacing-neg-105);
    }
    .widescreen\:margin-block-end-neg-105 {
      margin-block-end: var(--zbk-spacing-neg-105);
    }
    .widescreen\:margin-inline-start-neg-105 {
      margin-inline-start: var(--zbk-spacing-neg-105);
    }
    .widescreen\:margin-neg-1 {
      margin-inline: var(--zbk-spacing-neg-1);
    }
    .widescreen\:margin-block-neg-1,
    .widescreen\:margin-neg-1 {
      margin-block: var(--zbk-spacing-neg-1);
    }
    .widescreen\:margin-inline-neg-1 {
      margin-inline: var(--zbk-spacing-neg-1);
    }
    .widescreen\:margin-block-start-neg-1 {
      margin-block-start: var(--zbk-spacing-neg-1);
    }
    .widescreen\:margin-inline-end-neg-1 {
      margin-inline-end: var(--zbk-spacing-neg-1);
    }
    .widescreen\:margin-block-end-neg-1 {
      margin-block-end: var(--zbk-spacing-neg-1);
    }
    .widescreen\:margin-inline-start-neg-1 {
      margin-inline-start: var(--zbk-spacing-neg-1);
    }
    .widescreen\:margin-neg-05 {
      margin-inline: var(--zbk-spacing-neg-05);
    }
    .widescreen\:margin-block-neg-05,
    .widescreen\:margin-neg-05 {
      margin-block: var(--zbk-spacing-neg-05);
    }
    .widescreen\:margin-inline-neg-05 {
      margin-inline: var(--zbk-spacing-neg-05);
    }
    .widescreen\:margin-block-start-neg-05 {
      margin-block-start: var(--zbk-spacing-neg-05);
    }
    .widescreen\:margin-inline-end-neg-05 {
      margin-inline-end: var(--zbk-spacing-neg-05);
    }
    .widescreen\:margin-block-end-neg-05 {
      margin-block-end: var(--zbk-spacing-neg-05);
    }
    .widescreen\:margin-inline-start-neg-05 {
      margin-inline-start: var(--zbk-spacing-neg-05);
    }
    .widescreen\:margin-neg-025 {
      margin-inline: var(--zbk-spacing-neg-025);
    }
    .widescreen\:margin-block-neg-025,
    .widescreen\:margin-neg-025 {
      margin-block: var(--zbk-spacing-neg-025);
    }
    .widescreen\:margin-inline-neg-025 {
      margin-inline: var(--zbk-spacing-neg-025);
    }
    .widescreen\:margin-block-start-neg-025 {
      margin-block-start: var(--zbk-spacing-neg-025);
    }
    .widescreen\:margin-inline-end-neg-025 {
      margin-inline-end: var(--zbk-spacing-neg-025);
    }
    .widescreen\:margin-block-end-neg-025 {
      margin-block-end: var(--zbk-spacing-neg-025);
    }
    .widescreen\:margin-inline-start-neg-025 {
      margin-inline-start: var(--zbk-spacing-neg-025);
    }
    .widescreen\:margin-neg-2px {
      margin-inline: var(--zbk-spacing-neg-2px);
    }
    .widescreen\:margin-block-neg-2px,
    .widescreen\:margin-neg-2px {
      margin-block: var(--zbk-spacing-neg-2px);
    }
    .widescreen\:margin-inline-neg-2px {
      margin-inline: var(--zbk-spacing-neg-2px);
    }
    .widescreen\:margin-block-start-neg-2px {
      margin-block-start: var(--zbk-spacing-neg-2px);
    }
    .widescreen\:margin-inline-end-neg-2px {
      margin-inline-end: var(--zbk-spacing-neg-2px);
    }
    .widescreen\:margin-block-end-neg-2px {
      margin-block-end: var(--zbk-spacing-neg-2px);
    }
    .widescreen\:margin-inline-start-neg-2px {
      margin-inline-start: var(--zbk-spacing-neg-2px);
    }
    .widescreen\:margin-neg-1px {
      margin-inline: var(--zbk-spacing-neg-1px);
    }
    .widescreen\:margin-block-neg-1px,
    .widescreen\:margin-neg-1px {
      margin-block: var(--zbk-spacing-neg-1px);
    }
    .widescreen\:margin-inline-neg-1px {
      margin-inline: var(--zbk-spacing-neg-1px);
    }
    .widescreen\:margin-block-start-neg-1px {
      margin-block-start: var(--zbk-spacing-neg-1px);
    }
    .widescreen\:margin-inline-end-neg-1px {
      margin-inline-end: var(--zbk-spacing-neg-1px);
    }
    .widescreen\:margin-block-end-neg-1px {
      margin-block-end: var(--zbk-spacing-neg-1px);
    }
    .widescreen\:margin-inline-start-neg-1px {
      margin-inline-start: var(--zbk-spacing-neg-1px);
    }
    .widescreen\:margin-0 {
      margin-inline: var(--zbk-spacing-0);
    }
    .widescreen\:margin-0,
    .widescreen\:margin-block-0 {
      margin-block: var(--zbk-spacing-0);
    }
    .widescreen\:margin-inline-0 {
      margin-inline: var(--zbk-spacing-0);
    }
    .widescreen\:margin-block-start-0 {
      margin-block-start: var(--zbk-spacing-0);
    }
    .widescreen\:margin-inline-end-0 {
      margin-inline-end: var(--zbk-spacing-0);
    }
    .widescreen\:margin-block-end-0 {
      margin-block-end: var(--zbk-spacing-0);
    }
    .widescreen\:margin-inline-start-0 {
      margin-inline-start: var(--zbk-spacing-0);
    }
    .widescreen\:margin-1px {
      margin-inline: var(--zbk-spacing-1px);
    }
    .widescreen\:margin-1px,
    .widescreen\:margin-block-1px {
      margin-block: var(--zbk-spacing-1px);
    }
    .widescreen\:margin-inline-1px {
      margin-inline: var(--zbk-spacing-1px);
    }
    .widescreen\:margin-block-start-1px {
      margin-block-start: var(--zbk-spacing-1px);
    }
    .widescreen\:margin-inline-end-1px {
      margin-inline-end: var(--zbk-spacing-1px);
    }
    .widescreen\:margin-block-end-1px {
      margin-block-end: var(--zbk-spacing-1px);
    }
    .widescreen\:margin-inline-start-1px {
      margin-inline-start: var(--zbk-spacing-1px);
    }
    .widescreen\:margin-2px {
      margin-inline: var(--zbk-spacing-2px);
    }
    .widescreen\:margin-2px,
    .widescreen\:margin-block-2px {
      margin-block: var(--zbk-spacing-2px);
    }
    .widescreen\:margin-inline-2px {
      margin-inline: var(--zbk-spacing-2px);
    }
    .widescreen\:margin-block-start-2px {
      margin-block-start: var(--zbk-spacing-2px);
    }
    .widescreen\:margin-inline-end-2px {
      margin-inline-end: var(--zbk-spacing-2px);
    }
    .widescreen\:margin-block-end-2px {
      margin-block-end: var(--zbk-spacing-2px);
    }
    .widescreen\:margin-inline-start-2px {
      margin-inline-start: var(--zbk-spacing-2px);
    }
    .widescreen\:margin-025 {
      margin-inline: var(--zbk-spacing-025);
    }
    .widescreen\:margin-025,
    .widescreen\:margin-block-025 {
      margin-block: var(--zbk-spacing-025);
    }
    .widescreen\:margin-inline-025 {
      margin-inline: var(--zbk-spacing-025);
    }
    .widescreen\:margin-block-start-025 {
      margin-block-start: var(--zbk-spacing-025);
    }
    .widescreen\:margin-inline-end-025 {
      margin-inline-end: var(--zbk-spacing-025);
    }
    .widescreen\:margin-block-end-025 {
      margin-block-end: var(--zbk-spacing-025);
    }
    .widescreen\:margin-inline-start-025 {
      margin-inline-start: var(--zbk-spacing-025);
    }
    .widescreen\:margin-05 {
      margin-inline: var(--zbk-spacing-05);
    }
    .widescreen\:margin-05,
    .widescreen\:margin-block-05 {
      margin-block: var(--zbk-spacing-05);
    }
    .widescreen\:margin-inline-05 {
      margin-inline: var(--zbk-spacing-05);
    }
    .widescreen\:margin-block-start-05 {
      margin-block-start: var(--zbk-spacing-05);
    }
    .widescreen\:margin-inline-end-05 {
      margin-inline-end: var(--zbk-spacing-05);
    }
    .widescreen\:margin-block-end-05 {
      margin-block-end: var(--zbk-spacing-05);
    }
    .widescreen\:margin-inline-start-05 {
      margin-inline-start: var(--zbk-spacing-05);
    }
    .widescreen\:margin-1 {
      margin-inline: var(--zbk-spacing-1);
    }
    .widescreen\:margin-1,
    .widescreen\:margin-block-1 {
      margin-block: var(--zbk-spacing-1);
    }
    .widescreen\:margin-inline-1 {
      margin-inline: var(--zbk-spacing-1);
    }
    .widescreen\:margin-block-start-1 {
      margin-block-start: var(--zbk-spacing-1);
    }
    .widescreen\:margin-inline-end-1 {
      margin-inline-end: var(--zbk-spacing-1);
    }
    .widescreen\:margin-block-end-1 {
      margin-block-end: var(--zbk-spacing-1);
    }
    .widescreen\:margin-inline-start-1 {
      margin-inline-start: var(--zbk-spacing-1);
    }
    .widescreen\:margin-105 {
      margin-inline: var(--zbk-spacing-105);
    }
    .widescreen\:margin-105,
    .widescreen\:margin-block-105 {
      margin-block: var(--zbk-spacing-105);
    }
    .widescreen\:margin-inline-105 {
      margin-inline: var(--zbk-spacing-105);
    }
    .widescreen\:margin-block-start-105 {
      margin-block-start: var(--zbk-spacing-105);
    }
    .widescreen\:margin-inline-end-105 {
      margin-inline-end: var(--zbk-spacing-105);
    }
    .widescreen\:margin-block-end-105 {
      margin-block-end: var(--zbk-spacing-105);
    }
    .widescreen\:margin-inline-start-105 {
      margin-inline-start: var(--zbk-spacing-105);
    }
    .widescreen\:margin-2 {
      margin-inline: var(--zbk-spacing-2);
    }
    .widescreen\:margin-2,
    .widescreen\:margin-block-2 {
      margin-block: var(--zbk-spacing-2);
    }
    .widescreen\:margin-inline-2 {
      margin-inline: var(--zbk-spacing-2);
    }
    .widescreen\:margin-block-start-2 {
      margin-block-start: var(--zbk-spacing-2);
    }
    .widescreen\:margin-inline-end-2 {
      margin-inline-end: var(--zbk-spacing-2);
    }
    .widescreen\:margin-block-end-2 {
      margin-block-end: var(--zbk-spacing-2);
    }
    .widescreen\:margin-inline-start-2 {
      margin-inline-start: var(--zbk-spacing-2);
    }
    .widescreen\:margin-205 {
      margin-inline: var(--zbk-spacing-205);
    }
    .widescreen\:margin-205,
    .widescreen\:margin-block-205 {
      margin-block: var(--zbk-spacing-205);
    }
    .widescreen\:margin-inline-205 {
      margin-inline: var(--zbk-spacing-205);
    }
    .widescreen\:margin-block-start-205 {
      margin-block-start: var(--zbk-spacing-205);
    }
    .widescreen\:margin-inline-end-205 {
      margin-inline-end: var(--zbk-spacing-205);
    }
    .widescreen\:margin-block-end-205 {
      margin-block-end: var(--zbk-spacing-205);
    }
    .widescreen\:margin-inline-start-205 {
      margin-inline-start: var(--zbk-spacing-205);
    }
    .widescreen\:margin-3 {
      margin-inline: var(--zbk-spacing-3);
    }
    .widescreen\:margin-3,
    .widescreen\:margin-block-3 {
      margin-block: var(--zbk-spacing-3);
    }
    .widescreen\:margin-inline-3 {
      margin-inline: var(--zbk-spacing-3);
    }
    .widescreen\:margin-block-start-3 {
      margin-block-start: var(--zbk-spacing-3);
    }
    .widescreen\:margin-inline-end-3 {
      margin-inline-end: var(--zbk-spacing-3);
    }
    .widescreen\:margin-block-end-3 {
      margin-block-end: var(--zbk-spacing-3);
    }
    .widescreen\:margin-inline-start-3 {
      margin-inline-start: var(--zbk-spacing-3);
    }
    .widescreen\:margin-4 {
      margin-inline: var(--zbk-spacing-4);
    }
    .widescreen\:margin-4,
    .widescreen\:margin-block-4 {
      margin-block: var(--zbk-spacing-4);
    }
    .widescreen\:margin-inline-4 {
      margin-inline: var(--zbk-spacing-4);
    }
    .widescreen\:margin-block-start-4 {
      margin-block-start: var(--zbk-spacing-4);
    }
    .widescreen\:margin-inline-end-4 {
      margin-inline-end: var(--zbk-spacing-4);
    }
    .widescreen\:margin-block-end-4 {
      margin-block-end: var(--zbk-spacing-4);
    }
    .widescreen\:margin-inline-start-4 {
      margin-inline-start: var(--zbk-spacing-4);
    }
    .widescreen\:margin-5 {
      margin-inline: var(--zbk-spacing-5);
    }
    .widescreen\:margin-5,
    .widescreen\:margin-block-5 {
      margin-block: var(--zbk-spacing-5);
    }
    .widescreen\:margin-inline-5 {
      margin-inline: var(--zbk-spacing-5);
    }
    .widescreen\:margin-block-start-5 {
      margin-block-start: var(--zbk-spacing-5);
    }
    .widescreen\:margin-inline-end-5 {
      margin-inline-end: var(--zbk-spacing-5);
    }
    .widescreen\:margin-block-end-5 {
      margin-block-end: var(--zbk-spacing-5);
    }
    .widescreen\:margin-inline-start-5 {
      margin-inline-start: var(--zbk-spacing-5);
    }
    .widescreen\:margin-6 {
      margin-inline: var(--zbk-spacing-6);
    }
    .widescreen\:margin-6,
    .widescreen\:margin-block-6 {
      margin-block: var(--zbk-spacing-6);
    }
    .widescreen\:margin-inline-6 {
      margin-inline: var(--zbk-spacing-6);
    }
    .widescreen\:margin-block-start-6 {
      margin-block-start: var(--zbk-spacing-6);
    }
    .widescreen\:margin-inline-end-6 {
      margin-inline-end: var(--zbk-spacing-6);
    }
    .widescreen\:margin-block-end-6 {
      margin-block-end: var(--zbk-spacing-6);
    }
    .widescreen\:margin-inline-start-6 {
      margin-inline-start: var(--zbk-spacing-6);
    }
    .widescreen\:margin-7 {
      margin-inline: var(--zbk-spacing-7);
    }
    .widescreen\:margin-7,
    .widescreen\:margin-block-7 {
      margin-block: var(--zbk-spacing-7);
    }
    .widescreen\:margin-inline-7 {
      margin-inline: var(--zbk-spacing-7);
    }
    .widescreen\:margin-block-start-7 {
      margin-block-start: var(--zbk-spacing-7);
    }
    .widescreen\:margin-inline-end-7 {
      margin-inline-end: var(--zbk-spacing-7);
    }
    .widescreen\:margin-block-end-7 {
      margin-block-end: var(--zbk-spacing-7);
    }
    .widescreen\:margin-inline-start-7 {
      margin-inline-start: var(--zbk-spacing-7);
    }
    .widescreen\:margin-8 {
      margin-inline: var(--zbk-spacing-8);
    }
    .widescreen\:margin-8,
    .widescreen\:margin-block-8 {
      margin-block: var(--zbk-spacing-8);
    }
    .widescreen\:margin-inline-8 {
      margin-inline: var(--zbk-spacing-8);
    }
    .widescreen\:margin-block-start-8 {
      margin-block-start: var(--zbk-spacing-8);
    }
    .widescreen\:margin-inline-end-8 {
      margin-inline-end: var(--zbk-spacing-8);
    }
    .widescreen\:margin-block-end-8 {
      margin-block-end: var(--zbk-spacing-8);
    }
    .widescreen\:margin-inline-start-8 {
      margin-inline-start: var(--zbk-spacing-8);
    }
    .widescreen\:margin-9 {
      margin-inline: var(--zbk-spacing-9);
    }
    .widescreen\:margin-9,
    .widescreen\:margin-block-9 {
      margin-block: var(--zbk-spacing-9);
    }
    .widescreen\:margin-inline-9 {
      margin-inline: var(--zbk-spacing-9);
    }
    .widescreen\:margin-block-start-9 {
      margin-block-start: var(--zbk-spacing-9);
    }
    .widescreen\:margin-inline-end-9 {
      margin-inline-end: var(--zbk-spacing-9);
    }
    .widescreen\:margin-block-end-9 {
      margin-block-end: var(--zbk-spacing-9);
    }
    .widescreen\:margin-inline-start-9 {
      margin-inline-start: var(--zbk-spacing-9);
    }
    .widescreen\:margin-10 {
      margin-inline: var(--zbk-spacing-10);
    }
    .widescreen\:margin-10,
    .widescreen\:margin-block-10 {
      margin-block: var(--zbk-spacing-10);
    }
    .widescreen\:margin-inline-10 {
      margin-inline: var(--zbk-spacing-10);
    }
    .widescreen\:margin-block-start-10 {
      margin-block-start: var(--zbk-spacing-10);
    }
    .widescreen\:margin-inline-end-10 {
      margin-inline-end: var(--zbk-spacing-10);
    }
    .widescreen\:margin-block-end-10 {
      margin-block-end: var(--zbk-spacing-10);
    }
    .widescreen\:margin-inline-start-10 {
      margin-inline-start: var(--zbk-spacing-10);
    }
    .widescreen\:margin-15 {
      margin-inline: var(--zbk-spacing-15);
    }
    .widescreen\:margin-15,
    .widescreen\:margin-block-15 {
      margin-block: var(--zbk-spacing-15);
    }
    .widescreen\:margin-inline-15 {
      margin-inline: var(--zbk-spacing-15);
    }
    .widescreen\:margin-block-start-15 {
      margin-block-start: var(--zbk-spacing-15);
    }
    .widescreen\:margin-inline-end-15 {
      margin-inline-end: var(--zbk-spacing-15);
    }
    .widescreen\:margin-block-end-15 {
      margin-block-end: var(--zbk-spacing-15);
    }
    .widescreen\:margin-inline-start-15 {
      margin-inline-start: var(--zbk-spacing-15);
    }
    .widescreen\:margin-20 {
      margin-inline: var(--zbk-spacing-20);
    }
    .widescreen\:margin-20,
    .widescreen\:margin-block-20 {
      margin-block: var(--zbk-spacing-20);
    }
    .widescreen\:margin-inline-20 {
      margin-inline: var(--zbk-spacing-20);
    }
    .widescreen\:margin-block-start-20 {
      margin-block-start: var(--zbk-spacing-20);
    }
    .widescreen\:margin-inline-end-20 {
      margin-inline-end: var(--zbk-spacing-20);
    }
    .widescreen\:margin-block-end-20 {
      margin-block-end: var(--zbk-spacing-20);
    }
    .widescreen\:margin-inline-start-20 {
      margin-inline-start: var(--zbk-spacing-20);
    }
  }
  @media (min-width: 40rem) {
    .tablet\:padding-neg-15 {
      padding-inline: var(--zbk-spacing-neg-15);
    }
    .tablet\:padding-block-neg-15,
    .tablet\:padding-neg-15 {
      padding-block: var(--zbk-spacing-neg-15);
    }
    .tablet\:padding-inline-neg-15 {
      padding-inline: var(--zbk-spacing-neg-15);
    }
    .tablet\:padding-block-start-neg-15 {
      padding-block-start: var(--zbk-spacing-neg-15);
    }
    .tablet\:padding-inline-end-neg-15 {
      padding-inline-end: var(--zbk-spacing-neg-15);
    }
    .tablet\:padding-block-end-neg-15 {
      padding-block-end: var(--zbk-spacing-neg-15);
    }
    .tablet\:padding-inline-start-neg-15 {
      padding-inline-start: var(--zbk-spacing-neg-15);
    }
    .tablet\:padding-neg-10 {
      padding-inline: var(--zbk-spacing-neg-10);
    }
    .tablet\:padding-block-neg-10,
    .tablet\:padding-neg-10 {
      padding-block: var(--zbk-spacing-neg-10);
    }
    .tablet\:padding-inline-neg-10 {
      padding-inline: var(--zbk-spacing-neg-10);
    }
    .tablet\:padding-block-start-neg-10 {
      padding-block-start: var(--zbk-spacing-neg-10);
    }
    .tablet\:padding-inline-end-neg-10 {
      padding-inline-end: var(--zbk-spacing-neg-10);
    }
    .tablet\:padding-block-end-neg-10 {
      padding-block-end: var(--zbk-spacing-neg-10);
    }
    .tablet\:padding-inline-start-neg-10 {
      padding-inline-start: var(--zbk-spacing-neg-10);
    }
    .tablet\:padding-neg-9 {
      padding-inline: var(--zbk-spacing-neg-9);
    }
    .tablet\:padding-block-neg-9,
    .tablet\:padding-neg-9 {
      padding-block: var(--zbk-spacing-neg-9);
    }
    .tablet\:padding-inline-neg-9 {
      padding-inline: var(--zbk-spacing-neg-9);
    }
    .tablet\:padding-block-start-neg-9 {
      padding-block-start: var(--zbk-spacing-neg-9);
    }
    .tablet\:padding-inline-end-neg-9 {
      padding-inline-end: var(--zbk-spacing-neg-9);
    }
    .tablet\:padding-block-end-neg-9 {
      padding-block-end: var(--zbk-spacing-neg-9);
    }
    .tablet\:padding-inline-start-neg-9 {
      padding-inline-start: var(--zbk-spacing-neg-9);
    }
    .tablet\:padding-neg-8 {
      padding-inline: var(--zbk-spacing-neg-8);
    }
    .tablet\:padding-block-neg-8,
    .tablet\:padding-neg-8 {
      padding-block: var(--zbk-spacing-neg-8);
    }
    .tablet\:padding-inline-neg-8 {
      padding-inline: var(--zbk-spacing-neg-8);
    }
    .tablet\:padding-block-start-neg-8 {
      padding-block-start: var(--zbk-spacing-neg-8);
    }
    .tablet\:padding-inline-end-neg-8 {
      padding-inline-end: var(--zbk-spacing-neg-8);
    }
    .tablet\:padding-block-end-neg-8 {
      padding-block-end: var(--zbk-spacing-neg-8);
    }
    .tablet\:padding-inline-start-neg-8 {
      padding-inline-start: var(--zbk-spacing-neg-8);
    }
    .tablet\:padding-neg-7 {
      padding-inline: var(--zbk-spacing-neg-7);
    }
    .tablet\:padding-block-neg-7,
    .tablet\:padding-neg-7 {
      padding-block: var(--zbk-spacing-neg-7);
    }
    .tablet\:padding-inline-neg-7 {
      padding-inline: var(--zbk-spacing-neg-7);
    }
    .tablet\:padding-block-start-neg-7 {
      padding-block-start: var(--zbk-spacing-neg-7);
    }
    .tablet\:padding-inline-end-neg-7 {
      padding-inline-end: var(--zbk-spacing-neg-7);
    }
    .tablet\:padding-block-end-neg-7 {
      padding-block-end: var(--zbk-spacing-neg-7);
    }
    .tablet\:padding-inline-start-neg-7 {
      padding-inline-start: var(--zbk-spacing-neg-7);
    }
    .tablet\:padding-neg-6 {
      padding-inline: var(--zbk-spacing-neg-6);
    }
    .tablet\:padding-block-neg-6,
    .tablet\:padding-neg-6 {
      padding-block: var(--zbk-spacing-neg-6);
    }
    .tablet\:padding-inline-neg-6 {
      padding-inline: var(--zbk-spacing-neg-6);
    }
    .tablet\:padding-block-start-neg-6 {
      padding-block-start: var(--zbk-spacing-neg-6);
    }
    .tablet\:padding-inline-end-neg-6 {
      padding-inline-end: var(--zbk-spacing-neg-6);
    }
    .tablet\:padding-block-end-neg-6 {
      padding-block-end: var(--zbk-spacing-neg-6);
    }
    .tablet\:padding-inline-start-neg-6 {
      padding-inline-start: var(--zbk-spacing-neg-6);
    }
    .tablet\:padding-neg-5 {
      padding-inline: var(--zbk-spacing-neg-5);
    }
    .tablet\:padding-block-neg-5,
    .tablet\:padding-neg-5 {
      padding-block: var(--zbk-spacing-neg-5);
    }
    .tablet\:padding-inline-neg-5 {
      padding-inline: var(--zbk-spacing-neg-5);
    }
    .tablet\:padding-block-start-neg-5 {
      padding-block-start: var(--zbk-spacing-neg-5);
    }
    .tablet\:padding-inline-end-neg-5 {
      padding-inline-end: var(--zbk-spacing-neg-5);
    }
    .tablet\:padding-block-end-neg-5 {
      padding-block-end: var(--zbk-spacing-neg-5);
    }
    .tablet\:padding-inline-start-neg-5 {
      padding-inline-start: var(--zbk-spacing-neg-5);
    }
    .tablet\:padding-neg-4 {
      padding-inline: var(--zbk-spacing-neg-4);
    }
    .tablet\:padding-block-neg-4,
    .tablet\:padding-neg-4 {
      padding-block: var(--zbk-spacing-neg-4);
    }
    .tablet\:padding-inline-neg-4 {
      padding-inline: var(--zbk-spacing-neg-4);
    }
    .tablet\:padding-block-start-neg-4 {
      padding-block-start: var(--zbk-spacing-neg-4);
    }
    .tablet\:padding-inline-end-neg-4 {
      padding-inline-end: var(--zbk-spacing-neg-4);
    }
    .tablet\:padding-block-end-neg-4 {
      padding-block-end: var(--zbk-spacing-neg-4);
    }
    .tablet\:padding-inline-start-neg-4 {
      padding-inline-start: var(--zbk-spacing-neg-4);
    }
    .tablet\:padding-neg-3 {
      padding-inline: var(--zbk-spacing-neg-3);
    }
    .tablet\:padding-block-neg-3,
    .tablet\:padding-neg-3 {
      padding-block: var(--zbk-spacing-neg-3);
    }
    .tablet\:padding-inline-neg-3 {
      padding-inline: var(--zbk-spacing-neg-3);
    }
    .tablet\:padding-block-start-neg-3 {
      padding-block-start: var(--zbk-spacing-neg-3);
    }
    .tablet\:padding-inline-end-neg-3 {
      padding-inline-end: var(--zbk-spacing-neg-3);
    }
    .tablet\:padding-block-end-neg-3 {
      padding-block-end: var(--zbk-spacing-neg-3);
    }
    .tablet\:padding-inline-start-neg-3 {
      padding-inline-start: var(--zbk-spacing-neg-3);
    }
    .tablet\:padding-neg-205 {
      padding-inline: var(--zbk-spacing-neg-205);
    }
    .tablet\:padding-block-neg-205,
    .tablet\:padding-neg-205 {
      padding-block: var(--zbk-spacing-neg-205);
    }
    .tablet\:padding-inline-neg-205 {
      padding-inline: var(--zbk-spacing-neg-205);
    }
    .tablet\:padding-block-start-neg-205 {
      padding-block-start: var(--zbk-spacing-neg-205);
    }
    .tablet\:padding-inline-end-neg-205 {
      padding-inline-end: var(--zbk-spacing-neg-205);
    }
    .tablet\:padding-block-end-neg-205 {
      padding-block-end: var(--zbk-spacing-neg-205);
    }
    .tablet\:padding-inline-start-neg-205 {
      padding-inline-start: var(--zbk-spacing-neg-205);
    }
    .tablet\:padding-neg-2 {
      padding-inline: var(--zbk-spacing-neg-2);
    }
    .tablet\:padding-block-neg-2,
    .tablet\:padding-neg-2 {
      padding-block: var(--zbk-spacing-neg-2);
    }
    .tablet\:padding-inline-neg-2 {
      padding-inline: var(--zbk-spacing-neg-2);
    }
    .tablet\:padding-block-start-neg-2 {
      padding-block-start: var(--zbk-spacing-neg-2);
    }
    .tablet\:padding-inline-end-neg-2 {
      padding-inline-end: var(--zbk-spacing-neg-2);
    }
    .tablet\:padding-block-end-neg-2 {
      padding-block-end: var(--zbk-spacing-neg-2);
    }
    .tablet\:padding-inline-start-neg-2 {
      padding-inline-start: var(--zbk-spacing-neg-2);
    }
    .tablet\:padding-neg-105 {
      padding-inline: var(--zbk-spacing-neg-105);
    }
    .tablet\:padding-block-neg-105,
    .tablet\:padding-neg-105 {
      padding-block: var(--zbk-spacing-neg-105);
    }
    .tablet\:padding-inline-neg-105 {
      padding-inline: var(--zbk-spacing-neg-105);
    }
    .tablet\:padding-block-start-neg-105 {
      padding-block-start: var(--zbk-spacing-neg-105);
    }
    .tablet\:padding-inline-end-neg-105 {
      padding-inline-end: var(--zbk-spacing-neg-105);
    }
    .tablet\:padding-block-end-neg-105 {
      padding-block-end: var(--zbk-spacing-neg-105);
    }
    .tablet\:padding-inline-start-neg-105 {
      padding-inline-start: var(--zbk-spacing-neg-105);
    }
    .tablet\:padding-neg-1 {
      padding-inline: var(--zbk-spacing-neg-1);
    }
    .tablet\:padding-block-neg-1,
    .tablet\:padding-neg-1 {
      padding-block: var(--zbk-spacing-neg-1);
    }
    .tablet\:padding-inline-neg-1 {
      padding-inline: var(--zbk-spacing-neg-1);
    }
    .tablet\:padding-block-start-neg-1 {
      padding-block-start: var(--zbk-spacing-neg-1);
    }
    .tablet\:padding-inline-end-neg-1 {
      padding-inline-end: var(--zbk-spacing-neg-1);
    }
    .tablet\:padding-block-end-neg-1 {
      padding-block-end: var(--zbk-spacing-neg-1);
    }
    .tablet\:padding-inline-start-neg-1 {
      padding-inline-start: var(--zbk-spacing-neg-1);
    }
    .tablet\:padding-neg-05 {
      padding-inline: var(--zbk-spacing-neg-05);
    }
    .tablet\:padding-block-neg-05,
    .tablet\:padding-neg-05 {
      padding-block: var(--zbk-spacing-neg-05);
    }
    .tablet\:padding-inline-neg-05 {
      padding-inline: var(--zbk-spacing-neg-05);
    }
    .tablet\:padding-block-start-neg-05 {
      padding-block-start: var(--zbk-spacing-neg-05);
    }
    .tablet\:padding-inline-end-neg-05 {
      padding-inline-end: var(--zbk-spacing-neg-05);
    }
    .tablet\:padding-block-end-neg-05 {
      padding-block-end: var(--zbk-spacing-neg-05);
    }
    .tablet\:padding-inline-start-neg-05 {
      padding-inline-start: var(--zbk-spacing-neg-05);
    }
    .tablet\:padding-neg-025 {
      padding-inline: var(--zbk-spacing-neg-025);
    }
    .tablet\:padding-block-neg-025,
    .tablet\:padding-neg-025 {
      padding-block: var(--zbk-spacing-neg-025);
    }
    .tablet\:padding-inline-neg-025 {
      padding-inline: var(--zbk-spacing-neg-025);
    }
    .tablet\:padding-block-start-neg-025 {
      padding-block-start: var(--zbk-spacing-neg-025);
    }
    .tablet\:padding-inline-end-neg-025 {
      padding-inline-end: var(--zbk-spacing-neg-025);
    }
    .tablet\:padding-block-end-neg-025 {
      padding-block-end: var(--zbk-spacing-neg-025);
    }
    .tablet\:padding-inline-start-neg-025 {
      padding-inline-start: var(--zbk-spacing-neg-025);
    }
    .tablet\:padding-neg-2px {
      padding-inline: var(--zbk-spacing-neg-2px);
    }
    .tablet\:padding-block-neg-2px,
    .tablet\:padding-neg-2px {
      padding-block: var(--zbk-spacing-neg-2px);
    }
    .tablet\:padding-inline-neg-2px {
      padding-inline: var(--zbk-spacing-neg-2px);
    }
    .tablet\:padding-block-start-neg-2px {
      padding-block-start: var(--zbk-spacing-neg-2px);
    }
    .tablet\:padding-inline-end-neg-2px {
      padding-inline-end: var(--zbk-spacing-neg-2px);
    }
    .tablet\:padding-block-end-neg-2px {
      padding-block-end: var(--zbk-spacing-neg-2px);
    }
    .tablet\:padding-inline-start-neg-2px {
      padding-inline-start: var(--zbk-spacing-neg-2px);
    }
    .tablet\:padding-neg-1px {
      padding-inline: var(--zbk-spacing-neg-1px);
    }
    .tablet\:padding-block-neg-1px,
    .tablet\:padding-neg-1px {
      padding-block: var(--zbk-spacing-neg-1px);
    }
    .tablet\:padding-inline-neg-1px {
      padding-inline: var(--zbk-spacing-neg-1px);
    }
    .tablet\:padding-block-start-neg-1px {
      padding-block-start: var(--zbk-spacing-neg-1px);
    }
    .tablet\:padding-inline-end-neg-1px {
      padding-inline-end: var(--zbk-spacing-neg-1px);
    }
    .tablet\:padding-block-end-neg-1px {
      padding-block-end: var(--zbk-spacing-neg-1px);
    }
    .tablet\:padding-inline-start-neg-1px {
      padding-inline-start: var(--zbk-spacing-neg-1px);
    }
    .tablet\:padding-0 {
      padding-inline: var(--zbk-spacing-0);
    }
    .tablet\:padding-0,
    .tablet\:padding-block-0 {
      padding-block: var(--zbk-spacing-0);
    }
    .tablet\:padding-inline-0 {
      padding-inline: var(--zbk-spacing-0);
    }
    .tablet\:padding-block-start-0 {
      padding-block-start: var(--zbk-spacing-0);
    }
    .tablet\:padding-inline-end-0 {
      padding-inline-end: var(--zbk-spacing-0);
    }
    .tablet\:padding-block-end-0 {
      padding-block-end: var(--zbk-spacing-0);
    }
    .tablet\:padding-inline-start-0 {
      padding-inline-start: var(--zbk-spacing-0);
    }
    .tablet\:padding-1px {
      padding-inline: var(--zbk-spacing-1px);
    }
    .tablet\:padding-1px,
    .tablet\:padding-block-1px {
      padding-block: var(--zbk-spacing-1px);
    }
    .tablet\:padding-inline-1px {
      padding-inline: var(--zbk-spacing-1px);
    }
    .tablet\:padding-block-start-1px {
      padding-block-start: var(--zbk-spacing-1px);
    }
    .tablet\:padding-inline-end-1px {
      padding-inline-end: var(--zbk-spacing-1px);
    }
    .tablet\:padding-block-end-1px {
      padding-block-end: var(--zbk-spacing-1px);
    }
    .tablet\:padding-inline-start-1px {
      padding-inline-start: var(--zbk-spacing-1px);
    }
    .tablet\:padding-2px {
      padding-inline: var(--zbk-spacing-2px);
    }
    .tablet\:padding-2px,
    .tablet\:padding-block-2px {
      padding-block: var(--zbk-spacing-2px);
    }
    .tablet\:padding-inline-2px {
      padding-inline: var(--zbk-spacing-2px);
    }
    .tablet\:padding-block-start-2px {
      padding-block-start: var(--zbk-spacing-2px);
    }
    .tablet\:padding-inline-end-2px {
      padding-inline-end: var(--zbk-spacing-2px);
    }
    .tablet\:padding-block-end-2px {
      padding-block-end: var(--zbk-spacing-2px);
    }
    .tablet\:padding-inline-start-2px {
      padding-inline-start: var(--zbk-spacing-2px);
    }
    .tablet\:padding-025 {
      padding-inline: var(--zbk-spacing-025);
    }
    .tablet\:padding-025,
    .tablet\:padding-block-025 {
      padding-block: var(--zbk-spacing-025);
    }
    .tablet\:padding-inline-025 {
      padding-inline: var(--zbk-spacing-025);
    }
    .tablet\:padding-block-start-025 {
      padding-block-start: var(--zbk-spacing-025);
    }
    .tablet\:padding-inline-end-025 {
      padding-inline-end: var(--zbk-spacing-025);
    }
    .tablet\:padding-block-end-025 {
      padding-block-end: var(--zbk-spacing-025);
    }
    .tablet\:padding-inline-start-025 {
      padding-inline-start: var(--zbk-spacing-025);
    }
    .tablet\:padding-05 {
      padding-inline: var(--zbk-spacing-05);
    }
    .tablet\:padding-05,
    .tablet\:padding-block-05 {
      padding-block: var(--zbk-spacing-05);
    }
    .tablet\:padding-inline-05 {
      padding-inline: var(--zbk-spacing-05);
    }
    .tablet\:padding-block-start-05 {
      padding-block-start: var(--zbk-spacing-05);
    }
    .tablet\:padding-inline-end-05 {
      padding-inline-end: var(--zbk-spacing-05);
    }
    .tablet\:padding-block-end-05 {
      padding-block-end: var(--zbk-spacing-05);
    }
    .tablet\:padding-inline-start-05 {
      padding-inline-start: var(--zbk-spacing-05);
    }
    .tablet\:padding-1 {
      padding-inline: var(--zbk-spacing-1);
    }
    .tablet\:padding-1,
    .tablet\:padding-block-1 {
      padding-block: var(--zbk-spacing-1);
    }
    .tablet\:padding-inline-1 {
      padding-inline: var(--zbk-spacing-1);
    }
    .tablet\:padding-block-start-1 {
      padding-block-start: var(--zbk-spacing-1);
    }
    .tablet\:padding-inline-end-1 {
      padding-inline-end: var(--zbk-spacing-1);
    }
    .tablet\:padding-block-end-1 {
      padding-block-end: var(--zbk-spacing-1);
    }
    .tablet\:padding-inline-start-1 {
      padding-inline-start: var(--zbk-spacing-1);
    }
    .tablet\:padding-105 {
      padding-inline: var(--zbk-spacing-105);
    }
    .tablet\:padding-105,
    .tablet\:padding-block-105 {
      padding-block: var(--zbk-spacing-105);
    }
    .tablet\:padding-inline-105 {
      padding-inline: var(--zbk-spacing-105);
    }
    .tablet\:padding-block-start-105 {
      padding-block-start: var(--zbk-spacing-105);
    }
    .tablet\:padding-inline-end-105 {
      padding-inline-end: var(--zbk-spacing-105);
    }
    .tablet\:padding-block-end-105 {
      padding-block-end: var(--zbk-spacing-105);
    }
    .tablet\:padding-inline-start-105 {
      padding-inline-start: var(--zbk-spacing-105);
    }
    .tablet\:padding-2 {
      padding-inline: var(--zbk-spacing-2);
    }
    .tablet\:padding-2,
    .tablet\:padding-block-2 {
      padding-block: var(--zbk-spacing-2);
    }
    .tablet\:padding-inline-2 {
      padding-inline: var(--zbk-spacing-2);
    }
    .tablet\:padding-block-start-2 {
      padding-block-start: var(--zbk-spacing-2);
    }
    .tablet\:padding-inline-end-2 {
      padding-inline-end: var(--zbk-spacing-2);
    }
    .tablet\:padding-block-end-2 {
      padding-block-end: var(--zbk-spacing-2);
    }
    .tablet\:padding-inline-start-2 {
      padding-inline-start: var(--zbk-spacing-2);
    }
    .tablet\:padding-205 {
      padding-inline: var(--zbk-spacing-205);
    }
    .tablet\:padding-205,
    .tablet\:padding-block-205 {
      padding-block: var(--zbk-spacing-205);
    }
    .tablet\:padding-inline-205 {
      padding-inline: var(--zbk-spacing-205);
    }
    .tablet\:padding-block-start-205 {
      padding-block-start: var(--zbk-spacing-205);
    }
    .tablet\:padding-inline-end-205 {
      padding-inline-end: var(--zbk-spacing-205);
    }
    .tablet\:padding-block-end-205 {
      padding-block-end: var(--zbk-spacing-205);
    }
    .tablet\:padding-inline-start-205 {
      padding-inline-start: var(--zbk-spacing-205);
    }
    .tablet\:padding-3 {
      padding-inline: var(--zbk-spacing-3);
    }
    .tablet\:padding-3,
    .tablet\:padding-block-3 {
      padding-block: var(--zbk-spacing-3);
    }
    .tablet\:padding-inline-3 {
      padding-inline: var(--zbk-spacing-3);
    }
    .tablet\:padding-block-start-3 {
      padding-block-start: var(--zbk-spacing-3);
    }
    .tablet\:padding-inline-end-3 {
      padding-inline-end: var(--zbk-spacing-3);
    }
    .tablet\:padding-block-end-3 {
      padding-block-end: var(--zbk-spacing-3);
    }
    .tablet\:padding-inline-start-3 {
      padding-inline-start: var(--zbk-spacing-3);
    }
    .tablet\:padding-4 {
      padding-inline: var(--zbk-spacing-4);
    }
    .tablet\:padding-4,
    .tablet\:padding-block-4 {
      padding-block: var(--zbk-spacing-4);
    }
    .tablet\:padding-inline-4 {
      padding-inline: var(--zbk-spacing-4);
    }
    .tablet\:padding-block-start-4 {
      padding-block-start: var(--zbk-spacing-4);
    }
    .tablet\:padding-inline-end-4 {
      padding-inline-end: var(--zbk-spacing-4);
    }
    .tablet\:padding-block-end-4 {
      padding-block-end: var(--zbk-spacing-4);
    }
    .tablet\:padding-inline-start-4 {
      padding-inline-start: var(--zbk-spacing-4);
    }
    .tablet\:padding-5 {
      padding-inline: var(--zbk-spacing-5);
    }
    .tablet\:padding-5,
    .tablet\:padding-block-5 {
      padding-block: var(--zbk-spacing-5);
    }
    .tablet\:padding-inline-5 {
      padding-inline: var(--zbk-spacing-5);
    }
    .tablet\:padding-block-start-5 {
      padding-block-start: var(--zbk-spacing-5);
    }
    .tablet\:padding-inline-end-5 {
      padding-inline-end: var(--zbk-spacing-5);
    }
    .tablet\:padding-block-end-5 {
      padding-block-end: var(--zbk-spacing-5);
    }
    .tablet\:padding-inline-start-5 {
      padding-inline-start: var(--zbk-spacing-5);
    }
    .tablet\:padding-6 {
      padding-inline: var(--zbk-spacing-6);
    }
    .tablet\:padding-6,
    .tablet\:padding-block-6 {
      padding-block: var(--zbk-spacing-6);
    }
    .tablet\:padding-inline-6 {
      padding-inline: var(--zbk-spacing-6);
    }
    .tablet\:padding-block-start-6 {
      padding-block-start: var(--zbk-spacing-6);
    }
    .tablet\:padding-inline-end-6 {
      padding-inline-end: var(--zbk-spacing-6);
    }
    .tablet\:padding-block-end-6 {
      padding-block-end: var(--zbk-spacing-6);
    }
    .tablet\:padding-inline-start-6 {
      padding-inline-start: var(--zbk-spacing-6);
    }
    .tablet\:padding-7 {
      padding-inline: var(--zbk-spacing-7);
    }
    .tablet\:padding-7,
    .tablet\:padding-block-7 {
      padding-block: var(--zbk-spacing-7);
    }
    .tablet\:padding-inline-7 {
      padding-inline: var(--zbk-spacing-7);
    }
    .tablet\:padding-block-start-7 {
      padding-block-start: var(--zbk-spacing-7);
    }
    .tablet\:padding-inline-end-7 {
      padding-inline-end: var(--zbk-spacing-7);
    }
    .tablet\:padding-block-end-7 {
      padding-block-end: var(--zbk-spacing-7);
    }
    .tablet\:padding-inline-start-7 {
      padding-inline-start: var(--zbk-spacing-7);
    }
    .tablet\:padding-8 {
      padding-inline: var(--zbk-spacing-8);
    }
    .tablet\:padding-8,
    .tablet\:padding-block-8 {
      padding-block: var(--zbk-spacing-8);
    }
    .tablet\:padding-inline-8 {
      padding-inline: var(--zbk-spacing-8);
    }
    .tablet\:padding-block-start-8 {
      padding-block-start: var(--zbk-spacing-8);
    }
    .tablet\:padding-inline-end-8 {
      padding-inline-end: var(--zbk-spacing-8);
    }
    .tablet\:padding-block-end-8 {
      padding-block-end: var(--zbk-spacing-8);
    }
    .tablet\:padding-inline-start-8 {
      padding-inline-start: var(--zbk-spacing-8);
    }
    .tablet\:padding-9 {
      padding-inline: var(--zbk-spacing-9);
    }
    .tablet\:padding-9,
    .tablet\:padding-block-9 {
      padding-block: var(--zbk-spacing-9);
    }
    .tablet\:padding-inline-9 {
      padding-inline: var(--zbk-spacing-9);
    }
    .tablet\:padding-block-start-9 {
      padding-block-start: var(--zbk-spacing-9);
    }
    .tablet\:padding-inline-end-9 {
      padding-inline-end: var(--zbk-spacing-9);
    }
    .tablet\:padding-block-end-9 {
      padding-block-end: var(--zbk-spacing-9);
    }
    .tablet\:padding-inline-start-9 {
      padding-inline-start: var(--zbk-spacing-9);
    }
    .tablet\:padding-10 {
      padding-inline: var(--zbk-spacing-10);
    }
    .tablet\:padding-10,
    .tablet\:padding-block-10 {
      padding-block: var(--zbk-spacing-10);
    }
    .tablet\:padding-inline-10 {
      padding-inline: var(--zbk-spacing-10);
    }
    .tablet\:padding-block-start-10 {
      padding-block-start: var(--zbk-spacing-10);
    }
    .tablet\:padding-inline-end-10 {
      padding-inline-end: var(--zbk-spacing-10);
    }
    .tablet\:padding-block-end-10 {
      padding-block-end: var(--zbk-spacing-10);
    }
    .tablet\:padding-inline-start-10 {
      padding-inline-start: var(--zbk-spacing-10);
    }
    .tablet\:padding-15 {
      padding-inline: var(--zbk-spacing-15);
    }
    .tablet\:padding-15,
    .tablet\:padding-block-15 {
      padding-block: var(--zbk-spacing-15);
    }
    .tablet\:padding-inline-15 {
      padding-inline: var(--zbk-spacing-15);
    }
    .tablet\:padding-block-start-15 {
      padding-block-start: var(--zbk-spacing-15);
    }
    .tablet\:padding-inline-end-15 {
      padding-inline-end: var(--zbk-spacing-15);
    }
    .tablet\:padding-block-end-15 {
      padding-block-end: var(--zbk-spacing-15);
    }
    .tablet\:padding-inline-start-15 {
      padding-inline-start: var(--zbk-spacing-15);
    }
    .tablet\:padding-20 {
      padding-inline: var(--zbk-spacing-20);
    }
    .tablet\:padding-20,
    .tablet\:padding-block-20 {
      padding-block: var(--zbk-spacing-20);
    }
    .tablet\:padding-inline-20 {
      padding-inline: var(--zbk-spacing-20);
    }
    .tablet\:padding-block-start-20 {
      padding-block-start: var(--zbk-spacing-20);
    }
    .tablet\:padding-inline-end-20 {
      padding-inline-end: var(--zbk-spacing-20);
    }
    .tablet\:padding-block-end-20 {
      padding-block-end: var(--zbk-spacing-20);
    }
    .tablet\:padding-inline-start-20 {
      padding-inline-start: var(--zbk-spacing-20);
    }
  }
  @media (min-width: 50rem) {
    .tablet-lg\:padding-neg-15 {
      padding-inline: var(--zbk-spacing-neg-15);
    }
    .tablet-lg\:padding-block-neg-15,
    .tablet-lg\:padding-neg-15 {
      padding-block: var(--zbk-spacing-neg-15);
    }
    .tablet-lg\:padding-inline-neg-15 {
      padding-inline: var(--zbk-spacing-neg-15);
    }
    .tablet-lg\:padding-block-start-neg-15 {
      padding-block-start: var(--zbk-spacing-neg-15);
    }
    .tablet-lg\:padding-inline-end-neg-15 {
      padding-inline-end: var(--zbk-spacing-neg-15);
    }
    .tablet-lg\:padding-block-end-neg-15 {
      padding-block-end: var(--zbk-spacing-neg-15);
    }
    .tablet-lg\:padding-inline-start-neg-15 {
      padding-inline-start: var(--zbk-spacing-neg-15);
    }
    .tablet-lg\:padding-neg-10 {
      padding-inline: var(--zbk-spacing-neg-10);
    }
    .tablet-lg\:padding-block-neg-10,
    .tablet-lg\:padding-neg-10 {
      padding-block: var(--zbk-spacing-neg-10);
    }
    .tablet-lg\:padding-inline-neg-10 {
      padding-inline: var(--zbk-spacing-neg-10);
    }
    .tablet-lg\:padding-block-start-neg-10 {
      padding-block-start: var(--zbk-spacing-neg-10);
    }
    .tablet-lg\:padding-inline-end-neg-10 {
      padding-inline-end: var(--zbk-spacing-neg-10);
    }
    .tablet-lg\:padding-block-end-neg-10 {
      padding-block-end: var(--zbk-spacing-neg-10);
    }
    .tablet-lg\:padding-inline-start-neg-10 {
      padding-inline-start: var(--zbk-spacing-neg-10);
    }
    .tablet-lg\:padding-neg-9 {
      padding-inline: var(--zbk-spacing-neg-9);
    }
    .tablet-lg\:padding-block-neg-9,
    .tablet-lg\:padding-neg-9 {
      padding-block: var(--zbk-spacing-neg-9);
    }
    .tablet-lg\:padding-inline-neg-9 {
      padding-inline: var(--zbk-spacing-neg-9);
    }
    .tablet-lg\:padding-block-start-neg-9 {
      padding-block-start: var(--zbk-spacing-neg-9);
    }
    .tablet-lg\:padding-inline-end-neg-9 {
      padding-inline-end: var(--zbk-spacing-neg-9);
    }
    .tablet-lg\:padding-block-end-neg-9 {
      padding-block-end: var(--zbk-spacing-neg-9);
    }
    .tablet-lg\:padding-inline-start-neg-9 {
      padding-inline-start: var(--zbk-spacing-neg-9);
    }
    .tablet-lg\:padding-neg-8 {
      padding-inline: var(--zbk-spacing-neg-8);
    }
    .tablet-lg\:padding-block-neg-8,
    .tablet-lg\:padding-neg-8 {
      padding-block: var(--zbk-spacing-neg-8);
    }
    .tablet-lg\:padding-inline-neg-8 {
      padding-inline: var(--zbk-spacing-neg-8);
    }
    .tablet-lg\:padding-block-start-neg-8 {
      padding-block-start: var(--zbk-spacing-neg-8);
    }
    .tablet-lg\:padding-inline-end-neg-8 {
      padding-inline-end: var(--zbk-spacing-neg-8);
    }
    .tablet-lg\:padding-block-end-neg-8 {
      padding-block-end: var(--zbk-spacing-neg-8);
    }
    .tablet-lg\:padding-inline-start-neg-8 {
      padding-inline-start: var(--zbk-spacing-neg-8);
    }
    .tablet-lg\:padding-neg-7 {
      padding-inline: var(--zbk-spacing-neg-7);
    }
    .tablet-lg\:padding-block-neg-7,
    .tablet-lg\:padding-neg-7 {
      padding-block: var(--zbk-spacing-neg-7);
    }
    .tablet-lg\:padding-inline-neg-7 {
      padding-inline: var(--zbk-spacing-neg-7);
    }
    .tablet-lg\:padding-block-start-neg-7 {
      padding-block-start: var(--zbk-spacing-neg-7);
    }
    .tablet-lg\:padding-inline-end-neg-7 {
      padding-inline-end: var(--zbk-spacing-neg-7);
    }
    .tablet-lg\:padding-block-end-neg-7 {
      padding-block-end: var(--zbk-spacing-neg-7);
    }
    .tablet-lg\:padding-inline-start-neg-7 {
      padding-inline-start: var(--zbk-spacing-neg-7);
    }
    .tablet-lg\:padding-neg-6 {
      padding-inline: var(--zbk-spacing-neg-6);
    }
    .tablet-lg\:padding-block-neg-6,
    .tablet-lg\:padding-neg-6 {
      padding-block: var(--zbk-spacing-neg-6);
    }
    .tablet-lg\:padding-inline-neg-6 {
      padding-inline: var(--zbk-spacing-neg-6);
    }
    .tablet-lg\:padding-block-start-neg-6 {
      padding-block-start: var(--zbk-spacing-neg-6);
    }
    .tablet-lg\:padding-inline-end-neg-6 {
      padding-inline-end: var(--zbk-spacing-neg-6);
    }
    .tablet-lg\:padding-block-end-neg-6 {
      padding-block-end: var(--zbk-spacing-neg-6);
    }
    .tablet-lg\:padding-inline-start-neg-6 {
      padding-inline-start: var(--zbk-spacing-neg-6);
    }
    .tablet-lg\:padding-neg-5 {
      padding-inline: var(--zbk-spacing-neg-5);
    }
    .tablet-lg\:padding-block-neg-5,
    .tablet-lg\:padding-neg-5 {
      padding-block: var(--zbk-spacing-neg-5);
    }
    .tablet-lg\:padding-inline-neg-5 {
      padding-inline: var(--zbk-spacing-neg-5);
    }
    .tablet-lg\:padding-block-start-neg-5 {
      padding-block-start: var(--zbk-spacing-neg-5);
    }
    .tablet-lg\:padding-inline-end-neg-5 {
      padding-inline-end: var(--zbk-spacing-neg-5);
    }
    .tablet-lg\:padding-block-end-neg-5 {
      padding-block-end: var(--zbk-spacing-neg-5);
    }
    .tablet-lg\:padding-inline-start-neg-5 {
      padding-inline-start: var(--zbk-spacing-neg-5);
    }
    .tablet-lg\:padding-neg-4 {
      padding-inline: var(--zbk-spacing-neg-4);
    }
    .tablet-lg\:padding-block-neg-4,
    .tablet-lg\:padding-neg-4 {
      padding-block: var(--zbk-spacing-neg-4);
    }
    .tablet-lg\:padding-inline-neg-4 {
      padding-inline: var(--zbk-spacing-neg-4);
    }
    .tablet-lg\:padding-block-start-neg-4 {
      padding-block-start: var(--zbk-spacing-neg-4);
    }
    .tablet-lg\:padding-inline-end-neg-4 {
      padding-inline-end: var(--zbk-spacing-neg-4);
    }
    .tablet-lg\:padding-block-end-neg-4 {
      padding-block-end: var(--zbk-spacing-neg-4);
    }
    .tablet-lg\:padding-inline-start-neg-4 {
      padding-inline-start: var(--zbk-spacing-neg-4);
    }
    .tablet-lg\:padding-neg-3 {
      padding-inline: var(--zbk-spacing-neg-3);
    }
    .tablet-lg\:padding-block-neg-3,
    .tablet-lg\:padding-neg-3 {
      padding-block: var(--zbk-spacing-neg-3);
    }
    .tablet-lg\:padding-inline-neg-3 {
      padding-inline: var(--zbk-spacing-neg-3);
    }
    .tablet-lg\:padding-block-start-neg-3 {
      padding-block-start: var(--zbk-spacing-neg-3);
    }
    .tablet-lg\:padding-inline-end-neg-3 {
      padding-inline-end: var(--zbk-spacing-neg-3);
    }
    .tablet-lg\:padding-block-end-neg-3 {
      padding-block-end: var(--zbk-spacing-neg-3);
    }
    .tablet-lg\:padding-inline-start-neg-3 {
      padding-inline-start: var(--zbk-spacing-neg-3);
    }
    .tablet-lg\:padding-neg-205 {
      padding-inline: var(--zbk-spacing-neg-205);
    }
    .tablet-lg\:padding-block-neg-205,
    .tablet-lg\:padding-neg-205 {
      padding-block: var(--zbk-spacing-neg-205);
    }
    .tablet-lg\:padding-inline-neg-205 {
      padding-inline: var(--zbk-spacing-neg-205);
    }
    .tablet-lg\:padding-block-start-neg-205 {
      padding-block-start: var(--zbk-spacing-neg-205);
    }
    .tablet-lg\:padding-inline-end-neg-205 {
      padding-inline-end: var(--zbk-spacing-neg-205);
    }
    .tablet-lg\:padding-block-end-neg-205 {
      padding-block-end: var(--zbk-spacing-neg-205);
    }
    .tablet-lg\:padding-inline-start-neg-205 {
      padding-inline-start: var(--zbk-spacing-neg-205);
    }
    .tablet-lg\:padding-neg-2 {
      padding-inline: var(--zbk-spacing-neg-2);
    }
    .tablet-lg\:padding-block-neg-2,
    .tablet-lg\:padding-neg-2 {
      padding-block: var(--zbk-spacing-neg-2);
    }
    .tablet-lg\:padding-inline-neg-2 {
      padding-inline: var(--zbk-spacing-neg-2);
    }
    .tablet-lg\:padding-block-start-neg-2 {
      padding-block-start: var(--zbk-spacing-neg-2);
    }
    .tablet-lg\:padding-inline-end-neg-2 {
      padding-inline-end: var(--zbk-spacing-neg-2);
    }
    .tablet-lg\:padding-block-end-neg-2 {
      padding-block-end: var(--zbk-spacing-neg-2);
    }
    .tablet-lg\:padding-inline-start-neg-2 {
      padding-inline-start: var(--zbk-spacing-neg-2);
    }
    .tablet-lg\:padding-neg-105 {
      padding-inline: var(--zbk-spacing-neg-105);
    }
    .tablet-lg\:padding-block-neg-105,
    .tablet-lg\:padding-neg-105 {
      padding-block: var(--zbk-spacing-neg-105);
    }
    .tablet-lg\:padding-inline-neg-105 {
      padding-inline: var(--zbk-spacing-neg-105);
    }
    .tablet-lg\:padding-block-start-neg-105 {
      padding-block-start: var(--zbk-spacing-neg-105);
    }
    .tablet-lg\:padding-inline-end-neg-105 {
      padding-inline-end: var(--zbk-spacing-neg-105);
    }
    .tablet-lg\:padding-block-end-neg-105 {
      padding-block-end: var(--zbk-spacing-neg-105);
    }
    .tablet-lg\:padding-inline-start-neg-105 {
      padding-inline-start: var(--zbk-spacing-neg-105);
    }
    .tablet-lg\:padding-neg-1 {
      padding-inline: var(--zbk-spacing-neg-1);
    }
    .tablet-lg\:padding-block-neg-1,
    .tablet-lg\:padding-neg-1 {
      padding-block: var(--zbk-spacing-neg-1);
    }
    .tablet-lg\:padding-inline-neg-1 {
      padding-inline: var(--zbk-spacing-neg-1);
    }
    .tablet-lg\:padding-block-start-neg-1 {
      padding-block-start: var(--zbk-spacing-neg-1);
    }
    .tablet-lg\:padding-inline-end-neg-1 {
      padding-inline-end: var(--zbk-spacing-neg-1);
    }
    .tablet-lg\:padding-block-end-neg-1 {
      padding-block-end: var(--zbk-spacing-neg-1);
    }
    .tablet-lg\:padding-inline-start-neg-1 {
      padding-inline-start: var(--zbk-spacing-neg-1);
    }
    .tablet-lg\:padding-neg-05 {
      padding-inline: var(--zbk-spacing-neg-05);
    }
    .tablet-lg\:padding-block-neg-05,
    .tablet-lg\:padding-neg-05 {
      padding-block: var(--zbk-spacing-neg-05);
    }
    .tablet-lg\:padding-inline-neg-05 {
      padding-inline: var(--zbk-spacing-neg-05);
    }
    .tablet-lg\:padding-block-start-neg-05 {
      padding-block-start: var(--zbk-spacing-neg-05);
    }
    .tablet-lg\:padding-inline-end-neg-05 {
      padding-inline-end: var(--zbk-spacing-neg-05);
    }
    .tablet-lg\:padding-block-end-neg-05 {
      padding-block-end: var(--zbk-spacing-neg-05);
    }
    .tablet-lg\:padding-inline-start-neg-05 {
      padding-inline-start: var(--zbk-spacing-neg-05);
    }
    .tablet-lg\:padding-neg-025 {
      padding-inline: var(--zbk-spacing-neg-025);
    }
    .tablet-lg\:padding-block-neg-025,
    .tablet-lg\:padding-neg-025 {
      padding-block: var(--zbk-spacing-neg-025);
    }
    .tablet-lg\:padding-inline-neg-025 {
      padding-inline: var(--zbk-spacing-neg-025);
    }
    .tablet-lg\:padding-block-start-neg-025 {
      padding-block-start: var(--zbk-spacing-neg-025);
    }
    .tablet-lg\:padding-inline-end-neg-025 {
      padding-inline-end: var(--zbk-spacing-neg-025);
    }
    .tablet-lg\:padding-block-end-neg-025 {
      padding-block-end: var(--zbk-spacing-neg-025);
    }
    .tablet-lg\:padding-inline-start-neg-025 {
      padding-inline-start: var(--zbk-spacing-neg-025);
    }
    .tablet-lg\:padding-neg-2px {
      padding-inline: var(--zbk-spacing-neg-2px);
    }
    .tablet-lg\:padding-block-neg-2px,
    .tablet-lg\:padding-neg-2px {
      padding-block: var(--zbk-spacing-neg-2px);
    }
    .tablet-lg\:padding-inline-neg-2px {
      padding-inline: var(--zbk-spacing-neg-2px);
    }
    .tablet-lg\:padding-block-start-neg-2px {
      padding-block-start: var(--zbk-spacing-neg-2px);
    }
    .tablet-lg\:padding-inline-end-neg-2px {
      padding-inline-end: var(--zbk-spacing-neg-2px);
    }
    .tablet-lg\:padding-block-end-neg-2px {
      padding-block-end: var(--zbk-spacing-neg-2px);
    }
    .tablet-lg\:padding-inline-start-neg-2px {
      padding-inline-start: var(--zbk-spacing-neg-2px);
    }
    .tablet-lg\:padding-neg-1px {
      padding-inline: var(--zbk-spacing-neg-1px);
    }
    .tablet-lg\:padding-block-neg-1px,
    .tablet-lg\:padding-neg-1px {
      padding-block: var(--zbk-spacing-neg-1px);
    }
    .tablet-lg\:padding-inline-neg-1px {
      padding-inline: var(--zbk-spacing-neg-1px);
    }
    .tablet-lg\:padding-block-start-neg-1px {
      padding-block-start: var(--zbk-spacing-neg-1px);
    }
    .tablet-lg\:padding-inline-end-neg-1px {
      padding-inline-end: var(--zbk-spacing-neg-1px);
    }
    .tablet-lg\:padding-block-end-neg-1px {
      padding-block-end: var(--zbk-spacing-neg-1px);
    }
    .tablet-lg\:padding-inline-start-neg-1px {
      padding-inline-start: var(--zbk-spacing-neg-1px);
    }
    .tablet-lg\:padding-0 {
      padding-inline: var(--zbk-spacing-0);
    }
    .tablet-lg\:padding-0,
    .tablet-lg\:padding-block-0 {
      padding-block: var(--zbk-spacing-0);
    }
    .tablet-lg\:padding-inline-0 {
      padding-inline: var(--zbk-spacing-0);
    }
    .tablet-lg\:padding-block-start-0 {
      padding-block-start: var(--zbk-spacing-0);
    }
    .tablet-lg\:padding-inline-end-0 {
      padding-inline-end: var(--zbk-spacing-0);
    }
    .tablet-lg\:padding-block-end-0 {
      padding-block-end: var(--zbk-spacing-0);
    }
    .tablet-lg\:padding-inline-start-0 {
      padding-inline-start: var(--zbk-spacing-0);
    }
    .tablet-lg\:padding-1px {
      padding-inline: var(--zbk-spacing-1px);
    }
    .tablet-lg\:padding-1px,
    .tablet-lg\:padding-block-1px {
      padding-block: var(--zbk-spacing-1px);
    }
    .tablet-lg\:padding-inline-1px {
      padding-inline: var(--zbk-spacing-1px);
    }
    .tablet-lg\:padding-block-start-1px {
      padding-block-start: var(--zbk-spacing-1px);
    }
    .tablet-lg\:padding-inline-end-1px {
      padding-inline-end: var(--zbk-spacing-1px);
    }
    .tablet-lg\:padding-block-end-1px {
      padding-block-end: var(--zbk-spacing-1px);
    }
    .tablet-lg\:padding-inline-start-1px {
      padding-inline-start: var(--zbk-spacing-1px);
    }
    .tablet-lg\:padding-2px {
      padding-inline: var(--zbk-spacing-2px);
    }
    .tablet-lg\:padding-2px,
    .tablet-lg\:padding-block-2px {
      padding-block: var(--zbk-spacing-2px);
    }
    .tablet-lg\:padding-inline-2px {
      padding-inline: var(--zbk-spacing-2px);
    }
    .tablet-lg\:padding-block-start-2px {
      padding-block-start: var(--zbk-spacing-2px);
    }
    .tablet-lg\:padding-inline-end-2px {
      padding-inline-end: var(--zbk-spacing-2px);
    }
    .tablet-lg\:padding-block-end-2px {
      padding-block-end: var(--zbk-spacing-2px);
    }
    .tablet-lg\:padding-inline-start-2px {
      padding-inline-start: var(--zbk-spacing-2px);
    }
    .tablet-lg\:padding-025 {
      padding-inline: var(--zbk-spacing-025);
    }
    .tablet-lg\:padding-025,
    .tablet-lg\:padding-block-025 {
      padding-block: var(--zbk-spacing-025);
    }
    .tablet-lg\:padding-inline-025 {
      padding-inline: var(--zbk-spacing-025);
    }
    .tablet-lg\:padding-block-start-025 {
      padding-block-start: var(--zbk-spacing-025);
    }
    .tablet-lg\:padding-inline-end-025 {
      padding-inline-end: var(--zbk-spacing-025);
    }
    .tablet-lg\:padding-block-end-025 {
      padding-block-end: var(--zbk-spacing-025);
    }
    .tablet-lg\:padding-inline-start-025 {
      padding-inline-start: var(--zbk-spacing-025);
    }
    .tablet-lg\:padding-05 {
      padding-inline: var(--zbk-spacing-05);
    }
    .tablet-lg\:padding-05,
    .tablet-lg\:padding-block-05 {
      padding-block: var(--zbk-spacing-05);
    }
    .tablet-lg\:padding-inline-05 {
      padding-inline: var(--zbk-spacing-05);
    }
    .tablet-lg\:padding-block-start-05 {
      padding-block-start: var(--zbk-spacing-05);
    }
    .tablet-lg\:padding-inline-end-05 {
      padding-inline-end: var(--zbk-spacing-05);
    }
    .tablet-lg\:padding-block-end-05 {
      padding-block-end: var(--zbk-spacing-05);
    }
    .tablet-lg\:padding-inline-start-05 {
      padding-inline-start: var(--zbk-spacing-05);
    }
    .tablet-lg\:padding-1 {
      padding-inline: var(--zbk-spacing-1);
    }
    .tablet-lg\:padding-1,
    .tablet-lg\:padding-block-1 {
      padding-block: var(--zbk-spacing-1);
    }
    .tablet-lg\:padding-inline-1 {
      padding-inline: var(--zbk-spacing-1);
    }
    .tablet-lg\:padding-block-start-1 {
      padding-block-start: var(--zbk-spacing-1);
    }
    .tablet-lg\:padding-inline-end-1 {
      padding-inline-end: var(--zbk-spacing-1);
    }
    .tablet-lg\:padding-block-end-1 {
      padding-block-end: var(--zbk-spacing-1);
    }
    .tablet-lg\:padding-inline-start-1 {
      padding-inline-start: var(--zbk-spacing-1);
    }
    .tablet-lg\:padding-105 {
      padding-inline: var(--zbk-spacing-105);
    }
    .tablet-lg\:padding-105,
    .tablet-lg\:padding-block-105 {
      padding-block: var(--zbk-spacing-105);
    }
    .tablet-lg\:padding-inline-105 {
      padding-inline: var(--zbk-spacing-105);
    }
    .tablet-lg\:padding-block-start-105 {
      padding-block-start: var(--zbk-spacing-105);
    }
    .tablet-lg\:padding-inline-end-105 {
      padding-inline-end: var(--zbk-spacing-105);
    }
    .tablet-lg\:padding-block-end-105 {
      padding-block-end: var(--zbk-spacing-105);
    }
    .tablet-lg\:padding-inline-start-105 {
      padding-inline-start: var(--zbk-spacing-105);
    }
    .tablet-lg\:padding-2 {
      padding-inline: var(--zbk-spacing-2);
    }
    .tablet-lg\:padding-2,
    .tablet-lg\:padding-block-2 {
      padding-block: var(--zbk-spacing-2);
    }
    .tablet-lg\:padding-inline-2 {
      padding-inline: var(--zbk-spacing-2);
    }
    .tablet-lg\:padding-block-start-2 {
      padding-block-start: var(--zbk-spacing-2);
    }
    .tablet-lg\:padding-inline-end-2 {
      padding-inline-end: var(--zbk-spacing-2);
    }
    .tablet-lg\:padding-block-end-2 {
      padding-block-end: var(--zbk-spacing-2);
    }
    .tablet-lg\:padding-inline-start-2 {
      padding-inline-start: var(--zbk-spacing-2);
    }
    .tablet-lg\:padding-205 {
      padding-inline: var(--zbk-spacing-205);
    }
    .tablet-lg\:padding-205,
    .tablet-lg\:padding-block-205 {
      padding-block: var(--zbk-spacing-205);
    }
    .tablet-lg\:padding-inline-205 {
      padding-inline: var(--zbk-spacing-205);
    }
    .tablet-lg\:padding-block-start-205 {
      padding-block-start: var(--zbk-spacing-205);
    }
    .tablet-lg\:padding-inline-end-205 {
      padding-inline-end: var(--zbk-spacing-205);
    }
    .tablet-lg\:padding-block-end-205 {
      padding-block-end: var(--zbk-spacing-205);
    }
    .tablet-lg\:padding-inline-start-205 {
      padding-inline-start: var(--zbk-spacing-205);
    }
    .tablet-lg\:padding-3 {
      padding-inline: var(--zbk-spacing-3);
    }
    .tablet-lg\:padding-3,
    .tablet-lg\:padding-block-3 {
      padding-block: var(--zbk-spacing-3);
    }
    .tablet-lg\:padding-inline-3 {
      padding-inline: var(--zbk-spacing-3);
    }
    .tablet-lg\:padding-block-start-3 {
      padding-block-start: var(--zbk-spacing-3);
    }
    .tablet-lg\:padding-inline-end-3 {
      padding-inline-end: var(--zbk-spacing-3);
    }
    .tablet-lg\:padding-block-end-3 {
      padding-block-end: var(--zbk-spacing-3);
    }
    .tablet-lg\:padding-inline-start-3 {
      padding-inline-start: var(--zbk-spacing-3);
    }
    .tablet-lg\:padding-4 {
      padding-inline: var(--zbk-spacing-4);
    }
    .tablet-lg\:padding-4,
    .tablet-lg\:padding-block-4 {
      padding-block: var(--zbk-spacing-4);
    }
    .tablet-lg\:padding-inline-4 {
      padding-inline: var(--zbk-spacing-4);
    }
    .tablet-lg\:padding-block-start-4 {
      padding-block-start: var(--zbk-spacing-4);
    }
    .tablet-lg\:padding-inline-end-4 {
      padding-inline-end: var(--zbk-spacing-4);
    }
    .tablet-lg\:padding-block-end-4 {
      padding-block-end: var(--zbk-spacing-4);
    }
    .tablet-lg\:padding-inline-start-4 {
      padding-inline-start: var(--zbk-spacing-4);
    }
    .tablet-lg\:padding-5 {
      padding-inline: var(--zbk-spacing-5);
    }
    .tablet-lg\:padding-5,
    .tablet-lg\:padding-block-5 {
      padding-block: var(--zbk-spacing-5);
    }
    .tablet-lg\:padding-inline-5 {
      padding-inline: var(--zbk-spacing-5);
    }
    .tablet-lg\:padding-block-start-5 {
      padding-block-start: var(--zbk-spacing-5);
    }
    .tablet-lg\:padding-inline-end-5 {
      padding-inline-end: var(--zbk-spacing-5);
    }
    .tablet-lg\:padding-block-end-5 {
      padding-block-end: var(--zbk-spacing-5);
    }
    .tablet-lg\:padding-inline-start-5 {
      padding-inline-start: var(--zbk-spacing-5);
    }
    .tablet-lg\:padding-6 {
      padding-inline: var(--zbk-spacing-6);
    }
    .tablet-lg\:padding-6,
    .tablet-lg\:padding-block-6 {
      padding-block: var(--zbk-spacing-6);
    }
    .tablet-lg\:padding-inline-6 {
      padding-inline: var(--zbk-spacing-6);
    }
    .tablet-lg\:padding-block-start-6 {
      padding-block-start: var(--zbk-spacing-6);
    }
    .tablet-lg\:padding-inline-end-6 {
      padding-inline-end: var(--zbk-spacing-6);
    }
    .tablet-lg\:padding-block-end-6 {
      padding-block-end: var(--zbk-spacing-6);
    }
    .tablet-lg\:padding-inline-start-6 {
      padding-inline-start: var(--zbk-spacing-6);
    }
    .tablet-lg\:padding-7 {
      padding-inline: var(--zbk-spacing-7);
    }
    .tablet-lg\:padding-7,
    .tablet-lg\:padding-block-7 {
      padding-block: var(--zbk-spacing-7);
    }
    .tablet-lg\:padding-inline-7 {
      padding-inline: var(--zbk-spacing-7);
    }
    .tablet-lg\:padding-block-start-7 {
      padding-block-start: var(--zbk-spacing-7);
    }
    .tablet-lg\:padding-inline-end-7 {
      padding-inline-end: var(--zbk-spacing-7);
    }
    .tablet-lg\:padding-block-end-7 {
      padding-block-end: var(--zbk-spacing-7);
    }
    .tablet-lg\:padding-inline-start-7 {
      padding-inline-start: var(--zbk-spacing-7);
    }
    .tablet-lg\:padding-8 {
      padding-inline: var(--zbk-spacing-8);
    }
    .tablet-lg\:padding-8,
    .tablet-lg\:padding-block-8 {
      padding-block: var(--zbk-spacing-8);
    }
    .tablet-lg\:padding-inline-8 {
      padding-inline: var(--zbk-spacing-8);
    }
    .tablet-lg\:padding-block-start-8 {
      padding-block-start: var(--zbk-spacing-8);
    }
    .tablet-lg\:padding-inline-end-8 {
      padding-inline-end: var(--zbk-spacing-8);
    }
    .tablet-lg\:padding-block-end-8 {
      padding-block-end: var(--zbk-spacing-8);
    }
    .tablet-lg\:padding-inline-start-8 {
      padding-inline-start: var(--zbk-spacing-8);
    }
    .tablet-lg\:padding-9 {
      padding-inline: var(--zbk-spacing-9);
    }
    .tablet-lg\:padding-9,
    .tablet-lg\:padding-block-9 {
      padding-block: var(--zbk-spacing-9);
    }
    .tablet-lg\:padding-inline-9 {
      padding-inline: var(--zbk-spacing-9);
    }
    .tablet-lg\:padding-block-start-9 {
      padding-block-start: var(--zbk-spacing-9);
    }
    .tablet-lg\:padding-inline-end-9 {
      padding-inline-end: var(--zbk-spacing-9);
    }
    .tablet-lg\:padding-block-end-9 {
      padding-block-end: var(--zbk-spacing-9);
    }
    .tablet-lg\:padding-inline-start-9 {
      padding-inline-start: var(--zbk-spacing-9);
    }
    .tablet-lg\:padding-10 {
      padding-inline: var(--zbk-spacing-10);
    }
    .tablet-lg\:padding-10,
    .tablet-lg\:padding-block-10 {
      padding-block: var(--zbk-spacing-10);
    }
    .tablet-lg\:padding-inline-10 {
      padding-inline: var(--zbk-spacing-10);
    }
    .tablet-lg\:padding-block-start-10 {
      padding-block-start: var(--zbk-spacing-10);
    }
    .tablet-lg\:padding-inline-end-10 {
      padding-inline-end: var(--zbk-spacing-10);
    }
    .tablet-lg\:padding-block-end-10 {
      padding-block-end: var(--zbk-spacing-10);
    }
    .tablet-lg\:padding-inline-start-10 {
      padding-inline-start: var(--zbk-spacing-10);
    }
    .tablet-lg\:padding-15 {
      padding-inline: var(--zbk-spacing-15);
    }
    .tablet-lg\:padding-15,
    .tablet-lg\:padding-block-15 {
      padding-block: var(--zbk-spacing-15);
    }
    .tablet-lg\:padding-inline-15 {
      padding-inline: var(--zbk-spacing-15);
    }
    .tablet-lg\:padding-block-start-15 {
      padding-block-start: var(--zbk-spacing-15);
    }
    .tablet-lg\:padding-inline-end-15 {
      padding-inline-end: var(--zbk-spacing-15);
    }
    .tablet-lg\:padding-block-end-15 {
      padding-block-end: var(--zbk-spacing-15);
    }
    .tablet-lg\:padding-inline-start-15 {
      padding-inline-start: var(--zbk-spacing-15);
    }
    .tablet-lg\:padding-20 {
      padding-inline: var(--zbk-spacing-20);
    }
    .tablet-lg\:padding-20,
    .tablet-lg\:padding-block-20 {
      padding-block: var(--zbk-spacing-20);
    }
    .tablet-lg\:padding-inline-20 {
      padding-inline: var(--zbk-spacing-20);
    }
    .tablet-lg\:padding-block-start-20 {
      padding-block-start: var(--zbk-spacing-20);
    }
    .tablet-lg\:padding-inline-end-20 {
      padding-inline-end: var(--zbk-spacing-20);
    }
    .tablet-lg\:padding-block-end-20 {
      padding-block-end: var(--zbk-spacing-20);
    }
    .tablet-lg\:padding-inline-start-20 {
      padding-inline-start: var(--zbk-spacing-20);
    }
  }
  @media (min-width: 70rem) {
    .desktop\:padding-neg-15 {
      padding-inline: var(--zbk-spacing-neg-15);
    }
    .desktop\:padding-block-neg-15,
    .desktop\:padding-neg-15 {
      padding-block: var(--zbk-spacing-neg-15);
    }
    .desktop\:padding-inline-neg-15 {
      padding-inline: var(--zbk-spacing-neg-15);
    }
    .desktop\:padding-block-start-neg-15 {
      padding-block-start: var(--zbk-spacing-neg-15);
    }
    .desktop\:padding-inline-end-neg-15 {
      padding-inline-end: var(--zbk-spacing-neg-15);
    }
    .desktop\:padding-block-end-neg-15 {
      padding-block-end: var(--zbk-spacing-neg-15);
    }
    .desktop\:padding-inline-start-neg-15 {
      padding-inline-start: var(--zbk-spacing-neg-15);
    }
    .desktop\:padding-neg-10 {
      padding-inline: var(--zbk-spacing-neg-10);
    }
    .desktop\:padding-block-neg-10,
    .desktop\:padding-neg-10 {
      padding-block: var(--zbk-spacing-neg-10);
    }
    .desktop\:padding-inline-neg-10 {
      padding-inline: var(--zbk-spacing-neg-10);
    }
    .desktop\:padding-block-start-neg-10 {
      padding-block-start: var(--zbk-spacing-neg-10);
    }
    .desktop\:padding-inline-end-neg-10 {
      padding-inline-end: var(--zbk-spacing-neg-10);
    }
    .desktop\:padding-block-end-neg-10 {
      padding-block-end: var(--zbk-spacing-neg-10);
    }
    .desktop\:padding-inline-start-neg-10 {
      padding-inline-start: var(--zbk-spacing-neg-10);
    }
    .desktop\:padding-neg-9 {
      padding-inline: var(--zbk-spacing-neg-9);
    }
    .desktop\:padding-block-neg-9,
    .desktop\:padding-neg-9 {
      padding-block: var(--zbk-spacing-neg-9);
    }
    .desktop\:padding-inline-neg-9 {
      padding-inline: var(--zbk-spacing-neg-9);
    }
    .desktop\:padding-block-start-neg-9 {
      padding-block-start: var(--zbk-spacing-neg-9);
    }
    .desktop\:padding-inline-end-neg-9 {
      padding-inline-end: var(--zbk-spacing-neg-9);
    }
    .desktop\:padding-block-end-neg-9 {
      padding-block-end: var(--zbk-spacing-neg-9);
    }
    .desktop\:padding-inline-start-neg-9 {
      padding-inline-start: var(--zbk-spacing-neg-9);
    }
    .desktop\:padding-neg-8 {
      padding-inline: var(--zbk-spacing-neg-8);
    }
    .desktop\:padding-block-neg-8,
    .desktop\:padding-neg-8 {
      padding-block: var(--zbk-spacing-neg-8);
    }
    .desktop\:padding-inline-neg-8 {
      padding-inline: var(--zbk-spacing-neg-8);
    }
    .desktop\:padding-block-start-neg-8 {
      padding-block-start: var(--zbk-spacing-neg-8);
    }
    .desktop\:padding-inline-end-neg-8 {
      padding-inline-end: var(--zbk-spacing-neg-8);
    }
    .desktop\:padding-block-end-neg-8 {
      padding-block-end: var(--zbk-spacing-neg-8);
    }
    .desktop\:padding-inline-start-neg-8 {
      padding-inline-start: var(--zbk-spacing-neg-8);
    }
    .desktop\:padding-neg-7 {
      padding-inline: var(--zbk-spacing-neg-7);
    }
    .desktop\:padding-block-neg-7,
    .desktop\:padding-neg-7 {
      padding-block: var(--zbk-spacing-neg-7);
    }
    .desktop\:padding-inline-neg-7 {
      padding-inline: var(--zbk-spacing-neg-7);
    }
    .desktop\:padding-block-start-neg-7 {
      padding-block-start: var(--zbk-spacing-neg-7);
    }
    .desktop\:padding-inline-end-neg-7 {
      padding-inline-end: var(--zbk-spacing-neg-7);
    }
    .desktop\:padding-block-end-neg-7 {
      padding-block-end: var(--zbk-spacing-neg-7);
    }
    .desktop\:padding-inline-start-neg-7 {
      padding-inline-start: var(--zbk-spacing-neg-7);
    }
    .desktop\:padding-neg-6 {
      padding-inline: var(--zbk-spacing-neg-6);
    }
    .desktop\:padding-block-neg-6,
    .desktop\:padding-neg-6 {
      padding-block: var(--zbk-spacing-neg-6);
    }
    .desktop\:padding-inline-neg-6 {
      padding-inline: var(--zbk-spacing-neg-6);
    }
    .desktop\:padding-block-start-neg-6 {
      padding-block-start: var(--zbk-spacing-neg-6);
    }
    .desktop\:padding-inline-end-neg-6 {
      padding-inline-end: var(--zbk-spacing-neg-6);
    }
    .desktop\:padding-block-end-neg-6 {
      padding-block-end: var(--zbk-spacing-neg-6);
    }
    .desktop\:padding-inline-start-neg-6 {
      padding-inline-start: var(--zbk-spacing-neg-6);
    }
    .desktop\:padding-neg-5 {
      padding-inline: var(--zbk-spacing-neg-5);
    }
    .desktop\:padding-block-neg-5,
    .desktop\:padding-neg-5 {
      padding-block: var(--zbk-spacing-neg-5);
    }
    .desktop\:padding-inline-neg-5 {
      padding-inline: var(--zbk-spacing-neg-5);
    }
    .desktop\:padding-block-start-neg-5 {
      padding-block-start: var(--zbk-spacing-neg-5);
    }
    .desktop\:padding-inline-end-neg-5 {
      padding-inline-end: var(--zbk-spacing-neg-5);
    }
    .desktop\:padding-block-end-neg-5 {
      padding-block-end: var(--zbk-spacing-neg-5);
    }
    .desktop\:padding-inline-start-neg-5 {
      padding-inline-start: var(--zbk-spacing-neg-5);
    }
    .desktop\:padding-neg-4 {
      padding-inline: var(--zbk-spacing-neg-4);
    }
    .desktop\:padding-block-neg-4,
    .desktop\:padding-neg-4 {
      padding-block: var(--zbk-spacing-neg-4);
    }
    .desktop\:padding-inline-neg-4 {
      padding-inline: var(--zbk-spacing-neg-4);
    }
    .desktop\:padding-block-start-neg-4 {
      padding-block-start: var(--zbk-spacing-neg-4);
    }
    .desktop\:padding-inline-end-neg-4 {
      padding-inline-end: var(--zbk-spacing-neg-4);
    }
    .desktop\:padding-block-end-neg-4 {
      padding-block-end: var(--zbk-spacing-neg-4);
    }
    .desktop\:padding-inline-start-neg-4 {
      padding-inline-start: var(--zbk-spacing-neg-4);
    }
    .desktop\:padding-neg-3 {
      padding-inline: var(--zbk-spacing-neg-3);
    }
    .desktop\:padding-block-neg-3,
    .desktop\:padding-neg-3 {
      padding-block: var(--zbk-spacing-neg-3);
    }
    .desktop\:padding-inline-neg-3 {
      padding-inline: var(--zbk-spacing-neg-3);
    }
    .desktop\:padding-block-start-neg-3 {
      padding-block-start: var(--zbk-spacing-neg-3);
    }
    .desktop\:padding-inline-end-neg-3 {
      padding-inline-end: var(--zbk-spacing-neg-3);
    }
    .desktop\:padding-block-end-neg-3 {
      padding-block-end: var(--zbk-spacing-neg-3);
    }
    .desktop\:padding-inline-start-neg-3 {
      padding-inline-start: var(--zbk-spacing-neg-3);
    }
    .desktop\:padding-neg-205 {
      padding-inline: var(--zbk-spacing-neg-205);
    }
    .desktop\:padding-block-neg-205,
    .desktop\:padding-neg-205 {
      padding-block: var(--zbk-spacing-neg-205);
    }
    .desktop\:padding-inline-neg-205 {
      padding-inline: var(--zbk-spacing-neg-205);
    }
    .desktop\:padding-block-start-neg-205 {
      padding-block-start: var(--zbk-spacing-neg-205);
    }
    .desktop\:padding-inline-end-neg-205 {
      padding-inline-end: var(--zbk-spacing-neg-205);
    }
    .desktop\:padding-block-end-neg-205 {
      padding-block-end: var(--zbk-spacing-neg-205);
    }
    .desktop\:padding-inline-start-neg-205 {
      padding-inline-start: var(--zbk-spacing-neg-205);
    }
    .desktop\:padding-neg-2 {
      padding-inline: var(--zbk-spacing-neg-2);
    }
    .desktop\:padding-block-neg-2,
    .desktop\:padding-neg-2 {
      padding-block: var(--zbk-spacing-neg-2);
    }
    .desktop\:padding-inline-neg-2 {
      padding-inline: var(--zbk-spacing-neg-2);
    }
    .desktop\:padding-block-start-neg-2 {
      padding-block-start: var(--zbk-spacing-neg-2);
    }
    .desktop\:padding-inline-end-neg-2 {
      padding-inline-end: var(--zbk-spacing-neg-2);
    }
    .desktop\:padding-block-end-neg-2 {
      padding-block-end: var(--zbk-spacing-neg-2);
    }
    .desktop\:padding-inline-start-neg-2 {
      padding-inline-start: var(--zbk-spacing-neg-2);
    }
    .desktop\:padding-neg-105 {
      padding-inline: var(--zbk-spacing-neg-105);
    }
    .desktop\:padding-block-neg-105,
    .desktop\:padding-neg-105 {
      padding-block: var(--zbk-spacing-neg-105);
    }
    .desktop\:padding-inline-neg-105 {
      padding-inline: var(--zbk-spacing-neg-105);
    }
    .desktop\:padding-block-start-neg-105 {
      padding-block-start: var(--zbk-spacing-neg-105);
    }
    .desktop\:padding-inline-end-neg-105 {
      padding-inline-end: var(--zbk-spacing-neg-105);
    }
    .desktop\:padding-block-end-neg-105 {
      padding-block-end: var(--zbk-spacing-neg-105);
    }
    .desktop\:padding-inline-start-neg-105 {
      padding-inline-start: var(--zbk-spacing-neg-105);
    }
    .desktop\:padding-neg-1 {
      padding-inline: var(--zbk-spacing-neg-1);
    }
    .desktop\:padding-block-neg-1,
    .desktop\:padding-neg-1 {
      padding-block: var(--zbk-spacing-neg-1);
    }
    .desktop\:padding-inline-neg-1 {
      padding-inline: var(--zbk-spacing-neg-1);
    }
    .desktop\:padding-block-start-neg-1 {
      padding-block-start: var(--zbk-spacing-neg-1);
    }
    .desktop\:padding-inline-end-neg-1 {
      padding-inline-end: var(--zbk-spacing-neg-1);
    }
    .desktop\:padding-block-end-neg-1 {
      padding-block-end: var(--zbk-spacing-neg-1);
    }
    .desktop\:padding-inline-start-neg-1 {
      padding-inline-start: var(--zbk-spacing-neg-1);
    }
    .desktop\:padding-neg-05 {
      padding-inline: var(--zbk-spacing-neg-05);
    }
    .desktop\:padding-block-neg-05,
    .desktop\:padding-neg-05 {
      padding-block: var(--zbk-spacing-neg-05);
    }
    .desktop\:padding-inline-neg-05 {
      padding-inline: var(--zbk-spacing-neg-05);
    }
    .desktop\:padding-block-start-neg-05 {
      padding-block-start: var(--zbk-spacing-neg-05);
    }
    .desktop\:padding-inline-end-neg-05 {
      padding-inline-end: var(--zbk-spacing-neg-05);
    }
    .desktop\:padding-block-end-neg-05 {
      padding-block-end: var(--zbk-spacing-neg-05);
    }
    .desktop\:padding-inline-start-neg-05 {
      padding-inline-start: var(--zbk-spacing-neg-05);
    }
    .desktop\:padding-neg-025 {
      padding-inline: var(--zbk-spacing-neg-025);
    }
    .desktop\:padding-block-neg-025,
    .desktop\:padding-neg-025 {
      padding-block: var(--zbk-spacing-neg-025);
    }
    .desktop\:padding-inline-neg-025 {
      padding-inline: var(--zbk-spacing-neg-025);
    }
    .desktop\:padding-block-start-neg-025 {
      padding-block-start: var(--zbk-spacing-neg-025);
    }
    .desktop\:padding-inline-end-neg-025 {
      padding-inline-end: var(--zbk-spacing-neg-025);
    }
    .desktop\:padding-block-end-neg-025 {
      padding-block-end: var(--zbk-spacing-neg-025);
    }
    .desktop\:padding-inline-start-neg-025 {
      padding-inline-start: var(--zbk-spacing-neg-025);
    }
    .desktop\:padding-neg-2px {
      padding-inline: var(--zbk-spacing-neg-2px);
    }
    .desktop\:padding-block-neg-2px,
    .desktop\:padding-neg-2px {
      padding-block: var(--zbk-spacing-neg-2px);
    }
    .desktop\:padding-inline-neg-2px {
      padding-inline: var(--zbk-spacing-neg-2px);
    }
    .desktop\:padding-block-start-neg-2px {
      padding-block-start: var(--zbk-spacing-neg-2px);
    }
    .desktop\:padding-inline-end-neg-2px {
      padding-inline-end: var(--zbk-spacing-neg-2px);
    }
    .desktop\:padding-block-end-neg-2px {
      padding-block-end: var(--zbk-spacing-neg-2px);
    }
    .desktop\:padding-inline-start-neg-2px {
      padding-inline-start: var(--zbk-spacing-neg-2px);
    }
    .desktop\:padding-neg-1px {
      padding-inline: var(--zbk-spacing-neg-1px);
    }
    .desktop\:padding-block-neg-1px,
    .desktop\:padding-neg-1px {
      padding-block: var(--zbk-spacing-neg-1px);
    }
    .desktop\:padding-inline-neg-1px {
      padding-inline: var(--zbk-spacing-neg-1px);
    }
    .desktop\:padding-block-start-neg-1px {
      padding-block-start: var(--zbk-spacing-neg-1px);
    }
    .desktop\:padding-inline-end-neg-1px {
      padding-inline-end: var(--zbk-spacing-neg-1px);
    }
    .desktop\:padding-block-end-neg-1px {
      padding-block-end: var(--zbk-spacing-neg-1px);
    }
    .desktop\:padding-inline-start-neg-1px {
      padding-inline-start: var(--zbk-spacing-neg-1px);
    }
    .desktop\:padding-0 {
      padding-inline: var(--zbk-spacing-0);
    }
    .desktop\:padding-0,
    .desktop\:padding-block-0 {
      padding-block: var(--zbk-spacing-0);
    }
    .desktop\:padding-inline-0 {
      padding-inline: var(--zbk-spacing-0);
    }
    .desktop\:padding-block-start-0 {
      padding-block-start: var(--zbk-spacing-0);
    }
    .desktop\:padding-inline-end-0 {
      padding-inline-end: var(--zbk-spacing-0);
    }
    .desktop\:padding-block-end-0 {
      padding-block-end: var(--zbk-spacing-0);
    }
    .desktop\:padding-inline-start-0 {
      padding-inline-start: var(--zbk-spacing-0);
    }
    .desktop\:padding-1px {
      padding-inline: var(--zbk-spacing-1px);
    }
    .desktop\:padding-1px,
    .desktop\:padding-block-1px {
      padding-block: var(--zbk-spacing-1px);
    }
    .desktop\:padding-inline-1px {
      padding-inline: var(--zbk-spacing-1px);
    }
    .desktop\:padding-block-start-1px {
      padding-block-start: var(--zbk-spacing-1px);
    }
    .desktop\:padding-inline-end-1px {
      padding-inline-end: var(--zbk-spacing-1px);
    }
    .desktop\:padding-block-end-1px {
      padding-block-end: var(--zbk-spacing-1px);
    }
    .desktop\:padding-inline-start-1px {
      padding-inline-start: var(--zbk-spacing-1px);
    }
    .desktop\:padding-2px {
      padding-inline: var(--zbk-spacing-2px);
    }
    .desktop\:padding-2px,
    .desktop\:padding-block-2px {
      padding-block: var(--zbk-spacing-2px);
    }
    .desktop\:padding-inline-2px {
      padding-inline: var(--zbk-spacing-2px);
    }
    .desktop\:padding-block-start-2px {
      padding-block-start: var(--zbk-spacing-2px);
    }
    .desktop\:padding-inline-end-2px {
      padding-inline-end: var(--zbk-spacing-2px);
    }
    .desktop\:padding-block-end-2px {
      padding-block-end: var(--zbk-spacing-2px);
    }
    .desktop\:padding-inline-start-2px {
      padding-inline-start: var(--zbk-spacing-2px);
    }
    .desktop\:padding-025 {
      padding-inline: var(--zbk-spacing-025);
    }
    .desktop\:padding-025,
    .desktop\:padding-block-025 {
      padding-block: var(--zbk-spacing-025);
    }
    .desktop\:padding-inline-025 {
      padding-inline: var(--zbk-spacing-025);
    }
    .desktop\:padding-block-start-025 {
      padding-block-start: var(--zbk-spacing-025);
    }
    .desktop\:padding-inline-end-025 {
      padding-inline-end: var(--zbk-spacing-025);
    }
    .desktop\:padding-block-end-025 {
      padding-block-end: var(--zbk-spacing-025);
    }
    .desktop\:padding-inline-start-025 {
      padding-inline-start: var(--zbk-spacing-025);
    }
    .desktop\:padding-05 {
      padding-inline: var(--zbk-spacing-05);
    }
    .desktop\:padding-05,
    .desktop\:padding-block-05 {
      padding-block: var(--zbk-spacing-05);
    }
    .desktop\:padding-inline-05 {
      padding-inline: var(--zbk-spacing-05);
    }
    .desktop\:padding-block-start-05 {
      padding-block-start: var(--zbk-spacing-05);
    }
    .desktop\:padding-inline-end-05 {
      padding-inline-end: var(--zbk-spacing-05);
    }
    .desktop\:padding-block-end-05 {
      padding-block-end: var(--zbk-spacing-05);
    }
    .desktop\:padding-inline-start-05 {
      padding-inline-start: var(--zbk-spacing-05);
    }
    .desktop\:padding-1 {
      padding-inline: var(--zbk-spacing-1);
    }
    .desktop\:padding-1,
    .desktop\:padding-block-1 {
      padding-block: var(--zbk-spacing-1);
    }
    .desktop\:padding-inline-1 {
      padding-inline: var(--zbk-spacing-1);
    }
    .desktop\:padding-block-start-1 {
      padding-block-start: var(--zbk-spacing-1);
    }
    .desktop\:padding-inline-end-1 {
      padding-inline-end: var(--zbk-spacing-1);
    }
    .desktop\:padding-block-end-1 {
      padding-block-end: var(--zbk-spacing-1);
    }
    .desktop\:padding-inline-start-1 {
      padding-inline-start: var(--zbk-spacing-1);
    }
    .desktop\:padding-105 {
      padding-inline: var(--zbk-spacing-105);
    }
    .desktop\:padding-105,
    .desktop\:padding-block-105 {
      padding-block: var(--zbk-spacing-105);
    }
    .desktop\:padding-inline-105 {
      padding-inline: var(--zbk-spacing-105);
    }
    .desktop\:padding-block-start-105 {
      padding-block-start: var(--zbk-spacing-105);
    }
    .desktop\:padding-inline-end-105 {
      padding-inline-end: var(--zbk-spacing-105);
    }
    .desktop\:padding-block-end-105 {
      padding-block-end: var(--zbk-spacing-105);
    }
    .desktop\:padding-inline-start-105 {
      padding-inline-start: var(--zbk-spacing-105);
    }
    .desktop\:padding-2 {
      padding-inline: var(--zbk-spacing-2);
    }
    .desktop\:padding-2,
    .desktop\:padding-block-2 {
      padding-block: var(--zbk-spacing-2);
    }
    .desktop\:padding-inline-2 {
      padding-inline: var(--zbk-spacing-2);
    }
    .desktop\:padding-block-start-2 {
      padding-block-start: var(--zbk-spacing-2);
    }
    .desktop\:padding-inline-end-2 {
      padding-inline-end: var(--zbk-spacing-2);
    }
    .desktop\:padding-block-end-2 {
      padding-block-end: var(--zbk-spacing-2);
    }
    .desktop\:padding-inline-start-2 {
      padding-inline-start: var(--zbk-spacing-2);
    }
    .desktop\:padding-205 {
      padding-inline: var(--zbk-spacing-205);
    }
    .desktop\:padding-205,
    .desktop\:padding-block-205 {
      padding-block: var(--zbk-spacing-205);
    }
    .desktop\:padding-inline-205 {
      padding-inline: var(--zbk-spacing-205);
    }
    .desktop\:padding-block-start-205 {
      padding-block-start: var(--zbk-spacing-205);
    }
    .desktop\:padding-inline-end-205 {
      padding-inline-end: var(--zbk-spacing-205);
    }
    .desktop\:padding-block-end-205 {
      padding-block-end: var(--zbk-spacing-205);
    }
    .desktop\:padding-inline-start-205 {
      padding-inline-start: var(--zbk-spacing-205);
    }
    .desktop\:padding-3 {
      padding-inline: var(--zbk-spacing-3);
    }
    .desktop\:padding-3,
    .desktop\:padding-block-3 {
      padding-block: var(--zbk-spacing-3);
    }
    .desktop\:padding-inline-3 {
      padding-inline: var(--zbk-spacing-3);
    }
    .desktop\:padding-block-start-3 {
      padding-block-start: var(--zbk-spacing-3);
    }
    .desktop\:padding-inline-end-3 {
      padding-inline-end: var(--zbk-spacing-3);
    }
    .desktop\:padding-block-end-3 {
      padding-block-end: var(--zbk-spacing-3);
    }
    .desktop\:padding-inline-start-3 {
      padding-inline-start: var(--zbk-spacing-3);
    }
    .desktop\:padding-4 {
      padding-inline: var(--zbk-spacing-4);
    }
    .desktop\:padding-4,
    .desktop\:padding-block-4 {
      padding-block: var(--zbk-spacing-4);
    }
    .desktop\:padding-inline-4 {
      padding-inline: var(--zbk-spacing-4);
    }
    .desktop\:padding-block-start-4 {
      padding-block-start: var(--zbk-spacing-4);
    }
    .desktop\:padding-inline-end-4 {
      padding-inline-end: var(--zbk-spacing-4);
    }
    .desktop\:padding-block-end-4 {
      padding-block-end: var(--zbk-spacing-4);
    }
    .desktop\:padding-inline-start-4 {
      padding-inline-start: var(--zbk-spacing-4);
    }
    .desktop\:padding-5 {
      padding-inline: var(--zbk-spacing-5);
    }
    .desktop\:padding-5,
    .desktop\:padding-block-5 {
      padding-block: var(--zbk-spacing-5);
    }
    .desktop\:padding-inline-5 {
      padding-inline: var(--zbk-spacing-5);
    }
    .desktop\:padding-block-start-5 {
      padding-block-start: var(--zbk-spacing-5);
    }
    .desktop\:padding-inline-end-5 {
      padding-inline-end: var(--zbk-spacing-5);
    }
    .desktop\:padding-block-end-5 {
      padding-block-end: var(--zbk-spacing-5);
    }
    .desktop\:padding-inline-start-5 {
      padding-inline-start: var(--zbk-spacing-5);
    }
    .desktop\:padding-6 {
      padding-inline: var(--zbk-spacing-6);
    }
    .desktop\:padding-6,
    .desktop\:padding-block-6 {
      padding-block: var(--zbk-spacing-6);
    }
    .desktop\:padding-inline-6 {
      padding-inline: var(--zbk-spacing-6);
    }
    .desktop\:padding-block-start-6 {
      padding-block-start: var(--zbk-spacing-6);
    }
    .desktop\:padding-inline-end-6 {
      padding-inline-end: var(--zbk-spacing-6);
    }
    .desktop\:padding-block-end-6 {
      padding-block-end: var(--zbk-spacing-6);
    }
    .desktop\:padding-inline-start-6 {
      padding-inline-start: var(--zbk-spacing-6);
    }
    .desktop\:padding-7 {
      padding-inline: var(--zbk-spacing-7);
    }
    .desktop\:padding-7,
    .desktop\:padding-block-7 {
      padding-block: var(--zbk-spacing-7);
    }
    .desktop\:padding-inline-7 {
      padding-inline: var(--zbk-spacing-7);
    }
    .desktop\:padding-block-start-7 {
      padding-block-start: var(--zbk-spacing-7);
    }
    .desktop\:padding-inline-end-7 {
      padding-inline-end: var(--zbk-spacing-7);
    }
    .desktop\:padding-block-end-7 {
      padding-block-end: var(--zbk-spacing-7);
    }
    .desktop\:padding-inline-start-7 {
      padding-inline-start: var(--zbk-spacing-7);
    }
    .desktop\:padding-8 {
      padding-inline: var(--zbk-spacing-8);
    }
    .desktop\:padding-8,
    .desktop\:padding-block-8 {
      padding-block: var(--zbk-spacing-8);
    }
    .desktop\:padding-inline-8 {
      padding-inline: var(--zbk-spacing-8);
    }
    .desktop\:padding-block-start-8 {
      padding-block-start: var(--zbk-spacing-8);
    }
    .desktop\:padding-inline-end-8 {
      padding-inline-end: var(--zbk-spacing-8);
    }
    .desktop\:padding-block-end-8 {
      padding-block-end: var(--zbk-spacing-8);
    }
    .desktop\:padding-inline-start-8 {
      padding-inline-start: var(--zbk-spacing-8);
    }
    .desktop\:padding-9 {
      padding-inline: var(--zbk-spacing-9);
    }
    .desktop\:padding-9,
    .desktop\:padding-block-9 {
      padding-block: var(--zbk-spacing-9);
    }
    .desktop\:padding-inline-9 {
      padding-inline: var(--zbk-spacing-9);
    }
    .desktop\:padding-block-start-9 {
      padding-block-start: var(--zbk-spacing-9);
    }
    .desktop\:padding-inline-end-9 {
      padding-inline-end: var(--zbk-spacing-9);
    }
    .desktop\:padding-block-end-9 {
      padding-block-end: var(--zbk-spacing-9);
    }
    .desktop\:padding-inline-start-9 {
      padding-inline-start: var(--zbk-spacing-9);
    }
    .desktop\:padding-10 {
      padding-inline: var(--zbk-spacing-10);
    }
    .desktop\:padding-10,
    .desktop\:padding-block-10 {
      padding-block: var(--zbk-spacing-10);
    }
    .desktop\:padding-inline-10 {
      padding-inline: var(--zbk-spacing-10);
    }
    .desktop\:padding-block-start-10 {
      padding-block-start: var(--zbk-spacing-10);
    }
    .desktop\:padding-inline-end-10 {
      padding-inline-end: var(--zbk-spacing-10);
    }
    .desktop\:padding-block-end-10 {
      padding-block-end: var(--zbk-spacing-10);
    }
    .desktop\:padding-inline-start-10 {
      padding-inline-start: var(--zbk-spacing-10);
    }
    .desktop\:padding-15 {
      padding-inline: var(--zbk-spacing-15);
    }
    .desktop\:padding-15,
    .desktop\:padding-block-15 {
      padding-block: var(--zbk-spacing-15);
    }
    .desktop\:padding-inline-15 {
      padding-inline: var(--zbk-spacing-15);
    }
    .desktop\:padding-block-start-15 {
      padding-block-start: var(--zbk-spacing-15);
    }
    .desktop\:padding-inline-end-15 {
      padding-inline-end: var(--zbk-spacing-15);
    }
    .desktop\:padding-block-end-15 {
      padding-block-end: var(--zbk-spacing-15);
    }
    .desktop\:padding-inline-start-15 {
      padding-inline-start: var(--zbk-spacing-15);
    }
    .desktop\:padding-20 {
      padding-inline: var(--zbk-spacing-20);
    }
    .desktop\:padding-20,
    .desktop\:padding-block-20 {
      padding-block: var(--zbk-spacing-20);
    }
    .desktop\:padding-inline-20 {
      padding-inline: var(--zbk-spacing-20);
    }
    .desktop\:padding-block-start-20 {
      padding-block-start: var(--zbk-spacing-20);
    }
    .desktop\:padding-inline-end-20 {
      padding-inline-end: var(--zbk-spacing-20);
    }
    .desktop\:padding-block-end-20 {
      padding-block-end: var(--zbk-spacing-20);
    }
    .desktop\:padding-inline-start-20 {
      padding-inline-start: var(--zbk-spacing-20);
    }
  }
  @media (min-width: 80rem) {
    .desktop-lg\:padding-neg-15 {
      padding-inline: var(--zbk-spacing-neg-15);
    }
    .desktop-lg\:padding-block-neg-15,
    .desktop-lg\:padding-neg-15 {
      padding-block: var(--zbk-spacing-neg-15);
    }
    .desktop-lg\:padding-inline-neg-15 {
      padding-inline: var(--zbk-spacing-neg-15);
    }
    .desktop-lg\:padding-block-start-neg-15 {
      padding-block-start: var(--zbk-spacing-neg-15);
    }
    .desktop-lg\:padding-inline-end-neg-15 {
      padding-inline-end: var(--zbk-spacing-neg-15);
    }
    .desktop-lg\:padding-block-end-neg-15 {
      padding-block-end: var(--zbk-spacing-neg-15);
    }
    .desktop-lg\:padding-inline-start-neg-15 {
      padding-inline-start: var(--zbk-spacing-neg-15);
    }
    .desktop-lg\:padding-neg-10 {
      padding-inline: var(--zbk-spacing-neg-10);
    }
    .desktop-lg\:padding-block-neg-10,
    .desktop-lg\:padding-neg-10 {
      padding-block: var(--zbk-spacing-neg-10);
    }
    .desktop-lg\:padding-inline-neg-10 {
      padding-inline: var(--zbk-spacing-neg-10);
    }
    .desktop-lg\:padding-block-start-neg-10 {
      padding-block-start: var(--zbk-spacing-neg-10);
    }
    .desktop-lg\:padding-inline-end-neg-10 {
      padding-inline-end: var(--zbk-spacing-neg-10);
    }
    .desktop-lg\:padding-block-end-neg-10 {
      padding-block-end: var(--zbk-spacing-neg-10);
    }
    .desktop-lg\:padding-inline-start-neg-10 {
      padding-inline-start: var(--zbk-spacing-neg-10);
    }
    .desktop-lg\:padding-neg-9 {
      padding-inline: var(--zbk-spacing-neg-9);
    }
    .desktop-lg\:padding-block-neg-9,
    .desktop-lg\:padding-neg-9 {
      padding-block: var(--zbk-spacing-neg-9);
    }
    .desktop-lg\:padding-inline-neg-9 {
      padding-inline: var(--zbk-spacing-neg-9);
    }
    .desktop-lg\:padding-block-start-neg-9 {
      padding-block-start: var(--zbk-spacing-neg-9);
    }
    .desktop-lg\:padding-inline-end-neg-9 {
      padding-inline-end: var(--zbk-spacing-neg-9);
    }
    .desktop-lg\:padding-block-end-neg-9 {
      padding-block-end: var(--zbk-spacing-neg-9);
    }
    .desktop-lg\:padding-inline-start-neg-9 {
      padding-inline-start: var(--zbk-spacing-neg-9);
    }
    .desktop-lg\:padding-neg-8 {
      padding-inline: var(--zbk-spacing-neg-8);
    }
    .desktop-lg\:padding-block-neg-8,
    .desktop-lg\:padding-neg-8 {
      padding-block: var(--zbk-spacing-neg-8);
    }
    .desktop-lg\:padding-inline-neg-8 {
      padding-inline: var(--zbk-spacing-neg-8);
    }
    .desktop-lg\:padding-block-start-neg-8 {
      padding-block-start: var(--zbk-spacing-neg-8);
    }
    .desktop-lg\:padding-inline-end-neg-8 {
      padding-inline-end: var(--zbk-spacing-neg-8);
    }
    .desktop-lg\:padding-block-end-neg-8 {
      padding-block-end: var(--zbk-spacing-neg-8);
    }
    .desktop-lg\:padding-inline-start-neg-8 {
      padding-inline-start: var(--zbk-spacing-neg-8);
    }
    .desktop-lg\:padding-neg-7 {
      padding-inline: var(--zbk-spacing-neg-7);
    }
    .desktop-lg\:padding-block-neg-7,
    .desktop-lg\:padding-neg-7 {
      padding-block: var(--zbk-spacing-neg-7);
    }
    .desktop-lg\:padding-inline-neg-7 {
      padding-inline: var(--zbk-spacing-neg-7);
    }
    .desktop-lg\:padding-block-start-neg-7 {
      padding-block-start: var(--zbk-spacing-neg-7);
    }
    .desktop-lg\:padding-inline-end-neg-7 {
      padding-inline-end: var(--zbk-spacing-neg-7);
    }
    .desktop-lg\:padding-block-end-neg-7 {
      padding-block-end: var(--zbk-spacing-neg-7);
    }
    .desktop-lg\:padding-inline-start-neg-7 {
      padding-inline-start: var(--zbk-spacing-neg-7);
    }
    .desktop-lg\:padding-neg-6 {
      padding-inline: var(--zbk-spacing-neg-6);
    }
    .desktop-lg\:padding-block-neg-6,
    .desktop-lg\:padding-neg-6 {
      padding-block: var(--zbk-spacing-neg-6);
    }
    .desktop-lg\:padding-inline-neg-6 {
      padding-inline: var(--zbk-spacing-neg-6);
    }
    .desktop-lg\:padding-block-start-neg-6 {
      padding-block-start: var(--zbk-spacing-neg-6);
    }
    .desktop-lg\:padding-inline-end-neg-6 {
      padding-inline-end: var(--zbk-spacing-neg-6);
    }
    .desktop-lg\:padding-block-end-neg-6 {
      padding-block-end: var(--zbk-spacing-neg-6);
    }
    .desktop-lg\:padding-inline-start-neg-6 {
      padding-inline-start: var(--zbk-spacing-neg-6);
    }
    .desktop-lg\:padding-neg-5 {
      padding-inline: var(--zbk-spacing-neg-5);
    }
    .desktop-lg\:padding-block-neg-5,
    .desktop-lg\:padding-neg-5 {
      padding-block: var(--zbk-spacing-neg-5);
    }
    .desktop-lg\:padding-inline-neg-5 {
      padding-inline: var(--zbk-spacing-neg-5);
    }
    .desktop-lg\:padding-block-start-neg-5 {
      padding-block-start: var(--zbk-spacing-neg-5);
    }
    .desktop-lg\:padding-inline-end-neg-5 {
      padding-inline-end: var(--zbk-spacing-neg-5);
    }
    .desktop-lg\:padding-block-end-neg-5 {
      padding-block-end: var(--zbk-spacing-neg-5);
    }
    .desktop-lg\:padding-inline-start-neg-5 {
      padding-inline-start: var(--zbk-spacing-neg-5);
    }
    .desktop-lg\:padding-neg-4 {
      padding-inline: var(--zbk-spacing-neg-4);
    }
    .desktop-lg\:padding-block-neg-4,
    .desktop-lg\:padding-neg-4 {
      padding-block: var(--zbk-spacing-neg-4);
    }
    .desktop-lg\:padding-inline-neg-4 {
      padding-inline: var(--zbk-spacing-neg-4);
    }
    .desktop-lg\:padding-block-start-neg-4 {
      padding-block-start: var(--zbk-spacing-neg-4);
    }
    .desktop-lg\:padding-inline-end-neg-4 {
      padding-inline-end: var(--zbk-spacing-neg-4);
    }
    .desktop-lg\:padding-block-end-neg-4 {
      padding-block-end: var(--zbk-spacing-neg-4);
    }
    .desktop-lg\:padding-inline-start-neg-4 {
      padding-inline-start: var(--zbk-spacing-neg-4);
    }
    .desktop-lg\:padding-neg-3 {
      padding-inline: var(--zbk-spacing-neg-3);
    }
    .desktop-lg\:padding-block-neg-3,
    .desktop-lg\:padding-neg-3 {
      padding-block: var(--zbk-spacing-neg-3);
    }
    .desktop-lg\:padding-inline-neg-3 {
      padding-inline: var(--zbk-spacing-neg-3);
    }
    .desktop-lg\:padding-block-start-neg-3 {
      padding-block-start: var(--zbk-spacing-neg-3);
    }
    .desktop-lg\:padding-inline-end-neg-3 {
      padding-inline-end: var(--zbk-spacing-neg-3);
    }
    .desktop-lg\:padding-block-end-neg-3 {
      padding-block-end: var(--zbk-spacing-neg-3);
    }
    .desktop-lg\:padding-inline-start-neg-3 {
      padding-inline-start: var(--zbk-spacing-neg-3);
    }
    .desktop-lg\:padding-neg-205 {
      padding-inline: var(--zbk-spacing-neg-205);
    }
    .desktop-lg\:padding-block-neg-205,
    .desktop-lg\:padding-neg-205 {
      padding-block: var(--zbk-spacing-neg-205);
    }
    .desktop-lg\:padding-inline-neg-205 {
      padding-inline: var(--zbk-spacing-neg-205);
    }
    .desktop-lg\:padding-block-start-neg-205 {
      padding-block-start: var(--zbk-spacing-neg-205);
    }
    .desktop-lg\:padding-inline-end-neg-205 {
      padding-inline-end: var(--zbk-spacing-neg-205);
    }
    .desktop-lg\:padding-block-end-neg-205 {
      padding-block-end: var(--zbk-spacing-neg-205);
    }
    .desktop-lg\:padding-inline-start-neg-205 {
      padding-inline-start: var(--zbk-spacing-neg-205);
    }
    .desktop-lg\:padding-neg-2 {
      padding-inline: var(--zbk-spacing-neg-2);
    }
    .desktop-lg\:padding-block-neg-2,
    .desktop-lg\:padding-neg-2 {
      padding-block: var(--zbk-spacing-neg-2);
    }
    .desktop-lg\:padding-inline-neg-2 {
      padding-inline: var(--zbk-spacing-neg-2);
    }
    .desktop-lg\:padding-block-start-neg-2 {
      padding-block-start: var(--zbk-spacing-neg-2);
    }
    .desktop-lg\:padding-inline-end-neg-2 {
      padding-inline-end: var(--zbk-spacing-neg-2);
    }
    .desktop-lg\:padding-block-end-neg-2 {
      padding-block-end: var(--zbk-spacing-neg-2);
    }
    .desktop-lg\:padding-inline-start-neg-2 {
      padding-inline-start: var(--zbk-spacing-neg-2);
    }
    .desktop-lg\:padding-neg-105 {
      padding-inline: var(--zbk-spacing-neg-105);
    }
    .desktop-lg\:padding-block-neg-105,
    .desktop-lg\:padding-neg-105 {
      padding-block: var(--zbk-spacing-neg-105);
    }
    .desktop-lg\:padding-inline-neg-105 {
      padding-inline: var(--zbk-spacing-neg-105);
    }
    .desktop-lg\:padding-block-start-neg-105 {
      padding-block-start: var(--zbk-spacing-neg-105);
    }
    .desktop-lg\:padding-inline-end-neg-105 {
      padding-inline-end: var(--zbk-spacing-neg-105);
    }
    .desktop-lg\:padding-block-end-neg-105 {
      padding-block-end: var(--zbk-spacing-neg-105);
    }
    .desktop-lg\:padding-inline-start-neg-105 {
      padding-inline-start: var(--zbk-spacing-neg-105);
    }
    .desktop-lg\:padding-neg-1 {
      padding-inline: var(--zbk-spacing-neg-1);
    }
    .desktop-lg\:padding-block-neg-1,
    .desktop-lg\:padding-neg-1 {
      padding-block: var(--zbk-spacing-neg-1);
    }
    .desktop-lg\:padding-inline-neg-1 {
      padding-inline: var(--zbk-spacing-neg-1);
    }
    .desktop-lg\:padding-block-start-neg-1 {
      padding-block-start: var(--zbk-spacing-neg-1);
    }
    .desktop-lg\:padding-inline-end-neg-1 {
      padding-inline-end: var(--zbk-spacing-neg-1);
    }
    .desktop-lg\:padding-block-end-neg-1 {
      padding-block-end: var(--zbk-spacing-neg-1);
    }
    .desktop-lg\:padding-inline-start-neg-1 {
      padding-inline-start: var(--zbk-spacing-neg-1);
    }
    .desktop-lg\:padding-neg-05 {
      padding-inline: var(--zbk-spacing-neg-05);
    }
    .desktop-lg\:padding-block-neg-05,
    .desktop-lg\:padding-neg-05 {
      padding-block: var(--zbk-spacing-neg-05);
    }
    .desktop-lg\:padding-inline-neg-05 {
      padding-inline: var(--zbk-spacing-neg-05);
    }
    .desktop-lg\:padding-block-start-neg-05 {
      padding-block-start: var(--zbk-spacing-neg-05);
    }
    .desktop-lg\:padding-inline-end-neg-05 {
      padding-inline-end: var(--zbk-spacing-neg-05);
    }
    .desktop-lg\:padding-block-end-neg-05 {
      padding-block-end: var(--zbk-spacing-neg-05);
    }
    .desktop-lg\:padding-inline-start-neg-05 {
      padding-inline-start: var(--zbk-spacing-neg-05);
    }
    .desktop-lg\:padding-neg-025 {
      padding-inline: var(--zbk-spacing-neg-025);
    }
    .desktop-lg\:padding-block-neg-025,
    .desktop-lg\:padding-neg-025 {
      padding-block: var(--zbk-spacing-neg-025);
    }
    .desktop-lg\:padding-inline-neg-025 {
      padding-inline: var(--zbk-spacing-neg-025);
    }
    .desktop-lg\:padding-block-start-neg-025 {
      padding-block-start: var(--zbk-spacing-neg-025);
    }
    .desktop-lg\:padding-inline-end-neg-025 {
      padding-inline-end: var(--zbk-spacing-neg-025);
    }
    .desktop-lg\:padding-block-end-neg-025 {
      padding-block-end: var(--zbk-spacing-neg-025);
    }
    .desktop-lg\:padding-inline-start-neg-025 {
      padding-inline-start: var(--zbk-spacing-neg-025);
    }
    .desktop-lg\:padding-neg-2px {
      padding-inline: var(--zbk-spacing-neg-2px);
    }
    .desktop-lg\:padding-block-neg-2px,
    .desktop-lg\:padding-neg-2px {
      padding-block: var(--zbk-spacing-neg-2px);
    }
    .desktop-lg\:padding-inline-neg-2px {
      padding-inline: var(--zbk-spacing-neg-2px);
    }
    .desktop-lg\:padding-block-start-neg-2px {
      padding-block-start: var(--zbk-spacing-neg-2px);
    }
    .desktop-lg\:padding-inline-end-neg-2px {
      padding-inline-end: var(--zbk-spacing-neg-2px);
    }
    .desktop-lg\:padding-block-end-neg-2px {
      padding-block-end: var(--zbk-spacing-neg-2px);
    }
    .desktop-lg\:padding-inline-start-neg-2px {
      padding-inline-start: var(--zbk-spacing-neg-2px);
    }
    .desktop-lg\:padding-neg-1px {
      padding-inline: var(--zbk-spacing-neg-1px);
    }
    .desktop-lg\:padding-block-neg-1px,
    .desktop-lg\:padding-neg-1px {
      padding-block: var(--zbk-spacing-neg-1px);
    }
    .desktop-lg\:padding-inline-neg-1px {
      padding-inline: var(--zbk-spacing-neg-1px);
    }
    .desktop-lg\:padding-block-start-neg-1px {
      padding-block-start: var(--zbk-spacing-neg-1px);
    }
    .desktop-lg\:padding-inline-end-neg-1px {
      padding-inline-end: var(--zbk-spacing-neg-1px);
    }
    .desktop-lg\:padding-block-end-neg-1px {
      padding-block-end: var(--zbk-spacing-neg-1px);
    }
    .desktop-lg\:padding-inline-start-neg-1px {
      padding-inline-start: var(--zbk-spacing-neg-1px);
    }
    .desktop-lg\:padding-0 {
      padding-inline: var(--zbk-spacing-0);
    }
    .desktop-lg\:padding-0,
    .desktop-lg\:padding-block-0 {
      padding-block: var(--zbk-spacing-0);
    }
    .desktop-lg\:padding-inline-0 {
      padding-inline: var(--zbk-spacing-0);
    }
    .desktop-lg\:padding-block-start-0 {
      padding-block-start: var(--zbk-spacing-0);
    }
    .desktop-lg\:padding-inline-end-0 {
      padding-inline-end: var(--zbk-spacing-0);
    }
    .desktop-lg\:padding-block-end-0 {
      padding-block-end: var(--zbk-spacing-0);
    }
    .desktop-lg\:padding-inline-start-0 {
      padding-inline-start: var(--zbk-spacing-0);
    }
    .desktop-lg\:padding-1px {
      padding-inline: var(--zbk-spacing-1px);
    }
    .desktop-lg\:padding-1px,
    .desktop-lg\:padding-block-1px {
      padding-block: var(--zbk-spacing-1px);
    }
    .desktop-lg\:padding-inline-1px {
      padding-inline: var(--zbk-spacing-1px);
    }
    .desktop-lg\:padding-block-start-1px {
      padding-block-start: var(--zbk-spacing-1px);
    }
    .desktop-lg\:padding-inline-end-1px {
      padding-inline-end: var(--zbk-spacing-1px);
    }
    .desktop-lg\:padding-block-end-1px {
      padding-block-end: var(--zbk-spacing-1px);
    }
    .desktop-lg\:padding-inline-start-1px {
      padding-inline-start: var(--zbk-spacing-1px);
    }
    .desktop-lg\:padding-2px {
      padding-inline: var(--zbk-spacing-2px);
    }
    .desktop-lg\:padding-2px,
    .desktop-lg\:padding-block-2px {
      padding-block: var(--zbk-spacing-2px);
    }
    .desktop-lg\:padding-inline-2px {
      padding-inline: var(--zbk-spacing-2px);
    }
    .desktop-lg\:padding-block-start-2px {
      padding-block-start: var(--zbk-spacing-2px);
    }
    .desktop-lg\:padding-inline-end-2px {
      padding-inline-end: var(--zbk-spacing-2px);
    }
    .desktop-lg\:padding-block-end-2px {
      padding-block-end: var(--zbk-spacing-2px);
    }
    .desktop-lg\:padding-inline-start-2px {
      padding-inline-start: var(--zbk-spacing-2px);
    }
    .desktop-lg\:padding-025 {
      padding-inline: var(--zbk-spacing-025);
    }
    .desktop-lg\:padding-025,
    .desktop-lg\:padding-block-025 {
      padding-block: var(--zbk-spacing-025);
    }
    .desktop-lg\:padding-inline-025 {
      padding-inline: var(--zbk-spacing-025);
    }
    .desktop-lg\:padding-block-start-025 {
      padding-block-start: var(--zbk-spacing-025);
    }
    .desktop-lg\:padding-inline-end-025 {
      padding-inline-end: var(--zbk-spacing-025);
    }
    .desktop-lg\:padding-block-end-025 {
      padding-block-end: var(--zbk-spacing-025);
    }
    .desktop-lg\:padding-inline-start-025 {
      padding-inline-start: var(--zbk-spacing-025);
    }
    .desktop-lg\:padding-05 {
      padding-inline: var(--zbk-spacing-05);
    }
    .desktop-lg\:padding-05,
    .desktop-lg\:padding-block-05 {
      padding-block: var(--zbk-spacing-05);
    }
    .desktop-lg\:padding-inline-05 {
      padding-inline: var(--zbk-spacing-05);
    }
    .desktop-lg\:padding-block-start-05 {
      padding-block-start: var(--zbk-spacing-05);
    }
    .desktop-lg\:padding-inline-end-05 {
      padding-inline-end: var(--zbk-spacing-05);
    }
    .desktop-lg\:padding-block-end-05 {
      padding-block-end: var(--zbk-spacing-05);
    }
    .desktop-lg\:padding-inline-start-05 {
      padding-inline-start: var(--zbk-spacing-05);
    }
    .desktop-lg\:padding-1 {
      padding-inline: var(--zbk-spacing-1);
    }
    .desktop-lg\:padding-1,
    .desktop-lg\:padding-block-1 {
      padding-block: var(--zbk-spacing-1);
    }
    .desktop-lg\:padding-inline-1 {
      padding-inline: var(--zbk-spacing-1);
    }
    .desktop-lg\:padding-block-start-1 {
      padding-block-start: var(--zbk-spacing-1);
    }
    .desktop-lg\:padding-inline-end-1 {
      padding-inline-end: var(--zbk-spacing-1);
    }
    .desktop-lg\:padding-block-end-1 {
      padding-block-end: var(--zbk-spacing-1);
    }
    .desktop-lg\:padding-inline-start-1 {
      padding-inline-start: var(--zbk-spacing-1);
    }
    .desktop-lg\:padding-105 {
      padding-inline: var(--zbk-spacing-105);
    }
    .desktop-lg\:padding-105,
    .desktop-lg\:padding-block-105 {
      padding-block: var(--zbk-spacing-105);
    }
    .desktop-lg\:padding-inline-105 {
      padding-inline: var(--zbk-spacing-105);
    }
    .desktop-lg\:padding-block-start-105 {
      padding-block-start: var(--zbk-spacing-105);
    }
    .desktop-lg\:padding-inline-end-105 {
      padding-inline-end: var(--zbk-spacing-105);
    }
    .desktop-lg\:padding-block-end-105 {
      padding-block-end: var(--zbk-spacing-105);
    }
    .desktop-lg\:padding-inline-start-105 {
      padding-inline-start: var(--zbk-spacing-105);
    }
    .desktop-lg\:padding-2 {
      padding-inline: var(--zbk-spacing-2);
    }
    .desktop-lg\:padding-2,
    .desktop-lg\:padding-block-2 {
      padding-block: var(--zbk-spacing-2);
    }
    .desktop-lg\:padding-inline-2 {
      padding-inline: var(--zbk-spacing-2);
    }
    .desktop-lg\:padding-block-start-2 {
      padding-block-start: var(--zbk-spacing-2);
    }
    .desktop-lg\:padding-inline-end-2 {
      padding-inline-end: var(--zbk-spacing-2);
    }
    .desktop-lg\:padding-block-end-2 {
      padding-block-end: var(--zbk-spacing-2);
    }
    .desktop-lg\:padding-inline-start-2 {
      padding-inline-start: var(--zbk-spacing-2);
    }
    .desktop-lg\:padding-205 {
      padding-inline: var(--zbk-spacing-205);
    }
    .desktop-lg\:padding-205,
    .desktop-lg\:padding-block-205 {
      padding-block: var(--zbk-spacing-205);
    }
    .desktop-lg\:padding-inline-205 {
      padding-inline: var(--zbk-spacing-205);
    }
    .desktop-lg\:padding-block-start-205 {
      padding-block-start: var(--zbk-spacing-205);
    }
    .desktop-lg\:padding-inline-end-205 {
      padding-inline-end: var(--zbk-spacing-205);
    }
    .desktop-lg\:padding-block-end-205 {
      padding-block-end: var(--zbk-spacing-205);
    }
    .desktop-lg\:padding-inline-start-205 {
      padding-inline-start: var(--zbk-spacing-205);
    }
    .desktop-lg\:padding-3 {
      padding-inline: var(--zbk-spacing-3);
    }
    .desktop-lg\:padding-3,
    .desktop-lg\:padding-block-3 {
      padding-block: var(--zbk-spacing-3);
    }
    .desktop-lg\:padding-inline-3 {
      padding-inline: var(--zbk-spacing-3);
    }
    .desktop-lg\:padding-block-start-3 {
      padding-block-start: var(--zbk-spacing-3);
    }
    .desktop-lg\:padding-inline-end-3 {
      padding-inline-end: var(--zbk-spacing-3);
    }
    .desktop-lg\:padding-block-end-3 {
      padding-block-end: var(--zbk-spacing-3);
    }
    .desktop-lg\:padding-inline-start-3 {
      padding-inline-start: var(--zbk-spacing-3);
    }
    .desktop-lg\:padding-4 {
      padding-inline: var(--zbk-spacing-4);
    }
    .desktop-lg\:padding-4,
    .desktop-lg\:padding-block-4 {
      padding-block: var(--zbk-spacing-4);
    }
    .desktop-lg\:padding-inline-4 {
      padding-inline: var(--zbk-spacing-4);
    }
    .desktop-lg\:padding-block-start-4 {
      padding-block-start: var(--zbk-spacing-4);
    }
    .desktop-lg\:padding-inline-end-4 {
      padding-inline-end: var(--zbk-spacing-4);
    }
    .desktop-lg\:padding-block-end-4 {
      padding-block-end: var(--zbk-spacing-4);
    }
    .desktop-lg\:padding-inline-start-4 {
      padding-inline-start: var(--zbk-spacing-4);
    }
    .desktop-lg\:padding-5 {
      padding-inline: var(--zbk-spacing-5);
    }
    .desktop-lg\:padding-5,
    .desktop-lg\:padding-block-5 {
      padding-block: var(--zbk-spacing-5);
    }
    .desktop-lg\:padding-inline-5 {
      padding-inline: var(--zbk-spacing-5);
    }
    .desktop-lg\:padding-block-start-5 {
      padding-block-start: var(--zbk-spacing-5);
    }
    .desktop-lg\:padding-inline-end-5 {
      padding-inline-end: var(--zbk-spacing-5);
    }
    .desktop-lg\:padding-block-end-5 {
      padding-block-end: var(--zbk-spacing-5);
    }
    .desktop-lg\:padding-inline-start-5 {
      padding-inline-start: var(--zbk-spacing-5);
    }
    .desktop-lg\:padding-6 {
      padding-inline: var(--zbk-spacing-6);
    }
    .desktop-lg\:padding-6,
    .desktop-lg\:padding-block-6 {
      padding-block: var(--zbk-spacing-6);
    }
    .desktop-lg\:padding-inline-6 {
      padding-inline: var(--zbk-spacing-6);
    }
    .desktop-lg\:padding-block-start-6 {
      padding-block-start: var(--zbk-spacing-6);
    }
    .desktop-lg\:padding-inline-end-6 {
      padding-inline-end: var(--zbk-spacing-6);
    }
    .desktop-lg\:padding-block-end-6 {
      padding-block-end: var(--zbk-spacing-6);
    }
    .desktop-lg\:padding-inline-start-6 {
      padding-inline-start: var(--zbk-spacing-6);
    }
    .desktop-lg\:padding-7 {
      padding-inline: var(--zbk-spacing-7);
    }
    .desktop-lg\:padding-7,
    .desktop-lg\:padding-block-7 {
      padding-block: var(--zbk-spacing-7);
    }
    .desktop-lg\:padding-inline-7 {
      padding-inline: var(--zbk-spacing-7);
    }
    .desktop-lg\:padding-block-start-7 {
      padding-block-start: var(--zbk-spacing-7);
    }
    .desktop-lg\:padding-inline-end-7 {
      padding-inline-end: var(--zbk-spacing-7);
    }
    .desktop-lg\:padding-block-end-7 {
      padding-block-end: var(--zbk-spacing-7);
    }
    .desktop-lg\:padding-inline-start-7 {
      padding-inline-start: var(--zbk-spacing-7);
    }
    .desktop-lg\:padding-8 {
      padding-inline: var(--zbk-spacing-8);
    }
    .desktop-lg\:padding-8,
    .desktop-lg\:padding-block-8 {
      padding-block: var(--zbk-spacing-8);
    }
    .desktop-lg\:padding-inline-8 {
      padding-inline: var(--zbk-spacing-8);
    }
    .desktop-lg\:padding-block-start-8 {
      padding-block-start: var(--zbk-spacing-8);
    }
    .desktop-lg\:padding-inline-end-8 {
      padding-inline-end: var(--zbk-spacing-8);
    }
    .desktop-lg\:padding-block-end-8 {
      padding-block-end: var(--zbk-spacing-8);
    }
    .desktop-lg\:padding-inline-start-8 {
      padding-inline-start: var(--zbk-spacing-8);
    }
    .desktop-lg\:padding-9 {
      padding-inline: var(--zbk-spacing-9);
    }
    .desktop-lg\:padding-9,
    .desktop-lg\:padding-block-9 {
      padding-block: var(--zbk-spacing-9);
    }
    .desktop-lg\:padding-inline-9 {
      padding-inline: var(--zbk-spacing-9);
    }
    .desktop-lg\:padding-block-start-9 {
      padding-block-start: var(--zbk-spacing-9);
    }
    .desktop-lg\:padding-inline-end-9 {
      padding-inline-end: var(--zbk-spacing-9);
    }
    .desktop-lg\:padding-block-end-9 {
      padding-block-end: var(--zbk-spacing-9);
    }
    .desktop-lg\:padding-inline-start-9 {
      padding-inline-start: var(--zbk-spacing-9);
    }
    .desktop-lg\:padding-10 {
      padding-inline: var(--zbk-spacing-10);
    }
    .desktop-lg\:padding-10,
    .desktop-lg\:padding-block-10 {
      padding-block: var(--zbk-spacing-10);
    }
    .desktop-lg\:padding-inline-10 {
      padding-inline: var(--zbk-spacing-10);
    }
    .desktop-lg\:padding-block-start-10 {
      padding-block-start: var(--zbk-spacing-10);
    }
    .desktop-lg\:padding-inline-end-10 {
      padding-inline-end: var(--zbk-spacing-10);
    }
    .desktop-lg\:padding-block-end-10 {
      padding-block-end: var(--zbk-spacing-10);
    }
    .desktop-lg\:padding-inline-start-10 {
      padding-inline-start: var(--zbk-spacing-10);
    }
    .desktop-lg\:padding-15 {
      padding-inline: var(--zbk-spacing-15);
    }
    .desktop-lg\:padding-15,
    .desktop-lg\:padding-block-15 {
      padding-block: var(--zbk-spacing-15);
    }
    .desktop-lg\:padding-inline-15 {
      padding-inline: var(--zbk-spacing-15);
    }
    .desktop-lg\:padding-block-start-15 {
      padding-block-start: var(--zbk-spacing-15);
    }
    .desktop-lg\:padding-inline-end-15 {
      padding-inline-end: var(--zbk-spacing-15);
    }
    .desktop-lg\:padding-block-end-15 {
      padding-block-end: var(--zbk-spacing-15);
    }
    .desktop-lg\:padding-inline-start-15 {
      padding-inline-start: var(--zbk-spacing-15);
    }
    .desktop-lg\:padding-20 {
      padding-inline: var(--zbk-spacing-20);
    }
    .desktop-lg\:padding-20,
    .desktop-lg\:padding-block-20 {
      padding-block: var(--zbk-spacing-20);
    }
    .desktop-lg\:padding-inline-20 {
      padding-inline: var(--zbk-spacing-20);
    }
    .desktop-lg\:padding-block-start-20 {
      padding-block-start: var(--zbk-spacing-20);
    }
    .desktop-lg\:padding-inline-end-20 {
      padding-inline-end: var(--zbk-spacing-20);
    }
    .desktop-lg\:padding-block-end-20 {
      padding-block-end: var(--zbk-spacing-20);
    }
    .desktop-lg\:padding-inline-start-20 {
      padding-inline-start: var(--zbk-spacing-20);
    }
  }
  @media (min-width: 100rem) {
    .widescreen\:padding-neg-15 {
      padding-inline: var(--zbk-spacing-neg-15);
    }
    .widescreen\:padding-block-neg-15,
    .widescreen\:padding-neg-15 {
      padding-block: var(--zbk-spacing-neg-15);
    }
    .widescreen\:padding-inline-neg-15 {
      padding-inline: var(--zbk-spacing-neg-15);
    }
    .widescreen\:padding-block-start-neg-15 {
      padding-block-start: var(--zbk-spacing-neg-15);
    }
    .widescreen\:padding-inline-end-neg-15 {
      padding-inline-end: var(--zbk-spacing-neg-15);
    }
    .widescreen\:padding-block-end-neg-15 {
      padding-block-end: var(--zbk-spacing-neg-15);
    }
    .widescreen\:padding-inline-start-neg-15 {
      padding-inline-start: var(--zbk-spacing-neg-15);
    }
    .widescreen\:padding-neg-10 {
      padding-inline: var(--zbk-spacing-neg-10);
    }
    .widescreen\:padding-block-neg-10,
    .widescreen\:padding-neg-10 {
      padding-block: var(--zbk-spacing-neg-10);
    }
    .widescreen\:padding-inline-neg-10 {
      padding-inline: var(--zbk-spacing-neg-10);
    }
    .widescreen\:padding-block-start-neg-10 {
      padding-block-start: var(--zbk-spacing-neg-10);
    }
    .widescreen\:padding-inline-end-neg-10 {
      padding-inline-end: var(--zbk-spacing-neg-10);
    }
    .widescreen\:padding-block-end-neg-10 {
      padding-block-end: var(--zbk-spacing-neg-10);
    }
    .widescreen\:padding-inline-start-neg-10 {
      padding-inline-start: var(--zbk-spacing-neg-10);
    }
    .widescreen\:padding-neg-9 {
      padding-inline: var(--zbk-spacing-neg-9);
    }
    .widescreen\:padding-block-neg-9,
    .widescreen\:padding-neg-9 {
      padding-block: var(--zbk-spacing-neg-9);
    }
    .widescreen\:padding-inline-neg-9 {
      padding-inline: var(--zbk-spacing-neg-9);
    }
    .widescreen\:padding-block-start-neg-9 {
      padding-block-start: var(--zbk-spacing-neg-9);
    }
    .widescreen\:padding-inline-end-neg-9 {
      padding-inline-end: var(--zbk-spacing-neg-9);
    }
    .widescreen\:padding-block-end-neg-9 {
      padding-block-end: var(--zbk-spacing-neg-9);
    }
    .widescreen\:padding-inline-start-neg-9 {
      padding-inline-start: var(--zbk-spacing-neg-9);
    }
    .widescreen\:padding-neg-8 {
      padding-inline: var(--zbk-spacing-neg-8);
    }
    .widescreen\:padding-block-neg-8,
    .widescreen\:padding-neg-8 {
      padding-block: var(--zbk-spacing-neg-8);
    }
    .widescreen\:padding-inline-neg-8 {
      padding-inline: var(--zbk-spacing-neg-8);
    }
    .widescreen\:padding-block-start-neg-8 {
      padding-block-start: var(--zbk-spacing-neg-8);
    }
    .widescreen\:padding-inline-end-neg-8 {
      padding-inline-end: var(--zbk-spacing-neg-8);
    }
    .widescreen\:padding-block-end-neg-8 {
      padding-block-end: var(--zbk-spacing-neg-8);
    }
    .widescreen\:padding-inline-start-neg-8 {
      padding-inline-start: var(--zbk-spacing-neg-8);
    }
    .widescreen\:padding-neg-7 {
      padding-inline: var(--zbk-spacing-neg-7);
    }
    .widescreen\:padding-block-neg-7,
    .widescreen\:padding-neg-7 {
      padding-block: var(--zbk-spacing-neg-7);
    }
    .widescreen\:padding-inline-neg-7 {
      padding-inline: var(--zbk-spacing-neg-7);
    }
    .widescreen\:padding-block-start-neg-7 {
      padding-block-start: var(--zbk-spacing-neg-7);
    }
    .widescreen\:padding-inline-end-neg-7 {
      padding-inline-end: var(--zbk-spacing-neg-7);
    }
    .widescreen\:padding-block-end-neg-7 {
      padding-block-end: var(--zbk-spacing-neg-7);
    }
    .widescreen\:padding-inline-start-neg-7 {
      padding-inline-start: var(--zbk-spacing-neg-7);
    }
    .widescreen\:padding-neg-6 {
      padding-inline: var(--zbk-spacing-neg-6);
    }
    .widescreen\:padding-block-neg-6,
    .widescreen\:padding-neg-6 {
      padding-block: var(--zbk-spacing-neg-6);
    }
    .widescreen\:padding-inline-neg-6 {
      padding-inline: var(--zbk-spacing-neg-6);
    }
    .widescreen\:padding-block-start-neg-6 {
      padding-block-start: var(--zbk-spacing-neg-6);
    }
    .widescreen\:padding-inline-end-neg-6 {
      padding-inline-end: var(--zbk-spacing-neg-6);
    }
    .widescreen\:padding-block-end-neg-6 {
      padding-block-end: var(--zbk-spacing-neg-6);
    }
    .widescreen\:padding-inline-start-neg-6 {
      padding-inline-start: var(--zbk-spacing-neg-6);
    }
    .widescreen\:padding-neg-5 {
      padding-inline: var(--zbk-spacing-neg-5);
    }
    .widescreen\:padding-block-neg-5,
    .widescreen\:padding-neg-5 {
      padding-block: var(--zbk-spacing-neg-5);
    }
    .widescreen\:padding-inline-neg-5 {
      padding-inline: var(--zbk-spacing-neg-5);
    }
    .widescreen\:padding-block-start-neg-5 {
      padding-block-start: var(--zbk-spacing-neg-5);
    }
    .widescreen\:padding-inline-end-neg-5 {
      padding-inline-end: var(--zbk-spacing-neg-5);
    }
    .widescreen\:padding-block-end-neg-5 {
      padding-block-end: var(--zbk-spacing-neg-5);
    }
    .widescreen\:padding-inline-start-neg-5 {
      padding-inline-start: var(--zbk-spacing-neg-5);
    }
    .widescreen\:padding-neg-4 {
      padding-inline: var(--zbk-spacing-neg-4);
    }
    .widescreen\:padding-block-neg-4,
    .widescreen\:padding-neg-4 {
      padding-block: var(--zbk-spacing-neg-4);
    }
    .widescreen\:padding-inline-neg-4 {
      padding-inline: var(--zbk-spacing-neg-4);
    }
    .widescreen\:padding-block-start-neg-4 {
      padding-block-start: var(--zbk-spacing-neg-4);
    }
    .widescreen\:padding-inline-end-neg-4 {
      padding-inline-end: var(--zbk-spacing-neg-4);
    }
    .widescreen\:padding-block-end-neg-4 {
      padding-block-end: var(--zbk-spacing-neg-4);
    }
    .widescreen\:padding-inline-start-neg-4 {
      padding-inline-start: var(--zbk-spacing-neg-4);
    }
    .widescreen\:padding-neg-3 {
      padding-inline: var(--zbk-spacing-neg-3);
    }
    .widescreen\:padding-block-neg-3,
    .widescreen\:padding-neg-3 {
      padding-block: var(--zbk-spacing-neg-3);
    }
    .widescreen\:padding-inline-neg-3 {
      padding-inline: var(--zbk-spacing-neg-3);
    }
    .widescreen\:padding-block-start-neg-3 {
      padding-block-start: var(--zbk-spacing-neg-3);
    }
    .widescreen\:padding-inline-end-neg-3 {
      padding-inline-end: var(--zbk-spacing-neg-3);
    }
    .widescreen\:padding-block-end-neg-3 {
      padding-block-end: var(--zbk-spacing-neg-3);
    }
    .widescreen\:padding-inline-start-neg-3 {
      padding-inline-start: var(--zbk-spacing-neg-3);
    }
    .widescreen\:padding-neg-205 {
      padding-inline: var(--zbk-spacing-neg-205);
    }
    .widescreen\:padding-block-neg-205,
    .widescreen\:padding-neg-205 {
      padding-block: var(--zbk-spacing-neg-205);
    }
    .widescreen\:padding-inline-neg-205 {
      padding-inline: var(--zbk-spacing-neg-205);
    }
    .widescreen\:padding-block-start-neg-205 {
      padding-block-start: var(--zbk-spacing-neg-205);
    }
    .widescreen\:padding-inline-end-neg-205 {
      padding-inline-end: var(--zbk-spacing-neg-205);
    }
    .widescreen\:padding-block-end-neg-205 {
      padding-block-end: var(--zbk-spacing-neg-205);
    }
    .widescreen\:padding-inline-start-neg-205 {
      padding-inline-start: var(--zbk-spacing-neg-205);
    }
    .widescreen\:padding-neg-2 {
      padding-inline: var(--zbk-spacing-neg-2);
    }
    .widescreen\:padding-block-neg-2,
    .widescreen\:padding-neg-2 {
      padding-block: var(--zbk-spacing-neg-2);
    }
    .widescreen\:padding-inline-neg-2 {
      padding-inline: var(--zbk-spacing-neg-2);
    }
    .widescreen\:padding-block-start-neg-2 {
      padding-block-start: var(--zbk-spacing-neg-2);
    }
    .widescreen\:padding-inline-end-neg-2 {
      padding-inline-end: var(--zbk-spacing-neg-2);
    }
    .widescreen\:padding-block-end-neg-2 {
      padding-block-end: var(--zbk-spacing-neg-2);
    }
    .widescreen\:padding-inline-start-neg-2 {
      padding-inline-start: var(--zbk-spacing-neg-2);
    }
    .widescreen\:padding-neg-105 {
      padding-inline: var(--zbk-spacing-neg-105);
    }
    .widescreen\:padding-block-neg-105,
    .widescreen\:padding-neg-105 {
      padding-block: var(--zbk-spacing-neg-105);
    }
    .widescreen\:padding-inline-neg-105 {
      padding-inline: var(--zbk-spacing-neg-105);
    }
    .widescreen\:padding-block-start-neg-105 {
      padding-block-start: var(--zbk-spacing-neg-105);
    }
    .widescreen\:padding-inline-end-neg-105 {
      padding-inline-end: var(--zbk-spacing-neg-105);
    }
    .widescreen\:padding-block-end-neg-105 {
      padding-block-end: var(--zbk-spacing-neg-105);
    }
    .widescreen\:padding-inline-start-neg-105 {
      padding-inline-start: var(--zbk-spacing-neg-105);
    }
    .widescreen\:padding-neg-1 {
      padding-inline: var(--zbk-spacing-neg-1);
    }
    .widescreen\:padding-block-neg-1,
    .widescreen\:padding-neg-1 {
      padding-block: var(--zbk-spacing-neg-1);
    }
    .widescreen\:padding-inline-neg-1 {
      padding-inline: var(--zbk-spacing-neg-1);
    }
    .widescreen\:padding-block-start-neg-1 {
      padding-block-start: var(--zbk-spacing-neg-1);
    }
    .widescreen\:padding-inline-end-neg-1 {
      padding-inline-end: var(--zbk-spacing-neg-1);
    }
    .widescreen\:padding-block-end-neg-1 {
      padding-block-end: var(--zbk-spacing-neg-1);
    }
    .widescreen\:padding-inline-start-neg-1 {
      padding-inline-start: var(--zbk-spacing-neg-1);
    }
    .widescreen\:padding-neg-05 {
      padding-inline: var(--zbk-spacing-neg-05);
    }
    .widescreen\:padding-block-neg-05,
    .widescreen\:padding-neg-05 {
      padding-block: var(--zbk-spacing-neg-05);
    }
    .widescreen\:padding-inline-neg-05 {
      padding-inline: var(--zbk-spacing-neg-05);
    }
    .widescreen\:padding-block-start-neg-05 {
      padding-block-start: var(--zbk-spacing-neg-05);
    }
    .widescreen\:padding-inline-end-neg-05 {
      padding-inline-end: var(--zbk-spacing-neg-05);
    }
    .widescreen\:padding-block-end-neg-05 {
      padding-block-end: var(--zbk-spacing-neg-05);
    }
    .widescreen\:padding-inline-start-neg-05 {
      padding-inline-start: var(--zbk-spacing-neg-05);
    }
    .widescreen\:padding-neg-025 {
      padding-inline: var(--zbk-spacing-neg-025);
    }
    .widescreen\:padding-block-neg-025,
    .widescreen\:padding-neg-025 {
      padding-block: var(--zbk-spacing-neg-025);
    }
    .widescreen\:padding-inline-neg-025 {
      padding-inline: var(--zbk-spacing-neg-025);
    }
    .widescreen\:padding-block-start-neg-025 {
      padding-block-start: var(--zbk-spacing-neg-025);
    }
    .widescreen\:padding-inline-end-neg-025 {
      padding-inline-end: var(--zbk-spacing-neg-025);
    }
    .widescreen\:padding-block-end-neg-025 {
      padding-block-end: var(--zbk-spacing-neg-025);
    }
    .widescreen\:padding-inline-start-neg-025 {
      padding-inline-start: var(--zbk-spacing-neg-025);
    }
    .widescreen\:padding-neg-2px {
      padding-inline: var(--zbk-spacing-neg-2px);
    }
    .widescreen\:padding-block-neg-2px,
    .widescreen\:padding-neg-2px {
      padding-block: var(--zbk-spacing-neg-2px);
    }
    .widescreen\:padding-inline-neg-2px {
      padding-inline: var(--zbk-spacing-neg-2px);
    }
    .widescreen\:padding-block-start-neg-2px {
      padding-block-start: var(--zbk-spacing-neg-2px);
    }
    .widescreen\:padding-inline-end-neg-2px {
      padding-inline-end: var(--zbk-spacing-neg-2px);
    }
    .widescreen\:padding-block-end-neg-2px {
      padding-block-end: var(--zbk-spacing-neg-2px);
    }
    .widescreen\:padding-inline-start-neg-2px {
      padding-inline-start: var(--zbk-spacing-neg-2px);
    }
    .widescreen\:padding-neg-1px {
      padding-inline: var(--zbk-spacing-neg-1px);
    }
    .widescreen\:padding-block-neg-1px,
    .widescreen\:padding-neg-1px {
      padding-block: var(--zbk-spacing-neg-1px);
    }
    .widescreen\:padding-inline-neg-1px {
      padding-inline: var(--zbk-spacing-neg-1px);
    }
    .widescreen\:padding-block-start-neg-1px {
      padding-block-start: var(--zbk-spacing-neg-1px);
    }
    .widescreen\:padding-inline-end-neg-1px {
      padding-inline-end: var(--zbk-spacing-neg-1px);
    }
    .widescreen\:padding-block-end-neg-1px {
      padding-block-end: var(--zbk-spacing-neg-1px);
    }
    .widescreen\:padding-inline-start-neg-1px {
      padding-inline-start: var(--zbk-spacing-neg-1px);
    }
    .widescreen\:padding-0 {
      padding-inline: var(--zbk-spacing-0);
    }
    .widescreen\:padding-0,
    .widescreen\:padding-block-0 {
      padding-block: var(--zbk-spacing-0);
    }
    .widescreen\:padding-inline-0 {
      padding-inline: var(--zbk-spacing-0);
    }
    .widescreen\:padding-block-start-0 {
      padding-block-start: var(--zbk-spacing-0);
    }
    .widescreen\:padding-inline-end-0 {
      padding-inline-end: var(--zbk-spacing-0);
    }
    .widescreen\:padding-block-end-0 {
      padding-block-end: var(--zbk-spacing-0);
    }
    .widescreen\:padding-inline-start-0 {
      padding-inline-start: var(--zbk-spacing-0);
    }
    .widescreen\:padding-1px {
      padding-inline: var(--zbk-spacing-1px);
    }
    .widescreen\:padding-1px,
    .widescreen\:padding-block-1px {
      padding-block: var(--zbk-spacing-1px);
    }
    .widescreen\:padding-inline-1px {
      padding-inline: var(--zbk-spacing-1px);
    }
    .widescreen\:padding-block-start-1px {
      padding-block-start: var(--zbk-spacing-1px);
    }
    .widescreen\:padding-inline-end-1px {
      padding-inline-end: var(--zbk-spacing-1px);
    }
    .widescreen\:padding-block-end-1px {
      padding-block-end: var(--zbk-spacing-1px);
    }
    .widescreen\:padding-inline-start-1px {
      padding-inline-start: var(--zbk-spacing-1px);
    }
    .widescreen\:padding-2px {
      padding-inline: var(--zbk-spacing-2px);
    }
    .widescreen\:padding-2px,
    .widescreen\:padding-block-2px {
      padding-block: var(--zbk-spacing-2px);
    }
    .widescreen\:padding-inline-2px {
      padding-inline: var(--zbk-spacing-2px);
    }
    .widescreen\:padding-block-start-2px {
      padding-block-start: var(--zbk-spacing-2px);
    }
    .widescreen\:padding-inline-end-2px {
      padding-inline-end: var(--zbk-spacing-2px);
    }
    .widescreen\:padding-block-end-2px {
      padding-block-end: var(--zbk-spacing-2px);
    }
    .widescreen\:padding-inline-start-2px {
      padding-inline-start: var(--zbk-spacing-2px);
    }
    .widescreen\:padding-025 {
      padding-inline: var(--zbk-spacing-025);
    }
    .widescreen\:padding-025,
    .widescreen\:padding-block-025 {
      padding-block: var(--zbk-spacing-025);
    }
    .widescreen\:padding-inline-025 {
      padding-inline: var(--zbk-spacing-025);
    }
    .widescreen\:padding-block-start-025 {
      padding-block-start: var(--zbk-spacing-025);
    }
    .widescreen\:padding-inline-end-025 {
      padding-inline-end: var(--zbk-spacing-025);
    }
    .widescreen\:padding-block-end-025 {
      padding-block-end: var(--zbk-spacing-025);
    }
    .widescreen\:padding-inline-start-025 {
      padding-inline-start: var(--zbk-spacing-025);
    }
    .widescreen\:padding-05 {
      padding-inline: var(--zbk-spacing-05);
    }
    .widescreen\:padding-05,
    .widescreen\:padding-block-05 {
      padding-block: var(--zbk-spacing-05);
    }
    .widescreen\:padding-inline-05 {
      padding-inline: var(--zbk-spacing-05);
    }
    .widescreen\:padding-block-start-05 {
      padding-block-start: var(--zbk-spacing-05);
    }
    .widescreen\:padding-inline-end-05 {
      padding-inline-end: var(--zbk-spacing-05);
    }
    .widescreen\:padding-block-end-05 {
      padding-block-end: var(--zbk-spacing-05);
    }
    .widescreen\:padding-inline-start-05 {
      padding-inline-start: var(--zbk-spacing-05);
    }
    .widescreen\:padding-1 {
      padding-inline: var(--zbk-spacing-1);
    }
    .widescreen\:padding-1,
    .widescreen\:padding-block-1 {
      padding-block: var(--zbk-spacing-1);
    }
    .widescreen\:padding-inline-1 {
      padding-inline: var(--zbk-spacing-1);
    }
    .widescreen\:padding-block-start-1 {
      padding-block-start: var(--zbk-spacing-1);
    }
    .widescreen\:padding-inline-end-1 {
      padding-inline-end: var(--zbk-spacing-1);
    }
    .widescreen\:padding-block-end-1 {
      padding-block-end: var(--zbk-spacing-1);
    }
    .widescreen\:padding-inline-start-1 {
      padding-inline-start: var(--zbk-spacing-1);
    }
    .widescreen\:padding-105 {
      padding-inline: var(--zbk-spacing-105);
    }
    .widescreen\:padding-105,
    .widescreen\:padding-block-105 {
      padding-block: var(--zbk-spacing-105);
    }
    .widescreen\:padding-inline-105 {
      padding-inline: var(--zbk-spacing-105);
    }
    .widescreen\:padding-block-start-105 {
      padding-block-start: var(--zbk-spacing-105);
    }
    .widescreen\:padding-inline-end-105 {
      padding-inline-end: var(--zbk-spacing-105);
    }
    .widescreen\:padding-block-end-105 {
      padding-block-end: var(--zbk-spacing-105);
    }
    .widescreen\:padding-inline-start-105 {
      padding-inline-start: var(--zbk-spacing-105);
    }
    .widescreen\:padding-2 {
      padding-inline: var(--zbk-spacing-2);
    }
    .widescreen\:padding-2,
    .widescreen\:padding-block-2 {
      padding-block: var(--zbk-spacing-2);
    }
    .widescreen\:padding-inline-2 {
      padding-inline: var(--zbk-spacing-2);
    }
    .widescreen\:padding-block-start-2 {
      padding-block-start: var(--zbk-spacing-2);
    }
    .widescreen\:padding-inline-end-2 {
      padding-inline-end: var(--zbk-spacing-2);
    }
    .widescreen\:padding-block-end-2 {
      padding-block-end: var(--zbk-spacing-2);
    }
    .widescreen\:padding-inline-start-2 {
      padding-inline-start: var(--zbk-spacing-2);
    }
    .widescreen\:padding-205 {
      padding-inline: var(--zbk-spacing-205);
    }
    .widescreen\:padding-205,
    .widescreen\:padding-block-205 {
      padding-block: var(--zbk-spacing-205);
    }
    .widescreen\:padding-inline-205 {
      padding-inline: var(--zbk-spacing-205);
    }
    .widescreen\:padding-block-start-205 {
      padding-block-start: var(--zbk-spacing-205);
    }
    .widescreen\:padding-inline-end-205 {
      padding-inline-end: var(--zbk-spacing-205);
    }
    .widescreen\:padding-block-end-205 {
      padding-block-end: var(--zbk-spacing-205);
    }
    .widescreen\:padding-inline-start-205 {
      padding-inline-start: var(--zbk-spacing-205);
    }
    .widescreen\:padding-3 {
      padding-inline: var(--zbk-spacing-3);
    }
    .widescreen\:padding-3,
    .widescreen\:padding-block-3 {
      padding-block: var(--zbk-spacing-3);
    }
    .widescreen\:padding-inline-3 {
      padding-inline: var(--zbk-spacing-3);
    }
    .widescreen\:padding-block-start-3 {
      padding-block-start: var(--zbk-spacing-3);
    }
    .widescreen\:padding-inline-end-3 {
      padding-inline-end: var(--zbk-spacing-3);
    }
    .widescreen\:padding-block-end-3 {
      padding-block-end: var(--zbk-spacing-3);
    }
    .widescreen\:padding-inline-start-3 {
      padding-inline-start: var(--zbk-spacing-3);
    }
    .widescreen\:padding-4 {
      padding-inline: var(--zbk-spacing-4);
    }
    .widescreen\:padding-4,
    .widescreen\:padding-block-4 {
      padding-block: var(--zbk-spacing-4);
    }
    .widescreen\:padding-inline-4 {
      padding-inline: var(--zbk-spacing-4);
    }
    .widescreen\:padding-block-start-4 {
      padding-block-start: var(--zbk-spacing-4);
    }
    .widescreen\:padding-inline-end-4 {
      padding-inline-end: var(--zbk-spacing-4);
    }
    .widescreen\:padding-block-end-4 {
      padding-block-end: var(--zbk-spacing-4);
    }
    .widescreen\:padding-inline-start-4 {
      padding-inline-start: var(--zbk-spacing-4);
    }
    .widescreen\:padding-5 {
      padding-inline: var(--zbk-spacing-5);
    }
    .widescreen\:padding-5,
    .widescreen\:padding-block-5 {
      padding-block: var(--zbk-spacing-5);
    }
    .widescreen\:padding-inline-5 {
      padding-inline: var(--zbk-spacing-5);
    }
    .widescreen\:padding-block-start-5 {
      padding-block-start: var(--zbk-spacing-5);
    }
    .widescreen\:padding-inline-end-5 {
      padding-inline-end: var(--zbk-spacing-5);
    }
    .widescreen\:padding-block-end-5 {
      padding-block-end: var(--zbk-spacing-5);
    }
    .widescreen\:padding-inline-start-5 {
      padding-inline-start: var(--zbk-spacing-5);
    }
    .widescreen\:padding-6 {
      padding-inline: var(--zbk-spacing-6);
    }
    .widescreen\:padding-6,
    .widescreen\:padding-block-6 {
      padding-block: var(--zbk-spacing-6);
    }
    .widescreen\:padding-inline-6 {
      padding-inline: var(--zbk-spacing-6);
    }
    .widescreen\:padding-block-start-6 {
      padding-block-start: var(--zbk-spacing-6);
    }
    .widescreen\:padding-inline-end-6 {
      padding-inline-end: var(--zbk-spacing-6);
    }
    .widescreen\:padding-block-end-6 {
      padding-block-end: var(--zbk-spacing-6);
    }
    .widescreen\:padding-inline-start-6 {
      padding-inline-start: var(--zbk-spacing-6);
    }
    .widescreen\:padding-7 {
      padding-inline: var(--zbk-spacing-7);
    }
    .widescreen\:padding-7,
    .widescreen\:padding-block-7 {
      padding-block: var(--zbk-spacing-7);
    }
    .widescreen\:padding-inline-7 {
      padding-inline: var(--zbk-spacing-7);
    }
    .widescreen\:padding-block-start-7 {
      padding-block-start: var(--zbk-spacing-7);
    }
    .widescreen\:padding-inline-end-7 {
      padding-inline-end: var(--zbk-spacing-7);
    }
    .widescreen\:padding-block-end-7 {
      padding-block-end: var(--zbk-spacing-7);
    }
    .widescreen\:padding-inline-start-7 {
      padding-inline-start: var(--zbk-spacing-7);
    }
    .widescreen\:padding-8 {
      padding-inline: var(--zbk-spacing-8);
    }
    .widescreen\:padding-8,
    .widescreen\:padding-block-8 {
      padding-block: var(--zbk-spacing-8);
    }
    .widescreen\:padding-inline-8 {
      padding-inline: var(--zbk-spacing-8);
    }
    .widescreen\:padding-block-start-8 {
      padding-block-start: var(--zbk-spacing-8);
    }
    .widescreen\:padding-inline-end-8 {
      padding-inline-end: var(--zbk-spacing-8);
    }
    .widescreen\:padding-block-end-8 {
      padding-block-end: var(--zbk-spacing-8);
    }
    .widescreen\:padding-inline-start-8 {
      padding-inline-start: var(--zbk-spacing-8);
    }
    .widescreen\:padding-9 {
      padding-inline: var(--zbk-spacing-9);
    }
    .widescreen\:padding-9,
    .widescreen\:padding-block-9 {
      padding-block: var(--zbk-spacing-9);
    }
    .widescreen\:padding-inline-9 {
      padding-inline: var(--zbk-spacing-9);
    }
    .widescreen\:padding-block-start-9 {
      padding-block-start: var(--zbk-spacing-9);
    }
    .widescreen\:padding-inline-end-9 {
      padding-inline-end: var(--zbk-spacing-9);
    }
    .widescreen\:padding-block-end-9 {
      padding-block-end: var(--zbk-spacing-9);
    }
    .widescreen\:padding-inline-start-9 {
      padding-inline-start: var(--zbk-spacing-9);
    }
    .widescreen\:padding-10 {
      padding-inline: var(--zbk-spacing-10);
    }
    .widescreen\:padding-10,
    .widescreen\:padding-block-10 {
      padding-block: var(--zbk-spacing-10);
    }
    .widescreen\:padding-inline-10 {
      padding-inline: var(--zbk-spacing-10);
    }
    .widescreen\:padding-block-start-10 {
      padding-block-start: var(--zbk-spacing-10);
    }
    .widescreen\:padding-inline-end-10 {
      padding-inline-end: var(--zbk-spacing-10);
    }
    .widescreen\:padding-block-end-10 {
      padding-block-end: var(--zbk-spacing-10);
    }
    .widescreen\:padding-inline-start-10 {
      padding-inline-start: var(--zbk-spacing-10);
    }
    .widescreen\:padding-15 {
      padding-inline: var(--zbk-spacing-15);
    }
    .widescreen\:padding-15,
    .widescreen\:padding-block-15 {
      padding-block: var(--zbk-spacing-15);
    }
    .widescreen\:padding-inline-15 {
      padding-inline: var(--zbk-spacing-15);
    }
    .widescreen\:padding-block-start-15 {
      padding-block-start: var(--zbk-spacing-15);
    }
    .widescreen\:padding-inline-end-15 {
      padding-inline-end: var(--zbk-spacing-15);
    }
    .widescreen\:padding-block-end-15 {
      padding-block-end: var(--zbk-spacing-15);
    }
    .widescreen\:padding-inline-start-15 {
      padding-inline-start: var(--zbk-spacing-15);
    }
    .widescreen\:padding-20 {
      padding-inline: var(--zbk-spacing-20);
    }
    .widescreen\:padding-20,
    .widescreen\:padding-block-20 {
      padding-block: var(--zbk-spacing-20);
    }
    .widescreen\:padding-inline-20 {
      padding-inline: var(--zbk-spacing-20);
    }
    .widescreen\:padding-block-start-20 {
      padding-block-start: var(--zbk-spacing-20);
    }
    .widescreen\:padding-inline-end-20 {
      padding-inline-end: var(--zbk-spacing-20);
    }
    .widescreen\:padding-block-end-20 {
      padding-block-end: var(--zbk-spacing-20);
    }
    .widescreen\:padding-inline-start-20 {
      padding-inline-start: var(--zbk-spacing-20);
    }
  }
  @media (min-width: 40rem) {
    .tablet\:gap-neg-15 {
      gap: var(--zbk-spacing-neg-15);
    }
    .tablet\:gap-neg-10 {
      gap: var(--zbk-spacing-neg-10);
    }
    .tablet\:gap-neg-9 {
      gap: var(--zbk-spacing-neg-9);
    }
    .tablet\:gap-neg-8 {
      gap: var(--zbk-spacing-neg-8);
    }
    .tablet\:gap-neg-7 {
      gap: var(--zbk-spacing-neg-7);
    }
    .tablet\:gap-neg-6 {
      gap: var(--zbk-spacing-neg-6);
    }
    .tablet\:gap-neg-5 {
      gap: var(--zbk-spacing-neg-5);
    }
    .tablet\:gap-neg-4 {
      gap: var(--zbk-spacing-neg-4);
    }
    .tablet\:gap-neg-3 {
      gap: var(--zbk-spacing-neg-3);
    }
    .tablet\:gap-neg-205 {
      gap: var(--zbk-spacing-neg-205);
    }
    .tablet\:gap-neg-2 {
      gap: var(--zbk-spacing-neg-2);
    }
    .tablet\:gap-neg-105 {
      gap: var(--zbk-spacing-neg-105);
    }
    .tablet\:gap-neg-1 {
      gap: var(--zbk-spacing-neg-1);
    }
    .tablet\:gap-neg-05 {
      gap: var(--zbk-spacing-neg-05);
    }
    .tablet\:gap-neg-025 {
      gap: var(--zbk-spacing-neg-025);
    }
    .tablet\:gap-neg-2px {
      gap: var(--zbk-spacing-neg-2px);
    }
    .tablet\:gap-neg-1px {
      gap: var(--zbk-spacing-neg-1px);
    }
    .tablet\:gap-0 {
      gap: var(--zbk-spacing-0);
    }
    .tablet\:gap-1px {
      gap: var(--zbk-spacing-1px);
    }
    .tablet\:gap-2px {
      gap: var(--zbk-spacing-2px);
    }
    .tablet\:gap-025 {
      gap: var(--zbk-spacing-025);
    }
    .tablet\:gap-05 {
      gap: var(--zbk-spacing-05);
    }
    .tablet\:gap-1 {
      gap: var(--zbk-spacing-1);
    }
    .tablet\:gap-105 {
      gap: var(--zbk-spacing-105);
    }
    .tablet\:gap-2 {
      gap: var(--zbk-spacing-2);
    }
    .tablet\:gap-205 {
      gap: var(--zbk-spacing-205);
    }
    .tablet\:gap-3 {
      gap: var(--zbk-spacing-3);
    }
    .tablet\:gap-4 {
      gap: var(--zbk-spacing-4);
    }
    .tablet\:gap-5 {
      gap: var(--zbk-spacing-5);
    }
    .tablet\:gap-6 {
      gap: var(--zbk-spacing-6);
    }
    .tablet\:gap-7 {
      gap: var(--zbk-spacing-7);
    }
    .tablet\:gap-8 {
      gap: var(--zbk-spacing-8);
    }
    .tablet\:gap-9 {
      gap: var(--zbk-spacing-9);
    }
    .tablet\:gap-10 {
      gap: var(--zbk-spacing-10);
    }
    .tablet\:gap-15 {
      gap: var(--zbk-spacing-15);
    }
    .tablet\:gap-20 {
      gap: var(--zbk-spacing-20);
    }
  }
  @media (min-width: 50rem) {
    .tablet-lg\:gap-neg-15 {
      gap: var(--zbk-spacing-neg-15);
    }
    .tablet-lg\:gap-neg-10 {
      gap: var(--zbk-spacing-neg-10);
    }
    .tablet-lg\:gap-neg-9 {
      gap: var(--zbk-spacing-neg-9);
    }
    .tablet-lg\:gap-neg-8 {
      gap: var(--zbk-spacing-neg-8);
    }
    .tablet-lg\:gap-neg-7 {
      gap: var(--zbk-spacing-neg-7);
    }
    .tablet-lg\:gap-neg-6 {
      gap: var(--zbk-spacing-neg-6);
    }
    .tablet-lg\:gap-neg-5 {
      gap: var(--zbk-spacing-neg-5);
    }
    .tablet-lg\:gap-neg-4 {
      gap: var(--zbk-spacing-neg-4);
    }
    .tablet-lg\:gap-neg-3 {
      gap: var(--zbk-spacing-neg-3);
    }
    .tablet-lg\:gap-neg-205 {
      gap: var(--zbk-spacing-neg-205);
    }
    .tablet-lg\:gap-neg-2 {
      gap: var(--zbk-spacing-neg-2);
    }
    .tablet-lg\:gap-neg-105 {
      gap: var(--zbk-spacing-neg-105);
    }
    .tablet-lg\:gap-neg-1 {
      gap: var(--zbk-spacing-neg-1);
    }
    .tablet-lg\:gap-neg-05 {
      gap: var(--zbk-spacing-neg-05);
    }
    .tablet-lg\:gap-neg-025 {
      gap: var(--zbk-spacing-neg-025);
    }
    .tablet-lg\:gap-neg-2px {
      gap: var(--zbk-spacing-neg-2px);
    }
    .tablet-lg\:gap-neg-1px {
      gap: var(--zbk-spacing-neg-1px);
    }
    .tablet-lg\:gap-0 {
      gap: var(--zbk-spacing-0);
    }
    .tablet-lg\:gap-1px {
      gap: var(--zbk-spacing-1px);
    }
    .tablet-lg\:gap-2px {
      gap: var(--zbk-spacing-2px);
    }
    .tablet-lg\:gap-025 {
      gap: var(--zbk-spacing-025);
    }
    .tablet-lg\:gap-05 {
      gap: var(--zbk-spacing-05);
    }
    .tablet-lg\:gap-1 {
      gap: var(--zbk-spacing-1);
    }
    .tablet-lg\:gap-105 {
      gap: var(--zbk-spacing-105);
    }
    .tablet-lg\:gap-2 {
      gap: var(--zbk-spacing-2);
    }
    .tablet-lg\:gap-205 {
      gap: var(--zbk-spacing-205);
    }
    .tablet-lg\:gap-3 {
      gap: var(--zbk-spacing-3);
    }
    .tablet-lg\:gap-4 {
      gap: var(--zbk-spacing-4);
    }
    .tablet-lg\:gap-5 {
      gap: var(--zbk-spacing-5);
    }
    .tablet-lg\:gap-6 {
      gap: var(--zbk-spacing-6);
    }
    .tablet-lg\:gap-7 {
      gap: var(--zbk-spacing-7);
    }
    .tablet-lg\:gap-8 {
      gap: var(--zbk-spacing-8);
    }
    .tablet-lg\:gap-9 {
      gap: var(--zbk-spacing-9);
    }
    .tablet-lg\:gap-10 {
      gap: var(--zbk-spacing-10);
    }
    .tablet-lg\:gap-15 {
      gap: var(--zbk-spacing-15);
    }
    .tablet-lg\:gap-20 {
      gap: var(--zbk-spacing-20);
    }
  }
  @media (min-width: 70rem) {
    .desktop\:gap-neg-15 {
      gap: var(--zbk-spacing-neg-15);
    }
    .desktop\:gap-neg-10 {
      gap: var(--zbk-spacing-neg-10);
    }
    .desktop\:gap-neg-9 {
      gap: var(--zbk-spacing-neg-9);
    }
    .desktop\:gap-neg-8 {
      gap: var(--zbk-spacing-neg-8);
    }
    .desktop\:gap-neg-7 {
      gap: var(--zbk-spacing-neg-7);
    }
    .desktop\:gap-neg-6 {
      gap: var(--zbk-spacing-neg-6);
    }
    .desktop\:gap-neg-5 {
      gap: var(--zbk-spacing-neg-5);
    }
    .desktop\:gap-neg-4 {
      gap: var(--zbk-spacing-neg-4);
    }
    .desktop\:gap-neg-3 {
      gap: var(--zbk-spacing-neg-3);
    }
    .desktop\:gap-neg-205 {
      gap: var(--zbk-spacing-neg-205);
    }
    .desktop\:gap-neg-2 {
      gap: var(--zbk-spacing-neg-2);
    }
    .desktop\:gap-neg-105 {
      gap: var(--zbk-spacing-neg-105);
    }
    .desktop\:gap-neg-1 {
      gap: var(--zbk-spacing-neg-1);
    }
    .desktop\:gap-neg-05 {
      gap: var(--zbk-spacing-neg-05);
    }
    .desktop\:gap-neg-025 {
      gap: var(--zbk-spacing-neg-025);
    }
    .desktop\:gap-neg-2px {
      gap: var(--zbk-spacing-neg-2px);
    }
    .desktop\:gap-neg-1px {
      gap: var(--zbk-spacing-neg-1px);
    }
    .desktop\:gap-0 {
      gap: var(--zbk-spacing-0);
    }
    .desktop\:gap-1px {
      gap: var(--zbk-spacing-1px);
    }
    .desktop\:gap-2px {
      gap: var(--zbk-spacing-2px);
    }
    .desktop\:gap-025 {
      gap: var(--zbk-spacing-025);
    }
    .desktop\:gap-05 {
      gap: var(--zbk-spacing-05);
    }
    .desktop\:gap-1 {
      gap: var(--zbk-spacing-1);
    }
    .desktop\:gap-105 {
      gap: var(--zbk-spacing-105);
    }
    .desktop\:gap-2 {
      gap: var(--zbk-spacing-2);
    }
    .desktop\:gap-205 {
      gap: var(--zbk-spacing-205);
    }
    .desktop\:gap-3 {
      gap: var(--zbk-spacing-3);
    }
    .desktop\:gap-4 {
      gap: var(--zbk-spacing-4);
    }
    .desktop\:gap-5 {
      gap: var(--zbk-spacing-5);
    }
    .desktop\:gap-6 {
      gap: var(--zbk-spacing-6);
    }
    .desktop\:gap-7 {
      gap: var(--zbk-spacing-7);
    }
    .desktop\:gap-8 {
      gap: var(--zbk-spacing-8);
    }
    .desktop\:gap-9 {
      gap: var(--zbk-spacing-9);
    }
    .desktop\:gap-10 {
      gap: var(--zbk-spacing-10);
    }
    .desktop\:gap-15 {
      gap: var(--zbk-spacing-15);
    }
    .desktop\:gap-20 {
      gap: var(--zbk-spacing-20);
    }
  }
  @media (min-width: 80rem) {
    .desktop-lg\:gap-neg-15 {
      gap: var(--zbk-spacing-neg-15);
    }
    .desktop-lg\:gap-neg-10 {
      gap: var(--zbk-spacing-neg-10);
    }
    .desktop-lg\:gap-neg-9 {
      gap: var(--zbk-spacing-neg-9);
    }
    .desktop-lg\:gap-neg-8 {
      gap: var(--zbk-spacing-neg-8);
    }
    .desktop-lg\:gap-neg-7 {
      gap: var(--zbk-spacing-neg-7);
    }
    .desktop-lg\:gap-neg-6 {
      gap: var(--zbk-spacing-neg-6);
    }
    .desktop-lg\:gap-neg-5 {
      gap: var(--zbk-spacing-neg-5);
    }
    .desktop-lg\:gap-neg-4 {
      gap: var(--zbk-spacing-neg-4);
    }
    .desktop-lg\:gap-neg-3 {
      gap: var(--zbk-spacing-neg-3);
    }
    .desktop-lg\:gap-neg-205 {
      gap: var(--zbk-spacing-neg-205);
    }
    .desktop-lg\:gap-neg-2 {
      gap: var(--zbk-spacing-neg-2);
    }
    .desktop-lg\:gap-neg-105 {
      gap: var(--zbk-spacing-neg-105);
    }
    .desktop-lg\:gap-neg-1 {
      gap: var(--zbk-spacing-neg-1);
    }
    .desktop-lg\:gap-neg-05 {
      gap: var(--zbk-spacing-neg-05);
    }
    .desktop-lg\:gap-neg-025 {
      gap: var(--zbk-spacing-neg-025);
    }
    .desktop-lg\:gap-neg-2px {
      gap: var(--zbk-spacing-neg-2px);
    }
    .desktop-lg\:gap-neg-1px {
      gap: var(--zbk-spacing-neg-1px);
    }
    .desktop-lg\:gap-0 {
      gap: var(--zbk-spacing-0);
    }
    .desktop-lg\:gap-1px {
      gap: var(--zbk-spacing-1px);
    }
    .desktop-lg\:gap-2px {
      gap: var(--zbk-spacing-2px);
    }
    .desktop-lg\:gap-025 {
      gap: var(--zbk-spacing-025);
    }
    .desktop-lg\:gap-05 {
      gap: var(--zbk-spacing-05);
    }
    .desktop-lg\:gap-1 {
      gap: var(--zbk-spacing-1);
    }
    .desktop-lg\:gap-105 {
      gap: var(--zbk-spacing-105);
    }
    .desktop-lg\:gap-2 {
      gap: var(--zbk-spacing-2);
    }
    .desktop-lg\:gap-205 {
      gap: var(--zbk-spacing-205);
    }
    .desktop-lg\:gap-3 {
      gap: var(--zbk-spacing-3);
    }
    .desktop-lg\:gap-4 {
      gap: var(--zbk-spacing-4);
    }
    .desktop-lg\:gap-5 {
      gap: var(--zbk-spacing-5);
    }
    .desktop-lg\:gap-6 {
      gap: var(--zbk-spacing-6);
    }
    .desktop-lg\:gap-7 {
      gap: var(--zbk-spacing-7);
    }
    .desktop-lg\:gap-8 {
      gap: var(--zbk-spacing-8);
    }
    .desktop-lg\:gap-9 {
      gap: var(--zbk-spacing-9);
    }
    .desktop-lg\:gap-10 {
      gap: var(--zbk-spacing-10);
    }
    .desktop-lg\:gap-15 {
      gap: var(--zbk-spacing-15);
    }
    .desktop-lg\:gap-20 {
      gap: var(--zbk-spacing-20);
    }
  }
  @media (min-width: 100rem) {
    .widescreen\:gap-neg-15 {
      gap: var(--zbk-spacing-neg-15);
    }
    .widescreen\:gap-neg-10 {
      gap: var(--zbk-spacing-neg-10);
    }
    .widescreen\:gap-neg-9 {
      gap: var(--zbk-spacing-neg-9);
    }
    .widescreen\:gap-neg-8 {
      gap: var(--zbk-spacing-neg-8);
    }
    .widescreen\:gap-neg-7 {
      gap: var(--zbk-spacing-neg-7);
    }
    .widescreen\:gap-neg-6 {
      gap: var(--zbk-spacing-neg-6);
    }
    .widescreen\:gap-neg-5 {
      gap: var(--zbk-spacing-neg-5);
    }
    .widescreen\:gap-neg-4 {
      gap: var(--zbk-spacing-neg-4);
    }
    .widescreen\:gap-neg-3 {
      gap: var(--zbk-spacing-neg-3);
    }
    .widescreen\:gap-neg-205 {
      gap: var(--zbk-spacing-neg-205);
    }
    .widescreen\:gap-neg-2 {
      gap: var(--zbk-spacing-neg-2);
    }
    .widescreen\:gap-neg-105 {
      gap: var(--zbk-spacing-neg-105);
    }
    .widescreen\:gap-neg-1 {
      gap: var(--zbk-spacing-neg-1);
    }
    .widescreen\:gap-neg-05 {
      gap: var(--zbk-spacing-neg-05);
    }
    .widescreen\:gap-neg-025 {
      gap: var(--zbk-spacing-neg-025);
    }
    .widescreen\:gap-neg-2px {
      gap: var(--zbk-spacing-neg-2px);
    }
    .widescreen\:gap-neg-1px {
      gap: var(--zbk-spacing-neg-1px);
    }
    .widescreen\:gap-0 {
      gap: var(--zbk-spacing-0);
    }
    .widescreen\:gap-1px {
      gap: var(--zbk-spacing-1px);
    }
    .widescreen\:gap-2px {
      gap: var(--zbk-spacing-2px);
    }
    .widescreen\:gap-025 {
      gap: var(--zbk-spacing-025);
    }
    .widescreen\:gap-05 {
      gap: var(--zbk-spacing-05);
    }
    .widescreen\:gap-1 {
      gap: var(--zbk-spacing-1);
    }
    .widescreen\:gap-105 {
      gap: var(--zbk-spacing-105);
    }
    .widescreen\:gap-2 {
      gap: var(--zbk-spacing-2);
    }
    .widescreen\:gap-205 {
      gap: var(--zbk-spacing-205);
    }
    .widescreen\:gap-3 {
      gap: var(--zbk-spacing-3);
    }
    .widescreen\:gap-4 {
      gap: var(--zbk-spacing-4);
    }
    .widescreen\:gap-5 {
      gap: var(--zbk-spacing-5);
    }
    .widescreen\:gap-6 {
      gap: var(--zbk-spacing-6);
    }
    .widescreen\:gap-7 {
      gap: var(--zbk-spacing-7);
    }
    .widescreen\:gap-8 {
      gap: var(--zbk-spacing-8);
    }
    .widescreen\:gap-9 {
      gap: var(--zbk-spacing-9);
    }
    .widescreen\:gap-10 {
      gap: var(--zbk-spacing-10);
    }
    .widescreen\:gap-15 {
      gap: var(--zbk-spacing-15);
    }
    .widescreen\:gap-20 {
      gap: var(--zbk-spacing-20);
    }
  }
}
:root {
  --zbk-radio-size: var(--zbk-spacing-205);
  --zbk-radio-border-radius: var(--zbk-border-radius-pill);
  --zbk-radio-border-width: var(--zbk-border-width-md);
  --zbk-radio-background: var(--zbk-body-background);
  --zbk-radio-background-checked: var(--zbk-accent);
  --zbk-radio-border-color: var(--zbk-accent-400);
  --zbk-radio-border-color-hover: var(--zbk-accent-500);
  --zbk-radio-border-color-active: var(--zbk-accent);
  --zbk-radio-border-color-disabled: var(--zbk-accent-200);
  --zbk-radio-indicator-size: var(--zbk-spacing-105);
  --zbk-radio-indicator-border-radius: var(--zbk-border-radius-pill);
  --zbk-radio-indicator-color: var(--zbk-reverse-ink);
  --zbk-radio-indicator-disabled-color: var(--zbk-accent-300);
  --zbk-radio-focus-ring-color: var(--zbk-focus-color);
  --zbk-radio-focus-ring-width: var(--zbk-border-width-lg);
  --zbk-radio-focus-ring-offset: var(--zbk-spacing-05);
  --zbk-radio-transition-timing-function: ease;
  --zbk-radio-transition-duration: 120ms;
  --zbk-radio-disabled-opacity: 0.7;
  --zbk-radio-label-color: var(--zbk-ink);
  --zbk-radio-label-disabled-color: var(--zbk-accent-400);
  --zbk-radio-label-font-family: var(--zbk-font-family-interface);
  --zbk-radio-label-font-size: var(--zbk-font-size-md);
  --zbk-radio-label-font-weight: 400;
  --zbk-radio-label-line-height: var(--zbk-line-height-interface);
  --zbk-radio-label-letter-spacing: var(--zbk-letter-spacing-interface);
  --zbk-radio-label-gap: var(--zbk-spacing-1);
}
z-radio {
  display: inline-block;
}
.z-radio {
  align-items: center;
  color: var(--zbk-radio-label-color);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--zbk-radio-label-font-family);
  font-size: var(--zbk-radio-label-font-size);
  font-weight: var(--zbk-radio-label-font-weight);
  gap: var(--zbk-radio-label-gap);
  letter-spacing: var(--zbk-radio-label-letter-spacing);
  line-height: var(--zbk-radio-label-line-height);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.z-radio__input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--zbk-radio-background);
  border: var(--zbk-radio-border-width) solid var(--zbk-radio-border-color);
  border-radius: var(--zbk-radio-border-radius);
  display: grid;
  height: var(--zbk-radio-size);
  margin: 0;
  place-content: center;
  position: relative;
  transition:
    background-color var(--zbk-radio-transition-duration)
      var(--zbk-radio-transition-timing-function),
    border-color var(--zbk-radio-transition-duration)
      var(--zbk-radio-transition-timing-function),
    box-shadow var(--zbk-radio-transition-duration)
      var(--zbk-radio-transition-timing-function),
    transform var(--zbk-radio-transition-duration)
      var(--zbk-radio-transition-timing-function);
  width: var(--zbk-radio-size);
}
.z-radio__input:before {
  background-color: var(--zbk-radio-indicator-color);
  border-radius: var(--zbk-radio-indicator-border-radius);
  content: "";
  height: var(--zbk-radio-indicator-size);
  transform: scale(0);
  transition: transform var(--zbk-radio-transition-duration)
    var(--zbk-radio-transition-timing-function);
  width: var(--zbk-radio-indicator-size);
}
.z-radio__input:focus {
  outline: none;
}
.z-radio__input:focus-visible {
  border-color: var(--zbk-radio-border-color-active);
  outline: var(--zbk-radio-focus-ring-width) solid
    var(--zbk-radio-focus-ring-color);
  outline-offset: var(--zbk-radio-focus-ring-offset);
}
.z-radio__input:checked {
  background-color: var(--zbk-radio-background-checked);
  border-color: var(--zbk-radio-border-color-active);
}
.z-radio__input:checked:before {
  transform: scale(1);
}
.z-radio__input:disabled {
  background-color: var(--zbk-radio-background);
  border-color: var(--zbk-radio-border-color-disabled);
  cursor: not-allowed;
  opacity: var(--zbk-radio-disabled-opacity);
}
.z-radio__input:disabled:before {
  background-color: var(--zbk-radio-indicator-disabled-color);
}
.z-radio__input:disabled + slot,
z-radio[disabled] .z-radio {
  color: var(--zbk-radio-label-disabled-color);
  cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
  .z-radio__input:not(:disabled):hover {
    border-color: var(--zbk-radio-border-color-hover);
  }
}
.focusable:focus,
.focusable:focus-visible,
.focusable:focus-within {
  outline-color: var(--zbk-focus-color);
  outline-offset: var(--zbk-focus-offset);
  outline-width: var(--zbk-focus-width);
}
:root {
  --zbk-checkbox-size: var(--zbk-spacing-205);
  --zbk-checkbox-border-radius: var(--zbk-border-radius-xs);
  --zbk-checkbox-border-width: var(--zbk-border-width-md);
  --zbk-checkbox-background: var(--zbk-body-background);
  --zbk-checkbox-background-checked: var(--zbk-accent);
  --zbk-checkbox-background-indeterminate: var(--zbk-accent);
  --zbk-checkbox-border-color: var(--zbk-accent-400);
  --zbk-checkbox-border-color-hover: var(--zbk-accent-500);
  --zbk-checkbox-border-color-active: var(--zbk-accent);
  --zbk-checkbox-border-color-disabled: var(--zbk-accent-200);
  --zbk-checkbox-indicator-stroke-width: var(--zbk-border-width-sm);
  --zbk-checkbox-indicator-color: var(--zbk-reverse-ink);
  --zbk-checkbox-indicator-disabled-color: var(--zbk-accent-300);
  --zbk-checkbox-indeterminate-bar-height: var(--zbk-border-width-lg);
  --zbk-checkbox-indeterminate-bar-radius: var(--zbk-border-radius-pill);
  --zbk-checkbox-focus-ring-color: var(--zbk-focus-color);
  --zbk-checkbox-focus-ring-width: var(--zbk-border-width-lg);
  --zbk-checkbox-focus-ring-offset: var(--zbk-spacing-05);
  --zbk-checkbox-transition-timing-function: ease;
  --zbk-checkbox-disabled-opacity: 0.7;
  --zbk-checkbox-label-color: var(--zbk-ink);
  --zbk-checkbox-label-disabled-color: var(--zbk-accent-400);
  --zbk-checkbox-label-font-family: var(--zbk-font-family-interface);
  --zbk-checkbox-label-font-size: var(--zbk-font-size-md);
  --zbk-checkbox-label-font-weight: 400;
  --zbk-checkbox-label-line-height: var(--zbk-line-height-interface);
  --zbk-checkbox-label-letter-spacing: var(--zbk-letter-spacing-interface);
  --zbk-checkbox-label-gap: var(--zbk-spacing-1);
  --zbk-checkbox-transition-duration: 120ms;
}
z-checkbox {
  display: inline-block;
}
.z-checkbox {
  align-items: center;
  color: var(--zbk-checkbox-label-color);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--zbk-checkbox-label-font-family);
  font-size: var(--zbk-checkbox-label-font-size);
  font-weight: var(--zbk-checkbox-label-font-weight);
  gap: var(--zbk-checkbox-label-gap);
  letter-spacing: var(--zbk-checkbox-label-letter-spacing);
  line-height: var(--zbk-checkbox-label-line-height);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.z-checkbox__input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--zbk-checkbox-background);
  border: var(--zbk-checkbox-border-width) solid
    var(--zbk-checkbox-border-color);
  border-radius: var(--zbk-checkbox-border-radius);
  display: grid;
  height: var(--zbk-checkbox-size);
  margin: 0;
  place-content: center;
  position: relative;
  transition:
    background-color var(--zbk-checkbox-transition-duration)
      var(--zbk-checkbox-transition-timing-function),
    border-color var(--zbk-checkbox-transition-duration)
      var(--zbk-checkbox-transition-timing-function),
    box-shadow var(--zbk-checkbox-transition-duration)
      var(--zbk-checkbox-transition-timing-function),
    transform var(--zbk-checkbox-transition-duration)
      var(--zbk-checkbox-transition-timing-function);
  width: var(--zbk-checkbox-size);
}
.z-checkbox__input:before {
  border-bottom: var(--zbk-checkbox-indicator-stroke-width) solid
    var(--zbk-checkbox-indicator-color);
  border-left: 0;
  border-right: var(--zbk-checkbox-indicator-stroke-width) solid
    var(--zbk-checkbox-indicator-color);
  border-top: 0;
  height: calc(var(--zbk-checkbox-size) * 0.25);
  transform: scale(0) rotate(45deg);
  transform-origin: center;
  width: calc(var(--zbk-checkbox-size) * 0.5);
}
.z-checkbox__input:after,
.z-checkbox__input:before {
  content: "";
  transition: transform var(--zbk-checkbox-transition-duration)
    var(--zbk-checkbox-transition-timing-function);
}
.z-checkbox__input:after {
  background-color: var(--zbk-checkbox-indicator-color);
  border-radius: var(--zbk-checkbox-indeterminate-bar-radius);
  height: var(--zbk-checkbox-indeterminate-bar-height);
  transform: scaleX(0);
  width: calc(var(--zbk-checkbox-size) * 0.6);
}
.z-checkbox__input:focus {
  outline: none;
}
.z-checkbox__input:focus-visible {
  border-color: var(--zbk-checkbox-border-color-active);
  outline: var(--zbk-checkbox-focus-ring-width) solid
    var(--zbk-checkbox-focus-ring-color);
  outline-offset: var(--zbk-checkbox-focus-ring-offset);
}
.z-checkbox__input:checked {
  background-color: var(--zbk-checkbox-background-checked);
  border-color: var(--zbk-checkbox-border-color-active);
}
.z-checkbox__input:checked:before {
  transform: scale(1) rotate(45deg);
}
.z-checkbox__input:indeterminate {
  background-color: var(--zbk-checkbox-background-indeterminate);
  border-color: var(--zbk-checkbox-border-color-active);
}
.z-checkbox__input:indeterminate:before {
  transform: scale(0) rotate(45deg);
}
.z-checkbox__input:indeterminate:after {
  transform: scaleX(1);
}
.z-checkbox__input:disabled {
  background-color: var(--zbk-checkbox-background);
  border-color: var(--zbk-checkbox-border-color-disabled);
  cursor: not-allowed;
  opacity: var(--zbk-checkbox-disabled-opacity);
}
.z-checkbox__input:disabled:before {
  border-bottom-color: var(--zbk-checkbox-indicator-disabled-color);
  border-right-color: var(--zbk-checkbox-indicator-disabled-color);
}
.z-checkbox__input:disabled:after {
  background-color: var(--zbk-checkbox-indicator-disabled-color);
}
.z-checkbox__input:disabled + slot,
z-checkbox[disabled] .z-checkbox {
  color: var(--zbk-checkbox-label-disabled-color);
  cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
  .z-checkbox__input:not(:disabled):hover {
    border-color: var(--zbk-checkbox-border-color-hover);
  }
}
@layer components {
  .zbk-button,
  zbk-button > .zbk-button {
    align-items: var(--zbk-button-align-items);
    background-color: var(--zbk-button-canvas);
    border-color: var(--zbk-button-border-color);
    border-radius: var(--zbk-button-border-radius);
    border-style: var(--zbk-button-border-style);
    border-width: var(--zbk-button-border-width);
    box-shadow: var(--zbk-button-box-shadow);
    color: var(--zbk-button-ink);
    cursor: var(--zbk-button-cursor);
    display: var(--zbk-button-display);
    flex-direction: var(--zbk-button-flex-direction);
    font-family: var(--zbk-button-font-family);
    font-size: var(--zbk-button-font-size);
    font-weight: var(--zbk-button-font-weight);
    gap: var(--zbk-button-gap);
    height: var(--zbk-button-height);
    justify-content: var(--zbk-button-justify-content);
    letter-spacing: var(--zbk-button-letter-spacing);
    line-height: var(--zbk-button-line-height);
    margin-block: var(--zbk-button-margin-block);
    margin-block-end: var(--zbk-button-margin-block-end);
    margin-block-start: var(--zbk-button-margin-block-start);
    margin-inline: var(--zbk-button-margin-inline);
    margin-inline-end: var(--zbk-button-margin-inline-end);
    margin-inline-start: var(--zbk-button-margin-inline-start);
    max-height: var(--zbk-button-max-height);
    max-width: var(--zbk-button-max-width);
    min-height: var(--zbk-button-min-height);
    min-width: var(--zbk-button-min-width);
    opacity: var(--zbk-button-opacity);
    outline: none;
    padding-block: var(--zbk-button-padding-block);
    padding-block-end: var(--zbk-button-padding-block-end);
    padding-block-start: var(--zbk-button-padding-block-start);
    padding-inline: var(--zbk-button-padding-inline);
    padding-inline-end: var(--zbk-button-padding-inline-end);
    padding-inline-start: var(--zbk-button-padding-inline-start);
    text-align: var(--zbk-button-text-align);
    -webkit-text-decoration: var(--zbk-button-text-decoration);
    text-decoration: var(--zbk-button-text-decoration);
    text-transform: var(--zbk-button-text-transform);
    transition-delay: var(--zbk-button-transition-delay);
    transition-duration: var(--zbk-button-transition-duration);
    transition-property: var(--zbk-button-transition-property);
    transition-timing-function: var(--zbk-button-transition-timing-function);
    width: var(--zbk-button-width);
  }
  .zbk-button:hover,
  zbk-button:hover .zbk-button,
  zbk-button > .zbk-button:hover {
    background-color: var(--zbk-button-canvas-hover);
    border-color: var(--zbk-button-border-color-hover);
    box-shadow: var(--zbk-button-box-shadow-hover);
    color: var(--zbk-button-ink-hover);
  }
  .zbk-button:active,
  zbk-button:active .zbk-button,
  zbk-button > .zbk-button:active {
    background-color: var(--zbk-button-canvas-active);
    border-color: var(--zbk-button-border-color-selected);
    box-shadow: var(--zbk-button-box-shadow-active);
    color: var(--zbk-button-ink-active);
  }
  .zbk-button:focus-visible,
  zbk-button:focus-visible .zbk-button,
  zbk-button > .zbk-button:focus-visible {
    box-shadow: var(--zbk-button-box-shadow-focus);
    outline-color: var(--zbk-button-focus-color);
    outline-offset: var(--zbk-button-focus-offset);
    outline-style: solid;
    outline-width: var(--zbk-button-focus-width);
  }
  .zbk-button[aria-disabled="true"],
  .zbk-button[disabled],
  zbk-button > .zbk-button[aria-disabled="true"],
  zbk-button > .zbk-button[disabled],
  zbk-button[aria-disabled="true"] .zbk-button,
  zbk-button[disabled] .zbk-button {
    background-color: var(--zbk-button-canvas-disabled);
    border-color: var(--zbk-button-border-color-disabled);
    box-shadow: none;
    color: var(--zbk-button-ink-disabled);
    cursor: not-allowed;
    opacity: var(--zbk-button-opacity);
    pointer-events: none;
  }
  .zbk-button .zbk-button__icon,
  zbk-button .zbk-button__icon,
  zbk-button > .zbk-button .zbk-button__icon {
    block-size: var(--zbk-button-icon-size);
    flex-shrink: 0;
    inline-size: var(--zbk-button-icon-size);
  }
  .zbk-button-group {
    display: inline-flex;
    gap: var(--zbk-button-group-gap);
  }
}
:root {
  --zbk-a11y-font-size-modifier-3xs: 1;
  --zbk-a11y-font-size-modifier-2xs: 1;
  --zbk-a11y-font-size-modifier-xs: 1;
  --zbk-a11y-font-size-modifier-sm: 1;
  --zbk-a11y-font-size-modifier-md: 1;
  --zbk-a11y-font-size-modifier-lg: 1;
  --zbk-a11y-font-size-modifier-xl: 1;
  --zbk-a11y-font-size-modifier-2xl: 1;
  --zbk-a11y-font-size-modifier-3xl: 1;
}
.height-card {
  height: var(--zbk-spacing-card);
}
.height-mobile {
  height: var(--zbk-spacing-mobile);
}
.height-mobile-lg {
  height: var(--zbk-spacing-mobile-lg);
}
.height-tablet {
  height: var(--zbk-spacing-tablet);
}
.height-tablet-lg {
  height: var(--zbk-spacing-tablet-lg);
}
.height-desktop {
  height: var(--zbk-spacing-desktop);
}
.height-desktop-lg {
  height: var(--zbk-spacing-desktop-lg);
}
.height-widescreen {
  height: var(--zbk-spacing-widescreen);
}
.height-section {
  height: var(--zbk-spacing-section);
}
.height-aside {
  height: var(--zbk-spacing-aside);
}
.min-height-card {
  min-height: var(--zbk-spacing-card);
}
.min-height-mobile {
  min-height: var(--zbk-spacing-mobile);
}
.min-height-mobile-lg {
  min-height: var(--zbk-spacing-mobile-lg);
}
.min-height-tablet {
  min-height: var(--zbk-spacing-tablet);
}
.min-height-tablet-lg {
  min-height: var(--zbk-spacing-tablet-lg);
}
.min-height-desktop {
  min-height: var(--zbk-spacing-desktop);
}
.min-height-desktop-lg {
  min-height: var(--zbk-spacing-desktop-lg);
}
.min-height-widescreen {
  min-height: var(--zbk-spacing-widescreen);
}
.min-height-section {
  min-height: var(--zbk-spacing-section);
}
.min-height-aside {
  min-height: var(--zbk-spacing-aside);
}
.max-height-card {
  max-height: var(--zbk-spacing-card);
}
.max-height-mobile {
  max-height: var(--zbk-spacing-mobile);
}
.max-height-mobile-lg {
  max-height: var(--zbk-spacing-mobile-lg);
}
.max-height-tablet {
  max-height: var(--zbk-spacing-tablet);
}
.max-height-tablet-lg {
  max-height: var(--zbk-spacing-tablet-lg);
}
.max-height-desktop {
  max-height: var(--zbk-spacing-desktop);
}
.max-height-desktop-lg {
  max-height: var(--zbk-spacing-desktop-lg);
}
.max-height-widescreen {
  max-height: var(--zbk-spacing-widescreen);
}
.max-height-section {
  max-height: var(--zbk-spacing-section);
}
.max-height-aside {
  max-height: var(--zbk-spacing-aside);
}
.width-card {
  width: var(--zbk-spacing-card);
}
.width-mobile {
  width: var(--zbk-spacing-mobile);
}
.width-mobile-lg {
  width: var(--zbk-spacing-mobile-lg);
}
.width-tablet {
  width: var(--zbk-spacing-tablet);
}
.width-tablet-lg {
  width: var(--zbk-spacing-tablet-lg);
}
.width-desktop {
  width: var(--zbk-spacing-desktop);
}
.width-desktop-lg {
  width: var(--zbk-spacing-desktop-lg);
}
.width-widescreen {
  width: var(--zbk-spacing-widescreen);
}
.width-section {
  width: var(--zbk-spacing-section);
}
.width-aside {
  width: var(--zbk-spacing-aside);
}
.min-width-card {
  min-width: var(--zbk-spacing-card);
}
.min-width-mobile {
  min-width: var(--zbk-spacing-mobile);
}
.min-width-mobile-lg {
  min-width: var(--zbk-spacing-mobile-lg);
}
.min-width-tablet {
  min-width: var(--zbk-spacing-tablet);
}
.min-width-tablet-lg {
  min-width: var(--zbk-spacing-tablet-lg);
}
.min-width-desktop {
  min-width: var(--zbk-spacing-desktop);
}
.min-width-desktop-lg {
  min-width: var(--zbk-spacing-desktop-lg);
}
.min-width-widescreen {
  min-width: var(--zbk-spacing-widescreen);
}
.min-width-section {
  min-width: var(--zbk-spacing-section);
}
.min-width-aside {
  min-width: var(--zbk-spacing-aside);
}
.max-width-card {
  max-width: var(--zbk-spacing-card);
}
.max-width-mobile {
  max-width: var(--zbk-spacing-mobile);
}
.max-width-mobile-lg {
  max-width: var(--zbk-spacing-mobile-lg);
}
.max-width-tablet {
  max-width: var(--zbk-spacing-tablet);
}
.max-width-tablet-lg {
  max-width: var(--zbk-spacing-tablet-lg);
}
.max-width-desktop {
  max-width: var(--zbk-spacing-desktop);
}
.max-width-desktop-lg {
  max-width: var(--zbk-spacing-desktop-lg);
}
.max-width-widescreen {
  max-width: var(--zbk-spacing-widescreen);
}
.max-width-section {
  max-width: var(--zbk-spacing-section);
}
.max-width-aside {
  max-width: var(--zbk-spacing-aside);
}
@media (min-width: 40rem) {
  .tablet\:height-card {
    height: var(--zbk-spacing-card);
  }
  .tablet\:height-mobile {
    height: var(--zbk-spacing-mobile);
  }
  .tablet\:height-mobile-lg {
    height: var(--zbk-spacing-mobile-lg);
  }
  .tablet\:height-tablet {
    height: var(--zbk-spacing-tablet);
  }
  .tablet\:height-tablet-lg {
    height: var(--zbk-spacing-tablet-lg);
  }
  .tablet\:height-desktop {
    height: var(--zbk-spacing-desktop);
  }
  .tablet\:height-desktop-lg {
    height: var(--zbk-spacing-desktop-lg);
  }
  .tablet\:height-widescreen {
    height: var(--zbk-spacing-widescreen);
  }
  .tablet\:height-section {
    height: var(--zbk-spacing-section);
  }
  .tablet\:height-aside {
    height: var(--zbk-spacing-aside);
  }
}
@media (min-width: 50rem) {
  .tablet-lg\:height-card {
    height: var(--zbk-spacing-card);
  }
  .tablet-lg\:height-mobile {
    height: var(--zbk-spacing-mobile);
  }
  .tablet-lg\:height-mobile-lg {
    height: var(--zbk-spacing-mobile-lg);
  }
  .tablet-lg\:height-tablet {
    height: var(--zbk-spacing-tablet);
  }
  .tablet-lg\:height-tablet-lg {
    height: var(--zbk-spacing-tablet-lg);
  }
  .tablet-lg\:height-desktop {
    height: var(--zbk-spacing-desktop);
  }
  .tablet-lg\:height-desktop-lg {
    height: var(--zbk-spacing-desktop-lg);
  }
  .tablet-lg\:height-widescreen {
    height: var(--zbk-spacing-widescreen);
  }
  .tablet-lg\:height-section {
    height: var(--zbk-spacing-section);
  }
  .tablet-lg\:height-aside {
    height: var(--zbk-spacing-aside);
  }
}
@media (min-width: 70rem) {
  .desktop\:height-card {
    height: var(--zbk-spacing-card);
  }
  .desktop\:height-mobile {
    height: var(--zbk-spacing-mobile);
  }
  .desktop\:height-mobile-lg {
    height: var(--zbk-spacing-mobile-lg);
  }
  .desktop\:height-tablet {
    height: var(--zbk-spacing-tablet);
  }
  .desktop\:height-tablet-lg {
    height: var(--zbk-spacing-tablet-lg);
  }
  .desktop\:height-desktop {
    height: var(--zbk-spacing-desktop);
  }
  .desktop\:height-desktop-lg {
    height: var(--zbk-spacing-desktop-lg);
  }
  .desktop\:height-widescreen {
    height: var(--zbk-spacing-widescreen);
  }
  .desktop\:height-section {
    height: var(--zbk-spacing-section);
  }
  .desktop\:height-aside {
    height: var(--zbk-spacing-aside);
  }
}
@media (min-width: 80rem) {
  .desktop-lg\:height-card {
    height: var(--zbk-spacing-card);
  }
  .desktop-lg\:height-mobile {
    height: var(--zbk-spacing-mobile);
  }
  .desktop-lg\:height-mobile-lg {
    height: var(--zbk-spacing-mobile-lg);
  }
  .desktop-lg\:height-tablet {
    height: var(--zbk-spacing-tablet);
  }
  .desktop-lg\:height-tablet-lg {
    height: var(--zbk-spacing-tablet-lg);
  }
  .desktop-lg\:height-desktop {
    height: var(--zbk-spacing-desktop);
  }
  .desktop-lg\:height-desktop-lg {
    height: var(--zbk-spacing-desktop-lg);
  }
  .desktop-lg\:height-widescreen {
    height: var(--zbk-spacing-widescreen);
  }
  .desktop-lg\:height-section {
    height: var(--zbk-spacing-section);
  }
  .desktop-lg\:height-aside {
    height: var(--zbk-spacing-aside);
  }
}
@media (min-width: 100rem) {
  .widescreen\:height-card {
    height: var(--zbk-spacing-card);
  }
  .widescreen\:height-mobile {
    height: var(--zbk-spacing-mobile);
  }
  .widescreen\:height-mobile-lg {
    height: var(--zbk-spacing-mobile-lg);
  }
  .widescreen\:height-tablet {
    height: var(--zbk-spacing-tablet);
  }
  .widescreen\:height-tablet-lg {
    height: var(--zbk-spacing-tablet-lg);
  }
  .widescreen\:height-desktop {
    height: var(--zbk-spacing-desktop);
  }
  .widescreen\:height-desktop-lg {
    height: var(--zbk-spacing-desktop-lg);
  }
  .widescreen\:height-widescreen {
    height: var(--zbk-spacing-widescreen);
  }
  .widescreen\:height-section {
    height: var(--zbk-spacing-section);
  }
  .widescreen\:height-aside {
    height: var(--zbk-spacing-aside);
  }
}
@media (min-width: 40rem) {
  .tablet\:min-height-card {
    min-height: var(--zbk-spacing-card);
  }
  .tablet\:min-height-mobile {
    min-height: var(--zbk-spacing-mobile);
  }
  .tablet\:min-height-mobile-lg {
    min-height: var(--zbk-spacing-mobile-lg);
  }
  .tablet\:min-height-tablet {
    min-height: var(--zbk-spacing-tablet);
  }
  .tablet\:min-height-tablet-lg {
    min-height: var(--zbk-spacing-tablet-lg);
  }
  .tablet\:min-height-desktop {
    min-height: var(--zbk-spacing-desktop);
  }
  .tablet\:min-height-desktop-lg {
    min-height: var(--zbk-spacing-desktop-lg);
  }
  .tablet\:min-height-widescreen {
    min-height: var(--zbk-spacing-widescreen);
  }
  .tablet\:min-height-section {
    min-height: var(--zbk-spacing-section);
  }
  .tablet\:min-height-aside {
    min-height: var(--zbk-spacing-aside);
  }
}
@media (min-width: 50rem) {
  .tablet-lg\:min-height-card {
    min-height: var(--zbk-spacing-card);
  }
  .tablet-lg\:min-height-mobile {
    min-height: var(--zbk-spacing-mobile);
  }
  .tablet-lg\:min-height-mobile-lg {
    min-height: var(--zbk-spacing-mobile-lg);
  }
  .tablet-lg\:min-height-tablet {
    min-height: var(--zbk-spacing-tablet);
  }
  .tablet-lg\:min-height-tablet-lg {
    min-height: var(--zbk-spacing-tablet-lg);
  }
  .tablet-lg\:min-height-desktop {
    min-height: var(--zbk-spacing-desktop);
  }
  .tablet-lg\:min-height-desktop-lg {
    min-height: var(--zbk-spacing-desktop-lg);
  }
  .tablet-lg\:min-height-widescreen {
    min-height: var(--zbk-spacing-widescreen);
  }
  .tablet-lg\:min-height-section {
    min-height: var(--zbk-spacing-section);
  }
  .tablet-lg\:min-height-aside {
    min-height: var(--zbk-spacing-aside);
  }
}
@media (min-width: 70rem) {
  .desktop\:min-height-card {
    min-height: var(--zbk-spacing-card);
  }
  .desktop\:min-height-mobile {
    min-height: var(--zbk-spacing-mobile);
  }
  .desktop\:min-height-mobile-lg {
    min-height: var(--zbk-spacing-mobile-lg);
  }
  .desktop\:min-height-tablet {
    min-height: var(--zbk-spacing-tablet);
  }
  .desktop\:min-height-tablet-lg {
    min-height: var(--zbk-spacing-tablet-lg);
  }
  .desktop\:min-height-desktop {
    min-height: var(--zbk-spacing-desktop);
  }
  .desktop\:min-height-desktop-lg {
    min-height: var(--zbk-spacing-desktop-lg);
  }
  .desktop\:min-height-widescreen {
    min-height: var(--zbk-spacing-widescreen);
  }
  .desktop\:min-height-section {
    min-height: var(--zbk-spacing-section);
  }
  .desktop\:min-height-aside {
    min-height: var(--zbk-spacing-aside);
  }
}
@media (min-width: 80rem) {
  .desktop-lg\:min-height-card {
    min-height: var(--zbk-spacing-card);
  }
  .desktop-lg\:min-height-mobile {
    min-height: var(--zbk-spacing-mobile);
  }
  .desktop-lg\:min-height-mobile-lg {
    min-height: var(--zbk-spacing-mobile-lg);
  }
  .desktop-lg\:min-height-tablet {
    min-height: var(--zbk-spacing-tablet);
  }
  .desktop-lg\:min-height-tablet-lg {
    min-height: var(--zbk-spacing-tablet-lg);
  }
  .desktop-lg\:min-height-desktop {
    min-height: var(--zbk-spacing-desktop);
  }
  .desktop-lg\:min-height-desktop-lg {
    min-height: var(--zbk-spacing-desktop-lg);
  }
  .desktop-lg\:min-height-widescreen {
    min-height: var(--zbk-spacing-widescreen);
  }
  .desktop-lg\:min-height-section {
    min-height: var(--zbk-spacing-section);
  }
  .desktop-lg\:min-height-aside {
    min-height: var(--zbk-spacing-aside);
  }
}
@media (min-width: 100rem) {
  .widescreen\:min-height-card {
    min-height: var(--zbk-spacing-card);
  }
  .widescreen\:min-height-mobile {
    min-height: var(--zbk-spacing-mobile);
  }
  .widescreen\:min-height-mobile-lg {
    min-height: var(--zbk-spacing-mobile-lg);
  }
  .widescreen\:min-height-tablet {
    min-height: var(--zbk-spacing-tablet);
  }
  .widescreen\:min-height-tablet-lg {
    min-height: var(--zbk-spacing-tablet-lg);
  }
  .widescreen\:min-height-desktop {
    min-height: var(--zbk-spacing-desktop);
  }
  .widescreen\:min-height-desktop-lg {
    min-height: var(--zbk-spacing-desktop-lg);
  }
  .widescreen\:min-height-widescreen {
    min-height: var(--zbk-spacing-widescreen);
  }
  .widescreen\:min-height-section {
    min-height: var(--zbk-spacing-section);
  }
  .widescreen\:min-height-aside {
    min-height: var(--zbk-spacing-aside);
  }
}
@media (min-width: 40rem) {
  .tablet\:max-height-card {
    max-height: var(--zbk-spacing-card);
  }
  .tablet\:max-height-mobile {
    max-height: var(--zbk-spacing-mobile);
  }
  .tablet\:max-height-mobile-lg {
    max-height: var(--zbk-spacing-mobile-lg);
  }
  .tablet\:max-height-tablet {
    max-height: var(--zbk-spacing-tablet);
  }
  .tablet\:max-height-tablet-lg {
    max-height: var(--zbk-spacing-tablet-lg);
  }
  .tablet\:max-height-desktop {
    max-height: var(--zbk-spacing-desktop);
  }
  .tablet\:max-height-desktop-lg {
    max-height: var(--zbk-spacing-desktop-lg);
  }
  .tablet\:max-height-widescreen {
    max-height: var(--zbk-spacing-widescreen);
  }
  .tablet\:max-height-section {
    max-height: var(--zbk-spacing-section);
  }
  .tablet\:max-height-aside {
    max-height: var(--zbk-spacing-aside);
  }
}
@media (min-width: 50rem) {
  .tablet-lg\:max-height-card {
    max-height: var(--zbk-spacing-card);
  }
  .tablet-lg\:max-height-mobile {
    max-height: var(--zbk-spacing-mobile);
  }
  .tablet-lg\:max-height-mobile-lg {
    max-height: var(--zbk-spacing-mobile-lg);
  }
  .tablet-lg\:max-height-tablet {
    max-height: var(--zbk-spacing-tablet);
  }
  .tablet-lg\:max-height-tablet-lg {
    max-height: var(--zbk-spacing-tablet-lg);
  }
  .tablet-lg\:max-height-desktop {
    max-height: var(--zbk-spacing-desktop);
  }
  .tablet-lg\:max-height-desktop-lg {
    max-height: var(--zbk-spacing-desktop-lg);
  }
  .tablet-lg\:max-height-widescreen {
    max-height: var(--zbk-spacing-widescreen);
  }
  .tablet-lg\:max-height-section {
    max-height: var(--zbk-spacing-section);
  }
  .tablet-lg\:max-height-aside {
    max-height: var(--zbk-spacing-aside);
  }
}
@media (min-width: 70rem) {
  .desktop\:max-height-card {
    max-height: var(--zbk-spacing-card);
  }
  .desktop\:max-height-mobile {
    max-height: var(--zbk-spacing-mobile);
  }
  .desktop\:max-height-mobile-lg {
    max-height: var(--zbk-spacing-mobile-lg);
  }
  .desktop\:max-height-tablet {
    max-height: var(--zbk-spacing-tablet);
  }
  .desktop\:max-height-tablet-lg {
    max-height: var(--zbk-spacing-tablet-lg);
  }
  .desktop\:max-height-desktop {
    max-height: var(--zbk-spacing-desktop);
  }
  .desktop\:max-height-desktop-lg {
    max-height: var(--zbk-spacing-desktop-lg);
  }
  .desktop\:max-height-widescreen {
    max-height: var(--zbk-spacing-widescreen);
  }
  .desktop\:max-height-section {
    max-height: var(--zbk-spacing-section);
  }
  .desktop\:max-height-aside {
    max-height: var(--zbk-spacing-aside);
  }
}
@media (min-width: 80rem) {
  .desktop-lg\:max-height-card {
    max-height: var(--zbk-spacing-card);
  }
  .desktop-lg\:max-height-mobile {
    max-height: var(--zbk-spacing-mobile);
  }
  .desktop-lg\:max-height-mobile-lg {
    max-height: var(--zbk-spacing-mobile-lg);
  }
  .desktop-lg\:max-height-tablet {
    max-height: var(--zbk-spacing-tablet);
  }
  .desktop-lg\:max-height-tablet-lg {
    max-height: var(--zbk-spacing-tablet-lg);
  }
  .desktop-lg\:max-height-desktop {
    max-height: var(--zbk-spacing-desktop);
  }
  .desktop-lg\:max-height-desktop-lg {
    max-height: var(--zbk-spacing-desktop-lg);
  }
  .desktop-lg\:max-height-widescreen {
    max-height: var(--zbk-spacing-widescreen);
  }
  .desktop-lg\:max-height-section {
    max-height: var(--zbk-spacing-section);
  }
  .desktop-lg\:max-height-aside {
    max-height: var(--zbk-spacing-aside);
  }
}
@media (min-width: 100rem) {
  .widescreen\:max-height-card {
    max-height: var(--zbk-spacing-card);
  }
  .widescreen\:max-height-mobile {
    max-height: var(--zbk-spacing-mobile);
  }
  .widescreen\:max-height-mobile-lg {
    max-height: var(--zbk-spacing-mobile-lg);
  }
  .widescreen\:max-height-tablet {
    max-height: var(--zbk-spacing-tablet);
  }
  .widescreen\:max-height-tablet-lg {
    max-height: var(--zbk-spacing-tablet-lg);
  }
  .widescreen\:max-height-desktop {
    max-height: var(--zbk-spacing-desktop);
  }
  .widescreen\:max-height-desktop-lg {
    max-height: var(--zbk-spacing-desktop-lg);
  }
  .widescreen\:max-height-widescreen {
    max-height: var(--zbk-spacing-widescreen);
  }
  .widescreen\:max-height-section {
    max-height: var(--zbk-spacing-section);
  }
  .widescreen\:max-height-aside {
    max-height: var(--zbk-spacing-aside);
  }
}
@media (min-width: 40rem) {
  .tablet\:width-card {
    width: var(--zbk-spacing-card);
  }
  .tablet\:width-mobile {
    width: var(--zbk-spacing-mobile);
  }
  .tablet\:width-mobile-lg {
    width: var(--zbk-spacing-mobile-lg);
  }
  .tablet\:width-tablet {
    width: var(--zbk-spacing-tablet);
  }
  .tablet\:width-tablet-lg {
    width: var(--zbk-spacing-tablet-lg);
  }
  .tablet\:width-desktop {
    width: var(--zbk-spacing-desktop);
  }
  .tablet\:width-desktop-lg {
    width: var(--zbk-spacing-desktop-lg);
  }
  .tablet\:width-widescreen {
    width: var(--zbk-spacing-widescreen);
  }
  .tablet\:width-section {
    width: var(--zbk-spacing-section);
  }
  .tablet\:width-aside {
    width: var(--zbk-spacing-aside);
  }
}
@media (min-width: 50rem) {
  .tablet-lg\:width-card {
    width: var(--zbk-spacing-card);
  }
  .tablet-lg\:width-mobile {
    width: var(--zbk-spacing-mobile);
  }
  .tablet-lg\:width-mobile-lg {
    width: var(--zbk-spacing-mobile-lg);
  }
  .tablet-lg\:width-tablet {
    width: var(--zbk-spacing-tablet);
  }
  .tablet-lg\:width-tablet-lg {
    width: var(--zbk-spacing-tablet-lg);
  }
  .tablet-lg\:width-desktop {
    width: var(--zbk-spacing-desktop);
  }
  .tablet-lg\:width-desktop-lg {
    width: var(--zbk-spacing-desktop-lg);
  }
  .tablet-lg\:width-widescreen {
    width: var(--zbk-spacing-widescreen);
  }
  .tablet-lg\:width-section {
    width: var(--zbk-spacing-section);
  }
  .tablet-lg\:width-aside {
    width: var(--zbk-spacing-aside);
  }
}
@media (min-width: 70rem) {
  .desktop\:width-card {
    width: var(--zbk-spacing-card);
  }
  .desktop\:width-mobile {
    width: var(--zbk-spacing-mobile);
  }
  .desktop\:width-mobile-lg {
    width: var(--zbk-spacing-mobile-lg);
  }
  .desktop\:width-tablet {
    width: var(--zbk-spacing-tablet);
  }
  .desktop\:width-tablet-lg {
    width: var(--zbk-spacing-tablet-lg);
  }
  .desktop\:width-desktop {
    width: var(--zbk-spacing-desktop);
  }
  .desktop\:width-desktop-lg {
    width: var(--zbk-spacing-desktop-lg);
  }
  .desktop\:width-widescreen {
    width: var(--zbk-spacing-widescreen);
  }
  .desktop\:width-section {
    width: var(--zbk-spacing-section);
  }
  .desktop\:width-aside {
    width: var(--zbk-spacing-aside);
  }
}
@media (min-width: 80rem) {
  .desktop-lg\:width-card {
    width: var(--zbk-spacing-card);
  }
  .desktop-lg\:width-mobile {
    width: var(--zbk-spacing-mobile);
  }
  .desktop-lg\:width-mobile-lg {
    width: var(--zbk-spacing-mobile-lg);
  }
  .desktop-lg\:width-tablet {
    width: var(--zbk-spacing-tablet);
  }
  .desktop-lg\:width-tablet-lg {
    width: var(--zbk-spacing-tablet-lg);
  }
  .desktop-lg\:width-desktop {
    width: var(--zbk-spacing-desktop);
  }
  .desktop-lg\:width-desktop-lg {
    width: var(--zbk-spacing-desktop-lg);
  }
  .desktop-lg\:width-widescreen {
    width: var(--zbk-spacing-widescreen);
  }
  .desktop-lg\:width-section {
    width: var(--zbk-spacing-section);
  }
  .desktop-lg\:width-aside {
    width: var(--zbk-spacing-aside);
  }
}
@media (min-width: 100rem) {
  .widescreen\:width-card {
    width: var(--zbk-spacing-card);
  }
  .widescreen\:width-mobile {
    width: var(--zbk-spacing-mobile);
  }
  .widescreen\:width-mobile-lg {
    width: var(--zbk-spacing-mobile-lg);
  }
  .widescreen\:width-tablet {
    width: var(--zbk-spacing-tablet);
  }
  .widescreen\:width-tablet-lg {
    width: var(--zbk-spacing-tablet-lg);
  }
  .widescreen\:width-desktop {
    width: var(--zbk-spacing-desktop);
  }
  .widescreen\:width-desktop-lg {
    width: var(--zbk-spacing-desktop-lg);
  }
  .widescreen\:width-widescreen {
    width: var(--zbk-spacing-widescreen);
  }
  .widescreen\:width-section {
    width: var(--zbk-spacing-section);
  }
  .widescreen\:width-aside {
    width: var(--zbk-spacing-aside);
  }
}
@media (min-width: 40rem) {
  .tablet\:min-width-card {
    min-width: var(--zbk-spacing-card);
  }
  .tablet\:min-width-mobile {
    min-width: var(--zbk-spacing-mobile);
  }
  .tablet\:min-width-mobile-lg {
    min-width: var(--zbk-spacing-mobile-lg);
  }
  .tablet\:min-width-tablet {
    min-width: var(--zbk-spacing-tablet);
  }
  .tablet\:min-width-tablet-lg {
    min-width: var(--zbk-spacing-tablet-lg);
  }
  .tablet\:min-width-desktop {
    min-width: var(--zbk-spacing-desktop);
  }
  .tablet\:min-width-desktop-lg {
    min-width: var(--zbk-spacing-desktop-lg);
  }
  .tablet\:min-width-widescreen {
    min-width: var(--zbk-spacing-widescreen);
  }
  .tablet\:min-width-section {
    min-width: var(--zbk-spacing-section);
  }
  .tablet\:min-width-aside {
    min-width: var(--zbk-spacing-aside);
  }
}
@media (min-width: 50rem) {
  .tablet-lg\:min-width-card {
    min-width: var(--zbk-spacing-card);
  }
  .tablet-lg\:min-width-mobile {
    min-width: var(--zbk-spacing-mobile);
  }
  .tablet-lg\:min-width-mobile-lg {
    min-width: var(--zbk-spacing-mobile-lg);
  }
  .tablet-lg\:min-width-tablet {
    min-width: var(--zbk-spacing-tablet);
  }
  .tablet-lg\:min-width-tablet-lg {
    min-width: var(--zbk-spacing-tablet-lg);
  }
  .tablet-lg\:min-width-desktop {
    min-width: var(--zbk-spacing-desktop);
  }
  .tablet-lg\:min-width-desktop-lg {
    min-width: var(--zbk-spacing-desktop-lg);
  }
  .tablet-lg\:min-width-widescreen {
    min-width: var(--zbk-spacing-widescreen);
  }
  .tablet-lg\:min-width-section {
    min-width: var(--zbk-spacing-section);
  }
  .tablet-lg\:min-width-aside {
    min-width: var(--zbk-spacing-aside);
  }
}
@media (min-width: 70rem) {
  .desktop\:min-width-card {
    min-width: var(--zbk-spacing-card);
  }
  .desktop\:min-width-mobile {
    min-width: var(--zbk-spacing-mobile);
  }
  .desktop\:min-width-mobile-lg {
    min-width: var(--zbk-spacing-mobile-lg);
  }
  .desktop\:min-width-tablet {
    min-width: var(--zbk-spacing-tablet);
  }
  .desktop\:min-width-tablet-lg {
    min-width: var(--zbk-spacing-tablet-lg);
  }
  .desktop\:min-width-desktop {
    min-width: var(--zbk-spacing-desktop);
  }
  .desktop\:min-width-desktop-lg {
    min-width: var(--zbk-spacing-desktop-lg);
  }
  .desktop\:min-width-widescreen {
    min-width: var(--zbk-spacing-widescreen);
  }
  .desktop\:min-width-section {
    min-width: var(--zbk-spacing-section);
  }
  .desktop\:min-width-aside {
    min-width: var(--zbk-spacing-aside);
  }
}
@media (min-width: 80rem) {
  .desktop-lg\:min-width-card {
    min-width: var(--zbk-spacing-card);
  }
  .desktop-lg\:min-width-mobile {
    min-width: var(--zbk-spacing-mobile);
  }
  .desktop-lg\:min-width-mobile-lg {
    min-width: var(--zbk-spacing-mobile-lg);
  }
  .desktop-lg\:min-width-tablet {
    min-width: var(--zbk-spacing-tablet);
  }
  .desktop-lg\:min-width-tablet-lg {
    min-width: var(--zbk-spacing-tablet-lg);
  }
  .desktop-lg\:min-width-desktop {
    min-width: var(--zbk-spacing-desktop);
  }
  .desktop-lg\:min-width-desktop-lg {
    min-width: var(--zbk-spacing-desktop-lg);
  }
  .desktop-lg\:min-width-widescreen {
    min-width: var(--zbk-spacing-widescreen);
  }
  .desktop-lg\:min-width-section {
    min-width: var(--zbk-spacing-section);
  }
  .desktop-lg\:min-width-aside {
    min-width: var(--zbk-spacing-aside);
  }
}
@media (min-width: 100rem) {
  .widescreen\:min-width-card {
    min-width: var(--zbk-spacing-card);
  }
  .widescreen\:min-width-mobile {
    min-width: var(--zbk-spacing-mobile);
  }
  .widescreen\:min-width-mobile-lg {
    min-width: var(--zbk-spacing-mobile-lg);
  }
  .widescreen\:min-width-tablet {
    min-width: var(--zbk-spacing-tablet);
  }
  .widescreen\:min-width-tablet-lg {
    min-width: var(--zbk-spacing-tablet-lg);
  }
  .widescreen\:min-width-desktop {
    min-width: var(--zbk-spacing-desktop);
  }
  .widescreen\:min-width-desktop-lg {
    min-width: var(--zbk-spacing-desktop-lg);
  }
  .widescreen\:min-width-widescreen {
    min-width: var(--zbk-spacing-widescreen);
  }
  .widescreen\:min-width-section {
    min-width: var(--zbk-spacing-section);
  }
  .widescreen\:min-width-aside {
    min-width: var(--zbk-spacing-aside);
  }
}
@media (min-width: 40rem) {
  .tablet\:max-width-card {
    max-width: var(--zbk-spacing-card);
  }
  .tablet\:max-width-mobile {
    max-width: var(--zbk-spacing-mobile);
  }
  .tablet\:max-width-mobile-lg {
    max-width: var(--zbk-spacing-mobile-lg);
  }
  .tablet\:max-width-tablet {
    max-width: var(--zbk-spacing-tablet);
  }
  .tablet\:max-width-tablet-lg {
    max-width: var(--zbk-spacing-tablet-lg);
  }
  .tablet\:max-width-desktop {
    max-width: var(--zbk-spacing-desktop);
  }
  .tablet\:max-width-desktop-lg {
    max-width: var(--zbk-spacing-desktop-lg);
  }
  .tablet\:max-width-widescreen {
    max-width: var(--zbk-spacing-widescreen);
  }
  .tablet\:max-width-section {
    max-width: var(--zbk-spacing-section);
  }
  .tablet\:max-width-aside {
    max-width: var(--zbk-spacing-aside);
  }
}
@media (min-width: 50rem) {
  .tablet-lg\:max-width-card {
    max-width: var(--zbk-spacing-card);
  }
  .tablet-lg\:max-width-mobile {
    max-width: var(--zbk-spacing-mobile);
  }
  .tablet-lg\:max-width-mobile-lg {
    max-width: var(--zbk-spacing-mobile-lg);
  }
  .tablet-lg\:max-width-tablet {
    max-width: var(--zbk-spacing-tablet);
  }
  .tablet-lg\:max-width-tablet-lg {
    max-width: var(--zbk-spacing-tablet-lg);
  }
  .tablet-lg\:max-width-desktop {
    max-width: var(--zbk-spacing-desktop);
  }
  .tablet-lg\:max-width-desktop-lg {
    max-width: var(--zbk-spacing-desktop-lg);
  }
  .tablet-lg\:max-width-widescreen {
    max-width: var(--zbk-spacing-widescreen);
  }
  .tablet-lg\:max-width-section {
    max-width: var(--zbk-spacing-section);
  }
  .tablet-lg\:max-width-aside {
    max-width: var(--zbk-spacing-aside);
  }
}
@media (min-width: 70rem) {
  .desktop\:max-width-card {
    max-width: var(--zbk-spacing-card);
  }
  .desktop\:max-width-mobile {
    max-width: var(--zbk-spacing-mobile);
  }
  .desktop\:max-width-mobile-lg {
    max-width: var(--zbk-spacing-mobile-lg);
  }
  .desktop\:max-width-tablet {
    max-width: var(--zbk-spacing-tablet);
  }
  .desktop\:max-width-tablet-lg {
    max-width: var(--zbk-spacing-tablet-lg);
  }
  .desktop\:max-width-desktop {
    max-width: var(--zbk-spacing-desktop);
  }
  .desktop\:max-width-desktop-lg {
    max-width: var(--zbk-spacing-desktop-lg);
  }
  .desktop\:max-width-widescreen {
    max-width: var(--zbk-spacing-widescreen);
  }
  .desktop\:max-width-section {
    max-width: var(--zbk-spacing-section);
  }
  .desktop\:max-width-aside {
    max-width: var(--zbk-spacing-aside);
  }
}
@media (min-width: 80rem) {
  .desktop-lg\:max-width-card {
    max-width: var(--zbk-spacing-card);
  }
  .desktop-lg\:max-width-mobile {
    max-width: var(--zbk-spacing-mobile);
  }
  .desktop-lg\:max-width-mobile-lg {
    max-width: var(--zbk-spacing-mobile-lg);
  }
  .desktop-lg\:max-width-tablet {
    max-width: var(--zbk-spacing-tablet);
  }
  .desktop-lg\:max-width-tablet-lg {
    max-width: var(--zbk-spacing-tablet-lg);
  }
  .desktop-lg\:max-width-desktop {
    max-width: var(--zbk-spacing-desktop);
  }
  .desktop-lg\:max-width-desktop-lg {
    max-width: var(--zbk-spacing-desktop-lg);
  }
  .desktop-lg\:max-width-widescreen {
    max-width: var(--zbk-spacing-widescreen);
  }
  .desktop-lg\:max-width-section {
    max-width: var(--zbk-spacing-section);
  }
  .desktop-lg\:max-width-aside {
    max-width: var(--zbk-spacing-aside);
  }
}
@media (min-width: 100rem) {
  .widescreen\:max-width-card {
    max-width: var(--zbk-spacing-card);
  }
  .widescreen\:max-width-mobile {
    max-width: var(--zbk-spacing-mobile);
  }
  .widescreen\:max-width-mobile-lg {
    max-width: var(--zbk-spacing-mobile-lg);
  }
  .widescreen\:max-width-tablet {
    max-width: var(--zbk-spacing-tablet);
  }
  .widescreen\:max-width-tablet-lg {
    max-width: var(--zbk-spacing-tablet-lg);
  }
  .widescreen\:max-width-desktop {
    max-width: var(--zbk-spacing-desktop);
  }
  .widescreen\:max-width-desktop-lg {
    max-width: var(--zbk-spacing-desktop-lg);
  }
  .widescreen\:max-width-widescreen {
    max-width: var(--zbk-spacing-widescreen);
  }
  .widescreen\:max-width-section {
    max-width: var(--zbk-spacing-section);
  }
  .widescreen\:max-width-aside {
    max-width: var(--zbk-spacing-aside);
  }
}
.page-padding-block {
  padding-block: var(--zbk-spacing-page-padding-block);
}
.page-padding-block-start {
  padding-block-start: var(--zbk-spacing-page-padding-block);
}
.page-padding-block-end {
  padding-block-end: var(--zbk-spacing-page-padding-block);
}
.page-padding-inline {
  padding-inline: var(--zbk-spacing-page-padding-inline);
}
.page-padding-inline-start {
  padding-inline-start: var(--zbk-spacing-page-padding-inline);
}
.page-padding-inline-end {
  padding-inline-end: var(--zbk-spacing-page-padding-inline);
}
.section-margin-block {
  margin-block: var(--zbk-spacing-section-margin-block);
}
.section-margin-block-start {
  margin-block-start: var(--zbk-spacing-section-margin-block);
}
.section-margin-block-end {
  margin-block-end: var(--zbk-spacing-section-margin-block);
}
.section-margin-inline {
  margin-inline: var(--zbk-spacing-section-margin-inline);
}
.section-margin-inline-start {
  margin-inline-start: var(--zbk-spacing-section-margin-inline);
}
.section-margin-inline-end {
  margin-inline-end: var(--zbk-spacing-section-margin-inline);
}
.margin-2xs {
  margin-inline: var(--zbk-spacing-2xs);
}
.margin-2xs,
.margin-block-2xs {
  margin-block: var(--zbk-spacing-2xs);
}
.margin-inline-2xs {
  margin-inline: var(--zbk-spacing-2xs);
}
.margin-block-start-2xs {
  margin-block-start: var(--zbk-spacing-2xs);
}
.margin-inline-end-2xs {
  margin-inline-end: var(--zbk-spacing-2xs);
}
.margin-block-end-2xs {
  margin-block-end: var(--zbk-spacing-2xs);
}
.margin-inline-start-2xs {
  margin-inline-start: var(--zbk-spacing-2xs);
}
.margin-xs {
  margin-inline: var(--zbk-spacing-xs);
}
.margin-block-xs,
.margin-xs {
  margin-block: var(--zbk-spacing-xs);
}
.margin-inline-xs {
  margin-inline: var(--zbk-spacing-xs);
}
.margin-block-start-xs {
  margin-block-start: var(--zbk-spacing-xs);
}
.margin-inline-end-xs {
  margin-inline-end: var(--zbk-spacing-xs);
}
.margin-block-end-xs {
  margin-block-end: var(--zbk-spacing-xs);
}
.margin-inline-start-xs {
  margin-inline-start: var(--zbk-spacing-xs);
}
.margin-sm {
  margin-inline: var(--zbk-spacing-sm);
}
.margin-block-sm,
.margin-sm {
  margin-block: var(--zbk-spacing-sm);
}
.margin-inline-sm {
  margin-inline: var(--zbk-spacing-sm);
}
.margin-block-start-sm {
  margin-block-start: var(--zbk-spacing-sm);
}
.margin-inline-end-sm {
  margin-inline-end: var(--zbk-spacing-sm);
}
.margin-block-end-sm {
  margin-block-end: var(--zbk-spacing-sm);
}
.margin-inline-start-sm {
  margin-inline-start: var(--zbk-spacing-sm);
}
.margin-md {
  margin-inline: var(--zbk-spacing-md);
}
.margin-block-md,
.margin-md {
  margin-block: var(--zbk-spacing-md);
}
.margin-inline-md {
  margin-inline: var(--zbk-spacing-md);
}
.margin-block-start-md {
  margin-block-start: var(--zbk-spacing-md);
}
.margin-inline-end-md {
  margin-inline-end: var(--zbk-spacing-md);
}
.margin-block-end-md {
  margin-block-end: var(--zbk-spacing-md);
}
.margin-inline-start-md {
  margin-inline-start: var(--zbk-spacing-md);
}
.margin-lg {
  margin-inline: var(--zbk-spacing-lg);
}
.margin-block-lg,
.margin-lg {
  margin-block: var(--zbk-spacing-lg);
}
.margin-inline-lg {
  margin-inline: var(--zbk-spacing-lg);
}
.margin-block-start-lg {
  margin-block-start: var(--zbk-spacing-lg);
}
.margin-inline-end-lg {
  margin-inline-end: var(--zbk-spacing-lg);
}
.margin-block-end-lg {
  margin-block-end: var(--zbk-spacing-lg);
}
.margin-inline-start-lg {
  margin-inline-start: var(--zbk-spacing-lg);
}
.margin-xl {
  margin-inline: var(--zbk-spacing-xl);
}
.margin-block-xl,
.margin-xl {
  margin-block: var(--zbk-spacing-xl);
}
.margin-inline-xl {
  margin-inline: var(--zbk-spacing-xl);
}
.margin-block-start-xl {
  margin-block-start: var(--zbk-spacing-xl);
}
.margin-inline-end-xl {
  margin-inline-end: var(--zbk-spacing-xl);
}
.margin-block-end-xl {
  margin-block-end: var(--zbk-spacing-xl);
}
.margin-inline-start-xl {
  margin-inline-start: var(--zbk-spacing-xl);
}
.margin-2xl {
  margin-inline: var(--zbk-spacing-2xl);
}
.margin-2xl,
.margin-block-2xl {
  margin-block: var(--zbk-spacing-2xl);
}
.margin-inline-2xl {
  margin-inline: var(--zbk-spacing-2xl);
}
.margin-block-start-2xl {
  margin-block-start: var(--zbk-spacing-2xl);
}
.margin-inline-end-2xl {
  margin-inline-end: var(--zbk-spacing-2xl);
}
.margin-block-end-2xl {
  margin-block-end: var(--zbk-spacing-2xl);
}
.margin-inline-start-2xl {
  margin-inline-start: var(--zbk-spacing-2xl);
}
.margin-3xl {
  margin-inline: var(--zbk-spacing-3xl);
}
.margin-3xl,
.margin-block-3xl {
  margin-block: var(--zbk-spacing-3xl);
}
.margin-inline-3xl {
  margin-inline: var(--zbk-spacing-3xl);
}
.margin-block-start-3xl {
  margin-block-start: var(--zbk-spacing-3xl);
}
.margin-inline-end-3xl {
  margin-inline-end: var(--zbk-spacing-3xl);
}
.margin-block-end-3xl {
  margin-block-end: var(--zbk-spacing-3xl);
}
.margin-inline-start-3xl {
  margin-inline-start: var(--zbk-spacing-3xl);
}
.padding-2xs {
  padding-inline: var(--zbk-spacing-2xs);
}
.padding-2xs,
.padding-block-2xs {
  padding-block: var(--zbk-spacing-2xs);
}
.padding-inline-2xs {
  padding-inline: var(--zbk-spacing-2xs);
}
.padding-block-start-2xs {
  padding-block-start: var(--zbk-spacing-2xs);
}
.padding-inline-end-2xs {
  padding-inline-end: var(--zbk-spacing-2xs);
}
.padding-block-end-2xs {
  padding-block-end: var(--zbk-spacing-2xs);
}
.padding-inline-start-2xs {
  padding-inline-start: var(--zbk-spacing-2xs);
}
.padding-xs {
  padding-inline: var(--zbk-spacing-xs);
}
.padding-block-xs,
.padding-xs {
  padding-block: var(--zbk-spacing-xs);
}
.padding-inline-xs {
  padding-inline: var(--zbk-spacing-xs);
}
.padding-block-start-xs {
  padding-block-start: var(--zbk-spacing-xs);
}
.padding-inline-end-xs {
  padding-inline-end: var(--zbk-spacing-xs);
}
.padding-block-end-xs {
  padding-block-end: var(--zbk-spacing-xs);
}
.padding-inline-start-xs {
  padding-inline-start: var(--zbk-spacing-xs);
}
.padding-sm {
  padding-inline: var(--zbk-spacing-sm);
}
.padding-block-sm,
.padding-sm {
  padding-block: var(--zbk-spacing-sm);
}
.padding-inline-sm {
  padding-inline: var(--zbk-spacing-sm);
}
.padding-block-start-sm {
  padding-block-start: var(--zbk-spacing-sm);
}
.padding-inline-end-sm {
  padding-inline-end: var(--zbk-spacing-sm);
}
.padding-block-end-sm {
  padding-block-end: var(--zbk-spacing-sm);
}
.padding-inline-start-sm {
  padding-inline-start: var(--zbk-spacing-sm);
}
.padding-md {
  padding-inline: var(--zbk-spacing-md);
}
.padding-block-md,
.padding-md {
  padding-block: var(--zbk-spacing-md);
}
.padding-inline-md {
  padding-inline: var(--zbk-spacing-md);
}
.padding-block-start-md {
  padding-block-start: var(--zbk-spacing-md);
}
.padding-inline-end-md {
  padding-inline-end: var(--zbk-spacing-md);
}
.padding-block-end-md {
  padding-block-end: var(--zbk-spacing-md);
}
.padding-inline-start-md {
  padding-inline-start: var(--zbk-spacing-md);
}
.padding-lg {
  padding-inline: var(--zbk-spacing-lg);
}
.padding-block-lg,
.padding-lg {
  padding-block: var(--zbk-spacing-lg);
}
.padding-inline-lg {
  padding-inline: var(--zbk-spacing-lg);
}
.padding-block-start-lg {
  padding-block-start: var(--zbk-spacing-lg);
}
.padding-inline-end-lg {
  padding-inline-end: var(--zbk-spacing-lg);
}
.padding-block-end-lg {
  padding-block-end: var(--zbk-spacing-lg);
}
.padding-inline-start-lg {
  padding-inline-start: var(--zbk-spacing-lg);
}
.padding-xl {
  padding-inline: var(--zbk-spacing-xl);
}
.padding-block-xl,
.padding-xl {
  padding-block: var(--zbk-spacing-xl);
}
.padding-inline-xl {
  padding-inline: var(--zbk-spacing-xl);
}
.padding-block-start-xl {
  padding-block-start: var(--zbk-spacing-xl);
}
.padding-inline-end-xl {
  padding-inline-end: var(--zbk-spacing-xl);
}
.padding-block-end-xl {
  padding-block-end: var(--zbk-spacing-xl);
}
.padding-inline-start-xl {
  padding-inline-start: var(--zbk-spacing-xl);
}
.padding-2xl {
  padding-inline: var(--zbk-spacing-2xl);
}
.padding-2xl,
.padding-block-2xl {
  padding-block: var(--zbk-spacing-2xl);
}
.padding-inline-2xl {
  padding-inline: var(--zbk-spacing-2xl);
}
.padding-block-start-2xl {
  padding-block-start: var(--zbk-spacing-2xl);
}
.padding-inline-end-2xl {
  padding-inline-end: var(--zbk-spacing-2xl);
}
.padding-block-end-2xl {
  padding-block-end: var(--zbk-spacing-2xl);
}
.padding-inline-start-2xl {
  padding-inline-start: var(--zbk-spacing-2xl);
}
.padding-3xl {
  padding-inline: var(--zbk-spacing-3xl);
}
.padding-3xl,
.padding-block-3xl {
  padding-block: var(--zbk-spacing-3xl);
}
.padding-inline-3xl {
  padding-inline: var(--zbk-spacing-3xl);
}
.padding-block-start-3xl {
  padding-block-start: var(--zbk-spacing-3xl);
}
.padding-inline-end-3xl {
  padding-inline-end: var(--zbk-spacing-3xl);
}
.padding-block-end-3xl {
  padding-block-end: var(--zbk-spacing-3xl);
}
.padding-inline-start-3xl {
  padding-inline-start: var(--zbk-spacing-3xl);
}
.gap-2xs {
  gap: var(--zbk-spacing-2xs);
}
.gap-xs {
  gap: var(--zbk-spacing-xs);
}
.gap-sm {
  gap: var(--zbk-spacing-sm);
}
.gap-md {
  gap: var(--zbk-spacing-md);
}
.gap-lg {
  gap: var(--zbk-spacing-lg);
}
.gap-xl {
  gap: var(--zbk-spacing-xl);
}
.gap-2xl {
  gap: var(--zbk-spacing-2xl);
}
.gap-3xl {
  gap: var(--zbk-spacing-3xl);
}
@media (min-width: 40rem) {
  .tablet\:margin-2xs {
    margin-inline: var(--zbk-spacing-2xs);
  }
  .tablet\:margin-2xs,
  .tablet\:margin-block-2xs {
    margin-block: var(--zbk-spacing-2xs);
  }
  .tablet\:margin-inline-2xs {
    margin-inline: var(--zbk-spacing-2xs);
  }
  .tablet\:margin-block-start-2xs {
    margin-block-start: var(--zbk-spacing-2xs);
  }
  .tablet\:margin-inline-end-2xs {
    margin-inline-end: var(--zbk-spacing-2xs);
  }
  .tablet\:margin-block-end-2xs {
    margin-block-end: var(--zbk-spacing-2xs);
  }
  .tablet\:margin-inline-start-2xs {
    margin-inline-start: var(--zbk-spacing-2xs);
  }
  .tablet\:margin-xs {
    margin-inline: var(--zbk-spacing-xs);
  }
  .tablet\:margin-block-xs,
  .tablet\:margin-xs {
    margin-block: var(--zbk-spacing-xs);
  }
  .tablet\:margin-inline-xs {
    margin-inline: var(--zbk-spacing-xs);
  }
  .tablet\:margin-block-start-xs {
    margin-block-start: var(--zbk-spacing-xs);
  }
  .tablet\:margin-inline-end-xs {
    margin-inline-end: var(--zbk-spacing-xs);
  }
  .tablet\:margin-block-end-xs {
    margin-block-end: var(--zbk-spacing-xs);
  }
  .tablet\:margin-inline-start-xs {
    margin-inline-start: var(--zbk-spacing-xs);
  }
  .tablet\:margin-sm {
    margin-inline: var(--zbk-spacing-sm);
  }
  .tablet\:margin-block-sm,
  .tablet\:margin-sm {
    margin-block: var(--zbk-spacing-sm);
  }
  .tablet\:margin-inline-sm {
    margin-inline: var(--zbk-spacing-sm);
  }
  .tablet\:margin-block-start-sm {
    margin-block-start: var(--zbk-spacing-sm);
  }
  .tablet\:margin-inline-end-sm {
    margin-inline-end: var(--zbk-spacing-sm);
  }
  .tablet\:margin-block-end-sm {
    margin-block-end: var(--zbk-spacing-sm);
  }
  .tablet\:margin-inline-start-sm {
    margin-inline-start: var(--zbk-spacing-sm);
  }
  .tablet\:margin-md {
    margin-inline: var(--zbk-spacing-md);
  }
  .tablet\:margin-block-md,
  .tablet\:margin-md {
    margin-block: var(--zbk-spacing-md);
  }
  .tablet\:margin-inline-md {
    margin-inline: var(--zbk-spacing-md);
  }
  .tablet\:margin-block-start-md {
    margin-block-start: var(--zbk-spacing-md);
  }
  .tablet\:margin-inline-end-md {
    margin-inline-end: var(--zbk-spacing-md);
  }
  .tablet\:margin-block-end-md {
    margin-block-end: var(--zbk-spacing-md);
  }
  .tablet\:margin-inline-start-md {
    margin-inline-start: var(--zbk-spacing-md);
  }
  .tablet\:margin-lg {
    margin-inline: var(--zbk-spacing-lg);
  }
  .tablet\:margin-block-lg,
  .tablet\:margin-lg {
    margin-block: var(--zbk-spacing-lg);
  }
  .tablet\:margin-inline-lg {
    margin-inline: var(--zbk-spacing-lg);
  }
  .tablet\:margin-block-start-lg {
    margin-block-start: var(--zbk-spacing-lg);
  }
  .tablet\:margin-inline-end-lg {
    margin-inline-end: var(--zbk-spacing-lg);
  }
  .tablet\:margin-block-end-lg {
    margin-block-end: var(--zbk-spacing-lg);
  }
  .tablet\:margin-inline-start-lg {
    margin-inline-start: var(--zbk-spacing-lg);
  }
  .tablet\:margin-xl {
    margin-inline: var(--zbk-spacing-xl);
  }
  .tablet\:margin-block-xl,
  .tablet\:margin-xl {
    margin-block: var(--zbk-spacing-xl);
  }
  .tablet\:margin-inline-xl {
    margin-inline: var(--zbk-spacing-xl);
  }
  .tablet\:margin-block-start-xl {
    margin-block-start: var(--zbk-spacing-xl);
  }
  .tablet\:margin-inline-end-xl {
    margin-inline-end: var(--zbk-spacing-xl);
  }
  .tablet\:margin-block-end-xl {
    margin-block-end: var(--zbk-spacing-xl);
  }
  .tablet\:margin-inline-start-xl {
    margin-inline-start: var(--zbk-spacing-xl);
  }
  .tablet\:margin-2xl {
    margin-inline: var(--zbk-spacing-2xl);
  }
  .tablet\:margin-2xl,
  .tablet\:margin-block-2xl {
    margin-block: var(--zbk-spacing-2xl);
  }
  .tablet\:margin-inline-2xl {
    margin-inline: var(--zbk-spacing-2xl);
  }
  .tablet\:margin-block-start-2xl {
    margin-block-start: var(--zbk-spacing-2xl);
  }
  .tablet\:margin-inline-end-2xl {
    margin-inline-end: var(--zbk-spacing-2xl);
  }
  .tablet\:margin-block-end-2xl {
    margin-block-end: var(--zbk-spacing-2xl);
  }
  .tablet\:margin-inline-start-2xl {
    margin-inline-start: var(--zbk-spacing-2xl);
  }
  .tablet\:margin-3xl {
    margin-inline: var(--zbk-spacing-3xl);
  }
  .tablet\:margin-3xl,
  .tablet\:margin-block-3xl {
    margin-block: var(--zbk-spacing-3xl);
  }
  .tablet\:margin-inline-3xl {
    margin-inline: var(--zbk-spacing-3xl);
  }
  .tablet\:margin-block-start-3xl {
    margin-block-start: var(--zbk-spacing-3xl);
  }
  .tablet\:margin-inline-end-3xl {
    margin-inline-end: var(--zbk-spacing-3xl);
  }
  .tablet\:margin-block-end-3xl {
    margin-block-end: var(--zbk-spacing-3xl);
  }
  .tablet\:margin-inline-start-3xl {
    margin-inline-start: var(--zbk-spacing-3xl);
  }
}
@media (min-width: 50rem) {
  .tablet-lg\:margin-2xs {
    margin-inline: var(--zbk-spacing-2xs);
  }
  .tablet-lg\:margin-2xs,
  .tablet-lg\:margin-block-2xs {
    margin-block: var(--zbk-spacing-2xs);
  }
  .tablet-lg\:margin-inline-2xs {
    margin-inline: var(--zbk-spacing-2xs);
  }
  .tablet-lg\:margin-block-start-2xs {
    margin-block-start: var(--zbk-spacing-2xs);
  }
  .tablet-lg\:margin-inline-end-2xs {
    margin-inline-end: var(--zbk-spacing-2xs);
  }
  .tablet-lg\:margin-block-end-2xs {
    margin-block-end: var(--zbk-spacing-2xs);
  }
  .tablet-lg\:margin-inline-start-2xs {
    margin-inline-start: var(--zbk-spacing-2xs);
  }
  .tablet-lg\:margin-xs {
    margin-inline: var(--zbk-spacing-xs);
  }
  .tablet-lg\:margin-block-xs,
  .tablet-lg\:margin-xs {
    margin-block: var(--zbk-spacing-xs);
  }
  .tablet-lg\:margin-inline-xs {
    margin-inline: var(--zbk-spacing-xs);
  }
  .tablet-lg\:margin-block-start-xs {
    margin-block-start: var(--zbk-spacing-xs);
  }
  .tablet-lg\:margin-inline-end-xs {
    margin-inline-end: var(--zbk-spacing-xs);
  }
  .tablet-lg\:margin-block-end-xs {
    margin-block-end: var(--zbk-spacing-xs);
  }
  .tablet-lg\:margin-inline-start-xs {
    margin-inline-start: var(--zbk-spacing-xs);
  }
  .tablet-lg\:margin-sm {
    margin-inline: var(--zbk-spacing-sm);
  }
  .tablet-lg\:margin-block-sm,
  .tablet-lg\:margin-sm {
    margin-block: var(--zbk-spacing-sm);
  }
  .tablet-lg\:margin-inline-sm {
    margin-inline: var(--zbk-spacing-sm);
  }
  .tablet-lg\:margin-block-start-sm {
    margin-block-start: var(--zbk-spacing-sm);
  }
  .tablet-lg\:margin-inline-end-sm {
    margin-inline-end: var(--zbk-spacing-sm);
  }
  .tablet-lg\:margin-block-end-sm {
    margin-block-end: var(--zbk-spacing-sm);
  }
  .tablet-lg\:margin-inline-start-sm {
    margin-inline-start: var(--zbk-spacing-sm);
  }
  .tablet-lg\:margin-md {
    margin-inline: var(--zbk-spacing-md);
  }
  .tablet-lg\:margin-block-md,
  .tablet-lg\:margin-md {
    margin-block: var(--zbk-spacing-md);
  }
  .tablet-lg\:margin-inline-md {
    margin-inline: var(--zbk-spacing-md);
  }
  .tablet-lg\:margin-block-start-md {
    margin-block-start: var(--zbk-spacing-md);
  }
  .tablet-lg\:margin-inline-end-md {
    margin-inline-end: var(--zbk-spacing-md);
  }
  .tablet-lg\:margin-block-end-md {
    margin-block-end: var(--zbk-spacing-md);
  }
  .tablet-lg\:margin-inline-start-md {
    margin-inline-start: var(--zbk-spacing-md);
  }
  .tablet-lg\:margin-lg {
    margin-inline: var(--zbk-spacing-lg);
  }
  .tablet-lg\:margin-block-lg,
  .tablet-lg\:margin-lg {
    margin-block: var(--zbk-spacing-lg);
  }
  .tablet-lg\:margin-inline-lg {
    margin-inline: var(--zbk-spacing-lg);
  }
  .tablet-lg\:margin-block-start-lg {
    margin-block-start: var(--zbk-spacing-lg);
  }
  .tablet-lg\:margin-inline-end-lg {
    margin-inline-end: var(--zbk-spacing-lg);
  }
  .tablet-lg\:margin-block-end-lg {
    margin-block-end: var(--zbk-spacing-lg);
  }
  .tablet-lg\:margin-inline-start-lg {
    margin-inline-start: var(--zbk-spacing-lg);
  }
  .tablet-lg\:margin-xl {
    margin-inline: var(--zbk-spacing-xl);
  }
  .tablet-lg\:margin-block-xl,
  .tablet-lg\:margin-xl {
    margin-block: var(--zbk-spacing-xl);
  }
  .tablet-lg\:margin-inline-xl {
    margin-inline: var(--zbk-spacing-xl);
  }
  .tablet-lg\:margin-block-start-xl {
    margin-block-start: var(--zbk-spacing-xl);
  }
  .tablet-lg\:margin-inline-end-xl {
    margin-inline-end: var(--zbk-spacing-xl);
  }
  .tablet-lg\:margin-block-end-xl {
    margin-block-end: var(--zbk-spacing-xl);
  }
  .tablet-lg\:margin-inline-start-xl {
    margin-inline-start: var(--zbk-spacing-xl);
  }
  .tablet-lg\:margin-2xl {
    margin-inline: var(--zbk-spacing-2xl);
  }
  .tablet-lg\:margin-2xl,
  .tablet-lg\:margin-block-2xl {
    margin-block: var(--zbk-spacing-2xl);
  }
  .tablet-lg\:margin-inline-2xl {
    margin-inline: var(--zbk-spacing-2xl);
  }
  .tablet-lg\:margin-block-start-2xl {
    margin-block-start: var(--zbk-spacing-2xl);
  }
  .tablet-lg\:margin-inline-end-2xl {
    margin-inline-end: var(--zbk-spacing-2xl);
  }
  .tablet-lg\:margin-block-end-2xl {
    margin-block-end: var(--zbk-spacing-2xl);
  }
  .tablet-lg\:margin-inline-start-2xl {
    margin-inline-start: var(--zbk-spacing-2xl);
  }
  .tablet-lg\:margin-3xl {
    margin-inline: var(--zbk-spacing-3xl);
  }
  .tablet-lg\:margin-3xl,
  .tablet-lg\:margin-block-3xl {
    margin-block: var(--zbk-spacing-3xl);
  }
  .tablet-lg\:margin-inline-3xl {
    margin-inline: var(--zbk-spacing-3xl);
  }
  .tablet-lg\:margin-block-start-3xl {
    margin-block-start: var(--zbk-spacing-3xl);
  }
  .tablet-lg\:margin-inline-end-3xl {
    margin-inline-end: var(--zbk-spacing-3xl);
  }
  .tablet-lg\:margin-block-end-3xl {
    margin-block-end: var(--zbk-spacing-3xl);
  }
  .tablet-lg\:margin-inline-start-3xl {
    margin-inline-start: var(--zbk-spacing-3xl);
  }
}
@media (min-width: 70rem) {
  .desktop\:margin-2xs {
    margin-inline: var(--zbk-spacing-2xs);
  }
  .desktop\:margin-2xs,
  .desktop\:margin-block-2xs {
    margin-block: var(--zbk-spacing-2xs);
  }
  .desktop\:margin-inline-2xs {
    margin-inline: var(--zbk-spacing-2xs);
  }
  .desktop\:margin-block-start-2xs {
    margin-block-start: var(--zbk-spacing-2xs);
  }
  .desktop\:margin-inline-end-2xs {
    margin-inline-end: var(--zbk-spacing-2xs);
  }
  .desktop\:margin-block-end-2xs {
    margin-block-end: var(--zbk-spacing-2xs);
  }
  .desktop\:margin-inline-start-2xs {
    margin-inline-start: var(--zbk-spacing-2xs);
  }
  .desktop\:margin-xs {
    margin-inline: var(--zbk-spacing-xs);
  }
  .desktop\:margin-block-xs,
  .desktop\:margin-xs {
    margin-block: var(--zbk-spacing-xs);
  }
  .desktop\:margin-inline-xs {
    margin-inline: var(--zbk-spacing-xs);
  }
  .desktop\:margin-block-start-xs {
    margin-block-start: var(--zbk-spacing-xs);
  }
  .desktop\:margin-inline-end-xs {
    margin-inline-end: var(--zbk-spacing-xs);
  }
  .desktop\:margin-block-end-xs {
    margin-block-end: var(--zbk-spacing-xs);
  }
  .desktop\:margin-inline-start-xs {
    margin-inline-start: var(--zbk-spacing-xs);
  }
  .desktop\:margin-sm {
    margin-inline: var(--zbk-spacing-sm);
  }
  .desktop\:margin-block-sm,
  .desktop\:margin-sm {
    margin-block: var(--zbk-spacing-sm);
  }
  .desktop\:margin-inline-sm {
    margin-inline: var(--zbk-spacing-sm);
  }
  .desktop\:margin-block-start-sm {
    margin-block-start: var(--zbk-spacing-sm);
  }
  .desktop\:margin-inline-end-sm {
    margin-inline-end: var(--zbk-spacing-sm);
  }
  .desktop\:margin-block-end-sm {
    margin-block-end: var(--zbk-spacing-sm);
  }
  .desktop\:margin-inline-start-sm {
    margin-inline-start: var(--zbk-spacing-sm);
  }
  .desktop\:margin-md {
    margin-inline: var(--zbk-spacing-md);
  }
  .desktop\:margin-block-md,
  .desktop\:margin-md {
    margin-block: var(--zbk-spacing-md);
  }
  .desktop\:margin-inline-md {
    margin-inline: var(--zbk-spacing-md);
  }
  .desktop\:margin-block-start-md {
    margin-block-start: var(--zbk-spacing-md);
  }
  .desktop\:margin-inline-end-md {
    margin-inline-end: var(--zbk-spacing-md);
  }
  .desktop\:margin-block-end-md {
    margin-block-end: var(--zbk-spacing-md);
  }
  .desktop\:margin-inline-start-md {
    margin-inline-start: var(--zbk-spacing-md);
  }
  .desktop\:margin-lg {
    margin-inline: var(--zbk-spacing-lg);
  }
  .desktop\:margin-block-lg,
  .desktop\:margin-lg {
    margin-block: var(--zbk-spacing-lg);
  }
  .desktop\:margin-inline-lg {
    margin-inline: var(--zbk-spacing-lg);
  }
  .desktop\:margin-block-start-lg {
    margin-block-start: var(--zbk-spacing-lg);
  }
  .desktop\:margin-inline-end-lg {
    margin-inline-end: var(--zbk-spacing-lg);
  }
  .desktop\:margin-block-end-lg {
    margin-block-end: var(--zbk-spacing-lg);
  }
  .desktop\:margin-inline-start-lg {
    margin-inline-start: var(--zbk-spacing-lg);
  }
  .desktop\:margin-xl {
    margin-inline: var(--zbk-spacing-xl);
  }
  .desktop\:margin-block-xl,
  .desktop\:margin-xl {
    margin-block: var(--zbk-spacing-xl);
  }
  .desktop\:margin-inline-xl {
    margin-inline: var(--zbk-spacing-xl);
  }
  .desktop\:margin-block-start-xl {
    margin-block-start: var(--zbk-spacing-xl);
  }
  .desktop\:margin-inline-end-xl {
    margin-inline-end: var(--zbk-spacing-xl);
  }
  .desktop\:margin-block-end-xl {
    margin-block-end: var(--zbk-spacing-xl);
  }
  .desktop\:margin-inline-start-xl {
    margin-inline-start: var(--zbk-spacing-xl);
  }
  .desktop\:margin-2xl {
    margin-inline: var(--zbk-spacing-2xl);
  }
  .desktop\:margin-2xl,
  .desktop\:margin-block-2xl {
    margin-block: var(--zbk-spacing-2xl);
  }
  .desktop\:margin-inline-2xl {
    margin-inline: var(--zbk-spacing-2xl);
  }
  .desktop\:margin-block-start-2xl {
    margin-block-start: var(--zbk-spacing-2xl);
  }
  .desktop\:margin-inline-end-2xl {
    margin-inline-end: var(--zbk-spacing-2xl);
  }
  .desktop\:margin-block-end-2xl {
    margin-block-end: var(--zbk-spacing-2xl);
  }
  .desktop\:margin-inline-start-2xl {
    margin-inline-start: var(--zbk-spacing-2xl);
  }
  .desktop\:margin-3xl {
    margin-inline: var(--zbk-spacing-3xl);
  }
  .desktop\:margin-3xl,
  .desktop\:margin-block-3xl {
    margin-block: var(--zbk-spacing-3xl);
  }
  .desktop\:margin-inline-3xl {
    margin-inline: var(--zbk-spacing-3xl);
  }
  .desktop\:margin-block-start-3xl {
    margin-block-start: var(--zbk-spacing-3xl);
  }
  .desktop\:margin-inline-end-3xl {
    margin-inline-end: var(--zbk-spacing-3xl);
  }
  .desktop\:margin-block-end-3xl {
    margin-block-end: var(--zbk-spacing-3xl);
  }
  .desktop\:margin-inline-start-3xl {
    margin-inline-start: var(--zbk-spacing-3xl);
  }
}
@media (min-width: 80rem) {
  .desktop-lg\:margin-2xs {
    margin-inline: var(--zbk-spacing-2xs);
  }
  .desktop-lg\:margin-2xs,
  .desktop-lg\:margin-block-2xs {
    margin-block: var(--zbk-spacing-2xs);
  }
  .desktop-lg\:margin-inline-2xs {
    margin-inline: var(--zbk-spacing-2xs);
  }
  .desktop-lg\:margin-block-start-2xs {
    margin-block-start: var(--zbk-spacing-2xs);
  }
  .desktop-lg\:margin-inline-end-2xs {
    margin-inline-end: var(--zbk-spacing-2xs);
  }
  .desktop-lg\:margin-block-end-2xs {
    margin-block-end: var(--zbk-spacing-2xs);
  }
  .desktop-lg\:margin-inline-start-2xs {
    margin-inline-start: var(--zbk-spacing-2xs);
  }
  .desktop-lg\:margin-xs {
    margin-inline: var(--zbk-spacing-xs);
  }
  .desktop-lg\:margin-block-xs,
  .desktop-lg\:margin-xs {
    margin-block: var(--zbk-spacing-xs);
  }
  .desktop-lg\:margin-inline-xs {
    margin-inline: var(--zbk-spacing-xs);
  }
  .desktop-lg\:margin-block-start-xs {
    margin-block-start: var(--zbk-spacing-xs);
  }
  .desktop-lg\:margin-inline-end-xs {
    margin-inline-end: var(--zbk-spacing-xs);
  }
  .desktop-lg\:margin-block-end-xs {
    margin-block-end: var(--zbk-spacing-xs);
  }
  .desktop-lg\:margin-inline-start-xs {
    margin-inline-start: var(--zbk-spacing-xs);
  }
  .desktop-lg\:margin-sm {
    margin-inline: var(--zbk-spacing-sm);
  }
  .desktop-lg\:margin-block-sm,
  .desktop-lg\:margin-sm {
    margin-block: var(--zbk-spacing-sm);
  }
  .desktop-lg\:margin-inline-sm {
    margin-inline: var(--zbk-spacing-sm);
  }
  .desktop-lg\:margin-block-start-sm {
    margin-block-start: var(--zbk-spacing-sm);
  }
  .desktop-lg\:margin-inline-end-sm {
    margin-inline-end: var(--zbk-spacing-sm);
  }
  .desktop-lg\:margin-block-end-sm {
    margin-block-end: var(--zbk-spacing-sm);
  }
  .desktop-lg\:margin-inline-start-sm {
    margin-inline-start: var(--zbk-spacing-sm);
  }
  .desktop-lg\:margin-md {
    margin-inline: var(--zbk-spacing-md);
  }
  .desktop-lg\:margin-block-md,
  .desktop-lg\:margin-md {
    margin-block: var(--zbk-spacing-md);
  }
  .desktop-lg\:margin-inline-md {
    margin-inline: var(--zbk-spacing-md);
  }
  .desktop-lg\:margin-block-start-md {
    margin-block-start: var(--zbk-spacing-md);
  }
  .desktop-lg\:margin-inline-end-md {
    margin-inline-end: var(--zbk-spacing-md);
  }
  .desktop-lg\:margin-block-end-md {
    margin-block-end: var(--zbk-spacing-md);
  }
  .desktop-lg\:margin-inline-start-md {
    margin-inline-start: var(--zbk-spacing-md);
  }
  .desktop-lg\:margin-lg {
    margin-inline: var(--zbk-spacing-lg);
  }
  .desktop-lg\:margin-block-lg,
  .desktop-lg\:margin-lg {
    margin-block: var(--zbk-spacing-lg);
  }
  .desktop-lg\:margin-inline-lg {
    margin-inline: var(--zbk-spacing-lg);
  }
  .desktop-lg\:margin-block-start-lg {
    margin-block-start: var(--zbk-spacing-lg);
  }
  .desktop-lg\:margin-inline-end-lg {
    margin-inline-end: var(--zbk-spacing-lg);
  }
  .desktop-lg\:margin-block-end-lg {
    margin-block-end: var(--zbk-spacing-lg);
  }
  .desktop-lg\:margin-inline-start-lg {
    margin-inline-start: var(--zbk-spacing-lg);
  }
  .desktop-lg\:margin-xl {
    margin-inline: var(--zbk-spacing-xl);
  }
  .desktop-lg\:margin-block-xl,
  .desktop-lg\:margin-xl {
    margin-block: var(--zbk-spacing-xl);
  }
  .desktop-lg\:margin-inline-xl {
    margin-inline: var(--zbk-spacing-xl);
  }
  .desktop-lg\:margin-block-start-xl {
    margin-block-start: var(--zbk-spacing-xl);
  }
  .desktop-lg\:margin-inline-end-xl {
    margin-inline-end: var(--zbk-spacing-xl);
  }
  .desktop-lg\:margin-block-end-xl {
    margin-block-end: var(--zbk-spacing-xl);
  }
  .desktop-lg\:margin-inline-start-xl {
    margin-inline-start: var(--zbk-spacing-xl);
  }
  .desktop-lg\:margin-2xl {
    margin-inline: var(--zbk-spacing-2xl);
  }
  .desktop-lg\:margin-2xl,
  .desktop-lg\:margin-block-2xl {
    margin-block: var(--zbk-spacing-2xl);
  }
  .desktop-lg\:margin-inline-2xl {
    margin-inline: var(--zbk-spacing-2xl);
  }
  .desktop-lg\:margin-block-start-2xl {
    margin-block-start: var(--zbk-spacing-2xl);
  }
  .desktop-lg\:margin-inline-end-2xl {
    margin-inline-end: var(--zbk-spacing-2xl);
  }
  .desktop-lg\:margin-block-end-2xl {
    margin-block-end: var(--zbk-spacing-2xl);
  }
  .desktop-lg\:margin-inline-start-2xl {
    margin-inline-start: var(--zbk-spacing-2xl);
  }
  .desktop-lg\:margin-3xl {
    margin-inline: var(--zbk-spacing-3xl);
  }
  .desktop-lg\:margin-3xl,
  .desktop-lg\:margin-block-3xl {
    margin-block: var(--zbk-spacing-3xl);
  }
  .desktop-lg\:margin-inline-3xl {
    margin-inline: var(--zbk-spacing-3xl);
  }
  .desktop-lg\:margin-block-start-3xl {
    margin-block-start: var(--zbk-spacing-3xl);
  }
  .desktop-lg\:margin-inline-end-3xl {
    margin-inline-end: var(--zbk-spacing-3xl);
  }
  .desktop-lg\:margin-block-end-3xl {
    margin-block-end: var(--zbk-spacing-3xl);
  }
  .desktop-lg\:margin-inline-start-3xl {
    margin-inline-start: var(--zbk-spacing-3xl);
  }
}
@media (min-width: 100rem) {
  .widescreen\:margin-2xs {
    margin-inline: var(--zbk-spacing-2xs);
  }
  .widescreen\:margin-2xs,
  .widescreen\:margin-block-2xs {
    margin-block: var(--zbk-spacing-2xs);
  }
  .widescreen\:margin-inline-2xs {
    margin-inline: var(--zbk-spacing-2xs);
  }
  .widescreen\:margin-block-start-2xs {
    margin-block-start: var(--zbk-spacing-2xs);
  }
  .widescreen\:margin-inline-end-2xs {
    margin-inline-end: var(--zbk-spacing-2xs);
  }
  .widescreen\:margin-block-end-2xs {
    margin-block-end: var(--zbk-spacing-2xs);
  }
  .widescreen\:margin-inline-start-2xs {
    margin-inline-start: var(--zbk-spacing-2xs);
  }
  .widescreen\:margin-xs {
    margin-inline: var(--zbk-spacing-xs);
  }
  .widescreen\:margin-block-xs,
  .widescreen\:margin-xs {
    margin-block: var(--zbk-spacing-xs);
  }
  .widescreen\:margin-inline-xs {
    margin-inline: var(--zbk-spacing-xs);
  }
  .widescreen\:margin-block-start-xs {
    margin-block-start: var(--zbk-spacing-xs);
  }
  .widescreen\:margin-inline-end-xs {
    margin-inline-end: var(--zbk-spacing-xs);
  }
  .widescreen\:margin-block-end-xs {
    margin-block-end: var(--zbk-spacing-xs);
  }
  .widescreen\:margin-inline-start-xs {
    margin-inline-start: var(--zbk-spacing-xs);
  }
  .widescreen\:margin-sm {
    margin-inline: var(--zbk-spacing-sm);
  }
  .widescreen\:margin-block-sm,
  .widescreen\:margin-sm {
    margin-block: var(--zbk-spacing-sm);
  }
  .widescreen\:margin-inline-sm {
    margin-inline: var(--zbk-spacing-sm);
  }
  .widescreen\:margin-block-start-sm {
    margin-block-start: var(--zbk-spacing-sm);
  }
  .widescreen\:margin-inline-end-sm {
    margin-inline-end: var(--zbk-spacing-sm);
  }
  .widescreen\:margin-block-end-sm {
    margin-block-end: var(--zbk-spacing-sm);
  }
  .widescreen\:margin-inline-start-sm {
    margin-inline-start: var(--zbk-spacing-sm);
  }
  .widescreen\:margin-md {
    margin-inline: var(--zbk-spacing-md);
  }
  .widescreen\:margin-block-md,
  .widescreen\:margin-md {
    margin-block: var(--zbk-spacing-md);
  }
  .widescreen\:margin-inline-md {
    margin-inline: var(--zbk-spacing-md);
  }
  .widescreen\:margin-block-start-md {
    margin-block-start: var(--zbk-spacing-md);
  }
  .widescreen\:margin-inline-end-md {
    margin-inline-end: var(--zbk-spacing-md);
  }
  .widescreen\:margin-block-end-md {
    margin-block-end: var(--zbk-spacing-md);
  }
  .widescreen\:margin-inline-start-md {
    margin-inline-start: var(--zbk-spacing-md);
  }
  .widescreen\:margin-lg {
    margin-inline: var(--zbk-spacing-lg);
  }
  .widescreen\:margin-block-lg,
  .widescreen\:margin-lg {
    margin-block: var(--zbk-spacing-lg);
  }
  .widescreen\:margin-inline-lg {
    margin-inline: var(--zbk-spacing-lg);
  }
  .widescreen\:margin-block-start-lg {
    margin-block-start: var(--zbk-spacing-lg);
  }
  .widescreen\:margin-inline-end-lg {
    margin-inline-end: var(--zbk-spacing-lg);
  }
  .widescreen\:margin-block-end-lg {
    margin-block-end: var(--zbk-spacing-lg);
  }
  .widescreen\:margin-inline-start-lg {
    margin-inline-start: var(--zbk-spacing-lg);
  }
  .widescreen\:margin-xl {
    margin-inline: var(--zbk-spacing-xl);
  }
  .widescreen\:margin-block-xl,
  .widescreen\:margin-xl {
    margin-block: var(--zbk-spacing-xl);
  }
  .widescreen\:margin-inline-xl {
    margin-inline: var(--zbk-spacing-xl);
  }
  .widescreen\:margin-block-start-xl {
    margin-block-start: var(--zbk-spacing-xl);
  }
  .widescreen\:margin-inline-end-xl {
    margin-inline-end: var(--zbk-spacing-xl);
  }
  .widescreen\:margin-block-end-xl {
    margin-block-end: var(--zbk-spacing-xl);
  }
  .widescreen\:margin-inline-start-xl {
    margin-inline-start: var(--zbk-spacing-xl);
  }
  .widescreen\:margin-2xl {
    margin-inline: var(--zbk-spacing-2xl);
  }
  .widescreen\:margin-2xl,
  .widescreen\:margin-block-2xl {
    margin-block: var(--zbk-spacing-2xl);
  }
  .widescreen\:margin-inline-2xl {
    margin-inline: var(--zbk-spacing-2xl);
  }
  .widescreen\:margin-block-start-2xl {
    margin-block-start: var(--zbk-spacing-2xl);
  }
  .widescreen\:margin-inline-end-2xl {
    margin-inline-end: var(--zbk-spacing-2xl);
  }
  .widescreen\:margin-block-end-2xl {
    margin-block-end: var(--zbk-spacing-2xl);
  }
  .widescreen\:margin-inline-start-2xl {
    margin-inline-start: var(--zbk-spacing-2xl);
  }
  .widescreen\:margin-3xl {
    margin-inline: var(--zbk-spacing-3xl);
  }
  .widescreen\:margin-3xl,
  .widescreen\:margin-block-3xl {
    margin-block: var(--zbk-spacing-3xl);
  }
  .widescreen\:margin-inline-3xl {
    margin-inline: var(--zbk-spacing-3xl);
  }
  .widescreen\:margin-block-start-3xl {
    margin-block-start: var(--zbk-spacing-3xl);
  }
  .widescreen\:margin-inline-end-3xl {
    margin-inline-end: var(--zbk-spacing-3xl);
  }
  .widescreen\:margin-block-end-3xl {
    margin-block-end: var(--zbk-spacing-3xl);
  }
  .widescreen\:margin-inline-start-3xl {
    margin-inline-start: var(--zbk-spacing-3xl);
  }
}
@media (min-width: 40rem) {
  .tablet\:padding-2xs {
    padding-inline: var(--zbk-spacing-2xs);
  }
  .tablet\:padding-2xs,
  .tablet\:padding-block-2xs {
    padding-block: var(--zbk-spacing-2xs);
  }
  .tablet\:padding-inline-2xs {
    padding-inline: var(--zbk-spacing-2xs);
  }
  .tablet\:padding-block-start-2xs {
    padding-block-start: var(--zbk-spacing-2xs);
  }
  .tablet\:padding-inline-end-2xs {
    padding-inline-end: var(--zbk-spacing-2xs);
  }
  .tablet\:padding-block-end-2xs {
    padding-block-end: var(--zbk-spacing-2xs);
  }
  .tablet\:padding-inline-start-2xs {
    padding-inline-start: var(--zbk-spacing-2xs);
  }
  .tablet\:padding-xs {
    padding-inline: var(--zbk-spacing-xs);
  }
  .tablet\:padding-block-xs,
  .tablet\:padding-xs {
    padding-block: var(--zbk-spacing-xs);
  }
  .tablet\:padding-inline-xs {
    padding-inline: var(--zbk-spacing-xs);
  }
  .tablet\:padding-block-start-xs {
    padding-block-start: var(--zbk-spacing-xs);
  }
  .tablet\:padding-inline-end-xs {
    padding-inline-end: var(--zbk-spacing-xs);
  }
  .tablet\:padding-block-end-xs {
    padding-block-end: var(--zbk-spacing-xs);
  }
  .tablet\:padding-inline-start-xs {
    padding-inline-start: var(--zbk-spacing-xs);
  }
  .tablet\:padding-sm {
    padding-inline: var(--zbk-spacing-sm);
  }
  .tablet\:padding-block-sm,
  .tablet\:padding-sm {
    padding-block: var(--zbk-spacing-sm);
  }
  .tablet\:padding-inline-sm {
    padding-inline: var(--zbk-spacing-sm);
  }
  .tablet\:padding-block-start-sm {
    padding-block-start: var(--zbk-spacing-sm);
  }
  .tablet\:padding-inline-end-sm {
    padding-inline-end: var(--zbk-spacing-sm);
  }
  .tablet\:padding-block-end-sm {
    padding-block-end: var(--zbk-spacing-sm);
  }
  .tablet\:padding-inline-start-sm {
    padding-inline-start: var(--zbk-spacing-sm);
  }
  .tablet\:padding-md {
    padding-inline: var(--zbk-spacing-md);
  }
  .tablet\:padding-block-md,
  .tablet\:padding-md {
    padding-block: var(--zbk-spacing-md);
  }
  .tablet\:padding-inline-md {
    padding-inline: var(--zbk-spacing-md);
  }
  .tablet\:padding-block-start-md {
    padding-block-start: var(--zbk-spacing-md);
  }
  .tablet\:padding-inline-end-md {
    padding-inline-end: var(--zbk-spacing-md);
  }
  .tablet\:padding-block-end-md {
    padding-block-end: var(--zbk-spacing-md);
  }
  .tablet\:padding-inline-start-md {
    padding-inline-start: var(--zbk-spacing-md);
  }
  .tablet\:padding-lg {
    padding-inline: var(--zbk-spacing-lg);
  }
  .tablet\:padding-block-lg,
  .tablet\:padding-lg {
    padding-block: var(--zbk-spacing-lg);
  }
  .tablet\:padding-inline-lg {
    padding-inline: var(--zbk-spacing-lg);
  }
  .tablet\:padding-block-start-lg {
    padding-block-start: var(--zbk-spacing-lg);
  }
  .tablet\:padding-inline-end-lg {
    padding-inline-end: var(--zbk-spacing-lg);
  }
  .tablet\:padding-block-end-lg {
    padding-block-end: var(--zbk-spacing-lg);
  }
  .tablet\:padding-inline-start-lg {
    padding-inline-start: var(--zbk-spacing-lg);
  }
  .tablet\:padding-xl {
    padding-inline: var(--zbk-spacing-xl);
  }
  .tablet\:padding-block-xl,
  .tablet\:padding-xl {
    padding-block: var(--zbk-spacing-xl);
  }
  .tablet\:padding-inline-xl {
    padding-inline: var(--zbk-spacing-xl);
  }
  .tablet\:padding-block-start-xl {
    padding-block-start: var(--zbk-spacing-xl);
  }
  .tablet\:padding-inline-end-xl {
    padding-inline-end: var(--zbk-spacing-xl);
  }
  .tablet\:padding-block-end-xl {
    padding-block-end: var(--zbk-spacing-xl);
  }
  .tablet\:padding-inline-start-xl {
    padding-inline-start: var(--zbk-spacing-xl);
  }
  .tablet\:padding-2xl {
    padding-inline: var(--zbk-spacing-2xl);
  }
  .tablet\:padding-2xl,
  .tablet\:padding-block-2xl {
    padding-block: var(--zbk-spacing-2xl);
  }
  .tablet\:padding-inline-2xl {
    padding-inline: var(--zbk-spacing-2xl);
  }
  .tablet\:padding-block-start-2xl {
    padding-block-start: var(--zbk-spacing-2xl);
  }
  .tablet\:padding-inline-end-2xl {
    padding-inline-end: var(--zbk-spacing-2xl);
  }
  .tablet\:padding-block-end-2xl {
    padding-block-end: var(--zbk-spacing-2xl);
  }
  .tablet\:padding-inline-start-2xl {
    padding-inline-start: var(--zbk-spacing-2xl);
  }
  .tablet\:padding-3xl {
    padding-inline: var(--zbk-spacing-3xl);
  }
  .tablet\:padding-3xl,
  .tablet\:padding-block-3xl {
    padding-block: var(--zbk-spacing-3xl);
  }
  .tablet\:padding-inline-3xl {
    padding-inline: var(--zbk-spacing-3xl);
  }
  .tablet\:padding-block-start-3xl {
    padding-block-start: var(--zbk-spacing-3xl);
  }
  .tablet\:padding-inline-end-3xl {
    padding-inline-end: var(--zbk-spacing-3xl);
  }
  .tablet\:padding-block-end-3xl {
    padding-block-end: var(--zbk-spacing-3xl);
  }
  .tablet\:padding-inline-start-3xl {
    padding-inline-start: var(--zbk-spacing-3xl);
  }
}
@media (min-width: 50rem) {
  .tablet-lg\:padding-2xs {
    padding-inline: var(--zbk-spacing-2xs);
  }
  .tablet-lg\:padding-2xs,
  .tablet-lg\:padding-block-2xs {
    padding-block: var(--zbk-spacing-2xs);
  }
  .tablet-lg\:padding-inline-2xs {
    padding-inline: var(--zbk-spacing-2xs);
  }
  .tablet-lg\:padding-block-start-2xs {
    padding-block-start: var(--zbk-spacing-2xs);
  }
  .tablet-lg\:padding-inline-end-2xs {
    padding-inline-end: var(--zbk-spacing-2xs);
  }
  .tablet-lg\:padding-block-end-2xs {
    padding-block-end: var(--zbk-spacing-2xs);
  }
  .tablet-lg\:padding-inline-start-2xs {
    padding-inline-start: var(--zbk-spacing-2xs);
  }
  .tablet-lg\:padding-xs {
    padding-inline: var(--zbk-spacing-xs);
  }
  .tablet-lg\:padding-block-xs,
  .tablet-lg\:padding-xs {
    padding-block: var(--zbk-spacing-xs);
  }
  .tablet-lg\:padding-inline-xs {
    padding-inline: var(--zbk-spacing-xs);
  }
  .tablet-lg\:padding-block-start-xs {
    padding-block-start: var(--zbk-spacing-xs);
  }
  .tablet-lg\:padding-inline-end-xs {
    padding-inline-end: var(--zbk-spacing-xs);
  }
  .tablet-lg\:padding-block-end-xs {
    padding-block-end: var(--zbk-spacing-xs);
  }
  .tablet-lg\:padding-inline-start-xs {
    padding-inline-start: var(--zbk-spacing-xs);
  }
  .tablet-lg\:padding-sm {
    padding-inline: var(--zbk-spacing-sm);
  }
  .tablet-lg\:padding-block-sm,
  .tablet-lg\:padding-sm {
    padding-block: var(--zbk-spacing-sm);
  }
  .tablet-lg\:padding-inline-sm {
    padding-inline: var(--zbk-spacing-sm);
  }
  .tablet-lg\:padding-block-start-sm {
    padding-block-start: var(--zbk-spacing-sm);
  }
  .tablet-lg\:padding-inline-end-sm {
    padding-inline-end: var(--zbk-spacing-sm);
  }
  .tablet-lg\:padding-block-end-sm {
    padding-block-end: var(--zbk-spacing-sm);
  }
  .tablet-lg\:padding-inline-start-sm {
    padding-inline-start: var(--zbk-spacing-sm);
  }
  .tablet-lg\:padding-md {
    padding-inline: var(--zbk-spacing-md);
  }
  .tablet-lg\:padding-block-md,
  .tablet-lg\:padding-md {
    padding-block: var(--zbk-spacing-md);
  }
  .tablet-lg\:padding-inline-md {
    padding-inline: var(--zbk-spacing-md);
  }
  .tablet-lg\:padding-block-start-md {
    padding-block-start: var(--zbk-spacing-md);
  }
  .tablet-lg\:padding-inline-end-md {
    padding-inline-end: var(--zbk-spacing-md);
  }
  .tablet-lg\:padding-block-end-md {
    padding-block-end: var(--zbk-spacing-md);
  }
  .tablet-lg\:padding-inline-start-md {
    padding-inline-start: var(--zbk-spacing-md);
  }
  .tablet-lg\:padding-lg {
    padding-inline: var(--zbk-spacing-lg);
  }
  .tablet-lg\:padding-block-lg,
  .tablet-lg\:padding-lg {
    padding-block: var(--zbk-spacing-lg);
  }
  .tablet-lg\:padding-inline-lg {
    padding-inline: var(--zbk-spacing-lg);
  }
  .tablet-lg\:padding-block-start-lg {
    padding-block-start: var(--zbk-spacing-lg);
  }
  .tablet-lg\:padding-inline-end-lg {
    padding-inline-end: var(--zbk-spacing-lg);
  }
  .tablet-lg\:padding-block-end-lg {
    padding-block-end: var(--zbk-spacing-lg);
  }
  .tablet-lg\:padding-inline-start-lg {
    padding-inline-start: var(--zbk-spacing-lg);
  }
  .tablet-lg\:padding-xl {
    padding-inline: var(--zbk-spacing-xl);
  }
  .tablet-lg\:padding-block-xl,
  .tablet-lg\:padding-xl {
    padding-block: var(--zbk-spacing-xl);
  }
  .tablet-lg\:padding-inline-xl {
    padding-inline: var(--zbk-spacing-xl);
  }
  .tablet-lg\:padding-block-start-xl {
    padding-block-start: var(--zbk-spacing-xl);
  }
  .tablet-lg\:padding-inline-end-xl {
    padding-inline-end: var(--zbk-spacing-xl);
  }
  .tablet-lg\:padding-block-end-xl {
    padding-block-end: var(--zbk-spacing-xl);
  }
  .tablet-lg\:padding-inline-start-xl {
    padding-inline-start: var(--zbk-spacing-xl);
  }
  .tablet-lg\:padding-2xl {
    padding-inline: var(--zbk-spacing-2xl);
  }
  .tablet-lg\:padding-2xl,
  .tablet-lg\:padding-block-2xl {
    padding-block: var(--zbk-spacing-2xl);
  }
  .tablet-lg\:padding-inline-2xl {
    padding-inline: var(--zbk-spacing-2xl);
  }
  .tablet-lg\:padding-block-start-2xl {
    padding-block-start: var(--zbk-spacing-2xl);
  }
  .tablet-lg\:padding-inline-end-2xl {
    padding-inline-end: var(--zbk-spacing-2xl);
  }
  .tablet-lg\:padding-block-end-2xl {
    padding-block-end: var(--zbk-spacing-2xl);
  }
  .tablet-lg\:padding-inline-start-2xl {
    padding-inline-start: var(--zbk-spacing-2xl);
  }
  .tablet-lg\:padding-3xl {
    padding-inline: var(--zbk-spacing-3xl);
  }
  .tablet-lg\:padding-3xl,
  .tablet-lg\:padding-block-3xl {
    padding-block: var(--zbk-spacing-3xl);
  }
  .tablet-lg\:padding-inline-3xl {
    padding-inline: var(--zbk-spacing-3xl);
  }
  .tablet-lg\:padding-block-start-3xl {
    padding-block-start: var(--zbk-spacing-3xl);
  }
  .tablet-lg\:padding-inline-end-3xl {
    padding-inline-end: var(--zbk-spacing-3xl);
  }
  .tablet-lg\:padding-block-end-3xl {
    padding-block-end: var(--zbk-spacing-3xl);
  }
  .tablet-lg\:padding-inline-start-3xl {
    padding-inline-start: var(--zbk-spacing-3xl);
  }
}
@media (min-width: 70rem) {
  .desktop\:padding-2xs {
    padding-inline: var(--zbk-spacing-2xs);
  }
  .desktop\:padding-2xs,
  .desktop\:padding-block-2xs {
    padding-block: var(--zbk-spacing-2xs);
  }
  .desktop\:padding-inline-2xs {
    padding-inline: var(--zbk-spacing-2xs);
  }
  .desktop\:padding-block-start-2xs {
    padding-block-start: var(--zbk-spacing-2xs);
  }
  .desktop\:padding-inline-end-2xs {
    padding-inline-end: var(--zbk-spacing-2xs);
  }
  .desktop\:padding-block-end-2xs {
    padding-block-end: var(--zbk-spacing-2xs);
  }
  .desktop\:padding-inline-start-2xs {
    padding-inline-start: var(--zbk-spacing-2xs);
  }
  .desktop\:padding-xs {
    padding-inline: var(--zbk-spacing-xs);
  }
  .desktop\:padding-block-xs,
  .desktop\:padding-xs {
    padding-block: var(--zbk-spacing-xs);
  }
  .desktop\:padding-inline-xs {
    padding-inline: var(--zbk-spacing-xs);
  }
  .desktop\:padding-block-start-xs {
    padding-block-start: var(--zbk-spacing-xs);
  }
  .desktop\:padding-inline-end-xs {
    padding-inline-end: var(--zbk-spacing-xs);
  }
  .desktop\:padding-block-end-xs {
    padding-block-end: var(--zbk-spacing-xs);
  }
  .desktop\:padding-inline-start-xs {
    padding-inline-start: var(--zbk-spacing-xs);
  }
  .desktop\:padding-sm {
    padding-inline: var(--zbk-spacing-sm);
  }
  .desktop\:padding-block-sm,
  .desktop\:padding-sm {
    padding-block: var(--zbk-spacing-sm);
  }
  .desktop\:padding-inline-sm {
    padding-inline: var(--zbk-spacing-sm);
  }
  .desktop\:padding-block-start-sm {
    padding-block-start: var(--zbk-spacing-sm);
  }
  .desktop\:padding-inline-end-sm {
    padding-inline-end: var(--zbk-spacing-sm);
  }
  .desktop\:padding-block-end-sm {
    padding-block-end: var(--zbk-spacing-sm);
  }
  .desktop\:padding-inline-start-sm {
    padding-inline-start: var(--zbk-spacing-sm);
  }
  .desktop\:padding-md {
    padding-inline: var(--zbk-spacing-md);
  }
  .desktop\:padding-block-md,
  .desktop\:padding-md {
    padding-block: var(--zbk-spacing-md);
  }
  .desktop\:padding-inline-md {
    padding-inline: var(--zbk-spacing-md);
  }
  .desktop\:padding-block-start-md {
    padding-block-start: var(--zbk-spacing-md);
  }
  .desktop\:padding-inline-end-md {
    padding-inline-end: var(--zbk-spacing-md);
  }
  .desktop\:padding-block-end-md {
    padding-block-end: var(--zbk-spacing-md);
  }
  .desktop\:padding-inline-start-md {
    padding-inline-start: var(--zbk-spacing-md);
  }
  .desktop\:padding-lg {
    padding-inline: var(--zbk-spacing-lg);
  }
  .desktop\:padding-block-lg,
  .desktop\:padding-lg {
    padding-block: var(--zbk-spacing-lg);
  }
  .desktop\:padding-inline-lg {
    padding-inline: var(--zbk-spacing-lg);
  }
  .desktop\:padding-block-start-lg {
    padding-block-start: var(--zbk-spacing-lg);
  }
  .desktop\:padding-inline-end-lg {
    padding-inline-end: var(--zbk-spacing-lg);
  }
  .desktop\:padding-block-end-lg {
    padding-block-end: var(--zbk-spacing-lg);
  }
  .desktop\:padding-inline-start-lg {
    padding-inline-start: var(--zbk-spacing-lg);
  }
  .desktop\:padding-xl {
    padding-inline: var(--zbk-spacing-xl);
  }
  .desktop\:padding-block-xl,
  .desktop\:padding-xl {
    padding-block: var(--zbk-spacing-xl);
  }
  .desktop\:padding-inline-xl {
    padding-inline: var(--zbk-spacing-xl);
  }
  .desktop\:padding-block-start-xl {
    padding-block-start: var(--zbk-spacing-xl);
  }
  .desktop\:padding-inline-end-xl {
    padding-inline-end: var(--zbk-spacing-xl);
  }
  .desktop\:padding-block-end-xl {
    padding-block-end: var(--zbk-spacing-xl);
  }
  .desktop\:padding-inline-start-xl {
    padding-inline-start: var(--zbk-spacing-xl);
  }
  .desktop\:padding-2xl {
    padding-inline: var(--zbk-spacing-2xl);
  }
  .desktop\:padding-2xl,
  .desktop\:padding-block-2xl {
    padding-block: var(--zbk-spacing-2xl);
  }
  .desktop\:padding-inline-2xl {
    padding-inline: var(--zbk-spacing-2xl);
  }
  .desktop\:padding-block-start-2xl {
    padding-block-start: var(--zbk-spacing-2xl);
  }
  .desktop\:padding-inline-end-2xl {
    padding-inline-end: var(--zbk-spacing-2xl);
  }
  .desktop\:padding-block-end-2xl {
    padding-block-end: var(--zbk-spacing-2xl);
  }
  .desktop\:padding-inline-start-2xl {
    padding-inline-start: var(--zbk-spacing-2xl);
  }
  .desktop\:padding-3xl {
    padding-inline: var(--zbk-spacing-3xl);
  }
  .desktop\:padding-3xl,
  .desktop\:padding-block-3xl {
    padding-block: var(--zbk-spacing-3xl);
  }
  .desktop\:padding-inline-3xl {
    padding-inline: var(--zbk-spacing-3xl);
  }
  .desktop\:padding-block-start-3xl {
    padding-block-start: var(--zbk-spacing-3xl);
  }
  .desktop\:padding-inline-end-3xl {
    padding-inline-end: var(--zbk-spacing-3xl);
  }
  .desktop\:padding-block-end-3xl {
    padding-block-end: var(--zbk-spacing-3xl);
  }
  .desktop\:padding-inline-start-3xl {
    padding-inline-start: var(--zbk-spacing-3xl);
  }
}
@media (min-width: 80rem) {
  .desktop-lg\:padding-2xs {
    padding-inline: var(--zbk-spacing-2xs);
  }
  .desktop-lg\:padding-2xs,
  .desktop-lg\:padding-block-2xs {
    padding-block: var(--zbk-spacing-2xs);
  }
  .desktop-lg\:padding-inline-2xs {
    padding-inline: var(--zbk-spacing-2xs);
  }
  .desktop-lg\:padding-block-start-2xs {
    padding-block-start: var(--zbk-spacing-2xs);
  }
  .desktop-lg\:padding-inline-end-2xs {
    padding-inline-end: var(--zbk-spacing-2xs);
  }
  .desktop-lg\:padding-block-end-2xs {
    padding-block-end: var(--zbk-spacing-2xs);
  }
  .desktop-lg\:padding-inline-start-2xs {
    padding-inline-start: var(--zbk-spacing-2xs);
  }
  .desktop-lg\:padding-xs {
    padding-inline: var(--zbk-spacing-xs);
  }
  .desktop-lg\:padding-block-xs,
  .desktop-lg\:padding-xs {
    padding-block: var(--zbk-spacing-xs);
  }
  .desktop-lg\:padding-inline-xs {
    padding-inline: var(--zbk-spacing-xs);
  }
  .desktop-lg\:padding-block-start-xs {
    padding-block-start: var(--zbk-spacing-xs);
  }
  .desktop-lg\:padding-inline-end-xs {
    padding-inline-end: var(--zbk-spacing-xs);
  }
  .desktop-lg\:padding-block-end-xs {
    padding-block-end: var(--zbk-spacing-xs);
  }
  .desktop-lg\:padding-inline-start-xs {
    padding-inline-start: var(--zbk-spacing-xs);
  }
  .desktop-lg\:padding-sm {
    padding-inline: var(--zbk-spacing-sm);
  }
  .desktop-lg\:padding-block-sm,
  .desktop-lg\:padding-sm {
    padding-block: var(--zbk-spacing-sm);
  }
  .desktop-lg\:padding-inline-sm {
    padding-inline: var(--zbk-spacing-sm);
  }
  .desktop-lg\:padding-block-start-sm {
    padding-block-start: var(--zbk-spacing-sm);
  }
  .desktop-lg\:padding-inline-end-sm {
    padding-inline-end: var(--zbk-spacing-sm);
  }
  .desktop-lg\:padding-block-end-sm {
    padding-block-end: var(--zbk-spacing-sm);
  }
  .desktop-lg\:padding-inline-start-sm {
    padding-inline-start: var(--zbk-spacing-sm);
  }
  .desktop-lg\:padding-md {
    padding-inline: var(--zbk-spacing-md);
  }
  .desktop-lg\:padding-block-md,
  .desktop-lg\:padding-md {
    padding-block: var(--zbk-spacing-md);
  }
  .desktop-lg\:padding-inline-md {
    padding-inline: var(--zbk-spacing-md);
  }
  .desktop-lg\:padding-block-start-md {
    padding-block-start: var(--zbk-spacing-md);
  }
  .desktop-lg\:padding-inline-end-md {
    padding-inline-end: var(--zbk-spacing-md);
  }
  .desktop-lg\:padding-block-end-md {
    padding-block-end: var(--zbk-spacing-md);
  }
  .desktop-lg\:padding-inline-start-md {
    padding-inline-start: var(--zbk-spacing-md);
  }
  .desktop-lg\:padding-lg {
    padding-inline: var(--zbk-spacing-lg);
  }
  .desktop-lg\:padding-block-lg,
  .desktop-lg\:padding-lg {
    padding-block: var(--zbk-spacing-lg);
  }
  .desktop-lg\:padding-inline-lg {
    padding-inline: var(--zbk-spacing-lg);
  }
  .desktop-lg\:padding-block-start-lg {
    padding-block-start: var(--zbk-spacing-lg);
  }
  .desktop-lg\:padding-inline-end-lg {
    padding-inline-end: var(--zbk-spacing-lg);
  }
  .desktop-lg\:padding-block-end-lg {
    padding-block-end: var(--zbk-spacing-lg);
  }
  .desktop-lg\:padding-inline-start-lg {
    padding-inline-start: var(--zbk-spacing-lg);
  }
  .desktop-lg\:padding-xl {
    padding-inline: var(--zbk-spacing-xl);
  }
  .desktop-lg\:padding-block-xl,
  .desktop-lg\:padding-xl {
    padding-block: var(--zbk-spacing-xl);
  }
  .desktop-lg\:padding-inline-xl {
    padding-inline: var(--zbk-spacing-xl);
  }
  .desktop-lg\:padding-block-start-xl {
    padding-block-start: var(--zbk-spacing-xl);
  }
  .desktop-lg\:padding-inline-end-xl {
    padding-inline-end: var(--zbk-spacing-xl);
  }
  .desktop-lg\:padding-block-end-xl {
    padding-block-end: var(--zbk-spacing-xl);
  }
  .desktop-lg\:padding-inline-start-xl {
    padding-inline-start: var(--zbk-spacing-xl);
  }
  .desktop-lg\:padding-2xl {
    padding-inline: var(--zbk-spacing-2xl);
  }
  .desktop-lg\:padding-2xl,
  .desktop-lg\:padding-block-2xl {
    padding-block: var(--zbk-spacing-2xl);
  }
  .desktop-lg\:padding-inline-2xl {
    padding-inline: var(--zbk-spacing-2xl);
  }
  .desktop-lg\:padding-block-start-2xl {
    padding-block-start: var(--zbk-spacing-2xl);
  }
  .desktop-lg\:padding-inline-end-2xl {
    padding-inline-end: var(--zbk-spacing-2xl);
  }
  .desktop-lg\:padding-block-end-2xl {
    padding-block-end: var(--zbk-spacing-2xl);
  }
  .desktop-lg\:padding-inline-start-2xl {
    padding-inline-start: var(--zbk-spacing-2xl);
  }
  .desktop-lg\:padding-3xl {
    padding-inline: var(--zbk-spacing-3xl);
  }
  .desktop-lg\:padding-3xl,
  .desktop-lg\:padding-block-3xl {
    padding-block: var(--zbk-spacing-3xl);
  }
  .desktop-lg\:padding-inline-3xl {
    padding-inline: var(--zbk-spacing-3xl);
  }
  .desktop-lg\:padding-block-start-3xl {
    padding-block-start: var(--zbk-spacing-3xl);
  }
  .desktop-lg\:padding-inline-end-3xl {
    padding-inline-end: var(--zbk-spacing-3xl);
  }
  .desktop-lg\:padding-block-end-3xl {
    padding-block-end: var(--zbk-spacing-3xl);
  }
  .desktop-lg\:padding-inline-start-3xl {
    padding-inline-start: var(--zbk-spacing-3xl);
  }
}
@media (min-width: 100rem) {
  .widescreen\:padding-2xs {
    padding-inline: var(--zbk-spacing-2xs);
  }
  .widescreen\:padding-2xs,
  .widescreen\:padding-block-2xs {
    padding-block: var(--zbk-spacing-2xs);
  }
  .widescreen\:padding-inline-2xs {
    padding-inline: var(--zbk-spacing-2xs);
  }
  .widescreen\:padding-block-start-2xs {
    padding-block-start: var(--zbk-spacing-2xs);
  }
  .widescreen\:padding-inline-end-2xs {
    padding-inline-end: var(--zbk-spacing-2xs);
  }
  .widescreen\:padding-block-end-2xs {
    padding-block-end: var(--zbk-spacing-2xs);
  }
  .widescreen\:padding-inline-start-2xs {
    padding-inline-start: var(--zbk-spacing-2xs);
  }
  .widescreen\:padding-xs {
    padding-inline: var(--zbk-spacing-xs);
  }
  .widescreen\:padding-block-xs,
  .widescreen\:padding-xs {
    padding-block: var(--zbk-spacing-xs);
  }
  .widescreen\:padding-inline-xs {
    padding-inline: var(--zbk-spacing-xs);
  }
  .widescreen\:padding-block-start-xs {
    padding-block-start: var(--zbk-spacing-xs);
  }
  .widescreen\:padding-inline-end-xs {
    padding-inline-end: var(--zbk-spacing-xs);
  }
  .widescreen\:padding-block-end-xs {
    padding-block-end: var(--zbk-spacing-xs);
  }
  .widescreen\:padding-inline-start-xs {
    padding-inline-start: var(--zbk-spacing-xs);
  }
  .widescreen\:padding-sm {
    padding-inline: var(--zbk-spacing-sm);
  }
  .widescreen\:padding-block-sm,
  .widescreen\:padding-sm {
    padding-block: var(--zbk-spacing-sm);
  }
  .widescreen\:padding-inline-sm {
    padding-inline: var(--zbk-spacing-sm);
  }
  .widescreen\:padding-block-start-sm {
    padding-block-start: var(--zbk-spacing-sm);
  }
  .widescreen\:padding-inline-end-sm {
    padding-inline-end: var(--zbk-spacing-sm);
  }
  .widescreen\:padding-block-end-sm {
    padding-block-end: var(--zbk-spacing-sm);
  }
  .widescreen\:padding-inline-start-sm {
    padding-inline-start: var(--zbk-spacing-sm);
  }
  .widescreen\:padding-md {
    padding-inline: var(--zbk-spacing-md);
  }
  .widescreen\:padding-block-md,
  .widescreen\:padding-md {
    padding-block: var(--zbk-spacing-md);
  }
  .widescreen\:padding-inline-md {
    padding-inline: var(--zbk-spacing-md);
  }
  .widescreen\:padding-block-start-md {
    padding-block-start: var(--zbk-spacing-md);
  }
  .widescreen\:padding-inline-end-md {
    padding-inline-end: var(--zbk-spacing-md);
  }
  .widescreen\:padding-block-end-md {
    padding-block-end: var(--zbk-spacing-md);
  }
  .widescreen\:padding-inline-start-md {
    padding-inline-start: var(--zbk-spacing-md);
  }
  .widescreen\:padding-lg {
    padding-inline: var(--zbk-spacing-lg);
  }
  .widescreen\:padding-block-lg,
  .widescreen\:padding-lg {
    padding-block: var(--zbk-spacing-lg);
  }
  .widescreen\:padding-inline-lg {
    padding-inline: var(--zbk-spacing-lg);
  }
  .widescreen\:padding-block-start-lg {
    padding-block-start: var(--zbk-spacing-lg);
  }
  .widescreen\:padding-inline-end-lg {
    padding-inline-end: var(--zbk-spacing-lg);
  }
  .widescreen\:padding-block-end-lg {
    padding-block-end: var(--zbk-spacing-lg);
  }
  .widescreen\:padding-inline-start-lg {
    padding-inline-start: var(--zbk-spacing-lg);
  }
  .widescreen\:padding-xl {
    padding-inline: var(--zbk-spacing-xl);
  }
  .widescreen\:padding-block-xl,
  .widescreen\:padding-xl {
    padding-block: var(--zbk-spacing-xl);
  }
  .widescreen\:padding-inline-xl {
    padding-inline: var(--zbk-spacing-xl);
  }
  .widescreen\:padding-block-start-xl {
    padding-block-start: var(--zbk-spacing-xl);
  }
  .widescreen\:padding-inline-end-xl {
    padding-inline-end: var(--zbk-spacing-xl);
  }
  .widescreen\:padding-block-end-xl {
    padding-block-end: var(--zbk-spacing-xl);
  }
  .widescreen\:padding-inline-start-xl {
    padding-inline-start: var(--zbk-spacing-xl);
  }
  .widescreen\:padding-2xl {
    padding-inline: var(--zbk-spacing-2xl);
  }
  .widescreen\:padding-2xl,
  .widescreen\:padding-block-2xl {
    padding-block: var(--zbk-spacing-2xl);
  }
  .widescreen\:padding-inline-2xl {
    padding-inline: var(--zbk-spacing-2xl);
  }
  .widescreen\:padding-block-start-2xl {
    padding-block-start: var(--zbk-spacing-2xl);
  }
  .widescreen\:padding-inline-end-2xl {
    padding-inline-end: var(--zbk-spacing-2xl);
  }
  .widescreen\:padding-block-end-2xl {
    padding-block-end: var(--zbk-spacing-2xl);
  }
  .widescreen\:padding-inline-start-2xl {
    padding-inline-start: var(--zbk-spacing-2xl);
  }
  .widescreen\:padding-3xl {
    padding-inline: var(--zbk-spacing-3xl);
  }
  .widescreen\:padding-3xl,
  .widescreen\:padding-block-3xl {
    padding-block: var(--zbk-spacing-3xl);
  }
  .widescreen\:padding-inline-3xl {
    padding-inline: var(--zbk-spacing-3xl);
  }
  .widescreen\:padding-block-start-3xl {
    padding-block-start: var(--zbk-spacing-3xl);
  }
  .widescreen\:padding-inline-end-3xl {
    padding-inline-end: var(--zbk-spacing-3xl);
  }
  .widescreen\:padding-block-end-3xl {
    padding-block-end: var(--zbk-spacing-3xl);
  }
  .widescreen\:padding-inline-start-3xl {
    padding-inline-start: var(--zbk-spacing-3xl);
  }
}
@media (min-width: 40rem) {
  .tablet\:gap-2xs {
    gap: var(--zbk-spacing-2xs);
  }
  .tablet\:gap-xs {
    gap: var(--zbk-spacing-xs);
  }
  .tablet\:gap-sm {
    gap: var(--zbk-spacing-sm);
  }
  .tablet\:gap-md {
    gap: var(--zbk-spacing-md);
  }
  .tablet\:gap-lg {
    gap: var(--zbk-spacing-lg);
  }
  .tablet\:gap-xl {
    gap: var(--zbk-spacing-xl);
  }
  .tablet\:gap-2xl {
    gap: var(--zbk-spacing-2xl);
  }
  .tablet\:gap-3xl {
    gap: var(--zbk-spacing-3xl);
  }
}
@media (min-width: 50rem) {
  .tablet-lg\:gap-2xs {
    gap: var(--zbk-spacing-2xs);
  }
  .tablet-lg\:gap-xs {
    gap: var(--zbk-spacing-xs);
  }
  .tablet-lg\:gap-sm {
    gap: var(--zbk-spacing-sm);
  }
  .tablet-lg\:gap-md {
    gap: var(--zbk-spacing-md);
  }
  .tablet-lg\:gap-lg {
    gap: var(--zbk-spacing-lg);
  }
  .tablet-lg\:gap-xl {
    gap: var(--zbk-spacing-xl);
  }
  .tablet-lg\:gap-2xl {
    gap: var(--zbk-spacing-2xl);
  }
  .tablet-lg\:gap-3xl {
    gap: var(--zbk-spacing-3xl);
  }
}
@media (min-width: 70rem) {
  .desktop\:gap-2xs {
    gap: var(--zbk-spacing-2xs);
  }
  .desktop\:gap-xs {
    gap: var(--zbk-spacing-xs);
  }
  .desktop\:gap-sm {
    gap: var(--zbk-spacing-sm);
  }
  .desktop\:gap-md {
    gap: var(--zbk-spacing-md);
  }
  .desktop\:gap-lg {
    gap: var(--zbk-spacing-lg);
  }
  .desktop\:gap-xl {
    gap: var(--zbk-spacing-xl);
  }
  .desktop\:gap-2xl {
    gap: var(--zbk-spacing-2xl);
  }
  .desktop\:gap-3xl {
    gap: var(--zbk-spacing-3xl);
  }
}
@media (min-width: 80rem) {
  .desktop-lg\:gap-2xs {
    gap: var(--zbk-spacing-2xs);
  }
  .desktop-lg\:gap-xs {
    gap: var(--zbk-spacing-xs);
  }
  .desktop-lg\:gap-sm {
    gap: var(--zbk-spacing-sm);
  }
  .desktop-lg\:gap-md {
    gap: var(--zbk-spacing-md);
  }
  .desktop-lg\:gap-lg {
    gap: var(--zbk-spacing-lg);
  }
  .desktop-lg\:gap-xl {
    gap: var(--zbk-spacing-xl);
  }
  .desktop-lg\:gap-2xl {
    gap: var(--zbk-spacing-2xl);
  }
  .desktop-lg\:gap-3xl {
    gap: var(--zbk-spacing-3xl);
  }
}
@media (min-width: 100rem) {
  .widescreen\:gap-2xs {
    gap: var(--zbk-spacing-2xs);
  }
  .widescreen\:gap-xs {
    gap: var(--zbk-spacing-xs);
  }
  .widescreen\:gap-sm {
    gap: var(--zbk-spacing-sm);
  }
  .widescreen\:gap-md {
    gap: var(--zbk-spacing-md);
  }
  .widescreen\:gap-lg {
    gap: var(--zbk-spacing-lg);
  }
  .widescreen\:gap-xl {
    gap: var(--zbk-spacing-xl);
  }
  .widescreen\:gap-2xl {
    gap: var(--zbk-spacing-2xl);
  }
  .widescreen\:gap-3xl {
    gap: var(--zbk-spacing-3xl);
  }
}
@layer utilities {
  .border-width-0 {
    border-width: 0;
  }
  .border-width-y-0 {
    border-bottom-width: 0;
    border-top-width: 0;
  }
  .border-width-x-0 {
    border-left-width: 0;
    border-right-width: 0;
  }
  .border-width-top-0 {
    border-top-width: 0;
  }
  .border-width-bottom-0 {
    border-bottom-width: 0;
  }
  .border-width-left-0 {
    border-left-width: 0;
  }
  .border-width-right-0 {
    border-right-width: 0;
  }
  .border-width-2xs {
    border-width: var(--zbk-border-width-2xs);
  }
  .border-width-y-2xs {
    border-bottom-width: var(--zbk-border-width-2xs);
    border-top-width: var(--zbk-border-width-2xs);
  }
  .border-width-x-2xs {
    border-left-width: var(--zbk-border-width-2xs);
    border-right-width: var(--zbk-border-width-2xs);
  }
  .border-width-top-2xs {
    border-top-width: var(--zbk-border-width-2xs);
  }
  .border-width-bottom-2xs {
    border-bottom-width: var(--zbk-border-width-2xs);
  }
  .border-width-left-2xs {
    border-left-width: var(--zbk-border-width-2xs);
  }
  .border-width-right-2xs {
    border-right-width: var(--zbk-border-width-2xs);
  }
  .border-width-xs {
    border-width: var(--zbk-border-width-xs);
  }
  .border-width-y-xs {
    border-bottom-width: var(--zbk-border-width-xs);
    border-top-width: var(--zbk-border-width-xs);
  }
  .border-width-x-xs {
    border-left-width: var(--zbk-border-width-xs);
    border-right-width: var(--zbk-border-width-xs);
  }
  .border-width-top-xs {
    border-top-width: var(--zbk-border-width-xs);
  }
  .border-width-bottom-xs {
    border-bottom-width: var(--zbk-border-width-xs);
  }
  .border-width-left-xs {
    border-left-width: var(--zbk-border-width-xs);
  }
  .border-width-right-xs {
    border-right-width: var(--zbk-border-width-xs);
  }
  .border-width-sm {
    border-width: var(--zbk-border-width-sm);
  }
  .border-width-y-sm {
    border-bottom-width: var(--zbk-border-width-sm);
    border-top-width: var(--zbk-border-width-sm);
  }
  .border-width-x-sm {
    border-left-width: var(--zbk-border-width-sm);
    border-right-width: var(--zbk-border-width-sm);
  }
  .border-width-top-sm {
    border-top-width: var(--zbk-border-width-sm);
  }
  .border-width-bottom-sm {
    border-bottom-width: var(--zbk-border-width-sm);
  }
  .border-width-left-sm {
    border-left-width: var(--zbk-border-width-sm);
  }
  .border-width-right-sm {
    border-right-width: var(--zbk-border-width-sm);
  }
  .border-width-md {
    border-width: var(--zbk-border-width-md);
  }
  .border-width-y-md {
    border-bottom-width: var(--zbk-border-width-md);
    border-top-width: var(--zbk-border-width-md);
  }
  .border-width-x-md {
    border-left-width: var(--zbk-border-width-md);
    border-right-width: var(--zbk-border-width-md);
  }
  .border-width-top-md {
    border-top-width: var(--zbk-border-width-md);
  }
  .border-width-bottom-md {
    border-bottom-width: var(--zbk-border-width-md);
  }
  .border-width-left-md {
    border-left-width: var(--zbk-border-width-md);
  }
  .border-width-right-md {
    border-right-width: var(--zbk-border-width-md);
  }
  .border-width-lg {
    border-width: var(--zbk-border-width-lg);
  }
  .border-width-y-lg {
    border-bottom-width: var(--zbk-border-width-lg);
    border-top-width: var(--zbk-border-width-lg);
  }
  .border-width-x-lg {
    border-left-width: var(--zbk-border-width-lg);
    border-right-width: var(--zbk-border-width-lg);
  }
  .border-width-top-lg {
    border-top-width: var(--zbk-border-width-lg);
  }
  .border-width-bottom-lg {
    border-bottom-width: var(--zbk-border-width-lg);
  }
  .border-width-left-lg {
    border-left-width: var(--zbk-border-width-lg);
  }
  .border-width-right-lg {
    border-right-width: var(--zbk-border-width-lg);
  }
  .border-width-xl {
    border-width: var(--zbk-border-width-xl);
  }
  .border-width-y-xl {
    border-bottom-width: var(--zbk-border-width-xl);
    border-top-width: var(--zbk-border-width-xl);
  }
  .border-width-x-xl {
    border-left-width: var(--zbk-border-width-xl);
    border-right-width: var(--zbk-border-width-xl);
  }
  .border-width-top-xl {
    border-top-width: var(--zbk-border-width-xl);
  }
  .border-width-bottom-xl {
    border-bottom-width: var(--zbk-border-width-xl);
  }
  .border-width-left-xl {
    border-left-width: var(--zbk-border-width-xl);
  }
  .border-width-right-xl {
    border-right-width: var(--zbk-border-width-xl);
  }
  @media (min-width: 40rem) {
    .tablet\:border-width-0 {
      border-width: 0;
    }
    .tablet\:border-width-y-0 {
      border-bottom-width: 0;
      border-top-width: 0;
    }
    .tablet\:border-width-x-0 {
      border-left-width: 0;
      border-right-width: 0;
    }
    .tablet\:border-width-top-0 {
      border-top-width: 0;
    }
    .tablet\:border-width-bottom-0 {
      border-bottom-width: 0;
    }
    .tablet\:border-width-left-0 {
      border-left-width: 0;
    }
    .tablet\:border-width-right-0 {
      border-right-width: 0;
    }
    .tablet\:border-width-2xs {
      border-width: var(--zbk-border-width-2xs);
    }
    .tablet\:border-width-y-2xs {
      border-bottom-width: var(--zbk-border-width-2xs);
      border-top-width: var(--zbk-border-width-2xs);
    }
    .tablet\:border-width-x-2xs {
      border-left-width: var(--zbk-border-width-2xs);
      border-right-width: var(--zbk-border-width-2xs);
    }
    .tablet\:border-width-top-2xs {
      border-top-width: var(--zbk-border-width-2xs);
    }
    .tablet\:border-width-bottom-2xs {
      border-bottom-width: var(--zbk-border-width-2xs);
    }
    .tablet\:border-width-left-2xs {
      border-left-width: var(--zbk-border-width-2xs);
    }
    .tablet\:border-width-right-2xs {
      border-right-width: var(--zbk-border-width-2xs);
    }
    .tablet\:border-width-xs {
      border-width: var(--zbk-border-width-xs);
    }
    .tablet\:border-width-y-xs {
      border-bottom-width: var(--zbk-border-width-xs);
      border-top-width: var(--zbk-border-width-xs);
    }
    .tablet\:border-width-x-xs {
      border-left-width: var(--zbk-border-width-xs);
      border-right-width: var(--zbk-border-width-xs);
    }
    .tablet\:border-width-top-xs {
      border-top-width: var(--zbk-border-width-xs);
    }
    .tablet\:border-width-bottom-xs {
      border-bottom-width: var(--zbk-border-width-xs);
    }
    .tablet\:border-width-left-xs {
      border-left-width: var(--zbk-border-width-xs);
    }
    .tablet\:border-width-right-xs {
      border-right-width: var(--zbk-border-width-xs);
    }
    .tablet\:border-width-sm {
      border-width: var(--zbk-border-width-sm);
    }
    .tablet\:border-width-y-sm {
      border-bottom-width: var(--zbk-border-width-sm);
      border-top-width: var(--zbk-border-width-sm);
    }
    .tablet\:border-width-x-sm {
      border-left-width: var(--zbk-border-width-sm);
      border-right-width: var(--zbk-border-width-sm);
    }
    .tablet\:border-width-top-sm {
      border-top-width: var(--zbk-border-width-sm);
    }
    .tablet\:border-width-bottom-sm {
      border-bottom-width: var(--zbk-border-width-sm);
    }
    .tablet\:border-width-left-sm {
      border-left-width: var(--zbk-border-width-sm);
    }
    .tablet\:border-width-right-sm {
      border-right-width: var(--zbk-border-width-sm);
    }
    .tablet\:border-width-md {
      border-width: var(--zbk-border-width-md);
    }
    .tablet\:border-width-y-md {
      border-bottom-width: var(--zbk-border-width-md);
      border-top-width: var(--zbk-border-width-md);
    }
    .tablet\:border-width-x-md {
      border-left-width: var(--zbk-border-width-md);
      border-right-width: var(--zbk-border-width-md);
    }
    .tablet\:border-width-top-md {
      border-top-width: var(--zbk-border-width-md);
    }
    .tablet\:border-width-bottom-md {
      border-bottom-width: var(--zbk-border-width-md);
    }
    .tablet\:border-width-left-md {
      border-left-width: var(--zbk-border-width-md);
    }
    .tablet\:border-width-right-md {
      border-right-width: var(--zbk-border-width-md);
    }
    .tablet\:border-width-lg {
      border-width: var(--zbk-border-width-lg);
    }
    .tablet\:border-width-y-lg {
      border-bottom-width: var(--zbk-border-width-lg);
      border-top-width: var(--zbk-border-width-lg);
    }
    .tablet\:border-width-x-lg {
      border-left-width: var(--zbk-border-width-lg);
      border-right-width: var(--zbk-border-width-lg);
    }
    .tablet\:border-width-top-lg {
      border-top-width: var(--zbk-border-width-lg);
    }
    .tablet\:border-width-bottom-lg {
      border-bottom-width: var(--zbk-border-width-lg);
    }
    .tablet\:border-width-left-lg {
      border-left-width: var(--zbk-border-width-lg);
    }
    .tablet\:border-width-right-lg {
      border-right-width: var(--zbk-border-width-lg);
    }
    .tablet\:border-width-xl {
      border-width: var(--zbk-border-width-xl);
    }
    .tablet\:border-width-y-xl {
      border-bottom-width: var(--zbk-border-width-xl);
      border-top-width: var(--zbk-border-width-xl);
    }
    .tablet\:border-width-x-xl {
      border-left-width: var(--zbk-border-width-xl);
      border-right-width: var(--zbk-border-width-xl);
    }
    .tablet\:border-width-top-xl {
      border-top-width: var(--zbk-border-width-xl);
    }
    .tablet\:border-width-bottom-xl {
      border-bottom-width: var(--zbk-border-width-xl);
    }
    .tablet\:border-width-left-xl {
      border-left-width: var(--zbk-border-width-xl);
    }
    .tablet\:border-width-right-xl {
      border-right-width: var(--zbk-border-width-xl);
    }
  }
  @media (min-width: 50rem) {
    .tablet-lg\:border-width-0 {
      border-width: 0;
    }
    .tablet-lg\:border-width-y-0 {
      border-bottom-width: 0;
      border-top-width: 0;
    }
    .tablet-lg\:border-width-x-0 {
      border-left-width: 0;
      border-right-width: 0;
    }
    .tablet-lg\:border-width-top-0 {
      border-top-width: 0;
    }
    .tablet-lg\:border-width-bottom-0 {
      border-bottom-width: 0;
    }
    .tablet-lg\:border-width-left-0 {
      border-left-width: 0;
    }
    .tablet-lg\:border-width-right-0 {
      border-right-width: 0;
    }
    .tablet-lg\:border-width-2xs {
      border-width: var(--zbk-border-width-2xs);
    }
    .tablet-lg\:border-width-y-2xs {
      border-bottom-width: var(--zbk-border-width-2xs);
      border-top-width: var(--zbk-border-width-2xs);
    }
    .tablet-lg\:border-width-x-2xs {
      border-left-width: var(--zbk-border-width-2xs);
      border-right-width: var(--zbk-border-width-2xs);
    }
    .tablet-lg\:border-width-top-2xs {
      border-top-width: var(--zbk-border-width-2xs);
    }
    .tablet-lg\:border-width-bottom-2xs {
      border-bottom-width: var(--zbk-border-width-2xs);
    }
    .tablet-lg\:border-width-left-2xs {
      border-left-width: var(--zbk-border-width-2xs);
    }
    .tablet-lg\:border-width-right-2xs {
      border-right-width: var(--zbk-border-width-2xs);
    }
    .tablet-lg\:border-width-xs {
      border-width: var(--zbk-border-width-xs);
    }
    .tablet-lg\:border-width-y-xs {
      border-bottom-width: var(--zbk-border-width-xs);
      border-top-width: var(--zbk-border-width-xs);
    }
    .tablet-lg\:border-width-x-xs {
      border-left-width: var(--zbk-border-width-xs);
      border-right-width: var(--zbk-border-width-xs);
    }
    .tablet-lg\:border-width-top-xs {
      border-top-width: var(--zbk-border-width-xs);
    }
    .tablet-lg\:border-width-bottom-xs {
      border-bottom-width: var(--zbk-border-width-xs);
    }
    .tablet-lg\:border-width-left-xs {
      border-left-width: var(--zbk-border-width-xs);
    }
    .tablet-lg\:border-width-right-xs {
      border-right-width: var(--zbk-border-width-xs);
    }
    .tablet-lg\:border-width-sm {
      border-width: var(--zbk-border-width-sm);
    }
    .tablet-lg\:border-width-y-sm {
      border-bottom-width: var(--zbk-border-width-sm);
      border-top-width: var(--zbk-border-width-sm);
    }
    .tablet-lg\:border-width-x-sm {
      border-left-width: var(--zbk-border-width-sm);
      border-right-width: var(--zbk-border-width-sm);
    }
    .tablet-lg\:border-width-top-sm {
      border-top-width: var(--zbk-border-width-sm);
    }
    .tablet-lg\:border-width-bottom-sm {
      border-bottom-width: var(--zbk-border-width-sm);
    }
    .tablet-lg\:border-width-left-sm {
      border-left-width: var(--zbk-border-width-sm);
    }
    .tablet-lg\:border-width-right-sm {
      border-right-width: var(--zbk-border-width-sm);
    }
    .tablet-lg\:border-width-md {
      border-width: var(--zbk-border-width-md);
    }
    .tablet-lg\:border-width-y-md {
      border-bottom-width: var(--zbk-border-width-md);
      border-top-width: var(--zbk-border-width-md);
    }
    .tablet-lg\:border-width-x-md {
      border-left-width: var(--zbk-border-width-md);
      border-right-width: var(--zbk-border-width-md);
    }
    .tablet-lg\:border-width-top-md {
      border-top-width: var(--zbk-border-width-md);
    }
    .tablet-lg\:border-width-bottom-md {
      border-bottom-width: var(--zbk-border-width-md);
    }
    .tablet-lg\:border-width-left-md {
      border-left-width: var(--zbk-border-width-md);
    }
    .tablet-lg\:border-width-right-md {
      border-right-width: var(--zbk-border-width-md);
    }
    .tablet-lg\:border-width-lg {
      border-width: var(--zbk-border-width-lg);
    }
    .tablet-lg\:border-width-y-lg {
      border-bottom-width: var(--zbk-border-width-lg);
      border-top-width: var(--zbk-border-width-lg);
    }
    .tablet-lg\:border-width-x-lg {
      border-left-width: var(--zbk-border-width-lg);
      border-right-width: var(--zbk-border-width-lg);
    }
    .tablet-lg\:border-width-top-lg {
      border-top-width: var(--zbk-border-width-lg);
    }
    .tablet-lg\:border-width-bottom-lg {
      border-bottom-width: var(--zbk-border-width-lg);
    }
    .tablet-lg\:border-width-left-lg {
      border-left-width: var(--zbk-border-width-lg);
    }
    .tablet-lg\:border-width-right-lg {
      border-right-width: var(--zbk-border-width-lg);
    }
    .tablet-lg\:border-width-xl {
      border-width: var(--zbk-border-width-xl);
    }
    .tablet-lg\:border-width-y-xl {
      border-bottom-width: var(--zbk-border-width-xl);
      border-top-width: var(--zbk-border-width-xl);
    }
    .tablet-lg\:border-width-x-xl {
      border-left-width: var(--zbk-border-width-xl);
      border-right-width: var(--zbk-border-width-xl);
    }
    .tablet-lg\:border-width-top-xl {
      border-top-width: var(--zbk-border-width-xl);
    }
    .tablet-lg\:border-width-bottom-xl {
      border-bottom-width: var(--zbk-border-width-xl);
    }
    .tablet-lg\:border-width-left-xl {
      border-left-width: var(--zbk-border-width-xl);
    }
    .tablet-lg\:border-width-right-xl {
      border-right-width: var(--zbk-border-width-xl);
    }
  }
  @media (min-width: 70rem) {
    .desktop\:border-width-0 {
      border-width: 0;
    }
    .desktop\:border-width-y-0 {
      border-bottom-width: 0;
      border-top-width: 0;
    }
    .desktop\:border-width-x-0 {
      border-left-width: 0;
      border-right-width: 0;
    }
    .desktop\:border-width-top-0 {
      border-top-width: 0;
    }
    .desktop\:border-width-bottom-0 {
      border-bottom-width: 0;
    }
    .desktop\:border-width-left-0 {
      border-left-width: 0;
    }
    .desktop\:border-width-right-0 {
      border-right-width: 0;
    }
    .desktop\:border-width-2xs {
      border-width: var(--zbk-border-width-2xs);
    }
    .desktop\:border-width-y-2xs {
      border-bottom-width: var(--zbk-border-width-2xs);
      border-top-width: var(--zbk-border-width-2xs);
    }
    .desktop\:border-width-x-2xs {
      border-left-width: var(--zbk-border-width-2xs);
      border-right-width: var(--zbk-border-width-2xs);
    }
    .desktop\:border-width-top-2xs {
      border-top-width: var(--zbk-border-width-2xs);
    }
    .desktop\:border-width-bottom-2xs {
      border-bottom-width: var(--zbk-border-width-2xs);
    }
    .desktop\:border-width-left-2xs {
      border-left-width: var(--zbk-border-width-2xs);
    }
    .desktop\:border-width-right-2xs {
      border-right-width: var(--zbk-border-width-2xs);
    }
    .desktop\:border-width-xs {
      border-width: var(--zbk-border-width-xs);
    }
    .desktop\:border-width-y-xs {
      border-bottom-width: var(--zbk-border-width-xs);
      border-top-width: var(--zbk-border-width-xs);
    }
    .desktop\:border-width-x-xs {
      border-left-width: var(--zbk-border-width-xs);
      border-right-width: var(--zbk-border-width-xs);
    }
    .desktop\:border-width-top-xs {
      border-top-width: var(--zbk-border-width-xs);
    }
    .desktop\:border-width-bottom-xs {
      border-bottom-width: var(--zbk-border-width-xs);
    }
    .desktop\:border-width-left-xs {
      border-left-width: var(--zbk-border-width-xs);
    }
    .desktop\:border-width-right-xs {
      border-right-width: var(--zbk-border-width-xs);
    }
    .desktop\:border-width-sm {
      border-width: var(--zbk-border-width-sm);
    }
    .desktop\:border-width-y-sm {
      border-bottom-width: var(--zbk-border-width-sm);
      border-top-width: var(--zbk-border-width-sm);
    }
    .desktop\:border-width-x-sm {
      border-left-width: var(--zbk-border-width-sm);
      border-right-width: var(--zbk-border-width-sm);
    }
    .desktop\:border-width-top-sm {
      border-top-width: var(--zbk-border-width-sm);
    }
    .desktop\:border-width-bottom-sm {
      border-bottom-width: var(--zbk-border-width-sm);
    }
    .desktop\:border-width-left-sm {
      border-left-width: var(--zbk-border-width-sm);
    }
    .desktop\:border-width-right-sm {
      border-right-width: var(--zbk-border-width-sm);
    }
    .desktop\:border-width-md {
      border-width: var(--zbk-border-width-md);
    }
    .desktop\:border-width-y-md {
      border-bottom-width: var(--zbk-border-width-md);
      border-top-width: var(--zbk-border-width-md);
    }
    .desktop\:border-width-x-md {
      border-left-width: var(--zbk-border-width-md);
      border-right-width: var(--zbk-border-width-md);
    }
    .desktop\:border-width-top-md {
      border-top-width: var(--zbk-border-width-md);
    }
    .desktop\:border-width-bottom-md {
      border-bottom-width: var(--zbk-border-width-md);
    }
    .desktop\:border-width-left-md {
      border-left-width: var(--zbk-border-width-md);
    }
    .desktop\:border-width-right-md {
      border-right-width: var(--zbk-border-width-md);
    }
    .desktop\:border-width-lg {
      border-width: var(--zbk-border-width-lg);
    }
    .desktop\:border-width-y-lg {
      border-bottom-width: var(--zbk-border-width-lg);
      border-top-width: var(--zbk-border-width-lg);
    }
    .desktop\:border-width-x-lg {
      border-left-width: var(--zbk-border-width-lg);
      border-right-width: var(--zbk-border-width-lg);
    }
    .desktop\:border-width-top-lg {
      border-top-width: var(--zbk-border-width-lg);
    }
    .desktop\:border-width-bottom-lg {
      border-bottom-width: var(--zbk-border-width-lg);
    }
    .desktop\:border-width-left-lg {
      border-left-width: var(--zbk-border-width-lg);
    }
    .desktop\:border-width-right-lg {
      border-right-width: var(--zbk-border-width-lg);
    }
    .desktop\:border-width-xl {
      border-width: var(--zbk-border-width-xl);
    }
    .desktop\:border-width-y-xl {
      border-bottom-width: var(--zbk-border-width-xl);
      border-top-width: var(--zbk-border-width-xl);
    }
    .desktop\:border-width-x-xl {
      border-left-width: var(--zbk-border-width-xl);
      border-right-width: var(--zbk-border-width-xl);
    }
    .desktop\:border-width-top-xl {
      border-top-width: var(--zbk-border-width-xl);
    }
    .desktop\:border-width-bottom-xl {
      border-bottom-width: var(--zbk-border-width-xl);
    }
    .desktop\:border-width-left-xl {
      border-left-width: var(--zbk-border-width-xl);
    }
    .desktop\:border-width-right-xl {
      border-right-width: var(--zbk-border-width-xl);
    }
  }
  @media (min-width: 80rem) {
    .desktop-lg\:border-width-0 {
      border-width: 0;
    }
    .desktop-lg\:border-width-y-0 {
      border-bottom-width: 0;
      border-top-width: 0;
    }
    .desktop-lg\:border-width-x-0 {
      border-left-width: 0;
      border-right-width: 0;
    }
    .desktop-lg\:border-width-top-0 {
      border-top-width: 0;
    }
    .desktop-lg\:border-width-bottom-0 {
      border-bottom-width: 0;
    }
    .desktop-lg\:border-width-left-0 {
      border-left-width: 0;
    }
    .desktop-lg\:border-width-right-0 {
      border-right-width: 0;
    }
    .desktop-lg\:border-width-2xs {
      border-width: var(--zbk-border-width-2xs);
    }
    .desktop-lg\:border-width-y-2xs {
      border-bottom-width: var(--zbk-border-width-2xs);
      border-top-width: var(--zbk-border-width-2xs);
    }
    .desktop-lg\:border-width-x-2xs {
      border-left-width: var(--zbk-border-width-2xs);
      border-right-width: var(--zbk-border-width-2xs);
    }
    .desktop-lg\:border-width-top-2xs {
      border-top-width: var(--zbk-border-width-2xs);
    }
    .desktop-lg\:border-width-bottom-2xs {
      border-bottom-width: var(--zbk-border-width-2xs);
    }
    .desktop-lg\:border-width-left-2xs {
      border-left-width: var(--zbk-border-width-2xs);
    }
    .desktop-lg\:border-width-right-2xs {
      border-right-width: var(--zbk-border-width-2xs);
    }
    .desktop-lg\:border-width-xs {
      border-width: var(--zbk-border-width-xs);
    }
    .desktop-lg\:border-width-y-xs {
      border-bottom-width: var(--zbk-border-width-xs);
      border-top-width: var(--zbk-border-width-xs);
    }
    .desktop-lg\:border-width-x-xs {
      border-left-width: var(--zbk-border-width-xs);
      border-right-width: var(--zbk-border-width-xs);
    }
    .desktop-lg\:border-width-top-xs {
      border-top-width: var(--zbk-border-width-xs);
    }
    .desktop-lg\:border-width-bottom-xs {
      border-bottom-width: var(--zbk-border-width-xs);
    }
    .desktop-lg\:border-width-left-xs {
      border-left-width: var(--zbk-border-width-xs);
    }
    .desktop-lg\:border-width-right-xs {
      border-right-width: var(--zbk-border-width-xs);
    }
    .desktop-lg\:border-width-sm {
      border-width: var(--zbk-border-width-sm);
    }
    .desktop-lg\:border-width-y-sm {
      border-bottom-width: var(--zbk-border-width-sm);
      border-top-width: var(--zbk-border-width-sm);
    }
    .desktop-lg\:border-width-x-sm {
      border-left-width: var(--zbk-border-width-sm);
      border-right-width: var(--zbk-border-width-sm);
    }
    .desktop-lg\:border-width-top-sm {
      border-top-width: var(--zbk-border-width-sm);
    }
    .desktop-lg\:border-width-bottom-sm {
      border-bottom-width: var(--zbk-border-width-sm);
    }
    .desktop-lg\:border-width-left-sm {
      border-left-width: var(--zbk-border-width-sm);
    }
    .desktop-lg\:border-width-right-sm {
      border-right-width: var(--zbk-border-width-sm);
    }
    .desktop-lg\:border-width-md {
      border-width: var(--zbk-border-width-md);
    }
    .desktop-lg\:border-width-y-md {
      border-bottom-width: var(--zbk-border-width-md);
      border-top-width: var(--zbk-border-width-md);
    }
    .desktop-lg\:border-width-x-md {
      border-left-width: var(--zbk-border-width-md);
      border-right-width: var(--zbk-border-width-md);
    }
    .desktop-lg\:border-width-top-md {
      border-top-width: var(--zbk-border-width-md);
    }
    .desktop-lg\:border-width-bottom-md {
      border-bottom-width: var(--zbk-border-width-md);
    }
    .desktop-lg\:border-width-left-md {
      border-left-width: var(--zbk-border-width-md);
    }
    .desktop-lg\:border-width-right-md {
      border-right-width: var(--zbk-border-width-md);
    }
    .desktop-lg\:border-width-lg {
      border-width: var(--zbk-border-width-lg);
    }
    .desktop-lg\:border-width-y-lg {
      border-bottom-width: var(--zbk-border-width-lg);
      border-top-width: var(--zbk-border-width-lg);
    }
    .desktop-lg\:border-width-x-lg {
      border-left-width: var(--zbk-border-width-lg);
      border-right-width: var(--zbk-border-width-lg);
    }
    .desktop-lg\:border-width-top-lg {
      border-top-width: var(--zbk-border-width-lg);
    }
    .desktop-lg\:border-width-bottom-lg {
      border-bottom-width: var(--zbk-border-width-lg);
    }
    .desktop-lg\:border-width-left-lg {
      border-left-width: var(--zbk-border-width-lg);
    }
    .desktop-lg\:border-width-right-lg {
      border-right-width: var(--zbk-border-width-lg);
    }
    .desktop-lg\:border-width-xl {
      border-width: var(--zbk-border-width-xl);
    }
    .desktop-lg\:border-width-y-xl {
      border-bottom-width: var(--zbk-border-width-xl);
      border-top-width: var(--zbk-border-width-xl);
    }
    .desktop-lg\:border-width-x-xl {
      border-left-width: var(--zbk-border-width-xl);
      border-right-width: var(--zbk-border-width-xl);
    }
    .desktop-lg\:border-width-top-xl {
      border-top-width: var(--zbk-border-width-xl);
    }
    .desktop-lg\:border-width-bottom-xl {
      border-bottom-width: var(--zbk-border-width-xl);
    }
    .desktop-lg\:border-width-left-xl {
      border-left-width: var(--zbk-border-width-xl);
    }
    .desktop-lg\:border-width-right-xl {
      border-right-width: var(--zbk-border-width-xl);
    }
  }
  @media (min-width: 100rem) {
    .widescreen\:border-width-0 {
      border-width: 0;
    }
    .widescreen\:border-width-y-0 {
      border-bottom-width: 0;
      border-top-width: 0;
    }
    .widescreen\:border-width-x-0 {
      border-left-width: 0;
      border-right-width: 0;
    }
    .widescreen\:border-width-top-0 {
      border-top-width: 0;
    }
    .widescreen\:border-width-bottom-0 {
      border-bottom-width: 0;
    }
    .widescreen\:border-width-left-0 {
      border-left-width: 0;
    }
    .widescreen\:border-width-right-0 {
      border-right-width: 0;
    }
    .widescreen\:border-width-2xs {
      border-width: var(--zbk-border-width-2xs);
    }
    .widescreen\:border-width-y-2xs {
      border-bottom-width: var(--zbk-border-width-2xs);
      border-top-width: var(--zbk-border-width-2xs);
    }
    .widescreen\:border-width-x-2xs {
      border-left-width: var(--zbk-border-width-2xs);
      border-right-width: var(--zbk-border-width-2xs);
    }
    .widescreen\:border-width-top-2xs {
      border-top-width: var(--zbk-border-width-2xs);
    }
    .widescreen\:border-width-bottom-2xs {
      border-bottom-width: var(--zbk-border-width-2xs);
    }
    .widescreen\:border-width-left-2xs {
      border-left-width: var(--zbk-border-width-2xs);
    }
    .widescreen\:border-width-right-2xs {
      border-right-width: var(--zbk-border-width-2xs);
    }
    .widescreen\:border-width-xs {
      border-width: var(--zbk-border-width-xs);
    }
    .widescreen\:border-width-y-xs {
      border-bottom-width: var(--zbk-border-width-xs);
      border-top-width: var(--zbk-border-width-xs);
    }
    .widescreen\:border-width-x-xs {
      border-left-width: var(--zbk-border-width-xs);
      border-right-width: var(--zbk-border-width-xs);
    }
    .widescreen\:border-width-top-xs {
      border-top-width: var(--zbk-border-width-xs);
    }
    .widescreen\:border-width-bottom-xs {
      border-bottom-width: var(--zbk-border-width-xs);
    }
    .widescreen\:border-width-left-xs {
      border-left-width: var(--zbk-border-width-xs);
    }
    .widescreen\:border-width-right-xs {
      border-right-width: var(--zbk-border-width-xs);
    }
    .widescreen\:border-width-sm {
      border-width: var(--zbk-border-width-sm);
    }
    .widescreen\:border-width-y-sm {
      border-bottom-width: var(--zbk-border-width-sm);
      border-top-width: var(--zbk-border-width-sm);
    }
    .widescreen\:border-width-x-sm {
      border-left-width: var(--zbk-border-width-sm);
      border-right-width: var(--zbk-border-width-sm);
    }
    .widescreen\:border-width-top-sm {
      border-top-width: var(--zbk-border-width-sm);
    }
    .widescreen\:border-width-bottom-sm {
      border-bottom-width: var(--zbk-border-width-sm);
    }
    .widescreen\:border-width-left-sm {
      border-left-width: var(--zbk-border-width-sm);
    }
    .widescreen\:border-width-right-sm {
      border-right-width: var(--zbk-border-width-sm);
    }
    .widescreen\:border-width-md {
      border-width: var(--zbk-border-width-md);
    }
    .widescreen\:border-width-y-md {
      border-bottom-width: var(--zbk-border-width-md);
      border-top-width: var(--zbk-border-width-md);
    }
    .widescreen\:border-width-x-md {
      border-left-width: var(--zbk-border-width-md);
      border-right-width: var(--zbk-border-width-md);
    }
    .widescreen\:border-width-top-md {
      border-top-width: var(--zbk-border-width-md);
    }
    .widescreen\:border-width-bottom-md {
      border-bottom-width: var(--zbk-border-width-md);
    }
    .widescreen\:border-width-left-md {
      border-left-width: var(--zbk-border-width-md);
    }
    .widescreen\:border-width-right-md {
      border-right-width: var(--zbk-border-width-md);
    }
    .widescreen\:border-width-lg {
      border-width: var(--zbk-border-width-lg);
    }
    .widescreen\:border-width-y-lg {
      border-bottom-width: var(--zbk-border-width-lg);
      border-top-width: var(--zbk-border-width-lg);
    }
    .widescreen\:border-width-x-lg {
      border-left-width: var(--zbk-border-width-lg);
      border-right-width: var(--zbk-border-width-lg);
    }
    .widescreen\:border-width-top-lg {
      border-top-width: var(--zbk-border-width-lg);
    }
    .widescreen\:border-width-bottom-lg {
      border-bottom-width: var(--zbk-border-width-lg);
    }
    .widescreen\:border-width-left-lg {
      border-left-width: var(--zbk-border-width-lg);
    }
    .widescreen\:border-width-right-lg {
      border-right-width: var(--zbk-border-width-lg);
    }
    .widescreen\:border-width-xl {
      border-width: var(--zbk-border-width-xl);
    }
    .widescreen\:border-width-y-xl {
      border-bottom-width: var(--zbk-border-width-xl);
      border-top-width: var(--zbk-border-width-xl);
    }
    .widescreen\:border-width-x-xl {
      border-left-width: var(--zbk-border-width-xl);
      border-right-width: var(--zbk-border-width-xl);
    }
    .widescreen\:border-width-top-xl {
      border-top-width: var(--zbk-border-width-xl);
    }
    .widescreen\:border-width-bottom-xl {
      border-bottom-width: var(--zbk-border-width-xl);
    }
    .widescreen\:border-width-left-xl {
      border-left-width: var(--zbk-border-width-xl);
    }
    .widescreen\:border-width-right-xl {
      border-right-width: var(--zbk-border-width-xl);
    }
  }
  .radius-0 {
    border-radius: 0;
  }
  .radius-top-0 {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .radius-bottom-0 {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .radius-left-0 {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
  .radius-right-0 {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
  .radius-top-left-0 {
    border-top-left-radius: 0;
  }
  .radius-top-right-0 {
    border-top-right-radius: 0;
  }
  .radius-bottom-left-0 {
    border-bottom-left-radius: 0;
  }
  .radius-bottom-right-0 {
    border-bottom-right-radius: 0;
  }
  .radius-2xs {
    border-radius: var(--zbk-border-radius-2xs);
  }
  .radius-top-2xs {
    border-top-left-radius: var(--zbk-border-radius-2xs);
    border-top-right-radius: var(--zbk-border-radius-2xs);
  }
  .radius-bottom-2xs {
    border-bottom-right-radius: var(--zbk-border-radius-2xs);
  }
  .radius-bottom-2xs,
  .radius-left-2xs {
    border-bottom-left-radius: var(--zbk-border-radius-2xs);
  }
  .radius-left-2xs {
    border-top-left-radius: var(--zbk-border-radius-2xs);
  }
  .radius-right-2xs {
    border-bottom-right-radius: var(--zbk-border-radius-2xs);
    border-top-right-radius: var(--zbk-border-radius-2xs);
  }
  .radius-top-left-2xs {
    border-top-left-radius: var(--zbk-border-radius-2xs);
  }
  .radius-top-right-2xs {
    border-top-right-radius: var(--zbk-border-radius-2xs);
  }
  .radius-bottom-left-2xs {
    border-bottom-left-radius: var(--zbk-border-radius-2xs);
  }
  .radius-bottom-right-2xs {
    border-bottom-right-radius: var(--zbk-border-radius-2xs);
  }
  .radius-xs {
    border-radius: var(--zbk-border-radius-xs);
  }
  .radius-top-xs {
    border-top-left-radius: var(--zbk-border-radius-xs);
    border-top-right-radius: var(--zbk-border-radius-xs);
  }
  .radius-bottom-xs {
    border-bottom-right-radius: var(--zbk-border-radius-xs);
  }
  .radius-bottom-xs,
  .radius-left-xs {
    border-bottom-left-radius: var(--zbk-border-radius-xs);
  }
  .radius-left-xs {
    border-top-left-radius: var(--zbk-border-radius-xs);
  }
  .radius-right-xs {
    border-bottom-right-radius: var(--zbk-border-radius-xs);
    border-top-right-radius: var(--zbk-border-radius-xs);
  }
  .radius-top-left-xs {
    border-top-left-radius: var(--zbk-border-radius-xs);
  }
  .radius-top-right-xs {
    border-top-right-radius: var(--zbk-border-radius-xs);
  }
  .radius-bottom-left-xs {
    border-bottom-left-radius: var(--zbk-border-radius-xs);
  }
  .radius-bottom-right-xs {
    border-bottom-right-radius: var(--zbk-border-radius-xs);
  }
  .radius-sm {
    border-radius: var(--zbk-border-radius-sm);
  }
  .radius-top-sm {
    border-top-left-radius: var(--zbk-border-radius-sm);
    border-top-right-radius: var(--zbk-border-radius-sm);
  }
  .radius-bottom-sm {
    border-bottom-right-radius: var(--zbk-border-radius-sm);
  }
  .radius-bottom-sm,
  .radius-left-sm {
    border-bottom-left-radius: var(--zbk-border-radius-sm);
  }
  .radius-left-sm {
    border-top-left-radius: var(--zbk-border-radius-sm);
  }
  .radius-right-sm {
    border-bottom-right-radius: var(--zbk-border-radius-sm);
    border-top-right-radius: var(--zbk-border-radius-sm);
  }
  .radius-top-left-sm {
    border-top-left-radius: var(--zbk-border-radius-sm);
  }
  .radius-top-right-sm {
    border-top-right-radius: var(--zbk-border-radius-sm);
  }
  .radius-bottom-left-sm {
    border-bottom-left-radius: var(--zbk-border-radius-sm);
  }
  .radius-bottom-right-sm {
    border-bottom-right-radius: var(--zbk-border-radius-sm);
  }
  .radius-md {
    border-radius: var(--zbk-border-radius-md);
  }
  .radius-top-md {
    border-top-left-radius: var(--zbk-border-radius-md);
    border-top-right-radius: var(--zbk-border-radius-md);
  }
  .radius-bottom-md {
    border-bottom-right-radius: var(--zbk-border-radius-md);
  }
  .radius-bottom-md,
  .radius-left-md {
    border-bottom-left-radius: var(--zbk-border-radius-md);
  }
  .radius-left-md {
    border-top-left-radius: var(--zbk-border-radius-md);
  }
  .radius-right-md {
    border-bottom-right-radius: var(--zbk-border-radius-md);
    border-top-right-radius: var(--zbk-border-radius-md);
  }
  .radius-top-left-md {
    border-top-left-radius: var(--zbk-border-radius-md);
  }
  .radius-top-right-md {
    border-top-right-radius: var(--zbk-border-radius-md);
  }
  .radius-bottom-left-md {
    border-bottom-left-radius: var(--zbk-border-radius-md);
  }
  .radius-bottom-right-md {
    border-bottom-right-radius: var(--zbk-border-radius-md);
  }
  .radius-lg {
    border-radius: var(--zbk-border-radius-lg);
  }
  .radius-top-lg {
    border-top-left-radius: var(--zbk-border-radius-lg);
    border-top-right-radius: var(--zbk-border-radius-lg);
  }
  .radius-bottom-lg {
    border-bottom-right-radius: var(--zbk-border-radius-lg);
  }
  .radius-bottom-lg,
  .radius-left-lg {
    border-bottom-left-radius: var(--zbk-border-radius-lg);
  }
  .radius-left-lg {
    border-top-left-radius: var(--zbk-border-radius-lg);
  }
  .radius-right-lg {
    border-bottom-right-radius: var(--zbk-border-radius-lg);
    border-top-right-radius: var(--zbk-border-radius-lg);
  }
  .radius-top-left-lg {
    border-top-left-radius: var(--zbk-border-radius-lg);
  }
  .radius-top-right-lg {
    border-top-right-radius: var(--zbk-border-radius-lg);
  }
  .radius-bottom-left-lg {
    border-bottom-left-radius: var(--zbk-border-radius-lg);
  }
  .radius-bottom-right-lg {
    border-bottom-right-radius: var(--zbk-border-radius-lg);
  }
  .radius-xl {
    border-radius: var(--zbk-border-radius-xl);
  }
  .radius-top-xl {
    border-top-left-radius: var(--zbk-border-radius-xl);
    border-top-right-radius: var(--zbk-border-radius-xl);
  }
  .radius-bottom-xl {
    border-bottom-right-radius: var(--zbk-border-radius-xl);
  }
  .radius-bottom-xl,
  .radius-left-xl {
    border-bottom-left-radius: var(--zbk-border-radius-xl);
  }
  .radius-left-xl {
    border-top-left-radius: var(--zbk-border-radius-xl);
  }
  .radius-right-xl {
    border-bottom-right-radius: var(--zbk-border-radius-xl);
    border-top-right-radius: var(--zbk-border-radius-xl);
  }
  .radius-top-left-xl {
    border-top-left-radius: var(--zbk-border-radius-xl);
  }
  .radius-top-right-xl {
    border-top-right-radius: var(--zbk-border-radius-xl);
  }
  .radius-bottom-left-xl {
    border-bottom-left-radius: var(--zbk-border-radius-xl);
  }
  .radius-bottom-right-xl {
    border-bottom-right-radius: var(--zbk-border-radius-xl);
  }
  @media (min-width: 40rem) {
    .tablet\:radius-0 {
      border-radius: 0;
    }
    .tablet\:radius-top-0 {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    .tablet\:radius-bottom-0 {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    .tablet\:radius-left-0 {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }
    .tablet\:radius-right-0 {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
    .tablet\:radius-top-left-0 {
      border-top-left-radius: 0;
    }
    .tablet\:radius-top-right-0 {
      border-top-right-radius: 0;
    }
    .tablet\:radius-bottom-left-0 {
      border-bottom-left-radius: 0;
    }
    .tablet\:radius-bottom-right-0 {
      border-bottom-right-radius: 0;
    }
    .tablet\:radius-2xs {
      border-radius: var(--zbk-border-radius-2xs);
    }
    .tablet\:radius-top-2xs {
      border-top-left-radius: var(--zbk-border-radius-2xs);
      border-top-right-radius: var(--zbk-border-radius-2xs);
    }
    .tablet\:radius-bottom-2xs {
      border-bottom-right-radius: var(--zbk-border-radius-2xs);
    }
    .tablet\:radius-bottom-2xs,
    .tablet\:radius-left-2xs {
      border-bottom-left-radius: var(--zbk-border-radius-2xs);
    }
    .tablet\:radius-left-2xs {
      border-top-left-radius: var(--zbk-border-radius-2xs);
    }
    .tablet\:radius-right-2xs {
      border-bottom-right-radius: var(--zbk-border-radius-2xs);
      border-top-right-radius: var(--zbk-border-radius-2xs);
    }
    .tablet\:radius-top-left-2xs {
      border-top-left-radius: var(--zbk-border-radius-2xs);
    }
    .tablet\:radius-top-right-2xs {
      border-top-right-radius: var(--zbk-border-radius-2xs);
    }
    .tablet\:radius-bottom-left-2xs {
      border-bottom-left-radius: var(--zbk-border-radius-2xs);
    }
    .tablet\:radius-bottom-right-2xs {
      border-bottom-right-radius: var(--zbk-border-radius-2xs);
    }
    .tablet\:radius-xs {
      border-radius: var(--zbk-border-radius-xs);
    }
    .tablet\:radius-top-xs {
      border-top-left-radius: var(--zbk-border-radius-xs);
      border-top-right-radius: var(--zbk-border-radius-xs);
    }
    .tablet\:radius-bottom-xs {
      border-bottom-right-radius: var(--zbk-border-radius-xs);
    }
    .tablet\:radius-bottom-xs,
    .tablet\:radius-left-xs {
      border-bottom-left-radius: var(--zbk-border-radius-xs);
    }
    .tablet\:radius-left-xs {
      border-top-left-radius: var(--zbk-border-radius-xs);
    }
    .tablet\:radius-right-xs {
      border-bottom-right-radius: var(--zbk-border-radius-xs);
      border-top-right-radius: var(--zbk-border-radius-xs);
    }
    .tablet\:radius-top-left-xs {
      border-top-left-radius: var(--zbk-border-radius-xs);
    }
    .tablet\:radius-top-right-xs {
      border-top-right-radius: var(--zbk-border-radius-xs);
    }
    .tablet\:radius-bottom-left-xs {
      border-bottom-left-radius: var(--zbk-border-radius-xs);
    }
    .tablet\:radius-bottom-right-xs {
      border-bottom-right-radius: var(--zbk-border-radius-xs);
    }
    .tablet\:radius-sm {
      border-radius: var(--zbk-border-radius-sm);
    }
    .tablet\:radius-top-sm {
      border-top-left-radius: var(--zbk-border-radius-sm);
      border-top-right-radius: var(--zbk-border-radius-sm);
    }
    .tablet\:radius-bottom-sm {
      border-bottom-right-radius: var(--zbk-border-radius-sm);
    }
    .tablet\:radius-bottom-sm,
    .tablet\:radius-left-sm {
      border-bottom-left-radius: var(--zbk-border-radius-sm);
    }
    .tablet\:radius-left-sm {
      border-top-left-radius: var(--zbk-border-radius-sm);
    }
    .tablet\:radius-right-sm {
      border-bottom-right-radius: var(--zbk-border-radius-sm);
      border-top-right-radius: var(--zbk-border-radius-sm);
    }
    .tablet\:radius-top-left-sm {
      border-top-left-radius: var(--zbk-border-radius-sm);
    }
    .tablet\:radius-top-right-sm {
      border-top-right-radius: var(--zbk-border-radius-sm);
    }
    .tablet\:radius-bottom-left-sm {
      border-bottom-left-radius: var(--zbk-border-radius-sm);
    }
    .tablet\:radius-bottom-right-sm {
      border-bottom-right-radius: var(--zbk-border-radius-sm);
    }
    .tablet\:radius-md {
      border-radius: var(--zbk-border-radius-md);
    }
    .tablet\:radius-top-md {
      border-top-left-radius: var(--zbk-border-radius-md);
      border-top-right-radius: var(--zbk-border-radius-md);
    }
    .tablet\:radius-bottom-md {
      border-bottom-right-radius: var(--zbk-border-radius-md);
    }
    .tablet\:radius-bottom-md,
    .tablet\:radius-left-md {
      border-bottom-left-radius: var(--zbk-border-radius-md);
    }
    .tablet\:radius-left-md {
      border-top-left-radius: var(--zbk-border-radius-md);
    }
    .tablet\:radius-right-md {
      border-bottom-right-radius: var(--zbk-border-radius-md);
      border-top-right-radius: var(--zbk-border-radius-md);
    }
    .tablet\:radius-top-left-md {
      border-top-left-radius: var(--zbk-border-radius-md);
    }
    .tablet\:radius-top-right-md {
      border-top-right-radius: var(--zbk-border-radius-md);
    }
    .tablet\:radius-bottom-left-md {
      border-bottom-left-radius: var(--zbk-border-radius-md);
    }
    .tablet\:radius-bottom-right-md {
      border-bottom-right-radius: var(--zbk-border-radius-md);
    }
    .tablet\:radius-lg {
      border-radius: var(--zbk-border-radius-lg);
    }
    .tablet\:radius-top-lg {
      border-top-left-radius: var(--zbk-border-radius-lg);
      border-top-right-radius: var(--zbk-border-radius-lg);
    }
    .tablet\:radius-bottom-lg {
      border-bottom-right-radius: var(--zbk-border-radius-lg);
    }
    .tablet\:radius-bottom-lg,
    .tablet\:radius-left-lg {
      border-bottom-left-radius: var(--zbk-border-radius-lg);
    }
    .tablet\:radius-left-lg {
      border-top-left-radius: var(--zbk-border-radius-lg);
    }
    .tablet\:radius-right-lg {
      border-bottom-right-radius: var(--zbk-border-radius-lg);
      border-top-right-radius: var(--zbk-border-radius-lg);
    }
    .tablet\:radius-top-left-lg {
      border-top-left-radius: var(--zbk-border-radius-lg);
    }
    .tablet\:radius-top-right-lg {
      border-top-right-radius: var(--zbk-border-radius-lg);
    }
    .tablet\:radius-bottom-left-lg {
      border-bottom-left-radius: var(--zbk-border-radius-lg);
    }
    .tablet\:radius-bottom-right-lg {
      border-bottom-right-radius: var(--zbk-border-radius-lg);
    }
    .tablet\:radius-xl {
      border-radius: var(--zbk-border-radius-xl);
    }
    .tablet\:radius-top-xl {
      border-top-left-radius: var(--zbk-border-radius-xl);
      border-top-right-radius: var(--zbk-border-radius-xl);
    }
    .tablet\:radius-bottom-xl {
      border-bottom-right-radius: var(--zbk-border-radius-xl);
    }
    .tablet\:radius-bottom-xl,
    .tablet\:radius-left-xl {
      border-bottom-left-radius: var(--zbk-border-radius-xl);
    }
    .tablet\:radius-left-xl {
      border-top-left-radius: var(--zbk-border-radius-xl);
    }
    .tablet\:radius-right-xl {
      border-bottom-right-radius: var(--zbk-border-radius-xl);
      border-top-right-radius: var(--zbk-border-radius-xl);
    }
    .tablet\:radius-top-left-xl {
      border-top-left-radius: var(--zbk-border-radius-xl);
    }
    .tablet\:radius-top-right-xl {
      border-top-right-radius: var(--zbk-border-radius-xl);
    }
    .tablet\:radius-bottom-left-xl {
      border-bottom-left-radius: var(--zbk-border-radius-xl);
    }
    .tablet\:radius-bottom-right-xl {
      border-bottom-right-radius: var(--zbk-border-radius-xl);
    }
  }
  @media (min-width: 50rem) {
    .tablet-lg\:radius-0 {
      border-radius: 0;
    }
    .tablet-lg\:radius-top-0 {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    .tablet-lg\:radius-bottom-0 {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    .tablet-lg\:radius-left-0 {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }
    .tablet-lg\:radius-right-0 {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
    .tablet-lg\:radius-top-left-0 {
      border-top-left-radius: 0;
    }
    .tablet-lg\:radius-top-right-0 {
      border-top-right-radius: 0;
    }
    .tablet-lg\:radius-bottom-left-0 {
      border-bottom-left-radius: 0;
    }
    .tablet-lg\:radius-bottom-right-0 {
      border-bottom-right-radius: 0;
    }
    .tablet-lg\:radius-2xs {
      border-radius: var(--zbk-border-radius-2xs);
    }
    .tablet-lg\:radius-top-2xs {
      border-top-left-radius: var(--zbk-border-radius-2xs);
      border-top-right-radius: var(--zbk-border-radius-2xs);
    }
    .tablet-lg\:radius-bottom-2xs {
      border-bottom-left-radius: var(--zbk-border-radius-2xs);
      border-bottom-right-radius: var(--zbk-border-radius-2xs);
    }
    .tablet-lg\:radius-left-2xs {
      border-bottom-left-radius: var(--zbk-border-radius-2xs);
      border-top-left-radius: var(--zbk-border-radius-2xs);
    }
    .tablet-lg\:radius-right-2xs {
      border-bottom-right-radius: var(--zbk-border-radius-2xs);
      border-top-right-radius: var(--zbk-border-radius-2xs);
    }
    .tablet-lg\:radius-top-left-2xs {
      border-top-left-radius: var(--zbk-border-radius-2xs);
    }
    .tablet-lg\:radius-top-right-2xs {
      border-top-right-radius: var(--zbk-border-radius-2xs);
    }
    .tablet-lg\:radius-bottom-left-2xs {
      border-bottom-left-radius: var(--zbk-border-radius-2xs);
    }
    .tablet-lg\:radius-bottom-right-2xs {
      border-bottom-right-radius: var(--zbk-border-radius-2xs);
    }
    .tablet-lg\:radius-xs {
      border-radius: var(--zbk-border-radius-xs);
    }
    .tablet-lg\:radius-top-xs {
      border-top-left-radius: var(--zbk-border-radius-xs);
      border-top-right-radius: var(--zbk-border-radius-xs);
    }
    .tablet-lg\:radius-bottom-xs {
      border-bottom-left-radius: var(--zbk-border-radius-xs);
      border-bottom-right-radius: var(--zbk-border-radius-xs);
    }
    .tablet-lg\:radius-left-xs {
      border-bottom-left-radius: var(--zbk-border-radius-xs);
      border-top-left-radius: var(--zbk-border-radius-xs);
    }
    .tablet-lg\:radius-right-xs {
      border-bottom-right-radius: var(--zbk-border-radius-xs);
      border-top-right-radius: var(--zbk-border-radius-xs);
    }
    .tablet-lg\:radius-top-left-xs {
      border-top-left-radius: var(--zbk-border-radius-xs);
    }
    .tablet-lg\:radius-top-right-xs {
      border-top-right-radius: var(--zbk-border-radius-xs);
    }
    .tablet-lg\:radius-bottom-left-xs {
      border-bottom-left-radius: var(--zbk-border-radius-xs);
    }
    .tablet-lg\:radius-bottom-right-xs {
      border-bottom-right-radius: var(--zbk-border-radius-xs);
    }
    .tablet-lg\:radius-sm {
      border-radius: var(--zbk-border-radius-sm);
    }
    .tablet-lg\:radius-top-sm {
      border-top-left-radius: var(--zbk-border-radius-sm);
      border-top-right-radius: var(--zbk-border-radius-sm);
    }
    .tablet-lg\:radius-bottom-sm {
      border-bottom-left-radius: var(--zbk-border-radius-sm);
      border-bottom-right-radius: var(--zbk-border-radius-sm);
    }
    .tablet-lg\:radius-left-sm {
      border-bottom-left-radius: var(--zbk-border-radius-sm);
      border-top-left-radius: var(--zbk-border-radius-sm);
    }
    .tablet-lg\:radius-right-sm {
      border-bottom-right-radius: var(--zbk-border-radius-sm);
      border-top-right-radius: var(--zbk-border-radius-sm);
    }
    .tablet-lg\:radius-top-left-sm {
      border-top-left-radius: var(--zbk-border-radius-sm);
    }
    .tablet-lg\:radius-top-right-sm {
      border-top-right-radius: var(--zbk-border-radius-sm);
    }
    .tablet-lg\:radius-bottom-left-sm {
      border-bottom-left-radius: var(--zbk-border-radius-sm);
    }
    .tablet-lg\:radius-bottom-right-sm {
      border-bottom-right-radius: var(--zbk-border-radius-sm);
    }
    .tablet-lg\:radius-md {
      border-radius: var(--zbk-border-radius-md);
    }
    .tablet-lg\:radius-top-md {
      border-top-left-radius: var(--zbk-border-radius-md);
      border-top-right-radius: var(--zbk-border-radius-md);
    }
    .tablet-lg\:radius-bottom-md {
      border-bottom-left-radius: var(--zbk-border-radius-md);
      border-bottom-right-radius: var(--zbk-border-radius-md);
    }
    .tablet-lg\:radius-left-md {
      border-bottom-left-radius: var(--zbk-border-radius-md);
      border-top-left-radius: var(--zbk-border-radius-md);
    }
    .tablet-lg\:radius-right-md {
      border-bottom-right-radius: var(--zbk-border-radius-md);
      border-top-right-radius: var(--zbk-border-radius-md);
    }
    .tablet-lg\:radius-top-left-md {
      border-top-left-radius: var(--zbk-border-radius-md);
    }
    .tablet-lg\:radius-top-right-md {
      border-top-right-radius: var(--zbk-border-radius-md);
    }
    .tablet-lg\:radius-bottom-left-md {
      border-bottom-left-radius: var(--zbk-border-radius-md);
    }
    .tablet-lg\:radius-bottom-right-md {
      border-bottom-right-radius: var(--zbk-border-radius-md);
    }
    .tablet-lg\:radius-lg {
      border-radius: var(--zbk-border-radius-lg);
    }
    .tablet-lg\:radius-top-lg {
      border-top-left-radius: var(--zbk-border-radius-lg);
      border-top-right-radius: var(--zbk-border-radius-lg);
    }
    .tablet-lg\:radius-bottom-lg {
      border-bottom-left-radius: var(--zbk-border-radius-lg);
      border-bottom-right-radius: var(--zbk-border-radius-lg);
    }
    .tablet-lg\:radius-left-lg {
      border-bottom-left-radius: var(--zbk-border-radius-lg);
      border-top-left-radius: var(--zbk-border-radius-lg);
    }
    .tablet-lg\:radius-right-lg {
      border-bottom-right-radius: var(--zbk-border-radius-lg);
      border-top-right-radius: var(--zbk-border-radius-lg);
    }
    .tablet-lg\:radius-top-left-lg {
      border-top-left-radius: var(--zbk-border-radius-lg);
    }
    .tablet-lg\:radius-top-right-lg {
      border-top-right-radius: var(--zbk-border-radius-lg);
    }
    .tablet-lg\:radius-bottom-left-lg {
      border-bottom-left-radius: var(--zbk-border-radius-lg);
    }
    .tablet-lg\:radius-bottom-right-lg {
      border-bottom-right-radius: var(--zbk-border-radius-lg);
    }
    .tablet-lg\:radius-xl {
      border-radius: var(--zbk-border-radius-xl);
    }
    .tablet-lg\:radius-top-xl {
      border-top-left-radius: var(--zbk-border-radius-xl);
      border-top-right-radius: var(--zbk-border-radius-xl);
    }
    .tablet-lg\:radius-bottom-xl {
      border-bottom-left-radius: var(--zbk-border-radius-xl);
      border-bottom-right-radius: var(--zbk-border-radius-xl);
    }
    .tablet-lg\:radius-left-xl {
      border-bottom-left-radius: var(--zbk-border-radius-xl);
      border-top-left-radius: var(--zbk-border-radius-xl);
    }
    .tablet-lg\:radius-right-xl {
      border-bottom-right-radius: var(--zbk-border-radius-xl);
      border-top-right-radius: var(--zbk-border-radius-xl);
    }
    .tablet-lg\:radius-top-left-xl {
      border-top-left-radius: var(--zbk-border-radius-xl);
    }
    .tablet-lg\:radius-top-right-xl {
      border-top-right-radius: var(--zbk-border-radius-xl);
    }
    .tablet-lg\:radius-bottom-left-xl {
      border-bottom-left-radius: var(--zbk-border-radius-xl);
    }
    .tablet-lg\:radius-bottom-right-xl {
      border-bottom-right-radius: var(--zbk-border-radius-xl);
    }
  }
  @media (min-width: 70rem) {
    .desktop\:radius-0 {
      border-radius: 0;
    }
    .desktop\:radius-top-0 {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    .desktop\:radius-bottom-0 {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    .desktop\:radius-left-0 {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }
    .desktop\:radius-right-0 {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
    .desktop\:radius-top-left-0 {
      border-top-left-radius: 0;
    }
    .desktop\:radius-top-right-0 {
      border-top-right-radius: 0;
    }
    .desktop\:radius-bottom-left-0 {
      border-bottom-left-radius: 0;
    }
    .desktop\:radius-bottom-right-0 {
      border-bottom-right-radius: 0;
    }
    .desktop\:radius-2xs {
      border-radius: var(--zbk-border-radius-2xs);
    }
    .desktop\:radius-top-2xs {
      border-top-left-radius: var(--zbk-border-radius-2xs);
      border-top-right-radius: var(--zbk-border-radius-2xs);
    }
    .desktop\:radius-bottom-2xs {
      border-bottom-right-radius: var(--zbk-border-radius-2xs);
    }
    .desktop\:radius-bottom-2xs,
    .desktop\:radius-left-2xs {
      border-bottom-left-radius: var(--zbk-border-radius-2xs);
    }
    .desktop\:radius-left-2xs {
      border-top-left-radius: var(--zbk-border-radius-2xs);
    }
    .desktop\:radius-right-2xs {
      border-bottom-right-radius: var(--zbk-border-radius-2xs);
      border-top-right-radius: var(--zbk-border-radius-2xs);
    }
    .desktop\:radius-top-left-2xs {
      border-top-left-radius: var(--zbk-border-radius-2xs);
    }
    .desktop\:radius-top-right-2xs {
      border-top-right-radius: var(--zbk-border-radius-2xs);
    }
    .desktop\:radius-bottom-left-2xs {
      border-bottom-left-radius: var(--zbk-border-radius-2xs);
    }
    .desktop\:radius-bottom-right-2xs {
      border-bottom-right-radius: var(--zbk-border-radius-2xs);
    }
    .desktop\:radius-xs {
      border-radius: var(--zbk-border-radius-xs);
    }
    .desktop\:radius-top-xs {
      border-top-left-radius: var(--zbk-border-radius-xs);
      border-top-right-radius: var(--zbk-border-radius-xs);
    }
    .desktop\:radius-bottom-xs {
      border-bottom-right-radius: var(--zbk-border-radius-xs);
    }
    .desktop\:radius-bottom-xs,
    .desktop\:radius-left-xs {
      border-bottom-left-radius: var(--zbk-border-radius-xs);
    }
    .desktop\:radius-left-xs {
      border-top-left-radius: var(--zbk-border-radius-xs);
    }
    .desktop\:radius-right-xs {
      border-bottom-right-radius: var(--zbk-border-radius-xs);
      border-top-right-radius: var(--zbk-border-radius-xs);
    }
    .desktop\:radius-top-left-xs {
      border-top-left-radius: var(--zbk-border-radius-xs);
    }
    .desktop\:radius-top-right-xs {
      border-top-right-radius: var(--zbk-border-radius-xs);
    }
    .desktop\:radius-bottom-left-xs {
      border-bottom-left-radius: var(--zbk-border-radius-xs);
    }
    .desktop\:radius-bottom-right-xs {
      border-bottom-right-radius: var(--zbk-border-radius-xs);
    }
    .desktop\:radius-sm {
      border-radius: var(--zbk-border-radius-sm);
    }
    .desktop\:radius-top-sm {
      border-top-left-radius: var(--zbk-border-radius-sm);
      border-top-right-radius: var(--zbk-border-radius-sm);
    }
    .desktop\:radius-bottom-sm {
      border-bottom-right-radius: var(--zbk-border-radius-sm);
    }
    .desktop\:radius-bottom-sm,
    .desktop\:radius-left-sm {
      border-bottom-left-radius: var(--zbk-border-radius-sm);
    }
    .desktop\:radius-left-sm {
      border-top-left-radius: var(--zbk-border-radius-sm);
    }
    .desktop\:radius-right-sm {
      border-bottom-right-radius: var(--zbk-border-radius-sm);
      border-top-right-radius: var(--zbk-border-radius-sm);
    }
    .desktop\:radius-top-left-sm {
      border-top-left-radius: var(--zbk-border-radius-sm);
    }
    .desktop\:radius-top-right-sm {
      border-top-right-radius: var(--zbk-border-radius-sm);
    }
    .desktop\:radius-bottom-left-sm {
      border-bottom-left-radius: var(--zbk-border-radius-sm);
    }
    .desktop\:radius-bottom-right-sm {
      border-bottom-right-radius: var(--zbk-border-radius-sm);
    }
    .desktop\:radius-md {
      border-radius: var(--zbk-border-radius-md);
    }
    .desktop\:radius-top-md {
      border-top-left-radius: var(--zbk-border-radius-md);
      border-top-right-radius: var(--zbk-border-radius-md);
    }
    .desktop\:radius-bottom-md {
      border-bottom-right-radius: var(--zbk-border-radius-md);
    }
    .desktop\:radius-bottom-md,
    .desktop\:radius-left-md {
      border-bottom-left-radius: var(--zbk-border-radius-md);
    }
    .desktop\:radius-left-md {
      border-top-left-radius: var(--zbk-border-radius-md);
    }
    .desktop\:radius-right-md {
      border-bottom-right-radius: var(--zbk-border-radius-md);
      border-top-right-radius: var(--zbk-border-radius-md);
    }
    .desktop\:radius-top-left-md {
      border-top-left-radius: var(--zbk-border-radius-md);
    }
    .desktop\:radius-top-right-md {
      border-top-right-radius: var(--zbk-border-radius-md);
    }
    .desktop\:radius-bottom-left-md {
      border-bottom-left-radius: var(--zbk-border-radius-md);
    }
    .desktop\:radius-bottom-right-md {
      border-bottom-right-radius: var(--zbk-border-radius-md);
    }
    .desktop\:radius-lg {
      border-radius: var(--zbk-border-radius-lg);
    }
    .desktop\:radius-top-lg {
      border-top-left-radius: var(--zbk-border-radius-lg);
      border-top-right-radius: var(--zbk-border-radius-lg);
    }
    .desktop\:radius-bottom-lg {
      border-bottom-right-radius: var(--zbk-border-radius-lg);
    }
    .desktop\:radius-bottom-lg,
    .desktop\:radius-left-lg {
      border-bottom-left-radius: var(--zbk-border-radius-lg);
    }
    .desktop\:radius-left-lg {
      border-top-left-radius: var(--zbk-border-radius-lg);
    }
    .desktop\:radius-right-lg {
      border-bottom-right-radius: var(--zbk-border-radius-lg);
      border-top-right-radius: var(--zbk-border-radius-lg);
    }
    .desktop\:radius-top-left-lg {
      border-top-left-radius: var(--zbk-border-radius-lg);
    }
    .desktop\:radius-top-right-lg {
      border-top-right-radius: var(--zbk-border-radius-lg);
    }
    .desktop\:radius-bottom-left-lg {
      border-bottom-left-radius: var(--zbk-border-radius-lg);
    }
    .desktop\:radius-bottom-right-lg {
      border-bottom-right-radius: var(--zbk-border-radius-lg);
    }
    .desktop\:radius-xl {
      border-radius: var(--zbk-border-radius-xl);
    }
    .desktop\:radius-top-xl {
      border-top-left-radius: var(--zbk-border-radius-xl);
      border-top-right-radius: var(--zbk-border-radius-xl);
    }
    .desktop\:radius-bottom-xl {
      border-bottom-right-radius: var(--zbk-border-radius-xl);
    }
    .desktop\:radius-bottom-xl,
    .desktop\:radius-left-xl {
      border-bottom-left-radius: var(--zbk-border-radius-xl);
    }
    .desktop\:radius-left-xl {
      border-top-left-radius: var(--zbk-border-radius-xl);
    }
    .desktop\:radius-right-xl {
      border-bottom-right-radius: var(--zbk-border-radius-xl);
      border-top-right-radius: var(--zbk-border-radius-xl);
    }
    .desktop\:radius-top-left-xl {
      border-top-left-radius: var(--zbk-border-radius-xl);
    }
    .desktop\:radius-top-right-xl {
      border-top-right-radius: var(--zbk-border-radius-xl);
    }
    .desktop\:radius-bottom-left-xl {
      border-bottom-left-radius: var(--zbk-border-radius-xl);
    }
    .desktop\:radius-bottom-right-xl {
      border-bottom-right-radius: var(--zbk-border-radius-xl);
    }
  }
  @media (min-width: 80rem) {
    .desktop-lg\:radius-0 {
      border-radius: 0;
    }
    .desktop-lg\:radius-top-0 {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    .desktop-lg\:radius-bottom-0 {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    .desktop-lg\:radius-left-0 {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }
    .desktop-lg\:radius-right-0 {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
    .desktop-lg\:radius-top-left-0 {
      border-top-left-radius: 0;
    }
    .desktop-lg\:radius-top-right-0 {
      border-top-right-radius: 0;
    }
    .desktop-lg\:radius-bottom-left-0 {
      border-bottom-left-radius: 0;
    }
    .desktop-lg\:radius-bottom-right-0 {
      border-bottom-right-radius: 0;
    }
    .desktop-lg\:radius-2xs {
      border-radius: var(--zbk-border-radius-2xs);
    }
    .desktop-lg\:radius-top-2xs {
      border-top-left-radius: var(--zbk-border-radius-2xs);
      border-top-right-radius: var(--zbk-border-radius-2xs);
    }
    .desktop-lg\:radius-bottom-2xs {
      border-bottom-left-radius: var(--zbk-border-radius-2xs);
      border-bottom-right-radius: var(--zbk-border-radius-2xs);
    }
    .desktop-lg\:radius-left-2xs {
      border-bottom-left-radius: var(--zbk-border-radius-2xs);
      border-top-left-radius: var(--zbk-border-radius-2xs);
    }
    .desktop-lg\:radius-right-2xs {
      border-bottom-right-radius: var(--zbk-border-radius-2xs);
      border-top-right-radius: var(--zbk-border-radius-2xs);
    }
    .desktop-lg\:radius-top-left-2xs {
      border-top-left-radius: var(--zbk-border-radius-2xs);
    }
    .desktop-lg\:radius-top-right-2xs {
      border-top-right-radius: var(--zbk-border-radius-2xs);
    }
    .desktop-lg\:radius-bottom-left-2xs {
      border-bottom-left-radius: var(--zbk-border-radius-2xs);
    }
    .desktop-lg\:radius-bottom-right-2xs {
      border-bottom-right-radius: var(--zbk-border-radius-2xs);
    }
    .desktop-lg\:radius-xs {
      border-radius: var(--zbk-border-radius-xs);
    }
    .desktop-lg\:radius-top-xs {
      border-top-left-radius: var(--zbk-border-radius-xs);
      border-top-right-radius: var(--zbk-border-radius-xs);
    }
    .desktop-lg\:radius-bottom-xs {
      border-bottom-left-radius: var(--zbk-border-radius-xs);
      border-bottom-right-radius: var(--zbk-border-radius-xs);
    }
    .desktop-lg\:radius-left-xs {
      border-bottom-left-radius: var(--zbk-border-radius-xs);
      border-top-left-radius: var(--zbk-border-radius-xs);
    }
    .desktop-lg\:radius-right-xs {
      border-bottom-right-radius: var(--zbk-border-radius-xs);
      border-top-right-radius: var(--zbk-border-radius-xs);
    }
    .desktop-lg\:radius-top-left-xs {
      border-top-left-radius: var(--zbk-border-radius-xs);
    }
    .desktop-lg\:radius-top-right-xs {
      border-top-right-radius: var(--zbk-border-radius-xs);
    }
    .desktop-lg\:radius-bottom-left-xs {
      border-bottom-left-radius: var(--zbk-border-radius-xs);
    }
    .desktop-lg\:radius-bottom-right-xs {
      border-bottom-right-radius: var(--zbk-border-radius-xs);
    }
    .desktop-lg\:radius-sm {
      border-radius: var(--zbk-border-radius-sm);
    }
    .desktop-lg\:radius-top-sm {
      border-top-left-radius: var(--zbk-border-radius-sm);
      border-top-right-radius: var(--zbk-border-radius-sm);
    }
    .desktop-lg\:radius-bottom-sm {
      border-bottom-left-radius: var(--zbk-border-radius-sm);
      border-bottom-right-radius: var(--zbk-border-radius-sm);
    }
    .desktop-lg\:radius-left-sm {
      border-bottom-left-radius: var(--zbk-border-radius-sm);
      border-top-left-radius: var(--zbk-border-radius-sm);
    }
    .desktop-lg\:radius-right-sm {
      border-bottom-right-radius: var(--zbk-border-radius-sm);
      border-top-right-radius: var(--zbk-border-radius-sm);
    }
    .desktop-lg\:radius-top-left-sm {
      border-top-left-radius: var(--zbk-border-radius-sm);
    }
    .desktop-lg\:radius-top-right-sm {
      border-top-right-radius: var(--zbk-border-radius-sm);
    }
    .desktop-lg\:radius-bottom-left-sm {
      border-bottom-left-radius: var(--zbk-border-radius-sm);
    }
    .desktop-lg\:radius-bottom-right-sm {
      border-bottom-right-radius: var(--zbk-border-radius-sm);
    }
    .desktop-lg\:radius-md {
      border-radius: var(--zbk-border-radius-md);
    }
    .desktop-lg\:radius-top-md {
      border-top-left-radius: var(--zbk-border-radius-md);
      border-top-right-radius: var(--zbk-border-radius-md);
    }
    .desktop-lg\:radius-bottom-md {
      border-bottom-left-radius: var(--zbk-border-radius-md);
      border-bottom-right-radius: var(--zbk-border-radius-md);
    }
    .desktop-lg\:radius-left-md {
      border-bottom-left-radius: var(--zbk-border-radius-md);
      border-top-left-radius: var(--zbk-border-radius-md);
    }
    .desktop-lg\:radius-right-md {
      border-bottom-right-radius: var(--zbk-border-radius-md);
      border-top-right-radius: var(--zbk-border-radius-md);
    }
    .desktop-lg\:radius-top-left-md {
      border-top-left-radius: var(--zbk-border-radius-md);
    }
    .desktop-lg\:radius-top-right-md {
      border-top-right-radius: var(--zbk-border-radius-md);
    }
    .desktop-lg\:radius-bottom-left-md {
      border-bottom-left-radius: var(--zbk-border-radius-md);
    }
    .desktop-lg\:radius-bottom-right-md {
      border-bottom-right-radius: var(--zbk-border-radius-md);
    }
    .desktop-lg\:radius-lg {
      border-radius: var(--zbk-border-radius-lg);
    }
    .desktop-lg\:radius-top-lg {
      border-top-left-radius: var(--zbk-border-radius-lg);
      border-top-right-radius: var(--zbk-border-radius-lg);
    }
    .desktop-lg\:radius-bottom-lg {
      border-bottom-left-radius: var(--zbk-border-radius-lg);
      border-bottom-right-radius: var(--zbk-border-radius-lg);
    }
    .desktop-lg\:radius-left-lg {
      border-bottom-left-radius: var(--zbk-border-radius-lg);
      border-top-left-radius: var(--zbk-border-radius-lg);
    }
    .desktop-lg\:radius-right-lg {
      border-bottom-right-radius: var(--zbk-border-radius-lg);
      border-top-right-radius: var(--zbk-border-radius-lg);
    }
    .desktop-lg\:radius-top-left-lg {
      border-top-left-radius: var(--zbk-border-radius-lg);
    }
    .desktop-lg\:radius-top-right-lg {
      border-top-right-radius: var(--zbk-border-radius-lg);
    }
    .desktop-lg\:radius-bottom-left-lg {
      border-bottom-left-radius: var(--zbk-border-radius-lg);
    }
    .desktop-lg\:radius-bottom-right-lg {
      border-bottom-right-radius: var(--zbk-border-radius-lg);
    }
    .desktop-lg\:radius-xl {
      border-radius: var(--zbk-border-radius-xl);
    }
    .desktop-lg\:radius-top-xl {
      border-top-left-radius: var(--zbk-border-radius-xl);
      border-top-right-radius: var(--zbk-border-radius-xl);
    }
    .desktop-lg\:radius-bottom-xl {
      border-bottom-left-radius: var(--zbk-border-radius-xl);
      border-bottom-right-radius: var(--zbk-border-radius-xl);
    }
    .desktop-lg\:radius-left-xl {
      border-bottom-left-radius: var(--zbk-border-radius-xl);
      border-top-left-radius: var(--zbk-border-radius-xl);
    }
    .desktop-lg\:radius-right-xl {
      border-bottom-right-radius: var(--zbk-border-radius-xl);
      border-top-right-radius: var(--zbk-border-radius-xl);
    }
    .desktop-lg\:radius-top-left-xl {
      border-top-left-radius: var(--zbk-border-radius-xl);
    }
    .desktop-lg\:radius-top-right-xl {
      border-top-right-radius: var(--zbk-border-radius-xl);
    }
    .desktop-lg\:radius-bottom-left-xl {
      border-bottom-left-radius: var(--zbk-border-radius-xl);
    }
    .desktop-lg\:radius-bottom-right-xl {
      border-bottom-right-radius: var(--zbk-border-radius-xl);
    }
  }
  @media (min-width: 100rem) {
    .widescreen\:radius-0 {
      border-radius: 0;
    }
    .widescreen\:radius-top-0 {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    .widescreen\:radius-bottom-0 {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    .widescreen\:radius-left-0 {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }
    .widescreen\:radius-right-0 {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
    .widescreen\:radius-top-left-0 {
      border-top-left-radius: 0;
    }
    .widescreen\:radius-top-right-0 {
      border-top-right-radius: 0;
    }
    .widescreen\:radius-bottom-left-0 {
      border-bottom-left-radius: 0;
    }
    .widescreen\:radius-bottom-right-0 {
      border-bottom-right-radius: 0;
    }
    .widescreen\:radius-2xs {
      border-radius: var(--zbk-border-radius-2xs);
    }
    .widescreen\:radius-top-2xs {
      border-top-left-radius: var(--zbk-border-radius-2xs);
      border-top-right-radius: var(--zbk-border-radius-2xs);
    }
    .widescreen\:radius-bottom-2xs {
      border-bottom-left-radius: var(--zbk-border-radius-2xs);
      border-bottom-right-radius: var(--zbk-border-radius-2xs);
    }
    .widescreen\:radius-left-2xs {
      border-bottom-left-radius: var(--zbk-border-radius-2xs);
      border-top-left-radius: var(--zbk-border-radius-2xs);
    }
    .widescreen\:radius-right-2xs {
      border-bottom-right-radius: var(--zbk-border-radius-2xs);
      border-top-right-radius: var(--zbk-border-radius-2xs);
    }
    .widescreen\:radius-top-left-2xs {
      border-top-left-radius: var(--zbk-border-radius-2xs);
    }
    .widescreen\:radius-top-right-2xs {
      border-top-right-radius: var(--zbk-border-radius-2xs);
    }
    .widescreen\:radius-bottom-left-2xs {
      border-bottom-left-radius: var(--zbk-border-radius-2xs);
    }
    .widescreen\:radius-bottom-right-2xs {
      border-bottom-right-radius: var(--zbk-border-radius-2xs);
    }
    .widescreen\:radius-xs {
      border-radius: var(--zbk-border-radius-xs);
    }
    .widescreen\:radius-top-xs {
      border-top-left-radius: var(--zbk-border-radius-xs);
      border-top-right-radius: var(--zbk-border-radius-xs);
    }
    .widescreen\:radius-bottom-xs {
      border-bottom-left-radius: var(--zbk-border-radius-xs);
      border-bottom-right-radius: var(--zbk-border-radius-xs);
    }
    .widescreen\:radius-left-xs {
      border-bottom-left-radius: var(--zbk-border-radius-xs);
      border-top-left-radius: var(--zbk-border-radius-xs);
    }
    .widescreen\:radius-right-xs {
      border-bottom-right-radius: var(--zbk-border-radius-xs);
      border-top-right-radius: var(--zbk-border-radius-xs);
    }
    .widescreen\:radius-top-left-xs {
      border-top-left-radius: var(--zbk-border-radius-xs);
    }
    .widescreen\:radius-top-right-xs {
      border-top-right-radius: var(--zbk-border-radius-xs);
    }
    .widescreen\:radius-bottom-left-xs {
      border-bottom-left-radius: var(--zbk-border-radius-xs);
    }
    .widescreen\:radius-bottom-right-xs {
      border-bottom-right-radius: var(--zbk-border-radius-xs);
    }
    .widescreen\:radius-sm {
      border-radius: var(--zbk-border-radius-sm);
    }
    .widescreen\:radius-top-sm {
      border-top-left-radius: var(--zbk-border-radius-sm);
      border-top-right-radius: var(--zbk-border-radius-sm);
    }
    .widescreen\:radius-bottom-sm {
      border-bottom-left-radius: var(--zbk-border-radius-sm);
      border-bottom-right-radius: var(--zbk-border-radius-sm);
    }
    .widescreen\:radius-left-sm {
      border-bottom-left-radius: var(--zbk-border-radius-sm);
      border-top-left-radius: var(--zbk-border-radius-sm);
    }
    .widescreen\:radius-right-sm {
      border-bottom-right-radius: var(--zbk-border-radius-sm);
      border-top-right-radius: var(--zbk-border-radius-sm);
    }
    .widescreen\:radius-top-left-sm {
      border-top-left-radius: var(--zbk-border-radius-sm);
    }
    .widescreen\:radius-top-right-sm {
      border-top-right-radius: var(--zbk-border-radius-sm);
    }
    .widescreen\:radius-bottom-left-sm {
      border-bottom-left-radius: var(--zbk-border-radius-sm);
    }
    .widescreen\:radius-bottom-right-sm {
      border-bottom-right-radius: var(--zbk-border-radius-sm);
    }
    .widescreen\:radius-md {
      border-radius: var(--zbk-border-radius-md);
    }
    .widescreen\:radius-top-md {
      border-top-left-radius: var(--zbk-border-radius-md);
      border-top-right-radius: var(--zbk-border-radius-md);
    }
    .widescreen\:radius-bottom-md {
      border-bottom-left-radius: var(--zbk-border-radius-md);
      border-bottom-right-radius: var(--zbk-border-radius-md);
    }
    .widescreen\:radius-left-md {
      border-bottom-left-radius: var(--zbk-border-radius-md);
      border-top-left-radius: var(--zbk-border-radius-md);
    }
    .widescreen\:radius-right-md {
      border-bottom-right-radius: var(--zbk-border-radius-md);
      border-top-right-radius: var(--zbk-border-radius-md);
    }
    .widescreen\:radius-top-left-md {
      border-top-left-radius: var(--zbk-border-radius-md);
    }
    .widescreen\:radius-top-right-md {
      border-top-right-radius: var(--zbk-border-radius-md);
    }
    .widescreen\:radius-bottom-left-md {
      border-bottom-left-radius: var(--zbk-border-radius-md);
    }
    .widescreen\:radius-bottom-right-md {
      border-bottom-right-radius: var(--zbk-border-radius-md);
    }
    .widescreen\:radius-lg {
      border-radius: var(--zbk-border-radius-lg);
    }
    .widescreen\:radius-top-lg {
      border-top-left-radius: var(--zbk-border-radius-lg);
      border-top-right-radius: var(--zbk-border-radius-lg);
    }
    .widescreen\:radius-bottom-lg {
      border-bottom-left-radius: var(--zbk-border-radius-lg);
      border-bottom-right-radius: var(--zbk-border-radius-lg);
    }
    .widescreen\:radius-left-lg {
      border-bottom-left-radius: var(--zbk-border-radius-lg);
      border-top-left-radius: var(--zbk-border-radius-lg);
    }
    .widescreen\:radius-right-lg {
      border-bottom-right-radius: var(--zbk-border-radius-lg);
      border-top-right-radius: var(--zbk-border-radius-lg);
    }
    .widescreen\:radius-top-left-lg {
      border-top-left-radius: var(--zbk-border-radius-lg);
    }
    .widescreen\:radius-top-right-lg {
      border-top-right-radius: var(--zbk-border-radius-lg);
    }
    .widescreen\:radius-bottom-left-lg {
      border-bottom-left-radius: var(--zbk-border-radius-lg);
    }
    .widescreen\:radius-bottom-right-lg {
      border-bottom-right-radius: var(--zbk-border-radius-lg);
    }
    .widescreen\:radius-xl {
      border-radius: var(--zbk-border-radius-xl);
    }
    .widescreen\:radius-top-xl {
      border-top-left-radius: var(--zbk-border-radius-xl);
      border-top-right-radius: var(--zbk-border-radius-xl);
    }
    .widescreen\:radius-bottom-xl {
      border-bottom-left-radius: var(--zbk-border-radius-xl);
      border-bottom-right-radius: var(--zbk-border-radius-xl);
    }
    .widescreen\:radius-left-xl {
      border-bottom-left-radius: var(--zbk-border-radius-xl);
      border-top-left-radius: var(--zbk-border-radius-xl);
    }
    .widescreen\:radius-right-xl {
      border-bottom-right-radius: var(--zbk-border-radius-xl);
      border-top-right-radius: var(--zbk-border-radius-xl);
    }
    .widescreen\:radius-top-left-xl {
      border-top-left-radius: var(--zbk-border-radius-xl);
    }
    .widescreen\:radius-top-right-xl {
      border-top-right-radius: var(--zbk-border-radius-xl);
    }
    .widescreen\:radius-bottom-left-xl {
      border-bottom-left-radius: var(--zbk-border-radius-xl);
    }
    .widescreen\:radius-bottom-right-xl {
      border-bottom-right-radius: var(--zbk-border-radius-xl);
    }
  }
  .radius-pill {
    border-radius: 99rem;
  }
  .radius-top-pill {
    border-top-left-radius: 99rem;
    border-top-right-radius: 99rem;
  }
  .radius-bottom-pill {
    border-bottom-left-radius: 99rem;
    border-bottom-right-radius: 99rem;
  }
  .radius-left-pill {
    border-bottom-left-radius: 99rem;
    border-top-left-radius: 99rem;
  }
  .radius-right-pill {
    border-bottom-right-radius: 99rem;
    border-top-right-radius: 99rem;
  }
  .radius-top-left-pill {
    border-top-left-radius: 99rem;
  }
  .radius-top-right-pill {
    border-top-right-radius: 99rem;
  }
  .radius-bottom-left-pill {
    border-bottom-left-radius: 99rem;
  }
  .radius-bottom-right-pill {
    border-bottom-right-radius: 99rem;
  }
  @media (min-width: 40rem) {
    .tablet\:radius-pill {
      border-radius: 99rem;
    }
    .tablet\:radius-top-pill {
      border-top-left-radius: 99rem;
      border-top-right-radius: 99rem;
    }
    .tablet\:radius-bottom-pill {
      border-bottom-left-radius: 99rem;
      border-bottom-right-radius: 99rem;
    }
    .tablet\:radius-left-pill {
      border-bottom-left-radius: 99rem;
      border-top-left-radius: 99rem;
    }
    .tablet\:radius-right-pill {
      border-bottom-right-radius: 99rem;
      border-top-right-radius: 99rem;
    }
    .tablet\:radius-top-left-pill {
      border-top-left-radius: 99rem;
    }
    .tablet\:radius-top-right-pill {
      border-top-right-radius: 99rem;
    }
    .tablet\:radius-bottom-left-pill {
      border-bottom-left-radius: 99rem;
    }
    .tablet\:radius-bottom-right-pill {
      border-bottom-right-radius: 99rem;
    }
  }
  @media (min-width: 50rem) {
    .tablet-lg\:radius-pill {
      border-radius: 99rem;
    }
    .tablet-lg\:radius-top-pill {
      border-top-left-radius: 99rem;
      border-top-right-radius: 99rem;
    }
    .tablet-lg\:radius-bottom-pill {
      border-bottom-left-radius: 99rem;
      border-bottom-right-radius: 99rem;
    }
    .tablet-lg\:radius-left-pill {
      border-bottom-left-radius: 99rem;
      border-top-left-radius: 99rem;
    }
    .tablet-lg\:radius-right-pill {
      border-bottom-right-radius: 99rem;
      border-top-right-radius: 99rem;
    }
    .tablet-lg\:radius-top-left-pill {
      border-top-left-radius: 99rem;
    }
    .tablet-lg\:radius-top-right-pill {
      border-top-right-radius: 99rem;
    }
    .tablet-lg\:radius-bottom-left-pill {
      border-bottom-left-radius: 99rem;
    }
    .tablet-lg\:radius-bottom-right-pill {
      border-bottom-right-radius: 99rem;
    }
  }
  @media (min-width: 70rem) {
    .desktop\:radius-pill {
      border-radius: 99rem;
    }
    .desktop\:radius-top-pill {
      border-top-left-radius: 99rem;
      border-top-right-radius: 99rem;
    }
    .desktop\:radius-bottom-pill {
      border-bottom-left-radius: 99rem;
      border-bottom-right-radius: 99rem;
    }
    .desktop\:radius-left-pill {
      border-bottom-left-radius: 99rem;
      border-top-left-radius: 99rem;
    }
    .desktop\:radius-right-pill {
      border-bottom-right-radius: 99rem;
      border-top-right-radius: 99rem;
    }
    .desktop\:radius-top-left-pill {
      border-top-left-radius: 99rem;
    }
    .desktop\:radius-top-right-pill {
      border-top-right-radius: 99rem;
    }
    .desktop\:radius-bottom-left-pill {
      border-bottom-left-radius: 99rem;
    }
    .desktop\:radius-bottom-right-pill {
      border-bottom-right-radius: 99rem;
    }
  }
  @media (min-width: 80rem) {
    .desktop-lg\:radius-pill {
      border-radius: 99rem;
    }
    .desktop-lg\:radius-top-pill {
      border-top-left-radius: 99rem;
      border-top-right-radius: 99rem;
    }
    .desktop-lg\:radius-bottom-pill {
      border-bottom-left-radius: 99rem;
      border-bottom-right-radius: 99rem;
    }
    .desktop-lg\:radius-left-pill {
      border-bottom-left-radius: 99rem;
      border-top-left-radius: 99rem;
    }
    .desktop-lg\:radius-right-pill {
      border-bottom-right-radius: 99rem;
      border-top-right-radius: 99rem;
    }
    .desktop-lg\:radius-top-left-pill {
      border-top-left-radius: 99rem;
    }
    .desktop-lg\:radius-top-right-pill {
      border-top-right-radius: 99rem;
    }
    .desktop-lg\:radius-bottom-left-pill {
      border-bottom-left-radius: 99rem;
    }
    .desktop-lg\:radius-bottom-right-pill {
      border-bottom-right-radius: 99rem;
    }
  }
  @media (min-width: 100rem) {
    .widescreen\:radius-pill {
      border-radius: 99rem;
    }
    .widescreen\:radius-top-pill {
      border-top-left-radius: 99rem;
      border-top-right-radius: 99rem;
    }
    .widescreen\:radius-bottom-pill {
      border-bottom-left-radius: 99rem;
      border-bottom-right-radius: 99rem;
    }
    .widescreen\:radius-left-pill {
      border-bottom-left-radius: 99rem;
      border-top-left-radius: 99rem;
    }
    .widescreen\:radius-right-pill {
      border-bottom-right-radius: 99rem;
      border-top-right-radius: 99rem;
    }
    .widescreen\:radius-top-left-pill {
      border-top-left-radius: 99rem;
    }
    .widescreen\:radius-top-right-pill {
      border-top-right-radius: 99rem;
    }
    .widescreen\:radius-bottom-left-pill {
      border-bottom-left-radius: 99rem;
    }
    .widescreen\:radius-bottom-right-pill {
      border-bottom-right-radius: 99rem;
    }
  }
}
.border-solid {
  border-style: solid;
}
.border-dashed {
  border-style: dashed;
}
.border-dotted {
  border-style: dotted;
}
:root {
  --zbk-color-blue-hue: 210;
  --zbk-color-blue-saturation: 78%;
  --zbk-color-blue-50: hsl(
    var(--zbk-color-blue-hue),
    var(--zbk-color-blue-saturation),
    98%
  );
  --zbk-color-blue-100: hsl(
    var(--zbk-color-blue-hue),
    var(--zbk-color-blue-saturation),
    93%
  );
  --zbk-color-blue-200: hsl(
    var(--zbk-color-blue-hue),
    var(--zbk-color-blue-saturation),
    87%
  );
  --zbk-color-blue-300: hsl(
    var(--zbk-color-blue-hue),
    var(--zbk-color-blue-saturation),
    78%
  );
  --zbk-color-blue-400: hsl(
    var(--zbk-color-blue-hue),
    var(--zbk-color-blue-saturation),
    69%
  );
  --zbk-color-blue-500: hsl(
    var(--zbk-color-blue-hue),
    var(--zbk-color-blue-saturation),
    58%
  );
  --zbk-color-blue-600: hsl(
    var(--zbk-color-blue-hue),
    var(--zbk-color-blue-saturation),
    48%
  );
  --zbk-color-blue-700: hsl(
    var(--zbk-color-blue-hue),
    var(--zbk-color-blue-saturation),
    36%
  );
  --zbk-color-blue-800: hsl(
    var(--zbk-color-blue-hue),
    var(--zbk-color-blue-saturation),
    26%
  );
  --zbk-color-blue-900: hsl(
    var(--zbk-color-blue-hue),
    var(--zbk-color-blue-saturation),
    18%
  );
  --zbk-color-blue-950: hsl(
    var(--zbk-color-blue-hue),
    var(--zbk-color-blue-saturation),
    10%
  );
}
@layer utilities {
  .ink-blue-50 {
    color: var(--zbk-color-blue-50);
  }
  [class~="focus:ink-blue-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-blue-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-blue-50:hover {
      color: var(--zbk-color-blue-50);
    }
  }
  [class~="active:ink-blue-50"]:active {
    color: var(--zbk-color-blue-50);
  }
  [class~="disabled:ink-blue-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-blue-50);
  }
  .ink-blue-100 {
    color: var(--zbk-color-blue-100);
  }
  [class~="focus:ink-blue-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-blue-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-blue-100:hover {
      color: var(--zbk-color-blue-100);
    }
  }
  [class~="active:ink-blue-100"]:active {
    color: var(--zbk-color-blue-100);
  }
  [class~="disabled:ink-blue-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-blue-100);
  }
  .ink-blue-200 {
    color: var(--zbk-color-blue-200);
  }
  [class~="focus:ink-blue-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-blue-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-blue-200:hover {
      color: var(--zbk-color-blue-200);
    }
  }
  [class~="active:ink-blue-200"]:active {
    color: var(--zbk-color-blue-200);
  }
  [class~="disabled:ink-blue-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-blue-200);
  }
  .ink-blue-300 {
    color: var(--zbk-color-blue-300);
  }
  [class~="focus:ink-blue-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-blue-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-blue-300:hover {
      color: var(--zbk-color-blue-300);
    }
  }
  [class~="active:ink-blue-300"]:active {
    color: var(--zbk-color-blue-300);
  }
  [class~="disabled:ink-blue-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-blue-300);
  }
  .ink-blue-400 {
    color: var(--zbk-color-blue-400);
  }
  [class~="focus:ink-blue-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-blue-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-blue-400:hover {
      color: var(--zbk-color-blue-400);
    }
  }
  [class~="active:ink-blue-400"]:active {
    color: var(--zbk-color-blue-400);
  }
  [class~="disabled:ink-blue-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-blue-400);
  }
  .ink-blue-500 {
    color: var(--zbk-color-blue-500);
  }
  [class~="focus:ink-blue-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-blue-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-blue-500:hover {
      color: var(--zbk-color-blue-500);
    }
  }
  [class~="active:ink-blue-500"]:active {
    color: var(--zbk-color-blue-500);
  }
  [class~="disabled:ink-blue-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-blue-500);
  }
  .ink-blue-600 {
    color: var(--zbk-color-blue-600);
  }
  [class~="focus:ink-blue-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-blue-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-blue-600:hover {
      color: var(--zbk-color-blue-600);
    }
  }
  [class~="active:ink-blue-600"]:active {
    color: var(--zbk-color-blue-600);
  }
  [class~="disabled:ink-blue-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-blue-600);
  }
  .ink-blue-700 {
    color: var(--zbk-color-blue-700);
  }
  [class~="focus:ink-blue-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-blue-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-blue-700:hover {
      color: var(--zbk-color-blue-700);
    }
  }
  [class~="active:ink-blue-700"]:active {
    color: var(--zbk-color-blue-700);
  }
  [class~="disabled:ink-blue-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-blue-700);
  }
  .ink-blue-800 {
    color: var(--zbk-color-blue-800);
  }
  [class~="focus:ink-blue-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-blue-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-blue-800:hover {
      color: var(--zbk-color-blue-800);
    }
  }
  [class~="active:ink-blue-800"]:active {
    color: var(--zbk-color-blue-800);
  }
  [class~="disabled:ink-blue-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-blue-800);
  }
  .ink-blue-900 {
    color: var(--zbk-color-blue-900);
  }
  [class~="focus:ink-blue-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-blue-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-blue-900:hover {
      color: var(--zbk-color-blue-900);
    }
  }
  [class~="active:ink-blue-900"]:active {
    color: var(--zbk-color-blue-900);
  }
  [class~="disabled:ink-blue-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-blue-900);
  }
  .ink-blue-950 {
    color: var(--zbk-color-blue-950);
  }
  [class~="focus:ink-blue-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-blue-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-blue-950:hover {
      color: var(--zbk-color-blue-950);
    }
  }
  [class~="active:ink-blue-950"]:active {
    color: var(--zbk-color-blue-950);
  }
  [class~="disabled:ink-blue-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-blue-950);
  }
  .canvas-blue-50 {
    background-color: var(--zbk-color-blue-50);
  }
  [class~="focus:canvas-blue-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-blue-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-blue-50:hover {
      background-color: var(--zbk-color-blue-50);
    }
  }
  [class~="active:canvas-blue-50"]:active {
    background-color: var(--zbk-color-blue-50);
  }
  [class~="disabled:canvas-blue-50"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-blue-50);
  }
  .canvas-blue-100 {
    background-color: var(--zbk-color-blue-100);
  }
  [class~="focus:canvas-blue-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-blue-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-blue-100:hover {
      background-color: var(--zbk-color-blue-100);
    }
  }
  [class~="active:canvas-blue-100"]:active {
    background-color: var(--zbk-color-blue-100);
  }
  [class~="disabled:canvas-blue-100"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-blue-100);
  }
  .canvas-blue-200 {
    background-color: var(--zbk-color-blue-200);
  }
  [class~="focus:canvas-blue-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-blue-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-blue-200:hover {
      background-color: var(--zbk-color-blue-200);
    }
  }
  [class~="active:canvas-blue-200"]:active {
    background-color: var(--zbk-color-blue-200);
  }
  [class~="disabled:canvas-blue-200"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-blue-200);
  }
  .canvas-blue-300 {
    background-color: var(--zbk-color-blue-300);
  }
  [class~="focus:canvas-blue-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-blue-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-blue-300:hover {
      background-color: var(--zbk-color-blue-300);
    }
  }
  [class~="active:canvas-blue-300"]:active {
    background-color: var(--zbk-color-blue-300);
  }
  [class~="disabled:canvas-blue-300"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-blue-300);
  }
  .canvas-blue-400 {
    background-color: var(--zbk-color-blue-400);
  }
  [class~="focus:canvas-blue-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-blue-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-blue-400:hover {
      background-color: var(--zbk-color-blue-400);
    }
  }
  [class~="active:canvas-blue-400"]:active {
    background-color: var(--zbk-color-blue-400);
  }
  [class~="disabled:canvas-blue-400"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-blue-400);
  }
  .canvas-blue-500 {
    background-color: var(--zbk-color-blue-500);
  }
  [class~="focus:canvas-blue-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-blue-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-blue-500:hover {
      background-color: var(--zbk-color-blue-500);
    }
  }
  [class~="active:canvas-blue-500"]:active {
    background-color: var(--zbk-color-blue-500);
  }
  [class~="disabled:canvas-blue-500"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-blue-500);
  }
  .canvas-blue-600 {
    background-color: var(--zbk-color-blue-600);
  }
  [class~="focus:canvas-blue-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-blue-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-blue-600:hover {
      background-color: var(--zbk-color-blue-600);
    }
  }
  [class~="active:canvas-blue-600"]:active {
    background-color: var(--zbk-color-blue-600);
  }
  [class~="disabled:canvas-blue-600"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-blue-600);
  }
  .canvas-blue-700 {
    background-color: var(--zbk-color-blue-700);
  }
  [class~="focus:canvas-blue-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-blue-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-blue-700:hover {
      background-color: var(--zbk-color-blue-700);
    }
  }
  [class~="active:canvas-blue-700"]:active {
    background-color: var(--zbk-color-blue-700);
  }
  [class~="disabled:canvas-blue-700"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-blue-700);
  }
  .canvas-blue-800 {
    background-color: var(--zbk-color-blue-800);
  }
  [class~="focus:canvas-blue-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-blue-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-blue-800:hover {
      background-color: var(--zbk-color-blue-800);
    }
  }
  [class~="active:canvas-blue-800"]:active {
    background-color: var(--zbk-color-blue-800);
  }
  [class~="disabled:canvas-blue-800"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-blue-800);
  }
  .canvas-blue-900 {
    background-color: var(--zbk-color-blue-900);
  }
  [class~="focus:canvas-blue-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-blue-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-blue-900:hover {
      background-color: var(--zbk-color-blue-900);
    }
  }
  [class~="active:canvas-blue-900"]:active {
    background-color: var(--zbk-color-blue-900);
  }
  [class~="disabled:canvas-blue-900"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-blue-900);
  }
  .canvas-blue-950 {
    background-color: var(--zbk-color-blue-950);
  }
  [class~="focus:canvas-blue-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-blue-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-blue-950:hover {
      background-color: var(--zbk-color-blue-950);
    }
  }
  [class~="active:canvas-blue-950"]:active {
    background-color: var(--zbk-color-blue-950);
  }
  [class~="disabled:canvas-blue-950"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-blue-950);
  }
  .border-blue-50 {
    border-color: var(--zbk-color-blue-50);
  }
  [class~="focus:border-blue-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-blue-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-blue-50:hover {
      border-color: var(--zbk-color-blue-50);
    }
  }
  [class~="active:border-blue-50"]:active {
    border-color: var(--zbk-color-blue-50);
  }
  [class~="disabled:border-blue-50"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-blue-50);
  }
  .border-blue-100 {
    border-color: var(--zbk-color-blue-100);
  }
  [class~="focus:border-blue-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-blue-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-blue-100:hover {
      border-color: var(--zbk-color-blue-100);
    }
  }
  [class~="active:border-blue-100"]:active {
    border-color: var(--zbk-color-blue-100);
  }
  [class~="disabled:border-blue-100"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-blue-100);
  }
  .border-blue-200 {
    border-color: var(--zbk-color-blue-200);
  }
  [class~="focus:border-blue-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-blue-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-blue-200:hover {
      border-color: var(--zbk-color-blue-200);
    }
  }
  [class~="active:border-blue-200"]:active {
    border-color: var(--zbk-color-blue-200);
  }
  [class~="disabled:border-blue-200"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-blue-200);
  }
  .border-blue-300 {
    border-color: var(--zbk-color-blue-300);
  }
  [class~="focus:border-blue-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-blue-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-blue-300:hover {
      border-color: var(--zbk-color-blue-300);
    }
  }
  [class~="active:border-blue-300"]:active {
    border-color: var(--zbk-color-blue-300);
  }
  [class~="disabled:border-blue-300"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-blue-300);
  }
  .border-blue-400 {
    border-color: var(--zbk-color-blue-400);
  }
  [class~="focus:border-blue-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-blue-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-blue-400:hover {
      border-color: var(--zbk-color-blue-400);
    }
  }
  [class~="active:border-blue-400"]:active {
    border-color: var(--zbk-color-blue-400);
  }
  [class~="disabled:border-blue-400"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-blue-400);
  }
  .border-blue-500 {
    border-color: var(--zbk-color-blue-500);
  }
  [class~="focus:border-blue-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-blue-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-blue-500:hover {
      border-color: var(--zbk-color-blue-500);
    }
  }
  [class~="active:border-blue-500"]:active {
    border-color: var(--zbk-color-blue-500);
  }
  [class~="disabled:border-blue-500"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-blue-500);
  }
  .border-blue-600 {
    border-color: var(--zbk-color-blue-600);
  }
  [class~="focus:border-blue-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-blue-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-blue-600:hover {
      border-color: var(--zbk-color-blue-600);
    }
  }
  [class~="active:border-blue-600"]:active {
    border-color: var(--zbk-color-blue-600);
  }
  [class~="disabled:border-blue-600"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-blue-600);
  }
  .border-blue-700 {
    border-color: var(--zbk-color-blue-700);
  }
  [class~="focus:border-blue-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-blue-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-blue-700:hover {
      border-color: var(--zbk-color-blue-700);
    }
  }
  [class~="active:border-blue-700"]:active {
    border-color: var(--zbk-color-blue-700);
  }
  [class~="disabled:border-blue-700"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-blue-700);
  }
  .border-blue-800 {
    border-color: var(--zbk-color-blue-800);
  }
  [class~="focus:border-blue-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-blue-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-blue-800:hover {
      border-color: var(--zbk-color-blue-800);
    }
  }
  [class~="active:border-blue-800"]:active {
    border-color: var(--zbk-color-blue-800);
  }
  [class~="disabled:border-blue-800"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-blue-800);
  }
  .border-blue-900 {
    border-color: var(--zbk-color-blue-900);
  }
  [class~="focus:border-blue-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-blue-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-blue-900:hover {
      border-color: var(--zbk-color-blue-900);
    }
  }
  [class~="active:border-blue-900"]:active {
    border-color: var(--zbk-color-blue-900);
  }
  [class~="disabled:border-blue-900"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-blue-900);
  }
  .border-blue-950 {
    border-color: var(--zbk-color-blue-950);
  }
  [class~="focus:border-blue-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-blue-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-blue-950:hover {
      border-color: var(--zbk-color-blue-950);
    }
  }
  [class~="active:border-blue-950"]:active {
    border-color: var(--zbk-color-blue-950);
  }
  [class~="disabled:border-blue-950"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-blue-950);
  }
  .fill-blue-50 {
    fill: var(--zbk-color-blue-50);
  }
  [class~="focus:fill-blue-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-blue-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-blue-50:hover {
      fill: var(--zbk-color-blue-50);
    }
  }
  [class~="active:fill-blue-50"]:active {
    fill: var(--zbk-color-blue-50);
  }
  [class~="disabled:fill-blue-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-blue-50);
  }
  .fill-blue-100 {
    fill: var(--zbk-color-blue-100);
  }
  [class~="focus:fill-blue-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-blue-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-blue-100:hover {
      fill: var(--zbk-color-blue-100);
    }
  }
  [class~="active:fill-blue-100"]:active {
    fill: var(--zbk-color-blue-100);
  }
  [class~="disabled:fill-blue-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-blue-100);
  }
  .fill-blue-200 {
    fill: var(--zbk-color-blue-200);
  }
  [class~="focus:fill-blue-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-blue-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-blue-200:hover {
      fill: var(--zbk-color-blue-200);
    }
  }
  [class~="active:fill-blue-200"]:active {
    fill: var(--zbk-color-blue-200);
  }
  [class~="disabled:fill-blue-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-blue-200);
  }
  .fill-blue-300 {
    fill: var(--zbk-color-blue-300);
  }
  [class~="focus:fill-blue-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-blue-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-blue-300:hover {
      fill: var(--zbk-color-blue-300);
    }
  }
  [class~="active:fill-blue-300"]:active {
    fill: var(--zbk-color-blue-300);
  }
  [class~="disabled:fill-blue-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-blue-300);
  }
  .fill-blue-400 {
    fill: var(--zbk-color-blue-400);
  }
  [class~="focus:fill-blue-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-blue-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-blue-400:hover {
      fill: var(--zbk-color-blue-400);
    }
  }
  [class~="active:fill-blue-400"]:active {
    fill: var(--zbk-color-blue-400);
  }
  [class~="disabled:fill-blue-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-blue-400);
  }
  .fill-blue-500 {
    fill: var(--zbk-color-blue-500);
  }
  [class~="focus:fill-blue-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-blue-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-blue-500:hover {
      fill: var(--zbk-color-blue-500);
    }
  }
  [class~="active:fill-blue-500"]:active {
    fill: var(--zbk-color-blue-500);
  }
  [class~="disabled:fill-blue-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-blue-500);
  }
  .fill-blue-600 {
    fill: var(--zbk-color-blue-600);
  }
  [class~="focus:fill-blue-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-blue-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-blue-600:hover {
      fill: var(--zbk-color-blue-600);
    }
  }
  [class~="active:fill-blue-600"]:active {
    fill: var(--zbk-color-blue-600);
  }
  [class~="disabled:fill-blue-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-blue-600);
  }
  .fill-blue-700 {
    fill: var(--zbk-color-blue-700);
  }
  [class~="focus:fill-blue-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-blue-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-blue-700:hover {
      fill: var(--zbk-color-blue-700);
    }
  }
  [class~="active:fill-blue-700"]:active {
    fill: var(--zbk-color-blue-700);
  }
  [class~="disabled:fill-blue-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-blue-700);
  }
  .fill-blue-800 {
    fill: var(--zbk-color-blue-800);
  }
  [class~="focus:fill-blue-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-blue-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-blue-800:hover {
      fill: var(--zbk-color-blue-800);
    }
  }
  [class~="active:fill-blue-800"]:active {
    fill: var(--zbk-color-blue-800);
  }
  [class~="disabled:fill-blue-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-blue-800);
  }
  .fill-blue-900 {
    fill: var(--zbk-color-blue-900);
  }
  [class~="focus:fill-blue-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-blue-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-blue-900:hover {
      fill: var(--zbk-color-blue-900);
    }
  }
  [class~="active:fill-blue-900"]:active {
    fill: var(--zbk-color-blue-900);
  }
  [class~="disabled:fill-blue-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-blue-900);
  }
  .fill-blue-950 {
    fill: var(--zbk-color-blue-950);
  }
  [class~="focus:fill-blue-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-blue-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-blue-950:hover {
      fill: var(--zbk-color-blue-950);
    }
  }
  [class~="active:fill-blue-950"]:active {
    fill: var(--zbk-color-blue-950);
  }
  [class~="disabled:fill-blue-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-blue-950);
  }
}
:root {
  --zbk-color-butterfield-hue: 48;
  --zbk-color-butterfield-saturation: 72%;
  --zbk-color-butterfield-50: hsl(
    var(--zbk-color-butterfield-hue),
    var(--zbk-color-butterfield-saturation),
    98%
  );
  --zbk-color-butterfield-100: hsl(
    var(--zbk-color-butterfield-hue),
    var(--zbk-color-butterfield-saturation),
    93%
  );
  --zbk-color-butterfield-200: hsl(
    var(--zbk-color-butterfield-hue),
    var(--zbk-color-butterfield-saturation),
    87%
  );
  --zbk-color-butterfield-300: hsl(
    var(--zbk-color-butterfield-hue),
    var(--zbk-color-butterfield-saturation),
    78%
  );
  --zbk-color-butterfield-400: hsl(
    var(--zbk-color-butterfield-hue),
    var(--zbk-color-butterfield-saturation),
    69%
  );
  --zbk-color-butterfield-500: hsl(
    var(--zbk-color-butterfield-hue),
    var(--zbk-color-butterfield-saturation),
    58%
  );
  --zbk-color-butterfield-600: hsl(
    var(--zbk-color-butterfield-hue),
    var(--zbk-color-butterfield-saturation),
    48%
  );
  --zbk-color-butterfield-700: hsl(
    var(--zbk-color-butterfield-hue),
    var(--zbk-color-butterfield-saturation),
    36%
  );
  --zbk-color-butterfield-800: hsl(
    var(--zbk-color-butterfield-hue),
    var(--zbk-color-butterfield-saturation),
    26%
  );
  --zbk-color-butterfield-900: hsl(
    var(--zbk-color-butterfield-hue),
    var(--zbk-color-butterfield-saturation),
    18%
  );
  --zbk-color-butterfield-950: hsl(
    var(--zbk-color-butterfield-hue),
    var(--zbk-color-butterfield-saturation),
    10%
  );
}
@layer utilities {
  .ink-butterfield-50 {
    color: var(--zbk-color-butterfield-50);
  }
  [class~="focus:ink-butterfield-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-butterfield-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-butterfield-50:hover {
      color: var(--zbk-color-butterfield-50);
    }
  }
  [class~="active:ink-butterfield-50"]:active {
    color: var(--zbk-color-butterfield-50);
  }
  [class~="disabled:ink-butterfield-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-butterfield-50);
  }
  .ink-butterfield-100 {
    color: var(--zbk-color-butterfield-100);
  }
  [class~="focus:ink-butterfield-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-butterfield-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-butterfield-100:hover {
      color: var(--zbk-color-butterfield-100);
    }
  }
  [class~="active:ink-butterfield-100"]:active {
    color: var(--zbk-color-butterfield-100);
  }
  [class~="disabled:ink-butterfield-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-butterfield-100);
  }
  .ink-butterfield-200 {
    color: var(--zbk-color-butterfield-200);
  }
  [class~="focus:ink-butterfield-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-butterfield-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-butterfield-200:hover {
      color: var(--zbk-color-butterfield-200);
    }
  }
  [class~="active:ink-butterfield-200"]:active {
    color: var(--zbk-color-butterfield-200);
  }
  [class~="disabled:ink-butterfield-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-butterfield-200);
  }
  .ink-butterfield-300 {
    color: var(--zbk-color-butterfield-300);
  }
  [class~="focus:ink-butterfield-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-butterfield-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-butterfield-300:hover {
      color: var(--zbk-color-butterfield-300);
    }
  }
  [class~="active:ink-butterfield-300"]:active {
    color: var(--zbk-color-butterfield-300);
  }
  [class~="disabled:ink-butterfield-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-butterfield-300);
  }
  .ink-butterfield-400 {
    color: var(--zbk-color-butterfield-400);
  }
  [class~="focus:ink-butterfield-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-butterfield-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-butterfield-400:hover {
      color: var(--zbk-color-butterfield-400);
    }
  }
  [class~="active:ink-butterfield-400"]:active {
    color: var(--zbk-color-butterfield-400);
  }
  [class~="disabled:ink-butterfield-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-butterfield-400);
  }
  .ink-butterfield-500 {
    color: var(--zbk-color-butterfield-500);
  }
  [class~="focus:ink-butterfield-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-butterfield-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-butterfield-500:hover {
      color: var(--zbk-color-butterfield-500);
    }
  }
  [class~="active:ink-butterfield-500"]:active {
    color: var(--zbk-color-butterfield-500);
  }
  [class~="disabled:ink-butterfield-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-butterfield-500);
  }
  .ink-butterfield-600 {
    color: var(--zbk-color-butterfield-600);
  }
  [class~="focus:ink-butterfield-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-butterfield-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-butterfield-600:hover {
      color: var(--zbk-color-butterfield-600);
    }
  }
  [class~="active:ink-butterfield-600"]:active {
    color: var(--zbk-color-butterfield-600);
  }
  [class~="disabled:ink-butterfield-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-butterfield-600);
  }
  .ink-butterfield-700 {
    color: var(--zbk-color-butterfield-700);
  }
  [class~="focus:ink-butterfield-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-butterfield-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-butterfield-700:hover {
      color: var(--zbk-color-butterfield-700);
    }
  }
  [class~="active:ink-butterfield-700"]:active {
    color: var(--zbk-color-butterfield-700);
  }
  [class~="disabled:ink-butterfield-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-butterfield-700);
  }
  .ink-butterfield-800 {
    color: var(--zbk-color-butterfield-800);
  }
  [class~="focus:ink-butterfield-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-butterfield-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-butterfield-800:hover {
      color: var(--zbk-color-butterfield-800);
    }
  }
  [class~="active:ink-butterfield-800"]:active {
    color: var(--zbk-color-butterfield-800);
  }
  [class~="disabled:ink-butterfield-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-butterfield-800);
  }
  .ink-butterfield-900 {
    color: var(--zbk-color-butterfield-900);
  }
  [class~="focus:ink-butterfield-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-butterfield-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-butterfield-900:hover {
      color: var(--zbk-color-butterfield-900);
    }
  }
  [class~="active:ink-butterfield-900"]:active {
    color: var(--zbk-color-butterfield-900);
  }
  [class~="disabled:ink-butterfield-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-butterfield-900);
  }
  .ink-butterfield-950 {
    color: var(--zbk-color-butterfield-950);
  }
  [class~="focus:ink-butterfield-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-butterfield-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-butterfield-950:hover {
      color: var(--zbk-color-butterfield-950);
    }
  }
  [class~="active:ink-butterfield-950"]:active {
    color: var(--zbk-color-butterfield-950);
  }
  [class~="disabled:ink-butterfield-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-butterfield-950);
  }
  .canvas-butterfield-50 {
    background-color: var(--zbk-color-butterfield-50);
  }
  [class~="focus:canvas-butterfield-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-butterfield-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-butterfield-50:hover {
      background-color: var(--zbk-color-butterfield-50);
    }
  }
  [class~="active:canvas-butterfield-50"]:active {
    background-color: var(--zbk-color-butterfield-50);
  }
  [class~="disabled:canvas-butterfield-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-butterfield-50);
  }
  .canvas-butterfield-100 {
    background-color: var(--zbk-color-butterfield-100);
  }
  [class~="focus:canvas-butterfield-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-butterfield-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-butterfield-100:hover {
      background-color: var(--zbk-color-butterfield-100);
    }
  }
  [class~="active:canvas-butterfield-100"]:active {
    background-color: var(--zbk-color-butterfield-100);
  }
  [class~="disabled:canvas-butterfield-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-butterfield-100);
  }
  .canvas-butterfield-200 {
    background-color: var(--zbk-color-butterfield-200);
  }
  [class~="focus:canvas-butterfield-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-butterfield-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-butterfield-200:hover {
      background-color: var(--zbk-color-butterfield-200);
    }
  }
  [class~="active:canvas-butterfield-200"]:active {
    background-color: var(--zbk-color-butterfield-200);
  }
  [class~="disabled:canvas-butterfield-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-butterfield-200);
  }
  .canvas-butterfield-300 {
    background-color: var(--zbk-color-butterfield-300);
  }
  [class~="focus:canvas-butterfield-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-butterfield-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-butterfield-300:hover {
      background-color: var(--zbk-color-butterfield-300);
    }
  }
  [class~="active:canvas-butterfield-300"]:active {
    background-color: var(--zbk-color-butterfield-300);
  }
  [class~="disabled:canvas-butterfield-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-butterfield-300);
  }
  .canvas-butterfield-400 {
    background-color: var(--zbk-color-butterfield-400);
  }
  [class~="focus:canvas-butterfield-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-butterfield-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-butterfield-400:hover {
      background-color: var(--zbk-color-butterfield-400);
    }
  }
  [class~="active:canvas-butterfield-400"]:active {
    background-color: var(--zbk-color-butterfield-400);
  }
  [class~="disabled:canvas-butterfield-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-butterfield-400);
  }
  .canvas-butterfield-500 {
    background-color: var(--zbk-color-butterfield-500);
  }
  [class~="focus:canvas-butterfield-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-butterfield-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-butterfield-500:hover {
      background-color: var(--zbk-color-butterfield-500);
    }
  }
  [class~="active:canvas-butterfield-500"]:active {
    background-color: var(--zbk-color-butterfield-500);
  }
  [class~="disabled:canvas-butterfield-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-butterfield-500);
  }
  .canvas-butterfield-600 {
    background-color: var(--zbk-color-butterfield-600);
  }
  [class~="focus:canvas-butterfield-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-butterfield-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-butterfield-600:hover {
      background-color: var(--zbk-color-butterfield-600);
    }
  }
  [class~="active:canvas-butterfield-600"]:active {
    background-color: var(--zbk-color-butterfield-600);
  }
  [class~="disabled:canvas-butterfield-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-butterfield-600);
  }
  .canvas-butterfield-700 {
    background-color: var(--zbk-color-butterfield-700);
  }
  [class~="focus:canvas-butterfield-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-butterfield-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-butterfield-700:hover {
      background-color: var(--zbk-color-butterfield-700);
    }
  }
  [class~="active:canvas-butterfield-700"]:active {
    background-color: var(--zbk-color-butterfield-700);
  }
  [class~="disabled:canvas-butterfield-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-butterfield-700);
  }
  .canvas-butterfield-800 {
    background-color: var(--zbk-color-butterfield-800);
  }
  [class~="focus:canvas-butterfield-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-butterfield-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-butterfield-800:hover {
      background-color: var(--zbk-color-butterfield-800);
    }
  }
  [class~="active:canvas-butterfield-800"]:active {
    background-color: var(--zbk-color-butterfield-800);
  }
  [class~="disabled:canvas-butterfield-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-butterfield-800);
  }
  .canvas-butterfield-900 {
    background-color: var(--zbk-color-butterfield-900);
  }
  [class~="focus:canvas-butterfield-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-butterfield-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-butterfield-900:hover {
      background-color: var(--zbk-color-butterfield-900);
    }
  }
  [class~="active:canvas-butterfield-900"]:active {
    background-color: var(--zbk-color-butterfield-900);
  }
  [class~="disabled:canvas-butterfield-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-butterfield-900);
  }
  .canvas-butterfield-950 {
    background-color: var(--zbk-color-butterfield-950);
  }
  [class~="focus:canvas-butterfield-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-butterfield-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-butterfield-950:hover {
      background-color: var(--zbk-color-butterfield-950);
    }
  }
  [class~="active:canvas-butterfield-950"]:active {
    background-color: var(--zbk-color-butterfield-950);
  }
  [class~="disabled:canvas-butterfield-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-butterfield-950);
  }
  .border-butterfield-50 {
    border-color: var(--zbk-color-butterfield-50);
  }
  [class~="focus:border-butterfield-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-butterfield-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-butterfield-50:hover {
      border-color: var(--zbk-color-butterfield-50);
    }
  }
  [class~="active:border-butterfield-50"]:active {
    border-color: var(--zbk-color-butterfield-50);
  }
  [class~="disabled:border-butterfield-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-butterfield-50);
  }
  .border-butterfield-100 {
    border-color: var(--zbk-color-butterfield-100);
  }
  [class~="focus:border-butterfield-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-butterfield-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-butterfield-100:hover {
      border-color: var(--zbk-color-butterfield-100);
    }
  }
  [class~="active:border-butterfield-100"]:active {
    border-color: var(--zbk-color-butterfield-100);
  }
  [class~="disabled:border-butterfield-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-butterfield-100);
  }
  .border-butterfield-200 {
    border-color: var(--zbk-color-butterfield-200);
  }
  [class~="focus:border-butterfield-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-butterfield-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-butterfield-200:hover {
      border-color: var(--zbk-color-butterfield-200);
    }
  }
  [class~="active:border-butterfield-200"]:active {
    border-color: var(--zbk-color-butterfield-200);
  }
  [class~="disabled:border-butterfield-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-butterfield-200);
  }
  .border-butterfield-300 {
    border-color: var(--zbk-color-butterfield-300);
  }
  [class~="focus:border-butterfield-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-butterfield-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-butterfield-300:hover {
      border-color: var(--zbk-color-butterfield-300);
    }
  }
  [class~="active:border-butterfield-300"]:active {
    border-color: var(--zbk-color-butterfield-300);
  }
  [class~="disabled:border-butterfield-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-butterfield-300);
  }
  .border-butterfield-400 {
    border-color: var(--zbk-color-butterfield-400);
  }
  [class~="focus:border-butterfield-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-butterfield-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-butterfield-400:hover {
      border-color: var(--zbk-color-butterfield-400);
    }
  }
  [class~="active:border-butterfield-400"]:active {
    border-color: var(--zbk-color-butterfield-400);
  }
  [class~="disabled:border-butterfield-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-butterfield-400);
  }
  .border-butterfield-500 {
    border-color: var(--zbk-color-butterfield-500);
  }
  [class~="focus:border-butterfield-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-butterfield-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-butterfield-500:hover {
      border-color: var(--zbk-color-butterfield-500);
    }
  }
  [class~="active:border-butterfield-500"]:active {
    border-color: var(--zbk-color-butterfield-500);
  }
  [class~="disabled:border-butterfield-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-butterfield-500);
  }
  .border-butterfield-600 {
    border-color: var(--zbk-color-butterfield-600);
  }
  [class~="focus:border-butterfield-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-butterfield-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-butterfield-600:hover {
      border-color: var(--zbk-color-butterfield-600);
    }
  }
  [class~="active:border-butterfield-600"]:active {
    border-color: var(--zbk-color-butterfield-600);
  }
  [class~="disabled:border-butterfield-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-butterfield-600);
  }
  .border-butterfield-700 {
    border-color: var(--zbk-color-butterfield-700);
  }
  [class~="focus:border-butterfield-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-butterfield-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-butterfield-700:hover {
      border-color: var(--zbk-color-butterfield-700);
    }
  }
  [class~="active:border-butterfield-700"]:active {
    border-color: var(--zbk-color-butterfield-700);
  }
  [class~="disabled:border-butterfield-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-butterfield-700);
  }
  .border-butterfield-800 {
    border-color: var(--zbk-color-butterfield-800);
  }
  [class~="focus:border-butterfield-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-butterfield-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-butterfield-800:hover {
      border-color: var(--zbk-color-butterfield-800);
    }
  }
  [class~="active:border-butterfield-800"]:active {
    border-color: var(--zbk-color-butterfield-800);
  }
  [class~="disabled:border-butterfield-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-butterfield-800);
  }
  .border-butterfield-900 {
    border-color: var(--zbk-color-butterfield-900);
  }
  [class~="focus:border-butterfield-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-butterfield-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-butterfield-900:hover {
      border-color: var(--zbk-color-butterfield-900);
    }
  }
  [class~="active:border-butterfield-900"]:active {
    border-color: var(--zbk-color-butterfield-900);
  }
  [class~="disabled:border-butterfield-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-butterfield-900);
  }
  .border-butterfield-950 {
    border-color: var(--zbk-color-butterfield-950);
  }
  [class~="focus:border-butterfield-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-butterfield-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-butterfield-950:hover {
      border-color: var(--zbk-color-butterfield-950);
    }
  }
  [class~="active:border-butterfield-950"]:active {
    border-color: var(--zbk-color-butterfield-950);
  }
  [class~="disabled:border-butterfield-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-butterfield-950);
  }
  .fill-butterfield-50 {
    fill: var(--zbk-color-butterfield-50);
  }
  [class~="focus:fill-butterfield-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-butterfield-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-butterfield-50:hover {
      fill: var(--zbk-color-butterfield-50);
    }
  }
  [class~="active:fill-butterfield-50"]:active {
    fill: var(--zbk-color-butterfield-50);
  }
  [class~="disabled:fill-butterfield-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-butterfield-50);
  }
  .fill-butterfield-100 {
    fill: var(--zbk-color-butterfield-100);
  }
  [class~="focus:fill-butterfield-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-butterfield-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-butterfield-100:hover {
      fill: var(--zbk-color-butterfield-100);
    }
  }
  [class~="active:fill-butterfield-100"]:active {
    fill: var(--zbk-color-butterfield-100);
  }
  [class~="disabled:fill-butterfield-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-butterfield-100);
  }
  .fill-butterfield-200 {
    fill: var(--zbk-color-butterfield-200);
  }
  [class~="focus:fill-butterfield-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-butterfield-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-butterfield-200:hover {
      fill: var(--zbk-color-butterfield-200);
    }
  }
  [class~="active:fill-butterfield-200"]:active {
    fill: var(--zbk-color-butterfield-200);
  }
  [class~="disabled:fill-butterfield-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-butterfield-200);
  }
  .fill-butterfield-300 {
    fill: var(--zbk-color-butterfield-300);
  }
  [class~="focus:fill-butterfield-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-butterfield-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-butterfield-300:hover {
      fill: var(--zbk-color-butterfield-300);
    }
  }
  [class~="active:fill-butterfield-300"]:active {
    fill: var(--zbk-color-butterfield-300);
  }
  [class~="disabled:fill-butterfield-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-butterfield-300);
  }
  .fill-butterfield-400 {
    fill: var(--zbk-color-butterfield-400);
  }
  [class~="focus:fill-butterfield-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-butterfield-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-butterfield-400:hover {
      fill: var(--zbk-color-butterfield-400);
    }
  }
  [class~="active:fill-butterfield-400"]:active {
    fill: var(--zbk-color-butterfield-400);
  }
  [class~="disabled:fill-butterfield-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-butterfield-400);
  }
  .fill-butterfield-500 {
    fill: var(--zbk-color-butterfield-500);
  }
  [class~="focus:fill-butterfield-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-butterfield-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-butterfield-500:hover {
      fill: var(--zbk-color-butterfield-500);
    }
  }
  [class~="active:fill-butterfield-500"]:active {
    fill: var(--zbk-color-butterfield-500);
  }
  [class~="disabled:fill-butterfield-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-butterfield-500);
  }
  .fill-butterfield-600 {
    fill: var(--zbk-color-butterfield-600);
  }
  [class~="focus:fill-butterfield-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-butterfield-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-butterfield-600:hover {
      fill: var(--zbk-color-butterfield-600);
    }
  }
  [class~="active:fill-butterfield-600"]:active {
    fill: var(--zbk-color-butterfield-600);
  }
  [class~="disabled:fill-butterfield-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-butterfield-600);
  }
  .fill-butterfield-700 {
    fill: var(--zbk-color-butterfield-700);
  }
  [class~="focus:fill-butterfield-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-butterfield-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-butterfield-700:hover {
      fill: var(--zbk-color-butterfield-700);
    }
  }
  [class~="active:fill-butterfield-700"]:active {
    fill: var(--zbk-color-butterfield-700);
  }
  [class~="disabled:fill-butterfield-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-butterfield-700);
  }
  .fill-butterfield-800 {
    fill: var(--zbk-color-butterfield-800);
  }
  [class~="focus:fill-butterfield-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-butterfield-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-butterfield-800:hover {
      fill: var(--zbk-color-butterfield-800);
    }
  }
  [class~="active:fill-butterfield-800"]:active {
    fill: var(--zbk-color-butterfield-800);
  }
  [class~="disabled:fill-butterfield-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-butterfield-800);
  }
  .fill-butterfield-900 {
    fill: var(--zbk-color-butterfield-900);
  }
  [class~="focus:fill-butterfield-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-butterfield-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-butterfield-900:hover {
      fill: var(--zbk-color-butterfield-900);
    }
  }
  [class~="active:fill-butterfield-900"]:active {
    fill: var(--zbk-color-butterfield-900);
  }
  [class~="disabled:fill-butterfield-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-butterfield-900);
  }
  .fill-butterfield-950 {
    fill: var(--zbk-color-butterfield-950);
  }
  [class~="focus:fill-butterfield-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-butterfield-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-butterfield-950:hover {
      fill: var(--zbk-color-butterfield-950);
    }
  }
  [class~="active:fill-butterfield-950"]:active {
    fill: var(--zbk-color-butterfield-950);
  }
  [class~="disabled:fill-butterfield-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-butterfield-950);
  }
}
:root {
  --zbk-color-charcoal-hue: 210;
  --zbk-color-charcoal-saturation: 12%;
  --zbk-color-charcoal-50: hsl(
    var(--zbk-color-charcoal-hue),
    var(--zbk-color-charcoal-saturation),
    98%
  );
  --zbk-color-charcoal-100: hsl(
    var(--zbk-color-charcoal-hue),
    var(--zbk-color-charcoal-saturation),
    93%
  );
  --zbk-color-charcoal-200: hsl(
    var(--zbk-color-charcoal-hue),
    var(--zbk-color-charcoal-saturation),
    87%
  );
  --zbk-color-charcoal-300: hsl(
    var(--zbk-color-charcoal-hue),
    var(--zbk-color-charcoal-saturation),
    78%
  );
  --zbk-color-charcoal-400: hsl(
    var(--zbk-color-charcoal-hue),
    var(--zbk-color-charcoal-saturation),
    69%
  );
  --zbk-color-charcoal-500: hsl(
    var(--zbk-color-charcoal-hue),
    var(--zbk-color-charcoal-saturation),
    58%
  );
  --zbk-color-charcoal-600: hsl(
    var(--zbk-color-charcoal-hue),
    var(--zbk-color-charcoal-saturation),
    48%
  );
  --zbk-color-charcoal-700: hsl(
    var(--zbk-color-charcoal-hue),
    var(--zbk-color-charcoal-saturation),
    36%
  );
  --zbk-color-charcoal-800: hsl(
    var(--zbk-color-charcoal-hue),
    var(--zbk-color-charcoal-saturation),
    26%
  );
  --zbk-color-charcoal-900: hsl(
    var(--zbk-color-charcoal-hue),
    var(--zbk-color-charcoal-saturation),
    18%
  );
  --zbk-color-charcoal-950: hsl(
    var(--zbk-color-charcoal-hue),
    var(--zbk-color-charcoal-saturation),
    10%
  );
}
@layer utilities {
  .ink-charcoal-50 {
    color: var(--zbk-color-charcoal-50);
  }
  [class~="focus:ink-charcoal-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-charcoal-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-charcoal-50:hover {
      color: var(--zbk-color-charcoal-50);
    }
  }
  [class~="active:ink-charcoal-50"]:active {
    color: var(--zbk-color-charcoal-50);
  }
  [class~="disabled:ink-charcoal-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-charcoal-50);
  }
  .ink-charcoal-100 {
    color: var(--zbk-color-charcoal-100);
  }
  [class~="focus:ink-charcoal-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-charcoal-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-charcoal-100:hover {
      color: var(--zbk-color-charcoal-100);
    }
  }
  [class~="active:ink-charcoal-100"]:active {
    color: var(--zbk-color-charcoal-100);
  }
  [class~="disabled:ink-charcoal-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-charcoal-100);
  }
  .ink-charcoal-200 {
    color: var(--zbk-color-charcoal-200);
  }
  [class~="focus:ink-charcoal-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-charcoal-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-charcoal-200:hover {
      color: var(--zbk-color-charcoal-200);
    }
  }
  [class~="active:ink-charcoal-200"]:active {
    color: var(--zbk-color-charcoal-200);
  }
  [class~="disabled:ink-charcoal-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-charcoal-200);
  }
  .ink-charcoal-300 {
    color: var(--zbk-color-charcoal-300);
  }
  [class~="focus:ink-charcoal-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-charcoal-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-charcoal-300:hover {
      color: var(--zbk-color-charcoal-300);
    }
  }
  [class~="active:ink-charcoal-300"]:active {
    color: var(--zbk-color-charcoal-300);
  }
  [class~="disabled:ink-charcoal-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-charcoal-300);
  }
  .ink-charcoal-400 {
    color: var(--zbk-color-charcoal-400);
  }
  [class~="focus:ink-charcoal-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-charcoal-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-charcoal-400:hover {
      color: var(--zbk-color-charcoal-400);
    }
  }
  [class~="active:ink-charcoal-400"]:active {
    color: var(--zbk-color-charcoal-400);
  }
  [class~="disabled:ink-charcoal-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-charcoal-400);
  }
  .ink-charcoal-500 {
    color: var(--zbk-color-charcoal-500);
  }
  [class~="focus:ink-charcoal-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-charcoal-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-charcoal-500:hover {
      color: var(--zbk-color-charcoal-500);
    }
  }
  [class~="active:ink-charcoal-500"]:active {
    color: var(--zbk-color-charcoal-500);
  }
  [class~="disabled:ink-charcoal-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-charcoal-500);
  }
  .ink-charcoal-600 {
    color: var(--zbk-color-charcoal-600);
  }
  [class~="focus:ink-charcoal-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-charcoal-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-charcoal-600:hover {
      color: var(--zbk-color-charcoal-600);
    }
  }
  [class~="active:ink-charcoal-600"]:active {
    color: var(--zbk-color-charcoal-600);
  }
  [class~="disabled:ink-charcoal-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-charcoal-600);
  }
  .ink-charcoal-700 {
    color: var(--zbk-color-charcoal-700);
  }
  [class~="focus:ink-charcoal-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-charcoal-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-charcoal-700:hover {
      color: var(--zbk-color-charcoal-700);
    }
  }
  [class~="active:ink-charcoal-700"]:active {
    color: var(--zbk-color-charcoal-700);
  }
  [class~="disabled:ink-charcoal-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-charcoal-700);
  }
  .ink-charcoal-800 {
    color: var(--zbk-color-charcoal-800);
  }
  [class~="focus:ink-charcoal-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-charcoal-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-charcoal-800:hover {
      color: var(--zbk-color-charcoal-800);
    }
  }
  [class~="active:ink-charcoal-800"]:active {
    color: var(--zbk-color-charcoal-800);
  }
  [class~="disabled:ink-charcoal-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-charcoal-800);
  }
  .ink-charcoal-900 {
    color: var(--zbk-color-charcoal-900);
  }
  [class~="focus:ink-charcoal-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-charcoal-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-charcoal-900:hover {
      color: var(--zbk-color-charcoal-900);
    }
  }
  [class~="active:ink-charcoal-900"]:active {
    color: var(--zbk-color-charcoal-900);
  }
  [class~="disabled:ink-charcoal-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-charcoal-900);
  }
  .ink-charcoal-950 {
    color: var(--zbk-color-charcoal-950);
  }
  [class~="focus:ink-charcoal-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-charcoal-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-charcoal-950:hover {
      color: var(--zbk-color-charcoal-950);
    }
  }
  [class~="active:ink-charcoal-950"]:active {
    color: var(--zbk-color-charcoal-950);
  }
  [class~="disabled:ink-charcoal-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-charcoal-950);
  }
  .canvas-charcoal-50 {
    background-color: var(--zbk-color-charcoal-50);
  }
  [class~="focus:canvas-charcoal-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-charcoal-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-charcoal-50:hover {
      background-color: var(--zbk-color-charcoal-50);
    }
  }
  [class~="active:canvas-charcoal-50"]:active {
    background-color: var(--zbk-color-charcoal-50);
  }
  [class~="disabled:canvas-charcoal-50"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-charcoal-50);
  }
  .canvas-charcoal-100 {
    background-color: var(--zbk-color-charcoal-100);
  }
  [class~="focus:canvas-charcoal-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-charcoal-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-charcoal-100:hover {
      background-color: var(--zbk-color-charcoal-100);
    }
  }
  [class~="active:canvas-charcoal-100"]:active {
    background-color: var(--zbk-color-charcoal-100);
  }
  [class~="disabled:canvas-charcoal-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-charcoal-100);
  }
  .canvas-charcoal-200 {
    background-color: var(--zbk-color-charcoal-200);
  }
  [class~="focus:canvas-charcoal-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-charcoal-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-charcoal-200:hover {
      background-color: var(--zbk-color-charcoal-200);
    }
  }
  [class~="active:canvas-charcoal-200"]:active {
    background-color: var(--zbk-color-charcoal-200);
  }
  [class~="disabled:canvas-charcoal-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-charcoal-200);
  }
  .canvas-charcoal-300 {
    background-color: var(--zbk-color-charcoal-300);
  }
  [class~="focus:canvas-charcoal-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-charcoal-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-charcoal-300:hover {
      background-color: var(--zbk-color-charcoal-300);
    }
  }
  [class~="active:canvas-charcoal-300"]:active {
    background-color: var(--zbk-color-charcoal-300);
  }
  [class~="disabled:canvas-charcoal-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-charcoal-300);
  }
  .canvas-charcoal-400 {
    background-color: var(--zbk-color-charcoal-400);
  }
  [class~="focus:canvas-charcoal-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-charcoal-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-charcoal-400:hover {
      background-color: var(--zbk-color-charcoal-400);
    }
  }
  [class~="active:canvas-charcoal-400"]:active {
    background-color: var(--zbk-color-charcoal-400);
  }
  [class~="disabled:canvas-charcoal-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-charcoal-400);
  }
  .canvas-charcoal-500 {
    background-color: var(--zbk-color-charcoal-500);
  }
  [class~="focus:canvas-charcoal-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-charcoal-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-charcoal-500:hover {
      background-color: var(--zbk-color-charcoal-500);
    }
  }
  [class~="active:canvas-charcoal-500"]:active {
    background-color: var(--zbk-color-charcoal-500);
  }
  [class~="disabled:canvas-charcoal-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-charcoal-500);
  }
  .canvas-charcoal-600 {
    background-color: var(--zbk-color-charcoal-600);
  }
  [class~="focus:canvas-charcoal-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-charcoal-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-charcoal-600:hover {
      background-color: var(--zbk-color-charcoal-600);
    }
  }
  [class~="active:canvas-charcoal-600"]:active {
    background-color: var(--zbk-color-charcoal-600);
  }
  [class~="disabled:canvas-charcoal-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-charcoal-600);
  }
  .canvas-charcoal-700 {
    background-color: var(--zbk-color-charcoal-700);
  }
  [class~="focus:canvas-charcoal-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-charcoal-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-charcoal-700:hover {
      background-color: var(--zbk-color-charcoal-700);
    }
  }
  [class~="active:canvas-charcoal-700"]:active {
    background-color: var(--zbk-color-charcoal-700);
  }
  [class~="disabled:canvas-charcoal-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-charcoal-700);
  }
  .canvas-charcoal-800 {
    background-color: var(--zbk-color-charcoal-800);
  }
  [class~="focus:canvas-charcoal-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-charcoal-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-charcoal-800:hover {
      background-color: var(--zbk-color-charcoal-800);
    }
  }
  [class~="active:canvas-charcoal-800"]:active {
    background-color: var(--zbk-color-charcoal-800);
  }
  [class~="disabled:canvas-charcoal-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-charcoal-800);
  }
  .canvas-charcoal-900 {
    background-color: var(--zbk-color-charcoal-900);
  }
  [class~="focus:canvas-charcoal-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-charcoal-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-charcoal-900:hover {
      background-color: var(--zbk-color-charcoal-900);
    }
  }
  [class~="active:canvas-charcoal-900"]:active {
    background-color: var(--zbk-color-charcoal-900);
  }
  [class~="disabled:canvas-charcoal-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-charcoal-900);
  }
  .canvas-charcoal-950 {
    background-color: var(--zbk-color-charcoal-950);
  }
  [class~="focus:canvas-charcoal-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-charcoal-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-charcoal-950:hover {
      background-color: var(--zbk-color-charcoal-950);
    }
  }
  [class~="active:canvas-charcoal-950"]:active {
    background-color: var(--zbk-color-charcoal-950);
  }
  [class~="disabled:canvas-charcoal-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-charcoal-950);
  }
  .border-charcoal-50 {
    border-color: var(--zbk-color-charcoal-50);
  }
  [class~="focus:border-charcoal-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-charcoal-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-charcoal-50:hover {
      border-color: var(--zbk-color-charcoal-50);
    }
  }
  [class~="active:border-charcoal-50"]:active {
    border-color: var(--zbk-color-charcoal-50);
  }
  [class~="disabled:border-charcoal-50"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-charcoal-50);
  }
  .border-charcoal-100 {
    border-color: var(--zbk-color-charcoal-100);
  }
  [class~="focus:border-charcoal-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-charcoal-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-charcoal-100:hover {
      border-color: var(--zbk-color-charcoal-100);
    }
  }
  [class~="active:border-charcoal-100"]:active {
    border-color: var(--zbk-color-charcoal-100);
  }
  [class~="disabled:border-charcoal-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-charcoal-100);
  }
  .border-charcoal-200 {
    border-color: var(--zbk-color-charcoal-200);
  }
  [class~="focus:border-charcoal-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-charcoal-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-charcoal-200:hover {
      border-color: var(--zbk-color-charcoal-200);
    }
  }
  [class~="active:border-charcoal-200"]:active {
    border-color: var(--zbk-color-charcoal-200);
  }
  [class~="disabled:border-charcoal-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-charcoal-200);
  }
  .border-charcoal-300 {
    border-color: var(--zbk-color-charcoal-300);
  }
  [class~="focus:border-charcoal-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-charcoal-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-charcoal-300:hover {
      border-color: var(--zbk-color-charcoal-300);
    }
  }
  [class~="active:border-charcoal-300"]:active {
    border-color: var(--zbk-color-charcoal-300);
  }
  [class~="disabled:border-charcoal-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-charcoal-300);
  }
  .border-charcoal-400 {
    border-color: var(--zbk-color-charcoal-400);
  }
  [class~="focus:border-charcoal-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-charcoal-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-charcoal-400:hover {
      border-color: var(--zbk-color-charcoal-400);
    }
  }
  [class~="active:border-charcoal-400"]:active {
    border-color: var(--zbk-color-charcoal-400);
  }
  [class~="disabled:border-charcoal-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-charcoal-400);
  }
  .border-charcoal-500 {
    border-color: var(--zbk-color-charcoal-500);
  }
  [class~="focus:border-charcoal-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-charcoal-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-charcoal-500:hover {
      border-color: var(--zbk-color-charcoal-500);
    }
  }
  [class~="active:border-charcoal-500"]:active {
    border-color: var(--zbk-color-charcoal-500);
  }
  [class~="disabled:border-charcoal-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-charcoal-500);
  }
  .border-charcoal-600 {
    border-color: var(--zbk-color-charcoal-600);
  }
  [class~="focus:border-charcoal-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-charcoal-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-charcoal-600:hover {
      border-color: var(--zbk-color-charcoal-600);
    }
  }
  [class~="active:border-charcoal-600"]:active {
    border-color: var(--zbk-color-charcoal-600);
  }
  [class~="disabled:border-charcoal-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-charcoal-600);
  }
  .border-charcoal-700 {
    border-color: var(--zbk-color-charcoal-700);
  }
  [class~="focus:border-charcoal-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-charcoal-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-charcoal-700:hover {
      border-color: var(--zbk-color-charcoal-700);
    }
  }
  [class~="active:border-charcoal-700"]:active {
    border-color: var(--zbk-color-charcoal-700);
  }
  [class~="disabled:border-charcoal-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-charcoal-700);
  }
  .border-charcoal-800 {
    border-color: var(--zbk-color-charcoal-800);
  }
  [class~="focus:border-charcoal-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-charcoal-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-charcoal-800:hover {
      border-color: var(--zbk-color-charcoal-800);
    }
  }
  [class~="active:border-charcoal-800"]:active {
    border-color: var(--zbk-color-charcoal-800);
  }
  [class~="disabled:border-charcoal-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-charcoal-800);
  }
  .border-charcoal-900 {
    border-color: var(--zbk-color-charcoal-900);
  }
  [class~="focus:border-charcoal-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-charcoal-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-charcoal-900:hover {
      border-color: var(--zbk-color-charcoal-900);
    }
  }
  [class~="active:border-charcoal-900"]:active {
    border-color: var(--zbk-color-charcoal-900);
  }
  [class~="disabled:border-charcoal-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-charcoal-900);
  }
  .border-charcoal-950 {
    border-color: var(--zbk-color-charcoal-950);
  }
  [class~="focus:border-charcoal-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-charcoal-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-charcoal-950:hover {
      border-color: var(--zbk-color-charcoal-950);
    }
  }
  [class~="active:border-charcoal-950"]:active {
    border-color: var(--zbk-color-charcoal-950);
  }
  [class~="disabled:border-charcoal-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-charcoal-950);
  }
  .fill-charcoal-50 {
    fill: var(--zbk-color-charcoal-50);
  }
  [class~="focus:fill-charcoal-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-charcoal-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-charcoal-50:hover {
      fill: var(--zbk-color-charcoal-50);
    }
  }
  [class~="active:fill-charcoal-50"]:active {
    fill: var(--zbk-color-charcoal-50);
  }
  [class~="disabled:fill-charcoal-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-charcoal-50);
  }
  .fill-charcoal-100 {
    fill: var(--zbk-color-charcoal-100);
  }
  [class~="focus:fill-charcoal-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-charcoal-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-charcoal-100:hover {
      fill: var(--zbk-color-charcoal-100);
    }
  }
  [class~="active:fill-charcoal-100"]:active {
    fill: var(--zbk-color-charcoal-100);
  }
  [class~="disabled:fill-charcoal-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-charcoal-100);
  }
  .fill-charcoal-200 {
    fill: var(--zbk-color-charcoal-200);
  }
  [class~="focus:fill-charcoal-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-charcoal-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-charcoal-200:hover {
      fill: var(--zbk-color-charcoal-200);
    }
  }
  [class~="active:fill-charcoal-200"]:active {
    fill: var(--zbk-color-charcoal-200);
  }
  [class~="disabled:fill-charcoal-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-charcoal-200);
  }
  .fill-charcoal-300 {
    fill: var(--zbk-color-charcoal-300);
  }
  [class~="focus:fill-charcoal-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-charcoal-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-charcoal-300:hover {
      fill: var(--zbk-color-charcoal-300);
    }
  }
  [class~="active:fill-charcoal-300"]:active {
    fill: var(--zbk-color-charcoal-300);
  }
  [class~="disabled:fill-charcoal-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-charcoal-300);
  }
  .fill-charcoal-400 {
    fill: var(--zbk-color-charcoal-400);
  }
  [class~="focus:fill-charcoal-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-charcoal-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-charcoal-400:hover {
      fill: var(--zbk-color-charcoal-400);
    }
  }
  [class~="active:fill-charcoal-400"]:active {
    fill: var(--zbk-color-charcoal-400);
  }
  [class~="disabled:fill-charcoal-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-charcoal-400);
  }
  .fill-charcoal-500 {
    fill: var(--zbk-color-charcoal-500);
  }
  [class~="focus:fill-charcoal-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-charcoal-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-charcoal-500:hover {
      fill: var(--zbk-color-charcoal-500);
    }
  }
  [class~="active:fill-charcoal-500"]:active {
    fill: var(--zbk-color-charcoal-500);
  }
  [class~="disabled:fill-charcoal-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-charcoal-500);
  }
  .fill-charcoal-600 {
    fill: var(--zbk-color-charcoal-600);
  }
  [class~="focus:fill-charcoal-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-charcoal-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-charcoal-600:hover {
      fill: var(--zbk-color-charcoal-600);
    }
  }
  [class~="active:fill-charcoal-600"]:active {
    fill: var(--zbk-color-charcoal-600);
  }
  [class~="disabled:fill-charcoal-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-charcoal-600);
  }
  .fill-charcoal-700 {
    fill: var(--zbk-color-charcoal-700);
  }
  [class~="focus:fill-charcoal-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-charcoal-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-charcoal-700:hover {
      fill: var(--zbk-color-charcoal-700);
    }
  }
  [class~="active:fill-charcoal-700"]:active {
    fill: var(--zbk-color-charcoal-700);
  }
  [class~="disabled:fill-charcoal-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-charcoal-700);
  }
  .fill-charcoal-800 {
    fill: var(--zbk-color-charcoal-800);
  }
  [class~="focus:fill-charcoal-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-charcoal-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-charcoal-800:hover {
      fill: var(--zbk-color-charcoal-800);
    }
  }
  [class~="active:fill-charcoal-800"]:active {
    fill: var(--zbk-color-charcoal-800);
  }
  [class~="disabled:fill-charcoal-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-charcoal-800);
  }
  .fill-charcoal-900 {
    fill: var(--zbk-color-charcoal-900);
  }
  [class~="focus:fill-charcoal-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-charcoal-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-charcoal-900:hover {
      fill: var(--zbk-color-charcoal-900);
    }
  }
  [class~="active:fill-charcoal-900"]:active {
    fill: var(--zbk-color-charcoal-900);
  }
  [class~="disabled:fill-charcoal-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-charcoal-900);
  }
  .fill-charcoal-950 {
    fill: var(--zbk-color-charcoal-950);
  }
  [class~="focus:fill-charcoal-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-charcoal-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-charcoal-950:hover {
      fill: var(--zbk-color-charcoal-950);
    }
  }
  [class~="active:fill-charcoal-950"]:active {
    fill: var(--zbk-color-charcoal-950);
  }
  [class~="disabled:fill-charcoal-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-charcoal-950);
  }
}
:root {
  --zbk-color-cyan-hue: 190;
  --zbk-color-cyan-saturation: 72%;
  --zbk-color-cyan-50: hsl(
    var(--zbk-color-cyan-hue),
    var(--zbk-color-cyan-saturation),
    98%
  );
  --zbk-color-cyan-100: hsl(
    var(--zbk-color-cyan-hue),
    var(--zbk-color-cyan-saturation),
    93%
  );
  --zbk-color-cyan-200: hsl(
    var(--zbk-color-cyan-hue),
    var(--zbk-color-cyan-saturation),
    87%
  );
  --zbk-color-cyan-300: hsl(
    var(--zbk-color-cyan-hue),
    var(--zbk-color-cyan-saturation),
    78%
  );
  --zbk-color-cyan-400: hsl(
    var(--zbk-color-cyan-hue),
    var(--zbk-color-cyan-saturation),
    69%
  );
  --zbk-color-cyan-500: hsl(
    var(--zbk-color-cyan-hue),
    var(--zbk-color-cyan-saturation),
    58%
  );
  --zbk-color-cyan-600: hsl(
    var(--zbk-color-cyan-hue),
    var(--zbk-color-cyan-saturation),
    48%
  );
  --zbk-color-cyan-700: hsl(
    var(--zbk-color-cyan-hue),
    var(--zbk-color-cyan-saturation),
    36%
  );
  --zbk-color-cyan-800: hsl(
    var(--zbk-color-cyan-hue),
    var(--zbk-color-cyan-saturation),
    26%
  );
  --zbk-color-cyan-900: hsl(
    var(--zbk-color-cyan-hue),
    var(--zbk-color-cyan-saturation),
    18%
  );
  --zbk-color-cyan-950: hsl(
    var(--zbk-color-cyan-hue),
    var(--zbk-color-cyan-saturation),
    10%
  );
}
@layer utilities {
  .ink-cyan-50 {
    color: var(--zbk-color-cyan-50);
  }
  [class~="focus:ink-cyan-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-cyan-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-cyan-50:hover {
      color: var(--zbk-color-cyan-50);
    }
  }
  [class~="active:ink-cyan-50"]:active {
    color: var(--zbk-color-cyan-50);
  }
  [class~="disabled:ink-cyan-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-cyan-50);
  }
  .ink-cyan-100 {
    color: var(--zbk-color-cyan-100);
  }
  [class~="focus:ink-cyan-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-cyan-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-cyan-100:hover {
      color: var(--zbk-color-cyan-100);
    }
  }
  [class~="active:ink-cyan-100"]:active {
    color: var(--zbk-color-cyan-100);
  }
  [class~="disabled:ink-cyan-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-cyan-100);
  }
  .ink-cyan-200 {
    color: var(--zbk-color-cyan-200);
  }
  [class~="focus:ink-cyan-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-cyan-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-cyan-200:hover {
      color: var(--zbk-color-cyan-200);
    }
  }
  [class~="active:ink-cyan-200"]:active {
    color: var(--zbk-color-cyan-200);
  }
  [class~="disabled:ink-cyan-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-cyan-200);
  }
  .ink-cyan-300 {
    color: var(--zbk-color-cyan-300);
  }
  [class~="focus:ink-cyan-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-cyan-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-cyan-300:hover {
      color: var(--zbk-color-cyan-300);
    }
  }
  [class~="active:ink-cyan-300"]:active {
    color: var(--zbk-color-cyan-300);
  }
  [class~="disabled:ink-cyan-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-cyan-300);
  }
  .ink-cyan-400 {
    color: var(--zbk-color-cyan-400);
  }
  [class~="focus:ink-cyan-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-cyan-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-cyan-400:hover {
      color: var(--zbk-color-cyan-400);
    }
  }
  [class~="active:ink-cyan-400"]:active {
    color: var(--zbk-color-cyan-400);
  }
  [class~="disabled:ink-cyan-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-cyan-400);
  }
  .ink-cyan-500 {
    color: var(--zbk-color-cyan-500);
  }
  [class~="focus:ink-cyan-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-cyan-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-cyan-500:hover {
      color: var(--zbk-color-cyan-500);
    }
  }
  [class~="active:ink-cyan-500"]:active {
    color: var(--zbk-color-cyan-500);
  }
  [class~="disabled:ink-cyan-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-cyan-500);
  }
  .ink-cyan-600 {
    color: var(--zbk-color-cyan-600);
  }
  [class~="focus:ink-cyan-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-cyan-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-cyan-600:hover {
      color: var(--zbk-color-cyan-600);
    }
  }
  [class~="active:ink-cyan-600"]:active {
    color: var(--zbk-color-cyan-600);
  }
  [class~="disabled:ink-cyan-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-cyan-600);
  }
  .ink-cyan-700 {
    color: var(--zbk-color-cyan-700);
  }
  [class~="focus:ink-cyan-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-cyan-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-cyan-700:hover {
      color: var(--zbk-color-cyan-700);
    }
  }
  [class~="active:ink-cyan-700"]:active {
    color: var(--zbk-color-cyan-700);
  }
  [class~="disabled:ink-cyan-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-cyan-700);
  }
  .ink-cyan-800 {
    color: var(--zbk-color-cyan-800);
  }
  [class~="focus:ink-cyan-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-cyan-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-cyan-800:hover {
      color: var(--zbk-color-cyan-800);
    }
  }
  [class~="active:ink-cyan-800"]:active {
    color: var(--zbk-color-cyan-800);
  }
  [class~="disabled:ink-cyan-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-cyan-800);
  }
  .ink-cyan-900 {
    color: var(--zbk-color-cyan-900);
  }
  [class~="focus:ink-cyan-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-cyan-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-cyan-900:hover {
      color: var(--zbk-color-cyan-900);
    }
  }
  [class~="active:ink-cyan-900"]:active {
    color: var(--zbk-color-cyan-900);
  }
  [class~="disabled:ink-cyan-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-cyan-900);
  }
  .ink-cyan-950 {
    color: var(--zbk-color-cyan-950);
  }
  [class~="focus:ink-cyan-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-cyan-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-cyan-950:hover {
      color: var(--zbk-color-cyan-950);
    }
  }
  [class~="active:ink-cyan-950"]:active {
    color: var(--zbk-color-cyan-950);
  }
  [class~="disabled:ink-cyan-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-cyan-950);
  }
  .canvas-cyan-50 {
    background-color: var(--zbk-color-cyan-50);
  }
  [class~="focus:canvas-cyan-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-cyan-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-cyan-50:hover {
      background-color: var(--zbk-color-cyan-50);
    }
  }
  [class~="active:canvas-cyan-50"]:active {
    background-color: var(--zbk-color-cyan-50);
  }
  [class~="disabled:canvas-cyan-50"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-cyan-50);
  }
  .canvas-cyan-100 {
    background-color: var(--zbk-color-cyan-100);
  }
  [class~="focus:canvas-cyan-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-cyan-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-cyan-100:hover {
      background-color: var(--zbk-color-cyan-100);
    }
  }
  [class~="active:canvas-cyan-100"]:active {
    background-color: var(--zbk-color-cyan-100);
  }
  [class~="disabled:canvas-cyan-100"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-cyan-100);
  }
  .canvas-cyan-200 {
    background-color: var(--zbk-color-cyan-200);
  }
  [class~="focus:canvas-cyan-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-cyan-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-cyan-200:hover {
      background-color: var(--zbk-color-cyan-200);
    }
  }
  [class~="active:canvas-cyan-200"]:active {
    background-color: var(--zbk-color-cyan-200);
  }
  [class~="disabled:canvas-cyan-200"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-cyan-200);
  }
  .canvas-cyan-300 {
    background-color: var(--zbk-color-cyan-300);
  }
  [class~="focus:canvas-cyan-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-cyan-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-cyan-300:hover {
      background-color: var(--zbk-color-cyan-300);
    }
  }
  [class~="active:canvas-cyan-300"]:active {
    background-color: var(--zbk-color-cyan-300);
  }
  [class~="disabled:canvas-cyan-300"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-cyan-300);
  }
  .canvas-cyan-400 {
    background-color: var(--zbk-color-cyan-400);
  }
  [class~="focus:canvas-cyan-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-cyan-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-cyan-400:hover {
      background-color: var(--zbk-color-cyan-400);
    }
  }
  [class~="active:canvas-cyan-400"]:active {
    background-color: var(--zbk-color-cyan-400);
  }
  [class~="disabled:canvas-cyan-400"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-cyan-400);
  }
  .canvas-cyan-500 {
    background-color: var(--zbk-color-cyan-500);
  }
  [class~="focus:canvas-cyan-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-cyan-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-cyan-500:hover {
      background-color: var(--zbk-color-cyan-500);
    }
  }
  [class~="active:canvas-cyan-500"]:active {
    background-color: var(--zbk-color-cyan-500);
  }
  [class~="disabled:canvas-cyan-500"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-cyan-500);
  }
  .canvas-cyan-600 {
    background-color: var(--zbk-color-cyan-600);
  }
  [class~="focus:canvas-cyan-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-cyan-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-cyan-600:hover {
      background-color: var(--zbk-color-cyan-600);
    }
  }
  [class~="active:canvas-cyan-600"]:active {
    background-color: var(--zbk-color-cyan-600);
  }
  [class~="disabled:canvas-cyan-600"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-cyan-600);
  }
  .canvas-cyan-700 {
    background-color: var(--zbk-color-cyan-700);
  }
  [class~="focus:canvas-cyan-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-cyan-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-cyan-700:hover {
      background-color: var(--zbk-color-cyan-700);
    }
  }
  [class~="active:canvas-cyan-700"]:active {
    background-color: var(--zbk-color-cyan-700);
  }
  [class~="disabled:canvas-cyan-700"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-cyan-700);
  }
  .canvas-cyan-800 {
    background-color: var(--zbk-color-cyan-800);
  }
  [class~="focus:canvas-cyan-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-cyan-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-cyan-800:hover {
      background-color: var(--zbk-color-cyan-800);
    }
  }
  [class~="active:canvas-cyan-800"]:active {
    background-color: var(--zbk-color-cyan-800);
  }
  [class~="disabled:canvas-cyan-800"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-cyan-800);
  }
  .canvas-cyan-900 {
    background-color: var(--zbk-color-cyan-900);
  }
  [class~="focus:canvas-cyan-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-cyan-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-cyan-900:hover {
      background-color: var(--zbk-color-cyan-900);
    }
  }
  [class~="active:canvas-cyan-900"]:active {
    background-color: var(--zbk-color-cyan-900);
  }
  [class~="disabled:canvas-cyan-900"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-cyan-900);
  }
  .canvas-cyan-950 {
    background-color: var(--zbk-color-cyan-950);
  }
  [class~="focus:canvas-cyan-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-cyan-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-cyan-950:hover {
      background-color: var(--zbk-color-cyan-950);
    }
  }
  [class~="active:canvas-cyan-950"]:active {
    background-color: var(--zbk-color-cyan-950);
  }
  [class~="disabled:canvas-cyan-950"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-cyan-950);
  }
  .border-cyan-50 {
    border-color: var(--zbk-color-cyan-50);
  }
  [class~="focus:border-cyan-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-cyan-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-cyan-50:hover {
      border-color: var(--zbk-color-cyan-50);
    }
  }
  [class~="active:border-cyan-50"]:active {
    border-color: var(--zbk-color-cyan-50);
  }
  [class~="disabled:border-cyan-50"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-cyan-50);
  }
  .border-cyan-100 {
    border-color: var(--zbk-color-cyan-100);
  }
  [class~="focus:border-cyan-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-cyan-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-cyan-100:hover {
      border-color: var(--zbk-color-cyan-100);
    }
  }
  [class~="active:border-cyan-100"]:active {
    border-color: var(--zbk-color-cyan-100);
  }
  [class~="disabled:border-cyan-100"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-cyan-100);
  }
  .border-cyan-200 {
    border-color: var(--zbk-color-cyan-200);
  }
  [class~="focus:border-cyan-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-cyan-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-cyan-200:hover {
      border-color: var(--zbk-color-cyan-200);
    }
  }
  [class~="active:border-cyan-200"]:active {
    border-color: var(--zbk-color-cyan-200);
  }
  [class~="disabled:border-cyan-200"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-cyan-200);
  }
  .border-cyan-300 {
    border-color: var(--zbk-color-cyan-300);
  }
  [class~="focus:border-cyan-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-cyan-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-cyan-300:hover {
      border-color: var(--zbk-color-cyan-300);
    }
  }
  [class~="active:border-cyan-300"]:active {
    border-color: var(--zbk-color-cyan-300);
  }
  [class~="disabled:border-cyan-300"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-cyan-300);
  }
  .border-cyan-400 {
    border-color: var(--zbk-color-cyan-400);
  }
  [class~="focus:border-cyan-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-cyan-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-cyan-400:hover {
      border-color: var(--zbk-color-cyan-400);
    }
  }
  [class~="active:border-cyan-400"]:active {
    border-color: var(--zbk-color-cyan-400);
  }
  [class~="disabled:border-cyan-400"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-cyan-400);
  }
  .border-cyan-500 {
    border-color: var(--zbk-color-cyan-500);
  }
  [class~="focus:border-cyan-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-cyan-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-cyan-500:hover {
      border-color: var(--zbk-color-cyan-500);
    }
  }
  [class~="active:border-cyan-500"]:active {
    border-color: var(--zbk-color-cyan-500);
  }
  [class~="disabled:border-cyan-500"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-cyan-500);
  }
  .border-cyan-600 {
    border-color: var(--zbk-color-cyan-600);
  }
  [class~="focus:border-cyan-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-cyan-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-cyan-600:hover {
      border-color: var(--zbk-color-cyan-600);
    }
  }
  [class~="active:border-cyan-600"]:active {
    border-color: var(--zbk-color-cyan-600);
  }
  [class~="disabled:border-cyan-600"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-cyan-600);
  }
  .border-cyan-700 {
    border-color: var(--zbk-color-cyan-700);
  }
  [class~="focus:border-cyan-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-cyan-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-cyan-700:hover {
      border-color: var(--zbk-color-cyan-700);
    }
  }
  [class~="active:border-cyan-700"]:active {
    border-color: var(--zbk-color-cyan-700);
  }
  [class~="disabled:border-cyan-700"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-cyan-700);
  }
  .border-cyan-800 {
    border-color: var(--zbk-color-cyan-800);
  }
  [class~="focus:border-cyan-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-cyan-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-cyan-800:hover {
      border-color: var(--zbk-color-cyan-800);
    }
  }
  [class~="active:border-cyan-800"]:active {
    border-color: var(--zbk-color-cyan-800);
  }
  [class~="disabled:border-cyan-800"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-cyan-800);
  }
  .border-cyan-900 {
    border-color: var(--zbk-color-cyan-900);
  }
  [class~="focus:border-cyan-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-cyan-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-cyan-900:hover {
      border-color: var(--zbk-color-cyan-900);
    }
  }
  [class~="active:border-cyan-900"]:active {
    border-color: var(--zbk-color-cyan-900);
  }
  [class~="disabled:border-cyan-900"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-cyan-900);
  }
  .border-cyan-950 {
    border-color: var(--zbk-color-cyan-950);
  }
  [class~="focus:border-cyan-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-cyan-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-cyan-950:hover {
      border-color: var(--zbk-color-cyan-950);
    }
  }
  [class~="active:border-cyan-950"]:active {
    border-color: var(--zbk-color-cyan-950);
  }
  [class~="disabled:border-cyan-950"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-cyan-950);
  }
  .fill-cyan-50 {
    fill: var(--zbk-color-cyan-50);
  }
  [class~="focus:fill-cyan-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-cyan-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-cyan-50:hover {
      fill: var(--zbk-color-cyan-50);
    }
  }
  [class~="active:fill-cyan-50"]:active {
    fill: var(--zbk-color-cyan-50);
  }
  [class~="disabled:fill-cyan-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-cyan-50);
  }
  .fill-cyan-100 {
    fill: var(--zbk-color-cyan-100);
  }
  [class~="focus:fill-cyan-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-cyan-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-cyan-100:hover {
      fill: var(--zbk-color-cyan-100);
    }
  }
  [class~="active:fill-cyan-100"]:active {
    fill: var(--zbk-color-cyan-100);
  }
  [class~="disabled:fill-cyan-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-cyan-100);
  }
  .fill-cyan-200 {
    fill: var(--zbk-color-cyan-200);
  }
  [class~="focus:fill-cyan-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-cyan-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-cyan-200:hover {
      fill: var(--zbk-color-cyan-200);
    }
  }
  [class~="active:fill-cyan-200"]:active {
    fill: var(--zbk-color-cyan-200);
  }
  [class~="disabled:fill-cyan-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-cyan-200);
  }
  .fill-cyan-300 {
    fill: var(--zbk-color-cyan-300);
  }
  [class~="focus:fill-cyan-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-cyan-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-cyan-300:hover {
      fill: var(--zbk-color-cyan-300);
    }
  }
  [class~="active:fill-cyan-300"]:active {
    fill: var(--zbk-color-cyan-300);
  }
  [class~="disabled:fill-cyan-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-cyan-300);
  }
  .fill-cyan-400 {
    fill: var(--zbk-color-cyan-400);
  }
  [class~="focus:fill-cyan-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-cyan-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-cyan-400:hover {
      fill: var(--zbk-color-cyan-400);
    }
  }
  [class~="active:fill-cyan-400"]:active {
    fill: var(--zbk-color-cyan-400);
  }
  [class~="disabled:fill-cyan-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-cyan-400);
  }
  .fill-cyan-500 {
    fill: var(--zbk-color-cyan-500);
  }
  [class~="focus:fill-cyan-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-cyan-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-cyan-500:hover {
      fill: var(--zbk-color-cyan-500);
    }
  }
  [class~="active:fill-cyan-500"]:active {
    fill: var(--zbk-color-cyan-500);
  }
  [class~="disabled:fill-cyan-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-cyan-500);
  }
  .fill-cyan-600 {
    fill: var(--zbk-color-cyan-600);
  }
  [class~="focus:fill-cyan-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-cyan-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-cyan-600:hover {
      fill: var(--zbk-color-cyan-600);
    }
  }
  [class~="active:fill-cyan-600"]:active {
    fill: var(--zbk-color-cyan-600);
  }
  [class~="disabled:fill-cyan-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-cyan-600);
  }
  .fill-cyan-700 {
    fill: var(--zbk-color-cyan-700);
  }
  [class~="focus:fill-cyan-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-cyan-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-cyan-700:hover {
      fill: var(--zbk-color-cyan-700);
    }
  }
  [class~="active:fill-cyan-700"]:active {
    fill: var(--zbk-color-cyan-700);
  }
  [class~="disabled:fill-cyan-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-cyan-700);
  }
  .fill-cyan-800 {
    fill: var(--zbk-color-cyan-800);
  }
  [class~="focus:fill-cyan-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-cyan-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-cyan-800:hover {
      fill: var(--zbk-color-cyan-800);
    }
  }
  [class~="active:fill-cyan-800"]:active {
    fill: var(--zbk-color-cyan-800);
  }
  [class~="disabled:fill-cyan-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-cyan-800);
  }
  .fill-cyan-900 {
    fill: var(--zbk-color-cyan-900);
  }
  [class~="focus:fill-cyan-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-cyan-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-cyan-900:hover {
      fill: var(--zbk-color-cyan-900);
    }
  }
  [class~="active:fill-cyan-900"]:active {
    fill: var(--zbk-color-cyan-900);
  }
  [class~="disabled:fill-cyan-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-cyan-900);
  }
  .fill-cyan-950 {
    fill: var(--zbk-color-cyan-950);
  }
  [class~="focus:fill-cyan-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-cyan-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-cyan-950:hover {
      fill: var(--zbk-color-cyan-950);
    }
  }
  [class~="active:fill-cyan-950"]:active {
    fill: var(--zbk-color-cyan-950);
  }
  [class~="disabled:fill-cyan-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-cyan-950);
  }
}
:root {
  --zbk-color-deepcurrent-hue: 220;
  --zbk-color-deepcurrent-saturation: 82%;
  --zbk-color-deepcurrent-50: hsl(
    var(--zbk-color-deepcurrent-hue),
    var(--zbk-color-deepcurrent-saturation),
    98%
  );
  --zbk-color-deepcurrent-100: hsl(
    var(--zbk-color-deepcurrent-hue),
    var(--zbk-color-deepcurrent-saturation),
    93%
  );
  --zbk-color-deepcurrent-200: hsl(
    var(--zbk-color-deepcurrent-hue),
    var(--zbk-color-deepcurrent-saturation),
    87%
  );
  --zbk-color-deepcurrent-300: hsl(
    var(--zbk-color-deepcurrent-hue),
    var(--zbk-color-deepcurrent-saturation),
    78%
  );
  --zbk-color-deepcurrent-400: hsl(
    var(--zbk-color-deepcurrent-hue),
    var(--zbk-color-deepcurrent-saturation),
    69%
  );
  --zbk-color-deepcurrent-500: hsl(
    var(--zbk-color-deepcurrent-hue),
    var(--zbk-color-deepcurrent-saturation),
    58%
  );
  --zbk-color-deepcurrent-600: hsl(
    var(--zbk-color-deepcurrent-hue),
    var(--zbk-color-deepcurrent-saturation),
    48%
  );
  --zbk-color-deepcurrent-700: hsl(
    var(--zbk-color-deepcurrent-hue),
    var(--zbk-color-deepcurrent-saturation),
    36%
  );
  --zbk-color-deepcurrent-800: hsl(
    var(--zbk-color-deepcurrent-hue),
    var(--zbk-color-deepcurrent-saturation),
    26%
  );
  --zbk-color-deepcurrent-900: hsl(
    var(--zbk-color-deepcurrent-hue),
    var(--zbk-color-deepcurrent-saturation),
    18%
  );
  --zbk-color-deepcurrent-950: hsl(
    var(--zbk-color-deepcurrent-hue),
    var(--zbk-color-deepcurrent-saturation),
    10%
  );
}
@layer utilities {
  .ink-deepcurrent-50 {
    color: var(--zbk-color-deepcurrent-50);
  }
  [class~="focus:ink-deepcurrent-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-deepcurrent-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-deepcurrent-50:hover {
      color: var(--zbk-color-deepcurrent-50);
    }
  }
  [class~="active:ink-deepcurrent-50"]:active {
    color: var(--zbk-color-deepcurrent-50);
  }
  [class~="disabled:ink-deepcurrent-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-deepcurrent-50);
  }
  .ink-deepcurrent-100 {
    color: var(--zbk-color-deepcurrent-100);
  }
  [class~="focus:ink-deepcurrent-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-deepcurrent-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-deepcurrent-100:hover {
      color: var(--zbk-color-deepcurrent-100);
    }
  }
  [class~="active:ink-deepcurrent-100"]:active {
    color: var(--zbk-color-deepcurrent-100);
  }
  [class~="disabled:ink-deepcurrent-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-deepcurrent-100);
  }
  .ink-deepcurrent-200 {
    color: var(--zbk-color-deepcurrent-200);
  }
  [class~="focus:ink-deepcurrent-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-deepcurrent-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-deepcurrent-200:hover {
      color: var(--zbk-color-deepcurrent-200);
    }
  }
  [class~="active:ink-deepcurrent-200"]:active {
    color: var(--zbk-color-deepcurrent-200);
  }
  [class~="disabled:ink-deepcurrent-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-deepcurrent-200);
  }
  .ink-deepcurrent-300 {
    color: var(--zbk-color-deepcurrent-300);
  }
  [class~="focus:ink-deepcurrent-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-deepcurrent-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-deepcurrent-300:hover {
      color: var(--zbk-color-deepcurrent-300);
    }
  }
  [class~="active:ink-deepcurrent-300"]:active {
    color: var(--zbk-color-deepcurrent-300);
  }
  [class~="disabled:ink-deepcurrent-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-deepcurrent-300);
  }
  .ink-deepcurrent-400 {
    color: var(--zbk-color-deepcurrent-400);
  }
  [class~="focus:ink-deepcurrent-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-deepcurrent-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-deepcurrent-400:hover {
      color: var(--zbk-color-deepcurrent-400);
    }
  }
  [class~="active:ink-deepcurrent-400"]:active {
    color: var(--zbk-color-deepcurrent-400);
  }
  [class~="disabled:ink-deepcurrent-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-deepcurrent-400);
  }
  .ink-deepcurrent-500 {
    color: var(--zbk-color-deepcurrent-500);
  }
  [class~="focus:ink-deepcurrent-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-deepcurrent-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-deepcurrent-500:hover {
      color: var(--zbk-color-deepcurrent-500);
    }
  }
  [class~="active:ink-deepcurrent-500"]:active {
    color: var(--zbk-color-deepcurrent-500);
  }
  [class~="disabled:ink-deepcurrent-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-deepcurrent-500);
  }
  .ink-deepcurrent-600 {
    color: var(--zbk-color-deepcurrent-600);
  }
  [class~="focus:ink-deepcurrent-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-deepcurrent-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-deepcurrent-600:hover {
      color: var(--zbk-color-deepcurrent-600);
    }
  }
  [class~="active:ink-deepcurrent-600"]:active {
    color: var(--zbk-color-deepcurrent-600);
  }
  [class~="disabled:ink-deepcurrent-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-deepcurrent-600);
  }
  .ink-deepcurrent-700 {
    color: var(--zbk-color-deepcurrent-700);
  }
  [class~="focus:ink-deepcurrent-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-deepcurrent-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-deepcurrent-700:hover {
      color: var(--zbk-color-deepcurrent-700);
    }
  }
  [class~="active:ink-deepcurrent-700"]:active {
    color: var(--zbk-color-deepcurrent-700);
  }
  [class~="disabled:ink-deepcurrent-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-deepcurrent-700);
  }
  .ink-deepcurrent-800 {
    color: var(--zbk-color-deepcurrent-800);
  }
  [class~="focus:ink-deepcurrent-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-deepcurrent-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-deepcurrent-800:hover {
      color: var(--zbk-color-deepcurrent-800);
    }
  }
  [class~="active:ink-deepcurrent-800"]:active {
    color: var(--zbk-color-deepcurrent-800);
  }
  [class~="disabled:ink-deepcurrent-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-deepcurrent-800);
  }
  .ink-deepcurrent-900 {
    color: var(--zbk-color-deepcurrent-900);
  }
  [class~="focus:ink-deepcurrent-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-deepcurrent-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-deepcurrent-900:hover {
      color: var(--zbk-color-deepcurrent-900);
    }
  }
  [class~="active:ink-deepcurrent-900"]:active {
    color: var(--zbk-color-deepcurrent-900);
  }
  [class~="disabled:ink-deepcurrent-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-deepcurrent-900);
  }
  .ink-deepcurrent-950 {
    color: var(--zbk-color-deepcurrent-950);
  }
  [class~="focus:ink-deepcurrent-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-deepcurrent-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-deepcurrent-950:hover {
      color: var(--zbk-color-deepcurrent-950);
    }
  }
  [class~="active:ink-deepcurrent-950"]:active {
    color: var(--zbk-color-deepcurrent-950);
  }
  [class~="disabled:ink-deepcurrent-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-deepcurrent-950);
  }
  .canvas-deepcurrent-50 {
    background-color: var(--zbk-color-deepcurrent-50);
  }
  [class~="focus:canvas-deepcurrent-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-deepcurrent-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-deepcurrent-50:hover {
      background-color: var(--zbk-color-deepcurrent-50);
    }
  }
  [class~="active:canvas-deepcurrent-50"]:active {
    background-color: var(--zbk-color-deepcurrent-50);
  }
  [class~="disabled:canvas-deepcurrent-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-deepcurrent-50);
  }
  .canvas-deepcurrent-100 {
    background-color: var(--zbk-color-deepcurrent-100);
  }
  [class~="focus:canvas-deepcurrent-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-deepcurrent-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-deepcurrent-100:hover {
      background-color: var(--zbk-color-deepcurrent-100);
    }
  }
  [class~="active:canvas-deepcurrent-100"]:active {
    background-color: var(--zbk-color-deepcurrent-100);
  }
  [class~="disabled:canvas-deepcurrent-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-deepcurrent-100);
  }
  .canvas-deepcurrent-200 {
    background-color: var(--zbk-color-deepcurrent-200);
  }
  [class~="focus:canvas-deepcurrent-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-deepcurrent-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-deepcurrent-200:hover {
      background-color: var(--zbk-color-deepcurrent-200);
    }
  }
  [class~="active:canvas-deepcurrent-200"]:active {
    background-color: var(--zbk-color-deepcurrent-200);
  }
  [class~="disabled:canvas-deepcurrent-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-deepcurrent-200);
  }
  .canvas-deepcurrent-300 {
    background-color: var(--zbk-color-deepcurrent-300);
  }
  [class~="focus:canvas-deepcurrent-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-deepcurrent-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-deepcurrent-300:hover {
      background-color: var(--zbk-color-deepcurrent-300);
    }
  }
  [class~="active:canvas-deepcurrent-300"]:active {
    background-color: var(--zbk-color-deepcurrent-300);
  }
  [class~="disabled:canvas-deepcurrent-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-deepcurrent-300);
  }
  .canvas-deepcurrent-400 {
    background-color: var(--zbk-color-deepcurrent-400);
  }
  [class~="focus:canvas-deepcurrent-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-deepcurrent-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-deepcurrent-400:hover {
      background-color: var(--zbk-color-deepcurrent-400);
    }
  }
  [class~="active:canvas-deepcurrent-400"]:active {
    background-color: var(--zbk-color-deepcurrent-400);
  }
  [class~="disabled:canvas-deepcurrent-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-deepcurrent-400);
  }
  .canvas-deepcurrent-500 {
    background-color: var(--zbk-color-deepcurrent-500);
  }
  [class~="focus:canvas-deepcurrent-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-deepcurrent-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-deepcurrent-500:hover {
      background-color: var(--zbk-color-deepcurrent-500);
    }
  }
  [class~="active:canvas-deepcurrent-500"]:active {
    background-color: var(--zbk-color-deepcurrent-500);
  }
  [class~="disabled:canvas-deepcurrent-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-deepcurrent-500);
  }
  .canvas-deepcurrent-600 {
    background-color: var(--zbk-color-deepcurrent-600);
  }
  [class~="focus:canvas-deepcurrent-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-deepcurrent-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-deepcurrent-600:hover {
      background-color: var(--zbk-color-deepcurrent-600);
    }
  }
  [class~="active:canvas-deepcurrent-600"]:active {
    background-color: var(--zbk-color-deepcurrent-600);
  }
  [class~="disabled:canvas-deepcurrent-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-deepcurrent-600);
  }
  .canvas-deepcurrent-700 {
    background-color: var(--zbk-color-deepcurrent-700);
  }
  [class~="focus:canvas-deepcurrent-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-deepcurrent-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-deepcurrent-700:hover {
      background-color: var(--zbk-color-deepcurrent-700);
    }
  }
  [class~="active:canvas-deepcurrent-700"]:active {
    background-color: var(--zbk-color-deepcurrent-700);
  }
  [class~="disabled:canvas-deepcurrent-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-deepcurrent-700);
  }
  .canvas-deepcurrent-800 {
    background-color: var(--zbk-color-deepcurrent-800);
  }
  [class~="focus:canvas-deepcurrent-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-deepcurrent-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-deepcurrent-800:hover {
      background-color: var(--zbk-color-deepcurrent-800);
    }
  }
  [class~="active:canvas-deepcurrent-800"]:active {
    background-color: var(--zbk-color-deepcurrent-800);
  }
  [class~="disabled:canvas-deepcurrent-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-deepcurrent-800);
  }
  .canvas-deepcurrent-900 {
    background-color: var(--zbk-color-deepcurrent-900);
  }
  [class~="focus:canvas-deepcurrent-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-deepcurrent-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-deepcurrent-900:hover {
      background-color: var(--zbk-color-deepcurrent-900);
    }
  }
  [class~="active:canvas-deepcurrent-900"]:active {
    background-color: var(--zbk-color-deepcurrent-900);
  }
  [class~="disabled:canvas-deepcurrent-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-deepcurrent-900);
  }
  .canvas-deepcurrent-950 {
    background-color: var(--zbk-color-deepcurrent-950);
  }
  [class~="focus:canvas-deepcurrent-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-deepcurrent-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-deepcurrent-950:hover {
      background-color: var(--zbk-color-deepcurrent-950);
    }
  }
  [class~="active:canvas-deepcurrent-950"]:active {
    background-color: var(--zbk-color-deepcurrent-950);
  }
  [class~="disabled:canvas-deepcurrent-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-deepcurrent-950);
  }
  .border-deepcurrent-50 {
    border-color: var(--zbk-color-deepcurrent-50);
  }
  [class~="focus:border-deepcurrent-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-deepcurrent-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-deepcurrent-50:hover {
      border-color: var(--zbk-color-deepcurrent-50);
    }
  }
  [class~="active:border-deepcurrent-50"]:active {
    border-color: var(--zbk-color-deepcurrent-50);
  }
  [class~="disabled:border-deepcurrent-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-deepcurrent-50);
  }
  .border-deepcurrent-100 {
    border-color: var(--zbk-color-deepcurrent-100);
  }
  [class~="focus:border-deepcurrent-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-deepcurrent-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-deepcurrent-100:hover {
      border-color: var(--zbk-color-deepcurrent-100);
    }
  }
  [class~="active:border-deepcurrent-100"]:active {
    border-color: var(--zbk-color-deepcurrent-100);
  }
  [class~="disabled:border-deepcurrent-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-deepcurrent-100);
  }
  .border-deepcurrent-200 {
    border-color: var(--zbk-color-deepcurrent-200);
  }
  [class~="focus:border-deepcurrent-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-deepcurrent-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-deepcurrent-200:hover {
      border-color: var(--zbk-color-deepcurrent-200);
    }
  }
  [class~="active:border-deepcurrent-200"]:active {
    border-color: var(--zbk-color-deepcurrent-200);
  }
  [class~="disabled:border-deepcurrent-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-deepcurrent-200);
  }
  .border-deepcurrent-300 {
    border-color: var(--zbk-color-deepcurrent-300);
  }
  [class~="focus:border-deepcurrent-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-deepcurrent-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-deepcurrent-300:hover {
      border-color: var(--zbk-color-deepcurrent-300);
    }
  }
  [class~="active:border-deepcurrent-300"]:active {
    border-color: var(--zbk-color-deepcurrent-300);
  }
  [class~="disabled:border-deepcurrent-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-deepcurrent-300);
  }
  .border-deepcurrent-400 {
    border-color: var(--zbk-color-deepcurrent-400);
  }
  [class~="focus:border-deepcurrent-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-deepcurrent-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-deepcurrent-400:hover {
      border-color: var(--zbk-color-deepcurrent-400);
    }
  }
  [class~="active:border-deepcurrent-400"]:active {
    border-color: var(--zbk-color-deepcurrent-400);
  }
  [class~="disabled:border-deepcurrent-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-deepcurrent-400);
  }
  .border-deepcurrent-500 {
    border-color: var(--zbk-color-deepcurrent-500);
  }
  [class~="focus:border-deepcurrent-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-deepcurrent-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-deepcurrent-500:hover {
      border-color: var(--zbk-color-deepcurrent-500);
    }
  }
  [class~="active:border-deepcurrent-500"]:active {
    border-color: var(--zbk-color-deepcurrent-500);
  }
  [class~="disabled:border-deepcurrent-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-deepcurrent-500);
  }
  .border-deepcurrent-600 {
    border-color: var(--zbk-color-deepcurrent-600);
  }
  [class~="focus:border-deepcurrent-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-deepcurrent-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-deepcurrent-600:hover {
      border-color: var(--zbk-color-deepcurrent-600);
    }
  }
  [class~="active:border-deepcurrent-600"]:active {
    border-color: var(--zbk-color-deepcurrent-600);
  }
  [class~="disabled:border-deepcurrent-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-deepcurrent-600);
  }
  .border-deepcurrent-700 {
    border-color: var(--zbk-color-deepcurrent-700);
  }
  [class~="focus:border-deepcurrent-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-deepcurrent-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-deepcurrent-700:hover {
      border-color: var(--zbk-color-deepcurrent-700);
    }
  }
  [class~="active:border-deepcurrent-700"]:active {
    border-color: var(--zbk-color-deepcurrent-700);
  }
  [class~="disabled:border-deepcurrent-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-deepcurrent-700);
  }
  .border-deepcurrent-800 {
    border-color: var(--zbk-color-deepcurrent-800);
  }
  [class~="focus:border-deepcurrent-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-deepcurrent-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-deepcurrent-800:hover {
      border-color: var(--zbk-color-deepcurrent-800);
    }
  }
  [class~="active:border-deepcurrent-800"]:active {
    border-color: var(--zbk-color-deepcurrent-800);
  }
  [class~="disabled:border-deepcurrent-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-deepcurrent-800);
  }
  .border-deepcurrent-900 {
    border-color: var(--zbk-color-deepcurrent-900);
  }
  [class~="focus:border-deepcurrent-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-deepcurrent-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-deepcurrent-900:hover {
      border-color: var(--zbk-color-deepcurrent-900);
    }
  }
  [class~="active:border-deepcurrent-900"]:active {
    border-color: var(--zbk-color-deepcurrent-900);
  }
  [class~="disabled:border-deepcurrent-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-deepcurrent-900);
  }
  .border-deepcurrent-950 {
    border-color: var(--zbk-color-deepcurrent-950);
  }
  [class~="focus:border-deepcurrent-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-deepcurrent-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-deepcurrent-950:hover {
      border-color: var(--zbk-color-deepcurrent-950);
    }
  }
  [class~="active:border-deepcurrent-950"]:active {
    border-color: var(--zbk-color-deepcurrent-950);
  }
  [class~="disabled:border-deepcurrent-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-deepcurrent-950);
  }
  .fill-deepcurrent-50 {
    fill: var(--zbk-color-deepcurrent-50);
  }
  [class~="focus:fill-deepcurrent-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-deepcurrent-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-deepcurrent-50:hover {
      fill: var(--zbk-color-deepcurrent-50);
    }
  }
  [class~="active:fill-deepcurrent-50"]:active {
    fill: var(--zbk-color-deepcurrent-50);
  }
  [class~="disabled:fill-deepcurrent-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-deepcurrent-50);
  }
  .fill-deepcurrent-100 {
    fill: var(--zbk-color-deepcurrent-100);
  }
  [class~="focus:fill-deepcurrent-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-deepcurrent-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-deepcurrent-100:hover {
      fill: var(--zbk-color-deepcurrent-100);
    }
  }
  [class~="active:fill-deepcurrent-100"]:active {
    fill: var(--zbk-color-deepcurrent-100);
  }
  [class~="disabled:fill-deepcurrent-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-deepcurrent-100);
  }
  .fill-deepcurrent-200 {
    fill: var(--zbk-color-deepcurrent-200);
  }
  [class~="focus:fill-deepcurrent-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-deepcurrent-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-deepcurrent-200:hover {
      fill: var(--zbk-color-deepcurrent-200);
    }
  }
  [class~="active:fill-deepcurrent-200"]:active {
    fill: var(--zbk-color-deepcurrent-200);
  }
  [class~="disabled:fill-deepcurrent-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-deepcurrent-200);
  }
  .fill-deepcurrent-300 {
    fill: var(--zbk-color-deepcurrent-300);
  }
  [class~="focus:fill-deepcurrent-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-deepcurrent-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-deepcurrent-300:hover {
      fill: var(--zbk-color-deepcurrent-300);
    }
  }
  [class~="active:fill-deepcurrent-300"]:active {
    fill: var(--zbk-color-deepcurrent-300);
  }
  [class~="disabled:fill-deepcurrent-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-deepcurrent-300);
  }
  .fill-deepcurrent-400 {
    fill: var(--zbk-color-deepcurrent-400);
  }
  [class~="focus:fill-deepcurrent-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-deepcurrent-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-deepcurrent-400:hover {
      fill: var(--zbk-color-deepcurrent-400);
    }
  }
  [class~="active:fill-deepcurrent-400"]:active {
    fill: var(--zbk-color-deepcurrent-400);
  }
  [class~="disabled:fill-deepcurrent-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-deepcurrent-400);
  }
  .fill-deepcurrent-500 {
    fill: var(--zbk-color-deepcurrent-500);
  }
  [class~="focus:fill-deepcurrent-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-deepcurrent-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-deepcurrent-500:hover {
      fill: var(--zbk-color-deepcurrent-500);
    }
  }
  [class~="active:fill-deepcurrent-500"]:active {
    fill: var(--zbk-color-deepcurrent-500);
  }
  [class~="disabled:fill-deepcurrent-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-deepcurrent-500);
  }
  .fill-deepcurrent-600 {
    fill: var(--zbk-color-deepcurrent-600);
  }
  [class~="focus:fill-deepcurrent-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-deepcurrent-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-deepcurrent-600:hover {
      fill: var(--zbk-color-deepcurrent-600);
    }
  }
  [class~="active:fill-deepcurrent-600"]:active {
    fill: var(--zbk-color-deepcurrent-600);
  }
  [class~="disabled:fill-deepcurrent-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-deepcurrent-600);
  }
  .fill-deepcurrent-700 {
    fill: var(--zbk-color-deepcurrent-700);
  }
  [class~="focus:fill-deepcurrent-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-deepcurrent-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-deepcurrent-700:hover {
      fill: var(--zbk-color-deepcurrent-700);
    }
  }
  [class~="active:fill-deepcurrent-700"]:active {
    fill: var(--zbk-color-deepcurrent-700);
  }
  [class~="disabled:fill-deepcurrent-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-deepcurrent-700);
  }
  .fill-deepcurrent-800 {
    fill: var(--zbk-color-deepcurrent-800);
  }
  [class~="focus:fill-deepcurrent-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-deepcurrent-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-deepcurrent-800:hover {
      fill: var(--zbk-color-deepcurrent-800);
    }
  }
  [class~="active:fill-deepcurrent-800"]:active {
    fill: var(--zbk-color-deepcurrent-800);
  }
  [class~="disabled:fill-deepcurrent-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-deepcurrent-800);
  }
  .fill-deepcurrent-900 {
    fill: var(--zbk-color-deepcurrent-900);
  }
  [class~="focus:fill-deepcurrent-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-deepcurrent-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-deepcurrent-900:hover {
      fill: var(--zbk-color-deepcurrent-900);
    }
  }
  [class~="active:fill-deepcurrent-900"]:active {
    fill: var(--zbk-color-deepcurrent-900);
  }
  [class~="disabled:fill-deepcurrent-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-deepcurrent-900);
  }
  .fill-deepcurrent-950 {
    fill: var(--zbk-color-deepcurrent-950);
  }
  [class~="focus:fill-deepcurrent-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-deepcurrent-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-deepcurrent-950:hover {
      fill: var(--zbk-color-deepcurrent-950);
    }
  }
  [class~="active:fill-deepcurrent-950"]:active {
    fill: var(--zbk-color-deepcurrent-950);
  }
  [class~="disabled:fill-deepcurrent-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-deepcurrent-950);
  }
}
:root {
  --zbk-color-dusk-hue: 220;
  --zbk-color-dusk-saturation: 22%;
  --zbk-color-dusk-50: hsl(
    var(--zbk-color-dusk-hue),
    var(--zbk-color-dusk-saturation),
    98%
  );
  --zbk-color-dusk-100: hsl(
    var(--zbk-color-dusk-hue),
    var(--zbk-color-dusk-saturation),
    93%
  );
  --zbk-color-dusk-200: hsl(
    var(--zbk-color-dusk-hue),
    var(--zbk-color-dusk-saturation),
    87%
  );
  --zbk-color-dusk-300: hsl(
    var(--zbk-color-dusk-hue),
    var(--zbk-color-dusk-saturation),
    78%
  );
  --zbk-color-dusk-400: hsl(
    var(--zbk-color-dusk-hue),
    var(--zbk-color-dusk-saturation),
    69%
  );
  --zbk-color-dusk-500: hsl(
    var(--zbk-color-dusk-hue),
    var(--zbk-color-dusk-saturation),
    58%
  );
  --zbk-color-dusk-600: hsl(
    var(--zbk-color-dusk-hue),
    var(--zbk-color-dusk-saturation),
    48%
  );
  --zbk-color-dusk-700: hsl(
    var(--zbk-color-dusk-hue),
    var(--zbk-color-dusk-saturation),
    36%
  );
  --zbk-color-dusk-800: hsl(
    var(--zbk-color-dusk-hue),
    var(--zbk-color-dusk-saturation),
    26%
  );
  --zbk-color-dusk-900: hsl(
    var(--zbk-color-dusk-hue),
    var(--zbk-color-dusk-saturation),
    18%
  );
  --zbk-color-dusk-950: hsl(
    var(--zbk-color-dusk-hue),
    var(--zbk-color-dusk-saturation),
    10%
  );
}
@layer utilities {
  .ink-dusk-50 {
    color: var(--zbk-color-dusk-50);
  }
  [class~="focus:ink-dusk-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-dusk-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-dusk-50:hover {
      color: var(--zbk-color-dusk-50);
    }
  }
  [class~="active:ink-dusk-50"]:active {
    color: var(--zbk-color-dusk-50);
  }
  [class~="disabled:ink-dusk-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-dusk-50);
  }
  .ink-dusk-100 {
    color: var(--zbk-color-dusk-100);
  }
  [class~="focus:ink-dusk-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-dusk-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-dusk-100:hover {
      color: var(--zbk-color-dusk-100);
    }
  }
  [class~="active:ink-dusk-100"]:active {
    color: var(--zbk-color-dusk-100);
  }
  [class~="disabled:ink-dusk-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-dusk-100);
  }
  .ink-dusk-200 {
    color: var(--zbk-color-dusk-200);
  }
  [class~="focus:ink-dusk-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-dusk-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-dusk-200:hover {
      color: var(--zbk-color-dusk-200);
    }
  }
  [class~="active:ink-dusk-200"]:active {
    color: var(--zbk-color-dusk-200);
  }
  [class~="disabled:ink-dusk-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-dusk-200);
  }
  .ink-dusk-300 {
    color: var(--zbk-color-dusk-300);
  }
  [class~="focus:ink-dusk-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-dusk-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-dusk-300:hover {
      color: var(--zbk-color-dusk-300);
    }
  }
  [class~="active:ink-dusk-300"]:active {
    color: var(--zbk-color-dusk-300);
  }
  [class~="disabled:ink-dusk-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-dusk-300);
  }
  .ink-dusk-400 {
    color: var(--zbk-color-dusk-400);
  }
  [class~="focus:ink-dusk-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-dusk-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-dusk-400:hover {
      color: var(--zbk-color-dusk-400);
    }
  }
  [class~="active:ink-dusk-400"]:active {
    color: var(--zbk-color-dusk-400);
  }
  [class~="disabled:ink-dusk-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-dusk-400);
  }
  .ink-dusk-500 {
    color: var(--zbk-color-dusk-500);
  }
  [class~="focus:ink-dusk-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-dusk-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-dusk-500:hover {
      color: var(--zbk-color-dusk-500);
    }
  }
  [class~="active:ink-dusk-500"]:active {
    color: var(--zbk-color-dusk-500);
  }
  [class~="disabled:ink-dusk-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-dusk-500);
  }
  .ink-dusk-600 {
    color: var(--zbk-color-dusk-600);
  }
  [class~="focus:ink-dusk-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-dusk-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-dusk-600:hover {
      color: var(--zbk-color-dusk-600);
    }
  }
  [class~="active:ink-dusk-600"]:active {
    color: var(--zbk-color-dusk-600);
  }
  [class~="disabled:ink-dusk-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-dusk-600);
  }
  .ink-dusk-700 {
    color: var(--zbk-color-dusk-700);
  }
  [class~="focus:ink-dusk-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-dusk-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-dusk-700:hover {
      color: var(--zbk-color-dusk-700);
    }
  }
  [class~="active:ink-dusk-700"]:active {
    color: var(--zbk-color-dusk-700);
  }
  [class~="disabled:ink-dusk-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-dusk-700);
  }
  .ink-dusk-800 {
    color: var(--zbk-color-dusk-800);
  }
  [class~="focus:ink-dusk-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-dusk-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-dusk-800:hover {
      color: var(--zbk-color-dusk-800);
    }
  }
  [class~="active:ink-dusk-800"]:active {
    color: var(--zbk-color-dusk-800);
  }
  [class~="disabled:ink-dusk-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-dusk-800);
  }
  .ink-dusk-900 {
    color: var(--zbk-color-dusk-900);
  }
  [class~="focus:ink-dusk-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-dusk-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-dusk-900:hover {
      color: var(--zbk-color-dusk-900);
    }
  }
  [class~="active:ink-dusk-900"]:active {
    color: var(--zbk-color-dusk-900);
  }
  [class~="disabled:ink-dusk-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-dusk-900);
  }
  .ink-dusk-950 {
    color: var(--zbk-color-dusk-950);
  }
  [class~="focus:ink-dusk-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-dusk-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-dusk-950:hover {
      color: var(--zbk-color-dusk-950);
    }
  }
  [class~="active:ink-dusk-950"]:active {
    color: var(--zbk-color-dusk-950);
  }
  [class~="disabled:ink-dusk-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-dusk-950);
  }
  .canvas-dusk-50 {
    background-color: var(--zbk-color-dusk-50);
  }
  [class~="focus:canvas-dusk-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-dusk-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-dusk-50:hover {
      background-color: var(--zbk-color-dusk-50);
    }
  }
  [class~="active:canvas-dusk-50"]:active {
    background-color: var(--zbk-color-dusk-50);
  }
  [class~="disabled:canvas-dusk-50"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-dusk-50);
  }
  .canvas-dusk-100 {
    background-color: var(--zbk-color-dusk-100);
  }
  [class~="focus:canvas-dusk-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-dusk-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-dusk-100:hover {
      background-color: var(--zbk-color-dusk-100);
    }
  }
  [class~="active:canvas-dusk-100"]:active {
    background-color: var(--zbk-color-dusk-100);
  }
  [class~="disabled:canvas-dusk-100"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-dusk-100);
  }
  .canvas-dusk-200 {
    background-color: var(--zbk-color-dusk-200);
  }
  [class~="focus:canvas-dusk-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-dusk-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-dusk-200:hover {
      background-color: var(--zbk-color-dusk-200);
    }
  }
  [class~="active:canvas-dusk-200"]:active {
    background-color: var(--zbk-color-dusk-200);
  }
  [class~="disabled:canvas-dusk-200"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-dusk-200);
  }
  .canvas-dusk-300 {
    background-color: var(--zbk-color-dusk-300);
  }
  [class~="focus:canvas-dusk-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-dusk-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-dusk-300:hover {
      background-color: var(--zbk-color-dusk-300);
    }
  }
  [class~="active:canvas-dusk-300"]:active {
    background-color: var(--zbk-color-dusk-300);
  }
  [class~="disabled:canvas-dusk-300"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-dusk-300);
  }
  .canvas-dusk-400 {
    background-color: var(--zbk-color-dusk-400);
  }
  [class~="focus:canvas-dusk-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-dusk-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-dusk-400:hover {
      background-color: var(--zbk-color-dusk-400);
    }
  }
  [class~="active:canvas-dusk-400"]:active {
    background-color: var(--zbk-color-dusk-400);
  }
  [class~="disabled:canvas-dusk-400"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-dusk-400);
  }
  .canvas-dusk-500 {
    background-color: var(--zbk-color-dusk-500);
  }
  [class~="focus:canvas-dusk-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-dusk-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-dusk-500:hover {
      background-color: var(--zbk-color-dusk-500);
    }
  }
  [class~="active:canvas-dusk-500"]:active {
    background-color: var(--zbk-color-dusk-500);
  }
  [class~="disabled:canvas-dusk-500"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-dusk-500);
  }
  .canvas-dusk-600 {
    background-color: var(--zbk-color-dusk-600);
  }
  [class~="focus:canvas-dusk-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-dusk-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-dusk-600:hover {
      background-color: var(--zbk-color-dusk-600);
    }
  }
  [class~="active:canvas-dusk-600"]:active {
    background-color: var(--zbk-color-dusk-600);
  }
  [class~="disabled:canvas-dusk-600"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-dusk-600);
  }
  .canvas-dusk-700 {
    background-color: var(--zbk-color-dusk-700);
  }
  [class~="focus:canvas-dusk-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-dusk-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-dusk-700:hover {
      background-color: var(--zbk-color-dusk-700);
    }
  }
  [class~="active:canvas-dusk-700"]:active {
    background-color: var(--zbk-color-dusk-700);
  }
  [class~="disabled:canvas-dusk-700"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-dusk-700);
  }
  .canvas-dusk-800 {
    background-color: var(--zbk-color-dusk-800);
  }
  [class~="focus:canvas-dusk-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-dusk-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-dusk-800:hover {
      background-color: var(--zbk-color-dusk-800);
    }
  }
  [class~="active:canvas-dusk-800"]:active {
    background-color: var(--zbk-color-dusk-800);
  }
  [class~="disabled:canvas-dusk-800"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-dusk-800);
  }
  .canvas-dusk-900 {
    background-color: var(--zbk-color-dusk-900);
  }
  [class~="focus:canvas-dusk-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-dusk-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-dusk-900:hover {
      background-color: var(--zbk-color-dusk-900);
    }
  }
  [class~="active:canvas-dusk-900"]:active {
    background-color: var(--zbk-color-dusk-900);
  }
  [class~="disabled:canvas-dusk-900"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-dusk-900);
  }
  .canvas-dusk-950 {
    background-color: var(--zbk-color-dusk-950);
  }
  [class~="focus:canvas-dusk-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-dusk-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-dusk-950:hover {
      background-color: var(--zbk-color-dusk-950);
    }
  }
  [class~="active:canvas-dusk-950"]:active {
    background-color: var(--zbk-color-dusk-950);
  }
  [class~="disabled:canvas-dusk-950"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-dusk-950);
  }
  .border-dusk-50 {
    border-color: var(--zbk-color-dusk-50);
  }
  [class~="focus:border-dusk-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-dusk-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-dusk-50:hover {
      border-color: var(--zbk-color-dusk-50);
    }
  }
  [class~="active:border-dusk-50"]:active {
    border-color: var(--zbk-color-dusk-50);
  }
  [class~="disabled:border-dusk-50"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-dusk-50);
  }
  .border-dusk-100 {
    border-color: var(--zbk-color-dusk-100);
  }
  [class~="focus:border-dusk-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-dusk-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-dusk-100:hover {
      border-color: var(--zbk-color-dusk-100);
    }
  }
  [class~="active:border-dusk-100"]:active {
    border-color: var(--zbk-color-dusk-100);
  }
  [class~="disabled:border-dusk-100"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-dusk-100);
  }
  .border-dusk-200 {
    border-color: var(--zbk-color-dusk-200);
  }
  [class~="focus:border-dusk-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-dusk-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-dusk-200:hover {
      border-color: var(--zbk-color-dusk-200);
    }
  }
  [class~="active:border-dusk-200"]:active {
    border-color: var(--zbk-color-dusk-200);
  }
  [class~="disabled:border-dusk-200"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-dusk-200);
  }
  .border-dusk-300 {
    border-color: var(--zbk-color-dusk-300);
  }
  [class~="focus:border-dusk-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-dusk-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-dusk-300:hover {
      border-color: var(--zbk-color-dusk-300);
    }
  }
  [class~="active:border-dusk-300"]:active {
    border-color: var(--zbk-color-dusk-300);
  }
  [class~="disabled:border-dusk-300"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-dusk-300);
  }
  .border-dusk-400 {
    border-color: var(--zbk-color-dusk-400);
  }
  [class~="focus:border-dusk-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-dusk-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-dusk-400:hover {
      border-color: var(--zbk-color-dusk-400);
    }
  }
  [class~="active:border-dusk-400"]:active {
    border-color: var(--zbk-color-dusk-400);
  }
  [class~="disabled:border-dusk-400"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-dusk-400);
  }
  .border-dusk-500 {
    border-color: var(--zbk-color-dusk-500);
  }
  [class~="focus:border-dusk-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-dusk-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-dusk-500:hover {
      border-color: var(--zbk-color-dusk-500);
    }
  }
  [class~="active:border-dusk-500"]:active {
    border-color: var(--zbk-color-dusk-500);
  }
  [class~="disabled:border-dusk-500"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-dusk-500);
  }
  .border-dusk-600 {
    border-color: var(--zbk-color-dusk-600);
  }
  [class~="focus:border-dusk-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-dusk-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-dusk-600:hover {
      border-color: var(--zbk-color-dusk-600);
    }
  }
  [class~="active:border-dusk-600"]:active {
    border-color: var(--zbk-color-dusk-600);
  }
  [class~="disabled:border-dusk-600"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-dusk-600);
  }
  .border-dusk-700 {
    border-color: var(--zbk-color-dusk-700);
  }
  [class~="focus:border-dusk-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-dusk-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-dusk-700:hover {
      border-color: var(--zbk-color-dusk-700);
    }
  }
  [class~="active:border-dusk-700"]:active {
    border-color: var(--zbk-color-dusk-700);
  }
  [class~="disabled:border-dusk-700"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-dusk-700);
  }
  .border-dusk-800 {
    border-color: var(--zbk-color-dusk-800);
  }
  [class~="focus:border-dusk-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-dusk-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-dusk-800:hover {
      border-color: var(--zbk-color-dusk-800);
    }
  }
  [class~="active:border-dusk-800"]:active {
    border-color: var(--zbk-color-dusk-800);
  }
  [class~="disabled:border-dusk-800"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-dusk-800);
  }
  .border-dusk-900 {
    border-color: var(--zbk-color-dusk-900);
  }
  [class~="focus:border-dusk-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-dusk-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-dusk-900:hover {
      border-color: var(--zbk-color-dusk-900);
    }
  }
  [class~="active:border-dusk-900"]:active {
    border-color: var(--zbk-color-dusk-900);
  }
  [class~="disabled:border-dusk-900"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-dusk-900);
  }
  .border-dusk-950 {
    border-color: var(--zbk-color-dusk-950);
  }
  [class~="focus:border-dusk-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-dusk-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-dusk-950:hover {
      border-color: var(--zbk-color-dusk-950);
    }
  }
  [class~="active:border-dusk-950"]:active {
    border-color: var(--zbk-color-dusk-950);
  }
  [class~="disabled:border-dusk-950"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-dusk-950);
  }
  .fill-dusk-50 {
    fill: var(--zbk-color-dusk-50);
  }
  [class~="focus:fill-dusk-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-dusk-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-dusk-50:hover {
      fill: var(--zbk-color-dusk-50);
    }
  }
  [class~="active:fill-dusk-50"]:active {
    fill: var(--zbk-color-dusk-50);
  }
  [class~="disabled:fill-dusk-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-dusk-50);
  }
  .fill-dusk-100 {
    fill: var(--zbk-color-dusk-100);
  }
  [class~="focus:fill-dusk-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-dusk-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-dusk-100:hover {
      fill: var(--zbk-color-dusk-100);
    }
  }
  [class~="active:fill-dusk-100"]:active {
    fill: var(--zbk-color-dusk-100);
  }
  [class~="disabled:fill-dusk-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-dusk-100);
  }
  .fill-dusk-200 {
    fill: var(--zbk-color-dusk-200);
  }
  [class~="focus:fill-dusk-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-dusk-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-dusk-200:hover {
      fill: var(--zbk-color-dusk-200);
    }
  }
  [class~="active:fill-dusk-200"]:active {
    fill: var(--zbk-color-dusk-200);
  }
  [class~="disabled:fill-dusk-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-dusk-200);
  }
  .fill-dusk-300 {
    fill: var(--zbk-color-dusk-300);
  }
  [class~="focus:fill-dusk-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-dusk-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-dusk-300:hover {
      fill: var(--zbk-color-dusk-300);
    }
  }
  [class~="active:fill-dusk-300"]:active {
    fill: var(--zbk-color-dusk-300);
  }
  [class~="disabled:fill-dusk-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-dusk-300);
  }
  .fill-dusk-400 {
    fill: var(--zbk-color-dusk-400);
  }
  [class~="focus:fill-dusk-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-dusk-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-dusk-400:hover {
      fill: var(--zbk-color-dusk-400);
    }
  }
  [class~="active:fill-dusk-400"]:active {
    fill: var(--zbk-color-dusk-400);
  }
  [class~="disabled:fill-dusk-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-dusk-400);
  }
  .fill-dusk-500 {
    fill: var(--zbk-color-dusk-500);
  }
  [class~="focus:fill-dusk-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-dusk-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-dusk-500:hover {
      fill: var(--zbk-color-dusk-500);
    }
  }
  [class~="active:fill-dusk-500"]:active {
    fill: var(--zbk-color-dusk-500);
  }
  [class~="disabled:fill-dusk-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-dusk-500);
  }
  .fill-dusk-600 {
    fill: var(--zbk-color-dusk-600);
  }
  [class~="focus:fill-dusk-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-dusk-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-dusk-600:hover {
      fill: var(--zbk-color-dusk-600);
    }
  }
  [class~="active:fill-dusk-600"]:active {
    fill: var(--zbk-color-dusk-600);
  }
  [class~="disabled:fill-dusk-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-dusk-600);
  }
  .fill-dusk-700 {
    fill: var(--zbk-color-dusk-700);
  }
  [class~="focus:fill-dusk-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-dusk-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-dusk-700:hover {
      fill: var(--zbk-color-dusk-700);
    }
  }
  [class~="active:fill-dusk-700"]:active {
    fill: var(--zbk-color-dusk-700);
  }
  [class~="disabled:fill-dusk-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-dusk-700);
  }
  .fill-dusk-800 {
    fill: var(--zbk-color-dusk-800);
  }
  [class~="focus:fill-dusk-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-dusk-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-dusk-800:hover {
      fill: var(--zbk-color-dusk-800);
    }
  }
  [class~="active:fill-dusk-800"]:active {
    fill: var(--zbk-color-dusk-800);
  }
  [class~="disabled:fill-dusk-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-dusk-800);
  }
  .fill-dusk-900 {
    fill: var(--zbk-color-dusk-900);
  }
  [class~="focus:fill-dusk-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-dusk-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-dusk-900:hover {
      fill: var(--zbk-color-dusk-900);
    }
  }
  [class~="active:fill-dusk-900"]:active {
    fill: var(--zbk-color-dusk-900);
  }
  [class~="disabled:fill-dusk-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-dusk-900);
  }
  .fill-dusk-950 {
    fill: var(--zbk-color-dusk-950);
  }
  [class~="focus:fill-dusk-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-dusk-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-dusk-950:hover {
      fill: var(--zbk-color-dusk-950);
    }
  }
  [class~="active:fill-dusk-950"]:active {
    fill: var(--zbk-color-dusk-950);
  }
  [class~="disabled:fill-dusk-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-dusk-950);
  }
}
:root {
  --zbk-color-ember-hue: 16;
  --zbk-color-ember-saturation: 78%;
  --zbk-color-ember-50: hsl(
    var(--zbk-color-ember-hue),
    var(--zbk-color-ember-saturation),
    98%
  );
  --zbk-color-ember-100: hsl(
    var(--zbk-color-ember-hue),
    var(--zbk-color-ember-saturation),
    93%
  );
  --zbk-color-ember-200: hsl(
    var(--zbk-color-ember-hue),
    var(--zbk-color-ember-saturation),
    87%
  );
  --zbk-color-ember-300: hsl(
    var(--zbk-color-ember-hue),
    var(--zbk-color-ember-saturation),
    78%
  );
  --zbk-color-ember-400: hsl(
    var(--zbk-color-ember-hue),
    var(--zbk-color-ember-saturation),
    69%
  );
  --zbk-color-ember-500: hsl(
    var(--zbk-color-ember-hue),
    var(--zbk-color-ember-saturation),
    58%
  );
  --zbk-color-ember-600: hsl(
    var(--zbk-color-ember-hue),
    var(--zbk-color-ember-saturation),
    48%
  );
  --zbk-color-ember-700: hsl(
    var(--zbk-color-ember-hue),
    var(--zbk-color-ember-saturation),
    36%
  );
  --zbk-color-ember-800: hsl(
    var(--zbk-color-ember-hue),
    var(--zbk-color-ember-saturation),
    26%
  );
  --zbk-color-ember-900: hsl(
    var(--zbk-color-ember-hue),
    var(--zbk-color-ember-saturation),
    18%
  );
  --zbk-color-ember-950: hsl(
    var(--zbk-color-ember-hue),
    var(--zbk-color-ember-saturation),
    10%
  );
}
@layer utilities {
  .ink-ember-50 {
    color: var(--zbk-color-ember-50);
  }
  [class~="focus:ink-ember-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-ember-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-ember-50:hover {
      color: var(--zbk-color-ember-50);
    }
  }
  [class~="active:ink-ember-50"]:active {
    color: var(--zbk-color-ember-50);
  }
  [class~="disabled:ink-ember-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-ember-50);
  }
  .ink-ember-100 {
    color: var(--zbk-color-ember-100);
  }
  [class~="focus:ink-ember-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-ember-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-ember-100:hover {
      color: var(--zbk-color-ember-100);
    }
  }
  [class~="active:ink-ember-100"]:active {
    color: var(--zbk-color-ember-100);
  }
  [class~="disabled:ink-ember-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-ember-100);
  }
  .ink-ember-200 {
    color: var(--zbk-color-ember-200);
  }
  [class~="focus:ink-ember-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-ember-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-ember-200:hover {
      color: var(--zbk-color-ember-200);
    }
  }
  [class~="active:ink-ember-200"]:active {
    color: var(--zbk-color-ember-200);
  }
  [class~="disabled:ink-ember-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-ember-200);
  }
  .ink-ember-300 {
    color: var(--zbk-color-ember-300);
  }
  [class~="focus:ink-ember-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-ember-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-ember-300:hover {
      color: var(--zbk-color-ember-300);
    }
  }
  [class~="active:ink-ember-300"]:active {
    color: var(--zbk-color-ember-300);
  }
  [class~="disabled:ink-ember-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-ember-300);
  }
  .ink-ember-400 {
    color: var(--zbk-color-ember-400);
  }
  [class~="focus:ink-ember-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-ember-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-ember-400:hover {
      color: var(--zbk-color-ember-400);
    }
  }
  [class~="active:ink-ember-400"]:active {
    color: var(--zbk-color-ember-400);
  }
  [class~="disabled:ink-ember-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-ember-400);
  }
  .ink-ember-500 {
    color: var(--zbk-color-ember-500);
  }
  [class~="focus:ink-ember-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-ember-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-ember-500:hover {
      color: var(--zbk-color-ember-500);
    }
  }
  [class~="active:ink-ember-500"]:active {
    color: var(--zbk-color-ember-500);
  }
  [class~="disabled:ink-ember-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-ember-500);
  }
  .ink-ember-600 {
    color: var(--zbk-color-ember-600);
  }
  [class~="focus:ink-ember-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-ember-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-ember-600:hover {
      color: var(--zbk-color-ember-600);
    }
  }
  [class~="active:ink-ember-600"]:active {
    color: var(--zbk-color-ember-600);
  }
  [class~="disabled:ink-ember-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-ember-600);
  }
  .ink-ember-700 {
    color: var(--zbk-color-ember-700);
  }
  [class~="focus:ink-ember-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-ember-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-ember-700:hover {
      color: var(--zbk-color-ember-700);
    }
  }
  [class~="active:ink-ember-700"]:active {
    color: var(--zbk-color-ember-700);
  }
  [class~="disabled:ink-ember-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-ember-700);
  }
  .ink-ember-800 {
    color: var(--zbk-color-ember-800);
  }
  [class~="focus:ink-ember-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-ember-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-ember-800:hover {
      color: var(--zbk-color-ember-800);
    }
  }
  [class~="active:ink-ember-800"]:active {
    color: var(--zbk-color-ember-800);
  }
  [class~="disabled:ink-ember-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-ember-800);
  }
  .ink-ember-900 {
    color: var(--zbk-color-ember-900);
  }
  [class~="focus:ink-ember-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-ember-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-ember-900:hover {
      color: var(--zbk-color-ember-900);
    }
  }
  [class~="active:ink-ember-900"]:active {
    color: var(--zbk-color-ember-900);
  }
  [class~="disabled:ink-ember-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-ember-900);
  }
  .ink-ember-950 {
    color: var(--zbk-color-ember-950);
  }
  [class~="focus:ink-ember-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-ember-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-ember-950:hover {
      color: var(--zbk-color-ember-950);
    }
  }
  [class~="active:ink-ember-950"]:active {
    color: var(--zbk-color-ember-950);
  }
  [class~="disabled:ink-ember-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-ember-950);
  }
  .canvas-ember-50 {
    background-color: var(--zbk-color-ember-50);
  }
  [class~="focus:canvas-ember-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-ember-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-ember-50:hover {
      background-color: var(--zbk-color-ember-50);
    }
  }
  [class~="active:canvas-ember-50"]:active {
    background-color: var(--zbk-color-ember-50);
  }
  [class~="disabled:canvas-ember-50"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-ember-50);
  }
  .canvas-ember-100 {
    background-color: var(--zbk-color-ember-100);
  }
  [class~="focus:canvas-ember-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-ember-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-ember-100:hover {
      background-color: var(--zbk-color-ember-100);
    }
  }
  [class~="active:canvas-ember-100"]:active {
    background-color: var(--zbk-color-ember-100);
  }
  [class~="disabled:canvas-ember-100"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-ember-100);
  }
  .canvas-ember-200 {
    background-color: var(--zbk-color-ember-200);
  }
  [class~="focus:canvas-ember-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-ember-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-ember-200:hover {
      background-color: var(--zbk-color-ember-200);
    }
  }
  [class~="active:canvas-ember-200"]:active {
    background-color: var(--zbk-color-ember-200);
  }
  [class~="disabled:canvas-ember-200"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-ember-200);
  }
  .canvas-ember-300 {
    background-color: var(--zbk-color-ember-300);
  }
  [class~="focus:canvas-ember-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-ember-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-ember-300:hover {
      background-color: var(--zbk-color-ember-300);
    }
  }
  [class~="active:canvas-ember-300"]:active {
    background-color: var(--zbk-color-ember-300);
  }
  [class~="disabled:canvas-ember-300"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-ember-300);
  }
  .canvas-ember-400 {
    background-color: var(--zbk-color-ember-400);
  }
  [class~="focus:canvas-ember-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-ember-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-ember-400:hover {
      background-color: var(--zbk-color-ember-400);
    }
  }
  [class~="active:canvas-ember-400"]:active {
    background-color: var(--zbk-color-ember-400);
  }
  [class~="disabled:canvas-ember-400"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-ember-400);
  }
  .canvas-ember-500 {
    background-color: var(--zbk-color-ember-500);
  }
  [class~="focus:canvas-ember-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-ember-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-ember-500:hover {
      background-color: var(--zbk-color-ember-500);
    }
  }
  [class~="active:canvas-ember-500"]:active {
    background-color: var(--zbk-color-ember-500);
  }
  [class~="disabled:canvas-ember-500"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-ember-500);
  }
  .canvas-ember-600 {
    background-color: var(--zbk-color-ember-600);
  }
  [class~="focus:canvas-ember-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-ember-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-ember-600:hover {
      background-color: var(--zbk-color-ember-600);
    }
  }
  [class~="active:canvas-ember-600"]:active {
    background-color: var(--zbk-color-ember-600);
  }
  [class~="disabled:canvas-ember-600"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-ember-600);
  }
  .canvas-ember-700 {
    background-color: var(--zbk-color-ember-700);
  }
  [class~="focus:canvas-ember-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-ember-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-ember-700:hover {
      background-color: var(--zbk-color-ember-700);
    }
  }
  [class~="active:canvas-ember-700"]:active {
    background-color: var(--zbk-color-ember-700);
  }
  [class~="disabled:canvas-ember-700"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-ember-700);
  }
  .canvas-ember-800 {
    background-color: var(--zbk-color-ember-800);
  }
  [class~="focus:canvas-ember-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-ember-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-ember-800:hover {
      background-color: var(--zbk-color-ember-800);
    }
  }
  [class~="active:canvas-ember-800"]:active {
    background-color: var(--zbk-color-ember-800);
  }
  [class~="disabled:canvas-ember-800"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-ember-800);
  }
  .canvas-ember-900 {
    background-color: var(--zbk-color-ember-900);
  }
  [class~="focus:canvas-ember-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-ember-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-ember-900:hover {
      background-color: var(--zbk-color-ember-900);
    }
  }
  [class~="active:canvas-ember-900"]:active {
    background-color: var(--zbk-color-ember-900);
  }
  [class~="disabled:canvas-ember-900"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-ember-900);
  }
  .canvas-ember-950 {
    background-color: var(--zbk-color-ember-950);
  }
  [class~="focus:canvas-ember-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-ember-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-ember-950:hover {
      background-color: var(--zbk-color-ember-950);
    }
  }
  [class~="active:canvas-ember-950"]:active {
    background-color: var(--zbk-color-ember-950);
  }
  [class~="disabled:canvas-ember-950"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-ember-950);
  }
  .border-ember-50 {
    border-color: var(--zbk-color-ember-50);
  }
  [class~="focus:border-ember-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-ember-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-ember-50:hover {
      border-color: var(--zbk-color-ember-50);
    }
  }
  [class~="active:border-ember-50"]:active {
    border-color: var(--zbk-color-ember-50);
  }
  [class~="disabled:border-ember-50"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-ember-50);
  }
  .border-ember-100 {
    border-color: var(--zbk-color-ember-100);
  }
  [class~="focus:border-ember-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-ember-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-ember-100:hover {
      border-color: var(--zbk-color-ember-100);
    }
  }
  [class~="active:border-ember-100"]:active {
    border-color: var(--zbk-color-ember-100);
  }
  [class~="disabled:border-ember-100"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-ember-100);
  }
  .border-ember-200 {
    border-color: var(--zbk-color-ember-200);
  }
  [class~="focus:border-ember-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-ember-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-ember-200:hover {
      border-color: var(--zbk-color-ember-200);
    }
  }
  [class~="active:border-ember-200"]:active {
    border-color: var(--zbk-color-ember-200);
  }
  [class~="disabled:border-ember-200"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-ember-200);
  }
  .border-ember-300 {
    border-color: var(--zbk-color-ember-300);
  }
  [class~="focus:border-ember-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-ember-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-ember-300:hover {
      border-color: var(--zbk-color-ember-300);
    }
  }
  [class~="active:border-ember-300"]:active {
    border-color: var(--zbk-color-ember-300);
  }
  [class~="disabled:border-ember-300"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-ember-300);
  }
  .border-ember-400 {
    border-color: var(--zbk-color-ember-400);
  }
  [class~="focus:border-ember-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-ember-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-ember-400:hover {
      border-color: var(--zbk-color-ember-400);
    }
  }
  [class~="active:border-ember-400"]:active {
    border-color: var(--zbk-color-ember-400);
  }
  [class~="disabled:border-ember-400"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-ember-400);
  }
  .border-ember-500 {
    border-color: var(--zbk-color-ember-500);
  }
  [class~="focus:border-ember-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-ember-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-ember-500:hover {
      border-color: var(--zbk-color-ember-500);
    }
  }
  [class~="active:border-ember-500"]:active {
    border-color: var(--zbk-color-ember-500);
  }
  [class~="disabled:border-ember-500"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-ember-500);
  }
  .border-ember-600 {
    border-color: var(--zbk-color-ember-600);
  }
  [class~="focus:border-ember-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-ember-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-ember-600:hover {
      border-color: var(--zbk-color-ember-600);
    }
  }
  [class~="active:border-ember-600"]:active {
    border-color: var(--zbk-color-ember-600);
  }
  [class~="disabled:border-ember-600"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-ember-600);
  }
  .border-ember-700 {
    border-color: var(--zbk-color-ember-700);
  }
  [class~="focus:border-ember-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-ember-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-ember-700:hover {
      border-color: var(--zbk-color-ember-700);
    }
  }
  [class~="active:border-ember-700"]:active {
    border-color: var(--zbk-color-ember-700);
  }
  [class~="disabled:border-ember-700"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-ember-700);
  }
  .border-ember-800 {
    border-color: var(--zbk-color-ember-800);
  }
  [class~="focus:border-ember-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-ember-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-ember-800:hover {
      border-color: var(--zbk-color-ember-800);
    }
  }
  [class~="active:border-ember-800"]:active {
    border-color: var(--zbk-color-ember-800);
  }
  [class~="disabled:border-ember-800"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-ember-800);
  }
  .border-ember-900 {
    border-color: var(--zbk-color-ember-900);
  }
  [class~="focus:border-ember-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-ember-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-ember-900:hover {
      border-color: var(--zbk-color-ember-900);
    }
  }
  [class~="active:border-ember-900"]:active {
    border-color: var(--zbk-color-ember-900);
  }
  [class~="disabled:border-ember-900"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-ember-900);
  }
  .border-ember-950 {
    border-color: var(--zbk-color-ember-950);
  }
  [class~="focus:border-ember-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-ember-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-ember-950:hover {
      border-color: var(--zbk-color-ember-950);
    }
  }
  [class~="active:border-ember-950"]:active {
    border-color: var(--zbk-color-ember-950);
  }
  [class~="disabled:border-ember-950"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-ember-950);
  }
  .fill-ember-50 {
    fill: var(--zbk-color-ember-50);
  }
  [class~="focus:fill-ember-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-ember-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-ember-50:hover {
      fill: var(--zbk-color-ember-50);
    }
  }
  [class~="active:fill-ember-50"]:active {
    fill: var(--zbk-color-ember-50);
  }
  [class~="disabled:fill-ember-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-ember-50);
  }
  .fill-ember-100 {
    fill: var(--zbk-color-ember-100);
  }
  [class~="focus:fill-ember-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-ember-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-ember-100:hover {
      fill: var(--zbk-color-ember-100);
    }
  }
  [class~="active:fill-ember-100"]:active {
    fill: var(--zbk-color-ember-100);
  }
  [class~="disabled:fill-ember-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-ember-100);
  }
  .fill-ember-200 {
    fill: var(--zbk-color-ember-200);
  }
  [class~="focus:fill-ember-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-ember-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-ember-200:hover {
      fill: var(--zbk-color-ember-200);
    }
  }
  [class~="active:fill-ember-200"]:active {
    fill: var(--zbk-color-ember-200);
  }
  [class~="disabled:fill-ember-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-ember-200);
  }
  .fill-ember-300 {
    fill: var(--zbk-color-ember-300);
  }
  [class~="focus:fill-ember-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-ember-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-ember-300:hover {
      fill: var(--zbk-color-ember-300);
    }
  }
  [class~="active:fill-ember-300"]:active {
    fill: var(--zbk-color-ember-300);
  }
  [class~="disabled:fill-ember-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-ember-300);
  }
  .fill-ember-400 {
    fill: var(--zbk-color-ember-400);
  }
  [class~="focus:fill-ember-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-ember-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-ember-400:hover {
      fill: var(--zbk-color-ember-400);
    }
  }
  [class~="active:fill-ember-400"]:active {
    fill: var(--zbk-color-ember-400);
  }
  [class~="disabled:fill-ember-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-ember-400);
  }
  .fill-ember-500 {
    fill: var(--zbk-color-ember-500);
  }
  [class~="focus:fill-ember-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-ember-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-ember-500:hover {
      fill: var(--zbk-color-ember-500);
    }
  }
  [class~="active:fill-ember-500"]:active {
    fill: var(--zbk-color-ember-500);
  }
  [class~="disabled:fill-ember-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-ember-500);
  }
  .fill-ember-600 {
    fill: var(--zbk-color-ember-600);
  }
  [class~="focus:fill-ember-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-ember-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-ember-600:hover {
      fill: var(--zbk-color-ember-600);
    }
  }
  [class~="active:fill-ember-600"]:active {
    fill: var(--zbk-color-ember-600);
  }
  [class~="disabled:fill-ember-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-ember-600);
  }
  .fill-ember-700 {
    fill: var(--zbk-color-ember-700);
  }
  [class~="focus:fill-ember-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-ember-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-ember-700:hover {
      fill: var(--zbk-color-ember-700);
    }
  }
  [class~="active:fill-ember-700"]:active {
    fill: var(--zbk-color-ember-700);
  }
  [class~="disabled:fill-ember-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-ember-700);
  }
  .fill-ember-800 {
    fill: var(--zbk-color-ember-800);
  }
  [class~="focus:fill-ember-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-ember-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-ember-800:hover {
      fill: var(--zbk-color-ember-800);
    }
  }
  [class~="active:fill-ember-800"]:active {
    fill: var(--zbk-color-ember-800);
  }
  [class~="disabled:fill-ember-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-ember-800);
  }
  .fill-ember-900 {
    fill: var(--zbk-color-ember-900);
  }
  [class~="focus:fill-ember-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-ember-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-ember-900:hover {
      fill: var(--zbk-color-ember-900);
    }
  }
  [class~="active:fill-ember-900"]:active {
    fill: var(--zbk-color-ember-900);
  }
  [class~="disabled:fill-ember-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-ember-900);
  }
  .fill-ember-950 {
    fill: var(--zbk-color-ember-950);
  }
  [class~="focus:fill-ember-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-ember-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-ember-950:hover {
      fill: var(--zbk-color-ember-950);
    }
  }
  [class~="active:fill-ember-950"]:active {
    fill: var(--zbk-color-ember-950);
  }
  [class~="disabled:fill-ember-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-ember-950);
  }
}
:root {
  --zbk-color-gold-hue: 42;
  --zbk-color-gold-saturation: 80%;
  --zbk-color-gold-50: hsl(
    var(--zbk-color-gold-hue),
    var(--zbk-color-gold-saturation),
    98%
  );
  --zbk-color-gold-100: hsl(
    var(--zbk-color-gold-hue),
    var(--zbk-color-gold-saturation),
    93%
  );
  --zbk-color-gold-200: hsl(
    var(--zbk-color-gold-hue),
    var(--zbk-color-gold-saturation),
    87%
  );
  --zbk-color-gold-300: hsl(
    var(--zbk-color-gold-hue),
    var(--zbk-color-gold-saturation),
    78%
  );
  --zbk-color-gold-400: hsl(
    var(--zbk-color-gold-hue),
    var(--zbk-color-gold-saturation),
    69%
  );
  --zbk-color-gold-500: hsl(
    var(--zbk-color-gold-hue),
    var(--zbk-color-gold-saturation),
    58%
  );
  --zbk-color-gold-600: hsl(
    var(--zbk-color-gold-hue),
    var(--zbk-color-gold-saturation),
    48%
  );
  --zbk-color-gold-700: hsl(
    var(--zbk-color-gold-hue),
    var(--zbk-color-gold-saturation),
    36%
  );
  --zbk-color-gold-800: hsl(
    var(--zbk-color-gold-hue),
    var(--zbk-color-gold-saturation),
    26%
  );
  --zbk-color-gold-900: hsl(
    var(--zbk-color-gold-hue),
    var(--zbk-color-gold-saturation),
    18%
  );
  --zbk-color-gold-950: hsl(
    var(--zbk-color-gold-hue),
    var(--zbk-color-gold-saturation),
    10%
  );
}
@layer utilities {
  .ink-gold-50 {
    color: var(--zbk-color-gold-50);
  }
  [class~="focus:ink-gold-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-gold-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-gold-50:hover {
      color: var(--zbk-color-gold-50);
    }
  }
  [class~="active:ink-gold-50"]:active {
    color: var(--zbk-color-gold-50);
  }
  [class~="disabled:ink-gold-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-gold-50);
  }
  .ink-gold-100 {
    color: var(--zbk-color-gold-100);
  }
  [class~="focus:ink-gold-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-gold-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-gold-100:hover {
      color: var(--zbk-color-gold-100);
    }
  }
  [class~="active:ink-gold-100"]:active {
    color: var(--zbk-color-gold-100);
  }
  [class~="disabled:ink-gold-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-gold-100);
  }
  .ink-gold-200 {
    color: var(--zbk-color-gold-200);
  }
  [class~="focus:ink-gold-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-gold-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-gold-200:hover {
      color: var(--zbk-color-gold-200);
    }
  }
  [class~="active:ink-gold-200"]:active {
    color: var(--zbk-color-gold-200);
  }
  [class~="disabled:ink-gold-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-gold-200);
  }
  .ink-gold-300 {
    color: var(--zbk-color-gold-300);
  }
  [class~="focus:ink-gold-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-gold-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-gold-300:hover {
      color: var(--zbk-color-gold-300);
    }
  }
  [class~="active:ink-gold-300"]:active {
    color: var(--zbk-color-gold-300);
  }
  [class~="disabled:ink-gold-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-gold-300);
  }
  .ink-gold-400 {
    color: var(--zbk-color-gold-400);
  }
  [class~="focus:ink-gold-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-gold-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-gold-400:hover {
      color: var(--zbk-color-gold-400);
    }
  }
  [class~="active:ink-gold-400"]:active {
    color: var(--zbk-color-gold-400);
  }
  [class~="disabled:ink-gold-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-gold-400);
  }
  .ink-gold-500 {
    color: var(--zbk-color-gold-500);
  }
  [class~="focus:ink-gold-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-gold-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-gold-500:hover {
      color: var(--zbk-color-gold-500);
    }
  }
  [class~="active:ink-gold-500"]:active {
    color: var(--zbk-color-gold-500);
  }
  [class~="disabled:ink-gold-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-gold-500);
  }
  .ink-gold-600 {
    color: var(--zbk-color-gold-600);
  }
  [class~="focus:ink-gold-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-gold-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-gold-600:hover {
      color: var(--zbk-color-gold-600);
    }
  }
  [class~="active:ink-gold-600"]:active {
    color: var(--zbk-color-gold-600);
  }
  [class~="disabled:ink-gold-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-gold-600);
  }
  .ink-gold-700 {
    color: var(--zbk-color-gold-700);
  }
  [class~="focus:ink-gold-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-gold-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-gold-700:hover {
      color: var(--zbk-color-gold-700);
    }
  }
  [class~="active:ink-gold-700"]:active {
    color: var(--zbk-color-gold-700);
  }
  [class~="disabled:ink-gold-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-gold-700);
  }
  .ink-gold-800 {
    color: var(--zbk-color-gold-800);
  }
  [class~="focus:ink-gold-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-gold-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-gold-800:hover {
      color: var(--zbk-color-gold-800);
    }
  }
  [class~="active:ink-gold-800"]:active {
    color: var(--zbk-color-gold-800);
  }
  [class~="disabled:ink-gold-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-gold-800);
  }
  .ink-gold-900 {
    color: var(--zbk-color-gold-900);
  }
  [class~="focus:ink-gold-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-gold-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-gold-900:hover {
      color: var(--zbk-color-gold-900);
    }
  }
  [class~="active:ink-gold-900"]:active {
    color: var(--zbk-color-gold-900);
  }
  [class~="disabled:ink-gold-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-gold-900);
  }
  .ink-gold-950 {
    color: var(--zbk-color-gold-950);
  }
  [class~="focus:ink-gold-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-gold-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-gold-950:hover {
      color: var(--zbk-color-gold-950);
    }
  }
  [class~="active:ink-gold-950"]:active {
    color: var(--zbk-color-gold-950);
  }
  [class~="disabled:ink-gold-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-gold-950);
  }
  .canvas-gold-50 {
    background-color: var(--zbk-color-gold-50);
  }
  [class~="focus:canvas-gold-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-gold-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-gold-50:hover {
      background-color: var(--zbk-color-gold-50);
    }
  }
  [class~="active:canvas-gold-50"]:active {
    background-color: var(--zbk-color-gold-50);
  }
  [class~="disabled:canvas-gold-50"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-gold-50);
  }
  .canvas-gold-100 {
    background-color: var(--zbk-color-gold-100);
  }
  [class~="focus:canvas-gold-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-gold-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-gold-100:hover {
      background-color: var(--zbk-color-gold-100);
    }
  }
  [class~="active:canvas-gold-100"]:active {
    background-color: var(--zbk-color-gold-100);
  }
  [class~="disabled:canvas-gold-100"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-gold-100);
  }
  .canvas-gold-200 {
    background-color: var(--zbk-color-gold-200);
  }
  [class~="focus:canvas-gold-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-gold-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-gold-200:hover {
      background-color: var(--zbk-color-gold-200);
    }
  }
  [class~="active:canvas-gold-200"]:active {
    background-color: var(--zbk-color-gold-200);
  }
  [class~="disabled:canvas-gold-200"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-gold-200);
  }
  .canvas-gold-300 {
    background-color: var(--zbk-color-gold-300);
  }
  [class~="focus:canvas-gold-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-gold-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-gold-300:hover {
      background-color: var(--zbk-color-gold-300);
    }
  }
  [class~="active:canvas-gold-300"]:active {
    background-color: var(--zbk-color-gold-300);
  }
  [class~="disabled:canvas-gold-300"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-gold-300);
  }
  .canvas-gold-400 {
    background-color: var(--zbk-color-gold-400);
  }
  [class~="focus:canvas-gold-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-gold-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-gold-400:hover {
      background-color: var(--zbk-color-gold-400);
    }
  }
  [class~="active:canvas-gold-400"]:active {
    background-color: var(--zbk-color-gold-400);
  }
  [class~="disabled:canvas-gold-400"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-gold-400);
  }
  .canvas-gold-500 {
    background-color: var(--zbk-color-gold-500);
  }
  [class~="focus:canvas-gold-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-gold-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-gold-500:hover {
      background-color: var(--zbk-color-gold-500);
    }
  }
  [class~="active:canvas-gold-500"]:active {
    background-color: var(--zbk-color-gold-500);
  }
  [class~="disabled:canvas-gold-500"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-gold-500);
  }
  .canvas-gold-600 {
    background-color: var(--zbk-color-gold-600);
  }
  [class~="focus:canvas-gold-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-gold-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-gold-600:hover {
      background-color: var(--zbk-color-gold-600);
    }
  }
  [class~="active:canvas-gold-600"]:active {
    background-color: var(--zbk-color-gold-600);
  }
  [class~="disabled:canvas-gold-600"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-gold-600);
  }
  .canvas-gold-700 {
    background-color: var(--zbk-color-gold-700);
  }
  [class~="focus:canvas-gold-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-gold-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-gold-700:hover {
      background-color: var(--zbk-color-gold-700);
    }
  }
  [class~="active:canvas-gold-700"]:active {
    background-color: var(--zbk-color-gold-700);
  }
  [class~="disabled:canvas-gold-700"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-gold-700);
  }
  .canvas-gold-800 {
    background-color: var(--zbk-color-gold-800);
  }
  [class~="focus:canvas-gold-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-gold-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-gold-800:hover {
      background-color: var(--zbk-color-gold-800);
    }
  }
  [class~="active:canvas-gold-800"]:active {
    background-color: var(--zbk-color-gold-800);
  }
  [class~="disabled:canvas-gold-800"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-gold-800);
  }
  .canvas-gold-900 {
    background-color: var(--zbk-color-gold-900);
  }
  [class~="focus:canvas-gold-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-gold-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-gold-900:hover {
      background-color: var(--zbk-color-gold-900);
    }
  }
  [class~="active:canvas-gold-900"]:active {
    background-color: var(--zbk-color-gold-900);
  }
  [class~="disabled:canvas-gold-900"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-gold-900);
  }
  .canvas-gold-950 {
    background-color: var(--zbk-color-gold-950);
  }
  [class~="focus:canvas-gold-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-gold-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-gold-950:hover {
      background-color: var(--zbk-color-gold-950);
    }
  }
  [class~="active:canvas-gold-950"]:active {
    background-color: var(--zbk-color-gold-950);
  }
  [class~="disabled:canvas-gold-950"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-gold-950);
  }
  .border-gold-50 {
    border-color: var(--zbk-color-gold-50);
  }
  [class~="focus:border-gold-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-gold-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-gold-50:hover {
      border-color: var(--zbk-color-gold-50);
    }
  }
  [class~="active:border-gold-50"]:active {
    border-color: var(--zbk-color-gold-50);
  }
  [class~="disabled:border-gold-50"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-gold-50);
  }
  .border-gold-100 {
    border-color: var(--zbk-color-gold-100);
  }
  [class~="focus:border-gold-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-gold-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-gold-100:hover {
      border-color: var(--zbk-color-gold-100);
    }
  }
  [class~="active:border-gold-100"]:active {
    border-color: var(--zbk-color-gold-100);
  }
  [class~="disabled:border-gold-100"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-gold-100);
  }
  .border-gold-200 {
    border-color: var(--zbk-color-gold-200);
  }
  [class~="focus:border-gold-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-gold-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-gold-200:hover {
      border-color: var(--zbk-color-gold-200);
    }
  }
  [class~="active:border-gold-200"]:active {
    border-color: var(--zbk-color-gold-200);
  }
  [class~="disabled:border-gold-200"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-gold-200);
  }
  .border-gold-300 {
    border-color: var(--zbk-color-gold-300);
  }
  [class~="focus:border-gold-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-gold-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-gold-300:hover {
      border-color: var(--zbk-color-gold-300);
    }
  }
  [class~="active:border-gold-300"]:active {
    border-color: var(--zbk-color-gold-300);
  }
  [class~="disabled:border-gold-300"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-gold-300);
  }
  .border-gold-400 {
    border-color: var(--zbk-color-gold-400);
  }
  [class~="focus:border-gold-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-gold-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-gold-400:hover {
      border-color: var(--zbk-color-gold-400);
    }
  }
  [class~="active:border-gold-400"]:active {
    border-color: var(--zbk-color-gold-400);
  }
  [class~="disabled:border-gold-400"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-gold-400);
  }
  .border-gold-500 {
    border-color: var(--zbk-color-gold-500);
  }
  [class~="focus:border-gold-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-gold-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-gold-500:hover {
      border-color: var(--zbk-color-gold-500);
    }
  }
  [class~="active:border-gold-500"]:active {
    border-color: var(--zbk-color-gold-500);
  }
  [class~="disabled:border-gold-500"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-gold-500);
  }
  .border-gold-600 {
    border-color: var(--zbk-color-gold-600);
  }
  [class~="focus:border-gold-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-gold-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-gold-600:hover {
      border-color: var(--zbk-color-gold-600);
    }
  }
  [class~="active:border-gold-600"]:active {
    border-color: var(--zbk-color-gold-600);
  }
  [class~="disabled:border-gold-600"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-gold-600);
  }
  .border-gold-700 {
    border-color: var(--zbk-color-gold-700);
  }
  [class~="focus:border-gold-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-gold-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-gold-700:hover {
      border-color: var(--zbk-color-gold-700);
    }
  }
  [class~="active:border-gold-700"]:active {
    border-color: var(--zbk-color-gold-700);
  }
  [class~="disabled:border-gold-700"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-gold-700);
  }
  .border-gold-800 {
    border-color: var(--zbk-color-gold-800);
  }
  [class~="focus:border-gold-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-gold-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-gold-800:hover {
      border-color: var(--zbk-color-gold-800);
    }
  }
  [class~="active:border-gold-800"]:active {
    border-color: var(--zbk-color-gold-800);
  }
  [class~="disabled:border-gold-800"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-gold-800);
  }
  .border-gold-900 {
    border-color: var(--zbk-color-gold-900);
  }
  [class~="focus:border-gold-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-gold-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-gold-900:hover {
      border-color: var(--zbk-color-gold-900);
    }
  }
  [class~="active:border-gold-900"]:active {
    border-color: var(--zbk-color-gold-900);
  }
  [class~="disabled:border-gold-900"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-gold-900);
  }
  .border-gold-950 {
    border-color: var(--zbk-color-gold-950);
  }
  [class~="focus:border-gold-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-gold-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-gold-950:hover {
      border-color: var(--zbk-color-gold-950);
    }
  }
  [class~="active:border-gold-950"]:active {
    border-color: var(--zbk-color-gold-950);
  }
  [class~="disabled:border-gold-950"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-gold-950);
  }
  .fill-gold-50 {
    fill: var(--zbk-color-gold-50);
  }
  [class~="focus:fill-gold-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-gold-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-gold-50:hover {
      fill: var(--zbk-color-gold-50);
    }
  }
  [class~="active:fill-gold-50"]:active {
    fill: var(--zbk-color-gold-50);
  }
  [class~="disabled:fill-gold-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-gold-50);
  }
  .fill-gold-100 {
    fill: var(--zbk-color-gold-100);
  }
  [class~="focus:fill-gold-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-gold-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-gold-100:hover {
      fill: var(--zbk-color-gold-100);
    }
  }
  [class~="active:fill-gold-100"]:active {
    fill: var(--zbk-color-gold-100);
  }
  [class~="disabled:fill-gold-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-gold-100);
  }
  .fill-gold-200 {
    fill: var(--zbk-color-gold-200);
  }
  [class~="focus:fill-gold-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-gold-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-gold-200:hover {
      fill: var(--zbk-color-gold-200);
    }
  }
  [class~="active:fill-gold-200"]:active {
    fill: var(--zbk-color-gold-200);
  }
  [class~="disabled:fill-gold-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-gold-200);
  }
  .fill-gold-300 {
    fill: var(--zbk-color-gold-300);
  }
  [class~="focus:fill-gold-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-gold-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-gold-300:hover {
      fill: var(--zbk-color-gold-300);
    }
  }
  [class~="active:fill-gold-300"]:active {
    fill: var(--zbk-color-gold-300);
  }
  [class~="disabled:fill-gold-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-gold-300);
  }
  .fill-gold-400 {
    fill: var(--zbk-color-gold-400);
  }
  [class~="focus:fill-gold-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-gold-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-gold-400:hover {
      fill: var(--zbk-color-gold-400);
    }
  }
  [class~="active:fill-gold-400"]:active {
    fill: var(--zbk-color-gold-400);
  }
  [class~="disabled:fill-gold-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-gold-400);
  }
  .fill-gold-500 {
    fill: var(--zbk-color-gold-500);
  }
  [class~="focus:fill-gold-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-gold-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-gold-500:hover {
      fill: var(--zbk-color-gold-500);
    }
  }
  [class~="active:fill-gold-500"]:active {
    fill: var(--zbk-color-gold-500);
  }
  [class~="disabled:fill-gold-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-gold-500);
  }
  .fill-gold-600 {
    fill: var(--zbk-color-gold-600);
  }
  [class~="focus:fill-gold-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-gold-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-gold-600:hover {
      fill: var(--zbk-color-gold-600);
    }
  }
  [class~="active:fill-gold-600"]:active {
    fill: var(--zbk-color-gold-600);
  }
  [class~="disabled:fill-gold-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-gold-600);
  }
  .fill-gold-700 {
    fill: var(--zbk-color-gold-700);
  }
  [class~="focus:fill-gold-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-gold-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-gold-700:hover {
      fill: var(--zbk-color-gold-700);
    }
  }
  [class~="active:fill-gold-700"]:active {
    fill: var(--zbk-color-gold-700);
  }
  [class~="disabled:fill-gold-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-gold-700);
  }
  .fill-gold-800 {
    fill: var(--zbk-color-gold-800);
  }
  [class~="focus:fill-gold-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-gold-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-gold-800:hover {
      fill: var(--zbk-color-gold-800);
    }
  }
  [class~="active:fill-gold-800"]:active {
    fill: var(--zbk-color-gold-800);
  }
  [class~="disabled:fill-gold-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-gold-800);
  }
  .fill-gold-900 {
    fill: var(--zbk-color-gold-900);
  }
  [class~="focus:fill-gold-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-gold-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-gold-900:hover {
      fill: var(--zbk-color-gold-900);
    }
  }
  [class~="active:fill-gold-900"]:active {
    fill: var(--zbk-color-gold-900);
  }
  [class~="disabled:fill-gold-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-gold-900);
  }
  .fill-gold-950 {
    fill: var(--zbk-color-gold-950);
  }
  [class~="focus:fill-gold-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-gold-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-gold-950:hover {
      fill: var(--zbk-color-gold-950);
    }
  }
  [class~="active:fill-gold-950"]:active {
    fill: var(--zbk-color-gold-950);
  }
  [class~="disabled:fill-gold-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-gold-950);
  }
}
:root {
  --zbk-color-green-hue: 140;
  --zbk-color-green-saturation: 70%;
  --zbk-color-green-50: hsl(
    var(--zbk-color-green-hue),
    var(--zbk-color-green-saturation),
    98%
  );
  --zbk-color-green-100: hsl(
    var(--zbk-color-green-hue),
    var(--zbk-color-green-saturation),
    93%
  );
  --zbk-color-green-200: hsl(
    var(--zbk-color-green-hue),
    var(--zbk-color-green-saturation),
    87%
  );
  --zbk-color-green-300: hsl(
    var(--zbk-color-green-hue),
    var(--zbk-color-green-saturation),
    78%
  );
  --zbk-color-green-400: hsl(
    var(--zbk-color-green-hue),
    var(--zbk-color-green-saturation),
    69%
  );
  --zbk-color-green-500: hsl(
    var(--zbk-color-green-hue),
    var(--zbk-color-green-saturation),
    58%
  );
  --zbk-color-green-600: hsl(
    var(--zbk-color-green-hue),
    var(--zbk-color-green-saturation),
    48%
  );
  --zbk-color-green-700: hsl(
    var(--zbk-color-green-hue),
    var(--zbk-color-green-saturation),
    36%
  );
  --zbk-color-green-800: hsl(
    var(--zbk-color-green-hue),
    var(--zbk-color-green-saturation),
    26%
  );
  --zbk-color-green-900: hsl(
    var(--zbk-color-green-hue),
    var(--zbk-color-green-saturation),
    18%
  );
  --zbk-color-green-950: hsl(
    var(--zbk-color-green-hue),
    var(--zbk-color-green-saturation),
    10%
  );
}
@layer utilities {
  .ink-green-50 {
    color: var(--zbk-color-green-50);
  }
  [class~="focus:ink-green-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-green-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-green-50:hover {
      color: var(--zbk-color-green-50);
    }
  }
  [class~="active:ink-green-50"]:active {
    color: var(--zbk-color-green-50);
  }
  [class~="disabled:ink-green-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-green-50);
  }
  .ink-green-100 {
    color: var(--zbk-color-green-100);
  }
  [class~="focus:ink-green-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-green-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-green-100:hover {
      color: var(--zbk-color-green-100);
    }
  }
  [class~="active:ink-green-100"]:active {
    color: var(--zbk-color-green-100);
  }
  [class~="disabled:ink-green-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-green-100);
  }
  .ink-green-200 {
    color: var(--zbk-color-green-200);
  }
  [class~="focus:ink-green-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-green-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-green-200:hover {
      color: var(--zbk-color-green-200);
    }
  }
  [class~="active:ink-green-200"]:active {
    color: var(--zbk-color-green-200);
  }
  [class~="disabled:ink-green-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-green-200);
  }
  .ink-green-300 {
    color: var(--zbk-color-green-300);
  }
  [class~="focus:ink-green-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-green-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-green-300:hover {
      color: var(--zbk-color-green-300);
    }
  }
  [class~="active:ink-green-300"]:active {
    color: var(--zbk-color-green-300);
  }
  [class~="disabled:ink-green-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-green-300);
  }
  .ink-green-400 {
    color: var(--zbk-color-green-400);
  }
  [class~="focus:ink-green-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-green-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-green-400:hover {
      color: var(--zbk-color-green-400);
    }
  }
  [class~="active:ink-green-400"]:active {
    color: var(--zbk-color-green-400);
  }
  [class~="disabled:ink-green-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-green-400);
  }
  .ink-green-500 {
    color: var(--zbk-color-green-500);
  }
  [class~="focus:ink-green-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-green-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-green-500:hover {
      color: var(--zbk-color-green-500);
    }
  }
  [class~="active:ink-green-500"]:active {
    color: var(--zbk-color-green-500);
  }
  [class~="disabled:ink-green-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-green-500);
  }
  .ink-green-600 {
    color: var(--zbk-color-green-600);
  }
  [class~="focus:ink-green-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-green-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-green-600:hover {
      color: var(--zbk-color-green-600);
    }
  }
  [class~="active:ink-green-600"]:active {
    color: var(--zbk-color-green-600);
  }
  [class~="disabled:ink-green-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-green-600);
  }
  .ink-green-700 {
    color: var(--zbk-color-green-700);
  }
  [class~="focus:ink-green-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-green-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-green-700:hover {
      color: var(--zbk-color-green-700);
    }
  }
  [class~="active:ink-green-700"]:active {
    color: var(--zbk-color-green-700);
  }
  [class~="disabled:ink-green-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-green-700);
  }
  .ink-green-800 {
    color: var(--zbk-color-green-800);
  }
  [class~="focus:ink-green-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-green-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-green-800:hover {
      color: var(--zbk-color-green-800);
    }
  }
  [class~="active:ink-green-800"]:active {
    color: var(--zbk-color-green-800);
  }
  [class~="disabled:ink-green-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-green-800);
  }
  .ink-green-900 {
    color: var(--zbk-color-green-900);
  }
  [class~="focus:ink-green-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-green-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-green-900:hover {
      color: var(--zbk-color-green-900);
    }
  }
  [class~="active:ink-green-900"]:active {
    color: var(--zbk-color-green-900);
  }
  [class~="disabled:ink-green-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-green-900);
  }
  .ink-green-950 {
    color: var(--zbk-color-green-950);
  }
  [class~="focus:ink-green-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-green-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-green-950:hover {
      color: var(--zbk-color-green-950);
    }
  }
  [class~="active:ink-green-950"]:active {
    color: var(--zbk-color-green-950);
  }
  [class~="disabled:ink-green-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-green-950);
  }
  .canvas-green-50 {
    background-color: var(--zbk-color-green-50);
  }
  [class~="focus:canvas-green-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-green-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-green-50:hover {
      background-color: var(--zbk-color-green-50);
    }
  }
  [class~="active:canvas-green-50"]:active {
    background-color: var(--zbk-color-green-50);
  }
  [class~="disabled:canvas-green-50"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-green-50);
  }
  .canvas-green-100 {
    background-color: var(--zbk-color-green-100);
  }
  [class~="focus:canvas-green-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-green-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-green-100:hover {
      background-color: var(--zbk-color-green-100);
    }
  }
  [class~="active:canvas-green-100"]:active {
    background-color: var(--zbk-color-green-100);
  }
  [class~="disabled:canvas-green-100"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-green-100);
  }
  .canvas-green-200 {
    background-color: var(--zbk-color-green-200);
  }
  [class~="focus:canvas-green-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-green-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-green-200:hover {
      background-color: var(--zbk-color-green-200);
    }
  }
  [class~="active:canvas-green-200"]:active {
    background-color: var(--zbk-color-green-200);
  }
  [class~="disabled:canvas-green-200"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-green-200);
  }
  .canvas-green-300 {
    background-color: var(--zbk-color-green-300);
  }
  [class~="focus:canvas-green-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-green-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-green-300:hover {
      background-color: var(--zbk-color-green-300);
    }
  }
  [class~="active:canvas-green-300"]:active {
    background-color: var(--zbk-color-green-300);
  }
  [class~="disabled:canvas-green-300"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-green-300);
  }
  .canvas-green-400 {
    background-color: var(--zbk-color-green-400);
  }
  [class~="focus:canvas-green-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-green-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-green-400:hover {
      background-color: var(--zbk-color-green-400);
    }
  }
  [class~="active:canvas-green-400"]:active {
    background-color: var(--zbk-color-green-400);
  }
  [class~="disabled:canvas-green-400"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-green-400);
  }
  .canvas-green-500 {
    background-color: var(--zbk-color-green-500);
  }
  [class~="focus:canvas-green-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-green-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-green-500:hover {
      background-color: var(--zbk-color-green-500);
    }
  }
  [class~="active:canvas-green-500"]:active {
    background-color: var(--zbk-color-green-500);
  }
  [class~="disabled:canvas-green-500"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-green-500);
  }
  .canvas-green-600 {
    background-color: var(--zbk-color-green-600);
  }
  [class~="focus:canvas-green-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-green-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-green-600:hover {
      background-color: var(--zbk-color-green-600);
    }
  }
  [class~="active:canvas-green-600"]:active {
    background-color: var(--zbk-color-green-600);
  }
  [class~="disabled:canvas-green-600"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-green-600);
  }
  .canvas-green-700 {
    background-color: var(--zbk-color-green-700);
  }
  [class~="focus:canvas-green-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-green-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-green-700:hover {
      background-color: var(--zbk-color-green-700);
    }
  }
  [class~="active:canvas-green-700"]:active {
    background-color: var(--zbk-color-green-700);
  }
  [class~="disabled:canvas-green-700"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-green-700);
  }
  .canvas-green-800 {
    background-color: var(--zbk-color-green-800);
  }
  [class~="focus:canvas-green-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-green-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-green-800:hover {
      background-color: var(--zbk-color-green-800);
    }
  }
  [class~="active:canvas-green-800"]:active {
    background-color: var(--zbk-color-green-800);
  }
  [class~="disabled:canvas-green-800"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-green-800);
  }
  .canvas-green-900 {
    background-color: var(--zbk-color-green-900);
  }
  [class~="focus:canvas-green-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-green-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-green-900:hover {
      background-color: var(--zbk-color-green-900);
    }
  }
  [class~="active:canvas-green-900"]:active {
    background-color: var(--zbk-color-green-900);
  }
  [class~="disabled:canvas-green-900"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-green-900);
  }
  .canvas-green-950 {
    background-color: var(--zbk-color-green-950);
  }
  [class~="focus:canvas-green-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-green-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-green-950:hover {
      background-color: var(--zbk-color-green-950);
    }
  }
  [class~="active:canvas-green-950"]:active {
    background-color: var(--zbk-color-green-950);
  }
  [class~="disabled:canvas-green-950"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-green-950);
  }
  .border-green-50 {
    border-color: var(--zbk-color-green-50);
  }
  [class~="focus:border-green-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-green-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-green-50:hover {
      border-color: var(--zbk-color-green-50);
    }
  }
  [class~="active:border-green-50"]:active {
    border-color: var(--zbk-color-green-50);
  }
  [class~="disabled:border-green-50"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-green-50);
  }
  .border-green-100 {
    border-color: var(--zbk-color-green-100);
  }
  [class~="focus:border-green-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-green-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-green-100:hover {
      border-color: var(--zbk-color-green-100);
    }
  }
  [class~="active:border-green-100"]:active {
    border-color: var(--zbk-color-green-100);
  }
  [class~="disabled:border-green-100"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-green-100);
  }
  .border-green-200 {
    border-color: var(--zbk-color-green-200);
  }
  [class~="focus:border-green-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-green-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-green-200:hover {
      border-color: var(--zbk-color-green-200);
    }
  }
  [class~="active:border-green-200"]:active {
    border-color: var(--zbk-color-green-200);
  }
  [class~="disabled:border-green-200"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-green-200);
  }
  .border-green-300 {
    border-color: var(--zbk-color-green-300);
  }
  [class~="focus:border-green-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-green-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-green-300:hover {
      border-color: var(--zbk-color-green-300);
    }
  }
  [class~="active:border-green-300"]:active {
    border-color: var(--zbk-color-green-300);
  }
  [class~="disabled:border-green-300"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-green-300);
  }
  .border-green-400 {
    border-color: var(--zbk-color-green-400);
  }
  [class~="focus:border-green-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-green-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-green-400:hover {
      border-color: var(--zbk-color-green-400);
    }
  }
  [class~="active:border-green-400"]:active {
    border-color: var(--zbk-color-green-400);
  }
  [class~="disabled:border-green-400"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-green-400);
  }
  .border-green-500 {
    border-color: var(--zbk-color-green-500);
  }
  [class~="focus:border-green-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-green-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-green-500:hover {
      border-color: var(--zbk-color-green-500);
    }
  }
  [class~="active:border-green-500"]:active {
    border-color: var(--zbk-color-green-500);
  }
  [class~="disabled:border-green-500"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-green-500);
  }
  .border-green-600 {
    border-color: var(--zbk-color-green-600);
  }
  [class~="focus:border-green-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-green-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-green-600:hover {
      border-color: var(--zbk-color-green-600);
    }
  }
  [class~="active:border-green-600"]:active {
    border-color: var(--zbk-color-green-600);
  }
  [class~="disabled:border-green-600"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-green-600);
  }
  .border-green-700 {
    border-color: var(--zbk-color-green-700);
  }
  [class~="focus:border-green-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-green-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-green-700:hover {
      border-color: var(--zbk-color-green-700);
    }
  }
  [class~="active:border-green-700"]:active {
    border-color: var(--zbk-color-green-700);
  }
  [class~="disabled:border-green-700"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-green-700);
  }
  .border-green-800 {
    border-color: var(--zbk-color-green-800);
  }
  [class~="focus:border-green-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-green-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-green-800:hover {
      border-color: var(--zbk-color-green-800);
    }
  }
  [class~="active:border-green-800"]:active {
    border-color: var(--zbk-color-green-800);
  }
  [class~="disabled:border-green-800"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-green-800);
  }
  .border-green-900 {
    border-color: var(--zbk-color-green-900);
  }
  [class~="focus:border-green-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-green-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-green-900:hover {
      border-color: var(--zbk-color-green-900);
    }
  }
  [class~="active:border-green-900"]:active {
    border-color: var(--zbk-color-green-900);
  }
  [class~="disabled:border-green-900"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-green-900);
  }
  .border-green-950 {
    border-color: var(--zbk-color-green-950);
  }
  [class~="focus:border-green-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-green-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-green-950:hover {
      border-color: var(--zbk-color-green-950);
    }
  }
  [class~="active:border-green-950"]:active {
    border-color: var(--zbk-color-green-950);
  }
  [class~="disabled:border-green-950"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-green-950);
  }
  .fill-green-50 {
    fill: var(--zbk-color-green-50);
  }
  [class~="focus:fill-green-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-green-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-green-50:hover {
      fill: var(--zbk-color-green-50);
    }
  }
  [class~="active:fill-green-50"]:active {
    fill: var(--zbk-color-green-50);
  }
  [class~="disabled:fill-green-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-green-50);
  }
  .fill-green-100 {
    fill: var(--zbk-color-green-100);
  }
  [class~="focus:fill-green-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-green-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-green-100:hover {
      fill: var(--zbk-color-green-100);
    }
  }
  [class~="active:fill-green-100"]:active {
    fill: var(--zbk-color-green-100);
  }
  [class~="disabled:fill-green-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-green-100);
  }
  .fill-green-200 {
    fill: var(--zbk-color-green-200);
  }
  [class~="focus:fill-green-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-green-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-green-200:hover {
      fill: var(--zbk-color-green-200);
    }
  }
  [class~="active:fill-green-200"]:active {
    fill: var(--zbk-color-green-200);
  }
  [class~="disabled:fill-green-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-green-200);
  }
  .fill-green-300 {
    fill: var(--zbk-color-green-300);
  }
  [class~="focus:fill-green-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-green-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-green-300:hover {
      fill: var(--zbk-color-green-300);
    }
  }
  [class~="active:fill-green-300"]:active {
    fill: var(--zbk-color-green-300);
  }
  [class~="disabled:fill-green-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-green-300);
  }
  .fill-green-400 {
    fill: var(--zbk-color-green-400);
  }
  [class~="focus:fill-green-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-green-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-green-400:hover {
      fill: var(--zbk-color-green-400);
    }
  }
  [class~="active:fill-green-400"]:active {
    fill: var(--zbk-color-green-400);
  }
  [class~="disabled:fill-green-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-green-400);
  }
  .fill-green-500 {
    fill: var(--zbk-color-green-500);
  }
  [class~="focus:fill-green-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-green-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-green-500:hover {
      fill: var(--zbk-color-green-500);
    }
  }
  [class~="active:fill-green-500"]:active {
    fill: var(--zbk-color-green-500);
  }
  [class~="disabled:fill-green-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-green-500);
  }
  .fill-green-600 {
    fill: var(--zbk-color-green-600);
  }
  [class~="focus:fill-green-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-green-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-green-600:hover {
      fill: var(--zbk-color-green-600);
    }
  }
  [class~="active:fill-green-600"]:active {
    fill: var(--zbk-color-green-600);
  }
  [class~="disabled:fill-green-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-green-600);
  }
  .fill-green-700 {
    fill: var(--zbk-color-green-700);
  }
  [class~="focus:fill-green-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-green-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-green-700:hover {
      fill: var(--zbk-color-green-700);
    }
  }
  [class~="active:fill-green-700"]:active {
    fill: var(--zbk-color-green-700);
  }
  [class~="disabled:fill-green-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-green-700);
  }
  .fill-green-800 {
    fill: var(--zbk-color-green-800);
  }
  [class~="focus:fill-green-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-green-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-green-800:hover {
      fill: var(--zbk-color-green-800);
    }
  }
  [class~="active:fill-green-800"]:active {
    fill: var(--zbk-color-green-800);
  }
  [class~="disabled:fill-green-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-green-800);
  }
  .fill-green-900 {
    fill: var(--zbk-color-green-900);
  }
  [class~="focus:fill-green-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-green-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-green-900:hover {
      fill: var(--zbk-color-green-900);
    }
  }
  [class~="active:fill-green-900"]:active {
    fill: var(--zbk-color-green-900);
  }
  [class~="disabled:fill-green-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-green-900);
  }
  .fill-green-950 {
    fill: var(--zbk-color-green-950);
  }
  [class~="focus:fill-green-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-green-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-green-950:hover {
      fill: var(--zbk-color-green-950);
    }
  }
  [class~="active:fill-green-950"]:active {
    fill: var(--zbk-color-green-950);
  }
  [class~="disabled:fill-green-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-green-950);
  }
}
:root {
  --zbk-color-indigo-hue: 228;
  --zbk-color-indigo-saturation: 78%;
  --zbk-color-indigo-50: hsl(
    var(--zbk-color-indigo-hue),
    var(--zbk-color-indigo-saturation),
    98%
  );
  --zbk-color-indigo-100: hsl(
    var(--zbk-color-indigo-hue),
    var(--zbk-color-indigo-saturation),
    93%
  );
  --zbk-color-indigo-200: hsl(
    var(--zbk-color-indigo-hue),
    var(--zbk-color-indigo-saturation),
    87%
  );
  --zbk-color-indigo-300: hsl(
    var(--zbk-color-indigo-hue),
    var(--zbk-color-indigo-saturation),
    78%
  );
  --zbk-color-indigo-400: hsl(
    var(--zbk-color-indigo-hue),
    var(--zbk-color-indigo-saturation),
    69%
  );
  --zbk-color-indigo-500: hsl(
    var(--zbk-color-indigo-hue),
    var(--zbk-color-indigo-saturation),
    58%
  );
  --zbk-color-indigo-600: hsl(
    var(--zbk-color-indigo-hue),
    var(--zbk-color-indigo-saturation),
    48%
  );
  --zbk-color-indigo-700: hsl(
    var(--zbk-color-indigo-hue),
    var(--zbk-color-indigo-saturation),
    36%
  );
  --zbk-color-indigo-800: hsl(
    var(--zbk-color-indigo-hue),
    var(--zbk-color-indigo-saturation),
    26%
  );
  --zbk-color-indigo-900: hsl(
    var(--zbk-color-indigo-hue),
    var(--zbk-color-indigo-saturation),
    18%
  );
  --zbk-color-indigo-950: hsl(
    var(--zbk-color-indigo-hue),
    var(--zbk-color-indigo-saturation),
    10%
  );
}
@layer utilities {
  .ink-indigo-50 {
    color: var(--zbk-color-indigo-50);
  }
  [class~="focus:ink-indigo-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-indigo-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-indigo-50:hover {
      color: var(--zbk-color-indigo-50);
    }
  }
  [class~="active:ink-indigo-50"]:active {
    color: var(--zbk-color-indigo-50);
  }
  [class~="disabled:ink-indigo-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-indigo-50);
  }
  .ink-indigo-100 {
    color: var(--zbk-color-indigo-100);
  }
  [class~="focus:ink-indigo-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-indigo-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-indigo-100:hover {
      color: var(--zbk-color-indigo-100);
    }
  }
  [class~="active:ink-indigo-100"]:active {
    color: var(--zbk-color-indigo-100);
  }
  [class~="disabled:ink-indigo-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-indigo-100);
  }
  .ink-indigo-200 {
    color: var(--zbk-color-indigo-200);
  }
  [class~="focus:ink-indigo-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-indigo-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-indigo-200:hover {
      color: var(--zbk-color-indigo-200);
    }
  }
  [class~="active:ink-indigo-200"]:active {
    color: var(--zbk-color-indigo-200);
  }
  [class~="disabled:ink-indigo-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-indigo-200);
  }
  .ink-indigo-300 {
    color: var(--zbk-color-indigo-300);
  }
  [class~="focus:ink-indigo-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-indigo-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-indigo-300:hover {
      color: var(--zbk-color-indigo-300);
    }
  }
  [class~="active:ink-indigo-300"]:active {
    color: var(--zbk-color-indigo-300);
  }
  [class~="disabled:ink-indigo-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-indigo-300);
  }
  .ink-indigo-400 {
    color: var(--zbk-color-indigo-400);
  }
  [class~="focus:ink-indigo-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-indigo-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-indigo-400:hover {
      color: var(--zbk-color-indigo-400);
    }
  }
  [class~="active:ink-indigo-400"]:active {
    color: var(--zbk-color-indigo-400);
  }
  [class~="disabled:ink-indigo-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-indigo-400);
  }
  .ink-indigo-500 {
    color: var(--zbk-color-indigo-500);
  }
  [class~="focus:ink-indigo-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-indigo-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-indigo-500:hover {
      color: var(--zbk-color-indigo-500);
    }
  }
  [class~="active:ink-indigo-500"]:active {
    color: var(--zbk-color-indigo-500);
  }
  [class~="disabled:ink-indigo-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-indigo-500);
  }
  .ink-indigo-600 {
    color: var(--zbk-color-indigo-600);
  }
  [class~="focus:ink-indigo-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-indigo-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-indigo-600:hover {
      color: var(--zbk-color-indigo-600);
    }
  }
  [class~="active:ink-indigo-600"]:active {
    color: var(--zbk-color-indigo-600);
  }
  [class~="disabled:ink-indigo-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-indigo-600);
  }
  .ink-indigo-700 {
    color: var(--zbk-color-indigo-700);
  }
  [class~="focus:ink-indigo-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-indigo-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-indigo-700:hover {
      color: var(--zbk-color-indigo-700);
    }
  }
  [class~="active:ink-indigo-700"]:active {
    color: var(--zbk-color-indigo-700);
  }
  [class~="disabled:ink-indigo-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-indigo-700);
  }
  .ink-indigo-800 {
    color: var(--zbk-color-indigo-800);
  }
  [class~="focus:ink-indigo-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-indigo-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-indigo-800:hover {
      color: var(--zbk-color-indigo-800);
    }
  }
  [class~="active:ink-indigo-800"]:active {
    color: var(--zbk-color-indigo-800);
  }
  [class~="disabled:ink-indigo-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-indigo-800);
  }
  .ink-indigo-900 {
    color: var(--zbk-color-indigo-900);
  }
  [class~="focus:ink-indigo-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-indigo-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-indigo-900:hover {
      color: var(--zbk-color-indigo-900);
    }
  }
  [class~="active:ink-indigo-900"]:active {
    color: var(--zbk-color-indigo-900);
  }
  [class~="disabled:ink-indigo-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-indigo-900);
  }
  .ink-indigo-950 {
    color: var(--zbk-color-indigo-950);
  }
  [class~="focus:ink-indigo-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-indigo-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-indigo-950:hover {
      color: var(--zbk-color-indigo-950);
    }
  }
  [class~="active:ink-indigo-950"]:active {
    color: var(--zbk-color-indigo-950);
  }
  [class~="disabled:ink-indigo-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-indigo-950);
  }
  .canvas-indigo-50 {
    background-color: var(--zbk-color-indigo-50);
  }
  [class~="focus:canvas-indigo-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-indigo-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-indigo-50:hover {
      background-color: var(--zbk-color-indigo-50);
    }
  }
  [class~="active:canvas-indigo-50"]:active {
    background-color: var(--zbk-color-indigo-50);
  }
  [class~="disabled:canvas-indigo-50"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-indigo-50);
  }
  .canvas-indigo-100 {
    background-color: var(--zbk-color-indigo-100);
  }
  [class~="focus:canvas-indigo-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-indigo-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-indigo-100:hover {
      background-color: var(--zbk-color-indigo-100);
    }
  }
  [class~="active:canvas-indigo-100"]:active {
    background-color: var(--zbk-color-indigo-100);
  }
  [class~="disabled:canvas-indigo-100"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-indigo-100);
  }
  .canvas-indigo-200 {
    background-color: var(--zbk-color-indigo-200);
  }
  [class~="focus:canvas-indigo-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-indigo-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-indigo-200:hover {
      background-color: var(--zbk-color-indigo-200);
    }
  }
  [class~="active:canvas-indigo-200"]:active {
    background-color: var(--zbk-color-indigo-200);
  }
  [class~="disabled:canvas-indigo-200"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-indigo-200);
  }
  .canvas-indigo-300 {
    background-color: var(--zbk-color-indigo-300);
  }
  [class~="focus:canvas-indigo-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-indigo-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-indigo-300:hover {
      background-color: var(--zbk-color-indigo-300);
    }
  }
  [class~="active:canvas-indigo-300"]:active {
    background-color: var(--zbk-color-indigo-300);
  }
  [class~="disabled:canvas-indigo-300"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-indigo-300);
  }
  .canvas-indigo-400 {
    background-color: var(--zbk-color-indigo-400);
  }
  [class~="focus:canvas-indigo-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-indigo-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-indigo-400:hover {
      background-color: var(--zbk-color-indigo-400);
    }
  }
  [class~="active:canvas-indigo-400"]:active {
    background-color: var(--zbk-color-indigo-400);
  }
  [class~="disabled:canvas-indigo-400"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-indigo-400);
  }
  .canvas-indigo-500 {
    background-color: var(--zbk-color-indigo-500);
  }
  [class~="focus:canvas-indigo-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-indigo-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-indigo-500:hover {
      background-color: var(--zbk-color-indigo-500);
    }
  }
  [class~="active:canvas-indigo-500"]:active {
    background-color: var(--zbk-color-indigo-500);
  }
  [class~="disabled:canvas-indigo-500"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-indigo-500);
  }
  .canvas-indigo-600 {
    background-color: var(--zbk-color-indigo-600);
  }
  [class~="focus:canvas-indigo-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-indigo-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-indigo-600:hover {
      background-color: var(--zbk-color-indigo-600);
    }
  }
  [class~="active:canvas-indigo-600"]:active {
    background-color: var(--zbk-color-indigo-600);
  }
  [class~="disabled:canvas-indigo-600"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-indigo-600);
  }
  .canvas-indigo-700 {
    background-color: var(--zbk-color-indigo-700);
  }
  [class~="focus:canvas-indigo-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-indigo-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-indigo-700:hover {
      background-color: var(--zbk-color-indigo-700);
    }
  }
  [class~="active:canvas-indigo-700"]:active {
    background-color: var(--zbk-color-indigo-700);
  }
  [class~="disabled:canvas-indigo-700"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-indigo-700);
  }
  .canvas-indigo-800 {
    background-color: var(--zbk-color-indigo-800);
  }
  [class~="focus:canvas-indigo-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-indigo-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-indigo-800:hover {
      background-color: var(--zbk-color-indigo-800);
    }
  }
  [class~="active:canvas-indigo-800"]:active {
    background-color: var(--zbk-color-indigo-800);
  }
  [class~="disabled:canvas-indigo-800"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-indigo-800);
  }
  .canvas-indigo-900 {
    background-color: var(--zbk-color-indigo-900);
  }
  [class~="focus:canvas-indigo-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-indigo-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-indigo-900:hover {
      background-color: var(--zbk-color-indigo-900);
    }
  }
  [class~="active:canvas-indigo-900"]:active {
    background-color: var(--zbk-color-indigo-900);
  }
  [class~="disabled:canvas-indigo-900"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-indigo-900);
  }
  .canvas-indigo-950 {
    background-color: var(--zbk-color-indigo-950);
  }
  [class~="focus:canvas-indigo-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-indigo-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-indigo-950:hover {
      background-color: var(--zbk-color-indigo-950);
    }
  }
  [class~="active:canvas-indigo-950"]:active {
    background-color: var(--zbk-color-indigo-950);
  }
  [class~="disabled:canvas-indigo-950"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-indigo-950);
  }
  .border-indigo-50 {
    border-color: var(--zbk-color-indigo-50);
  }
  [class~="focus:border-indigo-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-indigo-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-indigo-50:hover {
      border-color: var(--zbk-color-indigo-50);
    }
  }
  [class~="active:border-indigo-50"]:active {
    border-color: var(--zbk-color-indigo-50);
  }
  [class~="disabled:border-indigo-50"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-indigo-50);
  }
  .border-indigo-100 {
    border-color: var(--zbk-color-indigo-100);
  }
  [class~="focus:border-indigo-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-indigo-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-indigo-100:hover {
      border-color: var(--zbk-color-indigo-100);
    }
  }
  [class~="active:border-indigo-100"]:active {
    border-color: var(--zbk-color-indigo-100);
  }
  [class~="disabled:border-indigo-100"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-indigo-100);
  }
  .border-indigo-200 {
    border-color: var(--zbk-color-indigo-200);
  }
  [class~="focus:border-indigo-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-indigo-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-indigo-200:hover {
      border-color: var(--zbk-color-indigo-200);
    }
  }
  [class~="active:border-indigo-200"]:active {
    border-color: var(--zbk-color-indigo-200);
  }
  [class~="disabled:border-indigo-200"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-indigo-200);
  }
  .border-indigo-300 {
    border-color: var(--zbk-color-indigo-300);
  }
  [class~="focus:border-indigo-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-indigo-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-indigo-300:hover {
      border-color: var(--zbk-color-indigo-300);
    }
  }
  [class~="active:border-indigo-300"]:active {
    border-color: var(--zbk-color-indigo-300);
  }
  [class~="disabled:border-indigo-300"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-indigo-300);
  }
  .border-indigo-400 {
    border-color: var(--zbk-color-indigo-400);
  }
  [class~="focus:border-indigo-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-indigo-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-indigo-400:hover {
      border-color: var(--zbk-color-indigo-400);
    }
  }
  [class~="active:border-indigo-400"]:active {
    border-color: var(--zbk-color-indigo-400);
  }
  [class~="disabled:border-indigo-400"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-indigo-400);
  }
  .border-indigo-500 {
    border-color: var(--zbk-color-indigo-500);
  }
  [class~="focus:border-indigo-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-indigo-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-indigo-500:hover {
      border-color: var(--zbk-color-indigo-500);
    }
  }
  [class~="active:border-indigo-500"]:active {
    border-color: var(--zbk-color-indigo-500);
  }
  [class~="disabled:border-indigo-500"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-indigo-500);
  }
  .border-indigo-600 {
    border-color: var(--zbk-color-indigo-600);
  }
  [class~="focus:border-indigo-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-indigo-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-indigo-600:hover {
      border-color: var(--zbk-color-indigo-600);
    }
  }
  [class~="active:border-indigo-600"]:active {
    border-color: var(--zbk-color-indigo-600);
  }
  [class~="disabled:border-indigo-600"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-indigo-600);
  }
  .border-indigo-700 {
    border-color: var(--zbk-color-indigo-700);
  }
  [class~="focus:border-indigo-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-indigo-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-indigo-700:hover {
      border-color: var(--zbk-color-indigo-700);
    }
  }
  [class~="active:border-indigo-700"]:active {
    border-color: var(--zbk-color-indigo-700);
  }
  [class~="disabled:border-indigo-700"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-indigo-700);
  }
  .border-indigo-800 {
    border-color: var(--zbk-color-indigo-800);
  }
  [class~="focus:border-indigo-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-indigo-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-indigo-800:hover {
      border-color: var(--zbk-color-indigo-800);
    }
  }
  [class~="active:border-indigo-800"]:active {
    border-color: var(--zbk-color-indigo-800);
  }
  [class~="disabled:border-indigo-800"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-indigo-800);
  }
  .border-indigo-900 {
    border-color: var(--zbk-color-indigo-900);
  }
  [class~="focus:border-indigo-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-indigo-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-indigo-900:hover {
      border-color: var(--zbk-color-indigo-900);
    }
  }
  [class~="active:border-indigo-900"]:active {
    border-color: var(--zbk-color-indigo-900);
  }
  [class~="disabled:border-indigo-900"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-indigo-900);
  }
  .border-indigo-950 {
    border-color: var(--zbk-color-indigo-950);
  }
  [class~="focus:border-indigo-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-indigo-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-indigo-950:hover {
      border-color: var(--zbk-color-indigo-950);
    }
  }
  [class~="active:border-indigo-950"]:active {
    border-color: var(--zbk-color-indigo-950);
  }
  [class~="disabled:border-indigo-950"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-indigo-950);
  }
  .fill-indigo-50 {
    fill: var(--zbk-color-indigo-50);
  }
  [class~="focus:fill-indigo-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-indigo-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-indigo-50:hover {
      fill: var(--zbk-color-indigo-50);
    }
  }
  [class~="active:fill-indigo-50"]:active {
    fill: var(--zbk-color-indigo-50);
  }
  [class~="disabled:fill-indigo-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-indigo-50);
  }
  .fill-indigo-100 {
    fill: var(--zbk-color-indigo-100);
  }
  [class~="focus:fill-indigo-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-indigo-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-indigo-100:hover {
      fill: var(--zbk-color-indigo-100);
    }
  }
  [class~="active:fill-indigo-100"]:active {
    fill: var(--zbk-color-indigo-100);
  }
  [class~="disabled:fill-indigo-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-indigo-100);
  }
  .fill-indigo-200 {
    fill: var(--zbk-color-indigo-200);
  }
  [class~="focus:fill-indigo-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-indigo-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-indigo-200:hover {
      fill: var(--zbk-color-indigo-200);
    }
  }
  [class~="active:fill-indigo-200"]:active {
    fill: var(--zbk-color-indigo-200);
  }
  [class~="disabled:fill-indigo-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-indigo-200);
  }
  .fill-indigo-300 {
    fill: var(--zbk-color-indigo-300);
  }
  [class~="focus:fill-indigo-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-indigo-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-indigo-300:hover {
      fill: var(--zbk-color-indigo-300);
    }
  }
  [class~="active:fill-indigo-300"]:active {
    fill: var(--zbk-color-indigo-300);
  }
  [class~="disabled:fill-indigo-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-indigo-300);
  }
  .fill-indigo-400 {
    fill: var(--zbk-color-indigo-400);
  }
  [class~="focus:fill-indigo-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-indigo-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-indigo-400:hover {
      fill: var(--zbk-color-indigo-400);
    }
  }
  [class~="active:fill-indigo-400"]:active {
    fill: var(--zbk-color-indigo-400);
  }
  [class~="disabled:fill-indigo-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-indigo-400);
  }
  .fill-indigo-500 {
    fill: var(--zbk-color-indigo-500);
  }
  [class~="focus:fill-indigo-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-indigo-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-indigo-500:hover {
      fill: var(--zbk-color-indigo-500);
    }
  }
  [class~="active:fill-indigo-500"]:active {
    fill: var(--zbk-color-indigo-500);
  }
  [class~="disabled:fill-indigo-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-indigo-500);
  }
  .fill-indigo-600 {
    fill: var(--zbk-color-indigo-600);
  }
  [class~="focus:fill-indigo-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-indigo-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-indigo-600:hover {
      fill: var(--zbk-color-indigo-600);
    }
  }
  [class~="active:fill-indigo-600"]:active {
    fill: var(--zbk-color-indigo-600);
  }
  [class~="disabled:fill-indigo-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-indigo-600);
  }
  .fill-indigo-700 {
    fill: var(--zbk-color-indigo-700);
  }
  [class~="focus:fill-indigo-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-indigo-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-indigo-700:hover {
      fill: var(--zbk-color-indigo-700);
    }
  }
  [class~="active:fill-indigo-700"]:active {
    fill: var(--zbk-color-indigo-700);
  }
  [class~="disabled:fill-indigo-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-indigo-700);
  }
  .fill-indigo-800 {
    fill: var(--zbk-color-indigo-800);
  }
  [class~="focus:fill-indigo-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-indigo-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-indigo-800:hover {
      fill: var(--zbk-color-indigo-800);
    }
  }
  [class~="active:fill-indigo-800"]:active {
    fill: var(--zbk-color-indigo-800);
  }
  [class~="disabled:fill-indigo-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-indigo-800);
  }
  .fill-indigo-900 {
    fill: var(--zbk-color-indigo-900);
  }
  [class~="focus:fill-indigo-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-indigo-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-indigo-900:hover {
      fill: var(--zbk-color-indigo-900);
    }
  }
  [class~="active:fill-indigo-900"]:active {
    fill: var(--zbk-color-indigo-900);
  }
  [class~="disabled:fill-indigo-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-indigo-900);
  }
  .fill-indigo-950 {
    fill: var(--zbk-color-indigo-950);
  }
  [class~="focus:fill-indigo-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-indigo-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-indigo-950:hover {
      fill: var(--zbk-color-indigo-950);
    }
  }
  [class~="active:fill-indigo-950"]:active {
    fill: var(--zbk-color-indigo-950);
  }
  [class~="disabled:fill-indigo-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-indigo-950);
  }
}
:root {
  --zbk-color-lavenderfield-hue: 260;
  --zbk-color-lavenderfield-saturation: 60%;
  --zbk-color-lavenderfield-50: hsl(
    var(--zbk-color-lavenderfield-hue),
    var(--zbk-color-lavenderfield-saturation),
    98%
  );
  --zbk-color-lavenderfield-100: hsl(
    var(--zbk-color-lavenderfield-hue),
    var(--zbk-color-lavenderfield-saturation),
    93%
  );
  --zbk-color-lavenderfield-200: hsl(
    var(--zbk-color-lavenderfield-hue),
    var(--zbk-color-lavenderfield-saturation),
    87%
  );
  --zbk-color-lavenderfield-300: hsl(
    var(--zbk-color-lavenderfield-hue),
    var(--zbk-color-lavenderfield-saturation),
    78%
  );
  --zbk-color-lavenderfield-400: hsl(
    var(--zbk-color-lavenderfield-hue),
    var(--zbk-color-lavenderfield-saturation),
    69%
  );
  --zbk-color-lavenderfield-500: hsl(
    var(--zbk-color-lavenderfield-hue),
    var(--zbk-color-lavenderfield-saturation),
    58%
  );
  --zbk-color-lavenderfield-600: hsl(
    var(--zbk-color-lavenderfield-hue),
    var(--zbk-color-lavenderfield-saturation),
    48%
  );
  --zbk-color-lavenderfield-700: hsl(
    var(--zbk-color-lavenderfield-hue),
    var(--zbk-color-lavenderfield-saturation),
    36%
  );
  --zbk-color-lavenderfield-800: hsl(
    var(--zbk-color-lavenderfield-hue),
    var(--zbk-color-lavenderfield-saturation),
    26%
  );
  --zbk-color-lavenderfield-900: hsl(
    var(--zbk-color-lavenderfield-hue),
    var(--zbk-color-lavenderfield-saturation),
    18%
  );
  --zbk-color-lavenderfield-950: hsl(
    var(--zbk-color-lavenderfield-hue),
    var(--zbk-color-lavenderfield-saturation),
    10%
  );
}
@layer utilities {
  .ink-lavenderfield-50 {
    color: var(--zbk-color-lavenderfield-50);
  }
  [class~="focus:ink-lavenderfield-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-lavenderfield-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-lavenderfield-50:hover {
      color: var(--zbk-color-lavenderfield-50);
    }
  }
  [class~="active:ink-lavenderfield-50"]:active {
    color: var(--zbk-color-lavenderfield-50);
  }
  [class~="disabled:ink-lavenderfield-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-lavenderfield-50);
  }
  .ink-lavenderfield-100 {
    color: var(--zbk-color-lavenderfield-100);
  }
  [class~="focus:ink-lavenderfield-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-lavenderfield-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-lavenderfield-100:hover {
      color: var(--zbk-color-lavenderfield-100);
    }
  }
  [class~="active:ink-lavenderfield-100"]:active {
    color: var(--zbk-color-lavenderfield-100);
  }
  [class~="disabled:ink-lavenderfield-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-lavenderfield-100);
  }
  .ink-lavenderfield-200 {
    color: var(--zbk-color-lavenderfield-200);
  }
  [class~="focus:ink-lavenderfield-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-lavenderfield-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-lavenderfield-200:hover {
      color: var(--zbk-color-lavenderfield-200);
    }
  }
  [class~="active:ink-lavenderfield-200"]:active {
    color: var(--zbk-color-lavenderfield-200);
  }
  [class~="disabled:ink-lavenderfield-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-lavenderfield-200);
  }
  .ink-lavenderfield-300 {
    color: var(--zbk-color-lavenderfield-300);
  }
  [class~="focus:ink-lavenderfield-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-lavenderfield-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-lavenderfield-300:hover {
      color: var(--zbk-color-lavenderfield-300);
    }
  }
  [class~="active:ink-lavenderfield-300"]:active {
    color: var(--zbk-color-lavenderfield-300);
  }
  [class~="disabled:ink-lavenderfield-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-lavenderfield-300);
  }
  .ink-lavenderfield-400 {
    color: var(--zbk-color-lavenderfield-400);
  }
  [class~="focus:ink-lavenderfield-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-lavenderfield-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-lavenderfield-400:hover {
      color: var(--zbk-color-lavenderfield-400);
    }
  }
  [class~="active:ink-lavenderfield-400"]:active {
    color: var(--zbk-color-lavenderfield-400);
  }
  [class~="disabled:ink-lavenderfield-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-lavenderfield-400);
  }
  .ink-lavenderfield-500 {
    color: var(--zbk-color-lavenderfield-500);
  }
  [class~="focus:ink-lavenderfield-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-lavenderfield-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-lavenderfield-500:hover {
      color: var(--zbk-color-lavenderfield-500);
    }
  }
  [class~="active:ink-lavenderfield-500"]:active {
    color: var(--zbk-color-lavenderfield-500);
  }
  [class~="disabled:ink-lavenderfield-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-lavenderfield-500);
  }
  .ink-lavenderfield-600 {
    color: var(--zbk-color-lavenderfield-600);
  }
  [class~="focus:ink-lavenderfield-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-lavenderfield-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-lavenderfield-600:hover {
      color: var(--zbk-color-lavenderfield-600);
    }
  }
  [class~="active:ink-lavenderfield-600"]:active {
    color: var(--zbk-color-lavenderfield-600);
  }
  [class~="disabled:ink-lavenderfield-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-lavenderfield-600);
  }
  .ink-lavenderfield-700 {
    color: var(--zbk-color-lavenderfield-700);
  }
  [class~="focus:ink-lavenderfield-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-lavenderfield-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-lavenderfield-700:hover {
      color: var(--zbk-color-lavenderfield-700);
    }
  }
  [class~="active:ink-lavenderfield-700"]:active {
    color: var(--zbk-color-lavenderfield-700);
  }
  [class~="disabled:ink-lavenderfield-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-lavenderfield-700);
  }
  .ink-lavenderfield-800 {
    color: var(--zbk-color-lavenderfield-800);
  }
  [class~="focus:ink-lavenderfield-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-lavenderfield-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-lavenderfield-800:hover {
      color: var(--zbk-color-lavenderfield-800);
    }
  }
  [class~="active:ink-lavenderfield-800"]:active {
    color: var(--zbk-color-lavenderfield-800);
  }
  [class~="disabled:ink-lavenderfield-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-lavenderfield-800);
  }
  .ink-lavenderfield-900 {
    color: var(--zbk-color-lavenderfield-900);
  }
  [class~="focus:ink-lavenderfield-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-lavenderfield-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-lavenderfield-900:hover {
      color: var(--zbk-color-lavenderfield-900);
    }
  }
  [class~="active:ink-lavenderfield-900"]:active {
    color: var(--zbk-color-lavenderfield-900);
  }
  [class~="disabled:ink-lavenderfield-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-lavenderfield-900);
  }
  .ink-lavenderfield-950 {
    color: var(--zbk-color-lavenderfield-950);
  }
  [class~="focus:ink-lavenderfield-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-lavenderfield-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-lavenderfield-950:hover {
      color: var(--zbk-color-lavenderfield-950);
    }
  }
  [class~="active:ink-lavenderfield-950"]:active {
    color: var(--zbk-color-lavenderfield-950);
  }
  [class~="disabled:ink-lavenderfield-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-color-lavenderfield-950);
  }
  .canvas-lavenderfield-50 {
    background-color: var(--zbk-color-lavenderfield-50);
  }
  [class~="focus:canvas-lavenderfield-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-lavenderfield-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-lavenderfield-50:hover {
      background-color: var(--zbk-color-lavenderfield-50);
    }
  }
  [class~="active:canvas-lavenderfield-50"]:active {
    background-color: var(--zbk-color-lavenderfield-50);
  }
  [class~="disabled:canvas-lavenderfield-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-lavenderfield-50);
  }
  .canvas-lavenderfield-100 {
    background-color: var(--zbk-color-lavenderfield-100);
  }
  [class~="focus:canvas-lavenderfield-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-lavenderfield-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-lavenderfield-100:hover {
      background-color: var(--zbk-color-lavenderfield-100);
    }
  }
  [class~="active:canvas-lavenderfield-100"]:active {
    background-color: var(--zbk-color-lavenderfield-100);
  }
  [class~="disabled:canvas-lavenderfield-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-lavenderfield-100);
  }
  .canvas-lavenderfield-200 {
    background-color: var(--zbk-color-lavenderfield-200);
  }
  [class~="focus:canvas-lavenderfield-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-lavenderfield-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-lavenderfield-200:hover {
      background-color: var(--zbk-color-lavenderfield-200);
    }
  }
  [class~="active:canvas-lavenderfield-200"]:active {
    background-color: var(--zbk-color-lavenderfield-200);
  }
  [class~="disabled:canvas-lavenderfield-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-lavenderfield-200);
  }
  .canvas-lavenderfield-300 {
    background-color: var(--zbk-color-lavenderfield-300);
  }
  [class~="focus:canvas-lavenderfield-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-lavenderfield-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-lavenderfield-300:hover {
      background-color: var(--zbk-color-lavenderfield-300);
    }
  }
  [class~="active:canvas-lavenderfield-300"]:active {
    background-color: var(--zbk-color-lavenderfield-300);
  }
  [class~="disabled:canvas-lavenderfield-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-lavenderfield-300);
  }
  .canvas-lavenderfield-400 {
    background-color: var(--zbk-color-lavenderfield-400);
  }
  [class~="focus:canvas-lavenderfield-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-lavenderfield-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-lavenderfield-400:hover {
      background-color: var(--zbk-color-lavenderfield-400);
    }
  }
  [class~="active:canvas-lavenderfield-400"]:active {
    background-color: var(--zbk-color-lavenderfield-400);
  }
  [class~="disabled:canvas-lavenderfield-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-lavenderfield-400);
  }
  .canvas-lavenderfield-500 {
    background-color: var(--zbk-color-lavenderfield-500);
  }
  [class~="focus:canvas-lavenderfield-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-lavenderfield-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-lavenderfield-500:hover {
      background-color: var(--zbk-color-lavenderfield-500);
    }
  }
  [class~="active:canvas-lavenderfield-500"]:active {
    background-color: var(--zbk-color-lavenderfield-500);
  }
  [class~="disabled:canvas-lavenderfield-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-lavenderfield-500);
  }
  .canvas-lavenderfield-600 {
    background-color: var(--zbk-color-lavenderfield-600);
  }
  [class~="focus:canvas-lavenderfield-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-lavenderfield-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-lavenderfield-600:hover {
      background-color: var(--zbk-color-lavenderfield-600);
    }
  }
  [class~="active:canvas-lavenderfield-600"]:active {
    background-color: var(--zbk-color-lavenderfield-600);
  }
  [class~="disabled:canvas-lavenderfield-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-lavenderfield-600);
  }
  .canvas-lavenderfield-700 {
    background-color: var(--zbk-color-lavenderfield-700);
  }
  [class~="focus:canvas-lavenderfield-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-lavenderfield-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-lavenderfield-700:hover {
      background-color: var(--zbk-color-lavenderfield-700);
    }
  }
  [class~="active:canvas-lavenderfield-700"]:active {
    background-color: var(--zbk-color-lavenderfield-700);
  }
  [class~="disabled:canvas-lavenderfield-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-lavenderfield-700);
  }
  .canvas-lavenderfield-800 {
    background-color: var(--zbk-color-lavenderfield-800);
  }
  [class~="focus:canvas-lavenderfield-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-lavenderfield-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-lavenderfield-800:hover {
      background-color: var(--zbk-color-lavenderfield-800);
    }
  }
  [class~="active:canvas-lavenderfield-800"]:active {
    background-color: var(--zbk-color-lavenderfield-800);
  }
  [class~="disabled:canvas-lavenderfield-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-lavenderfield-800);
  }
  .canvas-lavenderfield-900 {
    background-color: var(--zbk-color-lavenderfield-900);
  }
  [class~="focus:canvas-lavenderfield-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-lavenderfield-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-lavenderfield-900:hover {
      background-color: var(--zbk-color-lavenderfield-900);
    }
  }
  [class~="active:canvas-lavenderfield-900"]:active {
    background-color: var(--zbk-color-lavenderfield-900);
  }
  [class~="disabled:canvas-lavenderfield-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-lavenderfield-900);
  }
  .canvas-lavenderfield-950 {
    background-color: var(--zbk-color-lavenderfield-950);
  }
  [class~="focus:canvas-lavenderfield-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-lavenderfield-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-lavenderfield-950:hover {
      background-color: var(--zbk-color-lavenderfield-950);
    }
  }
  [class~="active:canvas-lavenderfield-950"]:active {
    background-color: var(--zbk-color-lavenderfield-950);
  }
  [class~="disabled:canvas-lavenderfield-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-lavenderfield-950);
  }
  .border-lavenderfield-50 {
    border-color: var(--zbk-color-lavenderfield-50);
  }
  [class~="focus:border-lavenderfield-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-lavenderfield-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-lavenderfield-50:hover {
      border-color: var(--zbk-color-lavenderfield-50);
    }
  }
  [class~="active:border-lavenderfield-50"]:active {
    border-color: var(--zbk-color-lavenderfield-50);
  }
  [class~="disabled:border-lavenderfield-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-lavenderfield-50);
  }
  .border-lavenderfield-100 {
    border-color: var(--zbk-color-lavenderfield-100);
  }
  [class~="focus:border-lavenderfield-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-lavenderfield-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-lavenderfield-100:hover {
      border-color: var(--zbk-color-lavenderfield-100);
    }
  }
  [class~="active:border-lavenderfield-100"]:active {
    border-color: var(--zbk-color-lavenderfield-100);
  }
  [class~="disabled:border-lavenderfield-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-lavenderfield-100);
  }
  .border-lavenderfield-200 {
    border-color: var(--zbk-color-lavenderfield-200);
  }
  [class~="focus:border-lavenderfield-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-lavenderfield-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-lavenderfield-200:hover {
      border-color: var(--zbk-color-lavenderfield-200);
    }
  }
  [class~="active:border-lavenderfield-200"]:active {
    border-color: var(--zbk-color-lavenderfield-200);
  }
  [class~="disabled:border-lavenderfield-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-lavenderfield-200);
  }
  .border-lavenderfield-300 {
    border-color: var(--zbk-color-lavenderfield-300);
  }
  [class~="focus:border-lavenderfield-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-lavenderfield-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-lavenderfield-300:hover {
      border-color: var(--zbk-color-lavenderfield-300);
    }
  }
  [class~="active:border-lavenderfield-300"]:active {
    border-color: var(--zbk-color-lavenderfield-300);
  }
  [class~="disabled:border-lavenderfield-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-lavenderfield-300);
  }
  .border-lavenderfield-400 {
    border-color: var(--zbk-color-lavenderfield-400);
  }
  [class~="focus:border-lavenderfield-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-lavenderfield-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-lavenderfield-400:hover {
      border-color: var(--zbk-color-lavenderfield-400);
    }
  }
  [class~="active:border-lavenderfield-400"]:active {
    border-color: var(--zbk-color-lavenderfield-400);
  }
  [class~="disabled:border-lavenderfield-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-lavenderfield-400);
  }
  .border-lavenderfield-500 {
    border-color: var(--zbk-color-lavenderfield-500);
  }
  [class~="focus:border-lavenderfield-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-lavenderfield-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-lavenderfield-500:hover {
      border-color: var(--zbk-color-lavenderfield-500);
    }
  }
  [class~="active:border-lavenderfield-500"]:active {
    border-color: var(--zbk-color-lavenderfield-500);
  }
  [class~="disabled:border-lavenderfield-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-lavenderfield-500);
  }
  .border-lavenderfield-600 {
    border-color: var(--zbk-color-lavenderfield-600);
  }
  [class~="focus:border-lavenderfield-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-lavenderfield-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-lavenderfield-600:hover {
      border-color: var(--zbk-color-lavenderfield-600);
    }
  }
  [class~="active:border-lavenderfield-600"]:active {
    border-color: var(--zbk-color-lavenderfield-600);
  }
  [class~="disabled:border-lavenderfield-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-lavenderfield-600);
  }
  .border-lavenderfield-700 {
    border-color: var(--zbk-color-lavenderfield-700);
  }
  [class~="focus:border-lavenderfield-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-lavenderfield-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-lavenderfield-700:hover {
      border-color: var(--zbk-color-lavenderfield-700);
    }
  }
  [class~="active:border-lavenderfield-700"]:active {
    border-color: var(--zbk-color-lavenderfield-700);
  }
  [class~="disabled:border-lavenderfield-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-lavenderfield-700);
  }
  .border-lavenderfield-800 {
    border-color: var(--zbk-color-lavenderfield-800);
  }
  [class~="focus:border-lavenderfield-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-lavenderfield-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-lavenderfield-800:hover {
      border-color: var(--zbk-color-lavenderfield-800);
    }
  }
  [class~="active:border-lavenderfield-800"]:active {
    border-color: var(--zbk-color-lavenderfield-800);
  }
  [class~="disabled:border-lavenderfield-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-lavenderfield-800);
  }
  .border-lavenderfield-900 {
    border-color: var(--zbk-color-lavenderfield-900);
  }
  [class~="focus:border-lavenderfield-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-lavenderfield-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-lavenderfield-900:hover {
      border-color: var(--zbk-color-lavenderfield-900);
    }
  }
  [class~="active:border-lavenderfield-900"]:active {
    border-color: var(--zbk-color-lavenderfield-900);
  }
  [class~="disabled:border-lavenderfield-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-lavenderfield-900);
  }
  .border-lavenderfield-950 {
    border-color: var(--zbk-color-lavenderfield-950);
  }
  [class~="focus:border-lavenderfield-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-lavenderfield-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-lavenderfield-950:hover {
      border-color: var(--zbk-color-lavenderfield-950);
    }
  }
  [class~="active:border-lavenderfield-950"]:active {
    border-color: var(--zbk-color-lavenderfield-950);
  }
  [class~="disabled:border-lavenderfield-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-lavenderfield-950);
  }
  .fill-lavenderfield-50 {
    fill: var(--zbk-color-lavenderfield-50);
  }
  [class~="focus:fill-lavenderfield-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-lavenderfield-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-lavenderfield-50:hover {
      fill: var(--zbk-color-lavenderfield-50);
    }
  }
  [class~="active:fill-lavenderfield-50"]:active {
    fill: var(--zbk-color-lavenderfield-50);
  }
  [class~="disabled:fill-lavenderfield-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-lavenderfield-50);
  }
  .fill-lavenderfield-100 {
    fill: var(--zbk-color-lavenderfield-100);
  }
  [class~="focus:fill-lavenderfield-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-lavenderfield-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-lavenderfield-100:hover {
      fill: var(--zbk-color-lavenderfield-100);
    }
  }
  [class~="active:fill-lavenderfield-100"]:active {
    fill: var(--zbk-color-lavenderfield-100);
  }
  [class~="disabled:fill-lavenderfield-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-lavenderfield-100);
  }
  .fill-lavenderfield-200 {
    fill: var(--zbk-color-lavenderfield-200);
  }
  [class~="focus:fill-lavenderfield-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-lavenderfield-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-lavenderfield-200:hover {
      fill: var(--zbk-color-lavenderfield-200);
    }
  }
  [class~="active:fill-lavenderfield-200"]:active {
    fill: var(--zbk-color-lavenderfield-200);
  }
  [class~="disabled:fill-lavenderfield-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-lavenderfield-200);
  }
  .fill-lavenderfield-300 {
    fill: var(--zbk-color-lavenderfield-300);
  }
  [class~="focus:fill-lavenderfield-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-lavenderfield-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-lavenderfield-300:hover {
      fill: var(--zbk-color-lavenderfield-300);
    }
  }
  [class~="active:fill-lavenderfield-300"]:active {
    fill: var(--zbk-color-lavenderfield-300);
  }
  [class~="disabled:fill-lavenderfield-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-lavenderfield-300);
  }
  .fill-lavenderfield-400 {
    fill: var(--zbk-color-lavenderfield-400);
  }
  [class~="focus:fill-lavenderfield-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-lavenderfield-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-lavenderfield-400:hover {
      fill: var(--zbk-color-lavenderfield-400);
    }
  }
  [class~="active:fill-lavenderfield-400"]:active {
    fill: var(--zbk-color-lavenderfield-400);
  }
  [class~="disabled:fill-lavenderfield-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-lavenderfield-400);
  }
  .fill-lavenderfield-500 {
    fill: var(--zbk-color-lavenderfield-500);
  }
  [class~="focus:fill-lavenderfield-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-lavenderfield-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-lavenderfield-500:hover {
      fill: var(--zbk-color-lavenderfield-500);
    }
  }
  [class~="active:fill-lavenderfield-500"]:active {
    fill: var(--zbk-color-lavenderfield-500);
  }
  [class~="disabled:fill-lavenderfield-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-lavenderfield-500);
  }
  .fill-lavenderfield-600 {
    fill: var(--zbk-color-lavenderfield-600);
  }
  [class~="focus:fill-lavenderfield-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-lavenderfield-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-lavenderfield-600:hover {
      fill: var(--zbk-color-lavenderfield-600);
    }
  }
  [class~="active:fill-lavenderfield-600"]:active {
    fill: var(--zbk-color-lavenderfield-600);
  }
  [class~="disabled:fill-lavenderfield-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-lavenderfield-600);
  }
  .fill-lavenderfield-700 {
    fill: var(--zbk-color-lavenderfield-700);
  }
  [class~="focus:fill-lavenderfield-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-lavenderfield-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-lavenderfield-700:hover {
      fill: var(--zbk-color-lavenderfield-700);
    }
  }
  [class~="active:fill-lavenderfield-700"]:active {
    fill: var(--zbk-color-lavenderfield-700);
  }
  [class~="disabled:fill-lavenderfield-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-lavenderfield-700);
  }
  .fill-lavenderfield-800 {
    fill: var(--zbk-color-lavenderfield-800);
  }
  [class~="focus:fill-lavenderfield-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-lavenderfield-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-lavenderfield-800:hover {
      fill: var(--zbk-color-lavenderfield-800);
    }
  }
  [class~="active:fill-lavenderfield-800"]:active {
    fill: var(--zbk-color-lavenderfield-800);
  }
  [class~="disabled:fill-lavenderfield-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-lavenderfield-800);
  }
  .fill-lavenderfield-900 {
    fill: var(--zbk-color-lavenderfield-900);
  }
  [class~="focus:fill-lavenderfield-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-lavenderfield-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-lavenderfield-900:hover {
      fill: var(--zbk-color-lavenderfield-900);
    }
  }
  [class~="active:fill-lavenderfield-900"]:active {
    fill: var(--zbk-color-lavenderfield-900);
  }
  [class~="disabled:fill-lavenderfield-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-lavenderfield-900);
  }
  .fill-lavenderfield-950 {
    fill: var(--zbk-color-lavenderfield-950);
  }
  [class~="focus:fill-lavenderfield-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-lavenderfield-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-lavenderfield-950:hover {
      fill: var(--zbk-color-lavenderfield-950);
    }
  }
  [class~="active:fill-lavenderfield-950"]:active {
    fill: var(--zbk-color-lavenderfield-950);
  }
  [class~="disabled:fill-lavenderfield-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-color-lavenderfield-950);
  }
}
:root {
  --zbk-color-merlot-hue: 330;
  --zbk-color-merlot-saturation: 70%;
  --zbk-color-merlot-50: hsl(
    var(--zbk-color-merlot-hue),
    var(--zbk-color-merlot-saturation),
    98%
  );
  --zbk-color-merlot-100: hsl(
    var(--zbk-color-merlot-hue),
    var(--zbk-color-merlot-saturation),
    93%
  );
  --zbk-color-merlot-200: hsl(
    var(--zbk-color-merlot-hue),
    var(--zbk-color-merlot-saturation),
    87%
  );
  --zbk-color-merlot-300: hsl(
    var(--zbk-color-merlot-hue),
    var(--zbk-color-merlot-saturation),
    78%
  );
  --zbk-color-merlot-400: hsl(
    var(--zbk-color-merlot-hue),
    var(--zbk-color-merlot-saturation),
    69%
  );
  --zbk-color-merlot-500: hsl(
    var(--zbk-color-merlot-hue),
    var(--zbk-color-merlot-saturation),
    58%
  );
  --zbk-color-merlot-600: hsl(
    var(--zbk-color-merlot-hue),
    var(--zbk-color-merlot-saturation),
    48%
  );
  --zbk-color-merlot-700: hsl(
    var(--zbk-color-merlot-hue),
    var(--zbk-color-merlot-saturation),
    36%
  );
  --zbk-color-merlot-800: hsl(
    var(--zbk-color-merlot-hue),
    var(--zbk-color-merlot-saturation),
    26%
  );
  --zbk-color-merlot-900: hsl(
    var(--zbk-color-merlot-hue),
    var(--zbk-color-merlot-saturation),
    18%
  );
  --zbk-color-merlot-950: hsl(
    var(--zbk-color-merlot-hue),
    var(--zbk-color-merlot-saturation),
    10%
  );
}
@layer utilities {
  .ink-merlot-50 {
    color: var(--zbk-color-merlot-50);
  }
  [class~="focus:ink-merlot-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-merlot-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-merlot-50:hover {
      color: var(--zbk-color-merlot-50);
    }
  }
  [class~="active:ink-merlot-50"]:active {
    color: var(--zbk-color-merlot-50);
  }
  [class~="disabled:ink-merlot-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-merlot-50);
  }
  .ink-merlot-100 {
    color: var(--zbk-color-merlot-100);
  }
  [class~="focus:ink-merlot-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-merlot-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-merlot-100:hover {
      color: var(--zbk-color-merlot-100);
    }
  }
  [class~="active:ink-merlot-100"]:active {
    color: var(--zbk-color-merlot-100);
  }
  [class~="disabled:ink-merlot-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-merlot-100);
  }
  .ink-merlot-200 {
    color: var(--zbk-color-merlot-200);
  }
  [class~="focus:ink-merlot-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-merlot-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-merlot-200:hover {
      color: var(--zbk-color-merlot-200);
    }
  }
  [class~="active:ink-merlot-200"]:active {
    color: var(--zbk-color-merlot-200);
  }
  [class~="disabled:ink-merlot-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-merlot-200);
  }
  .ink-merlot-300 {
    color: var(--zbk-color-merlot-300);
  }
  [class~="focus:ink-merlot-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-merlot-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-merlot-300:hover {
      color: var(--zbk-color-merlot-300);
    }
  }
  [class~="active:ink-merlot-300"]:active {
    color: var(--zbk-color-merlot-300);
  }
  [class~="disabled:ink-merlot-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-merlot-300);
  }
  .ink-merlot-400 {
    color: var(--zbk-color-merlot-400);
  }
  [class~="focus:ink-merlot-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-merlot-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-merlot-400:hover {
      color: var(--zbk-color-merlot-400);
    }
  }
  [class~="active:ink-merlot-400"]:active {
    color: var(--zbk-color-merlot-400);
  }
  [class~="disabled:ink-merlot-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-merlot-400);
  }
  .ink-merlot-500 {
    color: var(--zbk-color-merlot-500);
  }
  [class~="focus:ink-merlot-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-merlot-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-merlot-500:hover {
      color: var(--zbk-color-merlot-500);
    }
  }
  [class~="active:ink-merlot-500"]:active {
    color: var(--zbk-color-merlot-500);
  }
  [class~="disabled:ink-merlot-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-merlot-500);
  }
  .ink-merlot-600 {
    color: var(--zbk-color-merlot-600);
  }
  [class~="focus:ink-merlot-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-merlot-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-merlot-600:hover {
      color: var(--zbk-color-merlot-600);
    }
  }
  [class~="active:ink-merlot-600"]:active {
    color: var(--zbk-color-merlot-600);
  }
  [class~="disabled:ink-merlot-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-merlot-600);
  }
  .ink-merlot-700 {
    color: var(--zbk-color-merlot-700);
  }
  [class~="focus:ink-merlot-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-merlot-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-merlot-700:hover {
      color: var(--zbk-color-merlot-700);
    }
  }
  [class~="active:ink-merlot-700"]:active {
    color: var(--zbk-color-merlot-700);
  }
  [class~="disabled:ink-merlot-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-merlot-700);
  }
  .ink-merlot-800 {
    color: var(--zbk-color-merlot-800);
  }
  [class~="focus:ink-merlot-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-merlot-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-merlot-800:hover {
      color: var(--zbk-color-merlot-800);
    }
  }
  [class~="active:ink-merlot-800"]:active {
    color: var(--zbk-color-merlot-800);
  }
  [class~="disabled:ink-merlot-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-merlot-800);
  }
  .ink-merlot-900 {
    color: var(--zbk-color-merlot-900);
  }
  [class~="focus:ink-merlot-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-merlot-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-merlot-900:hover {
      color: var(--zbk-color-merlot-900);
    }
  }
  [class~="active:ink-merlot-900"]:active {
    color: var(--zbk-color-merlot-900);
  }
  [class~="disabled:ink-merlot-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-merlot-900);
  }
  .ink-merlot-950 {
    color: var(--zbk-color-merlot-950);
  }
  [class~="focus:ink-merlot-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-merlot-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-merlot-950:hover {
      color: var(--zbk-color-merlot-950);
    }
  }
  [class~="active:ink-merlot-950"]:active {
    color: var(--zbk-color-merlot-950);
  }
  [class~="disabled:ink-merlot-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-merlot-950);
  }
  .canvas-merlot-50 {
    background-color: var(--zbk-color-merlot-50);
  }
  [class~="focus:canvas-merlot-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-merlot-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-merlot-50:hover {
      background-color: var(--zbk-color-merlot-50);
    }
  }
  [class~="active:canvas-merlot-50"]:active {
    background-color: var(--zbk-color-merlot-50);
  }
  [class~="disabled:canvas-merlot-50"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-merlot-50);
  }
  .canvas-merlot-100 {
    background-color: var(--zbk-color-merlot-100);
  }
  [class~="focus:canvas-merlot-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-merlot-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-merlot-100:hover {
      background-color: var(--zbk-color-merlot-100);
    }
  }
  [class~="active:canvas-merlot-100"]:active {
    background-color: var(--zbk-color-merlot-100);
  }
  [class~="disabled:canvas-merlot-100"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-merlot-100);
  }
  .canvas-merlot-200 {
    background-color: var(--zbk-color-merlot-200);
  }
  [class~="focus:canvas-merlot-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-merlot-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-merlot-200:hover {
      background-color: var(--zbk-color-merlot-200);
    }
  }
  [class~="active:canvas-merlot-200"]:active {
    background-color: var(--zbk-color-merlot-200);
  }
  [class~="disabled:canvas-merlot-200"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-merlot-200);
  }
  .canvas-merlot-300 {
    background-color: var(--zbk-color-merlot-300);
  }
  [class~="focus:canvas-merlot-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-merlot-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-merlot-300:hover {
      background-color: var(--zbk-color-merlot-300);
    }
  }
  [class~="active:canvas-merlot-300"]:active {
    background-color: var(--zbk-color-merlot-300);
  }
  [class~="disabled:canvas-merlot-300"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-merlot-300);
  }
  .canvas-merlot-400 {
    background-color: var(--zbk-color-merlot-400);
  }
  [class~="focus:canvas-merlot-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-merlot-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-merlot-400:hover {
      background-color: var(--zbk-color-merlot-400);
    }
  }
  [class~="active:canvas-merlot-400"]:active {
    background-color: var(--zbk-color-merlot-400);
  }
  [class~="disabled:canvas-merlot-400"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-merlot-400);
  }
  .canvas-merlot-500 {
    background-color: var(--zbk-color-merlot-500);
  }
  [class~="focus:canvas-merlot-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-merlot-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-merlot-500:hover {
      background-color: var(--zbk-color-merlot-500);
    }
  }
  [class~="active:canvas-merlot-500"]:active {
    background-color: var(--zbk-color-merlot-500);
  }
  [class~="disabled:canvas-merlot-500"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-merlot-500);
  }
  .canvas-merlot-600 {
    background-color: var(--zbk-color-merlot-600);
  }
  [class~="focus:canvas-merlot-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-merlot-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-merlot-600:hover {
      background-color: var(--zbk-color-merlot-600);
    }
  }
  [class~="active:canvas-merlot-600"]:active {
    background-color: var(--zbk-color-merlot-600);
  }
  [class~="disabled:canvas-merlot-600"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-merlot-600);
  }
  .canvas-merlot-700 {
    background-color: var(--zbk-color-merlot-700);
  }
  [class~="focus:canvas-merlot-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-merlot-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-merlot-700:hover {
      background-color: var(--zbk-color-merlot-700);
    }
  }
  [class~="active:canvas-merlot-700"]:active {
    background-color: var(--zbk-color-merlot-700);
  }
  [class~="disabled:canvas-merlot-700"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-merlot-700);
  }
  .canvas-merlot-800 {
    background-color: var(--zbk-color-merlot-800);
  }
  [class~="focus:canvas-merlot-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-merlot-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-merlot-800:hover {
      background-color: var(--zbk-color-merlot-800);
    }
  }
  [class~="active:canvas-merlot-800"]:active {
    background-color: var(--zbk-color-merlot-800);
  }
  [class~="disabled:canvas-merlot-800"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-merlot-800);
  }
  .canvas-merlot-900 {
    background-color: var(--zbk-color-merlot-900);
  }
  [class~="focus:canvas-merlot-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-merlot-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-merlot-900:hover {
      background-color: var(--zbk-color-merlot-900);
    }
  }
  [class~="active:canvas-merlot-900"]:active {
    background-color: var(--zbk-color-merlot-900);
  }
  [class~="disabled:canvas-merlot-900"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-merlot-900);
  }
  .canvas-merlot-950 {
    background-color: var(--zbk-color-merlot-950);
  }
  [class~="focus:canvas-merlot-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-merlot-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-merlot-950:hover {
      background-color: var(--zbk-color-merlot-950);
    }
  }
  [class~="active:canvas-merlot-950"]:active {
    background-color: var(--zbk-color-merlot-950);
  }
  [class~="disabled:canvas-merlot-950"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-merlot-950);
  }
  .border-merlot-50 {
    border-color: var(--zbk-color-merlot-50);
  }
  [class~="focus:border-merlot-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-merlot-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-merlot-50:hover {
      border-color: var(--zbk-color-merlot-50);
    }
  }
  [class~="active:border-merlot-50"]:active {
    border-color: var(--zbk-color-merlot-50);
  }
  [class~="disabled:border-merlot-50"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-merlot-50);
  }
  .border-merlot-100 {
    border-color: var(--zbk-color-merlot-100);
  }
  [class~="focus:border-merlot-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-merlot-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-merlot-100:hover {
      border-color: var(--zbk-color-merlot-100);
    }
  }
  [class~="active:border-merlot-100"]:active {
    border-color: var(--zbk-color-merlot-100);
  }
  [class~="disabled:border-merlot-100"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-merlot-100);
  }
  .border-merlot-200 {
    border-color: var(--zbk-color-merlot-200);
  }
  [class~="focus:border-merlot-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-merlot-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-merlot-200:hover {
      border-color: var(--zbk-color-merlot-200);
    }
  }
  [class~="active:border-merlot-200"]:active {
    border-color: var(--zbk-color-merlot-200);
  }
  [class~="disabled:border-merlot-200"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-merlot-200);
  }
  .border-merlot-300 {
    border-color: var(--zbk-color-merlot-300);
  }
  [class~="focus:border-merlot-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-merlot-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-merlot-300:hover {
      border-color: var(--zbk-color-merlot-300);
    }
  }
  [class~="active:border-merlot-300"]:active {
    border-color: var(--zbk-color-merlot-300);
  }
  [class~="disabled:border-merlot-300"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-merlot-300);
  }
  .border-merlot-400 {
    border-color: var(--zbk-color-merlot-400);
  }
  [class~="focus:border-merlot-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-merlot-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-merlot-400:hover {
      border-color: var(--zbk-color-merlot-400);
    }
  }
  [class~="active:border-merlot-400"]:active {
    border-color: var(--zbk-color-merlot-400);
  }
  [class~="disabled:border-merlot-400"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-merlot-400);
  }
  .border-merlot-500 {
    border-color: var(--zbk-color-merlot-500);
  }
  [class~="focus:border-merlot-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-merlot-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-merlot-500:hover {
      border-color: var(--zbk-color-merlot-500);
    }
  }
  [class~="active:border-merlot-500"]:active {
    border-color: var(--zbk-color-merlot-500);
  }
  [class~="disabled:border-merlot-500"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-merlot-500);
  }
  .border-merlot-600 {
    border-color: var(--zbk-color-merlot-600);
  }
  [class~="focus:border-merlot-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-merlot-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-merlot-600:hover {
      border-color: var(--zbk-color-merlot-600);
    }
  }
  [class~="active:border-merlot-600"]:active {
    border-color: var(--zbk-color-merlot-600);
  }
  [class~="disabled:border-merlot-600"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-merlot-600);
  }
  .border-merlot-700 {
    border-color: var(--zbk-color-merlot-700);
  }
  [class~="focus:border-merlot-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-merlot-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-merlot-700:hover {
      border-color: var(--zbk-color-merlot-700);
    }
  }
  [class~="active:border-merlot-700"]:active {
    border-color: var(--zbk-color-merlot-700);
  }
  [class~="disabled:border-merlot-700"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-merlot-700);
  }
  .border-merlot-800 {
    border-color: var(--zbk-color-merlot-800);
  }
  [class~="focus:border-merlot-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-merlot-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-merlot-800:hover {
      border-color: var(--zbk-color-merlot-800);
    }
  }
  [class~="active:border-merlot-800"]:active {
    border-color: var(--zbk-color-merlot-800);
  }
  [class~="disabled:border-merlot-800"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-merlot-800);
  }
  .border-merlot-900 {
    border-color: var(--zbk-color-merlot-900);
  }
  [class~="focus:border-merlot-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-merlot-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-merlot-900:hover {
      border-color: var(--zbk-color-merlot-900);
    }
  }
  [class~="active:border-merlot-900"]:active {
    border-color: var(--zbk-color-merlot-900);
  }
  [class~="disabled:border-merlot-900"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-merlot-900);
  }
  .border-merlot-950 {
    border-color: var(--zbk-color-merlot-950);
  }
  [class~="focus:border-merlot-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-merlot-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-merlot-950:hover {
      border-color: var(--zbk-color-merlot-950);
    }
  }
  [class~="active:border-merlot-950"]:active {
    border-color: var(--zbk-color-merlot-950);
  }
  [class~="disabled:border-merlot-950"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-merlot-950);
  }
  .fill-merlot-50 {
    fill: var(--zbk-color-merlot-50);
  }
  [class~="focus:fill-merlot-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-merlot-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-merlot-50:hover {
      fill: var(--zbk-color-merlot-50);
    }
  }
  [class~="active:fill-merlot-50"]:active {
    fill: var(--zbk-color-merlot-50);
  }
  [class~="disabled:fill-merlot-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-merlot-50);
  }
  .fill-merlot-100 {
    fill: var(--zbk-color-merlot-100);
  }
  [class~="focus:fill-merlot-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-merlot-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-merlot-100:hover {
      fill: var(--zbk-color-merlot-100);
    }
  }
  [class~="active:fill-merlot-100"]:active {
    fill: var(--zbk-color-merlot-100);
  }
  [class~="disabled:fill-merlot-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-merlot-100);
  }
  .fill-merlot-200 {
    fill: var(--zbk-color-merlot-200);
  }
  [class~="focus:fill-merlot-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-merlot-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-merlot-200:hover {
      fill: var(--zbk-color-merlot-200);
    }
  }
  [class~="active:fill-merlot-200"]:active {
    fill: var(--zbk-color-merlot-200);
  }
  [class~="disabled:fill-merlot-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-merlot-200);
  }
  .fill-merlot-300 {
    fill: var(--zbk-color-merlot-300);
  }
  [class~="focus:fill-merlot-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-merlot-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-merlot-300:hover {
      fill: var(--zbk-color-merlot-300);
    }
  }
  [class~="active:fill-merlot-300"]:active {
    fill: var(--zbk-color-merlot-300);
  }
  [class~="disabled:fill-merlot-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-merlot-300);
  }
  .fill-merlot-400 {
    fill: var(--zbk-color-merlot-400);
  }
  [class~="focus:fill-merlot-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-merlot-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-merlot-400:hover {
      fill: var(--zbk-color-merlot-400);
    }
  }
  [class~="active:fill-merlot-400"]:active {
    fill: var(--zbk-color-merlot-400);
  }
  [class~="disabled:fill-merlot-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-merlot-400);
  }
  .fill-merlot-500 {
    fill: var(--zbk-color-merlot-500);
  }
  [class~="focus:fill-merlot-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-merlot-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-merlot-500:hover {
      fill: var(--zbk-color-merlot-500);
    }
  }
  [class~="active:fill-merlot-500"]:active {
    fill: var(--zbk-color-merlot-500);
  }
  [class~="disabled:fill-merlot-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-merlot-500);
  }
  .fill-merlot-600 {
    fill: var(--zbk-color-merlot-600);
  }
  [class~="focus:fill-merlot-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-merlot-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-merlot-600:hover {
      fill: var(--zbk-color-merlot-600);
    }
  }
  [class~="active:fill-merlot-600"]:active {
    fill: var(--zbk-color-merlot-600);
  }
  [class~="disabled:fill-merlot-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-merlot-600);
  }
  .fill-merlot-700 {
    fill: var(--zbk-color-merlot-700);
  }
  [class~="focus:fill-merlot-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-merlot-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-merlot-700:hover {
      fill: var(--zbk-color-merlot-700);
    }
  }
  [class~="active:fill-merlot-700"]:active {
    fill: var(--zbk-color-merlot-700);
  }
  [class~="disabled:fill-merlot-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-merlot-700);
  }
  .fill-merlot-800 {
    fill: var(--zbk-color-merlot-800);
  }
  [class~="focus:fill-merlot-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-merlot-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-merlot-800:hover {
      fill: var(--zbk-color-merlot-800);
    }
  }
  [class~="active:fill-merlot-800"]:active {
    fill: var(--zbk-color-merlot-800);
  }
  [class~="disabled:fill-merlot-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-merlot-800);
  }
  .fill-merlot-900 {
    fill: var(--zbk-color-merlot-900);
  }
  [class~="focus:fill-merlot-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-merlot-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-merlot-900:hover {
      fill: var(--zbk-color-merlot-900);
    }
  }
  [class~="active:fill-merlot-900"]:active {
    fill: var(--zbk-color-merlot-900);
  }
  [class~="disabled:fill-merlot-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-merlot-900);
  }
  .fill-merlot-950 {
    fill: var(--zbk-color-merlot-950);
  }
  [class~="focus:fill-merlot-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-merlot-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-merlot-950:hover {
      fill: var(--zbk-color-merlot-950);
    }
  }
  [class~="active:fill-merlot-950"]:active {
    fill: var(--zbk-color-merlot-950);
  }
  [class~="disabled:fill-merlot-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-merlot-950);
  }
}
:root {
  --zbk-color-mint-hue: 150;
  --zbk-color-mint-saturation: 65%;
  --zbk-color-mint-50: hsl(
    var(--zbk-color-mint-hue),
    var(--zbk-color-mint-saturation),
    98%
  );
  --zbk-color-mint-100: hsl(
    var(--zbk-color-mint-hue),
    var(--zbk-color-mint-saturation),
    93%
  );
  --zbk-color-mint-200: hsl(
    var(--zbk-color-mint-hue),
    var(--zbk-color-mint-saturation),
    87%
  );
  --zbk-color-mint-300: hsl(
    var(--zbk-color-mint-hue),
    var(--zbk-color-mint-saturation),
    78%
  );
  --zbk-color-mint-400: hsl(
    var(--zbk-color-mint-hue),
    var(--zbk-color-mint-saturation),
    69%
  );
  --zbk-color-mint-500: hsl(
    var(--zbk-color-mint-hue),
    var(--zbk-color-mint-saturation),
    58%
  );
  --zbk-color-mint-600: hsl(
    var(--zbk-color-mint-hue),
    var(--zbk-color-mint-saturation),
    48%
  );
  --zbk-color-mint-700: hsl(
    var(--zbk-color-mint-hue),
    var(--zbk-color-mint-saturation),
    36%
  );
  --zbk-color-mint-800: hsl(
    var(--zbk-color-mint-hue),
    var(--zbk-color-mint-saturation),
    26%
  );
  --zbk-color-mint-900: hsl(
    var(--zbk-color-mint-hue),
    var(--zbk-color-mint-saturation),
    18%
  );
  --zbk-color-mint-950: hsl(
    var(--zbk-color-mint-hue),
    var(--zbk-color-mint-saturation),
    10%
  );
}
@layer utilities {
  .ink-mint-50 {
    color: var(--zbk-color-mint-50);
  }
  [class~="focus:ink-mint-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-mint-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-mint-50:hover {
      color: var(--zbk-color-mint-50);
    }
  }
  [class~="active:ink-mint-50"]:active {
    color: var(--zbk-color-mint-50);
  }
  [class~="disabled:ink-mint-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-mint-50);
  }
  .ink-mint-100 {
    color: var(--zbk-color-mint-100);
  }
  [class~="focus:ink-mint-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-mint-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-mint-100:hover {
      color: var(--zbk-color-mint-100);
    }
  }
  [class~="active:ink-mint-100"]:active {
    color: var(--zbk-color-mint-100);
  }
  [class~="disabled:ink-mint-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-mint-100);
  }
  .ink-mint-200 {
    color: var(--zbk-color-mint-200);
  }
  [class~="focus:ink-mint-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-mint-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-mint-200:hover {
      color: var(--zbk-color-mint-200);
    }
  }
  [class~="active:ink-mint-200"]:active {
    color: var(--zbk-color-mint-200);
  }
  [class~="disabled:ink-mint-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-mint-200);
  }
  .ink-mint-300 {
    color: var(--zbk-color-mint-300);
  }
  [class~="focus:ink-mint-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-mint-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-mint-300:hover {
      color: var(--zbk-color-mint-300);
    }
  }
  [class~="active:ink-mint-300"]:active {
    color: var(--zbk-color-mint-300);
  }
  [class~="disabled:ink-mint-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-mint-300);
  }
  .ink-mint-400 {
    color: var(--zbk-color-mint-400);
  }
  [class~="focus:ink-mint-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-mint-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-mint-400:hover {
      color: var(--zbk-color-mint-400);
    }
  }
  [class~="active:ink-mint-400"]:active {
    color: var(--zbk-color-mint-400);
  }
  [class~="disabled:ink-mint-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-mint-400);
  }
  .ink-mint-500 {
    color: var(--zbk-color-mint-500);
  }
  [class~="focus:ink-mint-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-mint-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-mint-500:hover {
      color: var(--zbk-color-mint-500);
    }
  }
  [class~="active:ink-mint-500"]:active {
    color: var(--zbk-color-mint-500);
  }
  [class~="disabled:ink-mint-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-mint-500);
  }
  .ink-mint-600 {
    color: var(--zbk-color-mint-600);
  }
  [class~="focus:ink-mint-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-mint-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-mint-600:hover {
      color: var(--zbk-color-mint-600);
    }
  }
  [class~="active:ink-mint-600"]:active {
    color: var(--zbk-color-mint-600);
  }
  [class~="disabled:ink-mint-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-mint-600);
  }
  .ink-mint-700 {
    color: var(--zbk-color-mint-700);
  }
  [class~="focus:ink-mint-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-mint-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-mint-700:hover {
      color: var(--zbk-color-mint-700);
    }
  }
  [class~="active:ink-mint-700"]:active {
    color: var(--zbk-color-mint-700);
  }
  [class~="disabled:ink-mint-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-mint-700);
  }
  .ink-mint-800 {
    color: var(--zbk-color-mint-800);
  }
  [class~="focus:ink-mint-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-mint-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-mint-800:hover {
      color: var(--zbk-color-mint-800);
    }
  }
  [class~="active:ink-mint-800"]:active {
    color: var(--zbk-color-mint-800);
  }
  [class~="disabled:ink-mint-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-mint-800);
  }
  .ink-mint-900 {
    color: var(--zbk-color-mint-900);
  }
  [class~="focus:ink-mint-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-mint-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-mint-900:hover {
      color: var(--zbk-color-mint-900);
    }
  }
  [class~="active:ink-mint-900"]:active {
    color: var(--zbk-color-mint-900);
  }
  [class~="disabled:ink-mint-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-mint-900);
  }
  .ink-mint-950 {
    color: var(--zbk-color-mint-950);
  }
  [class~="focus:ink-mint-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-mint-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-mint-950:hover {
      color: var(--zbk-color-mint-950);
    }
  }
  [class~="active:ink-mint-950"]:active {
    color: var(--zbk-color-mint-950);
  }
  [class~="disabled:ink-mint-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-mint-950);
  }
  .canvas-mint-50 {
    background-color: var(--zbk-color-mint-50);
  }
  [class~="focus:canvas-mint-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-mint-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-mint-50:hover {
      background-color: var(--zbk-color-mint-50);
    }
  }
  [class~="active:canvas-mint-50"]:active {
    background-color: var(--zbk-color-mint-50);
  }
  [class~="disabled:canvas-mint-50"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-mint-50);
  }
  .canvas-mint-100 {
    background-color: var(--zbk-color-mint-100);
  }
  [class~="focus:canvas-mint-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-mint-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-mint-100:hover {
      background-color: var(--zbk-color-mint-100);
    }
  }
  [class~="active:canvas-mint-100"]:active {
    background-color: var(--zbk-color-mint-100);
  }
  [class~="disabled:canvas-mint-100"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-mint-100);
  }
  .canvas-mint-200 {
    background-color: var(--zbk-color-mint-200);
  }
  [class~="focus:canvas-mint-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-mint-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-mint-200:hover {
      background-color: var(--zbk-color-mint-200);
    }
  }
  [class~="active:canvas-mint-200"]:active {
    background-color: var(--zbk-color-mint-200);
  }
  [class~="disabled:canvas-mint-200"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-mint-200);
  }
  .canvas-mint-300 {
    background-color: var(--zbk-color-mint-300);
  }
  [class~="focus:canvas-mint-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-mint-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-mint-300:hover {
      background-color: var(--zbk-color-mint-300);
    }
  }
  [class~="active:canvas-mint-300"]:active {
    background-color: var(--zbk-color-mint-300);
  }
  [class~="disabled:canvas-mint-300"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-mint-300);
  }
  .canvas-mint-400 {
    background-color: var(--zbk-color-mint-400);
  }
  [class~="focus:canvas-mint-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-mint-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-mint-400:hover {
      background-color: var(--zbk-color-mint-400);
    }
  }
  [class~="active:canvas-mint-400"]:active {
    background-color: var(--zbk-color-mint-400);
  }
  [class~="disabled:canvas-mint-400"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-mint-400);
  }
  .canvas-mint-500 {
    background-color: var(--zbk-color-mint-500);
  }
  [class~="focus:canvas-mint-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-mint-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-mint-500:hover {
      background-color: var(--zbk-color-mint-500);
    }
  }
  [class~="active:canvas-mint-500"]:active {
    background-color: var(--zbk-color-mint-500);
  }
  [class~="disabled:canvas-mint-500"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-mint-500);
  }
  .canvas-mint-600 {
    background-color: var(--zbk-color-mint-600);
  }
  [class~="focus:canvas-mint-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-mint-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-mint-600:hover {
      background-color: var(--zbk-color-mint-600);
    }
  }
  [class~="active:canvas-mint-600"]:active {
    background-color: var(--zbk-color-mint-600);
  }
  [class~="disabled:canvas-mint-600"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-mint-600);
  }
  .canvas-mint-700 {
    background-color: var(--zbk-color-mint-700);
  }
  [class~="focus:canvas-mint-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-mint-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-mint-700:hover {
      background-color: var(--zbk-color-mint-700);
    }
  }
  [class~="active:canvas-mint-700"]:active {
    background-color: var(--zbk-color-mint-700);
  }
  [class~="disabled:canvas-mint-700"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-mint-700);
  }
  .canvas-mint-800 {
    background-color: var(--zbk-color-mint-800);
  }
  [class~="focus:canvas-mint-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-mint-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-mint-800:hover {
      background-color: var(--zbk-color-mint-800);
    }
  }
  [class~="active:canvas-mint-800"]:active {
    background-color: var(--zbk-color-mint-800);
  }
  [class~="disabled:canvas-mint-800"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-mint-800);
  }
  .canvas-mint-900 {
    background-color: var(--zbk-color-mint-900);
  }
  [class~="focus:canvas-mint-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-mint-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-mint-900:hover {
      background-color: var(--zbk-color-mint-900);
    }
  }
  [class~="active:canvas-mint-900"]:active {
    background-color: var(--zbk-color-mint-900);
  }
  [class~="disabled:canvas-mint-900"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-mint-900);
  }
  .canvas-mint-950 {
    background-color: var(--zbk-color-mint-950);
  }
  [class~="focus:canvas-mint-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-mint-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-mint-950:hover {
      background-color: var(--zbk-color-mint-950);
    }
  }
  [class~="active:canvas-mint-950"]:active {
    background-color: var(--zbk-color-mint-950);
  }
  [class~="disabled:canvas-mint-950"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-mint-950);
  }
  .border-mint-50 {
    border-color: var(--zbk-color-mint-50);
  }
  [class~="focus:border-mint-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-mint-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-mint-50:hover {
      border-color: var(--zbk-color-mint-50);
    }
  }
  [class~="active:border-mint-50"]:active {
    border-color: var(--zbk-color-mint-50);
  }
  [class~="disabled:border-mint-50"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-mint-50);
  }
  .border-mint-100 {
    border-color: var(--zbk-color-mint-100);
  }
  [class~="focus:border-mint-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-mint-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-mint-100:hover {
      border-color: var(--zbk-color-mint-100);
    }
  }
  [class~="active:border-mint-100"]:active {
    border-color: var(--zbk-color-mint-100);
  }
  [class~="disabled:border-mint-100"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-mint-100);
  }
  .border-mint-200 {
    border-color: var(--zbk-color-mint-200);
  }
  [class~="focus:border-mint-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-mint-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-mint-200:hover {
      border-color: var(--zbk-color-mint-200);
    }
  }
  [class~="active:border-mint-200"]:active {
    border-color: var(--zbk-color-mint-200);
  }
  [class~="disabled:border-mint-200"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-mint-200);
  }
  .border-mint-300 {
    border-color: var(--zbk-color-mint-300);
  }
  [class~="focus:border-mint-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-mint-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-mint-300:hover {
      border-color: var(--zbk-color-mint-300);
    }
  }
  [class~="active:border-mint-300"]:active {
    border-color: var(--zbk-color-mint-300);
  }
  [class~="disabled:border-mint-300"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-mint-300);
  }
  .border-mint-400 {
    border-color: var(--zbk-color-mint-400);
  }
  [class~="focus:border-mint-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-mint-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-mint-400:hover {
      border-color: var(--zbk-color-mint-400);
    }
  }
  [class~="active:border-mint-400"]:active {
    border-color: var(--zbk-color-mint-400);
  }
  [class~="disabled:border-mint-400"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-mint-400);
  }
  .border-mint-500 {
    border-color: var(--zbk-color-mint-500);
  }
  [class~="focus:border-mint-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-mint-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-mint-500:hover {
      border-color: var(--zbk-color-mint-500);
    }
  }
  [class~="active:border-mint-500"]:active {
    border-color: var(--zbk-color-mint-500);
  }
  [class~="disabled:border-mint-500"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-mint-500);
  }
  .border-mint-600 {
    border-color: var(--zbk-color-mint-600);
  }
  [class~="focus:border-mint-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-mint-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-mint-600:hover {
      border-color: var(--zbk-color-mint-600);
    }
  }
  [class~="active:border-mint-600"]:active {
    border-color: var(--zbk-color-mint-600);
  }
  [class~="disabled:border-mint-600"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-mint-600);
  }
  .border-mint-700 {
    border-color: var(--zbk-color-mint-700);
  }
  [class~="focus:border-mint-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-mint-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-mint-700:hover {
      border-color: var(--zbk-color-mint-700);
    }
  }
  [class~="active:border-mint-700"]:active {
    border-color: var(--zbk-color-mint-700);
  }
  [class~="disabled:border-mint-700"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-mint-700);
  }
  .border-mint-800 {
    border-color: var(--zbk-color-mint-800);
  }
  [class~="focus:border-mint-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-mint-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-mint-800:hover {
      border-color: var(--zbk-color-mint-800);
    }
  }
  [class~="active:border-mint-800"]:active {
    border-color: var(--zbk-color-mint-800);
  }
  [class~="disabled:border-mint-800"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-mint-800);
  }
  .border-mint-900 {
    border-color: var(--zbk-color-mint-900);
  }
  [class~="focus:border-mint-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-mint-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-mint-900:hover {
      border-color: var(--zbk-color-mint-900);
    }
  }
  [class~="active:border-mint-900"]:active {
    border-color: var(--zbk-color-mint-900);
  }
  [class~="disabled:border-mint-900"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-mint-900);
  }
  .border-mint-950 {
    border-color: var(--zbk-color-mint-950);
  }
  [class~="focus:border-mint-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-mint-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-mint-950:hover {
      border-color: var(--zbk-color-mint-950);
    }
  }
  [class~="active:border-mint-950"]:active {
    border-color: var(--zbk-color-mint-950);
  }
  [class~="disabled:border-mint-950"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-mint-950);
  }
  .fill-mint-50 {
    fill: var(--zbk-color-mint-50);
  }
  [class~="focus:fill-mint-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-mint-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-mint-50:hover {
      fill: var(--zbk-color-mint-50);
    }
  }
  [class~="active:fill-mint-50"]:active {
    fill: var(--zbk-color-mint-50);
  }
  [class~="disabled:fill-mint-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-mint-50);
  }
  .fill-mint-100 {
    fill: var(--zbk-color-mint-100);
  }
  [class~="focus:fill-mint-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-mint-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-mint-100:hover {
      fill: var(--zbk-color-mint-100);
    }
  }
  [class~="active:fill-mint-100"]:active {
    fill: var(--zbk-color-mint-100);
  }
  [class~="disabled:fill-mint-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-mint-100);
  }
  .fill-mint-200 {
    fill: var(--zbk-color-mint-200);
  }
  [class~="focus:fill-mint-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-mint-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-mint-200:hover {
      fill: var(--zbk-color-mint-200);
    }
  }
  [class~="active:fill-mint-200"]:active {
    fill: var(--zbk-color-mint-200);
  }
  [class~="disabled:fill-mint-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-mint-200);
  }
  .fill-mint-300 {
    fill: var(--zbk-color-mint-300);
  }
  [class~="focus:fill-mint-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-mint-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-mint-300:hover {
      fill: var(--zbk-color-mint-300);
    }
  }
  [class~="active:fill-mint-300"]:active {
    fill: var(--zbk-color-mint-300);
  }
  [class~="disabled:fill-mint-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-mint-300);
  }
  .fill-mint-400 {
    fill: var(--zbk-color-mint-400);
  }
  [class~="focus:fill-mint-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-mint-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-mint-400:hover {
      fill: var(--zbk-color-mint-400);
    }
  }
  [class~="active:fill-mint-400"]:active {
    fill: var(--zbk-color-mint-400);
  }
  [class~="disabled:fill-mint-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-mint-400);
  }
  .fill-mint-500 {
    fill: var(--zbk-color-mint-500);
  }
  [class~="focus:fill-mint-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-mint-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-mint-500:hover {
      fill: var(--zbk-color-mint-500);
    }
  }
  [class~="active:fill-mint-500"]:active {
    fill: var(--zbk-color-mint-500);
  }
  [class~="disabled:fill-mint-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-mint-500);
  }
  .fill-mint-600 {
    fill: var(--zbk-color-mint-600);
  }
  [class~="focus:fill-mint-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-mint-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-mint-600:hover {
      fill: var(--zbk-color-mint-600);
    }
  }
  [class~="active:fill-mint-600"]:active {
    fill: var(--zbk-color-mint-600);
  }
  [class~="disabled:fill-mint-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-mint-600);
  }
  .fill-mint-700 {
    fill: var(--zbk-color-mint-700);
  }
  [class~="focus:fill-mint-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-mint-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-mint-700:hover {
      fill: var(--zbk-color-mint-700);
    }
  }
  [class~="active:fill-mint-700"]:active {
    fill: var(--zbk-color-mint-700);
  }
  [class~="disabled:fill-mint-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-mint-700);
  }
  .fill-mint-800 {
    fill: var(--zbk-color-mint-800);
  }
  [class~="focus:fill-mint-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-mint-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-mint-800:hover {
      fill: var(--zbk-color-mint-800);
    }
  }
  [class~="active:fill-mint-800"]:active {
    fill: var(--zbk-color-mint-800);
  }
  [class~="disabled:fill-mint-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-mint-800);
  }
  .fill-mint-900 {
    fill: var(--zbk-color-mint-900);
  }
  [class~="focus:fill-mint-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-mint-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-mint-900:hover {
      fill: var(--zbk-color-mint-900);
    }
  }
  [class~="active:fill-mint-900"]:active {
    fill: var(--zbk-color-mint-900);
  }
  [class~="disabled:fill-mint-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-mint-900);
  }
  .fill-mint-950 {
    fill: var(--zbk-color-mint-950);
  }
  [class~="focus:fill-mint-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-mint-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-mint-950:hover {
      fill: var(--zbk-color-mint-950);
    }
  }
  [class~="active:fill-mint-950"]:active {
    fill: var(--zbk-color-mint-950);
  }
  [class~="disabled:fill-mint-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-mint-950);
  }
}
:root {
  --zbk-color-orange-hue: 24;
  --zbk-color-orange-saturation: 82%;
  --zbk-color-orange-50: hsl(
    var(--zbk-color-orange-hue),
    var(--zbk-color-orange-saturation),
    98%
  );
  --zbk-color-orange-100: hsl(
    var(--zbk-color-orange-hue),
    var(--zbk-color-orange-saturation),
    93%
  );
  --zbk-color-orange-200: hsl(
    var(--zbk-color-orange-hue),
    var(--zbk-color-orange-saturation),
    87%
  );
  --zbk-color-orange-300: hsl(
    var(--zbk-color-orange-hue),
    var(--zbk-color-orange-saturation),
    78%
  );
  --zbk-color-orange-400: hsl(
    var(--zbk-color-orange-hue),
    var(--zbk-color-orange-saturation),
    69%
  );
  --zbk-color-orange-500: hsl(
    var(--zbk-color-orange-hue),
    var(--zbk-color-orange-saturation),
    58%
  );
  --zbk-color-orange-600: hsl(
    var(--zbk-color-orange-hue),
    var(--zbk-color-orange-saturation),
    48%
  );
  --zbk-color-orange-700: hsl(
    var(--zbk-color-orange-hue),
    var(--zbk-color-orange-saturation),
    36%
  );
  --zbk-color-orange-800: hsl(
    var(--zbk-color-orange-hue),
    var(--zbk-color-orange-saturation),
    26%
  );
  --zbk-color-orange-900: hsl(
    var(--zbk-color-orange-hue),
    var(--zbk-color-orange-saturation),
    18%
  );
  --zbk-color-orange-950: hsl(
    var(--zbk-color-orange-hue),
    var(--zbk-color-orange-saturation),
    10%
  );
}
@layer utilities {
  .ink-orange-50 {
    color: var(--zbk-color-orange-50);
  }
  [class~="focus:ink-orange-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-orange-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-orange-50:hover {
      color: var(--zbk-color-orange-50);
    }
  }
  [class~="active:ink-orange-50"]:active {
    color: var(--zbk-color-orange-50);
  }
  [class~="disabled:ink-orange-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-orange-50);
  }
  .ink-orange-100 {
    color: var(--zbk-color-orange-100);
  }
  [class~="focus:ink-orange-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-orange-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-orange-100:hover {
      color: var(--zbk-color-orange-100);
    }
  }
  [class~="active:ink-orange-100"]:active {
    color: var(--zbk-color-orange-100);
  }
  [class~="disabled:ink-orange-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-orange-100);
  }
  .ink-orange-200 {
    color: var(--zbk-color-orange-200);
  }
  [class~="focus:ink-orange-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-orange-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-orange-200:hover {
      color: var(--zbk-color-orange-200);
    }
  }
  [class~="active:ink-orange-200"]:active {
    color: var(--zbk-color-orange-200);
  }
  [class~="disabled:ink-orange-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-orange-200);
  }
  .ink-orange-300 {
    color: var(--zbk-color-orange-300);
  }
  [class~="focus:ink-orange-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-orange-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-orange-300:hover {
      color: var(--zbk-color-orange-300);
    }
  }
  [class~="active:ink-orange-300"]:active {
    color: var(--zbk-color-orange-300);
  }
  [class~="disabled:ink-orange-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-orange-300);
  }
  .ink-orange-400 {
    color: var(--zbk-color-orange-400);
  }
  [class~="focus:ink-orange-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-orange-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-orange-400:hover {
      color: var(--zbk-color-orange-400);
    }
  }
  [class~="active:ink-orange-400"]:active {
    color: var(--zbk-color-orange-400);
  }
  [class~="disabled:ink-orange-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-orange-400);
  }
  .ink-orange-500 {
    color: var(--zbk-color-orange-500);
  }
  [class~="focus:ink-orange-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-orange-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-orange-500:hover {
      color: var(--zbk-color-orange-500);
    }
  }
  [class~="active:ink-orange-500"]:active {
    color: var(--zbk-color-orange-500);
  }
  [class~="disabled:ink-orange-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-orange-500);
  }
  .ink-orange-600 {
    color: var(--zbk-color-orange-600);
  }
  [class~="focus:ink-orange-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-orange-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-orange-600:hover {
      color: var(--zbk-color-orange-600);
    }
  }
  [class~="active:ink-orange-600"]:active {
    color: var(--zbk-color-orange-600);
  }
  [class~="disabled:ink-orange-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-orange-600);
  }
  .ink-orange-700 {
    color: var(--zbk-color-orange-700);
  }
  [class~="focus:ink-orange-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-orange-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-orange-700:hover {
      color: var(--zbk-color-orange-700);
    }
  }
  [class~="active:ink-orange-700"]:active {
    color: var(--zbk-color-orange-700);
  }
  [class~="disabled:ink-orange-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-orange-700);
  }
  .ink-orange-800 {
    color: var(--zbk-color-orange-800);
  }
  [class~="focus:ink-orange-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-orange-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-orange-800:hover {
      color: var(--zbk-color-orange-800);
    }
  }
  [class~="active:ink-orange-800"]:active {
    color: var(--zbk-color-orange-800);
  }
  [class~="disabled:ink-orange-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-orange-800);
  }
  .ink-orange-900 {
    color: var(--zbk-color-orange-900);
  }
  [class~="focus:ink-orange-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-orange-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-orange-900:hover {
      color: var(--zbk-color-orange-900);
    }
  }
  [class~="active:ink-orange-900"]:active {
    color: var(--zbk-color-orange-900);
  }
  [class~="disabled:ink-orange-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-orange-900);
  }
  .ink-orange-950 {
    color: var(--zbk-color-orange-950);
  }
  [class~="focus:ink-orange-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-orange-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-orange-950:hover {
      color: var(--zbk-color-orange-950);
    }
  }
  [class~="active:ink-orange-950"]:active {
    color: var(--zbk-color-orange-950);
  }
  [class~="disabled:ink-orange-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-orange-950);
  }
  .canvas-orange-50 {
    background-color: var(--zbk-color-orange-50);
  }
  [class~="focus:canvas-orange-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-orange-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-orange-50:hover {
      background-color: var(--zbk-color-orange-50);
    }
  }
  [class~="active:canvas-orange-50"]:active {
    background-color: var(--zbk-color-orange-50);
  }
  [class~="disabled:canvas-orange-50"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-orange-50);
  }
  .canvas-orange-100 {
    background-color: var(--zbk-color-orange-100);
  }
  [class~="focus:canvas-orange-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-orange-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-orange-100:hover {
      background-color: var(--zbk-color-orange-100);
    }
  }
  [class~="active:canvas-orange-100"]:active {
    background-color: var(--zbk-color-orange-100);
  }
  [class~="disabled:canvas-orange-100"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-orange-100);
  }
  .canvas-orange-200 {
    background-color: var(--zbk-color-orange-200);
  }
  [class~="focus:canvas-orange-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-orange-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-orange-200:hover {
      background-color: var(--zbk-color-orange-200);
    }
  }
  [class~="active:canvas-orange-200"]:active {
    background-color: var(--zbk-color-orange-200);
  }
  [class~="disabled:canvas-orange-200"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-orange-200);
  }
  .canvas-orange-300 {
    background-color: var(--zbk-color-orange-300);
  }
  [class~="focus:canvas-orange-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-orange-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-orange-300:hover {
      background-color: var(--zbk-color-orange-300);
    }
  }
  [class~="active:canvas-orange-300"]:active {
    background-color: var(--zbk-color-orange-300);
  }
  [class~="disabled:canvas-orange-300"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-orange-300);
  }
  .canvas-orange-400 {
    background-color: var(--zbk-color-orange-400);
  }
  [class~="focus:canvas-orange-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-orange-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-orange-400:hover {
      background-color: var(--zbk-color-orange-400);
    }
  }
  [class~="active:canvas-orange-400"]:active {
    background-color: var(--zbk-color-orange-400);
  }
  [class~="disabled:canvas-orange-400"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-orange-400);
  }
  .canvas-orange-500 {
    background-color: var(--zbk-color-orange-500);
  }
  [class~="focus:canvas-orange-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-orange-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-orange-500:hover {
      background-color: var(--zbk-color-orange-500);
    }
  }
  [class~="active:canvas-orange-500"]:active {
    background-color: var(--zbk-color-orange-500);
  }
  [class~="disabled:canvas-orange-500"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-orange-500);
  }
  .canvas-orange-600 {
    background-color: var(--zbk-color-orange-600);
  }
  [class~="focus:canvas-orange-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-orange-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-orange-600:hover {
      background-color: var(--zbk-color-orange-600);
    }
  }
  [class~="active:canvas-orange-600"]:active {
    background-color: var(--zbk-color-orange-600);
  }
  [class~="disabled:canvas-orange-600"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-orange-600);
  }
  .canvas-orange-700 {
    background-color: var(--zbk-color-orange-700);
  }
  [class~="focus:canvas-orange-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-orange-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-orange-700:hover {
      background-color: var(--zbk-color-orange-700);
    }
  }
  [class~="active:canvas-orange-700"]:active {
    background-color: var(--zbk-color-orange-700);
  }
  [class~="disabled:canvas-orange-700"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-orange-700);
  }
  .canvas-orange-800 {
    background-color: var(--zbk-color-orange-800);
  }
  [class~="focus:canvas-orange-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-orange-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-orange-800:hover {
      background-color: var(--zbk-color-orange-800);
    }
  }
  [class~="active:canvas-orange-800"]:active {
    background-color: var(--zbk-color-orange-800);
  }
  [class~="disabled:canvas-orange-800"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-orange-800);
  }
  .canvas-orange-900 {
    background-color: var(--zbk-color-orange-900);
  }
  [class~="focus:canvas-orange-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-orange-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-orange-900:hover {
      background-color: var(--zbk-color-orange-900);
    }
  }
  [class~="active:canvas-orange-900"]:active {
    background-color: var(--zbk-color-orange-900);
  }
  [class~="disabled:canvas-orange-900"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-orange-900);
  }
  .canvas-orange-950 {
    background-color: var(--zbk-color-orange-950);
  }
  [class~="focus:canvas-orange-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-orange-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-orange-950:hover {
      background-color: var(--zbk-color-orange-950);
    }
  }
  [class~="active:canvas-orange-950"]:active {
    background-color: var(--zbk-color-orange-950);
  }
  [class~="disabled:canvas-orange-950"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-orange-950);
  }
  .border-orange-50 {
    border-color: var(--zbk-color-orange-50);
  }
  [class~="focus:border-orange-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-orange-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-orange-50:hover {
      border-color: var(--zbk-color-orange-50);
    }
  }
  [class~="active:border-orange-50"]:active {
    border-color: var(--zbk-color-orange-50);
  }
  [class~="disabled:border-orange-50"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-orange-50);
  }
  .border-orange-100 {
    border-color: var(--zbk-color-orange-100);
  }
  [class~="focus:border-orange-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-orange-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-orange-100:hover {
      border-color: var(--zbk-color-orange-100);
    }
  }
  [class~="active:border-orange-100"]:active {
    border-color: var(--zbk-color-orange-100);
  }
  [class~="disabled:border-orange-100"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-orange-100);
  }
  .border-orange-200 {
    border-color: var(--zbk-color-orange-200);
  }
  [class~="focus:border-orange-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-orange-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-orange-200:hover {
      border-color: var(--zbk-color-orange-200);
    }
  }
  [class~="active:border-orange-200"]:active {
    border-color: var(--zbk-color-orange-200);
  }
  [class~="disabled:border-orange-200"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-orange-200);
  }
  .border-orange-300 {
    border-color: var(--zbk-color-orange-300);
  }
  [class~="focus:border-orange-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-orange-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-orange-300:hover {
      border-color: var(--zbk-color-orange-300);
    }
  }
  [class~="active:border-orange-300"]:active {
    border-color: var(--zbk-color-orange-300);
  }
  [class~="disabled:border-orange-300"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-orange-300);
  }
  .border-orange-400 {
    border-color: var(--zbk-color-orange-400);
  }
  [class~="focus:border-orange-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-orange-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-orange-400:hover {
      border-color: var(--zbk-color-orange-400);
    }
  }
  [class~="active:border-orange-400"]:active {
    border-color: var(--zbk-color-orange-400);
  }
  [class~="disabled:border-orange-400"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-orange-400);
  }
  .border-orange-500 {
    border-color: var(--zbk-color-orange-500);
  }
  [class~="focus:border-orange-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-orange-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-orange-500:hover {
      border-color: var(--zbk-color-orange-500);
    }
  }
  [class~="active:border-orange-500"]:active {
    border-color: var(--zbk-color-orange-500);
  }
  [class~="disabled:border-orange-500"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-orange-500);
  }
  .border-orange-600 {
    border-color: var(--zbk-color-orange-600);
  }
  [class~="focus:border-orange-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-orange-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-orange-600:hover {
      border-color: var(--zbk-color-orange-600);
    }
  }
  [class~="active:border-orange-600"]:active {
    border-color: var(--zbk-color-orange-600);
  }
  [class~="disabled:border-orange-600"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-orange-600);
  }
  .border-orange-700 {
    border-color: var(--zbk-color-orange-700);
  }
  [class~="focus:border-orange-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-orange-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-orange-700:hover {
      border-color: var(--zbk-color-orange-700);
    }
  }
  [class~="active:border-orange-700"]:active {
    border-color: var(--zbk-color-orange-700);
  }
  [class~="disabled:border-orange-700"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-orange-700);
  }
  .border-orange-800 {
    border-color: var(--zbk-color-orange-800);
  }
  [class~="focus:border-orange-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-orange-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-orange-800:hover {
      border-color: var(--zbk-color-orange-800);
    }
  }
  [class~="active:border-orange-800"]:active {
    border-color: var(--zbk-color-orange-800);
  }
  [class~="disabled:border-orange-800"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-orange-800);
  }
  .border-orange-900 {
    border-color: var(--zbk-color-orange-900);
  }
  [class~="focus:border-orange-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-orange-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-orange-900:hover {
      border-color: var(--zbk-color-orange-900);
    }
  }
  [class~="active:border-orange-900"]:active {
    border-color: var(--zbk-color-orange-900);
  }
  [class~="disabled:border-orange-900"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-orange-900);
  }
  .border-orange-950 {
    border-color: var(--zbk-color-orange-950);
  }
  [class~="focus:border-orange-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-orange-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-orange-950:hover {
      border-color: var(--zbk-color-orange-950);
    }
  }
  [class~="active:border-orange-950"]:active {
    border-color: var(--zbk-color-orange-950);
  }
  [class~="disabled:border-orange-950"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-orange-950);
  }
  .fill-orange-50 {
    fill: var(--zbk-color-orange-50);
  }
  [class~="focus:fill-orange-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-orange-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-orange-50:hover {
      fill: var(--zbk-color-orange-50);
    }
  }
  [class~="active:fill-orange-50"]:active {
    fill: var(--zbk-color-orange-50);
  }
  [class~="disabled:fill-orange-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-orange-50);
  }
  .fill-orange-100 {
    fill: var(--zbk-color-orange-100);
  }
  [class~="focus:fill-orange-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-orange-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-orange-100:hover {
      fill: var(--zbk-color-orange-100);
    }
  }
  [class~="active:fill-orange-100"]:active {
    fill: var(--zbk-color-orange-100);
  }
  [class~="disabled:fill-orange-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-orange-100);
  }
  .fill-orange-200 {
    fill: var(--zbk-color-orange-200);
  }
  [class~="focus:fill-orange-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-orange-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-orange-200:hover {
      fill: var(--zbk-color-orange-200);
    }
  }
  [class~="active:fill-orange-200"]:active {
    fill: var(--zbk-color-orange-200);
  }
  [class~="disabled:fill-orange-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-orange-200);
  }
  .fill-orange-300 {
    fill: var(--zbk-color-orange-300);
  }
  [class~="focus:fill-orange-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-orange-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-orange-300:hover {
      fill: var(--zbk-color-orange-300);
    }
  }
  [class~="active:fill-orange-300"]:active {
    fill: var(--zbk-color-orange-300);
  }
  [class~="disabled:fill-orange-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-orange-300);
  }
  .fill-orange-400 {
    fill: var(--zbk-color-orange-400);
  }
  [class~="focus:fill-orange-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-orange-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-orange-400:hover {
      fill: var(--zbk-color-orange-400);
    }
  }
  [class~="active:fill-orange-400"]:active {
    fill: var(--zbk-color-orange-400);
  }
  [class~="disabled:fill-orange-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-orange-400);
  }
  .fill-orange-500 {
    fill: var(--zbk-color-orange-500);
  }
  [class~="focus:fill-orange-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-orange-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-orange-500:hover {
      fill: var(--zbk-color-orange-500);
    }
  }
  [class~="active:fill-orange-500"]:active {
    fill: var(--zbk-color-orange-500);
  }
  [class~="disabled:fill-orange-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-orange-500);
  }
  .fill-orange-600 {
    fill: var(--zbk-color-orange-600);
  }
  [class~="focus:fill-orange-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-orange-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-orange-600:hover {
      fill: var(--zbk-color-orange-600);
    }
  }
  [class~="active:fill-orange-600"]:active {
    fill: var(--zbk-color-orange-600);
  }
  [class~="disabled:fill-orange-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-orange-600);
  }
  .fill-orange-700 {
    fill: var(--zbk-color-orange-700);
  }
  [class~="focus:fill-orange-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-orange-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-orange-700:hover {
      fill: var(--zbk-color-orange-700);
    }
  }
  [class~="active:fill-orange-700"]:active {
    fill: var(--zbk-color-orange-700);
  }
  [class~="disabled:fill-orange-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-orange-700);
  }
  .fill-orange-800 {
    fill: var(--zbk-color-orange-800);
  }
  [class~="focus:fill-orange-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-orange-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-orange-800:hover {
      fill: var(--zbk-color-orange-800);
    }
  }
  [class~="active:fill-orange-800"]:active {
    fill: var(--zbk-color-orange-800);
  }
  [class~="disabled:fill-orange-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-orange-800);
  }
  .fill-orange-900 {
    fill: var(--zbk-color-orange-900);
  }
  [class~="focus:fill-orange-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-orange-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-orange-900:hover {
      fill: var(--zbk-color-orange-900);
    }
  }
  [class~="active:fill-orange-900"]:active {
    fill: var(--zbk-color-orange-900);
  }
  [class~="disabled:fill-orange-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-orange-900);
  }
  .fill-orange-950 {
    fill: var(--zbk-color-orange-950);
  }
  [class~="focus:fill-orange-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-orange-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-orange-950:hover {
      fill: var(--zbk-color-orange-950);
    }
  }
  [class~="active:fill-orange-950"]:active {
    fill: var(--zbk-color-orange-950);
  }
  [class~="disabled:fill-orange-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-orange-950);
  }
}
:root {
  --zbk-color-pink-hue: 340;
  --zbk-color-pink-saturation: 75%;
  --zbk-color-pink-50: hsl(
    var(--zbk-color-pink-hue),
    var(--zbk-color-pink-saturation),
    98%
  );
  --zbk-color-pink-100: hsl(
    var(--zbk-color-pink-hue),
    var(--zbk-color-pink-saturation),
    93%
  );
  --zbk-color-pink-200: hsl(
    var(--zbk-color-pink-hue),
    var(--zbk-color-pink-saturation),
    87%
  );
  --zbk-color-pink-300: hsl(
    var(--zbk-color-pink-hue),
    var(--zbk-color-pink-saturation),
    78%
  );
  --zbk-color-pink-400: hsl(
    var(--zbk-color-pink-hue),
    var(--zbk-color-pink-saturation),
    69%
  );
  --zbk-color-pink-500: hsl(
    var(--zbk-color-pink-hue),
    var(--zbk-color-pink-saturation),
    58%
  );
  --zbk-color-pink-600: hsl(
    var(--zbk-color-pink-hue),
    var(--zbk-color-pink-saturation),
    48%
  );
  --zbk-color-pink-700: hsl(
    var(--zbk-color-pink-hue),
    var(--zbk-color-pink-saturation),
    36%
  );
  --zbk-color-pink-800: hsl(
    var(--zbk-color-pink-hue),
    var(--zbk-color-pink-saturation),
    26%
  );
  --zbk-color-pink-900: hsl(
    var(--zbk-color-pink-hue),
    var(--zbk-color-pink-saturation),
    18%
  );
  --zbk-color-pink-950: hsl(
    var(--zbk-color-pink-hue),
    var(--zbk-color-pink-saturation),
    10%
  );
}
@layer utilities {
  .ink-pink-50 {
    color: var(--zbk-color-pink-50);
  }
  [class~="focus:ink-pink-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-pink-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-pink-50:hover {
      color: var(--zbk-color-pink-50);
    }
  }
  [class~="active:ink-pink-50"]:active {
    color: var(--zbk-color-pink-50);
  }
  [class~="disabled:ink-pink-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-pink-50);
  }
  .ink-pink-100 {
    color: var(--zbk-color-pink-100);
  }
  [class~="focus:ink-pink-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-pink-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-pink-100:hover {
      color: var(--zbk-color-pink-100);
    }
  }
  [class~="active:ink-pink-100"]:active {
    color: var(--zbk-color-pink-100);
  }
  [class~="disabled:ink-pink-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-pink-100);
  }
  .ink-pink-200 {
    color: var(--zbk-color-pink-200);
  }
  [class~="focus:ink-pink-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-pink-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-pink-200:hover {
      color: var(--zbk-color-pink-200);
    }
  }
  [class~="active:ink-pink-200"]:active {
    color: var(--zbk-color-pink-200);
  }
  [class~="disabled:ink-pink-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-pink-200);
  }
  .ink-pink-300 {
    color: var(--zbk-color-pink-300);
  }
  [class~="focus:ink-pink-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-pink-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-pink-300:hover {
      color: var(--zbk-color-pink-300);
    }
  }
  [class~="active:ink-pink-300"]:active {
    color: var(--zbk-color-pink-300);
  }
  [class~="disabled:ink-pink-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-pink-300);
  }
  .ink-pink-400 {
    color: var(--zbk-color-pink-400);
  }
  [class~="focus:ink-pink-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-pink-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-pink-400:hover {
      color: var(--zbk-color-pink-400);
    }
  }
  [class~="active:ink-pink-400"]:active {
    color: var(--zbk-color-pink-400);
  }
  [class~="disabled:ink-pink-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-pink-400);
  }
  .ink-pink-500 {
    color: var(--zbk-color-pink-500);
  }
  [class~="focus:ink-pink-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-pink-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-pink-500:hover {
      color: var(--zbk-color-pink-500);
    }
  }
  [class~="active:ink-pink-500"]:active {
    color: var(--zbk-color-pink-500);
  }
  [class~="disabled:ink-pink-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-pink-500);
  }
  .ink-pink-600 {
    color: var(--zbk-color-pink-600);
  }
  [class~="focus:ink-pink-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-pink-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-pink-600:hover {
      color: var(--zbk-color-pink-600);
    }
  }
  [class~="active:ink-pink-600"]:active {
    color: var(--zbk-color-pink-600);
  }
  [class~="disabled:ink-pink-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-pink-600);
  }
  .ink-pink-700 {
    color: var(--zbk-color-pink-700);
  }
  [class~="focus:ink-pink-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-pink-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-pink-700:hover {
      color: var(--zbk-color-pink-700);
    }
  }
  [class~="active:ink-pink-700"]:active {
    color: var(--zbk-color-pink-700);
  }
  [class~="disabled:ink-pink-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-pink-700);
  }
  .ink-pink-800 {
    color: var(--zbk-color-pink-800);
  }
  [class~="focus:ink-pink-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-pink-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-pink-800:hover {
      color: var(--zbk-color-pink-800);
    }
  }
  [class~="active:ink-pink-800"]:active {
    color: var(--zbk-color-pink-800);
  }
  [class~="disabled:ink-pink-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-pink-800);
  }
  .ink-pink-900 {
    color: var(--zbk-color-pink-900);
  }
  [class~="focus:ink-pink-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-pink-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-pink-900:hover {
      color: var(--zbk-color-pink-900);
    }
  }
  [class~="active:ink-pink-900"]:active {
    color: var(--zbk-color-pink-900);
  }
  [class~="disabled:ink-pink-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-pink-900);
  }
  .ink-pink-950 {
    color: var(--zbk-color-pink-950);
  }
  [class~="focus:ink-pink-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-pink-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-pink-950:hover {
      color: var(--zbk-color-pink-950);
    }
  }
  [class~="active:ink-pink-950"]:active {
    color: var(--zbk-color-pink-950);
  }
  [class~="disabled:ink-pink-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-pink-950);
  }
  .canvas-pink-50 {
    background-color: var(--zbk-color-pink-50);
  }
  [class~="focus:canvas-pink-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-pink-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-pink-50:hover {
      background-color: var(--zbk-color-pink-50);
    }
  }
  [class~="active:canvas-pink-50"]:active {
    background-color: var(--zbk-color-pink-50);
  }
  [class~="disabled:canvas-pink-50"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-pink-50);
  }
  .canvas-pink-100 {
    background-color: var(--zbk-color-pink-100);
  }
  [class~="focus:canvas-pink-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-pink-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-pink-100:hover {
      background-color: var(--zbk-color-pink-100);
    }
  }
  [class~="active:canvas-pink-100"]:active {
    background-color: var(--zbk-color-pink-100);
  }
  [class~="disabled:canvas-pink-100"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-pink-100);
  }
  .canvas-pink-200 {
    background-color: var(--zbk-color-pink-200);
  }
  [class~="focus:canvas-pink-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-pink-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-pink-200:hover {
      background-color: var(--zbk-color-pink-200);
    }
  }
  [class~="active:canvas-pink-200"]:active {
    background-color: var(--zbk-color-pink-200);
  }
  [class~="disabled:canvas-pink-200"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-pink-200);
  }
  .canvas-pink-300 {
    background-color: var(--zbk-color-pink-300);
  }
  [class~="focus:canvas-pink-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-pink-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-pink-300:hover {
      background-color: var(--zbk-color-pink-300);
    }
  }
  [class~="active:canvas-pink-300"]:active {
    background-color: var(--zbk-color-pink-300);
  }
  [class~="disabled:canvas-pink-300"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-pink-300);
  }
  .canvas-pink-400 {
    background-color: var(--zbk-color-pink-400);
  }
  [class~="focus:canvas-pink-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-pink-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-pink-400:hover {
      background-color: var(--zbk-color-pink-400);
    }
  }
  [class~="active:canvas-pink-400"]:active {
    background-color: var(--zbk-color-pink-400);
  }
  [class~="disabled:canvas-pink-400"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-pink-400);
  }
  .canvas-pink-500 {
    background-color: var(--zbk-color-pink-500);
  }
  [class~="focus:canvas-pink-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-pink-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-pink-500:hover {
      background-color: var(--zbk-color-pink-500);
    }
  }
  [class~="active:canvas-pink-500"]:active {
    background-color: var(--zbk-color-pink-500);
  }
  [class~="disabled:canvas-pink-500"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-pink-500);
  }
  .canvas-pink-600 {
    background-color: var(--zbk-color-pink-600);
  }
  [class~="focus:canvas-pink-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-pink-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-pink-600:hover {
      background-color: var(--zbk-color-pink-600);
    }
  }
  [class~="active:canvas-pink-600"]:active {
    background-color: var(--zbk-color-pink-600);
  }
  [class~="disabled:canvas-pink-600"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-pink-600);
  }
  .canvas-pink-700 {
    background-color: var(--zbk-color-pink-700);
  }
  [class~="focus:canvas-pink-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-pink-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-pink-700:hover {
      background-color: var(--zbk-color-pink-700);
    }
  }
  [class~="active:canvas-pink-700"]:active {
    background-color: var(--zbk-color-pink-700);
  }
  [class~="disabled:canvas-pink-700"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-pink-700);
  }
  .canvas-pink-800 {
    background-color: var(--zbk-color-pink-800);
  }
  [class~="focus:canvas-pink-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-pink-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-pink-800:hover {
      background-color: var(--zbk-color-pink-800);
    }
  }
  [class~="active:canvas-pink-800"]:active {
    background-color: var(--zbk-color-pink-800);
  }
  [class~="disabled:canvas-pink-800"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-pink-800);
  }
  .canvas-pink-900 {
    background-color: var(--zbk-color-pink-900);
  }
  [class~="focus:canvas-pink-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-pink-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-pink-900:hover {
      background-color: var(--zbk-color-pink-900);
    }
  }
  [class~="active:canvas-pink-900"]:active {
    background-color: var(--zbk-color-pink-900);
  }
  [class~="disabled:canvas-pink-900"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-pink-900);
  }
  .canvas-pink-950 {
    background-color: var(--zbk-color-pink-950);
  }
  [class~="focus:canvas-pink-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-pink-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-pink-950:hover {
      background-color: var(--zbk-color-pink-950);
    }
  }
  [class~="active:canvas-pink-950"]:active {
    background-color: var(--zbk-color-pink-950);
  }
  [class~="disabled:canvas-pink-950"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-pink-950);
  }
  .border-pink-50 {
    border-color: var(--zbk-color-pink-50);
  }
  [class~="focus:border-pink-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-pink-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-pink-50:hover {
      border-color: var(--zbk-color-pink-50);
    }
  }
  [class~="active:border-pink-50"]:active {
    border-color: var(--zbk-color-pink-50);
  }
  [class~="disabled:border-pink-50"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-pink-50);
  }
  .border-pink-100 {
    border-color: var(--zbk-color-pink-100);
  }
  [class~="focus:border-pink-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-pink-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-pink-100:hover {
      border-color: var(--zbk-color-pink-100);
    }
  }
  [class~="active:border-pink-100"]:active {
    border-color: var(--zbk-color-pink-100);
  }
  [class~="disabled:border-pink-100"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-pink-100);
  }
  .border-pink-200 {
    border-color: var(--zbk-color-pink-200);
  }
  [class~="focus:border-pink-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-pink-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-pink-200:hover {
      border-color: var(--zbk-color-pink-200);
    }
  }
  [class~="active:border-pink-200"]:active {
    border-color: var(--zbk-color-pink-200);
  }
  [class~="disabled:border-pink-200"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-pink-200);
  }
  .border-pink-300 {
    border-color: var(--zbk-color-pink-300);
  }
  [class~="focus:border-pink-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-pink-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-pink-300:hover {
      border-color: var(--zbk-color-pink-300);
    }
  }
  [class~="active:border-pink-300"]:active {
    border-color: var(--zbk-color-pink-300);
  }
  [class~="disabled:border-pink-300"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-pink-300);
  }
  .border-pink-400 {
    border-color: var(--zbk-color-pink-400);
  }
  [class~="focus:border-pink-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-pink-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-pink-400:hover {
      border-color: var(--zbk-color-pink-400);
    }
  }
  [class~="active:border-pink-400"]:active {
    border-color: var(--zbk-color-pink-400);
  }
  [class~="disabled:border-pink-400"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-pink-400);
  }
  .border-pink-500 {
    border-color: var(--zbk-color-pink-500);
  }
  [class~="focus:border-pink-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-pink-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-pink-500:hover {
      border-color: var(--zbk-color-pink-500);
    }
  }
  [class~="active:border-pink-500"]:active {
    border-color: var(--zbk-color-pink-500);
  }
  [class~="disabled:border-pink-500"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-pink-500);
  }
  .border-pink-600 {
    border-color: var(--zbk-color-pink-600);
  }
  [class~="focus:border-pink-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-pink-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-pink-600:hover {
      border-color: var(--zbk-color-pink-600);
    }
  }
  [class~="active:border-pink-600"]:active {
    border-color: var(--zbk-color-pink-600);
  }
  [class~="disabled:border-pink-600"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-pink-600);
  }
  .border-pink-700 {
    border-color: var(--zbk-color-pink-700);
  }
  [class~="focus:border-pink-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-pink-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-pink-700:hover {
      border-color: var(--zbk-color-pink-700);
    }
  }
  [class~="active:border-pink-700"]:active {
    border-color: var(--zbk-color-pink-700);
  }
  [class~="disabled:border-pink-700"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-pink-700);
  }
  .border-pink-800 {
    border-color: var(--zbk-color-pink-800);
  }
  [class~="focus:border-pink-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-pink-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-pink-800:hover {
      border-color: var(--zbk-color-pink-800);
    }
  }
  [class~="active:border-pink-800"]:active {
    border-color: var(--zbk-color-pink-800);
  }
  [class~="disabled:border-pink-800"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-pink-800);
  }
  .border-pink-900 {
    border-color: var(--zbk-color-pink-900);
  }
  [class~="focus:border-pink-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-pink-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-pink-900:hover {
      border-color: var(--zbk-color-pink-900);
    }
  }
  [class~="active:border-pink-900"]:active {
    border-color: var(--zbk-color-pink-900);
  }
  [class~="disabled:border-pink-900"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-pink-900);
  }
  .border-pink-950 {
    border-color: var(--zbk-color-pink-950);
  }
  [class~="focus:border-pink-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-pink-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-pink-950:hover {
      border-color: var(--zbk-color-pink-950);
    }
  }
  [class~="active:border-pink-950"]:active {
    border-color: var(--zbk-color-pink-950);
  }
  [class~="disabled:border-pink-950"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-pink-950);
  }
  .fill-pink-50 {
    fill: var(--zbk-color-pink-50);
  }
  [class~="focus:fill-pink-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-pink-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-pink-50:hover {
      fill: var(--zbk-color-pink-50);
    }
  }
  [class~="active:fill-pink-50"]:active {
    fill: var(--zbk-color-pink-50);
  }
  [class~="disabled:fill-pink-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-pink-50);
  }
  .fill-pink-100 {
    fill: var(--zbk-color-pink-100);
  }
  [class~="focus:fill-pink-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-pink-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-pink-100:hover {
      fill: var(--zbk-color-pink-100);
    }
  }
  [class~="active:fill-pink-100"]:active {
    fill: var(--zbk-color-pink-100);
  }
  [class~="disabled:fill-pink-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-pink-100);
  }
  .fill-pink-200 {
    fill: var(--zbk-color-pink-200);
  }
  [class~="focus:fill-pink-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-pink-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-pink-200:hover {
      fill: var(--zbk-color-pink-200);
    }
  }
  [class~="active:fill-pink-200"]:active {
    fill: var(--zbk-color-pink-200);
  }
  [class~="disabled:fill-pink-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-pink-200);
  }
  .fill-pink-300 {
    fill: var(--zbk-color-pink-300);
  }
  [class~="focus:fill-pink-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-pink-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-pink-300:hover {
      fill: var(--zbk-color-pink-300);
    }
  }
  [class~="active:fill-pink-300"]:active {
    fill: var(--zbk-color-pink-300);
  }
  [class~="disabled:fill-pink-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-pink-300);
  }
  .fill-pink-400 {
    fill: var(--zbk-color-pink-400);
  }
  [class~="focus:fill-pink-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-pink-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-pink-400:hover {
      fill: var(--zbk-color-pink-400);
    }
  }
  [class~="active:fill-pink-400"]:active {
    fill: var(--zbk-color-pink-400);
  }
  [class~="disabled:fill-pink-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-pink-400);
  }
  .fill-pink-500 {
    fill: var(--zbk-color-pink-500);
  }
  [class~="focus:fill-pink-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-pink-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-pink-500:hover {
      fill: var(--zbk-color-pink-500);
    }
  }
  [class~="active:fill-pink-500"]:active {
    fill: var(--zbk-color-pink-500);
  }
  [class~="disabled:fill-pink-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-pink-500);
  }
  .fill-pink-600 {
    fill: var(--zbk-color-pink-600);
  }
  [class~="focus:fill-pink-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-pink-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-pink-600:hover {
      fill: var(--zbk-color-pink-600);
    }
  }
  [class~="active:fill-pink-600"]:active {
    fill: var(--zbk-color-pink-600);
  }
  [class~="disabled:fill-pink-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-pink-600);
  }
  .fill-pink-700 {
    fill: var(--zbk-color-pink-700);
  }
  [class~="focus:fill-pink-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-pink-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-pink-700:hover {
      fill: var(--zbk-color-pink-700);
    }
  }
  [class~="active:fill-pink-700"]:active {
    fill: var(--zbk-color-pink-700);
  }
  [class~="disabled:fill-pink-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-pink-700);
  }
  .fill-pink-800 {
    fill: var(--zbk-color-pink-800);
  }
  [class~="focus:fill-pink-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-pink-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-pink-800:hover {
      fill: var(--zbk-color-pink-800);
    }
  }
  [class~="active:fill-pink-800"]:active {
    fill: var(--zbk-color-pink-800);
  }
  [class~="disabled:fill-pink-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-pink-800);
  }
  .fill-pink-900 {
    fill: var(--zbk-color-pink-900);
  }
  [class~="focus:fill-pink-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-pink-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-pink-900:hover {
      fill: var(--zbk-color-pink-900);
    }
  }
  [class~="active:fill-pink-900"]:active {
    fill: var(--zbk-color-pink-900);
  }
  [class~="disabled:fill-pink-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-pink-900);
  }
  .fill-pink-950 {
    fill: var(--zbk-color-pink-950);
  }
  [class~="focus:fill-pink-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-pink-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-pink-950:hover {
      fill: var(--zbk-color-pink-950);
    }
  }
  [class~="active:fill-pink-950"]:active {
    fill: var(--zbk-color-pink-950);
  }
  [class~="disabled:fill-pink-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-pink-950);
  }
}
:root {
  --zbk-color-red-hue: 0;
  --zbk-color-red-saturation: 80%;
  --zbk-color-red-50: hsl(
    var(--zbk-color-red-hue),
    var(--zbk-color-red-saturation),
    98%
  );
  --zbk-color-red-100: hsl(
    var(--zbk-color-red-hue),
    var(--zbk-color-red-saturation),
    93%
  );
  --zbk-color-red-200: hsl(
    var(--zbk-color-red-hue),
    var(--zbk-color-red-saturation),
    87%
  );
  --zbk-color-red-300: hsl(
    var(--zbk-color-red-hue),
    var(--zbk-color-red-saturation),
    78%
  );
  --zbk-color-red-400: hsl(
    var(--zbk-color-red-hue),
    var(--zbk-color-red-saturation),
    69%
  );
  --zbk-color-red-500: hsl(
    var(--zbk-color-red-hue),
    var(--zbk-color-red-saturation),
    58%
  );
  --zbk-color-red-600: hsl(
    var(--zbk-color-red-hue),
    var(--zbk-color-red-saturation),
    48%
  );
  --zbk-color-red-700: hsl(
    var(--zbk-color-red-hue),
    var(--zbk-color-red-saturation),
    36%
  );
  --zbk-color-red-800: hsl(
    var(--zbk-color-red-hue),
    var(--zbk-color-red-saturation),
    26%
  );
  --zbk-color-red-900: hsl(
    var(--zbk-color-red-hue),
    var(--zbk-color-red-saturation),
    18%
  );
  --zbk-color-red-950: hsl(
    var(--zbk-color-red-hue),
    var(--zbk-color-red-saturation),
    10%
  );
}
@layer utilities {
  .ink-red-50 {
    color: var(--zbk-color-red-50);
  }
  [class~="focus:ink-red-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-red-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-red-50:hover {
      color: var(--zbk-color-red-50);
    }
  }
  [class~="active:ink-red-50"]:active {
    color: var(--zbk-color-red-50);
  }
  [class~="disabled:ink-red-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-red-50);
  }
  .ink-red-100 {
    color: var(--zbk-color-red-100);
  }
  [class~="focus:ink-red-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-red-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-red-100:hover {
      color: var(--zbk-color-red-100);
    }
  }
  [class~="active:ink-red-100"]:active {
    color: var(--zbk-color-red-100);
  }
  [class~="disabled:ink-red-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-red-100);
  }
  .ink-red-200 {
    color: var(--zbk-color-red-200);
  }
  [class~="focus:ink-red-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-red-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-red-200:hover {
      color: var(--zbk-color-red-200);
    }
  }
  [class~="active:ink-red-200"]:active {
    color: var(--zbk-color-red-200);
  }
  [class~="disabled:ink-red-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-red-200);
  }
  .ink-red-300 {
    color: var(--zbk-color-red-300);
  }
  [class~="focus:ink-red-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-red-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-red-300:hover {
      color: var(--zbk-color-red-300);
    }
  }
  [class~="active:ink-red-300"]:active {
    color: var(--zbk-color-red-300);
  }
  [class~="disabled:ink-red-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-red-300);
  }
  .ink-red-400 {
    color: var(--zbk-color-red-400);
  }
  [class~="focus:ink-red-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-red-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-red-400:hover {
      color: var(--zbk-color-red-400);
    }
  }
  [class~="active:ink-red-400"]:active {
    color: var(--zbk-color-red-400);
  }
  [class~="disabled:ink-red-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-red-400);
  }
  .ink-red-500 {
    color: var(--zbk-color-red-500);
  }
  [class~="focus:ink-red-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-red-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-red-500:hover {
      color: var(--zbk-color-red-500);
    }
  }
  [class~="active:ink-red-500"]:active {
    color: var(--zbk-color-red-500);
  }
  [class~="disabled:ink-red-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-red-500);
  }
  .ink-red-600 {
    color: var(--zbk-color-red-600);
  }
  [class~="focus:ink-red-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-red-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-red-600:hover {
      color: var(--zbk-color-red-600);
    }
  }
  [class~="active:ink-red-600"]:active {
    color: var(--zbk-color-red-600);
  }
  [class~="disabled:ink-red-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-red-600);
  }
  .ink-red-700 {
    color: var(--zbk-color-red-700);
  }
  [class~="focus:ink-red-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-red-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-red-700:hover {
      color: var(--zbk-color-red-700);
    }
  }
  [class~="active:ink-red-700"]:active {
    color: var(--zbk-color-red-700);
  }
  [class~="disabled:ink-red-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-red-700);
  }
  .ink-red-800 {
    color: var(--zbk-color-red-800);
  }
  [class~="focus:ink-red-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-red-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-red-800:hover {
      color: var(--zbk-color-red-800);
    }
  }
  [class~="active:ink-red-800"]:active {
    color: var(--zbk-color-red-800);
  }
  [class~="disabled:ink-red-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-red-800);
  }
  .ink-red-900 {
    color: var(--zbk-color-red-900);
  }
  [class~="focus:ink-red-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-red-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-red-900:hover {
      color: var(--zbk-color-red-900);
    }
  }
  [class~="active:ink-red-900"]:active {
    color: var(--zbk-color-red-900);
  }
  [class~="disabled:ink-red-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-red-900);
  }
  .ink-red-950 {
    color: var(--zbk-color-red-950);
  }
  [class~="focus:ink-red-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-red-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-red-950:hover {
      color: var(--zbk-color-red-950);
    }
  }
  [class~="active:ink-red-950"]:active {
    color: var(--zbk-color-red-950);
  }
  [class~="disabled:ink-red-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-red-950);
  }
  .canvas-red-50 {
    background-color: var(--zbk-color-red-50);
  }
  [class~="focus:canvas-red-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-red-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-red-50:hover {
      background-color: var(--zbk-color-red-50);
    }
  }
  [class~="active:canvas-red-50"]:active {
    background-color: var(--zbk-color-red-50);
  }
  [class~="disabled:canvas-red-50"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-red-50);
  }
  .canvas-red-100 {
    background-color: var(--zbk-color-red-100);
  }
  [class~="focus:canvas-red-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-red-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-red-100:hover {
      background-color: var(--zbk-color-red-100);
    }
  }
  [class~="active:canvas-red-100"]:active {
    background-color: var(--zbk-color-red-100);
  }
  [class~="disabled:canvas-red-100"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-red-100);
  }
  .canvas-red-200 {
    background-color: var(--zbk-color-red-200);
  }
  [class~="focus:canvas-red-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-red-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-red-200:hover {
      background-color: var(--zbk-color-red-200);
    }
  }
  [class~="active:canvas-red-200"]:active {
    background-color: var(--zbk-color-red-200);
  }
  [class~="disabled:canvas-red-200"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-red-200);
  }
  .canvas-red-300 {
    background-color: var(--zbk-color-red-300);
  }
  [class~="focus:canvas-red-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-red-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-red-300:hover {
      background-color: var(--zbk-color-red-300);
    }
  }
  [class~="active:canvas-red-300"]:active {
    background-color: var(--zbk-color-red-300);
  }
  [class~="disabled:canvas-red-300"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-red-300);
  }
  .canvas-red-400 {
    background-color: var(--zbk-color-red-400);
  }
  [class~="focus:canvas-red-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-red-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-red-400:hover {
      background-color: var(--zbk-color-red-400);
    }
  }
  [class~="active:canvas-red-400"]:active {
    background-color: var(--zbk-color-red-400);
  }
  [class~="disabled:canvas-red-400"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-red-400);
  }
  .canvas-red-500 {
    background-color: var(--zbk-color-red-500);
  }
  [class~="focus:canvas-red-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-red-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-red-500:hover {
      background-color: var(--zbk-color-red-500);
    }
  }
  [class~="active:canvas-red-500"]:active {
    background-color: var(--zbk-color-red-500);
  }
  [class~="disabled:canvas-red-500"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-red-500);
  }
  .canvas-red-600 {
    background-color: var(--zbk-color-red-600);
  }
  [class~="focus:canvas-red-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-red-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-red-600:hover {
      background-color: var(--zbk-color-red-600);
    }
  }
  [class~="active:canvas-red-600"]:active {
    background-color: var(--zbk-color-red-600);
  }
  [class~="disabled:canvas-red-600"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-red-600);
  }
  .canvas-red-700 {
    background-color: var(--zbk-color-red-700);
  }
  [class~="focus:canvas-red-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-red-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-red-700:hover {
      background-color: var(--zbk-color-red-700);
    }
  }
  [class~="active:canvas-red-700"]:active {
    background-color: var(--zbk-color-red-700);
  }
  [class~="disabled:canvas-red-700"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-red-700);
  }
  .canvas-red-800 {
    background-color: var(--zbk-color-red-800);
  }
  [class~="focus:canvas-red-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-red-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-red-800:hover {
      background-color: var(--zbk-color-red-800);
    }
  }
  [class~="active:canvas-red-800"]:active {
    background-color: var(--zbk-color-red-800);
  }
  [class~="disabled:canvas-red-800"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-red-800);
  }
  .canvas-red-900 {
    background-color: var(--zbk-color-red-900);
  }
  [class~="focus:canvas-red-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-red-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-red-900:hover {
      background-color: var(--zbk-color-red-900);
    }
  }
  [class~="active:canvas-red-900"]:active {
    background-color: var(--zbk-color-red-900);
  }
  [class~="disabled:canvas-red-900"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-red-900);
  }
  .canvas-red-950 {
    background-color: var(--zbk-color-red-950);
  }
  [class~="focus:canvas-red-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-red-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-red-950:hover {
      background-color: var(--zbk-color-red-950);
    }
  }
  [class~="active:canvas-red-950"]:active {
    background-color: var(--zbk-color-red-950);
  }
  [class~="disabled:canvas-red-950"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-red-950);
  }
  .border-red-50 {
    border-color: var(--zbk-color-red-50);
  }
  [class~="focus:border-red-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-red-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-red-50:hover {
      border-color: var(--zbk-color-red-50);
    }
  }
  [class~="active:border-red-50"]:active {
    border-color: var(--zbk-color-red-50);
  }
  [class~="disabled:border-red-50"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-red-50);
  }
  .border-red-100 {
    border-color: var(--zbk-color-red-100);
  }
  [class~="focus:border-red-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-red-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-red-100:hover {
      border-color: var(--zbk-color-red-100);
    }
  }
  [class~="active:border-red-100"]:active {
    border-color: var(--zbk-color-red-100);
  }
  [class~="disabled:border-red-100"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-red-100);
  }
  .border-red-200 {
    border-color: var(--zbk-color-red-200);
  }
  [class~="focus:border-red-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-red-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-red-200:hover {
      border-color: var(--zbk-color-red-200);
    }
  }
  [class~="active:border-red-200"]:active {
    border-color: var(--zbk-color-red-200);
  }
  [class~="disabled:border-red-200"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-red-200);
  }
  .border-red-300 {
    border-color: var(--zbk-color-red-300);
  }
  [class~="focus:border-red-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-red-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-red-300:hover {
      border-color: var(--zbk-color-red-300);
    }
  }
  [class~="active:border-red-300"]:active {
    border-color: var(--zbk-color-red-300);
  }
  [class~="disabled:border-red-300"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-red-300);
  }
  .border-red-400 {
    border-color: var(--zbk-color-red-400);
  }
  [class~="focus:border-red-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-red-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-red-400:hover {
      border-color: var(--zbk-color-red-400);
    }
  }
  [class~="active:border-red-400"]:active {
    border-color: var(--zbk-color-red-400);
  }
  [class~="disabled:border-red-400"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-red-400);
  }
  .border-red-500 {
    border-color: var(--zbk-color-red-500);
  }
  [class~="focus:border-red-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-red-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-red-500:hover {
      border-color: var(--zbk-color-red-500);
    }
  }
  [class~="active:border-red-500"]:active {
    border-color: var(--zbk-color-red-500);
  }
  [class~="disabled:border-red-500"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-red-500);
  }
  .border-red-600 {
    border-color: var(--zbk-color-red-600);
  }
  [class~="focus:border-red-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-red-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-red-600:hover {
      border-color: var(--zbk-color-red-600);
    }
  }
  [class~="active:border-red-600"]:active {
    border-color: var(--zbk-color-red-600);
  }
  [class~="disabled:border-red-600"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-red-600);
  }
  .border-red-700 {
    border-color: var(--zbk-color-red-700);
  }
  [class~="focus:border-red-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-red-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-red-700:hover {
      border-color: var(--zbk-color-red-700);
    }
  }
  [class~="active:border-red-700"]:active {
    border-color: var(--zbk-color-red-700);
  }
  [class~="disabled:border-red-700"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-red-700);
  }
  .border-red-800 {
    border-color: var(--zbk-color-red-800);
  }
  [class~="focus:border-red-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-red-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-red-800:hover {
      border-color: var(--zbk-color-red-800);
    }
  }
  [class~="active:border-red-800"]:active {
    border-color: var(--zbk-color-red-800);
  }
  [class~="disabled:border-red-800"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-red-800);
  }
  .border-red-900 {
    border-color: var(--zbk-color-red-900);
  }
  [class~="focus:border-red-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-red-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-red-900:hover {
      border-color: var(--zbk-color-red-900);
    }
  }
  [class~="active:border-red-900"]:active {
    border-color: var(--zbk-color-red-900);
  }
  [class~="disabled:border-red-900"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-red-900);
  }
  .border-red-950 {
    border-color: var(--zbk-color-red-950);
  }
  [class~="focus:border-red-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-red-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-red-950:hover {
      border-color: var(--zbk-color-red-950);
    }
  }
  [class~="active:border-red-950"]:active {
    border-color: var(--zbk-color-red-950);
  }
  [class~="disabled:border-red-950"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-red-950);
  }
  .fill-red-50 {
    fill: var(--zbk-color-red-50);
  }
  [class~="focus:fill-red-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-red-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-red-50:hover {
      fill: var(--zbk-color-red-50);
    }
  }
  [class~="active:fill-red-50"]:active {
    fill: var(--zbk-color-red-50);
  }
  [class~="disabled:fill-red-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-red-50);
  }
  .fill-red-100 {
    fill: var(--zbk-color-red-100);
  }
  [class~="focus:fill-red-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-red-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-red-100:hover {
      fill: var(--zbk-color-red-100);
    }
  }
  [class~="active:fill-red-100"]:active {
    fill: var(--zbk-color-red-100);
  }
  [class~="disabled:fill-red-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-red-100);
  }
  .fill-red-200 {
    fill: var(--zbk-color-red-200);
  }
  [class~="focus:fill-red-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-red-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-red-200:hover {
      fill: var(--zbk-color-red-200);
    }
  }
  [class~="active:fill-red-200"]:active {
    fill: var(--zbk-color-red-200);
  }
  [class~="disabled:fill-red-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-red-200);
  }
  .fill-red-300 {
    fill: var(--zbk-color-red-300);
  }
  [class~="focus:fill-red-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-red-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-red-300:hover {
      fill: var(--zbk-color-red-300);
    }
  }
  [class~="active:fill-red-300"]:active {
    fill: var(--zbk-color-red-300);
  }
  [class~="disabled:fill-red-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-red-300);
  }
  .fill-red-400 {
    fill: var(--zbk-color-red-400);
  }
  [class~="focus:fill-red-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-red-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-red-400:hover {
      fill: var(--zbk-color-red-400);
    }
  }
  [class~="active:fill-red-400"]:active {
    fill: var(--zbk-color-red-400);
  }
  [class~="disabled:fill-red-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-red-400);
  }
  .fill-red-500 {
    fill: var(--zbk-color-red-500);
  }
  [class~="focus:fill-red-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-red-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-red-500:hover {
      fill: var(--zbk-color-red-500);
    }
  }
  [class~="active:fill-red-500"]:active {
    fill: var(--zbk-color-red-500);
  }
  [class~="disabled:fill-red-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-red-500);
  }
  .fill-red-600 {
    fill: var(--zbk-color-red-600);
  }
  [class~="focus:fill-red-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-red-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-red-600:hover {
      fill: var(--zbk-color-red-600);
    }
  }
  [class~="active:fill-red-600"]:active {
    fill: var(--zbk-color-red-600);
  }
  [class~="disabled:fill-red-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-red-600);
  }
  .fill-red-700 {
    fill: var(--zbk-color-red-700);
  }
  [class~="focus:fill-red-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-red-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-red-700:hover {
      fill: var(--zbk-color-red-700);
    }
  }
  [class~="active:fill-red-700"]:active {
    fill: var(--zbk-color-red-700);
  }
  [class~="disabled:fill-red-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-red-700);
  }
  .fill-red-800 {
    fill: var(--zbk-color-red-800);
  }
  [class~="focus:fill-red-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-red-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-red-800:hover {
      fill: var(--zbk-color-red-800);
    }
  }
  [class~="active:fill-red-800"]:active {
    fill: var(--zbk-color-red-800);
  }
  [class~="disabled:fill-red-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-red-800);
  }
  .fill-red-900 {
    fill: var(--zbk-color-red-900);
  }
  [class~="focus:fill-red-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-red-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-red-900:hover {
      fill: var(--zbk-color-red-900);
    }
  }
  [class~="active:fill-red-900"]:active {
    fill: var(--zbk-color-red-900);
  }
  [class~="disabled:fill-red-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-red-900);
  }
  .fill-red-950 {
    fill: var(--zbk-color-red-950);
  }
  [class~="focus:fill-red-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-red-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-red-950:hover {
      fill: var(--zbk-color-red-950);
    }
  }
  [class~="active:fill-red-950"]:active {
    fill: var(--zbk-color-red-950);
  }
  [class~="disabled:fill-red-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-red-950);
  }
}
:root {
  --zbk-color-rosewater-hue: 350;
  --zbk-color-rosewater-saturation: 68%;
  --zbk-color-rosewater-50: hsl(
    var(--zbk-color-rosewater-hue),
    var(--zbk-color-rosewater-saturation),
    98%
  );
  --zbk-color-rosewater-100: hsl(
    var(--zbk-color-rosewater-hue),
    var(--zbk-color-rosewater-saturation),
    93%
  );
  --zbk-color-rosewater-200: hsl(
    var(--zbk-color-rosewater-hue),
    var(--zbk-color-rosewater-saturation),
    87%
  );
  --zbk-color-rosewater-300: hsl(
    var(--zbk-color-rosewater-hue),
    var(--zbk-color-rosewater-saturation),
    78%
  );
  --zbk-color-rosewater-400: hsl(
    var(--zbk-color-rosewater-hue),
    var(--zbk-color-rosewater-saturation),
    69%
  );
  --zbk-color-rosewater-500: hsl(
    var(--zbk-color-rosewater-hue),
    var(--zbk-color-rosewater-saturation),
    58%
  );
  --zbk-color-rosewater-600: hsl(
    var(--zbk-color-rosewater-hue),
    var(--zbk-color-rosewater-saturation),
    48%
  );
  --zbk-color-rosewater-700: hsl(
    var(--zbk-color-rosewater-hue),
    var(--zbk-color-rosewater-saturation),
    36%
  );
  --zbk-color-rosewater-800: hsl(
    var(--zbk-color-rosewater-hue),
    var(--zbk-color-rosewater-saturation),
    26%
  );
  --zbk-color-rosewater-900: hsl(
    var(--zbk-color-rosewater-hue),
    var(--zbk-color-rosewater-saturation),
    18%
  );
  --zbk-color-rosewater-950: hsl(
    var(--zbk-color-rosewater-hue),
    var(--zbk-color-rosewater-saturation),
    10%
  );
}
@layer utilities {
  .ink-rosewater-50 {
    color: var(--zbk-color-rosewater-50);
  }
  [class~="focus:ink-rosewater-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-50:hover {
      color: var(--zbk-color-rosewater-50);
    }
  }
  [class~="active:ink-rosewater-50"]:active {
    color: var(--zbk-color-rosewater-50);
  }
  [class~="disabled:ink-rosewater-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-50);
  }
  .ink-rosewater-100 {
    color: var(--zbk-color-rosewater-100);
  }
  [class~="focus:ink-rosewater-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-100:hover {
      color: var(--zbk-color-rosewater-100);
    }
  }
  [class~="active:ink-rosewater-100"]:active {
    color: var(--zbk-color-rosewater-100);
  }
  [class~="disabled:ink-rosewater-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-100);
  }
  .ink-rosewater-200 {
    color: var(--zbk-color-rosewater-200);
  }
  [class~="focus:ink-rosewater-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-200:hover {
      color: var(--zbk-color-rosewater-200);
    }
  }
  [class~="active:ink-rosewater-200"]:active {
    color: var(--zbk-color-rosewater-200);
  }
  [class~="disabled:ink-rosewater-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-200);
  }
  .ink-rosewater-300 {
    color: var(--zbk-color-rosewater-300);
  }
  [class~="focus:ink-rosewater-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-300:hover {
      color: var(--zbk-color-rosewater-300);
    }
  }
  [class~="active:ink-rosewater-300"]:active {
    color: var(--zbk-color-rosewater-300);
  }
  [class~="disabled:ink-rosewater-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-300);
  }
  .ink-rosewater-400 {
    color: var(--zbk-color-rosewater-400);
  }
  [class~="focus:ink-rosewater-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-400:hover {
      color: var(--zbk-color-rosewater-400);
    }
  }
  [class~="active:ink-rosewater-400"]:active {
    color: var(--zbk-color-rosewater-400);
  }
  [class~="disabled:ink-rosewater-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-400);
  }
  .ink-rosewater-500 {
    color: var(--zbk-color-rosewater-500);
  }
  [class~="focus:ink-rosewater-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-500:hover {
      color: var(--zbk-color-rosewater-500);
    }
  }
  [class~="active:ink-rosewater-500"]:active {
    color: var(--zbk-color-rosewater-500);
  }
  [class~="disabled:ink-rosewater-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-500);
  }
  .ink-rosewater-600 {
    color: var(--zbk-color-rosewater-600);
  }
  [class~="focus:ink-rosewater-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-600:hover {
      color: var(--zbk-color-rosewater-600);
    }
  }
  [class~="active:ink-rosewater-600"]:active {
    color: var(--zbk-color-rosewater-600);
  }
  [class~="disabled:ink-rosewater-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-600);
  }
  .ink-rosewater-700 {
    color: var(--zbk-color-rosewater-700);
  }
  [class~="focus:ink-rosewater-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-700:hover {
      color: var(--zbk-color-rosewater-700);
    }
  }
  [class~="active:ink-rosewater-700"]:active {
    color: var(--zbk-color-rosewater-700);
  }
  [class~="disabled:ink-rosewater-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-700);
  }
  .ink-rosewater-800 {
    color: var(--zbk-color-rosewater-800);
  }
  [class~="focus:ink-rosewater-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-800:hover {
      color: var(--zbk-color-rosewater-800);
    }
  }
  [class~="active:ink-rosewater-800"]:active {
    color: var(--zbk-color-rosewater-800);
  }
  [class~="disabled:ink-rosewater-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-800);
  }
  .ink-rosewater-900 {
    color: var(--zbk-color-rosewater-900);
  }
  [class~="focus:ink-rosewater-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-900:hover {
      color: var(--zbk-color-rosewater-900);
    }
  }
  [class~="active:ink-rosewater-900"]:active {
    color: var(--zbk-color-rosewater-900);
  }
  [class~="disabled:ink-rosewater-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-900);
  }
  .ink-rosewater-950 {
    color: var(--zbk-color-rosewater-950);
  }
  [class~="focus:ink-rosewater-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-950:hover {
      color: var(--zbk-color-rosewater-950);
    }
  }
  [class~="active:ink-rosewater-950"]:active {
    color: var(--zbk-color-rosewater-950);
  }
  [class~="disabled:ink-rosewater-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-950);
  }
  .canvas-rosewater-50 {
    background-color: var(--zbk-color-rosewater-50);
  }
  [class~="focus:canvas-rosewater-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-50:hover {
      background-color: var(--zbk-color-rosewater-50);
    }
  }
  [class~="active:canvas-rosewater-50"]:active {
    background-color: var(--zbk-color-rosewater-50);
  }
  [class~="disabled:canvas-rosewater-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-50);
  }
  .canvas-rosewater-100 {
    background-color: var(--zbk-color-rosewater-100);
  }
  [class~="focus:canvas-rosewater-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-100:hover {
      background-color: var(--zbk-color-rosewater-100);
    }
  }
  [class~="active:canvas-rosewater-100"]:active {
    background-color: var(--zbk-color-rosewater-100);
  }
  [class~="disabled:canvas-rosewater-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-100);
  }
  .canvas-rosewater-200 {
    background-color: var(--zbk-color-rosewater-200);
  }
  [class~="focus:canvas-rosewater-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-200:hover {
      background-color: var(--zbk-color-rosewater-200);
    }
  }
  [class~="active:canvas-rosewater-200"]:active {
    background-color: var(--zbk-color-rosewater-200);
  }
  [class~="disabled:canvas-rosewater-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-200);
  }
  .canvas-rosewater-300 {
    background-color: var(--zbk-color-rosewater-300);
  }
  [class~="focus:canvas-rosewater-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-300:hover {
      background-color: var(--zbk-color-rosewater-300);
    }
  }
  [class~="active:canvas-rosewater-300"]:active {
    background-color: var(--zbk-color-rosewater-300);
  }
  [class~="disabled:canvas-rosewater-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-300);
  }
  .canvas-rosewater-400 {
    background-color: var(--zbk-color-rosewater-400);
  }
  [class~="focus:canvas-rosewater-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-400:hover {
      background-color: var(--zbk-color-rosewater-400);
    }
  }
  [class~="active:canvas-rosewater-400"]:active {
    background-color: var(--zbk-color-rosewater-400);
  }
  [class~="disabled:canvas-rosewater-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-400);
  }
  .canvas-rosewater-500 {
    background-color: var(--zbk-color-rosewater-500);
  }
  [class~="focus:canvas-rosewater-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-500:hover {
      background-color: var(--zbk-color-rosewater-500);
    }
  }
  [class~="active:canvas-rosewater-500"]:active {
    background-color: var(--zbk-color-rosewater-500);
  }
  [class~="disabled:canvas-rosewater-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-500);
  }
  .canvas-rosewater-600 {
    background-color: var(--zbk-color-rosewater-600);
  }
  [class~="focus:canvas-rosewater-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-600:hover {
      background-color: var(--zbk-color-rosewater-600);
    }
  }
  [class~="active:canvas-rosewater-600"]:active {
    background-color: var(--zbk-color-rosewater-600);
  }
  [class~="disabled:canvas-rosewater-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-600);
  }
  .canvas-rosewater-700 {
    background-color: var(--zbk-color-rosewater-700);
  }
  [class~="focus:canvas-rosewater-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-700:hover {
      background-color: var(--zbk-color-rosewater-700);
    }
  }
  [class~="active:canvas-rosewater-700"]:active {
    background-color: var(--zbk-color-rosewater-700);
  }
  [class~="disabled:canvas-rosewater-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-700);
  }
  .canvas-rosewater-800 {
    background-color: var(--zbk-color-rosewater-800);
  }
  [class~="focus:canvas-rosewater-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-800:hover {
      background-color: var(--zbk-color-rosewater-800);
    }
  }
  [class~="active:canvas-rosewater-800"]:active {
    background-color: var(--zbk-color-rosewater-800);
  }
  [class~="disabled:canvas-rosewater-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-800);
  }
  .canvas-rosewater-900 {
    background-color: var(--zbk-color-rosewater-900);
  }
  [class~="focus:canvas-rosewater-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-900:hover {
      background-color: var(--zbk-color-rosewater-900);
    }
  }
  [class~="active:canvas-rosewater-900"]:active {
    background-color: var(--zbk-color-rosewater-900);
  }
  [class~="disabled:canvas-rosewater-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-900);
  }
  .canvas-rosewater-950 {
    background-color: var(--zbk-color-rosewater-950);
  }
  [class~="focus:canvas-rosewater-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-950:hover {
      background-color: var(--zbk-color-rosewater-950);
    }
  }
  [class~="active:canvas-rosewater-950"]:active {
    background-color: var(--zbk-color-rosewater-950);
  }
  [class~="disabled:canvas-rosewater-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-950);
  }
  .border-rosewater-50 {
    border-color: var(--zbk-color-rosewater-50);
  }
  [class~="focus:border-rosewater-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-50:hover {
      border-color: var(--zbk-color-rosewater-50);
    }
  }
  [class~="active:border-rosewater-50"]:active {
    border-color: var(--zbk-color-rosewater-50);
  }
  [class~="disabled:border-rosewater-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-50);
  }
  .border-rosewater-100 {
    border-color: var(--zbk-color-rosewater-100);
  }
  [class~="focus:border-rosewater-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-100:hover {
      border-color: var(--zbk-color-rosewater-100);
    }
  }
  [class~="active:border-rosewater-100"]:active {
    border-color: var(--zbk-color-rosewater-100);
  }
  [class~="disabled:border-rosewater-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-100);
  }
  .border-rosewater-200 {
    border-color: var(--zbk-color-rosewater-200);
  }
  [class~="focus:border-rosewater-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-200:hover {
      border-color: var(--zbk-color-rosewater-200);
    }
  }
  [class~="active:border-rosewater-200"]:active {
    border-color: var(--zbk-color-rosewater-200);
  }
  [class~="disabled:border-rosewater-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-200);
  }
  .border-rosewater-300 {
    border-color: var(--zbk-color-rosewater-300);
  }
  [class~="focus:border-rosewater-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-300:hover {
      border-color: var(--zbk-color-rosewater-300);
    }
  }
  [class~="active:border-rosewater-300"]:active {
    border-color: var(--zbk-color-rosewater-300);
  }
  [class~="disabled:border-rosewater-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-300);
  }
  .border-rosewater-400 {
    border-color: var(--zbk-color-rosewater-400);
  }
  [class~="focus:border-rosewater-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-400:hover {
      border-color: var(--zbk-color-rosewater-400);
    }
  }
  [class~="active:border-rosewater-400"]:active {
    border-color: var(--zbk-color-rosewater-400);
  }
  [class~="disabled:border-rosewater-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-400);
  }
  .border-rosewater-500 {
    border-color: var(--zbk-color-rosewater-500);
  }
  [class~="focus:border-rosewater-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-500:hover {
      border-color: var(--zbk-color-rosewater-500);
    }
  }
  [class~="active:border-rosewater-500"]:active {
    border-color: var(--zbk-color-rosewater-500);
  }
  [class~="disabled:border-rosewater-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-500);
  }
  .border-rosewater-600 {
    border-color: var(--zbk-color-rosewater-600);
  }
  [class~="focus:border-rosewater-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-600:hover {
      border-color: var(--zbk-color-rosewater-600);
    }
  }
  [class~="active:border-rosewater-600"]:active {
    border-color: var(--zbk-color-rosewater-600);
  }
  [class~="disabled:border-rosewater-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-600);
  }
  .border-rosewater-700 {
    border-color: var(--zbk-color-rosewater-700);
  }
  [class~="focus:border-rosewater-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-700:hover {
      border-color: var(--zbk-color-rosewater-700);
    }
  }
  [class~="active:border-rosewater-700"]:active {
    border-color: var(--zbk-color-rosewater-700);
  }
  [class~="disabled:border-rosewater-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-700);
  }
  .border-rosewater-800 {
    border-color: var(--zbk-color-rosewater-800);
  }
  [class~="focus:border-rosewater-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-800:hover {
      border-color: var(--zbk-color-rosewater-800);
    }
  }
  [class~="active:border-rosewater-800"]:active {
    border-color: var(--zbk-color-rosewater-800);
  }
  [class~="disabled:border-rosewater-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-800);
  }
  .border-rosewater-900 {
    border-color: var(--zbk-color-rosewater-900);
  }
  [class~="focus:border-rosewater-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-900:hover {
      border-color: var(--zbk-color-rosewater-900);
    }
  }
  [class~="active:border-rosewater-900"]:active {
    border-color: var(--zbk-color-rosewater-900);
  }
  [class~="disabled:border-rosewater-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-900);
  }
  .border-rosewater-950 {
    border-color: var(--zbk-color-rosewater-950);
  }
  [class~="focus:border-rosewater-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-950:hover {
      border-color: var(--zbk-color-rosewater-950);
    }
  }
  [class~="active:border-rosewater-950"]:active {
    border-color: var(--zbk-color-rosewater-950);
  }
  [class~="disabled:border-rosewater-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-950);
  }
  .fill-rosewater-50 {
    fill: var(--zbk-color-rosewater-50);
  }
  [class~="focus:fill-rosewater-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-50:hover {
      fill: var(--zbk-color-rosewater-50);
    }
  }
  [class~="active:fill-rosewater-50"]:active {
    fill: var(--zbk-color-rosewater-50);
  }
  [class~="disabled:fill-rosewater-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-50);
  }
  .fill-rosewater-100 {
    fill: var(--zbk-color-rosewater-100);
  }
  [class~="focus:fill-rosewater-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-100:hover {
      fill: var(--zbk-color-rosewater-100);
    }
  }
  [class~="active:fill-rosewater-100"]:active {
    fill: var(--zbk-color-rosewater-100);
  }
  [class~="disabled:fill-rosewater-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-100);
  }
  .fill-rosewater-200 {
    fill: var(--zbk-color-rosewater-200);
  }
  [class~="focus:fill-rosewater-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-200:hover {
      fill: var(--zbk-color-rosewater-200);
    }
  }
  [class~="active:fill-rosewater-200"]:active {
    fill: var(--zbk-color-rosewater-200);
  }
  [class~="disabled:fill-rosewater-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-200);
  }
  .fill-rosewater-300 {
    fill: var(--zbk-color-rosewater-300);
  }
  [class~="focus:fill-rosewater-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-300:hover {
      fill: var(--zbk-color-rosewater-300);
    }
  }
  [class~="active:fill-rosewater-300"]:active {
    fill: var(--zbk-color-rosewater-300);
  }
  [class~="disabled:fill-rosewater-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-300);
  }
  .fill-rosewater-400 {
    fill: var(--zbk-color-rosewater-400);
  }
  [class~="focus:fill-rosewater-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-400:hover {
      fill: var(--zbk-color-rosewater-400);
    }
  }
  [class~="active:fill-rosewater-400"]:active {
    fill: var(--zbk-color-rosewater-400);
  }
  [class~="disabled:fill-rosewater-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-400);
  }
  .fill-rosewater-500 {
    fill: var(--zbk-color-rosewater-500);
  }
  [class~="focus:fill-rosewater-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-500:hover {
      fill: var(--zbk-color-rosewater-500);
    }
  }
  [class~="active:fill-rosewater-500"]:active {
    fill: var(--zbk-color-rosewater-500);
  }
  [class~="disabled:fill-rosewater-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-500);
  }
  .fill-rosewater-600 {
    fill: var(--zbk-color-rosewater-600);
  }
  [class~="focus:fill-rosewater-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-600:hover {
      fill: var(--zbk-color-rosewater-600);
    }
  }
  [class~="active:fill-rosewater-600"]:active {
    fill: var(--zbk-color-rosewater-600);
  }
  [class~="disabled:fill-rosewater-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-600);
  }
  .fill-rosewater-700 {
    fill: var(--zbk-color-rosewater-700);
  }
  [class~="focus:fill-rosewater-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-700:hover {
      fill: var(--zbk-color-rosewater-700);
    }
  }
  [class~="active:fill-rosewater-700"]:active {
    fill: var(--zbk-color-rosewater-700);
  }
  [class~="disabled:fill-rosewater-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-700);
  }
  .fill-rosewater-800 {
    fill: var(--zbk-color-rosewater-800);
  }
  [class~="focus:fill-rosewater-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-800:hover {
      fill: var(--zbk-color-rosewater-800);
    }
  }
  [class~="active:fill-rosewater-800"]:active {
    fill: var(--zbk-color-rosewater-800);
  }
  [class~="disabled:fill-rosewater-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-800);
  }
  .fill-rosewater-900 {
    fill: var(--zbk-color-rosewater-900);
  }
  [class~="focus:fill-rosewater-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-900:hover {
      fill: var(--zbk-color-rosewater-900);
    }
  }
  [class~="active:fill-rosewater-900"]:active {
    fill: var(--zbk-color-rosewater-900);
  }
  [class~="disabled:fill-rosewater-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-900);
  }
  .fill-rosewater-950 {
    fill: var(--zbk-color-rosewater-950);
  }
  [class~="focus:fill-rosewater-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-950:hover {
      fill: var(--zbk-color-rosewater-950);
    }
  }
  [class~="active:fill-rosewater-950"]:active {
    fill: var(--zbk-color-rosewater-950);
  }
  [class~="disabled:fill-rosewater-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-950);
  }
}
@layer utilities {
  .ink-rosewater-50 {
    color: var(--zbk-color-rosewater-50);
  }
  [class~="focus:ink-rosewater-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-50:hover {
      color: var(--zbk-color-rosewater-50);
    }
  }
  [class~="active:ink-rosewater-50"]:active {
    color: var(--zbk-color-rosewater-50);
  }
  [class~="disabled:ink-rosewater-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-50);
  }
  .ink-rosewater-100 {
    color: var(--zbk-color-rosewater-100);
  }
  [class~="focus:ink-rosewater-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-100:hover {
      color: var(--zbk-color-rosewater-100);
    }
  }
  [class~="active:ink-rosewater-100"]:active {
    color: var(--zbk-color-rosewater-100);
  }
  [class~="disabled:ink-rosewater-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-100);
  }
  .ink-rosewater-200 {
    color: var(--zbk-color-rosewater-200);
  }
  [class~="focus:ink-rosewater-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-200:hover {
      color: var(--zbk-color-rosewater-200);
    }
  }
  [class~="active:ink-rosewater-200"]:active {
    color: var(--zbk-color-rosewater-200);
  }
  [class~="disabled:ink-rosewater-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-200);
  }
  .ink-rosewater-300 {
    color: var(--zbk-color-rosewater-300);
  }
  [class~="focus:ink-rosewater-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-300:hover {
      color: var(--zbk-color-rosewater-300);
    }
  }
  [class~="active:ink-rosewater-300"]:active {
    color: var(--zbk-color-rosewater-300);
  }
  [class~="disabled:ink-rosewater-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-300);
  }
  .ink-rosewater-400 {
    color: var(--zbk-color-rosewater-400);
  }
  [class~="focus:ink-rosewater-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-400:hover {
      color: var(--zbk-color-rosewater-400);
    }
  }
  [class~="active:ink-rosewater-400"]:active {
    color: var(--zbk-color-rosewater-400);
  }
  [class~="disabled:ink-rosewater-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-400);
  }
  .ink-rosewater-500 {
    color: var(--zbk-color-rosewater-500);
  }
  [class~="focus:ink-rosewater-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-500:hover {
      color: var(--zbk-color-rosewater-500);
    }
  }
  [class~="active:ink-rosewater-500"]:active {
    color: var(--zbk-color-rosewater-500);
  }
  [class~="disabled:ink-rosewater-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-500);
  }
  .ink-rosewater-600 {
    color: var(--zbk-color-rosewater-600);
  }
  [class~="focus:ink-rosewater-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-600:hover {
      color: var(--zbk-color-rosewater-600);
    }
  }
  [class~="active:ink-rosewater-600"]:active {
    color: var(--zbk-color-rosewater-600);
  }
  [class~="disabled:ink-rosewater-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-600);
  }
  .ink-rosewater-700 {
    color: var(--zbk-color-rosewater-700);
  }
  [class~="focus:ink-rosewater-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-700:hover {
      color: var(--zbk-color-rosewater-700);
    }
  }
  [class~="active:ink-rosewater-700"]:active {
    color: var(--zbk-color-rosewater-700);
  }
  [class~="disabled:ink-rosewater-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-700);
  }
  .ink-rosewater-800 {
    color: var(--zbk-color-rosewater-800);
  }
  [class~="focus:ink-rosewater-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-800:hover {
      color: var(--zbk-color-rosewater-800);
    }
  }
  [class~="active:ink-rosewater-800"]:active {
    color: var(--zbk-color-rosewater-800);
  }
  [class~="disabled:ink-rosewater-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-800);
  }
  .ink-rosewater-900 {
    color: var(--zbk-color-rosewater-900);
  }
  [class~="focus:ink-rosewater-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-900:hover {
      color: var(--zbk-color-rosewater-900);
    }
  }
  [class~="active:ink-rosewater-900"]:active {
    color: var(--zbk-color-rosewater-900);
  }
  [class~="disabled:ink-rosewater-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-900);
  }
  .ink-rosewater-950 {
    color: var(--zbk-color-rosewater-950);
  }
  [class~="focus:ink-rosewater-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-rosewater-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-rosewater-950:hover {
      color: var(--zbk-color-rosewater-950);
    }
  }
  [class~="active:ink-rosewater-950"]:active {
    color: var(--zbk-color-rosewater-950);
  }
  [class~="disabled:ink-rosewater-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-rosewater-950);
  }
  .canvas-rosewater-50 {
    background-color: var(--zbk-color-rosewater-50);
  }
  [class~="focus:canvas-rosewater-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-50:hover {
      background-color: var(--zbk-color-rosewater-50);
    }
  }
  [class~="active:canvas-rosewater-50"]:active {
    background-color: var(--zbk-color-rosewater-50);
  }
  [class~="disabled:canvas-rosewater-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-50);
  }
  .canvas-rosewater-100 {
    background-color: var(--zbk-color-rosewater-100);
  }
  [class~="focus:canvas-rosewater-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-100:hover {
      background-color: var(--zbk-color-rosewater-100);
    }
  }
  [class~="active:canvas-rosewater-100"]:active {
    background-color: var(--zbk-color-rosewater-100);
  }
  [class~="disabled:canvas-rosewater-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-100);
  }
  .canvas-rosewater-200 {
    background-color: var(--zbk-color-rosewater-200);
  }
  [class~="focus:canvas-rosewater-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-200:hover {
      background-color: var(--zbk-color-rosewater-200);
    }
  }
  [class~="active:canvas-rosewater-200"]:active {
    background-color: var(--zbk-color-rosewater-200);
  }
  [class~="disabled:canvas-rosewater-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-200);
  }
  .canvas-rosewater-300 {
    background-color: var(--zbk-color-rosewater-300);
  }
  [class~="focus:canvas-rosewater-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-300:hover {
      background-color: var(--zbk-color-rosewater-300);
    }
  }
  [class~="active:canvas-rosewater-300"]:active {
    background-color: var(--zbk-color-rosewater-300);
  }
  [class~="disabled:canvas-rosewater-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-300);
  }
  .canvas-rosewater-400 {
    background-color: var(--zbk-color-rosewater-400);
  }
  [class~="focus:canvas-rosewater-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-400:hover {
      background-color: var(--zbk-color-rosewater-400);
    }
  }
  [class~="active:canvas-rosewater-400"]:active {
    background-color: var(--zbk-color-rosewater-400);
  }
  [class~="disabled:canvas-rosewater-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-400);
  }
  .canvas-rosewater-500 {
    background-color: var(--zbk-color-rosewater-500);
  }
  [class~="focus:canvas-rosewater-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-500:hover {
      background-color: var(--zbk-color-rosewater-500);
    }
  }
  [class~="active:canvas-rosewater-500"]:active {
    background-color: var(--zbk-color-rosewater-500);
  }
  [class~="disabled:canvas-rosewater-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-500);
  }
  .canvas-rosewater-600 {
    background-color: var(--zbk-color-rosewater-600);
  }
  [class~="focus:canvas-rosewater-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-600:hover {
      background-color: var(--zbk-color-rosewater-600);
    }
  }
  [class~="active:canvas-rosewater-600"]:active {
    background-color: var(--zbk-color-rosewater-600);
  }
  [class~="disabled:canvas-rosewater-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-600);
  }
  .canvas-rosewater-700 {
    background-color: var(--zbk-color-rosewater-700);
  }
  [class~="focus:canvas-rosewater-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-700:hover {
      background-color: var(--zbk-color-rosewater-700);
    }
  }
  [class~="active:canvas-rosewater-700"]:active {
    background-color: var(--zbk-color-rosewater-700);
  }
  [class~="disabled:canvas-rosewater-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-700);
  }
  .canvas-rosewater-800 {
    background-color: var(--zbk-color-rosewater-800);
  }
  [class~="focus:canvas-rosewater-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-800:hover {
      background-color: var(--zbk-color-rosewater-800);
    }
  }
  [class~="active:canvas-rosewater-800"]:active {
    background-color: var(--zbk-color-rosewater-800);
  }
  [class~="disabled:canvas-rosewater-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-800);
  }
  .canvas-rosewater-900 {
    background-color: var(--zbk-color-rosewater-900);
  }
  [class~="focus:canvas-rosewater-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-900:hover {
      background-color: var(--zbk-color-rosewater-900);
    }
  }
  [class~="active:canvas-rosewater-900"]:active {
    background-color: var(--zbk-color-rosewater-900);
  }
  [class~="disabled:canvas-rosewater-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-900);
  }
  .canvas-rosewater-950 {
    background-color: var(--zbk-color-rosewater-950);
  }
  [class~="focus:canvas-rosewater-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-rosewater-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-rosewater-950:hover {
      background-color: var(--zbk-color-rosewater-950);
    }
  }
  [class~="active:canvas-rosewater-950"]:active {
    background-color: var(--zbk-color-rosewater-950);
  }
  [class~="disabled:canvas-rosewater-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-color-rosewater-950);
  }
  .border-rosewater-50 {
    border-color: var(--zbk-color-rosewater-50);
  }
  [class~="focus:border-rosewater-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-50:hover {
      border-color: var(--zbk-color-rosewater-50);
    }
  }
  [class~="active:border-rosewater-50"]:active {
    border-color: var(--zbk-color-rosewater-50);
  }
  [class~="disabled:border-rosewater-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-50);
  }
  .border-rosewater-100 {
    border-color: var(--zbk-color-rosewater-100);
  }
  [class~="focus:border-rosewater-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-100:hover {
      border-color: var(--zbk-color-rosewater-100);
    }
  }
  [class~="active:border-rosewater-100"]:active {
    border-color: var(--zbk-color-rosewater-100);
  }
  [class~="disabled:border-rosewater-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-100);
  }
  .border-rosewater-200 {
    border-color: var(--zbk-color-rosewater-200);
  }
  [class~="focus:border-rosewater-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-200:hover {
      border-color: var(--zbk-color-rosewater-200);
    }
  }
  [class~="active:border-rosewater-200"]:active {
    border-color: var(--zbk-color-rosewater-200);
  }
  [class~="disabled:border-rosewater-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-200);
  }
  .border-rosewater-300 {
    border-color: var(--zbk-color-rosewater-300);
  }
  [class~="focus:border-rosewater-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-300:hover {
      border-color: var(--zbk-color-rosewater-300);
    }
  }
  [class~="active:border-rosewater-300"]:active {
    border-color: var(--zbk-color-rosewater-300);
  }
  [class~="disabled:border-rosewater-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-300);
  }
  .border-rosewater-400 {
    border-color: var(--zbk-color-rosewater-400);
  }
  [class~="focus:border-rosewater-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-400:hover {
      border-color: var(--zbk-color-rosewater-400);
    }
  }
  [class~="active:border-rosewater-400"]:active {
    border-color: var(--zbk-color-rosewater-400);
  }
  [class~="disabled:border-rosewater-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-400);
  }
  .border-rosewater-500 {
    border-color: var(--zbk-color-rosewater-500);
  }
  [class~="focus:border-rosewater-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-500:hover {
      border-color: var(--zbk-color-rosewater-500);
    }
  }
  [class~="active:border-rosewater-500"]:active {
    border-color: var(--zbk-color-rosewater-500);
  }
  [class~="disabled:border-rosewater-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-500);
  }
  .border-rosewater-600 {
    border-color: var(--zbk-color-rosewater-600);
  }
  [class~="focus:border-rosewater-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-600:hover {
      border-color: var(--zbk-color-rosewater-600);
    }
  }
  [class~="active:border-rosewater-600"]:active {
    border-color: var(--zbk-color-rosewater-600);
  }
  [class~="disabled:border-rosewater-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-600);
  }
  .border-rosewater-700 {
    border-color: var(--zbk-color-rosewater-700);
  }
  [class~="focus:border-rosewater-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-700:hover {
      border-color: var(--zbk-color-rosewater-700);
    }
  }
  [class~="active:border-rosewater-700"]:active {
    border-color: var(--zbk-color-rosewater-700);
  }
  [class~="disabled:border-rosewater-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-700);
  }
  .border-rosewater-800 {
    border-color: var(--zbk-color-rosewater-800);
  }
  [class~="focus:border-rosewater-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-800:hover {
      border-color: var(--zbk-color-rosewater-800);
    }
  }
  [class~="active:border-rosewater-800"]:active {
    border-color: var(--zbk-color-rosewater-800);
  }
  [class~="disabled:border-rosewater-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-800);
  }
  .border-rosewater-900 {
    border-color: var(--zbk-color-rosewater-900);
  }
  [class~="focus:border-rosewater-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-900:hover {
      border-color: var(--zbk-color-rosewater-900);
    }
  }
  [class~="active:border-rosewater-900"]:active {
    border-color: var(--zbk-color-rosewater-900);
  }
  [class~="disabled:border-rosewater-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-900);
  }
  .border-rosewater-950 {
    border-color: var(--zbk-color-rosewater-950);
  }
  [class~="focus:border-rosewater-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-rosewater-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-rosewater-950:hover {
      border-color: var(--zbk-color-rosewater-950);
    }
  }
  [class~="active:border-rosewater-950"]:active {
    border-color: var(--zbk-color-rosewater-950);
  }
  [class~="disabled:border-rosewater-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-color-rosewater-950);
  }
  .fill-rosewater-50 {
    fill: var(--zbk-color-rosewater-50);
  }
  [class~="focus:fill-rosewater-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-50:hover {
      fill: var(--zbk-color-rosewater-50);
    }
  }
  [class~="active:fill-rosewater-50"]:active {
    fill: var(--zbk-color-rosewater-50);
  }
  [class~="disabled:fill-rosewater-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-50);
  }
  .fill-rosewater-100 {
    fill: var(--zbk-color-rosewater-100);
  }
  [class~="focus:fill-rosewater-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-100:hover {
      fill: var(--zbk-color-rosewater-100);
    }
  }
  [class~="active:fill-rosewater-100"]:active {
    fill: var(--zbk-color-rosewater-100);
  }
  [class~="disabled:fill-rosewater-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-100);
  }
  .fill-rosewater-200 {
    fill: var(--zbk-color-rosewater-200);
  }
  [class~="focus:fill-rosewater-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-200:hover {
      fill: var(--zbk-color-rosewater-200);
    }
  }
  [class~="active:fill-rosewater-200"]:active {
    fill: var(--zbk-color-rosewater-200);
  }
  [class~="disabled:fill-rosewater-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-200);
  }
  .fill-rosewater-300 {
    fill: var(--zbk-color-rosewater-300);
  }
  [class~="focus:fill-rosewater-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-300:hover {
      fill: var(--zbk-color-rosewater-300);
    }
  }
  [class~="active:fill-rosewater-300"]:active {
    fill: var(--zbk-color-rosewater-300);
  }
  [class~="disabled:fill-rosewater-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-300);
  }
  .fill-rosewater-400 {
    fill: var(--zbk-color-rosewater-400);
  }
  [class~="focus:fill-rosewater-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-400:hover {
      fill: var(--zbk-color-rosewater-400);
    }
  }
  [class~="active:fill-rosewater-400"]:active {
    fill: var(--zbk-color-rosewater-400);
  }
  [class~="disabled:fill-rosewater-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-400);
  }
  .fill-rosewater-500 {
    fill: var(--zbk-color-rosewater-500);
  }
  [class~="focus:fill-rosewater-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-500:hover {
      fill: var(--zbk-color-rosewater-500);
    }
  }
  [class~="active:fill-rosewater-500"]:active {
    fill: var(--zbk-color-rosewater-500);
  }
  [class~="disabled:fill-rosewater-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-500);
  }
  .fill-rosewater-600 {
    fill: var(--zbk-color-rosewater-600);
  }
  [class~="focus:fill-rosewater-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-600:hover {
      fill: var(--zbk-color-rosewater-600);
    }
  }
  [class~="active:fill-rosewater-600"]:active {
    fill: var(--zbk-color-rosewater-600);
  }
  [class~="disabled:fill-rosewater-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-600);
  }
  .fill-rosewater-700 {
    fill: var(--zbk-color-rosewater-700);
  }
  [class~="focus:fill-rosewater-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-700:hover {
      fill: var(--zbk-color-rosewater-700);
    }
  }
  [class~="active:fill-rosewater-700"]:active {
    fill: var(--zbk-color-rosewater-700);
  }
  [class~="disabled:fill-rosewater-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-700);
  }
  .fill-rosewater-800 {
    fill: var(--zbk-color-rosewater-800);
  }
  [class~="focus:fill-rosewater-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-800:hover {
      fill: var(--zbk-color-rosewater-800);
    }
  }
  [class~="active:fill-rosewater-800"]:active {
    fill: var(--zbk-color-rosewater-800);
  }
  [class~="disabled:fill-rosewater-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-800);
  }
  .fill-rosewater-900 {
    fill: var(--zbk-color-rosewater-900);
  }
  [class~="focus:fill-rosewater-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-900:hover {
      fill: var(--zbk-color-rosewater-900);
    }
  }
  [class~="active:fill-rosewater-900"]:active {
    fill: var(--zbk-color-rosewater-900);
  }
  [class~="disabled:fill-rosewater-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-900);
  }
  .fill-rosewater-950 {
    fill: var(--zbk-color-rosewater-950);
  }
  [class~="focus:fill-rosewater-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-rosewater-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-rosewater-950:hover {
      fill: var(--zbk-color-rosewater-950);
    }
  }
  [class~="active:fill-rosewater-950"]:active {
    fill: var(--zbk-color-rosewater-950);
  }
  [class~="disabled:fill-rosewater-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-rosewater-950);
  }
}
:root {
  --zbk-color-sea-hue: 185;
  --zbk-color-sea-saturation: 70%;
  --zbk-color-sea-50: hsl(
    var(--zbk-color-sea-hue),
    var(--zbk-color-sea-saturation),
    98%
  );
  --zbk-color-sea-100: hsl(
    var(--zbk-color-sea-hue),
    var(--zbk-color-sea-saturation),
    93%
  );
  --zbk-color-sea-200: hsl(
    var(--zbk-color-sea-hue),
    var(--zbk-color-sea-saturation),
    87%
  );
  --zbk-color-sea-300: hsl(
    var(--zbk-color-sea-hue),
    var(--zbk-color-sea-saturation),
    78%
  );
  --zbk-color-sea-400: hsl(
    var(--zbk-color-sea-hue),
    var(--zbk-color-sea-saturation),
    69%
  );
  --zbk-color-sea-500: hsl(
    var(--zbk-color-sea-hue),
    var(--zbk-color-sea-saturation),
    58%
  );
  --zbk-color-sea-600: hsl(
    var(--zbk-color-sea-hue),
    var(--zbk-color-sea-saturation),
    48%
  );
  --zbk-color-sea-700: hsl(
    var(--zbk-color-sea-hue),
    var(--zbk-color-sea-saturation),
    36%
  );
  --zbk-color-sea-800: hsl(
    var(--zbk-color-sea-hue),
    var(--zbk-color-sea-saturation),
    26%
  );
  --zbk-color-sea-900: hsl(
    var(--zbk-color-sea-hue),
    var(--zbk-color-sea-saturation),
    18%
  );
  --zbk-color-sea-950: hsl(
    var(--zbk-color-sea-hue),
    var(--zbk-color-sea-saturation),
    10%
  );
}
@layer utilities {
  .ink-sea-50 {
    color: var(--zbk-color-sea-50);
  }
  [class~="focus:ink-sea-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-sea-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-sea-50:hover {
      color: var(--zbk-color-sea-50);
    }
  }
  [class~="active:ink-sea-50"]:active {
    color: var(--zbk-color-sea-50);
  }
  [class~="disabled:ink-sea-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-sea-50);
  }
  .ink-sea-100 {
    color: var(--zbk-color-sea-100);
  }
  [class~="focus:ink-sea-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-sea-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-sea-100:hover {
      color: var(--zbk-color-sea-100);
    }
  }
  [class~="active:ink-sea-100"]:active {
    color: var(--zbk-color-sea-100);
  }
  [class~="disabled:ink-sea-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-sea-100);
  }
  .ink-sea-200 {
    color: var(--zbk-color-sea-200);
  }
  [class~="focus:ink-sea-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-sea-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-sea-200:hover {
      color: var(--zbk-color-sea-200);
    }
  }
  [class~="active:ink-sea-200"]:active {
    color: var(--zbk-color-sea-200);
  }
  [class~="disabled:ink-sea-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-sea-200);
  }
  .ink-sea-300 {
    color: var(--zbk-color-sea-300);
  }
  [class~="focus:ink-sea-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-sea-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-sea-300:hover {
      color: var(--zbk-color-sea-300);
    }
  }
  [class~="active:ink-sea-300"]:active {
    color: var(--zbk-color-sea-300);
  }
  [class~="disabled:ink-sea-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-sea-300);
  }
  .ink-sea-400 {
    color: var(--zbk-color-sea-400);
  }
  [class~="focus:ink-sea-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-sea-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-sea-400:hover {
      color: var(--zbk-color-sea-400);
    }
  }
  [class~="active:ink-sea-400"]:active {
    color: var(--zbk-color-sea-400);
  }
  [class~="disabled:ink-sea-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-sea-400);
  }
  .ink-sea-500 {
    color: var(--zbk-color-sea-500);
  }
  [class~="focus:ink-sea-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-sea-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-sea-500:hover {
      color: var(--zbk-color-sea-500);
    }
  }
  [class~="active:ink-sea-500"]:active {
    color: var(--zbk-color-sea-500);
  }
  [class~="disabled:ink-sea-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-sea-500);
  }
  .ink-sea-600 {
    color: var(--zbk-color-sea-600);
  }
  [class~="focus:ink-sea-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-sea-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-sea-600:hover {
      color: var(--zbk-color-sea-600);
    }
  }
  [class~="active:ink-sea-600"]:active {
    color: var(--zbk-color-sea-600);
  }
  [class~="disabled:ink-sea-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-sea-600);
  }
  .ink-sea-700 {
    color: var(--zbk-color-sea-700);
  }
  [class~="focus:ink-sea-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-sea-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-sea-700:hover {
      color: var(--zbk-color-sea-700);
    }
  }
  [class~="active:ink-sea-700"]:active {
    color: var(--zbk-color-sea-700);
  }
  [class~="disabled:ink-sea-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-sea-700);
  }
  .ink-sea-800 {
    color: var(--zbk-color-sea-800);
  }
  [class~="focus:ink-sea-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-sea-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-sea-800:hover {
      color: var(--zbk-color-sea-800);
    }
  }
  [class~="active:ink-sea-800"]:active {
    color: var(--zbk-color-sea-800);
  }
  [class~="disabled:ink-sea-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-sea-800);
  }
  .ink-sea-900 {
    color: var(--zbk-color-sea-900);
  }
  [class~="focus:ink-sea-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-sea-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-sea-900:hover {
      color: var(--zbk-color-sea-900);
    }
  }
  [class~="active:ink-sea-900"]:active {
    color: var(--zbk-color-sea-900);
  }
  [class~="disabled:ink-sea-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-sea-900);
  }
  .ink-sea-950 {
    color: var(--zbk-color-sea-950);
  }
  [class~="focus:ink-sea-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-sea-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-sea-950:hover {
      color: var(--zbk-color-sea-950);
    }
  }
  [class~="active:ink-sea-950"]:active {
    color: var(--zbk-color-sea-950);
  }
  [class~="disabled:ink-sea-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-sea-950);
  }
  .canvas-sea-50 {
    background-color: var(--zbk-color-sea-50);
  }
  [class~="focus:canvas-sea-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-sea-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-sea-50:hover {
      background-color: var(--zbk-color-sea-50);
    }
  }
  [class~="active:canvas-sea-50"]:active {
    background-color: var(--zbk-color-sea-50);
  }
  [class~="disabled:canvas-sea-50"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-sea-50);
  }
  .canvas-sea-100 {
    background-color: var(--zbk-color-sea-100);
  }
  [class~="focus:canvas-sea-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-sea-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-sea-100:hover {
      background-color: var(--zbk-color-sea-100);
    }
  }
  [class~="active:canvas-sea-100"]:active {
    background-color: var(--zbk-color-sea-100);
  }
  [class~="disabled:canvas-sea-100"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-sea-100);
  }
  .canvas-sea-200 {
    background-color: var(--zbk-color-sea-200);
  }
  [class~="focus:canvas-sea-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-sea-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-sea-200:hover {
      background-color: var(--zbk-color-sea-200);
    }
  }
  [class~="active:canvas-sea-200"]:active {
    background-color: var(--zbk-color-sea-200);
  }
  [class~="disabled:canvas-sea-200"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-sea-200);
  }
  .canvas-sea-300 {
    background-color: var(--zbk-color-sea-300);
  }
  [class~="focus:canvas-sea-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-sea-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-sea-300:hover {
      background-color: var(--zbk-color-sea-300);
    }
  }
  [class~="active:canvas-sea-300"]:active {
    background-color: var(--zbk-color-sea-300);
  }
  [class~="disabled:canvas-sea-300"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-sea-300);
  }
  .canvas-sea-400 {
    background-color: var(--zbk-color-sea-400);
  }
  [class~="focus:canvas-sea-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-sea-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-sea-400:hover {
      background-color: var(--zbk-color-sea-400);
    }
  }
  [class~="active:canvas-sea-400"]:active {
    background-color: var(--zbk-color-sea-400);
  }
  [class~="disabled:canvas-sea-400"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-sea-400);
  }
  .canvas-sea-500 {
    background-color: var(--zbk-color-sea-500);
  }
  [class~="focus:canvas-sea-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-sea-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-sea-500:hover {
      background-color: var(--zbk-color-sea-500);
    }
  }
  [class~="active:canvas-sea-500"]:active {
    background-color: var(--zbk-color-sea-500);
  }
  [class~="disabled:canvas-sea-500"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-sea-500);
  }
  .canvas-sea-600 {
    background-color: var(--zbk-color-sea-600);
  }
  [class~="focus:canvas-sea-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-sea-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-sea-600:hover {
      background-color: var(--zbk-color-sea-600);
    }
  }
  [class~="active:canvas-sea-600"]:active {
    background-color: var(--zbk-color-sea-600);
  }
  [class~="disabled:canvas-sea-600"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-sea-600);
  }
  .canvas-sea-700 {
    background-color: var(--zbk-color-sea-700);
  }
  [class~="focus:canvas-sea-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-sea-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-sea-700:hover {
      background-color: var(--zbk-color-sea-700);
    }
  }
  [class~="active:canvas-sea-700"]:active {
    background-color: var(--zbk-color-sea-700);
  }
  [class~="disabled:canvas-sea-700"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-sea-700);
  }
  .canvas-sea-800 {
    background-color: var(--zbk-color-sea-800);
  }
  [class~="focus:canvas-sea-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-sea-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-sea-800:hover {
      background-color: var(--zbk-color-sea-800);
    }
  }
  [class~="active:canvas-sea-800"]:active {
    background-color: var(--zbk-color-sea-800);
  }
  [class~="disabled:canvas-sea-800"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-sea-800);
  }
  .canvas-sea-900 {
    background-color: var(--zbk-color-sea-900);
  }
  [class~="focus:canvas-sea-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-sea-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-sea-900:hover {
      background-color: var(--zbk-color-sea-900);
    }
  }
  [class~="active:canvas-sea-900"]:active {
    background-color: var(--zbk-color-sea-900);
  }
  [class~="disabled:canvas-sea-900"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-sea-900);
  }
  .canvas-sea-950 {
    background-color: var(--zbk-color-sea-950);
  }
  [class~="focus:canvas-sea-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-sea-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-sea-950:hover {
      background-color: var(--zbk-color-sea-950);
    }
  }
  [class~="active:canvas-sea-950"]:active {
    background-color: var(--zbk-color-sea-950);
  }
  [class~="disabled:canvas-sea-950"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-sea-950);
  }
  .border-sea-50 {
    border-color: var(--zbk-color-sea-50);
  }
  [class~="focus:border-sea-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-sea-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-sea-50:hover {
      border-color: var(--zbk-color-sea-50);
    }
  }
  [class~="active:border-sea-50"]:active {
    border-color: var(--zbk-color-sea-50);
  }
  [class~="disabled:border-sea-50"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-sea-50);
  }
  .border-sea-100 {
    border-color: var(--zbk-color-sea-100);
  }
  [class~="focus:border-sea-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-sea-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-sea-100:hover {
      border-color: var(--zbk-color-sea-100);
    }
  }
  [class~="active:border-sea-100"]:active {
    border-color: var(--zbk-color-sea-100);
  }
  [class~="disabled:border-sea-100"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-sea-100);
  }
  .border-sea-200 {
    border-color: var(--zbk-color-sea-200);
  }
  [class~="focus:border-sea-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-sea-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-sea-200:hover {
      border-color: var(--zbk-color-sea-200);
    }
  }
  [class~="active:border-sea-200"]:active {
    border-color: var(--zbk-color-sea-200);
  }
  [class~="disabled:border-sea-200"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-sea-200);
  }
  .border-sea-300 {
    border-color: var(--zbk-color-sea-300);
  }
  [class~="focus:border-sea-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-sea-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-sea-300:hover {
      border-color: var(--zbk-color-sea-300);
    }
  }
  [class~="active:border-sea-300"]:active {
    border-color: var(--zbk-color-sea-300);
  }
  [class~="disabled:border-sea-300"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-sea-300);
  }
  .border-sea-400 {
    border-color: var(--zbk-color-sea-400);
  }
  [class~="focus:border-sea-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-sea-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-sea-400:hover {
      border-color: var(--zbk-color-sea-400);
    }
  }
  [class~="active:border-sea-400"]:active {
    border-color: var(--zbk-color-sea-400);
  }
  [class~="disabled:border-sea-400"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-sea-400);
  }
  .border-sea-500 {
    border-color: var(--zbk-color-sea-500);
  }
  [class~="focus:border-sea-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-sea-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-sea-500:hover {
      border-color: var(--zbk-color-sea-500);
    }
  }
  [class~="active:border-sea-500"]:active {
    border-color: var(--zbk-color-sea-500);
  }
  [class~="disabled:border-sea-500"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-sea-500);
  }
  .border-sea-600 {
    border-color: var(--zbk-color-sea-600);
  }
  [class~="focus:border-sea-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-sea-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-sea-600:hover {
      border-color: var(--zbk-color-sea-600);
    }
  }
  [class~="active:border-sea-600"]:active {
    border-color: var(--zbk-color-sea-600);
  }
  [class~="disabled:border-sea-600"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-sea-600);
  }
  .border-sea-700 {
    border-color: var(--zbk-color-sea-700);
  }
  [class~="focus:border-sea-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-sea-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-sea-700:hover {
      border-color: var(--zbk-color-sea-700);
    }
  }
  [class~="active:border-sea-700"]:active {
    border-color: var(--zbk-color-sea-700);
  }
  [class~="disabled:border-sea-700"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-sea-700);
  }
  .border-sea-800 {
    border-color: var(--zbk-color-sea-800);
  }
  [class~="focus:border-sea-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-sea-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-sea-800:hover {
      border-color: var(--zbk-color-sea-800);
    }
  }
  [class~="active:border-sea-800"]:active {
    border-color: var(--zbk-color-sea-800);
  }
  [class~="disabled:border-sea-800"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-sea-800);
  }
  .border-sea-900 {
    border-color: var(--zbk-color-sea-900);
  }
  [class~="focus:border-sea-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-sea-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-sea-900:hover {
      border-color: var(--zbk-color-sea-900);
    }
  }
  [class~="active:border-sea-900"]:active {
    border-color: var(--zbk-color-sea-900);
  }
  [class~="disabled:border-sea-900"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-sea-900);
  }
  .border-sea-950 {
    border-color: var(--zbk-color-sea-950);
  }
  [class~="focus:border-sea-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-sea-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-sea-950:hover {
      border-color: var(--zbk-color-sea-950);
    }
  }
  [class~="active:border-sea-950"]:active {
    border-color: var(--zbk-color-sea-950);
  }
  [class~="disabled:border-sea-950"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-sea-950);
  }
  .fill-sea-50 {
    fill: var(--zbk-color-sea-50);
  }
  [class~="focus:fill-sea-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-sea-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-sea-50:hover {
      fill: var(--zbk-color-sea-50);
    }
  }
  [class~="active:fill-sea-50"]:active {
    fill: var(--zbk-color-sea-50);
  }
  [class~="disabled:fill-sea-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-sea-50);
  }
  .fill-sea-100 {
    fill: var(--zbk-color-sea-100);
  }
  [class~="focus:fill-sea-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-sea-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-sea-100:hover {
      fill: var(--zbk-color-sea-100);
    }
  }
  [class~="active:fill-sea-100"]:active {
    fill: var(--zbk-color-sea-100);
  }
  [class~="disabled:fill-sea-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-sea-100);
  }
  .fill-sea-200 {
    fill: var(--zbk-color-sea-200);
  }
  [class~="focus:fill-sea-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-sea-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-sea-200:hover {
      fill: var(--zbk-color-sea-200);
    }
  }
  [class~="active:fill-sea-200"]:active {
    fill: var(--zbk-color-sea-200);
  }
  [class~="disabled:fill-sea-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-sea-200);
  }
  .fill-sea-300 {
    fill: var(--zbk-color-sea-300);
  }
  [class~="focus:fill-sea-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-sea-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-sea-300:hover {
      fill: var(--zbk-color-sea-300);
    }
  }
  [class~="active:fill-sea-300"]:active {
    fill: var(--zbk-color-sea-300);
  }
  [class~="disabled:fill-sea-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-sea-300);
  }
  .fill-sea-400 {
    fill: var(--zbk-color-sea-400);
  }
  [class~="focus:fill-sea-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-sea-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-sea-400:hover {
      fill: var(--zbk-color-sea-400);
    }
  }
  [class~="active:fill-sea-400"]:active {
    fill: var(--zbk-color-sea-400);
  }
  [class~="disabled:fill-sea-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-sea-400);
  }
  .fill-sea-500 {
    fill: var(--zbk-color-sea-500);
  }
  [class~="focus:fill-sea-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-sea-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-sea-500:hover {
      fill: var(--zbk-color-sea-500);
    }
  }
  [class~="active:fill-sea-500"]:active {
    fill: var(--zbk-color-sea-500);
  }
  [class~="disabled:fill-sea-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-sea-500);
  }
  .fill-sea-600 {
    fill: var(--zbk-color-sea-600);
  }
  [class~="focus:fill-sea-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-sea-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-sea-600:hover {
      fill: var(--zbk-color-sea-600);
    }
  }
  [class~="active:fill-sea-600"]:active {
    fill: var(--zbk-color-sea-600);
  }
  [class~="disabled:fill-sea-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-sea-600);
  }
  .fill-sea-700 {
    fill: var(--zbk-color-sea-700);
  }
  [class~="focus:fill-sea-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-sea-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-sea-700:hover {
      fill: var(--zbk-color-sea-700);
    }
  }
  [class~="active:fill-sea-700"]:active {
    fill: var(--zbk-color-sea-700);
  }
  [class~="disabled:fill-sea-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-sea-700);
  }
  .fill-sea-800 {
    fill: var(--zbk-color-sea-800);
  }
  [class~="focus:fill-sea-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-sea-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-sea-800:hover {
      fill: var(--zbk-color-sea-800);
    }
  }
  [class~="active:fill-sea-800"]:active {
    fill: var(--zbk-color-sea-800);
  }
  [class~="disabled:fill-sea-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-sea-800);
  }
  .fill-sea-900 {
    fill: var(--zbk-color-sea-900);
  }
  [class~="focus:fill-sea-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-sea-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-sea-900:hover {
      fill: var(--zbk-color-sea-900);
    }
  }
  [class~="active:fill-sea-900"]:active {
    fill: var(--zbk-color-sea-900);
  }
  [class~="disabled:fill-sea-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-sea-900);
  }
  .fill-sea-950 {
    fill: var(--zbk-color-sea-950);
  }
  [class~="focus:fill-sea-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-sea-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-sea-950:hover {
      fill: var(--zbk-color-sea-950);
    }
  }
  [class~="active:fill-sea-950"]:active {
    fill: var(--zbk-color-sea-950);
  }
  [class~="disabled:fill-sea-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-sea-950);
  }
}
:root {
  --zbk-color-stone-hue: 40;
  --zbk-color-stone-saturation: 18%;
  --zbk-color-stone-50: hsl(
    var(--zbk-color-stone-hue),
    var(--zbk-color-stone-saturation),
    98%
  );
  --zbk-color-stone-100: hsl(
    var(--zbk-color-stone-hue),
    var(--zbk-color-stone-saturation),
    93%
  );
  --zbk-color-stone-200: hsl(
    var(--zbk-color-stone-hue),
    var(--zbk-color-stone-saturation),
    87%
  );
  --zbk-color-stone-300: hsl(
    var(--zbk-color-stone-hue),
    var(--zbk-color-stone-saturation),
    78%
  );
  --zbk-color-stone-400: hsl(
    var(--zbk-color-stone-hue),
    var(--zbk-color-stone-saturation),
    69%
  );
  --zbk-color-stone-500: hsl(
    var(--zbk-color-stone-hue),
    var(--zbk-color-stone-saturation),
    58%
  );
  --zbk-color-stone-600: hsl(
    var(--zbk-color-stone-hue),
    var(--zbk-color-stone-saturation),
    48%
  );
  --zbk-color-stone-700: hsl(
    var(--zbk-color-stone-hue),
    var(--zbk-color-stone-saturation),
    36%
  );
  --zbk-color-stone-800: hsl(
    var(--zbk-color-stone-hue),
    var(--zbk-color-stone-saturation),
    26%
  );
  --zbk-color-stone-900: hsl(
    var(--zbk-color-stone-hue),
    var(--zbk-color-stone-saturation),
    18%
  );
  --zbk-color-stone-950: hsl(
    var(--zbk-color-stone-hue),
    var(--zbk-color-stone-saturation),
    10%
  );
}
@layer utilities {
  .ink-stone-50 {
    color: var(--zbk-color-stone-50);
  }
  [class~="focus:ink-stone-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-stone-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-stone-50:hover {
      color: var(--zbk-color-stone-50);
    }
  }
  [class~="active:ink-stone-50"]:active {
    color: var(--zbk-color-stone-50);
  }
  [class~="disabled:ink-stone-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-stone-50);
  }
  .ink-stone-100 {
    color: var(--zbk-color-stone-100);
  }
  [class~="focus:ink-stone-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-stone-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-stone-100:hover {
      color: var(--zbk-color-stone-100);
    }
  }
  [class~="active:ink-stone-100"]:active {
    color: var(--zbk-color-stone-100);
  }
  [class~="disabled:ink-stone-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-stone-100);
  }
  .ink-stone-200 {
    color: var(--zbk-color-stone-200);
  }
  [class~="focus:ink-stone-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-stone-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-stone-200:hover {
      color: var(--zbk-color-stone-200);
    }
  }
  [class~="active:ink-stone-200"]:active {
    color: var(--zbk-color-stone-200);
  }
  [class~="disabled:ink-stone-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-stone-200);
  }
  .ink-stone-300 {
    color: var(--zbk-color-stone-300);
  }
  [class~="focus:ink-stone-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-stone-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-stone-300:hover {
      color: var(--zbk-color-stone-300);
    }
  }
  [class~="active:ink-stone-300"]:active {
    color: var(--zbk-color-stone-300);
  }
  [class~="disabled:ink-stone-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-stone-300);
  }
  .ink-stone-400 {
    color: var(--zbk-color-stone-400);
  }
  [class~="focus:ink-stone-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-stone-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-stone-400:hover {
      color: var(--zbk-color-stone-400);
    }
  }
  [class~="active:ink-stone-400"]:active {
    color: var(--zbk-color-stone-400);
  }
  [class~="disabled:ink-stone-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-stone-400);
  }
  .ink-stone-500 {
    color: var(--zbk-color-stone-500);
  }
  [class~="focus:ink-stone-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-stone-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-stone-500:hover {
      color: var(--zbk-color-stone-500);
    }
  }
  [class~="active:ink-stone-500"]:active {
    color: var(--zbk-color-stone-500);
  }
  [class~="disabled:ink-stone-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-stone-500);
  }
  .ink-stone-600 {
    color: var(--zbk-color-stone-600);
  }
  [class~="focus:ink-stone-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-stone-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-stone-600:hover {
      color: var(--zbk-color-stone-600);
    }
  }
  [class~="active:ink-stone-600"]:active {
    color: var(--zbk-color-stone-600);
  }
  [class~="disabled:ink-stone-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-stone-600);
  }
  .ink-stone-700 {
    color: var(--zbk-color-stone-700);
  }
  [class~="focus:ink-stone-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-stone-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-stone-700:hover {
      color: var(--zbk-color-stone-700);
    }
  }
  [class~="active:ink-stone-700"]:active {
    color: var(--zbk-color-stone-700);
  }
  [class~="disabled:ink-stone-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-stone-700);
  }
  .ink-stone-800 {
    color: var(--zbk-color-stone-800);
  }
  [class~="focus:ink-stone-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-stone-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-stone-800:hover {
      color: var(--zbk-color-stone-800);
    }
  }
  [class~="active:ink-stone-800"]:active {
    color: var(--zbk-color-stone-800);
  }
  [class~="disabled:ink-stone-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-stone-800);
  }
  .ink-stone-900 {
    color: var(--zbk-color-stone-900);
  }
  [class~="focus:ink-stone-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-stone-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-stone-900:hover {
      color: var(--zbk-color-stone-900);
    }
  }
  [class~="active:ink-stone-900"]:active {
    color: var(--zbk-color-stone-900);
  }
  [class~="disabled:ink-stone-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-stone-900);
  }
  .ink-stone-950 {
    color: var(--zbk-color-stone-950);
  }
  [class~="focus:ink-stone-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-stone-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-stone-950:hover {
      color: var(--zbk-color-stone-950);
    }
  }
  [class~="active:ink-stone-950"]:active {
    color: var(--zbk-color-stone-950);
  }
  [class~="disabled:ink-stone-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-stone-950);
  }
  .canvas-stone-50 {
    background-color: var(--zbk-color-stone-50);
  }
  [class~="focus:canvas-stone-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-stone-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-stone-50:hover {
      background-color: var(--zbk-color-stone-50);
    }
  }
  [class~="active:canvas-stone-50"]:active {
    background-color: var(--zbk-color-stone-50);
  }
  [class~="disabled:canvas-stone-50"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-stone-50);
  }
  .canvas-stone-100 {
    background-color: var(--zbk-color-stone-100);
  }
  [class~="focus:canvas-stone-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-stone-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-stone-100:hover {
      background-color: var(--zbk-color-stone-100);
    }
  }
  [class~="active:canvas-stone-100"]:active {
    background-color: var(--zbk-color-stone-100);
  }
  [class~="disabled:canvas-stone-100"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-stone-100);
  }
  .canvas-stone-200 {
    background-color: var(--zbk-color-stone-200);
  }
  [class~="focus:canvas-stone-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-stone-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-stone-200:hover {
      background-color: var(--zbk-color-stone-200);
    }
  }
  [class~="active:canvas-stone-200"]:active {
    background-color: var(--zbk-color-stone-200);
  }
  [class~="disabled:canvas-stone-200"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-stone-200);
  }
  .canvas-stone-300 {
    background-color: var(--zbk-color-stone-300);
  }
  [class~="focus:canvas-stone-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-stone-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-stone-300:hover {
      background-color: var(--zbk-color-stone-300);
    }
  }
  [class~="active:canvas-stone-300"]:active {
    background-color: var(--zbk-color-stone-300);
  }
  [class~="disabled:canvas-stone-300"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-stone-300);
  }
  .canvas-stone-400 {
    background-color: var(--zbk-color-stone-400);
  }
  [class~="focus:canvas-stone-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-stone-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-stone-400:hover {
      background-color: var(--zbk-color-stone-400);
    }
  }
  [class~="active:canvas-stone-400"]:active {
    background-color: var(--zbk-color-stone-400);
  }
  [class~="disabled:canvas-stone-400"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-stone-400);
  }
  .canvas-stone-500 {
    background-color: var(--zbk-color-stone-500);
  }
  [class~="focus:canvas-stone-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-stone-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-stone-500:hover {
      background-color: var(--zbk-color-stone-500);
    }
  }
  [class~="active:canvas-stone-500"]:active {
    background-color: var(--zbk-color-stone-500);
  }
  [class~="disabled:canvas-stone-500"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-stone-500);
  }
  .canvas-stone-600 {
    background-color: var(--zbk-color-stone-600);
  }
  [class~="focus:canvas-stone-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-stone-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-stone-600:hover {
      background-color: var(--zbk-color-stone-600);
    }
  }
  [class~="active:canvas-stone-600"]:active {
    background-color: var(--zbk-color-stone-600);
  }
  [class~="disabled:canvas-stone-600"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-stone-600);
  }
  .canvas-stone-700 {
    background-color: var(--zbk-color-stone-700);
  }
  [class~="focus:canvas-stone-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-stone-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-stone-700:hover {
      background-color: var(--zbk-color-stone-700);
    }
  }
  [class~="active:canvas-stone-700"]:active {
    background-color: var(--zbk-color-stone-700);
  }
  [class~="disabled:canvas-stone-700"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-stone-700);
  }
  .canvas-stone-800 {
    background-color: var(--zbk-color-stone-800);
  }
  [class~="focus:canvas-stone-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-stone-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-stone-800:hover {
      background-color: var(--zbk-color-stone-800);
    }
  }
  [class~="active:canvas-stone-800"]:active {
    background-color: var(--zbk-color-stone-800);
  }
  [class~="disabled:canvas-stone-800"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-stone-800);
  }
  .canvas-stone-900 {
    background-color: var(--zbk-color-stone-900);
  }
  [class~="focus:canvas-stone-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-stone-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-stone-900:hover {
      background-color: var(--zbk-color-stone-900);
    }
  }
  [class~="active:canvas-stone-900"]:active {
    background-color: var(--zbk-color-stone-900);
  }
  [class~="disabled:canvas-stone-900"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-stone-900);
  }
  .canvas-stone-950 {
    background-color: var(--zbk-color-stone-950);
  }
  [class~="focus:canvas-stone-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-stone-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-stone-950:hover {
      background-color: var(--zbk-color-stone-950);
    }
  }
  [class~="active:canvas-stone-950"]:active {
    background-color: var(--zbk-color-stone-950);
  }
  [class~="disabled:canvas-stone-950"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-stone-950);
  }
  .border-stone-50 {
    border-color: var(--zbk-color-stone-50);
  }
  [class~="focus:border-stone-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-stone-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-stone-50:hover {
      border-color: var(--zbk-color-stone-50);
    }
  }
  [class~="active:border-stone-50"]:active {
    border-color: var(--zbk-color-stone-50);
  }
  [class~="disabled:border-stone-50"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-stone-50);
  }
  .border-stone-100 {
    border-color: var(--zbk-color-stone-100);
  }
  [class~="focus:border-stone-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-stone-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-stone-100:hover {
      border-color: var(--zbk-color-stone-100);
    }
  }
  [class~="active:border-stone-100"]:active {
    border-color: var(--zbk-color-stone-100);
  }
  [class~="disabled:border-stone-100"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-stone-100);
  }
  .border-stone-200 {
    border-color: var(--zbk-color-stone-200);
  }
  [class~="focus:border-stone-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-stone-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-stone-200:hover {
      border-color: var(--zbk-color-stone-200);
    }
  }
  [class~="active:border-stone-200"]:active {
    border-color: var(--zbk-color-stone-200);
  }
  [class~="disabled:border-stone-200"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-stone-200);
  }
  .border-stone-300 {
    border-color: var(--zbk-color-stone-300);
  }
  [class~="focus:border-stone-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-stone-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-stone-300:hover {
      border-color: var(--zbk-color-stone-300);
    }
  }
  [class~="active:border-stone-300"]:active {
    border-color: var(--zbk-color-stone-300);
  }
  [class~="disabled:border-stone-300"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-stone-300);
  }
  .border-stone-400 {
    border-color: var(--zbk-color-stone-400);
  }
  [class~="focus:border-stone-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-stone-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-stone-400:hover {
      border-color: var(--zbk-color-stone-400);
    }
  }
  [class~="active:border-stone-400"]:active {
    border-color: var(--zbk-color-stone-400);
  }
  [class~="disabled:border-stone-400"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-stone-400);
  }
  .border-stone-500 {
    border-color: var(--zbk-color-stone-500);
  }
  [class~="focus:border-stone-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-stone-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-stone-500:hover {
      border-color: var(--zbk-color-stone-500);
    }
  }
  [class~="active:border-stone-500"]:active {
    border-color: var(--zbk-color-stone-500);
  }
  [class~="disabled:border-stone-500"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-stone-500);
  }
  .border-stone-600 {
    border-color: var(--zbk-color-stone-600);
  }
  [class~="focus:border-stone-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-stone-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-stone-600:hover {
      border-color: var(--zbk-color-stone-600);
    }
  }
  [class~="active:border-stone-600"]:active {
    border-color: var(--zbk-color-stone-600);
  }
  [class~="disabled:border-stone-600"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-stone-600);
  }
  .border-stone-700 {
    border-color: var(--zbk-color-stone-700);
  }
  [class~="focus:border-stone-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-stone-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-stone-700:hover {
      border-color: var(--zbk-color-stone-700);
    }
  }
  [class~="active:border-stone-700"]:active {
    border-color: var(--zbk-color-stone-700);
  }
  [class~="disabled:border-stone-700"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-stone-700);
  }
  .border-stone-800 {
    border-color: var(--zbk-color-stone-800);
  }
  [class~="focus:border-stone-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-stone-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-stone-800:hover {
      border-color: var(--zbk-color-stone-800);
    }
  }
  [class~="active:border-stone-800"]:active {
    border-color: var(--zbk-color-stone-800);
  }
  [class~="disabled:border-stone-800"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-stone-800);
  }
  .border-stone-900 {
    border-color: var(--zbk-color-stone-900);
  }
  [class~="focus:border-stone-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-stone-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-stone-900:hover {
      border-color: var(--zbk-color-stone-900);
    }
  }
  [class~="active:border-stone-900"]:active {
    border-color: var(--zbk-color-stone-900);
  }
  [class~="disabled:border-stone-900"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-stone-900);
  }
  .border-stone-950 {
    border-color: var(--zbk-color-stone-950);
  }
  [class~="focus:border-stone-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-stone-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-stone-950:hover {
      border-color: var(--zbk-color-stone-950);
    }
  }
  [class~="active:border-stone-950"]:active {
    border-color: var(--zbk-color-stone-950);
  }
  [class~="disabled:border-stone-950"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-stone-950);
  }
  .fill-stone-50 {
    fill: var(--zbk-color-stone-50);
  }
  [class~="focus:fill-stone-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-stone-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-stone-50:hover {
      fill: var(--zbk-color-stone-50);
    }
  }
  [class~="active:fill-stone-50"]:active {
    fill: var(--zbk-color-stone-50);
  }
  [class~="disabled:fill-stone-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-stone-50);
  }
  .fill-stone-100 {
    fill: var(--zbk-color-stone-100);
  }
  [class~="focus:fill-stone-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-stone-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-stone-100:hover {
      fill: var(--zbk-color-stone-100);
    }
  }
  [class~="active:fill-stone-100"]:active {
    fill: var(--zbk-color-stone-100);
  }
  [class~="disabled:fill-stone-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-stone-100);
  }
  .fill-stone-200 {
    fill: var(--zbk-color-stone-200);
  }
  [class~="focus:fill-stone-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-stone-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-stone-200:hover {
      fill: var(--zbk-color-stone-200);
    }
  }
  [class~="active:fill-stone-200"]:active {
    fill: var(--zbk-color-stone-200);
  }
  [class~="disabled:fill-stone-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-stone-200);
  }
  .fill-stone-300 {
    fill: var(--zbk-color-stone-300);
  }
  [class~="focus:fill-stone-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-stone-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-stone-300:hover {
      fill: var(--zbk-color-stone-300);
    }
  }
  [class~="active:fill-stone-300"]:active {
    fill: var(--zbk-color-stone-300);
  }
  [class~="disabled:fill-stone-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-stone-300);
  }
  .fill-stone-400 {
    fill: var(--zbk-color-stone-400);
  }
  [class~="focus:fill-stone-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-stone-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-stone-400:hover {
      fill: var(--zbk-color-stone-400);
    }
  }
  [class~="active:fill-stone-400"]:active {
    fill: var(--zbk-color-stone-400);
  }
  [class~="disabled:fill-stone-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-stone-400);
  }
  .fill-stone-500 {
    fill: var(--zbk-color-stone-500);
  }
  [class~="focus:fill-stone-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-stone-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-stone-500:hover {
      fill: var(--zbk-color-stone-500);
    }
  }
  [class~="active:fill-stone-500"]:active {
    fill: var(--zbk-color-stone-500);
  }
  [class~="disabled:fill-stone-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-stone-500);
  }
  .fill-stone-600 {
    fill: var(--zbk-color-stone-600);
  }
  [class~="focus:fill-stone-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-stone-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-stone-600:hover {
      fill: var(--zbk-color-stone-600);
    }
  }
  [class~="active:fill-stone-600"]:active {
    fill: var(--zbk-color-stone-600);
  }
  [class~="disabled:fill-stone-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-stone-600);
  }
  .fill-stone-700 {
    fill: var(--zbk-color-stone-700);
  }
  [class~="focus:fill-stone-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-stone-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-stone-700:hover {
      fill: var(--zbk-color-stone-700);
    }
  }
  [class~="active:fill-stone-700"]:active {
    fill: var(--zbk-color-stone-700);
  }
  [class~="disabled:fill-stone-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-stone-700);
  }
  .fill-stone-800 {
    fill: var(--zbk-color-stone-800);
  }
  [class~="focus:fill-stone-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-stone-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-stone-800:hover {
      fill: var(--zbk-color-stone-800);
    }
  }
  [class~="active:fill-stone-800"]:active {
    fill: var(--zbk-color-stone-800);
  }
  [class~="disabled:fill-stone-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-stone-800);
  }
  .fill-stone-900 {
    fill: var(--zbk-color-stone-900);
  }
  [class~="focus:fill-stone-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-stone-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-stone-900:hover {
      fill: var(--zbk-color-stone-900);
    }
  }
  [class~="active:fill-stone-900"]:active {
    fill: var(--zbk-color-stone-900);
  }
  [class~="disabled:fill-stone-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-stone-900);
  }
  .fill-stone-950 {
    fill: var(--zbk-color-stone-950);
  }
  [class~="focus:fill-stone-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-stone-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-stone-950:hover {
      fill: var(--zbk-color-stone-950);
    }
  }
  [class~="active:fill-stone-950"]:active {
    fill: var(--zbk-color-stone-950);
  }
  [class~="disabled:fill-stone-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-stone-950);
  }
}
:root {
  --zbk-color-teal-hue: 170;
  --zbk-color-teal-saturation: 68%;
  --zbk-color-teal-50: hsl(
    var(--zbk-color-teal-hue),
    var(--zbk-color-teal-saturation),
    98%
  );
  --zbk-color-teal-100: hsl(
    var(--zbk-color-teal-hue),
    var(--zbk-color-teal-saturation),
    93%
  );
  --zbk-color-teal-200: hsl(
    var(--zbk-color-teal-hue),
    var(--zbk-color-teal-saturation),
    87%
  );
  --zbk-color-teal-300: hsl(
    var(--zbk-color-teal-hue),
    var(--zbk-color-teal-saturation),
    78%
  );
  --zbk-color-teal-400: hsl(
    var(--zbk-color-teal-hue),
    var(--zbk-color-teal-saturation),
    69%
  );
  --zbk-color-teal-500: hsl(
    var(--zbk-color-teal-hue),
    var(--zbk-color-teal-saturation),
    58%
  );
  --zbk-color-teal-600: hsl(
    var(--zbk-color-teal-hue),
    var(--zbk-color-teal-saturation),
    48%
  );
  --zbk-color-teal-700: hsl(
    var(--zbk-color-teal-hue),
    var(--zbk-color-teal-saturation),
    36%
  );
  --zbk-color-teal-800: hsl(
    var(--zbk-color-teal-hue),
    var(--zbk-color-teal-saturation),
    26%
  );
  --zbk-color-teal-900: hsl(
    var(--zbk-color-teal-hue),
    var(--zbk-color-teal-saturation),
    18%
  );
  --zbk-color-teal-950: hsl(
    var(--zbk-color-teal-hue),
    var(--zbk-color-teal-saturation),
    10%
  );
}
@layer utilities {
  .ink-teal-50 {
    color: var(--zbk-color-teal-50);
  }
  [class~="focus:ink-teal-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-teal-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-teal-50:hover {
      color: var(--zbk-color-teal-50);
    }
  }
  [class~="active:ink-teal-50"]:active {
    color: var(--zbk-color-teal-50);
  }
  [class~="disabled:ink-teal-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-teal-50);
  }
  .ink-teal-100 {
    color: var(--zbk-color-teal-100);
  }
  [class~="focus:ink-teal-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-teal-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-teal-100:hover {
      color: var(--zbk-color-teal-100);
    }
  }
  [class~="active:ink-teal-100"]:active {
    color: var(--zbk-color-teal-100);
  }
  [class~="disabled:ink-teal-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-teal-100);
  }
  .ink-teal-200 {
    color: var(--zbk-color-teal-200);
  }
  [class~="focus:ink-teal-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-teal-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-teal-200:hover {
      color: var(--zbk-color-teal-200);
    }
  }
  [class~="active:ink-teal-200"]:active {
    color: var(--zbk-color-teal-200);
  }
  [class~="disabled:ink-teal-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-teal-200);
  }
  .ink-teal-300 {
    color: var(--zbk-color-teal-300);
  }
  [class~="focus:ink-teal-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-teal-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-teal-300:hover {
      color: var(--zbk-color-teal-300);
    }
  }
  [class~="active:ink-teal-300"]:active {
    color: var(--zbk-color-teal-300);
  }
  [class~="disabled:ink-teal-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-teal-300);
  }
  .ink-teal-400 {
    color: var(--zbk-color-teal-400);
  }
  [class~="focus:ink-teal-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-teal-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-teal-400:hover {
      color: var(--zbk-color-teal-400);
    }
  }
  [class~="active:ink-teal-400"]:active {
    color: var(--zbk-color-teal-400);
  }
  [class~="disabled:ink-teal-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-teal-400);
  }
  .ink-teal-500 {
    color: var(--zbk-color-teal-500);
  }
  [class~="focus:ink-teal-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-teal-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-teal-500:hover {
      color: var(--zbk-color-teal-500);
    }
  }
  [class~="active:ink-teal-500"]:active {
    color: var(--zbk-color-teal-500);
  }
  [class~="disabled:ink-teal-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-teal-500);
  }
  .ink-teal-600 {
    color: var(--zbk-color-teal-600);
  }
  [class~="focus:ink-teal-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-teal-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-teal-600:hover {
      color: var(--zbk-color-teal-600);
    }
  }
  [class~="active:ink-teal-600"]:active {
    color: var(--zbk-color-teal-600);
  }
  [class~="disabled:ink-teal-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-teal-600);
  }
  .ink-teal-700 {
    color: var(--zbk-color-teal-700);
  }
  [class~="focus:ink-teal-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-teal-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-teal-700:hover {
      color: var(--zbk-color-teal-700);
    }
  }
  [class~="active:ink-teal-700"]:active {
    color: var(--zbk-color-teal-700);
  }
  [class~="disabled:ink-teal-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-teal-700);
  }
  .ink-teal-800 {
    color: var(--zbk-color-teal-800);
  }
  [class~="focus:ink-teal-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-teal-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-teal-800:hover {
      color: var(--zbk-color-teal-800);
    }
  }
  [class~="active:ink-teal-800"]:active {
    color: var(--zbk-color-teal-800);
  }
  [class~="disabled:ink-teal-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-teal-800);
  }
  .ink-teal-900 {
    color: var(--zbk-color-teal-900);
  }
  [class~="focus:ink-teal-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-teal-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-teal-900:hover {
      color: var(--zbk-color-teal-900);
    }
  }
  [class~="active:ink-teal-900"]:active {
    color: var(--zbk-color-teal-900);
  }
  [class~="disabled:ink-teal-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-teal-900);
  }
  .ink-teal-950 {
    color: var(--zbk-color-teal-950);
  }
  [class~="focus:ink-teal-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-teal-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-teal-950:hover {
      color: var(--zbk-color-teal-950);
    }
  }
  [class~="active:ink-teal-950"]:active {
    color: var(--zbk-color-teal-950);
  }
  [class~="disabled:ink-teal-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-teal-950);
  }
  .canvas-teal-50 {
    background-color: var(--zbk-color-teal-50);
  }
  [class~="focus:canvas-teal-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-teal-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-teal-50:hover {
      background-color: var(--zbk-color-teal-50);
    }
  }
  [class~="active:canvas-teal-50"]:active {
    background-color: var(--zbk-color-teal-50);
  }
  [class~="disabled:canvas-teal-50"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-teal-50);
  }
  .canvas-teal-100 {
    background-color: var(--zbk-color-teal-100);
  }
  [class~="focus:canvas-teal-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-teal-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-teal-100:hover {
      background-color: var(--zbk-color-teal-100);
    }
  }
  [class~="active:canvas-teal-100"]:active {
    background-color: var(--zbk-color-teal-100);
  }
  [class~="disabled:canvas-teal-100"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-teal-100);
  }
  .canvas-teal-200 {
    background-color: var(--zbk-color-teal-200);
  }
  [class~="focus:canvas-teal-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-teal-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-teal-200:hover {
      background-color: var(--zbk-color-teal-200);
    }
  }
  [class~="active:canvas-teal-200"]:active {
    background-color: var(--zbk-color-teal-200);
  }
  [class~="disabled:canvas-teal-200"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-teal-200);
  }
  .canvas-teal-300 {
    background-color: var(--zbk-color-teal-300);
  }
  [class~="focus:canvas-teal-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-teal-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-teal-300:hover {
      background-color: var(--zbk-color-teal-300);
    }
  }
  [class~="active:canvas-teal-300"]:active {
    background-color: var(--zbk-color-teal-300);
  }
  [class~="disabled:canvas-teal-300"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-teal-300);
  }
  .canvas-teal-400 {
    background-color: var(--zbk-color-teal-400);
  }
  [class~="focus:canvas-teal-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-teal-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-teal-400:hover {
      background-color: var(--zbk-color-teal-400);
    }
  }
  [class~="active:canvas-teal-400"]:active {
    background-color: var(--zbk-color-teal-400);
  }
  [class~="disabled:canvas-teal-400"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-teal-400);
  }
  .canvas-teal-500 {
    background-color: var(--zbk-color-teal-500);
  }
  [class~="focus:canvas-teal-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-teal-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-teal-500:hover {
      background-color: var(--zbk-color-teal-500);
    }
  }
  [class~="active:canvas-teal-500"]:active {
    background-color: var(--zbk-color-teal-500);
  }
  [class~="disabled:canvas-teal-500"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-teal-500);
  }
  .canvas-teal-600 {
    background-color: var(--zbk-color-teal-600);
  }
  [class~="focus:canvas-teal-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-teal-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-teal-600:hover {
      background-color: var(--zbk-color-teal-600);
    }
  }
  [class~="active:canvas-teal-600"]:active {
    background-color: var(--zbk-color-teal-600);
  }
  [class~="disabled:canvas-teal-600"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-teal-600);
  }
  .canvas-teal-700 {
    background-color: var(--zbk-color-teal-700);
  }
  [class~="focus:canvas-teal-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-teal-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-teal-700:hover {
      background-color: var(--zbk-color-teal-700);
    }
  }
  [class~="active:canvas-teal-700"]:active {
    background-color: var(--zbk-color-teal-700);
  }
  [class~="disabled:canvas-teal-700"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-teal-700);
  }
  .canvas-teal-800 {
    background-color: var(--zbk-color-teal-800);
  }
  [class~="focus:canvas-teal-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-teal-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-teal-800:hover {
      background-color: var(--zbk-color-teal-800);
    }
  }
  [class~="active:canvas-teal-800"]:active {
    background-color: var(--zbk-color-teal-800);
  }
  [class~="disabled:canvas-teal-800"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-teal-800);
  }
  .canvas-teal-900 {
    background-color: var(--zbk-color-teal-900);
  }
  [class~="focus:canvas-teal-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-teal-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-teal-900:hover {
      background-color: var(--zbk-color-teal-900);
    }
  }
  [class~="active:canvas-teal-900"]:active {
    background-color: var(--zbk-color-teal-900);
  }
  [class~="disabled:canvas-teal-900"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-teal-900);
  }
  .canvas-teal-950 {
    background-color: var(--zbk-color-teal-950);
  }
  [class~="focus:canvas-teal-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-teal-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-teal-950:hover {
      background-color: var(--zbk-color-teal-950);
    }
  }
  [class~="active:canvas-teal-950"]:active {
    background-color: var(--zbk-color-teal-950);
  }
  [class~="disabled:canvas-teal-950"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-teal-950);
  }
  .border-teal-50 {
    border-color: var(--zbk-color-teal-50);
  }
  [class~="focus:border-teal-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-teal-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-teal-50:hover {
      border-color: var(--zbk-color-teal-50);
    }
  }
  [class~="active:border-teal-50"]:active {
    border-color: var(--zbk-color-teal-50);
  }
  [class~="disabled:border-teal-50"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-teal-50);
  }
  .border-teal-100 {
    border-color: var(--zbk-color-teal-100);
  }
  [class~="focus:border-teal-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-teal-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-teal-100:hover {
      border-color: var(--zbk-color-teal-100);
    }
  }
  [class~="active:border-teal-100"]:active {
    border-color: var(--zbk-color-teal-100);
  }
  [class~="disabled:border-teal-100"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-teal-100);
  }
  .border-teal-200 {
    border-color: var(--zbk-color-teal-200);
  }
  [class~="focus:border-teal-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-teal-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-teal-200:hover {
      border-color: var(--zbk-color-teal-200);
    }
  }
  [class~="active:border-teal-200"]:active {
    border-color: var(--zbk-color-teal-200);
  }
  [class~="disabled:border-teal-200"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-teal-200);
  }
  .border-teal-300 {
    border-color: var(--zbk-color-teal-300);
  }
  [class~="focus:border-teal-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-teal-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-teal-300:hover {
      border-color: var(--zbk-color-teal-300);
    }
  }
  [class~="active:border-teal-300"]:active {
    border-color: var(--zbk-color-teal-300);
  }
  [class~="disabled:border-teal-300"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-teal-300);
  }
  .border-teal-400 {
    border-color: var(--zbk-color-teal-400);
  }
  [class~="focus:border-teal-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-teal-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-teal-400:hover {
      border-color: var(--zbk-color-teal-400);
    }
  }
  [class~="active:border-teal-400"]:active {
    border-color: var(--zbk-color-teal-400);
  }
  [class~="disabled:border-teal-400"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-teal-400);
  }
  .border-teal-500 {
    border-color: var(--zbk-color-teal-500);
  }
  [class~="focus:border-teal-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-teal-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-teal-500:hover {
      border-color: var(--zbk-color-teal-500);
    }
  }
  [class~="active:border-teal-500"]:active {
    border-color: var(--zbk-color-teal-500);
  }
  [class~="disabled:border-teal-500"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-teal-500);
  }
  .border-teal-600 {
    border-color: var(--zbk-color-teal-600);
  }
  [class~="focus:border-teal-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-teal-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-teal-600:hover {
      border-color: var(--zbk-color-teal-600);
    }
  }
  [class~="active:border-teal-600"]:active {
    border-color: var(--zbk-color-teal-600);
  }
  [class~="disabled:border-teal-600"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-teal-600);
  }
  .border-teal-700 {
    border-color: var(--zbk-color-teal-700);
  }
  [class~="focus:border-teal-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-teal-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-teal-700:hover {
      border-color: var(--zbk-color-teal-700);
    }
  }
  [class~="active:border-teal-700"]:active {
    border-color: var(--zbk-color-teal-700);
  }
  [class~="disabled:border-teal-700"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-teal-700);
  }
  .border-teal-800 {
    border-color: var(--zbk-color-teal-800);
  }
  [class~="focus:border-teal-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-teal-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-teal-800:hover {
      border-color: var(--zbk-color-teal-800);
    }
  }
  [class~="active:border-teal-800"]:active {
    border-color: var(--zbk-color-teal-800);
  }
  [class~="disabled:border-teal-800"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-teal-800);
  }
  .border-teal-900 {
    border-color: var(--zbk-color-teal-900);
  }
  [class~="focus:border-teal-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-teal-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-teal-900:hover {
      border-color: var(--zbk-color-teal-900);
    }
  }
  [class~="active:border-teal-900"]:active {
    border-color: var(--zbk-color-teal-900);
  }
  [class~="disabled:border-teal-900"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-teal-900);
  }
  .border-teal-950 {
    border-color: var(--zbk-color-teal-950);
  }
  [class~="focus:border-teal-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-teal-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-teal-950:hover {
      border-color: var(--zbk-color-teal-950);
    }
  }
  [class~="active:border-teal-950"]:active {
    border-color: var(--zbk-color-teal-950);
  }
  [class~="disabled:border-teal-950"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-teal-950);
  }
  .fill-teal-50 {
    fill: var(--zbk-color-teal-50);
  }
  [class~="focus:fill-teal-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-teal-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-teal-50:hover {
      fill: var(--zbk-color-teal-50);
    }
  }
  [class~="active:fill-teal-50"]:active {
    fill: var(--zbk-color-teal-50);
  }
  [class~="disabled:fill-teal-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-teal-50);
  }
  .fill-teal-100 {
    fill: var(--zbk-color-teal-100);
  }
  [class~="focus:fill-teal-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-teal-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-teal-100:hover {
      fill: var(--zbk-color-teal-100);
    }
  }
  [class~="active:fill-teal-100"]:active {
    fill: var(--zbk-color-teal-100);
  }
  [class~="disabled:fill-teal-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-teal-100);
  }
  .fill-teal-200 {
    fill: var(--zbk-color-teal-200);
  }
  [class~="focus:fill-teal-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-teal-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-teal-200:hover {
      fill: var(--zbk-color-teal-200);
    }
  }
  [class~="active:fill-teal-200"]:active {
    fill: var(--zbk-color-teal-200);
  }
  [class~="disabled:fill-teal-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-teal-200);
  }
  .fill-teal-300 {
    fill: var(--zbk-color-teal-300);
  }
  [class~="focus:fill-teal-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-teal-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-teal-300:hover {
      fill: var(--zbk-color-teal-300);
    }
  }
  [class~="active:fill-teal-300"]:active {
    fill: var(--zbk-color-teal-300);
  }
  [class~="disabled:fill-teal-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-teal-300);
  }
  .fill-teal-400 {
    fill: var(--zbk-color-teal-400);
  }
  [class~="focus:fill-teal-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-teal-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-teal-400:hover {
      fill: var(--zbk-color-teal-400);
    }
  }
  [class~="active:fill-teal-400"]:active {
    fill: var(--zbk-color-teal-400);
  }
  [class~="disabled:fill-teal-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-teal-400);
  }
  .fill-teal-500 {
    fill: var(--zbk-color-teal-500);
  }
  [class~="focus:fill-teal-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-teal-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-teal-500:hover {
      fill: var(--zbk-color-teal-500);
    }
  }
  [class~="active:fill-teal-500"]:active {
    fill: var(--zbk-color-teal-500);
  }
  [class~="disabled:fill-teal-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-teal-500);
  }
  .fill-teal-600 {
    fill: var(--zbk-color-teal-600);
  }
  [class~="focus:fill-teal-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-teal-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-teal-600:hover {
      fill: var(--zbk-color-teal-600);
    }
  }
  [class~="active:fill-teal-600"]:active {
    fill: var(--zbk-color-teal-600);
  }
  [class~="disabled:fill-teal-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-teal-600);
  }
  .fill-teal-700 {
    fill: var(--zbk-color-teal-700);
  }
  [class~="focus:fill-teal-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-teal-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-teal-700:hover {
      fill: var(--zbk-color-teal-700);
    }
  }
  [class~="active:fill-teal-700"]:active {
    fill: var(--zbk-color-teal-700);
  }
  [class~="disabled:fill-teal-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-teal-700);
  }
  .fill-teal-800 {
    fill: var(--zbk-color-teal-800);
  }
  [class~="focus:fill-teal-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-teal-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-teal-800:hover {
      fill: var(--zbk-color-teal-800);
    }
  }
  [class~="active:fill-teal-800"]:active {
    fill: var(--zbk-color-teal-800);
  }
  [class~="disabled:fill-teal-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-teal-800);
  }
  .fill-teal-900 {
    fill: var(--zbk-color-teal-900);
  }
  [class~="focus:fill-teal-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-teal-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-teal-900:hover {
      fill: var(--zbk-color-teal-900);
    }
  }
  [class~="active:fill-teal-900"]:active {
    fill: var(--zbk-color-teal-900);
  }
  [class~="disabled:fill-teal-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-teal-900);
  }
  .fill-teal-950 {
    fill: var(--zbk-color-teal-950);
  }
  [class~="focus:fill-teal-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-teal-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-teal-950:hover {
      fill: var(--zbk-color-teal-950);
    }
  }
  [class~="active:fill-teal-950"]:active {
    fill: var(--zbk-color-teal-950);
  }
  [class~="disabled:fill-teal-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-teal-950);
  }
}
:root {
  --zbk-color-violet-hue: 265;
  --zbk-color-violet-saturation: 76%;
  --zbk-color-violet-50: hsl(
    var(--zbk-color-violet-hue),
    var(--zbk-color-violet-saturation),
    98%
  );
  --zbk-color-violet-100: hsl(
    var(--zbk-color-violet-hue),
    var(--zbk-color-violet-saturation),
    93%
  );
  --zbk-color-violet-200: hsl(
    var(--zbk-color-violet-hue),
    var(--zbk-color-violet-saturation),
    87%
  );
  --zbk-color-violet-300: hsl(
    var(--zbk-color-violet-hue),
    var(--zbk-color-violet-saturation),
    78%
  );
  --zbk-color-violet-400: hsl(
    var(--zbk-color-violet-hue),
    var(--zbk-color-violet-saturation),
    69%
  );
  --zbk-color-violet-500: hsl(
    var(--zbk-color-violet-hue),
    var(--zbk-color-violet-saturation),
    58%
  );
  --zbk-color-violet-600: hsl(
    var(--zbk-color-violet-hue),
    var(--zbk-color-violet-saturation),
    48%
  );
  --zbk-color-violet-700: hsl(
    var(--zbk-color-violet-hue),
    var(--zbk-color-violet-saturation),
    36%
  );
  --zbk-color-violet-800: hsl(
    var(--zbk-color-violet-hue),
    var(--zbk-color-violet-saturation),
    26%
  );
  --zbk-color-violet-900: hsl(
    var(--zbk-color-violet-hue),
    var(--zbk-color-violet-saturation),
    18%
  );
  --zbk-color-violet-950: hsl(
    var(--zbk-color-violet-hue),
    var(--zbk-color-violet-saturation),
    10%
  );
}
@layer utilities {
  .ink-violet-50 {
    color: var(--zbk-color-violet-50);
  }
  [class~="focus:ink-violet-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-violet-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-violet-50:hover {
      color: var(--zbk-color-violet-50);
    }
  }
  [class~="active:ink-violet-50"]:active {
    color: var(--zbk-color-violet-50);
  }
  [class~="disabled:ink-violet-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-violet-50);
  }
  .ink-violet-100 {
    color: var(--zbk-color-violet-100);
  }
  [class~="focus:ink-violet-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-violet-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-violet-100:hover {
      color: var(--zbk-color-violet-100);
    }
  }
  [class~="active:ink-violet-100"]:active {
    color: var(--zbk-color-violet-100);
  }
  [class~="disabled:ink-violet-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-violet-100);
  }
  .ink-violet-200 {
    color: var(--zbk-color-violet-200);
  }
  [class~="focus:ink-violet-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-violet-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-violet-200:hover {
      color: var(--zbk-color-violet-200);
    }
  }
  [class~="active:ink-violet-200"]:active {
    color: var(--zbk-color-violet-200);
  }
  [class~="disabled:ink-violet-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-violet-200);
  }
  .ink-violet-300 {
    color: var(--zbk-color-violet-300);
  }
  [class~="focus:ink-violet-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-violet-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-violet-300:hover {
      color: var(--zbk-color-violet-300);
    }
  }
  [class~="active:ink-violet-300"]:active {
    color: var(--zbk-color-violet-300);
  }
  [class~="disabled:ink-violet-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-violet-300);
  }
  .ink-violet-400 {
    color: var(--zbk-color-violet-400);
  }
  [class~="focus:ink-violet-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-violet-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-violet-400:hover {
      color: var(--zbk-color-violet-400);
    }
  }
  [class~="active:ink-violet-400"]:active {
    color: var(--zbk-color-violet-400);
  }
  [class~="disabled:ink-violet-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-violet-400);
  }
  .ink-violet-500 {
    color: var(--zbk-color-violet-500);
  }
  [class~="focus:ink-violet-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-violet-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-violet-500:hover {
      color: var(--zbk-color-violet-500);
    }
  }
  [class~="active:ink-violet-500"]:active {
    color: var(--zbk-color-violet-500);
  }
  [class~="disabled:ink-violet-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-violet-500);
  }
  .ink-violet-600 {
    color: var(--zbk-color-violet-600);
  }
  [class~="focus:ink-violet-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-violet-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-violet-600:hover {
      color: var(--zbk-color-violet-600);
    }
  }
  [class~="active:ink-violet-600"]:active {
    color: var(--zbk-color-violet-600);
  }
  [class~="disabled:ink-violet-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-violet-600);
  }
  .ink-violet-700 {
    color: var(--zbk-color-violet-700);
  }
  [class~="focus:ink-violet-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-violet-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-violet-700:hover {
      color: var(--zbk-color-violet-700);
    }
  }
  [class~="active:ink-violet-700"]:active {
    color: var(--zbk-color-violet-700);
  }
  [class~="disabled:ink-violet-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-violet-700);
  }
  .ink-violet-800 {
    color: var(--zbk-color-violet-800);
  }
  [class~="focus:ink-violet-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-violet-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-violet-800:hover {
      color: var(--zbk-color-violet-800);
    }
  }
  [class~="active:ink-violet-800"]:active {
    color: var(--zbk-color-violet-800);
  }
  [class~="disabled:ink-violet-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-violet-800);
  }
  .ink-violet-900 {
    color: var(--zbk-color-violet-900);
  }
  [class~="focus:ink-violet-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-violet-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-violet-900:hover {
      color: var(--zbk-color-violet-900);
    }
  }
  [class~="active:ink-violet-900"]:active {
    color: var(--zbk-color-violet-900);
  }
  [class~="disabled:ink-violet-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-violet-900);
  }
  .ink-violet-950 {
    color: var(--zbk-color-violet-950);
  }
  [class~="focus:ink-violet-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-violet-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-violet-950:hover {
      color: var(--zbk-color-violet-950);
    }
  }
  [class~="active:ink-violet-950"]:active {
    color: var(--zbk-color-violet-950);
  }
  [class~="disabled:ink-violet-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-violet-950);
  }
  .canvas-violet-50 {
    background-color: var(--zbk-color-violet-50);
  }
  [class~="focus:canvas-violet-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-violet-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-violet-50:hover {
      background-color: var(--zbk-color-violet-50);
    }
  }
  [class~="active:canvas-violet-50"]:active {
    background-color: var(--zbk-color-violet-50);
  }
  [class~="disabled:canvas-violet-50"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-violet-50);
  }
  .canvas-violet-100 {
    background-color: var(--zbk-color-violet-100);
  }
  [class~="focus:canvas-violet-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-violet-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-violet-100:hover {
      background-color: var(--zbk-color-violet-100);
    }
  }
  [class~="active:canvas-violet-100"]:active {
    background-color: var(--zbk-color-violet-100);
  }
  [class~="disabled:canvas-violet-100"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-violet-100);
  }
  .canvas-violet-200 {
    background-color: var(--zbk-color-violet-200);
  }
  [class~="focus:canvas-violet-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-violet-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-violet-200:hover {
      background-color: var(--zbk-color-violet-200);
    }
  }
  [class~="active:canvas-violet-200"]:active {
    background-color: var(--zbk-color-violet-200);
  }
  [class~="disabled:canvas-violet-200"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-violet-200);
  }
  .canvas-violet-300 {
    background-color: var(--zbk-color-violet-300);
  }
  [class~="focus:canvas-violet-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-violet-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-violet-300:hover {
      background-color: var(--zbk-color-violet-300);
    }
  }
  [class~="active:canvas-violet-300"]:active {
    background-color: var(--zbk-color-violet-300);
  }
  [class~="disabled:canvas-violet-300"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-violet-300);
  }
  .canvas-violet-400 {
    background-color: var(--zbk-color-violet-400);
  }
  [class~="focus:canvas-violet-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-violet-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-violet-400:hover {
      background-color: var(--zbk-color-violet-400);
    }
  }
  [class~="active:canvas-violet-400"]:active {
    background-color: var(--zbk-color-violet-400);
  }
  [class~="disabled:canvas-violet-400"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-violet-400);
  }
  .canvas-violet-500 {
    background-color: var(--zbk-color-violet-500);
  }
  [class~="focus:canvas-violet-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-violet-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-violet-500:hover {
      background-color: var(--zbk-color-violet-500);
    }
  }
  [class~="active:canvas-violet-500"]:active {
    background-color: var(--zbk-color-violet-500);
  }
  [class~="disabled:canvas-violet-500"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-violet-500);
  }
  .canvas-violet-600 {
    background-color: var(--zbk-color-violet-600);
  }
  [class~="focus:canvas-violet-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-violet-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-violet-600:hover {
      background-color: var(--zbk-color-violet-600);
    }
  }
  [class~="active:canvas-violet-600"]:active {
    background-color: var(--zbk-color-violet-600);
  }
  [class~="disabled:canvas-violet-600"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-violet-600);
  }
  .canvas-violet-700 {
    background-color: var(--zbk-color-violet-700);
  }
  [class~="focus:canvas-violet-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-violet-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-violet-700:hover {
      background-color: var(--zbk-color-violet-700);
    }
  }
  [class~="active:canvas-violet-700"]:active {
    background-color: var(--zbk-color-violet-700);
  }
  [class~="disabled:canvas-violet-700"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-violet-700);
  }
  .canvas-violet-800 {
    background-color: var(--zbk-color-violet-800);
  }
  [class~="focus:canvas-violet-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-violet-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-violet-800:hover {
      background-color: var(--zbk-color-violet-800);
    }
  }
  [class~="active:canvas-violet-800"]:active {
    background-color: var(--zbk-color-violet-800);
  }
  [class~="disabled:canvas-violet-800"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-violet-800);
  }
  .canvas-violet-900 {
    background-color: var(--zbk-color-violet-900);
  }
  [class~="focus:canvas-violet-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-violet-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-violet-900:hover {
      background-color: var(--zbk-color-violet-900);
    }
  }
  [class~="active:canvas-violet-900"]:active {
    background-color: var(--zbk-color-violet-900);
  }
  [class~="disabled:canvas-violet-900"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-violet-900);
  }
  .canvas-violet-950 {
    background-color: var(--zbk-color-violet-950);
  }
  [class~="focus:canvas-violet-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-violet-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-violet-950:hover {
      background-color: var(--zbk-color-violet-950);
    }
  }
  [class~="active:canvas-violet-950"]:active {
    background-color: var(--zbk-color-violet-950);
  }
  [class~="disabled:canvas-violet-950"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-violet-950);
  }
  .border-violet-50 {
    border-color: var(--zbk-color-violet-50);
  }
  [class~="focus:border-violet-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-violet-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-violet-50:hover {
      border-color: var(--zbk-color-violet-50);
    }
  }
  [class~="active:border-violet-50"]:active {
    border-color: var(--zbk-color-violet-50);
  }
  [class~="disabled:border-violet-50"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-violet-50);
  }
  .border-violet-100 {
    border-color: var(--zbk-color-violet-100);
  }
  [class~="focus:border-violet-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-violet-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-violet-100:hover {
      border-color: var(--zbk-color-violet-100);
    }
  }
  [class~="active:border-violet-100"]:active {
    border-color: var(--zbk-color-violet-100);
  }
  [class~="disabled:border-violet-100"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-violet-100);
  }
  .border-violet-200 {
    border-color: var(--zbk-color-violet-200);
  }
  [class~="focus:border-violet-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-violet-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-violet-200:hover {
      border-color: var(--zbk-color-violet-200);
    }
  }
  [class~="active:border-violet-200"]:active {
    border-color: var(--zbk-color-violet-200);
  }
  [class~="disabled:border-violet-200"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-violet-200);
  }
  .border-violet-300 {
    border-color: var(--zbk-color-violet-300);
  }
  [class~="focus:border-violet-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-violet-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-violet-300:hover {
      border-color: var(--zbk-color-violet-300);
    }
  }
  [class~="active:border-violet-300"]:active {
    border-color: var(--zbk-color-violet-300);
  }
  [class~="disabled:border-violet-300"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-violet-300);
  }
  .border-violet-400 {
    border-color: var(--zbk-color-violet-400);
  }
  [class~="focus:border-violet-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-violet-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-violet-400:hover {
      border-color: var(--zbk-color-violet-400);
    }
  }
  [class~="active:border-violet-400"]:active {
    border-color: var(--zbk-color-violet-400);
  }
  [class~="disabled:border-violet-400"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-violet-400);
  }
  .border-violet-500 {
    border-color: var(--zbk-color-violet-500);
  }
  [class~="focus:border-violet-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-violet-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-violet-500:hover {
      border-color: var(--zbk-color-violet-500);
    }
  }
  [class~="active:border-violet-500"]:active {
    border-color: var(--zbk-color-violet-500);
  }
  [class~="disabled:border-violet-500"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-violet-500);
  }
  .border-violet-600 {
    border-color: var(--zbk-color-violet-600);
  }
  [class~="focus:border-violet-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-violet-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-violet-600:hover {
      border-color: var(--zbk-color-violet-600);
    }
  }
  [class~="active:border-violet-600"]:active {
    border-color: var(--zbk-color-violet-600);
  }
  [class~="disabled:border-violet-600"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-violet-600);
  }
  .border-violet-700 {
    border-color: var(--zbk-color-violet-700);
  }
  [class~="focus:border-violet-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-violet-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-violet-700:hover {
      border-color: var(--zbk-color-violet-700);
    }
  }
  [class~="active:border-violet-700"]:active {
    border-color: var(--zbk-color-violet-700);
  }
  [class~="disabled:border-violet-700"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-violet-700);
  }
  .border-violet-800 {
    border-color: var(--zbk-color-violet-800);
  }
  [class~="focus:border-violet-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-violet-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-violet-800:hover {
      border-color: var(--zbk-color-violet-800);
    }
  }
  [class~="active:border-violet-800"]:active {
    border-color: var(--zbk-color-violet-800);
  }
  [class~="disabled:border-violet-800"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-violet-800);
  }
  .border-violet-900 {
    border-color: var(--zbk-color-violet-900);
  }
  [class~="focus:border-violet-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-violet-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-violet-900:hover {
      border-color: var(--zbk-color-violet-900);
    }
  }
  [class~="active:border-violet-900"]:active {
    border-color: var(--zbk-color-violet-900);
  }
  [class~="disabled:border-violet-900"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-violet-900);
  }
  .border-violet-950 {
    border-color: var(--zbk-color-violet-950);
  }
  [class~="focus:border-violet-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-violet-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-violet-950:hover {
      border-color: var(--zbk-color-violet-950);
    }
  }
  [class~="active:border-violet-950"]:active {
    border-color: var(--zbk-color-violet-950);
  }
  [class~="disabled:border-violet-950"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-violet-950);
  }
  .fill-violet-50 {
    fill: var(--zbk-color-violet-50);
  }
  [class~="focus:fill-violet-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-violet-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-violet-50:hover {
      fill: var(--zbk-color-violet-50);
    }
  }
  [class~="active:fill-violet-50"]:active {
    fill: var(--zbk-color-violet-50);
  }
  [class~="disabled:fill-violet-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-violet-50);
  }
  .fill-violet-100 {
    fill: var(--zbk-color-violet-100);
  }
  [class~="focus:fill-violet-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-violet-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-violet-100:hover {
      fill: var(--zbk-color-violet-100);
    }
  }
  [class~="active:fill-violet-100"]:active {
    fill: var(--zbk-color-violet-100);
  }
  [class~="disabled:fill-violet-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-violet-100);
  }
  .fill-violet-200 {
    fill: var(--zbk-color-violet-200);
  }
  [class~="focus:fill-violet-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-violet-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-violet-200:hover {
      fill: var(--zbk-color-violet-200);
    }
  }
  [class~="active:fill-violet-200"]:active {
    fill: var(--zbk-color-violet-200);
  }
  [class~="disabled:fill-violet-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-violet-200);
  }
  .fill-violet-300 {
    fill: var(--zbk-color-violet-300);
  }
  [class~="focus:fill-violet-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-violet-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-violet-300:hover {
      fill: var(--zbk-color-violet-300);
    }
  }
  [class~="active:fill-violet-300"]:active {
    fill: var(--zbk-color-violet-300);
  }
  [class~="disabled:fill-violet-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-violet-300);
  }
  .fill-violet-400 {
    fill: var(--zbk-color-violet-400);
  }
  [class~="focus:fill-violet-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-violet-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-violet-400:hover {
      fill: var(--zbk-color-violet-400);
    }
  }
  [class~="active:fill-violet-400"]:active {
    fill: var(--zbk-color-violet-400);
  }
  [class~="disabled:fill-violet-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-violet-400);
  }
  .fill-violet-500 {
    fill: var(--zbk-color-violet-500);
  }
  [class~="focus:fill-violet-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-violet-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-violet-500:hover {
      fill: var(--zbk-color-violet-500);
    }
  }
  [class~="active:fill-violet-500"]:active {
    fill: var(--zbk-color-violet-500);
  }
  [class~="disabled:fill-violet-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-violet-500);
  }
  .fill-violet-600 {
    fill: var(--zbk-color-violet-600);
  }
  [class~="focus:fill-violet-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-violet-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-violet-600:hover {
      fill: var(--zbk-color-violet-600);
    }
  }
  [class~="active:fill-violet-600"]:active {
    fill: var(--zbk-color-violet-600);
  }
  [class~="disabled:fill-violet-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-violet-600);
  }
  .fill-violet-700 {
    fill: var(--zbk-color-violet-700);
  }
  [class~="focus:fill-violet-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-violet-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-violet-700:hover {
      fill: var(--zbk-color-violet-700);
    }
  }
  [class~="active:fill-violet-700"]:active {
    fill: var(--zbk-color-violet-700);
  }
  [class~="disabled:fill-violet-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-violet-700);
  }
  .fill-violet-800 {
    fill: var(--zbk-color-violet-800);
  }
  [class~="focus:fill-violet-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-violet-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-violet-800:hover {
      fill: var(--zbk-color-violet-800);
    }
  }
  [class~="active:fill-violet-800"]:active {
    fill: var(--zbk-color-violet-800);
  }
  [class~="disabled:fill-violet-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-violet-800);
  }
  .fill-violet-900 {
    fill: var(--zbk-color-violet-900);
  }
  [class~="focus:fill-violet-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-violet-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-violet-900:hover {
      fill: var(--zbk-color-violet-900);
    }
  }
  [class~="active:fill-violet-900"]:active {
    fill: var(--zbk-color-violet-900);
  }
  [class~="disabled:fill-violet-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-violet-900);
  }
  .fill-violet-950 {
    fill: var(--zbk-color-violet-950);
  }
  [class~="focus:fill-violet-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-violet-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-violet-950:hover {
      fill: var(--zbk-color-violet-950);
    }
  }
  [class~="active:fill-violet-950"]:active {
    fill: var(--zbk-color-violet-950);
  }
  [class~="disabled:fill-violet-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-violet-950);
  }
}
:root {
  --zbk-color-yellow-hue: 52;
  --zbk-color-yellow-saturation: 78%;
  --zbk-color-yellow-50: hsl(
    var(--zbk-color-yellow-hue),
    var(--zbk-color-yellow-saturation),
    98%
  );
  --zbk-color-yellow-100: hsl(
    var(--zbk-color-yellow-hue),
    var(--zbk-color-yellow-saturation),
    93%
  );
  --zbk-color-yellow-200: hsl(
    var(--zbk-color-yellow-hue),
    var(--zbk-color-yellow-saturation),
    87%
  );
  --zbk-color-yellow-300: hsl(
    var(--zbk-color-yellow-hue),
    var(--zbk-color-yellow-saturation),
    78%
  );
  --zbk-color-yellow-400: hsl(
    var(--zbk-color-yellow-hue),
    var(--zbk-color-yellow-saturation),
    69%
  );
  --zbk-color-yellow-500: hsl(
    var(--zbk-color-yellow-hue),
    var(--zbk-color-yellow-saturation),
    58%
  );
  --zbk-color-yellow-600: hsl(
    var(--zbk-color-yellow-hue),
    var(--zbk-color-yellow-saturation),
    48%
  );
  --zbk-color-yellow-700: hsl(
    var(--zbk-color-yellow-hue),
    var(--zbk-color-yellow-saturation),
    36%
  );
  --zbk-color-yellow-800: hsl(
    var(--zbk-color-yellow-hue),
    var(--zbk-color-yellow-saturation),
    26%
  );
  --zbk-color-yellow-900: hsl(
    var(--zbk-color-yellow-hue),
    var(--zbk-color-yellow-saturation),
    18%
  );
  --zbk-color-yellow-950: hsl(
    var(--zbk-color-yellow-hue),
    var(--zbk-color-yellow-saturation),
    10%
  );
}
@layer utilities {
  .ink-yellow-50 {
    color: var(--zbk-color-yellow-50);
  }
  [class~="focus:ink-yellow-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-yellow-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-yellow-50:hover {
      color: var(--zbk-color-yellow-50);
    }
  }
  [class~="active:ink-yellow-50"]:active {
    color: var(--zbk-color-yellow-50);
  }
  [class~="disabled:ink-yellow-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-yellow-50);
  }
  .ink-yellow-100 {
    color: var(--zbk-color-yellow-100);
  }
  [class~="focus:ink-yellow-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-yellow-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-yellow-100:hover {
      color: var(--zbk-color-yellow-100);
    }
  }
  [class~="active:ink-yellow-100"]:active {
    color: var(--zbk-color-yellow-100);
  }
  [class~="disabled:ink-yellow-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-yellow-100);
  }
  .ink-yellow-200 {
    color: var(--zbk-color-yellow-200);
  }
  [class~="focus:ink-yellow-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-yellow-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-yellow-200:hover {
      color: var(--zbk-color-yellow-200);
    }
  }
  [class~="active:ink-yellow-200"]:active {
    color: var(--zbk-color-yellow-200);
  }
  [class~="disabled:ink-yellow-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-yellow-200);
  }
  .ink-yellow-300 {
    color: var(--zbk-color-yellow-300);
  }
  [class~="focus:ink-yellow-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-yellow-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-yellow-300:hover {
      color: var(--zbk-color-yellow-300);
    }
  }
  [class~="active:ink-yellow-300"]:active {
    color: var(--zbk-color-yellow-300);
  }
  [class~="disabled:ink-yellow-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-yellow-300);
  }
  .ink-yellow-400 {
    color: var(--zbk-color-yellow-400);
  }
  [class~="focus:ink-yellow-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-yellow-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-yellow-400:hover {
      color: var(--zbk-color-yellow-400);
    }
  }
  [class~="active:ink-yellow-400"]:active {
    color: var(--zbk-color-yellow-400);
  }
  [class~="disabled:ink-yellow-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-yellow-400);
  }
  .ink-yellow-500 {
    color: var(--zbk-color-yellow-500);
  }
  [class~="focus:ink-yellow-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-yellow-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-yellow-500:hover {
      color: var(--zbk-color-yellow-500);
    }
  }
  [class~="active:ink-yellow-500"]:active {
    color: var(--zbk-color-yellow-500);
  }
  [class~="disabled:ink-yellow-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-yellow-500);
  }
  .ink-yellow-600 {
    color: var(--zbk-color-yellow-600);
  }
  [class~="focus:ink-yellow-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-yellow-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-yellow-600:hover {
      color: var(--zbk-color-yellow-600);
    }
  }
  [class~="active:ink-yellow-600"]:active {
    color: var(--zbk-color-yellow-600);
  }
  [class~="disabled:ink-yellow-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-yellow-600);
  }
  .ink-yellow-700 {
    color: var(--zbk-color-yellow-700);
  }
  [class~="focus:ink-yellow-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-yellow-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-yellow-700:hover {
      color: var(--zbk-color-yellow-700);
    }
  }
  [class~="active:ink-yellow-700"]:active {
    color: var(--zbk-color-yellow-700);
  }
  [class~="disabled:ink-yellow-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-yellow-700);
  }
  .ink-yellow-800 {
    color: var(--zbk-color-yellow-800);
  }
  [class~="focus:ink-yellow-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-yellow-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-yellow-800:hover {
      color: var(--zbk-color-yellow-800);
    }
  }
  [class~="active:ink-yellow-800"]:active {
    color: var(--zbk-color-yellow-800);
  }
  [class~="disabled:ink-yellow-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-yellow-800);
  }
  .ink-yellow-900 {
    color: var(--zbk-color-yellow-900);
  }
  [class~="focus:ink-yellow-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-yellow-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-yellow-900:hover {
      color: var(--zbk-color-yellow-900);
    }
  }
  [class~="active:ink-yellow-900"]:active {
    color: var(--zbk-color-yellow-900);
  }
  [class~="disabled:ink-yellow-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-yellow-900);
  }
  .ink-yellow-950 {
    color: var(--zbk-color-yellow-950);
  }
  [class~="focus:ink-yellow-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-color-yellow-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-yellow-950:hover {
      color: var(--zbk-color-yellow-950);
    }
  }
  [class~="active:ink-yellow-950"]:active {
    color: var(--zbk-color-yellow-950);
  }
  [class~="disabled:ink-yellow-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-color-yellow-950);
  }
  .canvas-yellow-50 {
    background-color: var(--zbk-color-yellow-50);
  }
  [class~="focus:canvas-yellow-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-yellow-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-yellow-50:hover {
      background-color: var(--zbk-color-yellow-50);
    }
  }
  [class~="active:canvas-yellow-50"]:active {
    background-color: var(--zbk-color-yellow-50);
  }
  [class~="disabled:canvas-yellow-50"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-yellow-50);
  }
  .canvas-yellow-100 {
    background-color: var(--zbk-color-yellow-100);
  }
  [class~="focus:canvas-yellow-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-yellow-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-yellow-100:hover {
      background-color: var(--zbk-color-yellow-100);
    }
  }
  [class~="active:canvas-yellow-100"]:active {
    background-color: var(--zbk-color-yellow-100);
  }
  [class~="disabled:canvas-yellow-100"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-yellow-100);
  }
  .canvas-yellow-200 {
    background-color: var(--zbk-color-yellow-200);
  }
  [class~="focus:canvas-yellow-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-yellow-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-yellow-200:hover {
      background-color: var(--zbk-color-yellow-200);
    }
  }
  [class~="active:canvas-yellow-200"]:active {
    background-color: var(--zbk-color-yellow-200);
  }
  [class~="disabled:canvas-yellow-200"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-yellow-200);
  }
  .canvas-yellow-300 {
    background-color: var(--zbk-color-yellow-300);
  }
  [class~="focus:canvas-yellow-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-yellow-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-yellow-300:hover {
      background-color: var(--zbk-color-yellow-300);
    }
  }
  [class~="active:canvas-yellow-300"]:active {
    background-color: var(--zbk-color-yellow-300);
  }
  [class~="disabled:canvas-yellow-300"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-yellow-300);
  }
  .canvas-yellow-400 {
    background-color: var(--zbk-color-yellow-400);
  }
  [class~="focus:canvas-yellow-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-yellow-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-yellow-400:hover {
      background-color: var(--zbk-color-yellow-400);
    }
  }
  [class~="active:canvas-yellow-400"]:active {
    background-color: var(--zbk-color-yellow-400);
  }
  [class~="disabled:canvas-yellow-400"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-yellow-400);
  }
  .canvas-yellow-500 {
    background-color: var(--zbk-color-yellow-500);
  }
  [class~="focus:canvas-yellow-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-yellow-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-yellow-500:hover {
      background-color: var(--zbk-color-yellow-500);
    }
  }
  [class~="active:canvas-yellow-500"]:active {
    background-color: var(--zbk-color-yellow-500);
  }
  [class~="disabled:canvas-yellow-500"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-yellow-500);
  }
  .canvas-yellow-600 {
    background-color: var(--zbk-color-yellow-600);
  }
  [class~="focus:canvas-yellow-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-yellow-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-yellow-600:hover {
      background-color: var(--zbk-color-yellow-600);
    }
  }
  [class~="active:canvas-yellow-600"]:active {
    background-color: var(--zbk-color-yellow-600);
  }
  [class~="disabled:canvas-yellow-600"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-yellow-600);
  }
  .canvas-yellow-700 {
    background-color: var(--zbk-color-yellow-700);
  }
  [class~="focus:canvas-yellow-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-yellow-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-yellow-700:hover {
      background-color: var(--zbk-color-yellow-700);
    }
  }
  [class~="active:canvas-yellow-700"]:active {
    background-color: var(--zbk-color-yellow-700);
  }
  [class~="disabled:canvas-yellow-700"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-yellow-700);
  }
  .canvas-yellow-800 {
    background-color: var(--zbk-color-yellow-800);
  }
  [class~="focus:canvas-yellow-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-yellow-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-yellow-800:hover {
      background-color: var(--zbk-color-yellow-800);
    }
  }
  [class~="active:canvas-yellow-800"]:active {
    background-color: var(--zbk-color-yellow-800);
  }
  [class~="disabled:canvas-yellow-800"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-yellow-800);
  }
  .canvas-yellow-900 {
    background-color: var(--zbk-color-yellow-900);
  }
  [class~="focus:canvas-yellow-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-yellow-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-yellow-900:hover {
      background-color: var(--zbk-color-yellow-900);
    }
  }
  [class~="active:canvas-yellow-900"]:active {
    background-color: var(--zbk-color-yellow-900);
  }
  [class~="disabled:canvas-yellow-900"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-yellow-900);
  }
  .canvas-yellow-950 {
    background-color: var(--zbk-color-yellow-950);
  }
  [class~="focus:canvas-yellow-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-color-yellow-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-yellow-950:hover {
      background-color: var(--zbk-color-yellow-950);
    }
  }
  [class~="active:canvas-yellow-950"]:active {
    background-color: var(--zbk-color-yellow-950);
  }
  [class~="disabled:canvas-yellow-950"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-color-yellow-950);
  }
  .border-yellow-50 {
    border-color: var(--zbk-color-yellow-50);
  }
  [class~="focus:border-yellow-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-yellow-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-yellow-50:hover {
      border-color: var(--zbk-color-yellow-50);
    }
  }
  [class~="active:border-yellow-50"]:active {
    border-color: var(--zbk-color-yellow-50);
  }
  [class~="disabled:border-yellow-50"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-yellow-50);
  }
  .border-yellow-100 {
    border-color: var(--zbk-color-yellow-100);
  }
  [class~="focus:border-yellow-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-yellow-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-yellow-100:hover {
      border-color: var(--zbk-color-yellow-100);
    }
  }
  [class~="active:border-yellow-100"]:active {
    border-color: var(--zbk-color-yellow-100);
  }
  [class~="disabled:border-yellow-100"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-yellow-100);
  }
  .border-yellow-200 {
    border-color: var(--zbk-color-yellow-200);
  }
  [class~="focus:border-yellow-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-yellow-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-yellow-200:hover {
      border-color: var(--zbk-color-yellow-200);
    }
  }
  [class~="active:border-yellow-200"]:active {
    border-color: var(--zbk-color-yellow-200);
  }
  [class~="disabled:border-yellow-200"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-yellow-200);
  }
  .border-yellow-300 {
    border-color: var(--zbk-color-yellow-300);
  }
  [class~="focus:border-yellow-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-yellow-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-yellow-300:hover {
      border-color: var(--zbk-color-yellow-300);
    }
  }
  [class~="active:border-yellow-300"]:active {
    border-color: var(--zbk-color-yellow-300);
  }
  [class~="disabled:border-yellow-300"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-yellow-300);
  }
  .border-yellow-400 {
    border-color: var(--zbk-color-yellow-400);
  }
  [class~="focus:border-yellow-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-yellow-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-yellow-400:hover {
      border-color: var(--zbk-color-yellow-400);
    }
  }
  [class~="active:border-yellow-400"]:active {
    border-color: var(--zbk-color-yellow-400);
  }
  [class~="disabled:border-yellow-400"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-yellow-400);
  }
  .border-yellow-500 {
    border-color: var(--zbk-color-yellow-500);
  }
  [class~="focus:border-yellow-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-yellow-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-yellow-500:hover {
      border-color: var(--zbk-color-yellow-500);
    }
  }
  [class~="active:border-yellow-500"]:active {
    border-color: var(--zbk-color-yellow-500);
  }
  [class~="disabled:border-yellow-500"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-yellow-500);
  }
  .border-yellow-600 {
    border-color: var(--zbk-color-yellow-600);
  }
  [class~="focus:border-yellow-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-yellow-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-yellow-600:hover {
      border-color: var(--zbk-color-yellow-600);
    }
  }
  [class~="active:border-yellow-600"]:active {
    border-color: var(--zbk-color-yellow-600);
  }
  [class~="disabled:border-yellow-600"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-yellow-600);
  }
  .border-yellow-700 {
    border-color: var(--zbk-color-yellow-700);
  }
  [class~="focus:border-yellow-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-yellow-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-yellow-700:hover {
      border-color: var(--zbk-color-yellow-700);
    }
  }
  [class~="active:border-yellow-700"]:active {
    border-color: var(--zbk-color-yellow-700);
  }
  [class~="disabled:border-yellow-700"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-yellow-700);
  }
  .border-yellow-800 {
    border-color: var(--zbk-color-yellow-800);
  }
  [class~="focus:border-yellow-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-yellow-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-yellow-800:hover {
      border-color: var(--zbk-color-yellow-800);
    }
  }
  [class~="active:border-yellow-800"]:active {
    border-color: var(--zbk-color-yellow-800);
  }
  [class~="disabled:border-yellow-800"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-yellow-800);
  }
  .border-yellow-900 {
    border-color: var(--zbk-color-yellow-900);
  }
  [class~="focus:border-yellow-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-yellow-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-yellow-900:hover {
      border-color: var(--zbk-color-yellow-900);
    }
  }
  [class~="active:border-yellow-900"]:active {
    border-color: var(--zbk-color-yellow-900);
  }
  [class~="disabled:border-yellow-900"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-yellow-900);
  }
  .border-yellow-950 {
    border-color: var(--zbk-color-yellow-950);
  }
  [class~="focus:border-yellow-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-color-yellow-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-yellow-950:hover {
      border-color: var(--zbk-color-yellow-950);
    }
  }
  [class~="active:border-yellow-950"]:active {
    border-color: var(--zbk-color-yellow-950);
  }
  [class~="disabled:border-yellow-950"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-color-yellow-950);
  }
  .fill-yellow-50 {
    fill: var(--zbk-color-yellow-50);
  }
  [class~="focus:fill-yellow-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-yellow-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-yellow-50:hover {
      fill: var(--zbk-color-yellow-50);
    }
  }
  [class~="active:fill-yellow-50"]:active {
    fill: var(--zbk-color-yellow-50);
  }
  [class~="disabled:fill-yellow-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-yellow-50);
  }
  .fill-yellow-100 {
    fill: var(--zbk-color-yellow-100);
  }
  [class~="focus:fill-yellow-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-yellow-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-yellow-100:hover {
      fill: var(--zbk-color-yellow-100);
    }
  }
  [class~="active:fill-yellow-100"]:active {
    fill: var(--zbk-color-yellow-100);
  }
  [class~="disabled:fill-yellow-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-yellow-100);
  }
  .fill-yellow-200 {
    fill: var(--zbk-color-yellow-200);
  }
  [class~="focus:fill-yellow-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-yellow-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-yellow-200:hover {
      fill: var(--zbk-color-yellow-200);
    }
  }
  [class~="active:fill-yellow-200"]:active {
    fill: var(--zbk-color-yellow-200);
  }
  [class~="disabled:fill-yellow-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-yellow-200);
  }
  .fill-yellow-300 {
    fill: var(--zbk-color-yellow-300);
  }
  [class~="focus:fill-yellow-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-yellow-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-yellow-300:hover {
      fill: var(--zbk-color-yellow-300);
    }
  }
  [class~="active:fill-yellow-300"]:active {
    fill: var(--zbk-color-yellow-300);
  }
  [class~="disabled:fill-yellow-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-yellow-300);
  }
  .fill-yellow-400 {
    fill: var(--zbk-color-yellow-400);
  }
  [class~="focus:fill-yellow-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-yellow-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-yellow-400:hover {
      fill: var(--zbk-color-yellow-400);
    }
  }
  [class~="active:fill-yellow-400"]:active {
    fill: var(--zbk-color-yellow-400);
  }
  [class~="disabled:fill-yellow-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-yellow-400);
  }
  .fill-yellow-500 {
    fill: var(--zbk-color-yellow-500);
  }
  [class~="focus:fill-yellow-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-yellow-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-yellow-500:hover {
      fill: var(--zbk-color-yellow-500);
    }
  }
  [class~="active:fill-yellow-500"]:active {
    fill: var(--zbk-color-yellow-500);
  }
  [class~="disabled:fill-yellow-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-yellow-500);
  }
  .fill-yellow-600 {
    fill: var(--zbk-color-yellow-600);
  }
  [class~="focus:fill-yellow-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-yellow-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-yellow-600:hover {
      fill: var(--zbk-color-yellow-600);
    }
  }
  [class~="active:fill-yellow-600"]:active {
    fill: var(--zbk-color-yellow-600);
  }
  [class~="disabled:fill-yellow-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-yellow-600);
  }
  .fill-yellow-700 {
    fill: var(--zbk-color-yellow-700);
  }
  [class~="focus:fill-yellow-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-yellow-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-yellow-700:hover {
      fill: var(--zbk-color-yellow-700);
    }
  }
  [class~="active:fill-yellow-700"]:active {
    fill: var(--zbk-color-yellow-700);
  }
  [class~="disabled:fill-yellow-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-yellow-700);
  }
  .fill-yellow-800 {
    fill: var(--zbk-color-yellow-800);
  }
  [class~="focus:fill-yellow-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-yellow-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-yellow-800:hover {
      fill: var(--zbk-color-yellow-800);
    }
  }
  [class~="active:fill-yellow-800"]:active {
    fill: var(--zbk-color-yellow-800);
  }
  [class~="disabled:fill-yellow-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-yellow-800);
  }
  .fill-yellow-900 {
    fill: var(--zbk-color-yellow-900);
  }
  [class~="focus:fill-yellow-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-yellow-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-yellow-900:hover {
      fill: var(--zbk-color-yellow-900);
    }
  }
  [class~="active:fill-yellow-900"]:active {
    fill: var(--zbk-color-yellow-900);
  }
  [class~="disabled:fill-yellow-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-yellow-900);
  }
  .fill-yellow-950 {
    fill: var(--zbk-color-yellow-950);
  }
  [class~="focus:fill-yellow-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-color-yellow-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-yellow-950:hover {
      fill: var(--zbk-color-yellow-950);
    }
  }
  [class~="active:fill-yellow-950"]:active {
    fill: var(--zbk-color-yellow-950);
  }
  [class~="disabled:fill-yellow-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-color-yellow-950);
  }
}
:root {
  --zbk-color-global-black: #131313;
  --zbk-color-global-white: #fefefe;
  --zbk-color-global-transparent: transparent;
}
@layer utilities {
  .ink-brand-50 {
    color: var(--zbk-brand-50);
  }
  [class~="focus:ink-brand-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-brand-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-brand-50:hover {
      color: var(--zbk-brand-50);
    }
  }
  [class~="active:ink-brand-50"]:active {
    color: var(--zbk-brand-50);
  }
  [class~="disabled:ink-brand-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-brand-50);
  }
  .canvas-brand-50 {
    background-color: var(--zbk-brand-50);
  }
  [class~="focus:canvas-brand-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-brand-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-brand-50:hover {
      background-color: var(--zbk-brand-50);
    }
  }
  [class~="active:canvas-brand-50"]:active {
    background-color: var(--zbk-brand-50);
  }
  [class~="disabled:canvas-brand-50"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-brand-50);
  }
  .border-brand-50 {
    border-color: var(--zbk-brand-50);
  }
  [class~="focus:border-brand-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-brand-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-brand-50:hover {
      border-color: var(--zbk-brand-50);
    }
  }
  [class~="active:border-brand-50"]:active {
    border-color: var(--zbk-brand-50);
  }
  [class~="disabled:border-brand-50"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-brand-50);
  }
  .fill-brand-50 {
    fill: var(--zbk-brand-50);
  }
  [class~="focus:fill-brand-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-brand-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-brand-50:hover {
      fill: var(--zbk-brand-50);
    }
  }
  [class~="active:fill-brand-50"]:active {
    fill: var(--zbk-brand-50);
  }
  [class~="disabled:fill-brand-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-brand-50);
  }
  .ink-brand-100 {
    color: var(--zbk-brand-100);
  }
  [class~="focus:ink-brand-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-brand-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-brand-100:hover {
      color: var(--zbk-brand-100);
    }
  }
  [class~="active:ink-brand-100"]:active {
    color: var(--zbk-brand-100);
  }
  [class~="disabled:ink-brand-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-brand-100);
  }
  .canvas-brand-100 {
    background-color: var(--zbk-brand-100);
  }
  [class~="focus:canvas-brand-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-brand-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-brand-100:hover {
      background-color: var(--zbk-brand-100);
    }
  }
  [class~="active:canvas-brand-100"]:active {
    background-color: var(--zbk-brand-100);
  }
  [class~="disabled:canvas-brand-100"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-brand-100);
  }
  .border-brand-100 {
    border-color: var(--zbk-brand-100);
  }
  [class~="focus:border-brand-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-brand-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-brand-100:hover {
      border-color: var(--zbk-brand-100);
    }
  }
  [class~="active:border-brand-100"]:active {
    border-color: var(--zbk-brand-100);
  }
  [class~="disabled:border-brand-100"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-brand-100);
  }
  .fill-brand-100 {
    fill: var(--zbk-brand-100);
  }
  [class~="focus:fill-brand-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-brand-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-brand-100:hover {
      fill: var(--zbk-brand-100);
    }
  }
  [class~="active:fill-brand-100"]:active {
    fill: var(--zbk-brand-100);
  }
  [class~="disabled:fill-brand-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-brand-100);
  }
  .ink-brand-200 {
    color: var(--zbk-brand-200);
  }
  [class~="focus:ink-brand-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-brand-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-brand-200:hover {
      color: var(--zbk-brand-200);
    }
  }
  [class~="active:ink-brand-200"]:active {
    color: var(--zbk-brand-200);
  }
  [class~="disabled:ink-brand-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-brand-200);
  }
  .canvas-brand-200 {
    background-color: var(--zbk-brand-200);
  }
  [class~="focus:canvas-brand-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-brand-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-brand-200:hover {
      background-color: var(--zbk-brand-200);
    }
  }
  [class~="active:canvas-brand-200"]:active {
    background-color: var(--zbk-brand-200);
  }
  [class~="disabled:canvas-brand-200"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-brand-200);
  }
  .border-brand-200 {
    border-color: var(--zbk-brand-200);
  }
  [class~="focus:border-brand-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-brand-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-brand-200:hover {
      border-color: var(--zbk-brand-200);
    }
  }
  [class~="active:border-brand-200"]:active {
    border-color: var(--zbk-brand-200);
  }
  [class~="disabled:border-brand-200"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-brand-200);
  }
  .fill-brand-200 {
    fill: var(--zbk-brand-200);
  }
  [class~="focus:fill-brand-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-brand-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-brand-200:hover {
      fill: var(--zbk-brand-200);
    }
  }
  [class~="active:fill-brand-200"]:active {
    fill: var(--zbk-brand-200);
  }
  [class~="disabled:fill-brand-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-brand-200);
  }
  .ink-brand-300 {
    color: var(--zbk-brand-300);
  }
  [class~="focus:ink-brand-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-brand-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-brand-300:hover {
      color: var(--zbk-brand-300);
    }
  }
  [class~="active:ink-brand-300"]:active {
    color: var(--zbk-brand-300);
  }
  [class~="disabled:ink-brand-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-brand-300);
  }
  .canvas-brand-300 {
    background-color: var(--zbk-brand-300);
  }
  [class~="focus:canvas-brand-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-brand-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-brand-300:hover {
      background-color: var(--zbk-brand-300);
    }
  }
  [class~="active:canvas-brand-300"]:active {
    background-color: var(--zbk-brand-300);
  }
  [class~="disabled:canvas-brand-300"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-brand-300);
  }
  .border-brand-300 {
    border-color: var(--zbk-brand-300);
  }
  [class~="focus:border-brand-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-brand-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-brand-300:hover {
      border-color: var(--zbk-brand-300);
    }
  }
  [class~="active:border-brand-300"]:active {
    border-color: var(--zbk-brand-300);
  }
  [class~="disabled:border-brand-300"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-brand-300);
  }
  .fill-brand-300 {
    fill: var(--zbk-brand-300);
  }
  [class~="focus:fill-brand-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-brand-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-brand-300:hover {
      fill: var(--zbk-brand-300);
    }
  }
  [class~="active:fill-brand-300"]:active {
    fill: var(--zbk-brand-300);
  }
  [class~="disabled:fill-brand-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-brand-300);
  }
  .ink-brand-400 {
    color: var(--zbk-brand-400);
  }
  [class~="focus:ink-brand-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-brand-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-brand-400:hover {
      color: var(--zbk-brand-400);
    }
  }
  [class~="active:ink-brand-400"]:active {
    color: var(--zbk-brand-400);
  }
  [class~="disabled:ink-brand-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-brand-400);
  }
  .canvas-brand-400 {
    background-color: var(--zbk-brand-400);
  }
  [class~="focus:canvas-brand-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-brand-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-brand-400:hover {
      background-color: var(--zbk-brand-400);
    }
  }
  [class~="active:canvas-brand-400"]:active {
    background-color: var(--zbk-brand-400);
  }
  [class~="disabled:canvas-brand-400"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-brand-400);
  }
  .border-brand-400 {
    border-color: var(--zbk-brand-400);
  }
  [class~="focus:border-brand-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-brand-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-brand-400:hover {
      border-color: var(--zbk-brand-400);
    }
  }
  [class~="active:border-brand-400"]:active {
    border-color: var(--zbk-brand-400);
  }
  [class~="disabled:border-brand-400"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-brand-400);
  }
  .fill-brand-400 {
    fill: var(--zbk-brand-400);
  }
  [class~="focus:fill-brand-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-brand-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-brand-400:hover {
      fill: var(--zbk-brand-400);
    }
  }
  [class~="active:fill-brand-400"]:active {
    fill: var(--zbk-brand-400);
  }
  [class~="disabled:fill-brand-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-brand-400);
  }
  .ink-brand-500 {
    color: var(--zbk-brand-500);
  }
  [class~="focus:ink-brand-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-brand-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-brand-500:hover {
      color: var(--zbk-brand-500);
    }
  }
  [class~="active:ink-brand-500"]:active {
    color: var(--zbk-brand-500);
  }
  [class~="disabled:ink-brand-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-brand-500);
  }
  .canvas-brand-500 {
    background-color: var(--zbk-brand-500);
  }
  [class~="focus:canvas-brand-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-brand-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-brand-500:hover {
      background-color: var(--zbk-brand-500);
    }
  }
  [class~="active:canvas-brand-500"]:active {
    background-color: var(--zbk-brand-500);
  }
  [class~="disabled:canvas-brand-500"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-brand-500);
  }
  .border-brand-500 {
    border-color: var(--zbk-brand-500);
  }
  [class~="focus:border-brand-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-brand-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-brand-500:hover {
      border-color: var(--zbk-brand-500);
    }
  }
  [class~="active:border-brand-500"]:active {
    border-color: var(--zbk-brand-500);
  }
  [class~="disabled:border-brand-500"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-brand-500);
  }
  .fill-brand-500 {
    fill: var(--zbk-brand-500);
  }
  [class~="focus:fill-brand-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-brand-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-brand-500:hover {
      fill: var(--zbk-brand-500);
    }
  }
  [class~="active:fill-brand-500"]:active {
    fill: var(--zbk-brand-500);
  }
  [class~="disabled:fill-brand-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-brand-500);
  }
  .ink-brand-600 {
    color: var(--zbk-brand-600);
  }
  [class~="focus:ink-brand-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-brand-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-brand-600:hover {
      color: var(--zbk-brand-600);
    }
  }
  [class~="active:ink-brand-600"]:active {
    color: var(--zbk-brand-600);
  }
  [class~="disabled:ink-brand-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-brand-600);
  }
  .canvas-brand-600 {
    background-color: var(--zbk-brand-600);
  }
  [class~="focus:canvas-brand-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-brand-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-brand-600:hover {
      background-color: var(--zbk-brand-600);
    }
  }
  [class~="active:canvas-brand-600"]:active {
    background-color: var(--zbk-brand-600);
  }
  [class~="disabled:canvas-brand-600"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-brand-600);
  }
  .border-brand-600 {
    border-color: var(--zbk-brand-600);
  }
  [class~="focus:border-brand-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-brand-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-brand-600:hover {
      border-color: var(--zbk-brand-600);
    }
  }
  [class~="active:border-brand-600"]:active {
    border-color: var(--zbk-brand-600);
  }
  [class~="disabled:border-brand-600"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-brand-600);
  }
  .fill-brand-600 {
    fill: var(--zbk-brand-600);
  }
  [class~="focus:fill-brand-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-brand-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-brand-600:hover {
      fill: var(--zbk-brand-600);
    }
  }
  [class~="active:fill-brand-600"]:active {
    fill: var(--zbk-brand-600);
  }
  [class~="disabled:fill-brand-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-brand-600);
  }
  .ink-brand-700 {
    color: var(--zbk-brand-700);
  }
  [class~="focus:ink-brand-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-brand-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-brand-700:hover {
      color: var(--zbk-brand-700);
    }
  }
  [class~="active:ink-brand-700"]:active {
    color: var(--zbk-brand-700);
  }
  [class~="disabled:ink-brand-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-brand-700);
  }
  .canvas-brand-700 {
    background-color: var(--zbk-brand-700);
  }
  [class~="focus:canvas-brand-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-brand-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-brand-700:hover {
      background-color: var(--zbk-brand-700);
    }
  }
  [class~="active:canvas-brand-700"]:active {
    background-color: var(--zbk-brand-700);
  }
  [class~="disabled:canvas-brand-700"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-brand-700);
  }
  .border-brand-700 {
    border-color: var(--zbk-brand-700);
  }
  [class~="focus:border-brand-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-brand-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-brand-700:hover {
      border-color: var(--zbk-brand-700);
    }
  }
  [class~="active:border-brand-700"]:active {
    border-color: var(--zbk-brand-700);
  }
  [class~="disabled:border-brand-700"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-brand-700);
  }
  .fill-brand-700 {
    fill: var(--zbk-brand-700);
  }
  [class~="focus:fill-brand-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-brand-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-brand-700:hover {
      fill: var(--zbk-brand-700);
    }
  }
  [class~="active:fill-brand-700"]:active {
    fill: var(--zbk-brand-700);
  }
  [class~="disabled:fill-brand-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-brand-700);
  }
  .ink-brand-800 {
    color: var(--zbk-brand-800);
  }
  [class~="focus:ink-brand-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-brand-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-brand-800:hover {
      color: var(--zbk-brand-800);
    }
  }
  [class~="active:ink-brand-800"]:active {
    color: var(--zbk-brand-800);
  }
  [class~="disabled:ink-brand-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-brand-800);
  }
  .canvas-brand-800 {
    background-color: var(--zbk-brand-800);
  }
  [class~="focus:canvas-brand-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-brand-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-brand-800:hover {
      background-color: var(--zbk-brand-800);
    }
  }
  [class~="active:canvas-brand-800"]:active {
    background-color: var(--zbk-brand-800);
  }
  [class~="disabled:canvas-brand-800"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-brand-800);
  }
  .border-brand-800 {
    border-color: var(--zbk-brand-800);
  }
  [class~="focus:border-brand-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-brand-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-brand-800:hover {
      border-color: var(--zbk-brand-800);
    }
  }
  [class~="active:border-brand-800"]:active {
    border-color: var(--zbk-brand-800);
  }
  [class~="disabled:border-brand-800"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-brand-800);
  }
  .fill-brand-800 {
    fill: var(--zbk-brand-800);
  }
  [class~="focus:fill-brand-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-brand-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-brand-800:hover {
      fill: var(--zbk-brand-800);
    }
  }
  [class~="active:fill-brand-800"]:active {
    fill: var(--zbk-brand-800);
  }
  [class~="disabled:fill-brand-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-brand-800);
  }
  .ink-brand-900 {
    color: var(--zbk-brand-900);
  }
  [class~="focus:ink-brand-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-brand-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-brand-900:hover {
      color: var(--zbk-brand-900);
    }
  }
  [class~="active:ink-brand-900"]:active {
    color: var(--zbk-brand-900);
  }
  [class~="disabled:ink-brand-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-brand-900);
  }
  .canvas-brand-900 {
    background-color: var(--zbk-brand-900);
  }
  [class~="focus:canvas-brand-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-brand-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-brand-900:hover {
      background-color: var(--zbk-brand-900);
    }
  }
  [class~="active:canvas-brand-900"]:active {
    background-color: var(--zbk-brand-900);
  }
  [class~="disabled:canvas-brand-900"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-brand-900);
  }
  .border-brand-900 {
    border-color: var(--zbk-brand-900);
  }
  [class~="focus:border-brand-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-brand-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-brand-900:hover {
      border-color: var(--zbk-brand-900);
    }
  }
  [class~="active:border-brand-900"]:active {
    border-color: var(--zbk-brand-900);
  }
  [class~="disabled:border-brand-900"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-brand-900);
  }
  .fill-brand-900 {
    fill: var(--zbk-brand-900);
  }
  [class~="focus:fill-brand-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-brand-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-brand-900:hover {
      fill: var(--zbk-brand-900);
    }
  }
  [class~="active:fill-brand-900"]:active {
    fill: var(--zbk-brand-900);
  }
  [class~="disabled:fill-brand-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-brand-900);
  }
  .ink-brand-950 {
    color: var(--zbk-brand-950);
  }
  [class~="focus:ink-brand-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-brand-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-brand-950:hover {
      color: var(--zbk-brand-950);
    }
  }
  [class~="active:ink-brand-950"]:active {
    color: var(--zbk-brand-950);
  }
  [class~="disabled:ink-brand-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-brand-950);
  }
  .canvas-brand-950 {
    background-color: var(--zbk-brand-950);
  }
  [class~="focus:canvas-brand-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-brand-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-brand-950:hover {
      background-color: var(--zbk-brand-950);
    }
  }
  [class~="active:canvas-brand-950"]:active {
    background-color: var(--zbk-brand-950);
  }
  [class~="disabled:canvas-brand-950"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-brand-950);
  }
  .border-brand-950 {
    border-color: var(--zbk-brand-950);
  }
  [class~="focus:border-brand-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-brand-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-brand-950:hover {
      border-color: var(--zbk-brand-950);
    }
  }
  [class~="active:border-brand-950"]:active {
    border-color: var(--zbk-brand-950);
  }
  [class~="disabled:border-brand-950"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-brand-950);
  }
  .fill-brand-950 {
    fill: var(--zbk-brand-950);
  }
  [class~="focus:fill-brand-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-brand-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-brand-950:hover {
      fill: var(--zbk-brand-950);
    }
  }
  [class~="active:fill-brand-950"]:active {
    fill: var(--zbk-brand-950);
  }
  [class~="disabled:fill-brand-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-brand-950);
  }
}
@layer utilities {
  .ink-accent-primary-50 {
    color: var(--zbk-accent-primary-50);
  }
  [class~="focus:ink-accent-primary-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-primary-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-primary-50:hover {
      color: var(--zbk-accent-primary-50);
    }
  }
  [class~="active:ink-accent-primary-50"]:active {
    color: var(--zbk-accent-primary-50);
  }
  [class~="disabled:ink-accent-primary-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-primary-50);
  }
  .canvas-accent-primary-50 {
    background-color: var(--zbk-accent-primary-50);
  }
  [class~="focus:canvas-accent-primary-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-accent-primary-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-primary-50:hover {
      background-color: var(--zbk-accent-primary-50);
    }
  }
  [class~="active:canvas-accent-primary-50"]:active {
    background-color: var(--zbk-accent-primary-50);
  }
  [class~="disabled:canvas-accent-primary-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-primary-50);
  }
  .border-accent-primary-50 {
    border-color: var(--zbk-accent-primary-50);
  }
  [class~="focus:border-accent-primary-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-accent-primary-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-primary-50:hover {
      border-color: var(--zbk-accent-primary-50);
    }
  }
  [class~="active:border-accent-primary-50"]:active {
    border-color: var(--zbk-accent-primary-50);
  }
  [class~="disabled:border-accent-primary-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-primary-50);
  }
  .fill-accent-primary-50 {
    fill: var(--zbk-accent-primary-50);
  }
  [class~="focus:fill-accent-primary-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-primary-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-primary-50:hover {
      fill: var(--zbk-accent-primary-50);
    }
  }
  [class~="active:fill-accent-primary-50"]:active {
    fill: var(--zbk-accent-primary-50);
  }
  [class~="disabled:fill-accent-primary-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-primary-50);
  }
  .ink-accent-primary-100 {
    color: var(--zbk-accent-primary-100);
  }
  [class~="focus:ink-accent-primary-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-primary-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-primary-100:hover {
      color: var(--zbk-accent-primary-100);
    }
  }
  [class~="active:ink-accent-primary-100"]:active {
    color: var(--zbk-accent-primary-100);
  }
  [class~="disabled:ink-accent-primary-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-primary-100);
  }
  .canvas-accent-primary-100 {
    background-color: var(--zbk-accent-primary-100);
  }
  [class~="focus:canvas-accent-primary-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-accent-primary-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-primary-100:hover {
      background-color: var(--zbk-accent-primary-100);
    }
  }
  [class~="active:canvas-accent-primary-100"]:active {
    background-color: var(--zbk-accent-primary-100);
  }
  [class~="disabled:canvas-accent-primary-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-primary-100);
  }
  .border-accent-primary-100 {
    border-color: var(--zbk-accent-primary-100);
  }
  [class~="focus:border-accent-primary-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-accent-primary-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-primary-100:hover {
      border-color: var(--zbk-accent-primary-100);
    }
  }
  [class~="active:border-accent-primary-100"]:active {
    border-color: var(--zbk-accent-primary-100);
  }
  [class~="disabled:border-accent-primary-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-primary-100);
  }
  .fill-accent-primary-100 {
    fill: var(--zbk-accent-primary-100);
  }
  [class~="focus:fill-accent-primary-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-primary-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-primary-100:hover {
      fill: var(--zbk-accent-primary-100);
    }
  }
  [class~="active:fill-accent-primary-100"]:active {
    fill: var(--zbk-accent-primary-100);
  }
  [class~="disabled:fill-accent-primary-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-primary-100);
  }
  .ink-accent-primary-200 {
    color: var(--zbk-accent-primary-200);
  }
  [class~="focus:ink-accent-primary-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-primary-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-primary-200:hover {
      color: var(--zbk-accent-primary-200);
    }
  }
  [class~="active:ink-accent-primary-200"]:active {
    color: var(--zbk-accent-primary-200);
  }
  [class~="disabled:ink-accent-primary-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-primary-200);
  }
  .canvas-accent-primary-200 {
    background-color: var(--zbk-accent-primary-200);
  }
  [class~="focus:canvas-accent-primary-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-accent-primary-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-primary-200:hover {
      background-color: var(--zbk-accent-primary-200);
    }
  }
  [class~="active:canvas-accent-primary-200"]:active {
    background-color: var(--zbk-accent-primary-200);
  }
  [class~="disabled:canvas-accent-primary-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-primary-200);
  }
  .border-accent-primary-200 {
    border-color: var(--zbk-accent-primary-200);
  }
  [class~="focus:border-accent-primary-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-accent-primary-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-primary-200:hover {
      border-color: var(--zbk-accent-primary-200);
    }
  }
  [class~="active:border-accent-primary-200"]:active {
    border-color: var(--zbk-accent-primary-200);
  }
  [class~="disabled:border-accent-primary-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-primary-200);
  }
  .fill-accent-primary-200 {
    fill: var(--zbk-accent-primary-200);
  }
  [class~="focus:fill-accent-primary-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-primary-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-primary-200:hover {
      fill: var(--zbk-accent-primary-200);
    }
  }
  [class~="active:fill-accent-primary-200"]:active {
    fill: var(--zbk-accent-primary-200);
  }
  [class~="disabled:fill-accent-primary-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-primary-200);
  }
  .ink-accent-primary-300 {
    color: var(--zbk-accent-primary-300);
  }
  [class~="focus:ink-accent-primary-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-primary-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-primary-300:hover {
      color: var(--zbk-accent-primary-300);
    }
  }
  [class~="active:ink-accent-primary-300"]:active {
    color: var(--zbk-accent-primary-300);
  }
  [class~="disabled:ink-accent-primary-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-primary-300);
  }
  .canvas-accent-primary-300 {
    background-color: var(--zbk-accent-primary-300);
  }
  [class~="focus:canvas-accent-primary-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-accent-primary-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-primary-300:hover {
      background-color: var(--zbk-accent-primary-300);
    }
  }
  [class~="active:canvas-accent-primary-300"]:active {
    background-color: var(--zbk-accent-primary-300);
  }
  [class~="disabled:canvas-accent-primary-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-primary-300);
  }
  .border-accent-primary-300 {
    border-color: var(--zbk-accent-primary-300);
  }
  [class~="focus:border-accent-primary-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-accent-primary-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-primary-300:hover {
      border-color: var(--zbk-accent-primary-300);
    }
  }
  [class~="active:border-accent-primary-300"]:active {
    border-color: var(--zbk-accent-primary-300);
  }
  [class~="disabled:border-accent-primary-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-primary-300);
  }
  .fill-accent-primary-300 {
    fill: var(--zbk-accent-primary-300);
  }
  [class~="focus:fill-accent-primary-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-primary-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-primary-300:hover {
      fill: var(--zbk-accent-primary-300);
    }
  }
  [class~="active:fill-accent-primary-300"]:active {
    fill: var(--zbk-accent-primary-300);
  }
  [class~="disabled:fill-accent-primary-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-primary-300);
  }
  .ink-accent-primary-400 {
    color: var(--zbk-accent-primary-400);
  }
  [class~="focus:ink-accent-primary-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-primary-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-primary-400:hover {
      color: var(--zbk-accent-primary-400);
    }
  }
  [class~="active:ink-accent-primary-400"]:active {
    color: var(--zbk-accent-primary-400);
  }
  [class~="disabled:ink-accent-primary-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-primary-400);
  }
  .canvas-accent-primary-400 {
    background-color: var(--zbk-accent-primary-400);
  }
  [class~="focus:canvas-accent-primary-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-accent-primary-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-primary-400:hover {
      background-color: var(--zbk-accent-primary-400);
    }
  }
  [class~="active:canvas-accent-primary-400"]:active {
    background-color: var(--zbk-accent-primary-400);
  }
  [class~="disabled:canvas-accent-primary-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-primary-400);
  }
  .border-accent-primary-400 {
    border-color: var(--zbk-accent-primary-400);
  }
  [class~="focus:border-accent-primary-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-accent-primary-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-primary-400:hover {
      border-color: var(--zbk-accent-primary-400);
    }
  }
  [class~="active:border-accent-primary-400"]:active {
    border-color: var(--zbk-accent-primary-400);
  }
  [class~="disabled:border-accent-primary-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-primary-400);
  }
  .fill-accent-primary-400 {
    fill: var(--zbk-accent-primary-400);
  }
  [class~="focus:fill-accent-primary-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-primary-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-primary-400:hover {
      fill: var(--zbk-accent-primary-400);
    }
  }
  [class~="active:fill-accent-primary-400"]:active {
    fill: var(--zbk-accent-primary-400);
  }
  [class~="disabled:fill-accent-primary-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-primary-400);
  }
  .ink-accent-primary-500 {
    color: var(--zbk-accent-primary-500);
  }
  [class~="focus:ink-accent-primary-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-primary-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-primary-500:hover {
      color: var(--zbk-accent-primary-500);
    }
  }
  [class~="active:ink-accent-primary-500"]:active {
    color: var(--zbk-accent-primary-500);
  }
  [class~="disabled:ink-accent-primary-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-primary-500);
  }
  .canvas-accent-primary-500 {
    background-color: var(--zbk-accent-primary-500);
  }
  [class~="focus:canvas-accent-primary-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-accent-primary-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-primary-500:hover {
      background-color: var(--zbk-accent-primary-500);
    }
  }
  [class~="active:canvas-accent-primary-500"]:active {
    background-color: var(--zbk-accent-primary-500);
  }
  [class~="disabled:canvas-accent-primary-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-primary-500);
  }
  .border-accent-primary-500 {
    border-color: var(--zbk-accent-primary-500);
  }
  [class~="focus:border-accent-primary-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-accent-primary-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-primary-500:hover {
      border-color: var(--zbk-accent-primary-500);
    }
  }
  [class~="active:border-accent-primary-500"]:active {
    border-color: var(--zbk-accent-primary-500);
  }
  [class~="disabled:border-accent-primary-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-primary-500);
  }
  .fill-accent-primary-500 {
    fill: var(--zbk-accent-primary-500);
  }
  [class~="focus:fill-accent-primary-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-primary-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-primary-500:hover {
      fill: var(--zbk-accent-primary-500);
    }
  }
  [class~="active:fill-accent-primary-500"]:active {
    fill: var(--zbk-accent-primary-500);
  }
  [class~="disabled:fill-accent-primary-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-primary-500);
  }
  .ink-accent-primary-600 {
    color: var(--zbk-accent-primary-600);
  }
  [class~="focus:ink-accent-primary-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-primary-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-primary-600:hover {
      color: var(--zbk-accent-primary-600);
    }
  }
  [class~="active:ink-accent-primary-600"]:active {
    color: var(--zbk-accent-primary-600);
  }
  [class~="disabled:ink-accent-primary-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-primary-600);
  }
  .canvas-accent-primary-600 {
    background-color: var(--zbk-accent-primary-600);
  }
  [class~="focus:canvas-accent-primary-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-accent-primary-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-primary-600:hover {
      background-color: var(--zbk-accent-primary-600);
    }
  }
  [class~="active:canvas-accent-primary-600"]:active {
    background-color: var(--zbk-accent-primary-600);
  }
  [class~="disabled:canvas-accent-primary-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-primary-600);
  }
  .border-accent-primary-600 {
    border-color: var(--zbk-accent-primary-600);
  }
  [class~="focus:border-accent-primary-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-accent-primary-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-primary-600:hover {
      border-color: var(--zbk-accent-primary-600);
    }
  }
  [class~="active:border-accent-primary-600"]:active {
    border-color: var(--zbk-accent-primary-600);
  }
  [class~="disabled:border-accent-primary-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-primary-600);
  }
  .fill-accent-primary-600 {
    fill: var(--zbk-accent-primary-600);
  }
  [class~="focus:fill-accent-primary-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-primary-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-primary-600:hover {
      fill: var(--zbk-accent-primary-600);
    }
  }
  [class~="active:fill-accent-primary-600"]:active {
    fill: var(--zbk-accent-primary-600);
  }
  [class~="disabled:fill-accent-primary-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-primary-600);
  }
  .ink-accent-primary-700 {
    color: var(--zbk-accent-primary-700);
  }
  [class~="focus:ink-accent-primary-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-primary-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-primary-700:hover {
      color: var(--zbk-accent-primary-700);
    }
  }
  [class~="active:ink-accent-primary-700"]:active {
    color: var(--zbk-accent-primary-700);
  }
  [class~="disabled:ink-accent-primary-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-primary-700);
  }
  .canvas-accent-primary-700 {
    background-color: var(--zbk-accent-primary-700);
  }
  [class~="focus:canvas-accent-primary-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-accent-primary-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-primary-700:hover {
      background-color: var(--zbk-accent-primary-700);
    }
  }
  [class~="active:canvas-accent-primary-700"]:active {
    background-color: var(--zbk-accent-primary-700);
  }
  [class~="disabled:canvas-accent-primary-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-primary-700);
  }
  .border-accent-primary-700 {
    border-color: var(--zbk-accent-primary-700);
  }
  [class~="focus:border-accent-primary-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-accent-primary-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-primary-700:hover {
      border-color: var(--zbk-accent-primary-700);
    }
  }
  [class~="active:border-accent-primary-700"]:active {
    border-color: var(--zbk-accent-primary-700);
  }
  [class~="disabled:border-accent-primary-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-primary-700);
  }
  .fill-accent-primary-700 {
    fill: var(--zbk-accent-primary-700);
  }
  [class~="focus:fill-accent-primary-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-primary-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-primary-700:hover {
      fill: var(--zbk-accent-primary-700);
    }
  }
  [class~="active:fill-accent-primary-700"]:active {
    fill: var(--zbk-accent-primary-700);
  }
  [class~="disabled:fill-accent-primary-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-primary-700);
  }
  .ink-accent-primary-800 {
    color: var(--zbk-accent-primary-800);
  }
  [class~="focus:ink-accent-primary-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-primary-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-primary-800:hover {
      color: var(--zbk-accent-primary-800);
    }
  }
  [class~="active:ink-accent-primary-800"]:active {
    color: var(--zbk-accent-primary-800);
  }
  [class~="disabled:ink-accent-primary-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-primary-800);
  }
  .canvas-accent-primary-800 {
    background-color: var(--zbk-accent-primary-800);
  }
  [class~="focus:canvas-accent-primary-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-accent-primary-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-primary-800:hover {
      background-color: var(--zbk-accent-primary-800);
    }
  }
  [class~="active:canvas-accent-primary-800"]:active {
    background-color: var(--zbk-accent-primary-800);
  }
  [class~="disabled:canvas-accent-primary-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-primary-800);
  }
  .border-accent-primary-800 {
    border-color: var(--zbk-accent-primary-800);
  }
  [class~="focus:border-accent-primary-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-accent-primary-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-primary-800:hover {
      border-color: var(--zbk-accent-primary-800);
    }
  }
  [class~="active:border-accent-primary-800"]:active {
    border-color: var(--zbk-accent-primary-800);
  }
  [class~="disabled:border-accent-primary-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-primary-800);
  }
  .fill-accent-primary-800 {
    fill: var(--zbk-accent-primary-800);
  }
  [class~="focus:fill-accent-primary-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-primary-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-primary-800:hover {
      fill: var(--zbk-accent-primary-800);
    }
  }
  [class~="active:fill-accent-primary-800"]:active {
    fill: var(--zbk-accent-primary-800);
  }
  [class~="disabled:fill-accent-primary-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-primary-800);
  }
  .ink-accent-primary-900 {
    color: var(--zbk-accent-primary-900);
  }
  [class~="focus:ink-accent-primary-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-primary-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-primary-900:hover {
      color: var(--zbk-accent-primary-900);
    }
  }
  [class~="active:ink-accent-primary-900"]:active {
    color: var(--zbk-accent-primary-900);
  }
  [class~="disabled:ink-accent-primary-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-primary-900);
  }
  .canvas-accent-primary-900 {
    background-color: var(--zbk-accent-primary-900);
  }
  [class~="focus:canvas-accent-primary-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-accent-primary-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-primary-900:hover {
      background-color: var(--zbk-accent-primary-900);
    }
  }
  [class~="active:canvas-accent-primary-900"]:active {
    background-color: var(--zbk-accent-primary-900);
  }
  [class~="disabled:canvas-accent-primary-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-primary-900);
  }
  .border-accent-primary-900 {
    border-color: var(--zbk-accent-primary-900);
  }
  [class~="focus:border-accent-primary-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-accent-primary-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-primary-900:hover {
      border-color: var(--zbk-accent-primary-900);
    }
  }
  [class~="active:border-accent-primary-900"]:active {
    border-color: var(--zbk-accent-primary-900);
  }
  [class~="disabled:border-accent-primary-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-primary-900);
  }
  .fill-accent-primary-900 {
    fill: var(--zbk-accent-primary-900);
  }
  [class~="focus:fill-accent-primary-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-primary-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-primary-900:hover {
      fill: var(--zbk-accent-primary-900);
    }
  }
  [class~="active:fill-accent-primary-900"]:active {
    fill: var(--zbk-accent-primary-900);
  }
  [class~="disabled:fill-accent-primary-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-primary-900);
  }
  .ink-accent-primary-950 {
    color: var(--zbk-accent-primary-950);
  }
  [class~="focus:ink-accent-primary-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-primary-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-primary-950:hover {
      color: var(--zbk-accent-primary-950);
    }
  }
  [class~="active:ink-accent-primary-950"]:active {
    color: var(--zbk-accent-primary-950);
  }
  [class~="disabled:ink-accent-primary-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-primary-950);
  }
  .canvas-accent-primary-950 {
    background-color: var(--zbk-accent-primary-950);
  }
  [class~="focus:canvas-accent-primary-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-accent-primary-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-primary-950:hover {
      background-color: var(--zbk-accent-primary-950);
    }
  }
  [class~="active:canvas-accent-primary-950"]:active {
    background-color: var(--zbk-accent-primary-950);
  }
  [class~="disabled:canvas-accent-primary-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-primary-950);
  }
  .border-accent-primary-950 {
    border-color: var(--zbk-accent-primary-950);
  }
  [class~="focus:border-accent-primary-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-accent-primary-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-primary-950:hover {
      border-color: var(--zbk-accent-primary-950);
    }
  }
  [class~="active:border-accent-primary-950"]:active {
    border-color: var(--zbk-accent-primary-950);
  }
  [class~="disabled:border-accent-primary-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-primary-950);
  }
  .fill-accent-primary-950 {
    fill: var(--zbk-accent-primary-950);
  }
  [class~="focus:fill-accent-primary-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-primary-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-primary-950:hover {
      fill: var(--zbk-accent-primary-950);
    }
  }
  [class~="active:fill-accent-primary-950"]:active {
    fill: var(--zbk-accent-primary-950);
  }
  [class~="disabled:fill-accent-primary-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-primary-950);
  }
}
@layer utilities {
  .ink-accent-secondary-50 {
    color: var(--zbk-accent-secondary-50);
  }
  [class~="focus:ink-accent-secondary-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-secondary-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-secondary-50:hover {
      color: var(--zbk-accent-secondary-50);
    }
  }
  [class~="active:ink-accent-secondary-50"]:active {
    color: var(--zbk-accent-secondary-50);
  }
  [class~="disabled:ink-accent-secondary-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-secondary-50);
  }
  .canvas-accent-secondary-50 {
    background-color: var(--zbk-accent-secondary-50);
  }
  [class~="focus:canvas-accent-secondary-50"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-accent-secondary-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-secondary-50:hover {
      background-color: var(--zbk-accent-secondary-50);
    }
  }
  [class~="active:canvas-accent-secondary-50"]:active {
    background-color: var(--zbk-accent-secondary-50);
  }
  [class~="disabled:canvas-accent-secondary-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-secondary-50);
  }
  .border-accent-secondary-50 {
    border-color: var(--zbk-accent-secondary-50);
  }
  [class~="focus:border-accent-secondary-50"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-accent-secondary-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-secondary-50:hover {
      border-color: var(--zbk-accent-secondary-50);
    }
  }
  [class~="active:border-accent-secondary-50"]:active {
    border-color: var(--zbk-accent-secondary-50);
  }
  [class~="disabled:border-accent-secondary-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-secondary-50);
  }
  .fill-accent-secondary-50 {
    fill: var(--zbk-accent-secondary-50);
  }
  [class~="focus:fill-accent-secondary-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-secondary-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-secondary-50:hover {
      fill: var(--zbk-accent-secondary-50);
    }
  }
  [class~="active:fill-accent-secondary-50"]:active {
    fill: var(--zbk-accent-secondary-50);
  }
  [class~="disabled:fill-accent-secondary-50"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-secondary-50);
  }
  .ink-accent-secondary-100 {
    color: var(--zbk-accent-secondary-100);
  }
  [class~="focus:ink-accent-secondary-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-secondary-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-secondary-100:hover {
      color: var(--zbk-accent-secondary-100);
    }
  }
  [class~="active:ink-accent-secondary-100"]:active {
    color: var(--zbk-accent-secondary-100);
  }
  [class~="disabled:ink-accent-secondary-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-secondary-100);
  }
  .canvas-accent-secondary-100 {
    background-color: var(--zbk-accent-secondary-100);
  }
  [class~="focus:canvas-accent-secondary-100"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-accent-secondary-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-secondary-100:hover {
      background-color: var(--zbk-accent-secondary-100);
    }
  }
  [class~="active:canvas-accent-secondary-100"]:active {
    background-color: var(--zbk-accent-secondary-100);
  }
  [class~="disabled:canvas-accent-secondary-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-secondary-100);
  }
  .border-accent-secondary-100 {
    border-color: var(--zbk-accent-secondary-100);
  }
  [class~="focus:border-accent-secondary-100"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-accent-secondary-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-secondary-100:hover {
      border-color: var(--zbk-accent-secondary-100);
    }
  }
  [class~="active:border-accent-secondary-100"]:active {
    border-color: var(--zbk-accent-secondary-100);
  }
  [class~="disabled:border-accent-secondary-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-secondary-100);
  }
  .fill-accent-secondary-100 {
    fill: var(--zbk-accent-secondary-100);
  }
  [class~="focus:fill-accent-secondary-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-secondary-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-secondary-100:hover {
      fill: var(--zbk-accent-secondary-100);
    }
  }
  [class~="active:fill-accent-secondary-100"]:active {
    fill: var(--zbk-accent-secondary-100);
  }
  [class~="disabled:fill-accent-secondary-100"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-secondary-100);
  }
  .ink-accent-secondary-200 {
    color: var(--zbk-accent-secondary-200);
  }
  [class~="focus:ink-accent-secondary-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-secondary-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-secondary-200:hover {
      color: var(--zbk-accent-secondary-200);
    }
  }
  [class~="active:ink-accent-secondary-200"]:active {
    color: var(--zbk-accent-secondary-200);
  }
  [class~="disabled:ink-accent-secondary-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-secondary-200);
  }
  .canvas-accent-secondary-200 {
    background-color: var(--zbk-accent-secondary-200);
  }
  [class~="focus:canvas-accent-secondary-200"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-accent-secondary-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-secondary-200:hover {
      background-color: var(--zbk-accent-secondary-200);
    }
  }
  [class~="active:canvas-accent-secondary-200"]:active {
    background-color: var(--zbk-accent-secondary-200);
  }
  [class~="disabled:canvas-accent-secondary-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-secondary-200);
  }
  .border-accent-secondary-200 {
    border-color: var(--zbk-accent-secondary-200);
  }
  [class~="focus:border-accent-secondary-200"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-accent-secondary-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-secondary-200:hover {
      border-color: var(--zbk-accent-secondary-200);
    }
  }
  [class~="active:border-accent-secondary-200"]:active {
    border-color: var(--zbk-accent-secondary-200);
  }
  [class~="disabled:border-accent-secondary-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-secondary-200);
  }
  .fill-accent-secondary-200 {
    fill: var(--zbk-accent-secondary-200);
  }
  [class~="focus:fill-accent-secondary-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-secondary-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-secondary-200:hover {
      fill: var(--zbk-accent-secondary-200);
    }
  }
  [class~="active:fill-accent-secondary-200"]:active {
    fill: var(--zbk-accent-secondary-200);
  }
  [class~="disabled:fill-accent-secondary-200"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-secondary-200);
  }
  .ink-accent-secondary-300 {
    color: var(--zbk-accent-secondary-300);
  }
  [class~="focus:ink-accent-secondary-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-secondary-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-secondary-300:hover {
      color: var(--zbk-accent-secondary-300);
    }
  }
  [class~="active:ink-accent-secondary-300"]:active {
    color: var(--zbk-accent-secondary-300);
  }
  [class~="disabled:ink-accent-secondary-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-secondary-300);
  }
  .canvas-accent-secondary-300 {
    background-color: var(--zbk-accent-secondary-300);
  }
  [class~="focus:canvas-accent-secondary-300"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-accent-secondary-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-secondary-300:hover {
      background-color: var(--zbk-accent-secondary-300);
    }
  }
  [class~="active:canvas-accent-secondary-300"]:active {
    background-color: var(--zbk-accent-secondary-300);
  }
  [class~="disabled:canvas-accent-secondary-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-secondary-300);
  }
  .border-accent-secondary-300 {
    border-color: var(--zbk-accent-secondary-300);
  }
  [class~="focus:border-accent-secondary-300"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-accent-secondary-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-secondary-300:hover {
      border-color: var(--zbk-accent-secondary-300);
    }
  }
  [class~="active:border-accent-secondary-300"]:active {
    border-color: var(--zbk-accent-secondary-300);
  }
  [class~="disabled:border-accent-secondary-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-secondary-300);
  }
  .fill-accent-secondary-300 {
    fill: var(--zbk-accent-secondary-300);
  }
  [class~="focus:fill-accent-secondary-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-secondary-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-secondary-300:hover {
      fill: var(--zbk-accent-secondary-300);
    }
  }
  [class~="active:fill-accent-secondary-300"]:active {
    fill: var(--zbk-accent-secondary-300);
  }
  [class~="disabled:fill-accent-secondary-300"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-secondary-300);
  }
  .ink-accent-secondary-400 {
    color: var(--zbk-accent-secondary-400);
  }
  [class~="focus:ink-accent-secondary-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-secondary-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-secondary-400:hover {
      color: var(--zbk-accent-secondary-400);
    }
  }
  [class~="active:ink-accent-secondary-400"]:active {
    color: var(--zbk-accent-secondary-400);
  }
  [class~="disabled:ink-accent-secondary-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-secondary-400);
  }
  .canvas-accent-secondary-400 {
    background-color: var(--zbk-accent-secondary-400);
  }
  [class~="focus:canvas-accent-secondary-400"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-accent-secondary-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-secondary-400:hover {
      background-color: var(--zbk-accent-secondary-400);
    }
  }
  [class~="active:canvas-accent-secondary-400"]:active {
    background-color: var(--zbk-accent-secondary-400);
  }
  [class~="disabled:canvas-accent-secondary-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-secondary-400);
  }
  .border-accent-secondary-400 {
    border-color: var(--zbk-accent-secondary-400);
  }
  [class~="focus:border-accent-secondary-400"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-accent-secondary-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-secondary-400:hover {
      border-color: var(--zbk-accent-secondary-400);
    }
  }
  [class~="active:border-accent-secondary-400"]:active {
    border-color: var(--zbk-accent-secondary-400);
  }
  [class~="disabled:border-accent-secondary-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-secondary-400);
  }
  .fill-accent-secondary-400 {
    fill: var(--zbk-accent-secondary-400);
  }
  [class~="focus:fill-accent-secondary-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-secondary-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-secondary-400:hover {
      fill: var(--zbk-accent-secondary-400);
    }
  }
  [class~="active:fill-accent-secondary-400"]:active {
    fill: var(--zbk-accent-secondary-400);
  }
  [class~="disabled:fill-accent-secondary-400"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-secondary-400);
  }
  .ink-accent-secondary-500 {
    color: var(--zbk-accent-secondary-500);
  }
  [class~="focus:ink-accent-secondary-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-secondary-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-secondary-500:hover {
      color: var(--zbk-accent-secondary-500);
    }
  }
  [class~="active:ink-accent-secondary-500"]:active {
    color: var(--zbk-accent-secondary-500);
  }
  [class~="disabled:ink-accent-secondary-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-secondary-500);
  }
  .canvas-accent-secondary-500 {
    background-color: var(--zbk-accent-secondary-500);
  }
  [class~="focus:canvas-accent-secondary-500"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-accent-secondary-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-secondary-500:hover {
      background-color: var(--zbk-accent-secondary-500);
    }
  }
  [class~="active:canvas-accent-secondary-500"]:active {
    background-color: var(--zbk-accent-secondary-500);
  }
  [class~="disabled:canvas-accent-secondary-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-secondary-500);
  }
  .border-accent-secondary-500 {
    border-color: var(--zbk-accent-secondary-500);
  }
  [class~="focus:border-accent-secondary-500"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-accent-secondary-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-secondary-500:hover {
      border-color: var(--zbk-accent-secondary-500);
    }
  }
  [class~="active:border-accent-secondary-500"]:active {
    border-color: var(--zbk-accent-secondary-500);
  }
  [class~="disabled:border-accent-secondary-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-secondary-500);
  }
  .fill-accent-secondary-500 {
    fill: var(--zbk-accent-secondary-500);
  }
  [class~="focus:fill-accent-secondary-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-secondary-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-secondary-500:hover {
      fill: var(--zbk-accent-secondary-500);
    }
  }
  [class~="active:fill-accent-secondary-500"]:active {
    fill: var(--zbk-accent-secondary-500);
  }
  [class~="disabled:fill-accent-secondary-500"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-secondary-500);
  }
  .ink-accent-secondary-600 {
    color: var(--zbk-accent-secondary-600);
  }
  [class~="focus:ink-accent-secondary-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-secondary-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-secondary-600:hover {
      color: var(--zbk-accent-secondary-600);
    }
  }
  [class~="active:ink-accent-secondary-600"]:active {
    color: var(--zbk-accent-secondary-600);
  }
  [class~="disabled:ink-accent-secondary-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-secondary-600);
  }
  .canvas-accent-secondary-600 {
    background-color: var(--zbk-accent-secondary-600);
  }
  [class~="focus:canvas-accent-secondary-600"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-accent-secondary-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-secondary-600:hover {
      background-color: var(--zbk-accent-secondary-600);
    }
  }
  [class~="active:canvas-accent-secondary-600"]:active {
    background-color: var(--zbk-accent-secondary-600);
  }
  [class~="disabled:canvas-accent-secondary-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-secondary-600);
  }
  .border-accent-secondary-600 {
    border-color: var(--zbk-accent-secondary-600);
  }
  [class~="focus:border-accent-secondary-600"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-accent-secondary-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-secondary-600:hover {
      border-color: var(--zbk-accent-secondary-600);
    }
  }
  [class~="active:border-accent-secondary-600"]:active {
    border-color: var(--zbk-accent-secondary-600);
  }
  [class~="disabled:border-accent-secondary-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-secondary-600);
  }
  .fill-accent-secondary-600 {
    fill: var(--zbk-accent-secondary-600);
  }
  [class~="focus:fill-accent-secondary-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-secondary-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-secondary-600:hover {
      fill: var(--zbk-accent-secondary-600);
    }
  }
  [class~="active:fill-accent-secondary-600"]:active {
    fill: var(--zbk-accent-secondary-600);
  }
  [class~="disabled:fill-accent-secondary-600"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-secondary-600);
  }
  .ink-accent-secondary-700 {
    color: var(--zbk-accent-secondary-700);
  }
  [class~="focus:ink-accent-secondary-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-secondary-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-secondary-700:hover {
      color: var(--zbk-accent-secondary-700);
    }
  }
  [class~="active:ink-accent-secondary-700"]:active {
    color: var(--zbk-accent-secondary-700);
  }
  [class~="disabled:ink-accent-secondary-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-secondary-700);
  }
  .canvas-accent-secondary-700 {
    background-color: var(--zbk-accent-secondary-700);
  }
  [class~="focus:canvas-accent-secondary-700"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-accent-secondary-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-secondary-700:hover {
      background-color: var(--zbk-accent-secondary-700);
    }
  }
  [class~="active:canvas-accent-secondary-700"]:active {
    background-color: var(--zbk-accent-secondary-700);
  }
  [class~="disabled:canvas-accent-secondary-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-secondary-700);
  }
  .border-accent-secondary-700 {
    border-color: var(--zbk-accent-secondary-700);
  }
  [class~="focus:border-accent-secondary-700"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-accent-secondary-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-secondary-700:hover {
      border-color: var(--zbk-accent-secondary-700);
    }
  }
  [class~="active:border-accent-secondary-700"]:active {
    border-color: var(--zbk-accent-secondary-700);
  }
  [class~="disabled:border-accent-secondary-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-secondary-700);
  }
  .fill-accent-secondary-700 {
    fill: var(--zbk-accent-secondary-700);
  }
  [class~="focus:fill-accent-secondary-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-secondary-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-secondary-700:hover {
      fill: var(--zbk-accent-secondary-700);
    }
  }
  [class~="active:fill-accent-secondary-700"]:active {
    fill: var(--zbk-accent-secondary-700);
  }
  [class~="disabled:fill-accent-secondary-700"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-secondary-700);
  }
  .ink-accent-secondary-800 {
    color: var(--zbk-accent-secondary-800);
  }
  [class~="focus:ink-accent-secondary-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-secondary-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-secondary-800:hover {
      color: var(--zbk-accent-secondary-800);
    }
  }
  [class~="active:ink-accent-secondary-800"]:active {
    color: var(--zbk-accent-secondary-800);
  }
  [class~="disabled:ink-accent-secondary-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-secondary-800);
  }
  .canvas-accent-secondary-800 {
    background-color: var(--zbk-accent-secondary-800);
  }
  [class~="focus:canvas-accent-secondary-800"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-accent-secondary-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-secondary-800:hover {
      background-color: var(--zbk-accent-secondary-800);
    }
  }
  [class~="active:canvas-accent-secondary-800"]:active {
    background-color: var(--zbk-accent-secondary-800);
  }
  [class~="disabled:canvas-accent-secondary-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-secondary-800);
  }
  .border-accent-secondary-800 {
    border-color: var(--zbk-accent-secondary-800);
  }
  [class~="focus:border-accent-secondary-800"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-accent-secondary-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-secondary-800:hover {
      border-color: var(--zbk-accent-secondary-800);
    }
  }
  [class~="active:border-accent-secondary-800"]:active {
    border-color: var(--zbk-accent-secondary-800);
  }
  [class~="disabled:border-accent-secondary-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-secondary-800);
  }
  .fill-accent-secondary-800 {
    fill: var(--zbk-accent-secondary-800);
  }
  [class~="focus:fill-accent-secondary-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-secondary-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-secondary-800:hover {
      fill: var(--zbk-accent-secondary-800);
    }
  }
  [class~="active:fill-accent-secondary-800"]:active {
    fill: var(--zbk-accent-secondary-800);
  }
  [class~="disabled:fill-accent-secondary-800"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-secondary-800);
  }
  .ink-accent-secondary-900 {
    color: var(--zbk-accent-secondary-900);
  }
  [class~="focus:ink-accent-secondary-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-secondary-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-secondary-900:hover {
      color: var(--zbk-accent-secondary-900);
    }
  }
  [class~="active:ink-accent-secondary-900"]:active {
    color: var(--zbk-accent-secondary-900);
  }
  [class~="disabled:ink-accent-secondary-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-secondary-900);
  }
  .canvas-accent-secondary-900 {
    background-color: var(--zbk-accent-secondary-900);
  }
  [class~="focus:canvas-accent-secondary-900"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-accent-secondary-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-secondary-900:hover {
      background-color: var(--zbk-accent-secondary-900);
    }
  }
  [class~="active:canvas-accent-secondary-900"]:active {
    background-color: var(--zbk-accent-secondary-900);
  }
  [class~="disabled:canvas-accent-secondary-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-secondary-900);
  }
  .border-accent-secondary-900 {
    border-color: var(--zbk-accent-secondary-900);
  }
  [class~="focus:border-accent-secondary-900"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-accent-secondary-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-secondary-900:hover {
      border-color: var(--zbk-accent-secondary-900);
    }
  }
  [class~="active:border-accent-secondary-900"]:active {
    border-color: var(--zbk-accent-secondary-900);
  }
  [class~="disabled:border-accent-secondary-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-secondary-900);
  }
  .fill-accent-secondary-900 {
    fill: var(--zbk-accent-secondary-900);
  }
  [class~="focus:fill-accent-secondary-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-secondary-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-secondary-900:hover {
      fill: var(--zbk-accent-secondary-900);
    }
  }
  [class~="active:fill-accent-secondary-900"]:active {
    fill: var(--zbk-accent-secondary-900);
  }
  [class~="disabled:fill-accent-secondary-900"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-secondary-900);
  }
  .ink-accent-secondary-950 {
    color: var(--zbk-accent-secondary-950);
  }
  [class~="focus:ink-accent-secondary-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-accent-secondary-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-accent-secondary-950:hover {
      color: var(--zbk-accent-secondary-950);
    }
  }
  [class~="active:ink-accent-secondary-950"]:active {
    color: var(--zbk-accent-secondary-950);
  }
  [class~="disabled:ink-accent-secondary-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-accent-secondary-950);
  }
  .canvas-accent-secondary-950 {
    background-color: var(--zbk-accent-secondary-950);
  }
  [class~="focus:canvas-accent-secondary-950"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-accent-secondary-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-accent-secondary-950:hover {
      background-color: var(--zbk-accent-secondary-950);
    }
  }
  [class~="active:canvas-accent-secondary-950"]:active {
    background-color: var(--zbk-accent-secondary-950);
  }
  [class~="disabled:canvas-accent-secondary-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-accent-secondary-950);
  }
  .border-accent-secondary-950 {
    border-color: var(--zbk-accent-secondary-950);
  }
  [class~="focus:border-accent-secondary-950"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-accent-secondary-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-accent-secondary-950:hover {
      border-color: var(--zbk-accent-secondary-950);
    }
  }
  [class~="active:border-accent-secondary-950"]:active {
    border-color: var(--zbk-accent-secondary-950);
  }
  [class~="disabled:border-accent-secondary-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-accent-secondary-950);
  }
  .fill-accent-secondary-950 {
    fill: var(--zbk-accent-secondary-950);
  }
  [class~="focus:fill-accent-secondary-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-accent-secondary-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-accent-secondary-950:hover {
      fill: var(--zbk-accent-secondary-950);
    }
  }
  [class~="active:fill-accent-secondary-950"]:active {
    fill: var(--zbk-accent-secondary-950);
  }
  [class~="disabled:fill-accent-secondary-950"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    fill: var(--zbk-accent-secondary-950);
  }
}
@layer utilities {
  .canvas-positive {
    background-color: var(--zbk-positive-canvas);
    background: var(--zbk-positive-canvas);
  }
  [class~="focus:canvas-positive"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-positive-canvas);
    background: var(--zbk-positive-canvas);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-positive:hover {
      background-color: var(--zbk-positive-canvas);
      background: var(--zbk-positive-canvas);
    }
  }
  [class~="active:canvas-positive"]:active {
    background-color: var(--zbk-positive-canvas);
    background: var(--zbk-positive-canvas);
  }
  [class~="disabled:canvas-positive"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-positive-canvas);
    background: var(--zbk-positive-canvas);
  }
  .canvas-positive-soft {
    background-color: var(--zbk-positive-canvas-soft);
    background: var(--zbk-positive-canvas-soft);
  }
  [class~="focus:canvas-positive-soft"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-positive-canvas-soft);
    background: var(--zbk-positive-canvas-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-positive-soft:hover {
      background-color: var(--zbk-positive-canvas-soft);
      background: var(--zbk-positive-canvas-soft);
    }
  }
  [class~="active:canvas-positive-soft"]:active {
    background-color: var(--zbk-positive-canvas-soft);
    background: var(--zbk-positive-canvas-soft);
  }
  [class~="disabled:canvas-positive-soft"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-positive-canvas-soft);
    background: var(--zbk-positive-canvas-soft);
  }
  .canvas-positive-muted {
    background-color: var(--zbk-positive-canvas-muted);
    background: var(--zbk-positive-canvas-muted);
  }
  [class~="focus:canvas-positive-muted"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-positive-canvas-muted);
    background: var(--zbk-positive-canvas-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-positive-muted:hover {
      background-color: var(--zbk-positive-canvas-muted);
      background: var(--zbk-positive-canvas-muted);
    }
  }
  [class~="active:canvas-positive-muted"]:active {
    background-color: var(--zbk-positive-canvas-muted);
    background: var(--zbk-positive-canvas-muted);
  }
  [class~="disabled:canvas-positive-muted"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-positive-canvas-muted);
    background: var(--zbk-positive-canvas-muted);
  }
  .canvas-positive-strong {
    background-color: var(--zbk-positive-canvas-strong);
    background: var(--zbk-positive-canvas-strong);
  }
  [class~="focus:canvas-positive-strong"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-positive-canvas-strong);
    background: var(--zbk-positive-canvas-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-positive-strong:hover {
      background-color: var(--zbk-positive-canvas-strong);
      background: var(--zbk-positive-canvas-strong);
    }
  }
  [class~="active:canvas-positive-strong"]:active {
    background-color: var(--zbk-positive-canvas-strong);
    background: var(--zbk-positive-canvas-strong);
  }
  [class~="disabled:canvas-positive-strong"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-positive-canvas-strong);
    background: var(--zbk-positive-canvas-strong);
  }
  .canvas-positive-inverse {
    background-color: var(--zbk-positive-canvas-inverse);
    background: var(--zbk-positive-canvas-inverse);
  }
  [class~="focus:canvas-positive-inverse"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-positive-canvas-inverse);
    background: var(--zbk-positive-canvas-inverse);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-positive-inverse:hover {
      background-color: var(--zbk-positive-canvas-inverse);
      background: var(--zbk-positive-canvas-inverse);
    }
  }
  [class~="active:canvas-positive-inverse"]:active {
    background-color: var(--zbk-positive-canvas-inverse);
    background: var(--zbk-positive-canvas-inverse);
  }
  [class~="disabled:canvas-positive-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-positive-canvas-inverse);
    background: var(--zbk-positive-canvas-inverse);
  }
  .canvas-positive-soft-inverse {
    background-color: var(--zbk-positive-canvas-inverse-soft);
    background: var(--zbk-positive-canvas-inverse-soft);
  }
  [class~="focus:canvas-positive-soft-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-positive-canvas-inverse-soft);
    background: var(--zbk-positive-canvas-inverse-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-positive-soft-inverse:hover {
      background-color: var(--zbk-positive-canvas-inverse-soft);
      background: var(--zbk-positive-canvas-inverse-soft);
    }
  }
  [class~="active:canvas-positive-soft-inverse"]:active {
    background-color: var(--zbk-positive-canvas-inverse-soft);
    background: var(--zbk-positive-canvas-inverse-soft);
  }
  [class~="disabled:canvas-positive-soft-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-positive-canvas-inverse-soft);
    background: var(--zbk-positive-canvas-inverse-soft);
  }
  .canvas-positive-muted-inverse {
    background-color: var(--zbk-positive-canvas-inverse-muted);
    background: var(--zbk-positive-canvas-inverse-muted);
  }
  [class~="focus:canvas-positive-muted-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-positive-canvas-inverse-muted);
    background: var(--zbk-positive-canvas-inverse-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-positive-muted-inverse:hover {
      background-color: var(--zbk-positive-canvas-inverse-muted);
      background: var(--zbk-positive-canvas-inverse-muted);
    }
  }
  [class~="active:canvas-positive-muted-inverse"]:active {
    background-color: var(--zbk-positive-canvas-inverse-muted);
    background: var(--zbk-positive-canvas-inverse-muted);
  }
  [class~="disabled:canvas-positive-muted-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-positive-canvas-inverse-muted);
    background: var(--zbk-positive-canvas-inverse-muted);
  }
  .canvas-positive-strong-inverse {
    background-color: var(--zbk-positive-canvas-inverse-strong);
    background: var(--zbk-positive-canvas-inverse-strong);
  }
  [class~="focus:canvas-positive-strong-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-positive-canvas-inverse-strong);
    background: var(--zbk-positive-canvas-inverse-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-positive-strong-inverse:hover {
      background-color: var(--zbk-positive-canvas-inverse-strong);
      background: var(--zbk-positive-canvas-inverse-strong);
    }
  }
  [class~="active:canvas-positive-strong-inverse"]:active {
    background-color: var(--zbk-positive-canvas-inverse-strong);
    background: var(--zbk-positive-canvas-inverse-strong);
  }
  [class~="disabled:canvas-positive-strong-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-positive-canvas-inverse-strong);
    background: var(--zbk-positive-canvas-inverse-strong);
  }
  .ink-positive {
    color: var(--zbk-positive-ink);
  }
  [class~="focus:ink-positive"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-positive-ink);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-positive:hover {
      color: var(--zbk-positive-ink);
    }
  }
  [class~="active:ink-positive"]:active {
    color: var(--zbk-positive-ink);
  }
  [class~="disabled:ink-positive"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-positive-ink);
  }
  .ink-positive-soft {
    color: var(--zbk-positive-ink-soft);
  }
  [class~="focus:ink-positive-soft"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-positive-ink-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-positive-soft:hover {
      color: var(--zbk-positive-ink-soft);
    }
  }
  [class~="active:ink-positive-soft"]:active {
    color: var(--zbk-positive-ink-soft);
  }
  [class~="disabled:ink-positive-soft"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-positive-ink-soft);
  }
  .ink-positive-muted {
    color: var(--zbk-positive-ink-muted);
  }
  [class~="focus:ink-positive-muted"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-positive-ink-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-positive-muted:hover {
      color: var(--zbk-positive-ink-muted);
    }
  }
  [class~="active:ink-positive-muted"]:active {
    color: var(--zbk-positive-ink-muted);
  }
  [class~="disabled:ink-positive-muted"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-positive-ink-muted);
  }
  .ink-positive-strong {
    color: var(--zbk-positive-ink-strong);
  }
  [class~="focus:ink-positive-strong"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-positive-ink-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-positive-strong:hover {
      color: var(--zbk-positive-ink-strong);
    }
  }
  [class~="active:ink-positive-strong"]:active {
    color: var(--zbk-positive-ink-strong);
  }
  [class~="disabled:ink-positive-strong"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-positive-ink-strong);
  }
  .ink-positive-inverse {
    color: var(--zbk-positive-ink-inverse);
  }
  [class~="focus:ink-positive-inverse"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-positive-ink-inverse);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-positive-inverse:hover {
      color: var(--zbk-positive-ink-inverse);
    }
  }
  [class~="active:ink-positive-inverse"]:active {
    color: var(--zbk-positive-ink-inverse);
  }
  [class~="disabled:ink-positive-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-positive-ink-inverse);
  }
  .ink-positive-soft-inverse {
    color: var(--zbk-positive-ink-inverse-soft);
  }
  [class~="focus:ink-positive-soft-inverse"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-positive-ink-inverse-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-positive-soft-inverse:hover {
      color: var(--zbk-positive-ink-inverse-soft);
    }
  }
  [class~="active:ink-positive-soft-inverse"]:active {
    color: var(--zbk-positive-ink-inverse-soft);
  }
  [class~="disabled:ink-positive-soft-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-positive-ink-inverse-soft);
  }
  .ink-positive-muted-inverse {
    color: var(--zbk-positive-ink-inverse-muted);
  }
  [class~="focus:ink-positive-muted-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    color: var(--zbk-positive-ink-inverse-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-positive-muted-inverse:hover {
      color: var(--zbk-positive-ink-inverse-muted);
    }
  }
  [class~="active:ink-positive-muted-inverse"]:active {
    color: var(--zbk-positive-ink-inverse-muted);
  }
  [class~="disabled:ink-positive-muted-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-positive-ink-inverse-muted);
  }
  .ink-positive-strong-inverse {
    color: var(--zbk-positive-ink-inverse-strong);
  }
  [class~="focus:ink-positive-strong-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    color: var(--zbk-positive-ink-inverse-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-positive-strong-inverse:hover {
      color: var(--zbk-positive-ink-inverse-strong);
    }
  }
  [class~="active:ink-positive-strong-inverse"]:active {
    color: var(--zbk-positive-ink-inverse-strong);
  }
  [class~="disabled:ink-positive-strong-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-positive-ink-inverse-strong);
  }
  .border-positive {
    border-color: var(--zbk-positive-border);
  }
  [class~="focus:border-positive"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-positive-border);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-positive:hover {
      border-color: var(--zbk-positive-border);
    }
  }
  [class~="active:border-positive"]:active {
    border-color: var(--zbk-positive-border);
  }
  [class~="disabled:border-positive"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-positive-border);
  }
  .border-positive-soft {
    border-color: var(--zbk-positive-border-soft);
  }
  [class~="focus:border-positive-soft"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-positive-border-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-positive-soft:hover {
      border-color: var(--zbk-positive-border-soft);
    }
  }
  [class~="active:border-positive-soft"]:active {
    border-color: var(--zbk-positive-border-soft);
  }
  [class~="disabled:border-positive-soft"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-positive-border-soft);
  }
  .border-positive-muted {
    border-color: var(--zbk-positive-border-muted);
  }
  [class~="focus:border-positive-muted"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-positive-border-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-positive-muted:hover {
      border-color: var(--zbk-positive-border-muted);
    }
  }
  [class~="active:border-positive-muted"]:active {
    border-color: var(--zbk-positive-border-muted);
  }
  [class~="disabled:border-positive-muted"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-positive-border-muted);
  }
  .border-positive-strong {
    border-color: var(--zbk-positive-border-strong);
  }
  [class~="focus:border-positive-strong"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-positive-border-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-positive-strong:hover {
      border-color: var(--zbk-positive-border-strong);
    }
  }
  [class~="active:border-positive-strong"]:active {
    border-color: var(--zbk-positive-border-strong);
  }
  [class~="disabled:border-positive-strong"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-positive-border-strong);
  }
  .border-positive-inverse {
    border-color: var(--zbk-positive-border-inverse);
  }
  [class~="focus:border-positive-inverse"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-positive-border-inverse);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-positive-inverse:hover {
      border-color: var(--zbk-positive-border-inverse);
    }
  }
  [class~="active:border-positive-inverse"]:active {
    border-color: var(--zbk-positive-border-inverse);
  }
  [class~="disabled:border-positive-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-positive-border-inverse);
  }
  .border-positive-soft-inverse {
    border-color: var(--zbk-positive-border-inverse-soft);
  }
  [class~="focus:border-positive-soft-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-positive-border-inverse-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-positive-soft-inverse:hover {
      border-color: var(--zbk-positive-border-inverse-soft);
    }
  }
  [class~="active:border-positive-soft-inverse"]:active {
    border-color: var(--zbk-positive-border-inverse-soft);
  }
  [class~="disabled:border-positive-soft-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-positive-border-inverse-soft);
  }
  .border-positive-muted-inverse {
    border-color: var(--zbk-positive-border-inverse-muted);
  }
  [class~="focus:border-positive-muted-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-positive-border-inverse-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-positive-muted-inverse:hover {
      border-color: var(--zbk-positive-border-inverse-muted);
    }
  }
  [class~="active:border-positive-muted-inverse"]:active {
    border-color: var(--zbk-positive-border-inverse-muted);
  }
  [class~="disabled:border-positive-muted-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-positive-border-inverse-muted);
  }
  .border-positive-strong-inverse {
    border-color: var(--zbk-positive-border-inverse-strong);
  }
  [class~="focus:border-positive-strong-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-positive-border-inverse-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-positive-strong-inverse:hover {
      border-color: var(--zbk-positive-border-inverse-strong);
    }
  }
  [class~="active:border-positive-strong-inverse"]:active {
    border-color: var(--zbk-positive-border-inverse-strong);
  }
  [class~="disabled:border-positive-strong-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-positive-border-inverse-strong);
  }
}
@layer utilities {
  .canvas-info {
    background-color: var(--zbk-info-canvas);
    background: var(--zbk-info-canvas);
  }
  [class~="focus:canvas-info"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-info-canvas);
    background: var(--zbk-info-canvas);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-info:hover {
      background-color: var(--zbk-info-canvas);
      background: var(--zbk-info-canvas);
    }
  }
  [class~="active:canvas-info"]:active {
    background-color: var(--zbk-info-canvas);
    background: var(--zbk-info-canvas);
  }
  [class~="disabled:canvas-info"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-info-canvas);
    background: var(--zbk-info-canvas);
  }
  .canvas-info-soft {
    background-color: var(--zbk-info-canvas-soft);
    background: var(--zbk-info-canvas-soft);
  }
  [class~="focus:canvas-info-soft"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-info-canvas-soft);
    background: var(--zbk-info-canvas-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-info-soft:hover {
      background-color: var(--zbk-info-canvas-soft);
      background: var(--zbk-info-canvas-soft);
    }
  }
  [class~="active:canvas-info-soft"]:active {
    background-color: var(--zbk-info-canvas-soft);
    background: var(--zbk-info-canvas-soft);
  }
  [class~="disabled:canvas-info-soft"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-info-canvas-soft);
    background: var(--zbk-info-canvas-soft);
  }
  .canvas-info-muted {
    background-color: var(--zbk-info-canvas-muted);
    background: var(--zbk-info-canvas-muted);
  }
  [class~="focus:canvas-info-muted"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-info-canvas-muted);
    background: var(--zbk-info-canvas-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-info-muted:hover {
      background-color: var(--zbk-info-canvas-muted);
      background: var(--zbk-info-canvas-muted);
    }
  }
  [class~="active:canvas-info-muted"]:active {
    background-color: var(--zbk-info-canvas-muted);
    background: var(--zbk-info-canvas-muted);
  }
  [class~="disabled:canvas-info-muted"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-info-canvas-muted);
    background: var(--zbk-info-canvas-muted);
  }
  .canvas-info-strong {
    background-color: var(--zbk-info-canvas-strong);
    background: var(--zbk-info-canvas-strong);
  }
  [class~="focus:canvas-info-strong"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-info-canvas-strong);
    background: var(--zbk-info-canvas-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-info-strong:hover {
      background-color: var(--zbk-info-canvas-strong);
      background: var(--zbk-info-canvas-strong);
    }
  }
  [class~="active:canvas-info-strong"]:active {
    background-color: var(--zbk-info-canvas-strong);
    background: var(--zbk-info-canvas-strong);
  }
  [class~="disabled:canvas-info-strong"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-info-canvas-strong);
    background: var(--zbk-info-canvas-strong);
  }
  .canvas-info-inverse {
    background-color: var(--zbk-info-canvas-inverse);
    background: var(--zbk-info-canvas-inverse);
  }
  [class~="focus:canvas-info-inverse"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-info-canvas-inverse);
    background: var(--zbk-info-canvas-inverse);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-info-inverse:hover {
      background-color: var(--zbk-info-canvas-inverse);
      background: var(--zbk-info-canvas-inverse);
    }
  }
  [class~="active:canvas-info-inverse"]:active {
    background-color: var(--zbk-info-canvas-inverse);
    background: var(--zbk-info-canvas-inverse);
  }
  [class~="disabled:canvas-info-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-info-canvas-inverse);
    background: var(--zbk-info-canvas-inverse);
  }
  .canvas-info-soft-inverse {
    background-color: var(--zbk-info-canvas-inverse-soft);
    background: var(--zbk-info-canvas-inverse-soft);
  }
  [class~="focus:canvas-info-soft-inverse"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-info-canvas-inverse-soft);
    background: var(--zbk-info-canvas-inverse-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-info-soft-inverse:hover {
      background-color: var(--zbk-info-canvas-inverse-soft);
      background: var(--zbk-info-canvas-inverse-soft);
    }
  }
  [class~="active:canvas-info-soft-inverse"]:active {
    background-color: var(--zbk-info-canvas-inverse-soft);
    background: var(--zbk-info-canvas-inverse-soft);
  }
  [class~="disabled:canvas-info-soft-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-info-canvas-inverse-soft);
    background: var(--zbk-info-canvas-inverse-soft);
  }
  .canvas-info-muted-inverse {
    background-color: var(--zbk-info-canvas-inverse-muted);
    background: var(--zbk-info-canvas-inverse-muted);
  }
  [class~="focus:canvas-info-muted-inverse"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-info-canvas-inverse-muted);
    background: var(--zbk-info-canvas-inverse-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-info-muted-inverse:hover {
      background-color: var(--zbk-info-canvas-inverse-muted);
      background: var(--zbk-info-canvas-inverse-muted);
    }
  }
  [class~="active:canvas-info-muted-inverse"]:active {
    background-color: var(--zbk-info-canvas-inverse-muted);
    background: var(--zbk-info-canvas-inverse-muted);
  }
  [class~="disabled:canvas-info-muted-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-info-canvas-inverse-muted);
    background: var(--zbk-info-canvas-inverse-muted);
  }
  .canvas-info-strong-inverse {
    background-color: var(--zbk-info-canvas-inverse-strong);
    background: var(--zbk-info-canvas-inverse-strong);
  }
  [class~="focus:canvas-info-strong-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-info-canvas-inverse-strong);
    background: var(--zbk-info-canvas-inverse-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-info-strong-inverse:hover {
      background-color: var(--zbk-info-canvas-inverse-strong);
      background: var(--zbk-info-canvas-inverse-strong);
    }
  }
  [class~="active:canvas-info-strong-inverse"]:active {
    background-color: var(--zbk-info-canvas-inverse-strong);
    background: var(--zbk-info-canvas-inverse-strong);
  }
  [class~="disabled:canvas-info-strong-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-info-canvas-inverse-strong);
    background: var(--zbk-info-canvas-inverse-strong);
  }
  .ink-info {
    color: var(--zbk-info-ink);
  }
  [class~="focus:ink-info"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-info-ink);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-info:hover {
      color: var(--zbk-info-ink);
    }
  }
  [class~="active:ink-info"]:active {
    color: var(--zbk-info-ink);
  }
  [class~="disabled:ink-info"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-info-ink);
  }
  .ink-info-soft {
    color: var(--zbk-info-ink-soft);
  }
  [class~="focus:ink-info-soft"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-info-ink-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-info-soft:hover {
      color: var(--zbk-info-ink-soft);
    }
  }
  [class~="active:ink-info-soft"]:active {
    color: var(--zbk-info-ink-soft);
  }
  [class~="disabled:ink-info-soft"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-info-ink-soft);
  }
  .ink-info-muted {
    color: var(--zbk-info-ink-muted);
  }
  [class~="focus:ink-info-muted"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-info-ink-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-info-muted:hover {
      color: var(--zbk-info-ink-muted);
    }
  }
  [class~="active:ink-info-muted"]:active {
    color: var(--zbk-info-ink-muted);
  }
  [class~="disabled:ink-info-muted"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-info-ink-muted);
  }
  .ink-info-strong {
    color: var(--zbk-info-ink-strong);
  }
  [class~="focus:ink-info-strong"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-info-ink-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-info-strong:hover {
      color: var(--zbk-info-ink-strong);
    }
  }
  [class~="active:ink-info-strong"]:active {
    color: var(--zbk-info-ink-strong);
  }
  [class~="disabled:ink-info-strong"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-info-ink-strong);
  }
  .ink-info-inverse {
    color: var(--zbk-info-ink-inverse);
  }
  [class~="focus:ink-info-inverse"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-info-ink-inverse);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-info-inverse:hover {
      color: var(--zbk-info-ink-inverse);
    }
  }
  [class~="active:ink-info-inverse"]:active {
    color: var(--zbk-info-ink-inverse);
  }
  [class~="disabled:ink-info-inverse"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-info-ink-inverse);
  }
  .ink-info-soft-inverse {
    color: var(--zbk-info-ink-inverse-soft);
  }
  [class~="focus:ink-info-soft-inverse"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-info-ink-inverse-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-info-soft-inverse:hover {
      color: var(--zbk-info-ink-inverse-soft);
    }
  }
  [class~="active:ink-info-soft-inverse"]:active {
    color: var(--zbk-info-ink-inverse-soft);
  }
  [class~="disabled:ink-info-soft-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-info-ink-inverse-soft);
  }
  .ink-info-muted-inverse {
    color: var(--zbk-info-ink-inverse-muted);
  }
  [class~="focus:ink-info-muted-inverse"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-info-ink-inverse-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-info-muted-inverse:hover {
      color: var(--zbk-info-ink-inverse-muted);
    }
  }
  [class~="active:ink-info-muted-inverse"]:active {
    color: var(--zbk-info-ink-inverse-muted);
  }
  [class~="disabled:ink-info-muted-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-info-ink-inverse-muted);
  }
  .ink-info-strong-inverse {
    color: var(--zbk-info-ink-inverse-strong);
  }
  [class~="focus:ink-info-strong-inverse"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-info-ink-inverse-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-info-strong-inverse:hover {
      color: var(--zbk-info-ink-inverse-strong);
    }
  }
  [class~="active:ink-info-strong-inverse"]:active {
    color: var(--zbk-info-ink-inverse-strong);
  }
  [class~="disabled:ink-info-strong-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-info-ink-inverse-strong);
  }
  .border-info {
    border-color: var(--zbk-info-border);
  }
  [class~="focus:border-info"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-info-border);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-info:hover {
      border-color: var(--zbk-info-border);
    }
  }
  [class~="active:border-info"]:active {
    border-color: var(--zbk-info-border);
  }
  [class~="disabled:border-info"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-info-border);
  }
  .border-info-soft {
    border-color: var(--zbk-info-border-soft);
  }
  [class~="focus:border-info-soft"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-info-border-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-info-soft:hover {
      border-color: var(--zbk-info-border-soft);
    }
  }
  [class~="active:border-info-soft"]:active {
    border-color: var(--zbk-info-border-soft);
  }
  [class~="disabled:border-info-soft"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-info-border-soft);
  }
  .border-info-muted {
    border-color: var(--zbk-info-border-muted);
  }
  [class~="focus:border-info-muted"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-info-border-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-info-muted:hover {
      border-color: var(--zbk-info-border-muted);
    }
  }
  [class~="active:border-info-muted"]:active {
    border-color: var(--zbk-info-border-muted);
  }
  [class~="disabled:border-info-muted"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-info-border-muted);
  }
  .border-info-strong {
    border-color: var(--zbk-info-border-strong);
  }
  [class~="focus:border-info-strong"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-info-border-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-info-strong:hover {
      border-color: var(--zbk-info-border-strong);
    }
  }
  [class~="active:border-info-strong"]:active {
    border-color: var(--zbk-info-border-strong);
  }
  [class~="disabled:border-info-strong"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-info-border-strong);
  }
  .border-info-inverse {
    border-color: var(--zbk-info-border-inverse);
  }
  [class~="focus:border-info-inverse"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-info-border-inverse);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-info-inverse:hover {
      border-color: var(--zbk-info-border-inverse);
    }
  }
  [class~="active:border-info-inverse"]:active {
    border-color: var(--zbk-info-border-inverse);
  }
  [class~="disabled:border-info-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-info-border-inverse);
  }
  .border-info-soft-inverse {
    border-color: var(--zbk-info-border-inverse-soft);
  }
  [class~="focus:border-info-soft-inverse"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-info-border-inverse-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-info-soft-inverse:hover {
      border-color: var(--zbk-info-border-inverse-soft);
    }
  }
  [class~="active:border-info-soft-inverse"]:active {
    border-color: var(--zbk-info-border-inverse-soft);
  }
  [class~="disabled:border-info-soft-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-info-border-inverse-soft);
  }
  .border-info-muted-inverse {
    border-color: var(--zbk-info-border-inverse-muted);
  }
  [class~="focus:border-info-muted-inverse"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-info-border-inverse-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-info-muted-inverse:hover {
      border-color: var(--zbk-info-border-inverse-muted);
    }
  }
  [class~="active:border-info-muted-inverse"]:active {
    border-color: var(--zbk-info-border-inverse-muted);
  }
  [class~="disabled:border-info-muted-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-info-border-inverse-muted);
  }
  .border-info-strong-inverse {
    border-color: var(--zbk-info-border-inverse-strong);
  }
  [class~="focus:border-info-strong-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-info-border-inverse-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-info-strong-inverse:hover {
      border-color: var(--zbk-info-border-inverse-strong);
    }
  }
  [class~="active:border-info-strong-inverse"]:active {
    border-color: var(--zbk-info-border-inverse-strong);
  }
  [class~="disabled:border-info-strong-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-info-border-inverse-strong);
  }
}
@layer utilities {
  .canvas-disabled {
    background-color: var(--zbk-disabled-canvas);
    background: var(--zbk-disabled-canvas);
  }
  [class~="focus:canvas-disabled"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-disabled-canvas);
    background: var(--zbk-disabled-canvas);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-disabled:hover {
      background-color: var(--zbk-disabled-canvas);
      background: var(--zbk-disabled-canvas);
    }
  }
  [class~="active:canvas-disabled"]:active {
    background-color: var(--zbk-disabled-canvas);
    background: var(--zbk-disabled-canvas);
  }
  [class~="disabled:canvas-disabled"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-disabled-canvas);
    background: var(--zbk-disabled-canvas);
  }
  .canvas-disabled-soft {
    background-color: var(--zbk-disabled-canvas-soft);
    background: var(--zbk-disabled-canvas-soft);
  }
  [class~="focus:canvas-disabled-soft"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-disabled-canvas-soft);
    background: var(--zbk-disabled-canvas-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-disabled-soft:hover {
      background-color: var(--zbk-disabled-canvas-soft);
      background: var(--zbk-disabled-canvas-soft);
    }
  }
  [class~="active:canvas-disabled-soft"]:active {
    background-color: var(--zbk-disabled-canvas-soft);
    background: var(--zbk-disabled-canvas-soft);
  }
  [class~="disabled:canvas-disabled-soft"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-disabled-canvas-soft);
    background: var(--zbk-disabled-canvas-soft);
  }
  .canvas-disabled-muted {
    background-color: var(--zbk-disabled-canvas-muted);
    background: var(--zbk-disabled-canvas-muted);
  }
  [class~="focus:canvas-disabled-muted"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-disabled-canvas-muted);
    background: var(--zbk-disabled-canvas-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-disabled-muted:hover {
      background-color: var(--zbk-disabled-canvas-muted);
      background: var(--zbk-disabled-canvas-muted);
    }
  }
  [class~="active:canvas-disabled-muted"]:active {
    background-color: var(--zbk-disabled-canvas-muted);
    background: var(--zbk-disabled-canvas-muted);
  }
  [class~="disabled:canvas-disabled-muted"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-disabled-canvas-muted);
    background: var(--zbk-disabled-canvas-muted);
  }
  .canvas-disabled-strong {
    background-color: var(--zbk-disabled-canvas-strong);
    background: var(--zbk-disabled-canvas-strong);
  }
  [class~="focus:canvas-disabled-strong"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-disabled-canvas-strong);
    background: var(--zbk-disabled-canvas-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-disabled-strong:hover {
      background-color: var(--zbk-disabled-canvas-strong);
      background: var(--zbk-disabled-canvas-strong);
    }
  }
  [class~="active:canvas-disabled-strong"]:active {
    background-color: var(--zbk-disabled-canvas-strong);
    background: var(--zbk-disabled-canvas-strong);
  }
  [class~="disabled:canvas-disabled-strong"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-disabled-canvas-strong);
    background: var(--zbk-disabled-canvas-strong);
  }
  .canvas-disabled-inverse {
    background-color: var(--zbk-disabled-canvas-inverse);
    background: var(--zbk-disabled-canvas-inverse);
  }
  [class~="focus:canvas-disabled-inverse"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-disabled-canvas-inverse);
    background: var(--zbk-disabled-canvas-inverse);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-disabled-inverse:hover {
      background-color: var(--zbk-disabled-canvas-inverse);
      background: var(--zbk-disabled-canvas-inverse);
    }
  }
  [class~="active:canvas-disabled-inverse"]:active {
    background-color: var(--zbk-disabled-canvas-inverse);
    background: var(--zbk-disabled-canvas-inverse);
  }
  [class~="disabled:canvas-disabled-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-disabled-canvas-inverse);
    background: var(--zbk-disabled-canvas-inverse);
  }
  .canvas-disabled-soft-inverse {
    background-color: var(--zbk-disabled-canvas-inverse-soft);
    background: var(--zbk-disabled-canvas-inverse-soft);
  }
  [class~="focus:canvas-disabled-soft-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-disabled-canvas-inverse-soft);
    background: var(--zbk-disabled-canvas-inverse-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-disabled-soft-inverse:hover {
      background-color: var(--zbk-disabled-canvas-inverse-soft);
      background: var(--zbk-disabled-canvas-inverse-soft);
    }
  }
  [class~="active:canvas-disabled-soft-inverse"]:active {
    background-color: var(--zbk-disabled-canvas-inverse-soft);
    background: var(--zbk-disabled-canvas-inverse-soft);
  }
  [class~="disabled:canvas-disabled-soft-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-disabled-canvas-inverse-soft);
    background: var(--zbk-disabled-canvas-inverse-soft);
  }
  .canvas-disabled-muted-inverse {
    background-color: var(--zbk-disabled-canvas-inverse-muted);
    background: var(--zbk-disabled-canvas-inverse-muted);
  }
  [class~="focus:canvas-disabled-muted-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-disabled-canvas-inverse-muted);
    background: var(--zbk-disabled-canvas-inverse-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-disabled-muted-inverse:hover {
      background-color: var(--zbk-disabled-canvas-inverse-muted);
      background: var(--zbk-disabled-canvas-inverse-muted);
    }
  }
  [class~="active:canvas-disabled-muted-inverse"]:active {
    background-color: var(--zbk-disabled-canvas-inverse-muted);
    background: var(--zbk-disabled-canvas-inverse-muted);
  }
  [class~="disabled:canvas-disabled-muted-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-disabled-canvas-inverse-muted);
    background: var(--zbk-disabled-canvas-inverse-muted);
  }
  .canvas-disabled-strong-inverse {
    background-color: var(--zbk-disabled-canvas-inverse-strong);
    background: var(--zbk-disabled-canvas-inverse-strong);
  }
  [class~="focus:canvas-disabled-strong-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-disabled-canvas-inverse-strong);
    background: var(--zbk-disabled-canvas-inverse-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-disabled-strong-inverse:hover {
      background-color: var(--zbk-disabled-canvas-inverse-strong);
      background: var(--zbk-disabled-canvas-inverse-strong);
    }
  }
  [class~="active:canvas-disabled-strong-inverse"]:active {
    background-color: var(--zbk-disabled-canvas-inverse-strong);
    background: var(--zbk-disabled-canvas-inverse-strong);
  }
  [class~="disabled:canvas-disabled-strong-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-disabled-canvas-inverse-strong);
    background: var(--zbk-disabled-canvas-inverse-strong);
  }
  .ink-disabled {
    color: var(--zbk-disabled-ink);
  }
  [class~="focus:ink-disabled"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-disabled-ink);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-disabled:hover {
      color: var(--zbk-disabled-ink);
    }
  }
  [class~="active:ink-disabled"]:active {
    color: var(--zbk-disabled-ink);
  }
  [class~="disabled:ink-disabled"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-disabled-ink);
  }
  .ink-disabled-soft {
    color: var(--zbk-disabled-ink-soft);
  }
  [class~="focus:ink-disabled-soft"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-disabled-ink-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-disabled-soft:hover {
      color: var(--zbk-disabled-ink-soft);
    }
  }
  [class~="active:ink-disabled-soft"]:active {
    color: var(--zbk-disabled-ink-soft);
  }
  [class~="disabled:ink-disabled-soft"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-disabled-ink-soft);
  }
  .ink-disabled-muted {
    color: var(--zbk-disabled-ink-muted);
  }
  [class~="focus:ink-disabled-muted"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-disabled-ink-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-disabled-muted:hover {
      color: var(--zbk-disabled-ink-muted);
    }
  }
  [class~="active:ink-disabled-muted"]:active {
    color: var(--zbk-disabled-ink-muted);
  }
  [class~="disabled:ink-disabled-muted"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-disabled-ink-muted);
  }
  .ink-disabled-strong {
    color: var(--zbk-disabled-ink-strong);
  }
  [class~="focus:ink-disabled-strong"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-disabled-ink-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-disabled-strong:hover {
      color: var(--zbk-disabled-ink-strong);
    }
  }
  [class~="active:ink-disabled-strong"]:active {
    color: var(--zbk-disabled-ink-strong);
  }
  [class~="disabled:ink-disabled-strong"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-disabled-ink-strong);
  }
  .ink-disabled-inverse {
    color: var(--zbk-disabled-ink-inverse);
  }
  [class~="focus:ink-disabled-inverse"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-disabled-ink-inverse);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-disabled-inverse:hover {
      color: var(--zbk-disabled-ink-inverse);
    }
  }
  [class~="active:ink-disabled-inverse"]:active {
    color: var(--zbk-disabled-ink-inverse);
  }
  [class~="disabled:ink-disabled-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-disabled-ink-inverse);
  }
  .ink-disabled-soft-inverse {
    color: var(--zbk-disabled-ink-inverse-soft);
  }
  [class~="focus:ink-disabled-soft-inverse"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-disabled-ink-inverse-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-disabled-soft-inverse:hover {
      color: var(--zbk-disabled-ink-inverse-soft);
    }
  }
  [class~="active:ink-disabled-soft-inverse"]:active {
    color: var(--zbk-disabled-ink-inverse-soft);
  }
  [class~="disabled:ink-disabled-soft-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-disabled-ink-inverse-soft);
  }
  .ink-disabled-muted-inverse {
    color: var(--zbk-disabled-ink-inverse-muted);
  }
  [class~="focus:ink-disabled-muted-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    color: var(--zbk-disabled-ink-inverse-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-disabled-muted-inverse:hover {
      color: var(--zbk-disabled-ink-inverse-muted);
    }
  }
  [class~="active:ink-disabled-muted-inverse"]:active {
    color: var(--zbk-disabled-ink-inverse-muted);
  }
  [class~="disabled:ink-disabled-muted-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-disabled-ink-inverse-muted);
  }
  .ink-disabled-strong-inverse {
    color: var(--zbk-disabled-ink-inverse-strong);
  }
  [class~="focus:ink-disabled-strong-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    color: var(--zbk-disabled-ink-inverse-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-disabled-strong-inverse:hover {
      color: var(--zbk-disabled-ink-inverse-strong);
    }
  }
  [class~="active:ink-disabled-strong-inverse"]:active {
    color: var(--zbk-disabled-ink-inverse-strong);
  }
  [class~="disabled:ink-disabled-strong-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-disabled-ink-inverse-strong);
  }
  .border-disabled {
    border-color: var(--zbk-disabled-border);
  }
  [class~="focus:border-disabled"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-disabled-border);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-disabled:hover {
      border-color: var(--zbk-disabled-border);
    }
  }
  [class~="active:border-disabled"]:active {
    border-color: var(--zbk-disabled-border);
  }
  [class~="disabled:border-disabled"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-disabled-border);
  }
  .border-disabled-soft {
    border-color: var(--zbk-disabled-border-soft);
  }
  [class~="focus:border-disabled-soft"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-disabled-border-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-disabled-soft:hover {
      border-color: var(--zbk-disabled-border-soft);
    }
  }
  [class~="active:border-disabled-soft"]:active {
    border-color: var(--zbk-disabled-border-soft);
  }
  [class~="disabled:border-disabled-soft"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-disabled-border-soft);
  }
  .border-disabled-muted {
    border-color: var(--zbk-disabled-border-muted);
  }
  [class~="focus:border-disabled-muted"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-disabled-border-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-disabled-muted:hover {
      border-color: var(--zbk-disabled-border-muted);
    }
  }
  [class~="active:border-disabled-muted"]:active {
    border-color: var(--zbk-disabled-border-muted);
  }
  [class~="disabled:border-disabled-muted"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-disabled-border-muted);
  }
  .border-disabled-strong {
    border-color: var(--zbk-disabled-border-strong);
  }
  [class~="focus:border-disabled-strong"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-disabled-border-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-disabled-strong:hover {
      border-color: var(--zbk-disabled-border-strong);
    }
  }
  [class~="active:border-disabled-strong"]:active {
    border-color: var(--zbk-disabled-border-strong);
  }
  [class~="disabled:border-disabled-strong"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-disabled-border-strong);
  }
  .border-disabled-inverse {
    border-color: var(--zbk-disabled-border-inverse);
  }
  [class~="focus:border-disabled-inverse"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-disabled-border-inverse);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-disabled-inverse:hover {
      border-color: var(--zbk-disabled-border-inverse);
    }
  }
  [class~="active:border-disabled-inverse"]:active {
    border-color: var(--zbk-disabled-border-inverse);
  }
  [class~="disabled:border-disabled-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-disabled-border-inverse);
  }
  .border-disabled-soft-inverse {
    border-color: var(--zbk-disabled-border-inverse-soft);
  }
  [class~="focus:border-disabled-soft-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-disabled-border-inverse-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-disabled-soft-inverse:hover {
      border-color: var(--zbk-disabled-border-inverse-soft);
    }
  }
  [class~="active:border-disabled-soft-inverse"]:active {
    border-color: var(--zbk-disabled-border-inverse-soft);
  }
  [class~="disabled:border-disabled-soft-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-disabled-border-inverse-soft);
  }
  .border-disabled-muted-inverse {
    border-color: var(--zbk-disabled-border-inverse-muted);
  }
  [class~="focus:border-disabled-muted-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-disabled-border-inverse-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-disabled-muted-inverse:hover {
      border-color: var(--zbk-disabled-border-inverse-muted);
    }
  }
  [class~="active:border-disabled-muted-inverse"]:active {
    border-color: var(--zbk-disabled-border-inverse-muted);
  }
  [class~="disabled:border-disabled-muted-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-disabled-border-inverse-muted);
  }
  .border-disabled-strong-inverse {
    border-color: var(--zbk-disabled-border-inverse-strong);
  }
  [class~="focus:border-disabled-strong-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-disabled-border-inverse-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-disabled-strong-inverse:hover {
      border-color: var(--zbk-disabled-border-inverse-strong);
    }
  }
  [class~="active:border-disabled-strong-inverse"]:active {
    border-color: var(--zbk-disabled-border-inverse-strong);
  }
  [class~="disabled:border-disabled-strong-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-disabled-border-inverse-strong);
  }
}
@layer utilities {
  .canvas-caution {
    background-color: var(--zbk-caution-canvas);
    background: var(--zbk-caution-canvas);
  }
  [class~="focus:canvas-caution"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-caution-canvas);
    background: var(--zbk-caution-canvas);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-caution:hover {
      background-color: var(--zbk-caution-canvas);
      background: var(--zbk-caution-canvas);
    }
  }
  [class~="active:canvas-caution"]:active {
    background-color: var(--zbk-caution-canvas);
    background: var(--zbk-caution-canvas);
  }
  [class~="disabled:canvas-caution"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-caution-canvas);
    background: var(--zbk-caution-canvas);
  }
  .canvas-caution-soft {
    background-color: var(--zbk-caution-canvas-soft);
    background: var(--zbk-caution-canvas-soft);
  }
  [class~="focus:canvas-caution-soft"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-caution-canvas-soft);
    background: var(--zbk-caution-canvas-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-caution-soft:hover {
      background-color: var(--zbk-caution-canvas-soft);
      background: var(--zbk-caution-canvas-soft);
    }
  }
  [class~="active:canvas-caution-soft"]:active {
    background-color: var(--zbk-caution-canvas-soft);
    background: var(--zbk-caution-canvas-soft);
  }
  [class~="disabled:canvas-caution-soft"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-caution-canvas-soft);
    background: var(--zbk-caution-canvas-soft);
  }
  .canvas-caution-muted {
    background-color: var(--zbk-caution-canvas-muted);
    background: var(--zbk-caution-canvas-muted);
  }
  [class~="focus:canvas-caution-muted"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-caution-canvas-muted);
    background: var(--zbk-caution-canvas-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-caution-muted:hover {
      background-color: var(--zbk-caution-canvas-muted);
      background: var(--zbk-caution-canvas-muted);
    }
  }
  [class~="active:canvas-caution-muted"]:active {
    background-color: var(--zbk-caution-canvas-muted);
    background: var(--zbk-caution-canvas-muted);
  }
  [class~="disabled:canvas-caution-muted"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-caution-canvas-muted);
    background: var(--zbk-caution-canvas-muted);
  }
  .canvas-caution-strong {
    background-color: var(--zbk-caution-canvas-strong);
    background: var(--zbk-caution-canvas-strong);
  }
  [class~="focus:canvas-caution-strong"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-caution-canvas-strong);
    background: var(--zbk-caution-canvas-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-caution-strong:hover {
      background-color: var(--zbk-caution-canvas-strong);
      background: var(--zbk-caution-canvas-strong);
    }
  }
  [class~="active:canvas-caution-strong"]:active {
    background-color: var(--zbk-caution-canvas-strong);
    background: var(--zbk-caution-canvas-strong);
  }
  [class~="disabled:canvas-caution-strong"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-caution-canvas-strong);
    background: var(--zbk-caution-canvas-strong);
  }
  .canvas-caution-inverse {
    background-color: var(--zbk-caution-canvas-inverse);
    background: var(--zbk-caution-canvas-inverse);
  }
  [class~="focus:canvas-caution-inverse"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-caution-canvas-inverse);
    background: var(--zbk-caution-canvas-inverse);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-caution-inverse:hover {
      background-color: var(--zbk-caution-canvas-inverse);
      background: var(--zbk-caution-canvas-inverse);
    }
  }
  [class~="active:canvas-caution-inverse"]:active {
    background-color: var(--zbk-caution-canvas-inverse);
    background: var(--zbk-caution-canvas-inverse);
  }
  [class~="disabled:canvas-caution-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-caution-canvas-inverse);
    background: var(--zbk-caution-canvas-inverse);
  }
  .canvas-caution-soft-inverse {
    background-color: var(--zbk-caution-canvas-inverse-soft);
    background: var(--zbk-caution-canvas-inverse-soft);
  }
  [class~="focus:canvas-caution-soft-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-caution-canvas-inverse-soft);
    background: var(--zbk-caution-canvas-inverse-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-caution-soft-inverse:hover {
      background-color: var(--zbk-caution-canvas-inverse-soft);
      background: var(--zbk-caution-canvas-inverse-soft);
    }
  }
  [class~="active:canvas-caution-soft-inverse"]:active {
    background-color: var(--zbk-caution-canvas-inverse-soft);
    background: var(--zbk-caution-canvas-inverse-soft);
  }
  [class~="disabled:canvas-caution-soft-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-caution-canvas-inverse-soft);
    background: var(--zbk-caution-canvas-inverse-soft);
  }
  .canvas-caution-muted-inverse {
    background-color: var(--zbk-caution-canvas-inverse-muted);
    background: var(--zbk-caution-canvas-inverse-muted);
  }
  [class~="focus:canvas-caution-muted-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-caution-canvas-inverse-muted);
    background: var(--zbk-caution-canvas-inverse-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-caution-muted-inverse:hover {
      background-color: var(--zbk-caution-canvas-inverse-muted);
      background: var(--zbk-caution-canvas-inverse-muted);
    }
  }
  [class~="active:canvas-caution-muted-inverse"]:active {
    background-color: var(--zbk-caution-canvas-inverse-muted);
    background: var(--zbk-caution-canvas-inverse-muted);
  }
  [class~="disabled:canvas-caution-muted-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-caution-canvas-inverse-muted);
    background: var(--zbk-caution-canvas-inverse-muted);
  }
  .canvas-caution-strong-inverse {
    background-color: var(--zbk-caution-canvas-inverse-strong);
    background: var(--zbk-caution-canvas-inverse-strong);
  }
  [class~="focus:canvas-caution-strong-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-caution-canvas-inverse-strong);
    background: var(--zbk-caution-canvas-inverse-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-caution-strong-inverse:hover {
      background-color: var(--zbk-caution-canvas-inverse-strong);
      background: var(--zbk-caution-canvas-inverse-strong);
    }
  }
  [class~="active:canvas-caution-strong-inverse"]:active {
    background-color: var(--zbk-caution-canvas-inverse-strong);
    background: var(--zbk-caution-canvas-inverse-strong);
  }
  [class~="disabled:canvas-caution-strong-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-caution-canvas-inverse-strong);
    background: var(--zbk-caution-canvas-inverse-strong);
  }
  .ink-caution {
    color: var(--zbk-caution-ink);
  }
  [class~="focus:ink-caution"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-caution-ink);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-caution:hover {
      color: var(--zbk-caution-ink);
    }
  }
  [class~="active:ink-caution"]:active {
    color: var(--zbk-caution-ink);
  }
  [class~="disabled:ink-caution"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-caution-ink);
  }
  .ink-caution-soft {
    color: var(--zbk-caution-ink-soft);
  }
  [class~="focus:ink-caution-soft"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-caution-ink-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-caution-soft:hover {
      color: var(--zbk-caution-ink-soft);
    }
  }
  [class~="active:ink-caution-soft"]:active {
    color: var(--zbk-caution-ink-soft);
  }
  [class~="disabled:ink-caution-soft"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-caution-ink-soft);
  }
  .ink-caution-muted {
    color: var(--zbk-caution-ink-muted);
  }
  [class~="focus:ink-caution-muted"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-caution-ink-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-caution-muted:hover {
      color: var(--zbk-caution-ink-muted);
    }
  }
  [class~="active:ink-caution-muted"]:active {
    color: var(--zbk-caution-ink-muted);
  }
  [class~="disabled:ink-caution-muted"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-caution-ink-muted);
  }
  .ink-caution-strong {
    color: var(--zbk-caution-ink-strong);
  }
  [class~="focus:ink-caution-strong"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-caution-ink-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-caution-strong:hover {
      color: var(--zbk-caution-ink-strong);
    }
  }
  [class~="active:ink-caution-strong"]:active {
    color: var(--zbk-caution-ink-strong);
  }
  [class~="disabled:ink-caution-strong"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-caution-ink-strong);
  }
  .ink-caution-inverse {
    color: var(--zbk-caution-ink-inverse);
  }
  [class~="focus:ink-caution-inverse"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-caution-ink-inverse);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-caution-inverse:hover {
      color: var(--zbk-caution-ink-inverse);
    }
  }
  [class~="active:ink-caution-inverse"]:active {
    color: var(--zbk-caution-ink-inverse);
  }
  [class~="disabled:ink-caution-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-caution-ink-inverse);
  }
  .ink-caution-soft-inverse {
    color: var(--zbk-caution-ink-inverse-soft);
  }
  [class~="focus:ink-caution-soft-inverse"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-caution-ink-inverse-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-caution-soft-inverse:hover {
      color: var(--zbk-caution-ink-inverse-soft);
    }
  }
  [class~="active:ink-caution-soft-inverse"]:active {
    color: var(--zbk-caution-ink-inverse-soft);
  }
  [class~="disabled:ink-caution-soft-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-caution-ink-inverse-soft);
  }
  .ink-caution-muted-inverse {
    color: var(--zbk-caution-ink-inverse-muted);
  }
  [class~="focus:ink-caution-muted-inverse"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-caution-ink-inverse-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-caution-muted-inverse:hover {
      color: var(--zbk-caution-ink-inverse-muted);
    }
  }
  [class~="active:ink-caution-muted-inverse"]:active {
    color: var(--zbk-caution-ink-inverse-muted);
  }
  [class~="disabled:ink-caution-muted-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-caution-ink-inverse-muted);
  }
  .ink-caution-strong-inverse {
    color: var(--zbk-caution-ink-inverse-strong);
  }
  [class~="focus:ink-caution-strong-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    color: var(--zbk-caution-ink-inverse-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-caution-strong-inverse:hover {
      color: var(--zbk-caution-ink-inverse-strong);
    }
  }
  [class~="active:ink-caution-strong-inverse"]:active {
    color: var(--zbk-caution-ink-inverse-strong);
  }
  [class~="disabled:ink-caution-strong-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-caution-ink-inverse-strong);
  }
  .border-caution {
    border-color: var(--zbk-caution-border);
  }
  [class~="focus:border-caution"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-caution-border);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-caution:hover {
      border-color: var(--zbk-caution-border);
    }
  }
  [class~="active:border-caution"]:active {
    border-color: var(--zbk-caution-border);
  }
  [class~="disabled:border-caution"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-caution-border);
  }
  .border-caution-soft {
    border-color: var(--zbk-caution-border-soft);
  }
  [class~="focus:border-caution-soft"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-caution-border-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-caution-soft:hover {
      border-color: var(--zbk-caution-border-soft);
    }
  }
  [class~="active:border-caution-soft"]:active {
    border-color: var(--zbk-caution-border-soft);
  }
  [class~="disabled:border-caution-soft"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-caution-border-soft);
  }
  .border-caution-muted {
    border-color: var(--zbk-caution-border-muted);
  }
  [class~="focus:border-caution-muted"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-caution-border-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-caution-muted:hover {
      border-color: var(--zbk-caution-border-muted);
    }
  }
  [class~="active:border-caution-muted"]:active {
    border-color: var(--zbk-caution-border-muted);
  }
  [class~="disabled:border-caution-muted"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-caution-border-muted);
  }
  .border-caution-strong {
    border-color: var(--zbk-caution-border-strong);
  }
  [class~="focus:border-caution-strong"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-caution-border-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-caution-strong:hover {
      border-color: var(--zbk-caution-border-strong);
    }
  }
  [class~="active:border-caution-strong"]:active {
    border-color: var(--zbk-caution-border-strong);
  }
  [class~="disabled:border-caution-strong"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-caution-border-strong);
  }
  .border-caution-inverse {
    border-color: var(--zbk-caution-border-inverse);
  }
  [class~="focus:border-caution-inverse"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-caution-border-inverse);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-caution-inverse:hover {
      border-color: var(--zbk-caution-border-inverse);
    }
  }
  [class~="active:border-caution-inverse"]:active {
    border-color: var(--zbk-caution-border-inverse);
  }
  [class~="disabled:border-caution-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-caution-border-inverse);
  }
  .border-caution-soft-inverse {
    border-color: var(--zbk-caution-border-inverse-soft);
  }
  [class~="focus:border-caution-soft-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-caution-border-inverse-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-caution-soft-inverse:hover {
      border-color: var(--zbk-caution-border-inverse-soft);
    }
  }
  [class~="active:border-caution-soft-inverse"]:active {
    border-color: var(--zbk-caution-border-inverse-soft);
  }
  [class~="disabled:border-caution-soft-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-caution-border-inverse-soft);
  }
  .border-caution-muted-inverse {
    border-color: var(--zbk-caution-border-inverse-muted);
  }
  [class~="focus:border-caution-muted-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-caution-border-inverse-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-caution-muted-inverse:hover {
      border-color: var(--zbk-caution-border-inverse-muted);
    }
  }
  [class~="active:border-caution-muted-inverse"]:active {
    border-color: var(--zbk-caution-border-inverse-muted);
  }
  [class~="disabled:border-caution-muted-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-caution-border-inverse-muted);
  }
  .border-caution-strong-inverse {
    border-color: var(--zbk-caution-border-inverse-strong);
  }
  [class~="focus:border-caution-strong-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-caution-border-inverse-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-caution-strong-inverse:hover {
      border-color: var(--zbk-caution-border-inverse-strong);
    }
  }
  [class~="active:border-caution-strong-inverse"]:active {
    border-color: var(--zbk-caution-border-inverse-strong);
  }
  [class~="disabled:border-caution-strong-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-caution-border-inverse-strong);
  }
}
@layer utilities {
  .canvas-action {
    background-color: var(--zbk-action-canvas);
    background: var(--zbk-action-canvas);
  }
  [class~="focus:canvas-action"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-action-canvas);
    background: var(--zbk-action-canvas);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-action:hover {
      background-color: var(--zbk-action-canvas);
      background: var(--zbk-action-canvas);
    }
  }
  [class~="active:canvas-action"]:active {
    background-color: var(--zbk-action-canvas);
    background: var(--zbk-action-canvas);
  }
  [class~="disabled:canvas-action"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-action-canvas);
    background: var(--zbk-action-canvas);
  }
  .canvas-action-soft {
    background-color: var(--zbk-action-canvas-soft);
    background: var(--zbk-action-canvas-soft);
  }
  [class~="focus:canvas-action-soft"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-action-canvas-soft);
    background: var(--zbk-action-canvas-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-action-soft:hover {
      background-color: var(--zbk-action-canvas-soft);
      background: var(--zbk-action-canvas-soft);
    }
  }
  [class~="active:canvas-action-soft"]:active {
    background-color: var(--zbk-action-canvas-soft);
    background: var(--zbk-action-canvas-soft);
  }
  [class~="disabled:canvas-action-soft"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-action-canvas-soft);
    background: var(--zbk-action-canvas-soft);
  }
  .canvas-action-muted {
    background-color: var(--zbk-action-canvas-muted);
    background: var(--zbk-action-canvas-muted);
  }
  [class~="focus:canvas-action-muted"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-action-canvas-muted);
    background: var(--zbk-action-canvas-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-action-muted:hover {
      background-color: var(--zbk-action-canvas-muted);
      background: var(--zbk-action-canvas-muted);
    }
  }
  [class~="active:canvas-action-muted"]:active {
    background-color: var(--zbk-action-canvas-muted);
    background: var(--zbk-action-canvas-muted);
  }
  [class~="disabled:canvas-action-muted"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-action-canvas-muted);
    background: var(--zbk-action-canvas-muted);
  }
  .canvas-action-strong {
    background-color: var(--zbk-action-canvas-strong);
    background: var(--zbk-action-canvas-strong);
  }
  [class~="focus:canvas-action-strong"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-action-canvas-strong);
    background: var(--zbk-action-canvas-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-action-strong:hover {
      background-color: var(--zbk-action-canvas-strong);
      background: var(--zbk-action-canvas-strong);
    }
  }
  [class~="active:canvas-action-strong"]:active {
    background-color: var(--zbk-action-canvas-strong);
    background: var(--zbk-action-canvas-strong);
  }
  [class~="disabled:canvas-action-strong"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-action-canvas-strong);
    background: var(--zbk-action-canvas-strong);
  }
  .canvas-action-inverse {
    background-color: var(--zbk-action-canvas-inverse);
    background: var(--zbk-action-canvas-inverse);
  }
  [class~="focus:canvas-action-inverse"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-action-canvas-inverse);
    background: var(--zbk-action-canvas-inverse);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-action-inverse:hover {
      background-color: var(--zbk-action-canvas-inverse);
      background: var(--zbk-action-canvas-inverse);
    }
  }
  [class~="active:canvas-action-inverse"]:active {
    background-color: var(--zbk-action-canvas-inverse);
    background: var(--zbk-action-canvas-inverse);
  }
  [class~="disabled:canvas-action-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-action-canvas-inverse);
    background: var(--zbk-action-canvas-inverse);
  }
  .canvas-action-soft-inverse {
    background-color: var(--zbk-action-canvas-inverse-soft);
    background: var(--zbk-action-canvas-inverse-soft);
  }
  [class~="focus:canvas-action-soft-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-action-canvas-inverse-soft);
    background: var(--zbk-action-canvas-inverse-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-action-soft-inverse:hover {
      background-color: var(--zbk-action-canvas-inverse-soft);
      background: var(--zbk-action-canvas-inverse-soft);
    }
  }
  [class~="active:canvas-action-soft-inverse"]:active {
    background-color: var(--zbk-action-canvas-inverse-soft);
    background: var(--zbk-action-canvas-inverse-soft);
  }
  [class~="disabled:canvas-action-soft-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-action-canvas-inverse-soft);
    background: var(--zbk-action-canvas-inverse-soft);
  }
  .canvas-action-muted-inverse {
    background-color: var(--zbk-action-canvas-inverse-muted);
    background: var(--zbk-action-canvas-inverse-muted);
  }
  [class~="focus:canvas-action-muted-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-action-canvas-inverse-muted);
    background: var(--zbk-action-canvas-inverse-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-action-muted-inverse:hover {
      background-color: var(--zbk-action-canvas-inverse-muted);
      background: var(--zbk-action-canvas-inverse-muted);
    }
  }
  [class~="active:canvas-action-muted-inverse"]:active {
    background-color: var(--zbk-action-canvas-inverse-muted);
    background: var(--zbk-action-canvas-inverse-muted);
  }
  [class~="disabled:canvas-action-muted-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-action-canvas-inverse-muted);
    background: var(--zbk-action-canvas-inverse-muted);
  }
  .canvas-action-strong-inverse {
    background-color: var(--zbk-action-canvas-inverse-strong);
    background: var(--zbk-action-canvas-inverse-strong);
  }
  [class~="focus:canvas-action-strong-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-action-canvas-inverse-strong);
    background: var(--zbk-action-canvas-inverse-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-action-strong-inverse:hover {
      background-color: var(--zbk-action-canvas-inverse-strong);
      background: var(--zbk-action-canvas-inverse-strong);
    }
  }
  [class~="active:canvas-action-strong-inverse"]:active {
    background-color: var(--zbk-action-canvas-inverse-strong);
    background: var(--zbk-action-canvas-inverse-strong);
  }
  [class~="disabled:canvas-action-strong-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-action-canvas-inverse-strong);
    background: var(--zbk-action-canvas-inverse-strong);
  }
  .ink-action {
    color: var(--zbk-action-ink);
  }
  [class~="focus:ink-action"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-action-ink);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-action:hover {
      color: var(--zbk-action-ink);
    }
  }
  [class~="active:ink-action"]:active {
    color: var(--zbk-action-ink);
  }
  [class~="disabled:ink-action"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-action-ink);
  }
  .ink-action-soft {
    color: var(--zbk-action-ink-soft);
  }
  [class~="focus:ink-action-soft"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-action-ink-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-action-soft:hover {
      color: var(--zbk-action-ink-soft);
    }
  }
  [class~="active:ink-action-soft"]:active {
    color: var(--zbk-action-ink-soft);
  }
  [class~="disabled:ink-action-soft"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-action-ink-soft);
  }
  .ink-action-muted {
    color: var(--zbk-action-ink-muted);
  }
  [class~="focus:ink-action-muted"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-action-ink-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-action-muted:hover {
      color: var(--zbk-action-ink-muted);
    }
  }
  [class~="active:ink-action-muted"]:active {
    color: var(--zbk-action-ink-muted);
  }
  [class~="disabled:ink-action-muted"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-action-ink-muted);
  }
  .ink-action-strong {
    color: var(--zbk-action-ink-strong);
  }
  [class~="focus:ink-action-strong"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-action-ink-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-action-strong:hover {
      color: var(--zbk-action-ink-strong);
    }
  }
  [class~="active:ink-action-strong"]:active {
    color: var(--zbk-action-ink-strong);
  }
  [class~="disabled:ink-action-strong"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-action-ink-strong);
  }
  .ink-action-inverse {
    color: var(--zbk-action-ink-inverse);
  }
  [class~="focus:ink-action-inverse"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-action-ink-inverse);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-action-inverse:hover {
      color: var(--zbk-action-ink-inverse);
    }
  }
  [class~="active:ink-action-inverse"]:active {
    color: var(--zbk-action-ink-inverse);
  }
  [class~="disabled:ink-action-inverse"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-action-ink-inverse);
  }
  .ink-action-soft-inverse {
    color: var(--zbk-action-ink-inverse-soft);
  }
  [class~="focus:ink-action-soft-inverse"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-action-ink-inverse-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-action-soft-inverse:hover {
      color: var(--zbk-action-ink-inverse-soft);
    }
  }
  [class~="active:ink-action-soft-inverse"]:active {
    color: var(--zbk-action-ink-inverse-soft);
  }
  [class~="disabled:ink-action-soft-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-action-ink-inverse-soft);
  }
  .ink-action-muted-inverse {
    color: var(--zbk-action-ink-inverse-muted);
  }
  [class~="focus:ink-action-muted-inverse"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-action-ink-inverse-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-action-muted-inverse:hover {
      color: var(--zbk-action-ink-inverse-muted);
    }
  }
  [class~="active:ink-action-muted-inverse"]:active {
    color: var(--zbk-action-ink-inverse-muted);
  }
  [class~="disabled:ink-action-muted-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-action-ink-inverse-muted);
  }
  .ink-action-strong-inverse {
    color: var(--zbk-action-ink-inverse-strong);
  }
  [class~="focus:ink-action-strong-inverse"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-action-ink-inverse-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-action-strong-inverse:hover {
      color: var(--zbk-action-ink-inverse-strong);
    }
  }
  [class~="active:ink-action-strong-inverse"]:active {
    color: var(--zbk-action-ink-inverse-strong);
  }
  [class~="disabled:ink-action-strong-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-action-ink-inverse-strong);
  }
  .border-action {
    border-color: var(--zbk-action-border);
  }
  [class~="focus:border-action"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-action-border);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-action:hover {
      border-color: var(--zbk-action-border);
    }
  }
  [class~="active:border-action"]:active {
    border-color: var(--zbk-action-border);
  }
  [class~="disabled:border-action"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-action-border);
  }
  .border-action-soft {
    border-color: var(--zbk-action-border-soft);
  }
  [class~="focus:border-action-soft"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-action-border-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-action-soft:hover {
      border-color: var(--zbk-action-border-soft);
    }
  }
  [class~="active:border-action-soft"]:active {
    border-color: var(--zbk-action-border-soft);
  }
  [class~="disabled:border-action-soft"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-action-border-soft);
  }
  .border-action-muted {
    border-color: var(--zbk-action-border-muted);
  }
  [class~="focus:border-action-muted"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-action-border-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-action-muted:hover {
      border-color: var(--zbk-action-border-muted);
    }
  }
  [class~="active:border-action-muted"]:active {
    border-color: var(--zbk-action-border-muted);
  }
  [class~="disabled:border-action-muted"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-action-border-muted);
  }
  .border-action-strong {
    border-color: var(--zbk-action-border-strong);
  }
  [class~="focus:border-action-strong"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-action-border-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-action-strong:hover {
      border-color: var(--zbk-action-border-strong);
    }
  }
  [class~="active:border-action-strong"]:active {
    border-color: var(--zbk-action-border-strong);
  }
  [class~="disabled:border-action-strong"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-action-border-strong);
  }
  .border-action-inverse {
    border-color: var(--zbk-action-border-inverse);
  }
  [class~="focus:border-action-inverse"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-action-border-inverse);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-action-inverse:hover {
      border-color: var(--zbk-action-border-inverse);
    }
  }
  [class~="active:border-action-inverse"]:active {
    border-color: var(--zbk-action-border-inverse);
  }
  [class~="disabled:border-action-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-action-border-inverse);
  }
  .border-action-soft-inverse {
    border-color: var(--zbk-action-border-inverse-soft);
  }
  [class~="focus:border-action-soft-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-action-border-inverse-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-action-soft-inverse:hover {
      border-color: var(--zbk-action-border-inverse-soft);
    }
  }
  [class~="active:border-action-soft-inverse"]:active {
    border-color: var(--zbk-action-border-inverse-soft);
  }
  [class~="disabled:border-action-soft-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-action-border-inverse-soft);
  }
  .border-action-muted-inverse {
    border-color: var(--zbk-action-border-inverse-muted);
  }
  [class~="focus:border-action-muted-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-action-border-inverse-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-action-muted-inverse:hover {
      border-color: var(--zbk-action-border-inverse-muted);
    }
  }
  [class~="active:border-action-muted-inverse"]:active {
    border-color: var(--zbk-action-border-inverse-muted);
  }
  [class~="disabled:border-action-muted-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-action-border-inverse-muted);
  }
  .border-action-strong-inverse {
    border-color: var(--zbk-action-border-inverse-strong);
  }
  [class~="focus:border-action-strong-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-action-border-inverse-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-action-strong-inverse:hover {
      border-color: var(--zbk-action-border-inverse-strong);
    }
  }
  [class~="active:border-action-strong-inverse"]:active {
    border-color: var(--zbk-action-border-inverse-strong);
  }
  [class~="disabled:border-action-strong-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-action-border-inverse-strong);
  }
}
@layer utilities {
  .ink-neutral-50 {
    color: var(--zbk-neutral-50);
  }
  [class~="focus:ink-neutral-50"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-neutral-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-neutral-50:hover {
      color: var(--zbk-neutral-50);
    }
  }
  [class~="active:ink-neutral-50"]:active {
    color: var(--zbk-neutral-50);
  }
  [class~="disabled:ink-neutral-50"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-neutral-50);
  }
  .canvas-neutral-50 {
    background-color: var(--zbk-neutral-50);
  }
  [class~="focus:canvas-neutral-50"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-neutral-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-neutral-50:hover {
      background-color: var(--zbk-neutral-50);
    }
  }
  [class~="active:canvas-neutral-50"]:active {
    background-color: var(--zbk-neutral-50);
  }
  [class~="disabled:canvas-neutral-50"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-neutral-50);
  }
  .border-neutral-50 {
    border-color: var(--zbk-neutral-50);
  }
  [class~="focus:border-neutral-50"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-neutral-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-neutral-50:hover {
      border-color: var(--zbk-neutral-50);
    }
  }
  [class~="active:border-neutral-50"]:active {
    border-color: var(--zbk-neutral-50);
  }
  [class~="disabled:border-neutral-50"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-neutral-50);
  }
  .fill-neutral-50 {
    fill: var(--zbk-neutral-50);
  }
  [class~="focus:fill-neutral-50"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-neutral-50);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-neutral-50:hover {
      fill: var(--zbk-neutral-50);
    }
  }
  [class~="active:fill-neutral-50"]:active {
    fill: var(--zbk-neutral-50);
  }
  [class~="disabled:fill-neutral-50"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-neutral-50);
  }
  .ink-neutral-100 {
    color: var(--zbk-neutral-100);
  }
  [class~="focus:ink-neutral-100"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-neutral-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-neutral-100:hover {
      color: var(--zbk-neutral-100);
    }
  }
  [class~="active:ink-neutral-100"]:active {
    color: var(--zbk-neutral-100);
  }
  [class~="disabled:ink-neutral-100"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-neutral-100);
  }
  .canvas-neutral-100 {
    background-color: var(--zbk-neutral-100);
  }
  [class~="focus:canvas-neutral-100"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-neutral-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-neutral-100:hover {
      background-color: var(--zbk-neutral-100);
    }
  }
  [class~="active:canvas-neutral-100"]:active {
    background-color: var(--zbk-neutral-100);
  }
  [class~="disabled:canvas-neutral-100"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-neutral-100);
  }
  .border-neutral-100 {
    border-color: var(--zbk-neutral-100);
  }
  [class~="focus:border-neutral-100"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-neutral-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-neutral-100:hover {
      border-color: var(--zbk-neutral-100);
    }
  }
  [class~="active:border-neutral-100"]:active {
    border-color: var(--zbk-neutral-100);
  }
  [class~="disabled:border-neutral-100"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-neutral-100);
  }
  .fill-neutral-100 {
    fill: var(--zbk-neutral-100);
  }
  [class~="focus:fill-neutral-100"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-neutral-100);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-neutral-100:hover {
      fill: var(--zbk-neutral-100);
    }
  }
  [class~="active:fill-neutral-100"]:active {
    fill: var(--zbk-neutral-100);
  }
  [class~="disabled:fill-neutral-100"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-neutral-100);
  }
  .ink-neutral-200 {
    color: var(--zbk-neutral-200);
  }
  [class~="focus:ink-neutral-200"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-neutral-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-neutral-200:hover {
      color: var(--zbk-neutral-200);
    }
  }
  [class~="active:ink-neutral-200"]:active {
    color: var(--zbk-neutral-200);
  }
  [class~="disabled:ink-neutral-200"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-neutral-200);
  }
  .canvas-neutral-200 {
    background-color: var(--zbk-neutral-200);
  }
  [class~="focus:canvas-neutral-200"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-neutral-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-neutral-200:hover {
      background-color: var(--zbk-neutral-200);
    }
  }
  [class~="active:canvas-neutral-200"]:active {
    background-color: var(--zbk-neutral-200);
  }
  [class~="disabled:canvas-neutral-200"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-neutral-200);
  }
  .border-neutral-200 {
    border-color: var(--zbk-neutral-200);
  }
  [class~="focus:border-neutral-200"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-neutral-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-neutral-200:hover {
      border-color: var(--zbk-neutral-200);
    }
  }
  [class~="active:border-neutral-200"]:active {
    border-color: var(--zbk-neutral-200);
  }
  [class~="disabled:border-neutral-200"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-neutral-200);
  }
  .fill-neutral-200 {
    fill: var(--zbk-neutral-200);
  }
  [class~="focus:fill-neutral-200"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-neutral-200);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-neutral-200:hover {
      fill: var(--zbk-neutral-200);
    }
  }
  [class~="active:fill-neutral-200"]:active {
    fill: var(--zbk-neutral-200);
  }
  [class~="disabled:fill-neutral-200"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-neutral-200);
  }
  .ink-neutral-300 {
    color: var(--zbk-neutral-300);
  }
  [class~="focus:ink-neutral-300"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-neutral-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-neutral-300:hover {
      color: var(--zbk-neutral-300);
    }
  }
  [class~="active:ink-neutral-300"]:active {
    color: var(--zbk-neutral-300);
  }
  [class~="disabled:ink-neutral-300"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-neutral-300);
  }
  .canvas-neutral-300 {
    background-color: var(--zbk-neutral-300);
  }
  [class~="focus:canvas-neutral-300"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-neutral-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-neutral-300:hover {
      background-color: var(--zbk-neutral-300);
    }
  }
  [class~="active:canvas-neutral-300"]:active {
    background-color: var(--zbk-neutral-300);
  }
  [class~="disabled:canvas-neutral-300"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-neutral-300);
  }
  .border-neutral-300 {
    border-color: var(--zbk-neutral-300);
  }
  [class~="focus:border-neutral-300"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-neutral-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-neutral-300:hover {
      border-color: var(--zbk-neutral-300);
    }
  }
  [class~="active:border-neutral-300"]:active {
    border-color: var(--zbk-neutral-300);
  }
  [class~="disabled:border-neutral-300"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-neutral-300);
  }
  .fill-neutral-300 {
    fill: var(--zbk-neutral-300);
  }
  [class~="focus:fill-neutral-300"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-neutral-300);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-neutral-300:hover {
      fill: var(--zbk-neutral-300);
    }
  }
  [class~="active:fill-neutral-300"]:active {
    fill: var(--zbk-neutral-300);
  }
  [class~="disabled:fill-neutral-300"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-neutral-300);
  }
  .ink-neutral-400 {
    color: var(--zbk-neutral-400);
  }
  [class~="focus:ink-neutral-400"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-neutral-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-neutral-400:hover {
      color: var(--zbk-neutral-400);
    }
  }
  [class~="active:ink-neutral-400"]:active {
    color: var(--zbk-neutral-400);
  }
  [class~="disabled:ink-neutral-400"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-neutral-400);
  }
  .canvas-neutral-400 {
    background-color: var(--zbk-neutral-400);
  }
  [class~="focus:canvas-neutral-400"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-neutral-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-neutral-400:hover {
      background-color: var(--zbk-neutral-400);
    }
  }
  [class~="active:canvas-neutral-400"]:active {
    background-color: var(--zbk-neutral-400);
  }
  [class~="disabled:canvas-neutral-400"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-neutral-400);
  }
  .border-neutral-400 {
    border-color: var(--zbk-neutral-400);
  }
  [class~="focus:border-neutral-400"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-neutral-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-neutral-400:hover {
      border-color: var(--zbk-neutral-400);
    }
  }
  [class~="active:border-neutral-400"]:active {
    border-color: var(--zbk-neutral-400);
  }
  [class~="disabled:border-neutral-400"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-neutral-400);
  }
  .fill-neutral-400 {
    fill: var(--zbk-neutral-400);
  }
  [class~="focus:fill-neutral-400"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-neutral-400);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-neutral-400:hover {
      fill: var(--zbk-neutral-400);
    }
  }
  [class~="active:fill-neutral-400"]:active {
    fill: var(--zbk-neutral-400);
  }
  [class~="disabled:fill-neutral-400"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-neutral-400);
  }
  .ink-neutral-500 {
    color: var(--zbk-neutral-500);
  }
  [class~="focus:ink-neutral-500"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-neutral-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-neutral-500:hover {
      color: var(--zbk-neutral-500);
    }
  }
  [class~="active:ink-neutral-500"]:active {
    color: var(--zbk-neutral-500);
  }
  [class~="disabled:ink-neutral-500"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-neutral-500);
  }
  .canvas-neutral-500 {
    background-color: var(--zbk-neutral-500);
  }
  [class~="focus:canvas-neutral-500"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-neutral-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-neutral-500:hover {
      background-color: var(--zbk-neutral-500);
    }
  }
  [class~="active:canvas-neutral-500"]:active {
    background-color: var(--zbk-neutral-500);
  }
  [class~="disabled:canvas-neutral-500"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-neutral-500);
  }
  .border-neutral-500 {
    border-color: var(--zbk-neutral-500);
  }
  [class~="focus:border-neutral-500"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-neutral-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-neutral-500:hover {
      border-color: var(--zbk-neutral-500);
    }
  }
  [class~="active:border-neutral-500"]:active {
    border-color: var(--zbk-neutral-500);
  }
  [class~="disabled:border-neutral-500"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-neutral-500);
  }
  .fill-neutral-500 {
    fill: var(--zbk-neutral-500);
  }
  [class~="focus:fill-neutral-500"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-neutral-500);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-neutral-500:hover {
      fill: var(--zbk-neutral-500);
    }
  }
  [class~="active:fill-neutral-500"]:active {
    fill: var(--zbk-neutral-500);
  }
  [class~="disabled:fill-neutral-500"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-neutral-500);
  }
  .ink-neutral-600 {
    color: var(--zbk-neutral-600);
  }
  [class~="focus:ink-neutral-600"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-neutral-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-neutral-600:hover {
      color: var(--zbk-neutral-600);
    }
  }
  [class~="active:ink-neutral-600"]:active {
    color: var(--zbk-neutral-600);
  }
  [class~="disabled:ink-neutral-600"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-neutral-600);
  }
  .canvas-neutral-600 {
    background-color: var(--zbk-neutral-600);
  }
  [class~="focus:canvas-neutral-600"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-neutral-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-neutral-600:hover {
      background-color: var(--zbk-neutral-600);
    }
  }
  [class~="active:canvas-neutral-600"]:active {
    background-color: var(--zbk-neutral-600);
  }
  [class~="disabled:canvas-neutral-600"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-neutral-600);
  }
  .border-neutral-600 {
    border-color: var(--zbk-neutral-600);
  }
  [class~="focus:border-neutral-600"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-neutral-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-neutral-600:hover {
      border-color: var(--zbk-neutral-600);
    }
  }
  [class~="active:border-neutral-600"]:active {
    border-color: var(--zbk-neutral-600);
  }
  [class~="disabled:border-neutral-600"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-neutral-600);
  }
  .fill-neutral-600 {
    fill: var(--zbk-neutral-600);
  }
  [class~="focus:fill-neutral-600"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-neutral-600);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-neutral-600:hover {
      fill: var(--zbk-neutral-600);
    }
  }
  [class~="active:fill-neutral-600"]:active {
    fill: var(--zbk-neutral-600);
  }
  [class~="disabled:fill-neutral-600"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-neutral-600);
  }
  .ink-neutral-700 {
    color: var(--zbk-neutral-700);
  }
  [class~="focus:ink-neutral-700"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-neutral-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-neutral-700:hover {
      color: var(--zbk-neutral-700);
    }
  }
  [class~="active:ink-neutral-700"]:active {
    color: var(--zbk-neutral-700);
  }
  [class~="disabled:ink-neutral-700"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-neutral-700);
  }
  .canvas-neutral-700 {
    background-color: var(--zbk-neutral-700);
  }
  [class~="focus:canvas-neutral-700"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-neutral-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-neutral-700:hover {
      background-color: var(--zbk-neutral-700);
    }
  }
  [class~="active:canvas-neutral-700"]:active {
    background-color: var(--zbk-neutral-700);
  }
  [class~="disabled:canvas-neutral-700"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-neutral-700);
  }
  .border-neutral-700 {
    border-color: var(--zbk-neutral-700);
  }
  [class~="focus:border-neutral-700"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-neutral-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-neutral-700:hover {
      border-color: var(--zbk-neutral-700);
    }
  }
  [class~="active:border-neutral-700"]:active {
    border-color: var(--zbk-neutral-700);
  }
  [class~="disabled:border-neutral-700"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-neutral-700);
  }
  .fill-neutral-700 {
    fill: var(--zbk-neutral-700);
  }
  [class~="focus:fill-neutral-700"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-neutral-700);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-neutral-700:hover {
      fill: var(--zbk-neutral-700);
    }
  }
  [class~="active:fill-neutral-700"]:active {
    fill: var(--zbk-neutral-700);
  }
  [class~="disabled:fill-neutral-700"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-neutral-700);
  }
  .ink-neutral-800 {
    color: var(--zbk-neutral-800);
  }
  [class~="focus:ink-neutral-800"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-neutral-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-neutral-800:hover {
      color: var(--zbk-neutral-800);
    }
  }
  [class~="active:ink-neutral-800"]:active {
    color: var(--zbk-neutral-800);
  }
  [class~="disabled:ink-neutral-800"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-neutral-800);
  }
  .canvas-neutral-800 {
    background-color: var(--zbk-neutral-800);
  }
  [class~="focus:canvas-neutral-800"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-neutral-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-neutral-800:hover {
      background-color: var(--zbk-neutral-800);
    }
  }
  [class~="active:canvas-neutral-800"]:active {
    background-color: var(--zbk-neutral-800);
  }
  [class~="disabled:canvas-neutral-800"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-neutral-800);
  }
  .border-neutral-800 {
    border-color: var(--zbk-neutral-800);
  }
  [class~="focus:border-neutral-800"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-neutral-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-neutral-800:hover {
      border-color: var(--zbk-neutral-800);
    }
  }
  [class~="active:border-neutral-800"]:active {
    border-color: var(--zbk-neutral-800);
  }
  [class~="disabled:border-neutral-800"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-neutral-800);
  }
  .fill-neutral-800 {
    fill: var(--zbk-neutral-800);
  }
  [class~="focus:fill-neutral-800"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-neutral-800);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-neutral-800:hover {
      fill: var(--zbk-neutral-800);
    }
  }
  [class~="active:fill-neutral-800"]:active {
    fill: var(--zbk-neutral-800);
  }
  [class~="disabled:fill-neutral-800"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-neutral-800);
  }
  .ink-neutral-900 {
    color: var(--zbk-neutral-900);
  }
  [class~="focus:ink-neutral-900"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-neutral-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-neutral-900:hover {
      color: var(--zbk-neutral-900);
    }
  }
  [class~="active:ink-neutral-900"]:active {
    color: var(--zbk-neutral-900);
  }
  [class~="disabled:ink-neutral-900"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-neutral-900);
  }
  .canvas-neutral-900 {
    background-color: var(--zbk-neutral-900);
  }
  [class~="focus:canvas-neutral-900"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-neutral-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-neutral-900:hover {
      background-color: var(--zbk-neutral-900);
    }
  }
  [class~="active:canvas-neutral-900"]:active {
    background-color: var(--zbk-neutral-900);
  }
  [class~="disabled:canvas-neutral-900"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-neutral-900);
  }
  .border-neutral-900 {
    border-color: var(--zbk-neutral-900);
  }
  [class~="focus:border-neutral-900"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-neutral-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-neutral-900:hover {
      border-color: var(--zbk-neutral-900);
    }
  }
  [class~="active:border-neutral-900"]:active {
    border-color: var(--zbk-neutral-900);
  }
  [class~="disabled:border-neutral-900"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-neutral-900);
  }
  .fill-neutral-900 {
    fill: var(--zbk-neutral-900);
  }
  [class~="focus:fill-neutral-900"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-neutral-900);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-neutral-900:hover {
      fill: var(--zbk-neutral-900);
    }
  }
  [class~="active:fill-neutral-900"]:active {
    fill: var(--zbk-neutral-900);
  }
  [class~="disabled:fill-neutral-900"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-neutral-900);
  }
  .ink-neutral-950 {
    color: var(--zbk-neutral-950);
  }
  [class~="focus:ink-neutral-950"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-neutral-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-neutral-950:hover {
      color: var(--zbk-neutral-950);
    }
  }
  [class~="active:ink-neutral-950"]:active {
    color: var(--zbk-neutral-950);
  }
  [class~="disabled:ink-neutral-950"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-neutral-950);
  }
  .canvas-neutral-950 {
    background-color: var(--zbk-neutral-950);
  }
  [class~="focus:canvas-neutral-950"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-neutral-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-neutral-950:hover {
      background-color: var(--zbk-neutral-950);
    }
  }
  [class~="active:canvas-neutral-950"]:active {
    background-color: var(--zbk-neutral-950);
  }
  [class~="disabled:canvas-neutral-950"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-neutral-950);
  }
  .border-neutral-950 {
    border-color: var(--zbk-neutral-950);
  }
  [class~="focus:border-neutral-950"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-neutral-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-neutral-950:hover {
      border-color: var(--zbk-neutral-950);
    }
  }
  [class~="active:border-neutral-950"]:active {
    border-color: var(--zbk-neutral-950);
  }
  [class~="disabled:border-neutral-950"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-neutral-950);
  }
  .fill-neutral-950 {
    fill: var(--zbk-neutral-950);
  }
  [class~="focus:fill-neutral-950"]:is(:focus-visible, :focus-within) {
    fill: var(--zbk-neutral-950);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:fill-neutral-950:hover {
      fill: var(--zbk-neutral-950);
    }
  }
  [class~="active:fill-neutral-950"]:active {
    fill: var(--zbk-neutral-950);
  }
  [class~="disabled:fill-neutral-950"]:is(:disabled, [aria-disabled="true"]) {
    fill: var(--zbk-neutral-950);
  }
}
@layer utilities {
  .canvas-app {
    background-color: var(--zbk-app-canvas);
    background: var(--zbk-app-canvas);
  }
  [class~="focus:canvas-app"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-app-canvas);
    background: var(--zbk-app-canvas);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-app:hover {
      background-color: var(--zbk-app-canvas);
      background: var(--zbk-app-canvas);
    }
  }
  [class~="active:canvas-app"]:active {
    background-color: var(--zbk-app-canvas);
    background: var(--zbk-app-canvas);
  }
  [class~="disabled:canvas-app"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-app-canvas);
    background: var(--zbk-app-canvas);
  }
  .canvas-app-soft {
    background-color: var(--zbk-app-canvas-soft);
    background: var(--zbk-app-canvas-soft);
  }
  [class~="focus:canvas-app-soft"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-app-canvas-soft);
    background: var(--zbk-app-canvas-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-app-soft:hover {
      background-color: var(--zbk-app-canvas-soft);
      background: var(--zbk-app-canvas-soft);
    }
  }
  [class~="active:canvas-app-soft"]:active {
    background-color: var(--zbk-app-canvas-soft);
    background: var(--zbk-app-canvas-soft);
  }
  [class~="disabled:canvas-app-soft"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-app-canvas-soft);
    background: var(--zbk-app-canvas-soft);
  }
  .canvas-app-muted {
    background-color: var(--zbk-app-canvas-muted);
    background: var(--zbk-app-canvas-muted);
  }
  [class~="focus:canvas-app-muted"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-app-canvas-muted);
    background: var(--zbk-app-canvas-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-app-muted:hover {
      background-color: var(--zbk-app-canvas-muted);
      background: var(--zbk-app-canvas-muted);
    }
  }
  [class~="active:canvas-app-muted"]:active {
    background-color: var(--zbk-app-canvas-muted);
    background: var(--zbk-app-canvas-muted);
  }
  [class~="disabled:canvas-app-muted"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-app-canvas-muted);
    background: var(--zbk-app-canvas-muted);
  }
  .canvas-app-strong {
    background-color: var(--zbk-app-canvas-strong);
    background: var(--zbk-app-canvas-strong);
  }
  [class~="focus:canvas-app-strong"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-app-canvas-strong);
    background: var(--zbk-app-canvas-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-app-strong:hover {
      background-color: var(--zbk-app-canvas-strong);
      background: var(--zbk-app-canvas-strong);
    }
  }
  [class~="active:canvas-app-strong"]:active {
    background-color: var(--zbk-app-canvas-strong);
    background: var(--zbk-app-canvas-strong);
  }
  [class~="disabled:canvas-app-strong"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-app-canvas-strong);
    background: var(--zbk-app-canvas-strong);
  }
  .canvas-app-inverse {
    background-color: var(--zbk-app-canvas-inverse);
    background: var(--zbk-app-canvas-inverse);
  }
  [class~="focus:canvas-app-inverse"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-app-canvas-inverse);
    background: var(--zbk-app-canvas-inverse);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-app-inverse:hover {
      background-color: var(--zbk-app-canvas-inverse);
      background: var(--zbk-app-canvas-inverse);
    }
  }
  [class~="active:canvas-app-inverse"]:active {
    background-color: var(--zbk-app-canvas-inverse);
    background: var(--zbk-app-canvas-inverse);
  }
  [class~="disabled:canvas-app-inverse"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-app-canvas-inverse);
    background: var(--zbk-app-canvas-inverse);
  }
  .canvas-app-soft-inverse {
    background-color: var(--zbk-app-canvas-inverse-soft);
    background: var(--zbk-app-canvas-inverse-soft);
  }
  [class~="focus:canvas-app-soft-inverse"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-app-canvas-inverse-soft);
    background: var(--zbk-app-canvas-inverse-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-app-soft-inverse:hover {
      background-color: var(--zbk-app-canvas-inverse-soft);
      background: var(--zbk-app-canvas-inverse-soft);
    }
  }
  [class~="active:canvas-app-soft-inverse"]:active {
    background-color: var(--zbk-app-canvas-inverse-soft);
    background: var(--zbk-app-canvas-inverse-soft);
  }
  [class~="disabled:canvas-app-soft-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-app-canvas-inverse-soft);
    background: var(--zbk-app-canvas-inverse-soft);
  }
  .canvas-app-muted-inverse {
    background-color: var(--zbk-app-canvas-inverse-muted);
    background: var(--zbk-app-canvas-inverse-muted);
  }
  [class~="focus:canvas-app-muted-inverse"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-app-canvas-inverse-muted);
    background: var(--zbk-app-canvas-inverse-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-app-muted-inverse:hover {
      background-color: var(--zbk-app-canvas-inverse-muted);
      background: var(--zbk-app-canvas-inverse-muted);
    }
  }
  [class~="active:canvas-app-muted-inverse"]:active {
    background-color: var(--zbk-app-canvas-inverse-muted);
    background: var(--zbk-app-canvas-inverse-muted);
  }
  [class~="disabled:canvas-app-muted-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-app-canvas-inverse-muted);
    background: var(--zbk-app-canvas-inverse-muted);
  }
  .canvas-app-strong-inverse {
    background-color: var(--zbk-app-canvas-inverse-strong);
    background: var(--zbk-app-canvas-inverse-strong);
  }
  [class~="focus:canvas-app-strong-inverse"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-app-canvas-inverse-strong);
    background: var(--zbk-app-canvas-inverse-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-app-strong-inverse:hover {
      background-color: var(--zbk-app-canvas-inverse-strong);
      background: var(--zbk-app-canvas-inverse-strong);
    }
  }
  [class~="active:canvas-app-strong-inverse"]:active {
    background-color: var(--zbk-app-canvas-inverse-strong);
    background: var(--zbk-app-canvas-inverse-strong);
  }
  [class~="disabled:canvas-app-strong-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-app-canvas-inverse-strong);
    background: var(--zbk-app-canvas-inverse-strong);
  }
  .ink-app {
    color: var(--zbk-app-ink);
  }
  [class~="focus:ink-app"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-app-ink);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-app:hover {
      color: var(--zbk-app-ink);
    }
  }
  [class~="active:ink-app"]:active {
    color: var(--zbk-app-ink);
  }
  [class~="disabled:ink-app"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-app-ink);
  }
  .ink-app-soft {
    color: var(--zbk-app-ink-soft);
  }
  [class~="focus:ink-app-soft"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-app-ink-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-app-soft:hover {
      color: var(--zbk-app-ink-soft);
    }
  }
  [class~="active:ink-app-soft"]:active {
    color: var(--zbk-app-ink-soft);
  }
  [class~="disabled:ink-app-soft"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-app-ink-soft);
  }
  .ink-app-muted {
    color: var(--zbk-app-ink-muted);
  }
  [class~="focus:ink-app-muted"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-app-ink-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-app-muted:hover {
      color: var(--zbk-app-ink-muted);
    }
  }
  [class~="active:ink-app-muted"]:active {
    color: var(--zbk-app-ink-muted);
  }
  [class~="disabled:ink-app-muted"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-app-ink-muted);
  }
  .ink-app-strong {
    color: var(--zbk-app-ink-strong);
  }
  [class~="focus:ink-app-strong"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-app-ink-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-app-strong:hover {
      color: var(--zbk-app-ink-strong);
    }
  }
  [class~="active:ink-app-strong"]:active {
    color: var(--zbk-app-ink-strong);
  }
  [class~="disabled:ink-app-strong"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-app-ink-strong);
  }
  .ink-app-inverse {
    color: var(--zbk-app-ink-inverse);
  }
  [class~="focus:ink-app-inverse"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-app-ink-inverse);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-app-inverse:hover {
      color: var(--zbk-app-ink-inverse);
    }
  }
  [class~="active:ink-app-inverse"]:active {
    color: var(--zbk-app-ink-inverse);
  }
  [class~="disabled:ink-app-inverse"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-app-ink-inverse);
  }
  .ink-app-soft-inverse {
    color: var(--zbk-app-ink-inverse-soft);
  }
  [class~="focus:ink-app-soft-inverse"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-app-ink-inverse-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-app-soft-inverse:hover {
      color: var(--zbk-app-ink-inverse-soft);
    }
  }
  [class~="active:ink-app-soft-inverse"]:active {
    color: var(--zbk-app-ink-inverse-soft);
  }
  [class~="disabled:ink-app-soft-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-app-ink-inverse-soft);
  }
  .ink-app-muted-inverse {
    color: var(--zbk-app-ink-inverse-muted);
  }
  [class~="focus:ink-app-muted-inverse"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-app-ink-inverse-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-app-muted-inverse:hover {
      color: var(--zbk-app-ink-inverse-muted);
    }
  }
  [class~="active:ink-app-muted-inverse"]:active {
    color: var(--zbk-app-ink-inverse-muted);
  }
  [class~="disabled:ink-app-muted-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-app-ink-inverse-muted);
  }
  .ink-app-strong-inverse {
    color: var(--zbk-app-ink-inverse-strong);
  }
  [class~="focus:ink-app-strong-inverse"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-app-ink-inverse-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-app-strong-inverse:hover {
      color: var(--zbk-app-ink-inverse-strong);
    }
  }
  [class~="active:ink-app-strong-inverse"]:active {
    color: var(--zbk-app-ink-inverse-strong);
  }
  [class~="disabled:ink-app-strong-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-app-ink-inverse-strong);
  }
  .border-app {
    border-color: var(--zbk-app-border);
  }
  [class~="focus:border-app"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-app-border);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-app:hover {
      border-color: var(--zbk-app-border);
    }
  }
  [class~="active:border-app"]:active {
    border-color: var(--zbk-app-border);
  }
  [class~="disabled:border-app"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-app-border);
  }
  .border-app-soft {
    border-color: var(--zbk-app-border-soft);
  }
  [class~="focus:border-app-soft"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-app-border-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-app-soft:hover {
      border-color: var(--zbk-app-border-soft);
    }
  }
  [class~="active:border-app-soft"]:active {
    border-color: var(--zbk-app-border-soft);
  }
  [class~="disabled:border-app-soft"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-app-border-soft);
  }
  .border-app-muted {
    border-color: var(--zbk-app-border-muted);
  }
  [class~="focus:border-app-muted"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-app-border-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-app-muted:hover {
      border-color: var(--zbk-app-border-muted);
    }
  }
  [class~="active:border-app-muted"]:active {
    border-color: var(--zbk-app-border-muted);
  }
  [class~="disabled:border-app-muted"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-app-border-muted);
  }
  .border-app-strong {
    border-color: var(--zbk-app-border-strong);
  }
  [class~="focus:border-app-strong"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-app-border-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-app-strong:hover {
      border-color: var(--zbk-app-border-strong);
    }
  }
  [class~="active:border-app-strong"]:active {
    border-color: var(--zbk-app-border-strong);
  }
  [class~="disabled:border-app-strong"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-app-border-strong);
  }
  .border-app-inverse {
    border-color: var(--zbk-app-border-inverse);
  }
  [class~="focus:border-app-inverse"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-app-border-inverse);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-app-inverse:hover {
      border-color: var(--zbk-app-border-inverse);
    }
  }
  [class~="active:border-app-inverse"]:active {
    border-color: var(--zbk-app-border-inverse);
  }
  [class~="disabled:border-app-inverse"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-app-border-inverse);
  }
  .border-app-soft-inverse {
    border-color: var(--zbk-app-border-inverse-soft);
  }
  [class~="focus:border-app-soft-inverse"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-app-border-inverse-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-app-soft-inverse:hover {
      border-color: var(--zbk-app-border-inverse-soft);
    }
  }
  [class~="active:border-app-soft-inverse"]:active {
    border-color: var(--zbk-app-border-inverse-soft);
  }
  [class~="disabled:border-app-soft-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-app-border-inverse-soft);
  }
  .border-app-muted-inverse {
    border-color: var(--zbk-app-border-inverse-muted);
  }
  [class~="focus:border-app-muted-inverse"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-app-border-inverse-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-app-muted-inverse:hover {
      border-color: var(--zbk-app-border-inverse-muted);
    }
  }
  [class~="active:border-app-muted-inverse"]:active {
    border-color: var(--zbk-app-border-inverse-muted);
  }
  [class~="disabled:border-app-muted-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-app-border-inverse-muted);
  }
  .border-app-strong-inverse {
    border-color: var(--zbk-app-border-inverse-strong);
  }
  [class~="focus:border-app-strong-inverse"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-app-border-inverse-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-app-strong-inverse:hover {
      border-color: var(--zbk-app-border-inverse-strong);
    }
  }
  [class~="active:border-app-strong-inverse"]:active {
    border-color: var(--zbk-app-border-inverse-strong);
  }
  [class~="disabled:border-app-strong-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-app-border-inverse-strong);
  }
}
@layer utilities {
  .canvas-critical {
    background-color: var(--zbk-critical-canvas);
    background: var(--zbk-critical-canvas);
  }
  [class~="focus:canvas-critical"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-critical-canvas);
    background: var(--zbk-critical-canvas);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-critical:hover {
      background-color: var(--zbk-critical-canvas);
      background: var(--zbk-critical-canvas);
    }
  }
  [class~="active:canvas-critical"]:active {
    background-color: var(--zbk-critical-canvas);
    background: var(--zbk-critical-canvas);
  }
  [class~="disabled:canvas-critical"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--zbk-critical-canvas);
    background: var(--zbk-critical-canvas);
  }
  .canvas-critical-soft {
    background-color: var(--zbk-critical-canvas-soft);
    background: var(--zbk-critical-canvas-soft);
  }
  [class~="focus:canvas-critical-soft"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-critical-canvas-soft);
    background: var(--zbk-critical-canvas-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-critical-soft:hover {
      background-color: var(--zbk-critical-canvas-soft);
      background: var(--zbk-critical-canvas-soft);
    }
  }
  [class~="active:canvas-critical-soft"]:active {
    background-color: var(--zbk-critical-canvas-soft);
    background: var(--zbk-critical-canvas-soft);
  }
  [class~="disabled:canvas-critical-soft"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-critical-canvas-soft);
    background: var(--zbk-critical-canvas-soft);
  }
  .canvas-critical-muted {
    background-color: var(--zbk-critical-canvas-muted);
    background: var(--zbk-critical-canvas-muted);
  }
  [class~="focus:canvas-critical-muted"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-critical-canvas-muted);
    background: var(--zbk-critical-canvas-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-critical-muted:hover {
      background-color: var(--zbk-critical-canvas-muted);
      background: var(--zbk-critical-canvas-muted);
    }
  }
  [class~="active:canvas-critical-muted"]:active {
    background-color: var(--zbk-critical-canvas-muted);
    background: var(--zbk-critical-canvas-muted);
  }
  [class~="disabled:canvas-critical-muted"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-critical-canvas-muted);
    background: var(--zbk-critical-canvas-muted);
  }
  .canvas-critical-strong {
    background-color: var(--zbk-critical-canvas-strong);
    background: var(--zbk-critical-canvas-strong);
  }
  [class~="focus:canvas-critical-strong"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-critical-canvas-strong);
    background: var(--zbk-critical-canvas-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-critical-strong:hover {
      background-color: var(--zbk-critical-canvas-strong);
      background: var(--zbk-critical-canvas-strong);
    }
  }
  [class~="active:canvas-critical-strong"]:active {
    background-color: var(--zbk-critical-canvas-strong);
    background: var(--zbk-critical-canvas-strong);
  }
  [class~="disabled:canvas-critical-strong"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-critical-canvas-strong);
    background: var(--zbk-critical-canvas-strong);
  }
  .canvas-critical-inverse {
    background-color: var(--zbk-critical-canvas-inverse);
    background: var(--zbk-critical-canvas-inverse);
  }
  [class~="focus:canvas-critical-inverse"]:is(:focus-visible, :focus-within) {
    background-color: var(--zbk-critical-canvas-inverse);
    background: var(--zbk-critical-canvas-inverse);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-critical-inverse:hover {
      background-color: var(--zbk-critical-canvas-inverse);
      background: var(--zbk-critical-canvas-inverse);
    }
  }
  [class~="active:canvas-critical-inverse"]:active {
    background-color: var(--zbk-critical-canvas-inverse);
    background: var(--zbk-critical-canvas-inverse);
  }
  [class~="disabled:canvas-critical-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-critical-canvas-inverse);
    background: var(--zbk-critical-canvas-inverse);
  }
  .canvas-critical-soft-inverse {
    background-color: var(--zbk-critical-canvas-inverse-soft);
    background: var(--zbk-critical-canvas-inverse-soft);
  }
  [class~="focus:canvas-critical-soft-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-critical-canvas-inverse-soft);
    background: var(--zbk-critical-canvas-inverse-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-critical-soft-inverse:hover {
      background-color: var(--zbk-critical-canvas-inverse-soft);
      background: var(--zbk-critical-canvas-inverse-soft);
    }
  }
  [class~="active:canvas-critical-soft-inverse"]:active {
    background-color: var(--zbk-critical-canvas-inverse-soft);
    background: var(--zbk-critical-canvas-inverse-soft);
  }
  [class~="disabled:canvas-critical-soft-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-critical-canvas-inverse-soft);
    background: var(--zbk-critical-canvas-inverse-soft);
  }
  .canvas-critical-muted-inverse {
    background-color: var(--zbk-critical-canvas-inverse-muted);
    background: var(--zbk-critical-canvas-inverse-muted);
  }
  [class~="focus:canvas-critical-muted-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-critical-canvas-inverse-muted);
    background: var(--zbk-critical-canvas-inverse-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-critical-muted-inverse:hover {
      background-color: var(--zbk-critical-canvas-inverse-muted);
      background: var(--zbk-critical-canvas-inverse-muted);
    }
  }
  [class~="active:canvas-critical-muted-inverse"]:active {
    background-color: var(--zbk-critical-canvas-inverse-muted);
    background: var(--zbk-critical-canvas-inverse-muted);
  }
  [class~="disabled:canvas-critical-muted-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-critical-canvas-inverse-muted);
    background: var(--zbk-critical-canvas-inverse-muted);
  }
  .canvas-critical-strong-inverse {
    background-color: var(--zbk-critical-canvas-inverse-strong);
    background: var(--zbk-critical-canvas-inverse-strong);
  }
  [class~="focus:canvas-critical-strong-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    background-color: var(--zbk-critical-canvas-inverse-strong);
    background: var(--zbk-critical-canvas-inverse-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:canvas-critical-strong-inverse:hover {
      background-color: var(--zbk-critical-canvas-inverse-strong);
      background: var(--zbk-critical-canvas-inverse-strong);
    }
  }
  [class~="active:canvas-critical-strong-inverse"]:active {
    background-color: var(--zbk-critical-canvas-inverse-strong);
    background: var(--zbk-critical-canvas-inverse-strong);
  }
  [class~="disabled:canvas-critical-strong-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    background-color: var(--zbk-critical-canvas-inverse-strong);
    background: var(--zbk-critical-canvas-inverse-strong);
  }
  .ink-critical {
    color: var(--zbk-critical-ink);
  }
  [class~="focus:ink-critical"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-critical-ink);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-critical:hover {
      color: var(--zbk-critical-ink);
    }
  }
  [class~="active:ink-critical"]:active {
    color: var(--zbk-critical-ink);
  }
  [class~="disabled:ink-critical"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-critical-ink);
  }
  .ink-critical-soft {
    color: var(--zbk-critical-ink-soft);
  }
  [class~="focus:ink-critical-soft"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-critical-ink-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-critical-soft:hover {
      color: var(--zbk-critical-ink-soft);
    }
  }
  [class~="active:ink-critical-soft"]:active {
    color: var(--zbk-critical-ink-soft);
  }
  [class~="disabled:ink-critical-soft"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-critical-ink-soft);
  }
  .ink-critical-muted {
    color: var(--zbk-critical-ink-muted);
  }
  [class~="focus:ink-critical-muted"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-critical-ink-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-critical-muted:hover {
      color: var(--zbk-critical-ink-muted);
    }
  }
  [class~="active:ink-critical-muted"]:active {
    color: var(--zbk-critical-ink-muted);
  }
  [class~="disabled:ink-critical-muted"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--zbk-critical-ink-muted);
  }
  .ink-critical-strong {
    color: var(--zbk-critical-ink-strong);
  }
  [class~="focus:ink-critical-strong"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-critical-ink-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-critical-strong:hover {
      color: var(--zbk-critical-ink-strong);
    }
  }
  [class~="active:ink-critical-strong"]:active {
    color: var(--zbk-critical-ink-strong);
  }
  [class~="disabled:ink-critical-strong"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-critical-ink-strong);
  }
  .ink-critical-inverse {
    color: var(--zbk-critical-ink-inverse);
  }
  [class~="focus:ink-critical-inverse"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-critical-ink-inverse);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-critical-inverse:hover {
      color: var(--zbk-critical-ink-inverse);
    }
  }
  [class~="active:ink-critical-inverse"]:active {
    color: var(--zbk-critical-ink-inverse);
  }
  [class~="disabled:ink-critical-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-critical-ink-inverse);
  }
  .ink-critical-soft-inverse {
    color: var(--zbk-critical-ink-inverse-soft);
  }
  [class~="focus:ink-critical-soft-inverse"]:is(:focus-visible, :focus-within) {
    color: var(--zbk-critical-ink-inverse-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-critical-soft-inverse:hover {
      color: var(--zbk-critical-ink-inverse-soft);
    }
  }
  [class~="active:ink-critical-soft-inverse"]:active {
    color: var(--zbk-critical-ink-inverse-soft);
  }
  [class~="disabled:ink-critical-soft-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-critical-ink-inverse-soft);
  }
  .ink-critical-muted-inverse {
    color: var(--zbk-critical-ink-inverse-muted);
  }
  [class~="focus:ink-critical-muted-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    color: var(--zbk-critical-ink-inverse-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-critical-muted-inverse:hover {
      color: var(--zbk-critical-ink-inverse-muted);
    }
  }
  [class~="active:ink-critical-muted-inverse"]:active {
    color: var(--zbk-critical-ink-inverse-muted);
  }
  [class~="disabled:ink-critical-muted-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-critical-ink-inverse-muted);
  }
  .ink-critical-strong-inverse {
    color: var(--zbk-critical-ink-inverse-strong);
  }
  [class~="focus:ink-critical-strong-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    color: var(--zbk-critical-ink-inverse-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:ink-critical-strong-inverse:hover {
      color: var(--zbk-critical-ink-inverse-strong);
    }
  }
  [class~="active:ink-critical-strong-inverse"]:active {
    color: var(--zbk-critical-ink-inverse-strong);
  }
  [class~="disabled:ink-critical-strong-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    color: var(--zbk-critical-ink-inverse-strong);
  }
  .border-critical {
    border-color: var(--zbk-critical-border);
  }
  [class~="focus:border-critical"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-critical-border);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-critical:hover {
      border-color: var(--zbk-critical-border);
    }
  }
  [class~="active:border-critical"]:active {
    border-color: var(--zbk-critical-border);
  }
  [class~="disabled:border-critical"]:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--zbk-critical-border);
  }
  .border-critical-soft {
    border-color: var(--zbk-critical-border-soft);
  }
  [class~="focus:border-critical-soft"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-critical-border-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-critical-soft:hover {
      border-color: var(--zbk-critical-border-soft);
    }
  }
  [class~="active:border-critical-soft"]:active {
    border-color: var(--zbk-critical-border-soft);
  }
  [class~="disabled:border-critical-soft"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-critical-border-soft);
  }
  .border-critical-muted {
    border-color: var(--zbk-critical-border-muted);
  }
  [class~="focus:border-critical-muted"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-critical-border-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-critical-muted:hover {
      border-color: var(--zbk-critical-border-muted);
    }
  }
  [class~="active:border-critical-muted"]:active {
    border-color: var(--zbk-critical-border-muted);
  }
  [class~="disabled:border-critical-muted"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-critical-border-muted);
  }
  .border-critical-strong {
    border-color: var(--zbk-critical-border-strong);
  }
  [class~="focus:border-critical-strong"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-critical-border-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-critical-strong:hover {
      border-color: var(--zbk-critical-border-strong);
    }
  }
  [class~="active:border-critical-strong"]:active {
    border-color: var(--zbk-critical-border-strong);
  }
  [class~="disabled:border-critical-strong"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-critical-border-strong);
  }
  .border-critical-inverse {
    border-color: var(--zbk-critical-border-inverse);
  }
  [class~="focus:border-critical-inverse"]:is(:focus-visible, :focus-within) {
    border-color: var(--zbk-critical-border-inverse);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-critical-inverse:hover {
      border-color: var(--zbk-critical-border-inverse);
    }
  }
  [class~="active:border-critical-inverse"]:active {
    border-color: var(--zbk-critical-border-inverse);
  }
  [class~="disabled:border-critical-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-critical-border-inverse);
  }
  .border-critical-soft-inverse {
    border-color: var(--zbk-critical-border-inverse-soft);
  }
  [class~="focus:border-critical-soft-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-critical-border-inverse-soft);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-critical-soft-inverse:hover {
      border-color: var(--zbk-critical-border-inverse-soft);
    }
  }
  [class~="active:border-critical-soft-inverse"]:active {
    border-color: var(--zbk-critical-border-inverse-soft);
  }
  [class~="disabled:border-critical-soft-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-critical-border-inverse-soft);
  }
  .border-critical-muted-inverse {
    border-color: var(--zbk-critical-border-inverse-muted);
  }
  [class~="focus:border-critical-muted-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-critical-border-inverse-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-critical-muted-inverse:hover {
      border-color: var(--zbk-critical-border-inverse-muted);
    }
  }
  [class~="active:border-critical-muted-inverse"]:active {
    border-color: var(--zbk-critical-border-inverse-muted);
  }
  [class~="disabled:border-critical-muted-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-critical-border-inverse-muted);
  }
  .border-critical-strong-inverse {
    border-color: var(--zbk-critical-border-inverse-strong);
  }
  [class~="focus:border-critical-strong-inverse"]:is(
    :focus-visible,
    :focus-within
  ) {
    border-color: var(--zbk-critical-border-inverse-strong);
  }
  @media (hover: hover) and (pointer: fine) {
    .hover\:border-critical-strong-inverse:hover {
      border-color: var(--zbk-critical-border-inverse-strong);
    }
  }
  [class~="active:border-critical-strong-inverse"]:active {
    border-color: var(--zbk-critical-border-inverse-strong);
  }
  [class~="disabled:border-critical-strong-inverse"]:is(
    :disabled,
    [aria-disabled="true"]
  ) {
    border-color: var(--zbk-critical-border-inverse-strong);
  }
}
@layer theme, base, components, utilities;
@layer theme {
  :root {
    --zbk-text-measure-1: 32ch;
    --zbk-text-measure-2: 45ch;
    --zbk-text-measure-3: 60ch;
    --zbk-text-measure-4: 72ch;
    --zbk-text-measure-5: 85ch;
    --zbk-font-family-primary:
      "Puritan", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      sans-serif;
    --zbk-font-family-alt:
      "Special Gothic Condensed One", system-ui, -apple-system,
      BlinkMacSystemFont, "Segoe UI", sans-serif;
    --zbk-font-family-monospace:
      "Inconsolata", SFMono-Regular, Consolas, monospace;
    --zbk-font-family-interface: var(--zbk-font-family-primary);
    --zbk-font-family-heading: var(--zbk-font-family-primary);
    --zbk-font-family-body: var(--zbk-font-family-primary);
    --zbk-font-family-code: var(--zbk-font-family-monospace);
    --zbk-line-height-1: calc(100% * var(--zbk-a11y-line-height-modifier));
    --zbk-line-height-2: calc(125% * var(--zbk-a11y-line-height-modifier));
    --zbk-line-height-3: calc(150% * var(--zbk-a11y-line-height-modifier));
    --zbk-line-height-4: calc(180% * var(--zbk-a11y-line-height-modifier));
    --zbk-line-height-5: calc(200% * var(--zbk-a11y-line-height-modifier));
    --zbk-accent-secondary-50: var(--zbk-color-teal-50);
    --zbk-accent-secondary-100: var(--zbk-color-teal-100);
    --zbk-accent-secondary-200: var(--zbk-color-teal-200);
    --zbk-accent-secondary-300: var(--zbk-color-teal-300);
    --zbk-accent-secondary-400: var(--zbk-color-teal-400);
    --zbk-accent-secondary-500: var(--zbk-color-teal-500);
    --zbk-accent-secondary-600: var(--zbk-color-teal-600);
    --zbk-accent-secondary-700: var(--zbk-color-teal-700);
    --zbk-accent-secondary-800: var(--zbk-color-teal-800);
    --zbk-accent-secondary-900: var(--zbk-color-teal-900);
    --zbk-accent-secondary-950: var(--zbk-color-teal-950);
    --zbk-neutral-50: var(--zbk-color-charcoal-50);
    --zbk-neutral-100: var(--zbk-color-charcoal-100);
    --zbk-neutral-200: var(--zbk-color-charcoal-200);
    --zbk-neutral-300: var(--zbk-color-charcoal-300);
    --zbk-neutral-400: var(--zbk-color-charcoal-400);
    --zbk-neutral-500: var(--zbk-color-charcoal-500);
    --zbk-neutral-600: var(--zbk-color-charcoal-600);
    --zbk-neutral-700: var(--zbk-color-charcoal-700);
    --zbk-neutral-800: var(--zbk-color-charcoal-800);
    --zbk-neutral-900: var(--zbk-color-charcoal-900);
    --zbk-neutral-950: var(--zbk-color-charcoal-950);
    --zbk-brand-50: #faf6ea;
    --zbk-brand-100: #f5edd6;
    --zbk-brand-200: #ecdcb1;
    --zbk-brand-300: #dfc57c;
    --zbk-brand-400: #d3af4a;
    --zbk-brand-500: #b5902c;
    --zbk-brand-600: #816d37;
    --zbk-brand-700: #64552b;
    --zbk-brand-800: #4b4020;
    --zbk-brand-900: #2b2412;
    --zbk-brand-950: #0e0c06;
    --zbk-accent-primary-50: #fcfcfd;
    --zbk-accent-primary-100: #e8e1ef;
    --zbk-accent-primary-200: #c7b6d8;
    --zbk-accent-primary-300: #ac92c4;
    --zbk-accent-primary-400: #906db0;
    --zbk-accent-primary-500: #7e57a2;
    --zbk-accent-primary-600: #644681;
    --zbk-accent-primary-700: #48325d;
    --zbk-accent-primary-800: #342442;
    --zbk-accent-primary-900: #1c1424;
    --zbk-accent-primary-950: #0a070d;
    --zbk-disabled-canvas: var(--zbk-color-charcoal-400);
    --zbk-disabled-canvas-soft: var(--zbk-color-charcoal-50);
    --zbk-disabled-canvas-muted: var(--zbk-color-charcoal-200);
    --zbk-disabled-canvas-strong: var(--zbk-color-charcoal-800);
    --zbk-disabled-canvas-inverse: var(--zbk-color-charcoal-800);
    --zbk-disabled-canvas-inverse-soft: var(--zbk-color-charcoal-950);
    --zbk-disabled-canvas-inverse-muted: var(--zbk-color-charcoal-900);
    --zbk-disabled-canvas-inverse-strong: var(--zbk-color-charcoal-200);
    --zbk-disabled-ink: var(--zbk-color-charcoal-800);
    --zbk-disabled-ink-soft: var(--zbk-color-charcoal-400);
    --zbk-disabled-ink-muted: var(--zbk-color-charcoal-600);
    --zbk-disabled-ink-inverse: var(--zbk-color-charcoal-200);
    --zbk-disabled-ink-inverse-soft: var(--zbk-color-charcoal-500);
    --zbk-disabled-ink-inverse-muted: var(--zbk-color-charcoal-800);
    --zbk-disabled-border: var(--zbk-disabled-ink);
    --zbk-disabled-border-soft: var(--zbk-disabled-ink-soft);
    --zbk-disabled-border-muted: var(--zbk-disabled-ink-muted);
    --zbk-disabled-border-strong: var(--zbk-disabled-ink);
    --zbk-disabled-border-inverse: var(--zbk-disabled-ink-inverse);
    --zbk-disabled-border-inverse-soft: var(--zbk-disabled-ink-inverse-soft);
    --zbk-disabled-border-inverse-muted: var(--zbk-disabled-ink-inverse-muted);
    --zbk-disabled-border-inverse-strong: var(--zbk-disabled-ink-inverse);
  }
}
@layer base {
  :root {
    --zbk-focus-color: #f5a;
    --zbk-focus-width: var(--zbk-spacing-025);
    --zbk-focus-offset: var(--zbk-spacing-025);
    --zbk-spacing-0: clamp(
      0px,
      calc(var(--zbk-spacing-viewport-modifier)),
      calc(0px * var(--zbk-spacing-max-size-modifer) * 1)
    );
    --zbk-spacing-1: clamp(
      calc(1rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        1rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        1rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-2: clamp(
      calc(2rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        2rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        2rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-3: clamp(
      calc(3rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        3rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        3rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-4: clamp(
      calc(4rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        4rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        4rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-5: clamp(
      calc(5rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        5rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        5rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-6: clamp(
      calc(6rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        6rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        6rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-7: clamp(
      calc(7rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        7rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        7rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-8: clamp(
      calc(8rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        8rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        8rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-9: clamp(
      calc(9rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        9rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        9rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-10: clamp(
      calc(10rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        10rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        10rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-15: clamp(
      calc(15rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        15rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        15rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-20: clamp(
      calc(20rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        20rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        20rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-25: clamp(
      calc(25rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        25rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        25rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-30: clamp(
      calc(30rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        30rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        30rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-40: clamp(
      calc(40rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        40rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        40rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-50: clamp(
      calc(50rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        50rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        50rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-60: clamp(
      calc(60rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        60rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        60rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-70: clamp(
      calc(70rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        70rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        70rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-80: clamp(
      calc(80rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        80rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        80rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-90: clamp(
      calc(90rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        90rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        90rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-100: clamp(
      calc(100rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        100rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        100rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-105: clamp(
      calc(1.5rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        1.5rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        1.5rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-205: clamp(
      calc(2.5rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        2.5rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        2.5rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-viewport-modifier: 1vw;
    --zbk-spacing-max-size-modifer: 1.25;
    --zbk-spacing-neg-15: -15rem;
    --zbk-spacing-neg-10: clamp(
      calc(-10rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        -10rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        -10rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-neg-9: clamp(
      calc(-9rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        -9rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        -9rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-neg-8: clamp(
      calc(-8rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        -8rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        -8rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-neg-7: clamp(
      calc(-7rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        -7rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        -7rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-neg-6: clamp(
      calc(-6rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        -6rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        -6rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-neg-5: clamp(
      calc(-5rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        -5rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        -5rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-neg-4: clamp(
      calc(-4rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        -4rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        -4rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-neg-3: clamp(
      calc(-3rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        -3rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        -3rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-neg-205: clamp(
      calc(-2.5rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        -2.5rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        -2.5rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-neg-2: clamp(
      calc(-2rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        -2rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        -2rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-neg-105: clamp(
      calc(-1.5rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        -1.5rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        -1.5rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-neg-1: clamp(
      calc(-1rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        -1rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        -1rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-neg-05: clamp(
      calc(-0.5rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        -0.5rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        -0.5rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-neg-025: clamp(
      calc(-0.25rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        -0.25rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        -0.25rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-neg-2px: clamp(
      calc(-2px * var(--zbk-a11y-spacing-modifier)),
      calc(
        -2px * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        -2px * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-neg-1px: clamp(
      calc(-1px * var(--zbk-a11y-spacing-modifier)),
      calc(
        -1px * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        -1px * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-1px: clamp(
      calc(1px * var(--zbk-a11y-spacing-modifier)),
      calc(
        1px * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        1px * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-2px: clamp(
      calc(2px * var(--zbk-a11y-spacing-modifier)),
      calc(
        2px * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        2px * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-025: clamp(
      calc(0.25rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        0.25rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        0.25rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-05: clamp(
      calc(0.5rem * var(--zbk-a11y-spacing-modifier)),
      calc(
        0.5rem * var(--zbk-a11y-spacing-modifier) +
          var(--zbk-spacing-viewport-modifier)
      ),
      calc(
        0.5rem * var(--zbk-spacing-max-size-modifer) *
          var(--zbk-a11y-spacing-modifier)
      )
    );
    --zbk-spacing-2xs: var(--zbk-spacing-2px);
    --zbk-spacing-xs: var(--zbk-spacing-025);
    --zbk-spacing-sm: var(--zbk-spacing-05);
    --zbk-spacing-md: var(--zbk-spacing-1);
    --zbk-spacing-lg: var(--zbk-spacing-2);
    --zbk-spacing-xl: var(--zbk-spacing-3);
    --zbk-spacing-2xl: var(--zbk-spacing-5);
    --zbk-spacing-3xl: var(--zbk-spacing-10);
    --zbk-spacing-card: var(--zbk-spacing-15);
    --zbk-spacing-mobile: var(--zbk-spacing-25);
    --zbk-spacing-mobile-lg: var(--zbk-spacing-30);
    --zbk-spacing-tablet: var(--zbk-spacing-40);
    --zbk-spacing-tablet-lg: var(--zbk-spacing-60);
    --zbk-spacing-desktop: var(--zbk-spacing-70);
    --zbk-spacing-desktop-lg: var(--zbk-spacing-80);
    --zbk-spacing-widescreen: var(--zbk-spacing-90);
    --zbk-spacing-section: var(--zbk-spacing-50);
    --zbk-spacing-section-margin-block: var(--zbk-spacing-2);
    --zbk-spacing-section-margin-inline: var(--zbk-spacing-0);
    --zbk-spacing-aside: var(--zbk-spacing-15);
    --zbk-spacing-page-padding-block: var(--zbk-spacing-1);
    --zbk-spacing-page-padding-inline: var(--zbk-spacing-105);
    --zbk-a11y-spacing-modifier: 1;
    --zbk-a11y-line-height-modifier: 1;
    --zbk-a11y-letter-spacing-modifier: 1;
    --zbk-a11y-fallback-font-size-modifier: 1;
    --zbk-a11y-transition-timing-modifier: 1;
    --zbk-font-size-viewport-font-size-modifier: 0.23vw;
    --zbk-font-size-max-font-size-modifer: 1.25;
    --zbk-font-size-3xs: clamp(
      calc(0.75rem * var(--zbk-a11y-font-size-modifier-3xs)),
      calc(
        0.75rem * var(--zbk-a11y-font-size-modifier-3xs) +
          var(--zbk-font-size-viewport-font-size-modifier)
      ),
      calc(
        0.75rem * var(--zbk-font-size-max-font-size-modifer) *
          var(--zbk-a11y-font-size-modifier-3xs)
      )
    );
    --zbk-font-size-2xs: clamp(
      calc(0.82rem * var(--zbk-a11y-font-size-modifier-2xs)),
      calc(
        0.82rem * var(--zbk-a11y-font-size-modifier-2xs) +
          var(--zbk-font-size-viewport-font-size-modifier)
      ),
      calc(
        0.82rem * var(--zbk-font-size-max-font-size-modifer) *
          var(--zbk-a11y-font-size-modifier-2xs)
      )
    );
    --zbk-font-size-xs: clamp(
      calc(0.9rem * var(--zbk-a11y-font-size-modifier-xs)),
      calc(
        0.9rem * var(--zbk-a11y-font-size-modifier-xs) +
          var(--zbk-font-size-viewport-font-size-modifier)
      ),
      calc(
        0.9rem * var(--zbk-font-size-max-font-size-modifer) *
          var(--zbk-a11y-font-size-modifier-xs)
      )
    );
    --zbk-font-size-sm: clamp(
      calc(1rem * var(--zbk-a11y-font-size-modifier-sm)),
      calc(
        1rem * var(--zbk-a11y-font-size-modifier-sm) +
          var(--zbk-font-size-viewport-font-size-modifier)
      ),
      calc(
        1rem * var(--zbk-font-size-max-font-size-modifer) *
          var(--zbk-a11y-font-size-modifier-sm)
      )
    );
    --zbk-font-size-md: clamp(
      calc(1.125rem * var(--zbk-a11y-font-size-modifier-md)),
      calc(
        1.125rem * var(--zbk-a11y-font-size-modifier-md) +
          var(--zbk-font-size-viewport-font-size-modifier)
      ),
      calc(
        1.125rem * var(--zbk-font-size-max-font-size-modifer) *
          var(--zbk-a11y-font-size-modifier-md)
      )
    );
    --zbk-font-size-lg: clamp(
      calc(1.5rem * var(--zbk-a11y-font-size-modifier-lg)),
      calc(
        1.5rem * var(--zbk-a11y-font-size-modifier-lg) +
          var(--zbk-font-size-viewport-font-size-modifier)
      ),
      calc(
        1.5rem * var(--zbk-font-size-max-font-size-modifer) *
          var(--zbk-a11y-font-size-modifier-lg)
      )
    );
    --zbk-font-size-xl: clamp(
      calc(2rem * var(--zbk-a11y-font-size-modifier-xl)),
      calc(
        2rem * var(--zbk-a11y-font-size-modifier-xl) +
          var(--zbk-font-size-viewport-font-size-modifier)
      ),
      calc(
        2rem * var(--zbk-font-size-max-font-size-modifer) *
          var(--zbk-a11y-font-size-modifier-xl)
      )
    );
    --zbk-font-size-2xl: clamp(
      calc(2.6rem * var(--zbk-a11y-font-size-modifier-2xl)),
      calc(
        2.6rem * var(--zbk-a11y-font-size-modifier-2xl) +
          var(--zbk-font-size-viewport-font-size-modifier)
      ),
      calc(
        2.6rem * var(--zbk-font-size-max-font-size-modifer) *
          var(--zbk-a11y-font-size-modifier-2xl)
      )
    );
    --zbk-font-size-3xl: clamp(
      calc(3.5rem * var(--zbk-a11y-font-size-modifier-3xl)),
      calc(
        3.5rem * var(--zbk-a11y-font-size-modifier-3xl) +
          var(--zbk-font-size-viewport-font-size-modifier)
      ),
      calc(
        3.5rem * var(--zbk-font-size-max-font-size-modifer) *
          var(--zbk-a11y-font-size-modifier-3xl)
      )
    );
    --zbk-button-ink: var(--zbk-app-ink);
    --zbk-button-ink-hover: var(--zbk-app-ink);
    --zbk-button-ink-active: var(--zbk-app-ink);
    --zbk-button-ink-disabled: var(--zbk-disabled-ink);
    --zbk-button-canvas: var(--zbk-brand-200);
    --zbk-button-canvas-hover: var(--zbk-brand-300);
    --zbk-button-canvas-active: var(--zbk-brand-300);
    --zbk-button-canvas-disabled: var(--zbk-disabled-canvas);
    --zbk-button-border-color: var(--zbk-accent-primary-500);
    --zbk-button-border-color-hover: var(--zbk-accent-primary-600);
    --zbk-button-border-color-selected: var(--zbk-accent-primary-500);
    --zbk-button-border-color-disabled: var(--zbk-disabled-border);
    --zbk-button-border-width: var(--zbk-border-width-sm);
    --zbk-button-border-style: var(--zbk-border-style);
    --zbk-button-border-radius: var(--zbk-border-radius-md);
    --zbk-button-font-family: var(--zbk-font-family-interface);
    --zbk-button-font-size: var(--zbk-font-size-md);
    --zbk-button-font-weight: var(--zbk-font-weight-medium);
    --zbk-button-line-height: var(--zbk-line-height-2);
    --zbk-button-letter-spacing: var(--zbk-tracking-normal);
    --zbk-button-text-transform: none;
    --zbk-button-text-decoration: none;
    --zbk-button-text-align: center;
    --zbk-button-padding-inline: var(--zbk-spacing-1);
    --zbk-button-padding-block: var(--zbk-spacing-05);
    --zbk-button-padding-inline-start: var(--zbk-button-padding-inline);
    --zbk-button-padding-inline-end: var(--zbk-button-padding-inline);
    --zbk-button-padding-block-start: var(--zbk-button-padding-block);
    --zbk-button-padding-block-end: var(--zbk-button-padding-block);
    --zbk-button-margin-inline: 0;
    --zbk-button-margin-block: 0;
    --zbk-button-margin-inline-start: var(--zbk-button-margin-inline);
    --zbk-button-margin-inline-end: var(--zbk-button-margin-inline);
    --zbk-button-margin-block-start: var(--zbk-button-margin-block);
    --zbk-button-margin-block-end: var(--zbk-button-margin-block);
    --zbk-button-gap: var(--zbk-button-padding-block);
    --zbk-button-group-gap: var(--zbk-spacing-105);
    --zbk-button-display: inline-flex;
    --zbk-button-width: auto;
    --zbk-button-min-width: 44px;
    --zbk-button-max-width: none;
    --zbk-button-height: auto;
    --zbk-button-min-height: 44px;
    --zbk-button-max-height: none;
    --zbk-button-icon-size: 1.125rem;
    --zbk-button-focus-color: var(--zbk-focus-color);
    --zbk-button-focus-width: var(--zbk-focus-width);
    --zbk-button-focus-offset: var(--zbk-focus-offset);
    --zbk-button-box-shadow: none;
    --zbk-button-box-shadow-hover: none;
    --zbk-button-box-shadow-active: none;
    --zbk-button-box-shadow-focus: none;
    --zbk-button-cursor: pointer;
    --zbk-button-flex-direction: row;
    --zbk-button-justify-content: center;
    --zbk-button-align-items: center;
    --zbk-button-transition-duration: calc(
      150ms * var(--zbk-a11y-transition-timing-modifier)
    );
    --zbk-button-transition-timing-function: ease-out;
    --zbk-button-transition-property:
      background-color, color, border-color, box-shadow, transform, outline;
    --zbk-button-transition-delay: 0;
    --zbk-button-opacity: 1;
    --zbk-border-width-xs: var(--zbk-spacing-1px);
    --zbk-border-width-sm: var(--zbk-spacing-2px);
    --zbk-border-width-md: var(--zbk-spacing-025);
    --zbk-border-width-lg: var(--zbk-spacing-05);
    --zbk-border-width-xl: var(--zbk-spacing-1);
    --zbk-border-style: solid;
    --zbk-border-radius-xs: var(--zbk-spacing-2px);
    --zbk-border-radius-sm: var(--zbk-spacing-025);
    --zbk-border-radius-md: var(--zbk-spacing-05);
    --zbk-border-radius-lg: var(--zbk-spacing-1);
    --zbk-border-radius-xl: var(--zbk-spacing-205);
    --zbk-positive-canvas: var(--zbk-color-dusk-50);
    --zbk-positive-canvas-soft: ;
    --zbk-positive-canvas-muted: ;
    --zbk-positive-canvas-strong: ;
    --zbk-positive-canvas-inverse: ;
    --zbk-positive-canvas-inverse-soft: ;
    --zbk-positive-canvas-inverse-muted: ;
    --zbk-positive-canvas-inverse-strong: ;
    --zbk-positive-ink: ;
    --zbk-positive-ink-soft: ;
    --zbk-positive-ink-muted: ;
    --zbk-positive-ink-inverse: ;
    --zbk-positive-ink-inverse-soft: ;
    --zbk-positive-ink-inverse-muted: ;
    --zbk-positive-border: ;
    --zbk-positive-border-soft: ;
    --zbk-positive-border-muted: ;
    --zbk-positive-border-strong: ;
    --zbk-positive-border-inverse: ;
    --zbk-positive-border-inverse-soft: ;
    --zbk-positive-border-inverse-muted: ;
    --zbk-positive-border-inverse-strong: ;
    --zbk-critical-canvas: var(--zbk-color-dusk-50);
    --zbk-critical-canvas-soft: ;
    --zbk-critical-canvas-muted: ;
    --zbk-critical-canvas-strong: ;
    --zbk-critical-canvas-inverse: ;
    --zbk-critical-canvas-inverse-soft: ;
    --zbk-critical-canvas-inverse-muted: ;
    --zbk-critical-canvas-inverse-strong: ;
    --zbk-critical-ink: ;
    --zbk-critical-ink-soft: ;
    --zbk-critical-ink-muted: ;
    --zbk-critical-ink-inverse: ;
    --zbk-critical-ink-inverse-soft: ;
    --zbk-critical-ink-inverse-muted: ;
    --zbk-critical-border: ;
    --zbk-critical-border-soft: ;
    --zbk-critical-border-muted: ;
    --zbk-critical-border-strong: ;
    --zbk-critical-border-inverse: ;
    --zbk-critical-border-inverse-soft: ;
    --zbk-critical-border-inverse-muted: ;
    --zbk-critical-border-inverse-strong: ;
    --zbk-caution-canvas: var(--zbk-color-dusk-50);
    --zbk-caution-canvas-soft: ;
    --zbk-caution-canvas-muted: ;
    --zbk-caution-canvas-strong: ;
    --zbk-caution-canvas-inverse: ;
    --zbk-caution-canvas-inverse-soft: ;
    --zbk-caution-canvas-inverse-muted: ;
    --zbk-caution-canvas-inverse-strong: ;
    --zbk-caution-ink: ;
    --zbk-caution-ink-soft: ;
    --zbk-caution-ink-muted: ;
    --zbk-caution-ink-inverse: ;
    --zbk-caution-ink-inverse-soft: ;
    --zbk-caution-ink-inverse-muted: ;
    --zbk-caution-border: ;
    --zbk-caution-border-soft: ;
    --zbk-caution-border-muted: ;
    --zbk-caution-border-strong: ;
    --zbk-caution-border-inverse: ;
    --zbk-caution-border-inverse-soft: ;
    --zbk-caution-border-inverse-muted: ;
    --zbk-caution-border-inverse-strong: ;
    --zbk-app-canvas: var(--zbk-accent-primary-50);
    --zbk-app-canvas-soft: var(--zbk-color-global-white);
    --zbk-app-canvas-muted: var(--zbk-accent-primary-100);
    --zbk-app-canvas-strong: var(--zbk-accent-primary-500);
    --zbk-app-canvas-inverse: var(--zbk-color-dusk-950);
    --zbk-app-canvas-inverse-soft: var(--zbk-color-dusk-900);
    --zbk-app-canvas-inverse-muted: var(--zbk-color-dusk-700);
    --zbk-app-canvas-inverse-strong: var(--zbk-color-dusk-200);
    --zbk-app-ink: var(--zbk-brand-950);
    --zbk-app-ink-soft: var(--zbk-brand-700);
    --zbk-app-ink-muted: var(--zbk-brand-800);
    --zbk-app-ink-inverse: var(--zbk-color-dusk-200);
    --zbk-app-ink-inverse-soft: var(--zbk-color-dusk-50);
    --zbk-app-ink-inverse-muted: var(--zbk-color-dusk-400);
    --zbk-app-border: ;
    --zbk-app-border-soft: ;
    --zbk-app-border-muted: ;
    --zbk-app-border-strong: ;
    --zbk-app-border-inverse: ;
    --zbk-app-border-inverse-soft: ;
    --zbk-app-border-inverse-muted: ;
    --zbk-app-border-inverse-strong: ;
    --zbk-info-canvas: var(--zbk-color-dusk-50);
    --zbk-info-canvas-soft: ;
    --zbk-info-canvas-muted: ;
    --zbk-info-canvas-strong: ;
    --zbk-info-canvas-inverse: ;
    --zbk-info-canvas-inverse-soft: ;
    --zbk-info-canvas-inverse-muted: ;
    --zbk-info-canvas-inverse-strong: ;
    --zbk-info-ink: ;
    --zbk-info-ink-soft: ;
    --zbk-info-ink-muted: ;
    --zbk-info-ink-inverse: ;
    --zbk-info-ink-inverse-soft: ;
    --zbk-info-ink-inverse-muted: ;
    --zbk-info-border: ;
    --zbk-info-border-soft: ;
    --zbk-info-border-muted: ;
    --zbk-info-border-strong: ;
    --zbk-info-border-inverse: ;
    --zbk-info-border-inverse-soft: ;
    --zbk-info-border-inverse-muted: ;
    --zbk-info-border-inverse-strong: ;
    --zbk-action-canvas: var(--zbk-color-dusk-50);
    --zbk-action-canvas-soft: ;
    --zbk-action-canvas-muted: ;
    --zbk-action-canvas-strong: ;
    --zbk-action-canvas-inverse: ;
    --zbk-action-canvas-inverse-soft: ;
    --zbk-action-canvas-inverse-muted: ;
    --zbk-action-canvas-inverse-strong: ;
    --zbk-action-ink: #4169e1;
    --zbk-action-ink-soft: ;
    --zbk-action-ink-muted: #6d8ce8;
    --zbk-action-ink-inverse: ;
    --zbk-action-ink-inverse-soft: ;
    --zbk-action-ink-inverse-muted: ;
    --zbk-action-border: ;
    --zbk-action-border-soft: ;
    --zbk-action-border-muted: ;
    --zbk-action-border-strong: ;
    --zbk-action-border-inverse: ;
    --zbk-action-border-inverse-soft: ;
    --zbk-action-border-inverse-muted: ;
    --zbk-action-border-inverse-strong: ;
  }
}
.zbk-button--large {
  --zbk-button-font-size: var(--zbk-font-size-3xl);
  --zbk-button-line-height: var(--zbk-button-line-height);
  --zbk-button-padding-inline: var(--zbk-button-padding-inline);
  --zbk-button-padding-block: var(--zbk-button-padding-block);
  --zbk-button-icon-size: var(--zbk-button-icon-size);
  --zbk-button-border-radius: var(--zbk-button-border-radius);
  --zbk-button-border-width: var(--zbk-button-border-width);
}