/*! ZhaoUI 0.1.0 · css utilities · generated by packages/ui/scripts/build.mjs, do not edit by hand */
/* ---- 53-utilities ---- */
.zh-block { display: block; }

.zh-inline { display: inline; }

.zh-inline-block { display: inline-block; }

.zh-flex { display: flex; }

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

.zh-d-grid { display: grid; }

.zh-inline-grid { display: inline-grid; }

.zh-contents { display: contents; }

.zh-hidden { display: none; }

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

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

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

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

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

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

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

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

.zh-self-start { align-self: flex-start; }

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

.zh-self-center { align-self: center; }

.zh-items-end { align-items: flex-end; }

.zh-self-end { align-self: flex-end; }

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

.zh-self-stretch { align-self: stretch; }

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

.zh-self-baseline { align-self: baseline; }

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

.zh-content-start { align-content: flex-start; }

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

.zh-content-center { align-content: center; }

.zh-justify-end { justify-content: flex-end; }

.zh-content-end { align-content: flex-end; }

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

.zh-content-between { align-content: space-between; }

.zh-justify-around { justify-content: space-around; }

.zh-content-around { align-content: space-around; }

.zh-justify-evenly { justify-content: space-evenly; }

.zh-content-evenly { align-content: space-evenly; }

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

.zh-flex-auto { flex: 1 1 auto; }

.zh-flex-initial { flex: 0 1 auto; }

.zh-flex-none { flex: none; }

.zh-grow { flex-grow: 1; }

.zh-grow-0 { flex-grow: 0; }

.zh-shrink { flex-shrink: 1; }

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

.zh-order-first { order: -1; }

.zh-order-last { order: 999; }

.zh-order-none { order: 0; }

.zh-center { display: flex; align-items: center; justify-content: center; }

.zh-gap-0 { gap: 0; }

.zh-gap-x-0 { column-gap: 0; }

.zh-gap-y-0 { row-gap: 0; }

.zh-gap-1 { gap: var(--zh-space-1); }

.zh-gap-x-1 { column-gap: var(--zh-space-1); }

.zh-gap-y-1 { row-gap: var(--zh-space-1); }

.zh-gap-2 { gap: var(--zh-space-2); }

.zh-gap-x-2 { column-gap: var(--zh-space-2); }

.zh-gap-y-2 { row-gap: var(--zh-space-2); }

.zh-gap-3 { gap: var(--zh-space-3); }

.zh-gap-x-3 { column-gap: var(--zh-space-3); }

.zh-gap-y-3 { row-gap: var(--zh-space-3); }

.zh-gap-4 { gap: var(--zh-space-4); }

.zh-gap-x-4 { column-gap: var(--zh-space-4); }

.zh-gap-y-4 { row-gap: var(--zh-space-4); }

.zh-gap-5 { gap: var(--zh-space-5); }

.zh-gap-x-5 { column-gap: var(--zh-space-5); }

.zh-gap-y-5 { row-gap: var(--zh-space-5); }

.zh-gap-6 { gap: var(--zh-space-6); }

.zh-gap-x-6 { column-gap: var(--zh-space-6); }

.zh-gap-y-6 { row-gap: var(--zh-space-6); }

.zh-gap-8 { gap: var(--zh-space-8); }

.zh-gap-x-8 { column-gap: var(--zh-space-8); }

.zh-gap-y-8 { row-gap: var(--zh-space-8); }

.zh-gap-10 { gap: var(--zh-space-10); }

.zh-gap-x-10 { column-gap: var(--zh-space-10); }

.zh-gap-y-10 { row-gap: var(--zh-space-10); }

.zh-gap-12 { gap: var(--zh-space-12); }

.zh-gap-x-12 { column-gap: var(--zh-space-12); }

.zh-gap-y-12 { row-gap: var(--zh-space-12); }

.zh-space-x-1 > * + * { margin-left: var(--zh-space-1); }

.zh-space-y-1 > * + * { margin-top: var(--zh-space-1); }

.zh-space-x-2 > * + * { margin-left: var(--zh-space-2); }

.zh-space-y-2 > * + * { margin-top: var(--zh-space-2); }

.zh-space-x-3 > * + * { margin-left: var(--zh-space-3); }

.zh-space-y-3 > * + * { margin-top: var(--zh-space-3); }

.zh-space-x-4 > * + * { margin-left: var(--zh-space-4); }

.zh-space-y-4 > * + * { margin-top: var(--zh-space-4); }

.zh-space-x-5 > * + * { margin-left: var(--zh-space-5); }

.zh-space-y-5 > * + * { margin-top: var(--zh-space-5); }

.zh-space-x-6 > * + * { margin-left: var(--zh-space-6); }

.zh-space-y-6 > * + * { margin-top: var(--zh-space-6); }

.zh-space-x-8 > * + * { margin-left: var(--zh-space-8); }

.zh-space-y-8 > * + * { margin-top: var(--zh-space-8); }

.zh-space-x-10 > * + * { margin-left: var(--zh-space-10); }

.zh-space-y-10 > * + * { margin-top: var(--zh-space-10); }

.zh-space-x-12 > * + * { margin-left: var(--zh-space-12); }

.zh-space-y-12 > * + * { margin-top: var(--zh-space-12); }

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

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

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

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

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

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

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

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

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

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

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

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

.zh-col-span-1 { grid-column: span 1 / span 1; }

.zh-col-span-2 { grid-column: span 2 / span 2; }

.zh-col-span-3 { grid-column: span 3 / span 3; }

.zh-col-span-4 { grid-column: span 4 / span 4; }

.zh-col-span-5 { grid-column: span 5 / span 5; }

.zh-col-span-6 { grid-column: span 6 / span 6; }

.zh-col-span-7 { grid-column: span 7 / span 7; }

.zh-col-span-8 { grid-column: span 8 / span 8; }

.zh-col-span-9 { grid-column: span 9 / span 9; }

.zh-col-span-10 { grid-column: span 10 / span 10; }

.zh-col-span-11 { grid-column: span 11 / span 11; }

.zh-col-span-12 { grid-column: span 12 / span 12; }

.zh-col-span-full { grid-column: 1 / -1; }

.zh-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }

.zh-row-span-1 { grid-row: span 1 / span 1; }

.zh-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }

.zh-row-span-2 { grid-row: span 2 / span 2; }

.zh-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }

.zh-row-span-3 { grid-row: span 3 / span 3; }

.zh-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }

.zh-row-span-4 { grid-row: span 4 / span 4; }

.zh-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }

.zh-row-span-5 { grid-row: span 5 / span 5; }

.zh-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }

.zh-row-span-6 { grid-row: span 6 / span 6; }

.zh-grid-flow-row { grid-auto-flow: row; }

.zh-grid-flow-col { grid-auto-flow: column; }

.zh-grid-flow-dense { grid-auto-flow: row dense; }

.zh-place-items-center { place-items: center; }

.zh-place-content-center { place-content: center; }

.zh-place-self-center { place-self: center; }

.zh-m-0 { margin: 0; }

.zh-m-1 { margin: var(--zh-space-1); }

.zh-m-2 { margin: var(--zh-space-2); }

.zh-m-3 { margin: var(--zh-space-3); }

.zh-m-4 { margin: var(--zh-space-4); }

.zh-m-5 { margin: var(--zh-space-5); }

.zh-m-6 { margin: var(--zh-space-6); }

.zh-m-8 { margin: var(--zh-space-8); }

.zh-m-10 { margin: var(--zh-space-10); }

.zh-m-12 { margin: var(--zh-space-12); }

.zh-m-auto { margin: auto; }

.zh-mx-0 { margin-left: 0; margin-right: 0; }

.zh-mx-1 { margin-left: var(--zh-space-1); margin-right: var(--zh-space-1); }

.zh-mx-2 { margin-left: var(--zh-space-2); margin-right: var(--zh-space-2); }

.zh-mx-3 { margin-left: var(--zh-space-3); margin-right: var(--zh-space-3); }

.zh-mx-4 { margin-left: var(--zh-space-4); margin-right: var(--zh-space-4); }

.zh-mx-5 { margin-left: var(--zh-space-5); margin-right: var(--zh-space-5); }

.zh-mx-6 { margin-left: var(--zh-space-6); margin-right: var(--zh-space-6); }

.zh-mx-8 { margin-left: var(--zh-space-8); margin-right: var(--zh-space-8); }

.zh-mx-10 { margin-left: var(--zh-space-10); margin-right: var(--zh-space-10); }

.zh-mx-12 { margin-left: var(--zh-space-12); margin-right: var(--zh-space-12); }

.zh-mx-auto { margin-left: auto; margin-right: auto; }

.zh-my-0 { margin-top: 0; margin-bottom: 0; }

.zh-my-1 { margin-top: var(--zh-space-1); margin-bottom: var(--zh-space-1); }

.zh-my-2 { margin-top: var(--zh-space-2); margin-bottom: var(--zh-space-2); }

.zh-my-3 { margin-top: var(--zh-space-3); margin-bottom: var(--zh-space-3); }

.zh-my-4 { margin-top: var(--zh-space-4); margin-bottom: var(--zh-space-4); }

.zh-my-5 { margin-top: var(--zh-space-5); margin-bottom: var(--zh-space-5); }

.zh-my-6 { margin-top: var(--zh-space-6); margin-bottom: var(--zh-space-6); }

.zh-my-8 { margin-top: var(--zh-space-8); margin-bottom: var(--zh-space-8); }

.zh-my-10 { margin-top: var(--zh-space-10); margin-bottom: var(--zh-space-10); }

.zh-my-12 { margin-top: var(--zh-space-12); margin-bottom: var(--zh-space-12); }

.zh-my-auto { margin-top: auto; margin-bottom: auto; }

.zh-mt-0 { margin-top: 0; }

.zh-mt-1 { margin-top: var(--zh-space-1); }

.zh-mt-2 { margin-top: var(--zh-space-2); }

.zh-mt-3 { margin-top: var(--zh-space-3); }

.zh-mt-4 { margin-top: var(--zh-space-4); }

.zh-mt-5 { margin-top: var(--zh-space-5); }

.zh-mt-6 { margin-top: var(--zh-space-6); }

.zh-mt-8 { margin-top: var(--zh-space-8); }

.zh-mt-10 { margin-top: var(--zh-space-10); }

.zh-mt-12 { margin-top: var(--zh-space-12); }

.zh-mt-auto { margin-top: auto; }

.zh-mr-0 { margin-right: 0; }

.zh-mr-1 { margin-right: var(--zh-space-1); }

.zh-mr-2 { margin-right: var(--zh-space-2); }

.zh-mr-3 { margin-right: var(--zh-space-3); }

.zh-mr-4 { margin-right: var(--zh-space-4); }

.zh-mr-5 { margin-right: var(--zh-space-5); }

.zh-mr-6 { margin-right: var(--zh-space-6); }

.zh-mr-8 { margin-right: var(--zh-space-8); }

.zh-mr-10 { margin-right: var(--zh-space-10); }

.zh-mr-12 { margin-right: var(--zh-space-12); }

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

.zh-mb-0 { margin-bottom: 0; }

.zh-mb-1 { margin-bottom: var(--zh-space-1); }

.zh-mb-2 { margin-bottom: var(--zh-space-2); }

.zh-mb-3 { margin-bottom: var(--zh-space-3); }

.zh-mb-4 { margin-bottom: var(--zh-space-4); }

.zh-mb-5 { margin-bottom: var(--zh-space-5); }

.zh-mb-6 { margin-bottom: var(--zh-space-6); }

.zh-mb-8 { margin-bottom: var(--zh-space-8); }

.zh-mb-10 { margin-bottom: var(--zh-space-10); }

.zh-mb-12 { margin-bottom: var(--zh-space-12); }

.zh-mb-auto { margin-bottom: auto; }

.zh-ml-0 { margin-left: 0; }

.zh-ml-1 { margin-left: var(--zh-space-1); }

.zh-ml-2 { margin-left: var(--zh-space-2); }

.zh-ml-3 { margin-left: var(--zh-space-3); }

.zh-ml-4 { margin-left: var(--zh-space-4); }

.zh-ml-5 { margin-left: var(--zh-space-5); }

.zh-ml-6 { margin-left: var(--zh-space-6); }

.zh-ml-8 { margin-left: var(--zh-space-8); }

.zh-ml-10 { margin-left: var(--zh-space-10); }

.zh-ml-12 { margin-left: var(--zh-space-12); }

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

.zh-p-0 { padding: 0; }

.zh-p-1 { padding: var(--zh-space-1); }

.zh-p-2 { padding: var(--zh-space-2); }

.zh-p-3 { padding: var(--zh-space-3); }

.zh-p-4 { padding: var(--zh-space-4); }

.zh-p-5 { padding: var(--zh-space-5); }

.zh-p-6 { padding: var(--zh-space-6); }

.zh-p-8 { padding: var(--zh-space-8); }

.zh-p-10 { padding: var(--zh-space-10); }

.zh-p-12 { padding: var(--zh-space-12); }

.zh-px-0 { padding-left: 0; padding-right: 0; }

.zh-px-1 { padding-left: var(--zh-space-1); padding-right: var(--zh-space-1); }

.zh-px-2 { padding-left: var(--zh-space-2); padding-right: var(--zh-space-2); }

.zh-px-3 { padding-left: var(--zh-space-3); padding-right: var(--zh-space-3); }

.zh-px-4 { padding-left: var(--zh-space-4); padding-right: var(--zh-space-4); }

.zh-px-5 { padding-left: var(--zh-space-5); padding-right: var(--zh-space-5); }

.zh-px-6 { padding-left: var(--zh-space-6); padding-right: var(--zh-space-6); }

.zh-px-8 { padding-left: var(--zh-space-8); padding-right: var(--zh-space-8); }

.zh-px-10 { padding-left: var(--zh-space-10); padding-right: var(--zh-space-10); }

.zh-px-12 { padding-left: var(--zh-space-12); padding-right: var(--zh-space-12); }

.zh-py-0 { padding-top: 0; padding-bottom: 0; }

.zh-py-1 { padding-top: var(--zh-space-1); padding-bottom: var(--zh-space-1); }

.zh-py-2 { padding-top: var(--zh-space-2); padding-bottom: var(--zh-space-2); }

.zh-py-3 { padding-top: var(--zh-space-3); padding-bottom: var(--zh-space-3); }

.zh-py-4 { padding-top: var(--zh-space-4); padding-bottom: var(--zh-space-4); }

.zh-py-5 { padding-top: var(--zh-space-5); padding-bottom: var(--zh-space-5); }

.zh-py-6 { padding-top: var(--zh-space-6); padding-bottom: var(--zh-space-6); }

.zh-py-8 { padding-top: var(--zh-space-8); padding-bottom: var(--zh-space-8); }

.zh-py-10 { padding-top: var(--zh-space-10); padding-bottom: var(--zh-space-10); }

.zh-py-12 { padding-top: var(--zh-space-12); padding-bottom: var(--zh-space-12); }

.zh-pt-0 { padding-top: 0; }

.zh-pt-1 { padding-top: var(--zh-space-1); }

.zh-pt-2 { padding-top: var(--zh-space-2); }

.zh-pt-3 { padding-top: var(--zh-space-3); }

.zh-pt-4 { padding-top: var(--zh-space-4); }

.zh-pt-5 { padding-top: var(--zh-space-5); }

.zh-pt-6 { padding-top: var(--zh-space-6); }

.zh-pt-8 { padding-top: var(--zh-space-8); }

.zh-pt-10 { padding-top: var(--zh-space-10); }

.zh-pt-12 { padding-top: var(--zh-space-12); }

.zh-pr-0 { padding-right: 0; }

.zh-pr-1 { padding-right: var(--zh-space-1); }

.zh-pr-2 { padding-right: var(--zh-space-2); }

.zh-pr-3 { padding-right: var(--zh-space-3); }

.zh-pr-4 { padding-right: var(--zh-space-4); }

.zh-pr-5 { padding-right: var(--zh-space-5); }

.zh-pr-6 { padding-right: var(--zh-space-6); }

.zh-pr-8 { padding-right: var(--zh-space-8); }

.zh-pr-10 { padding-right: var(--zh-space-10); }

.zh-pr-12 { padding-right: var(--zh-space-12); }

.zh-pb-0 { padding-bottom: 0; }

.zh-pb-1 { padding-bottom: var(--zh-space-1); }

.zh-pb-2 { padding-bottom: var(--zh-space-2); }

.zh-pb-3 { padding-bottom: var(--zh-space-3); }

.zh-pb-4 { padding-bottom: var(--zh-space-4); }

.zh-pb-5 { padding-bottom: var(--zh-space-5); }

.zh-pb-6 { padding-bottom: var(--zh-space-6); }

.zh-pb-8 { padding-bottom: var(--zh-space-8); }

.zh-pb-10 { padding-bottom: var(--zh-space-10); }

.zh-pb-12 { padding-bottom: var(--zh-space-12); }

.zh-pl-0 { padding-left: 0; }

.zh-pl-1 { padding-left: var(--zh-space-1); }

.zh-pl-2 { padding-left: var(--zh-space-2); }

.zh-pl-3 { padding-left: var(--zh-space-3); }

.zh-pl-4 { padding-left: var(--zh-space-4); }

.zh-pl-5 { padding-left: var(--zh-space-5); }

.zh-pl-6 { padding-left: var(--zh-space-6); }

.zh-pl-8 { padding-left: var(--zh-space-8); }

.zh-pl-10 { padding-left: var(--zh-space-10); }

.zh-pl-12 { padding-left: var(--zh-space-12); }

.zh-w-0 { width: 0; }

.zh-h-0 { height: 0; }

.zh-size-0 { width: 0; height: 0; }

.zh-w-1 { width: var(--zh-space-1); }

.zh-h-1 { height: var(--zh-space-1); }

.zh-size-1 { width: var(--zh-space-1); height: var(--zh-space-1); }

.zh-w-2 { width: var(--zh-space-2); }

.zh-h-2 { height: var(--zh-space-2); }

.zh-size-2 { width: var(--zh-space-2); height: var(--zh-space-2); }

.zh-w-3 { width: var(--zh-space-3); }

.zh-h-3 { height: var(--zh-space-3); }

.zh-size-3 { width: var(--zh-space-3); height: var(--zh-space-3); }

.zh-w-4 { width: var(--zh-space-4); }

.zh-h-4 { height: var(--zh-space-4); }

.zh-size-4 { width: var(--zh-space-4); height: var(--zh-space-4); }

.zh-w-5 { width: var(--zh-space-5); }

.zh-h-5 { height: var(--zh-space-5); }

.zh-size-5 { width: var(--zh-space-5); height: var(--zh-space-5); }

.zh-w-6 { width: var(--zh-space-6); }

.zh-h-6 { height: var(--zh-space-6); }

.zh-size-6 { width: var(--zh-space-6); height: var(--zh-space-6); }

.zh-w-8 { width: var(--zh-space-8); }

.zh-h-8 { height: var(--zh-space-8); }

.zh-size-8 { width: var(--zh-space-8); height: var(--zh-space-8); }

.zh-w-10 { width: var(--zh-space-10); }

.zh-h-10 { height: var(--zh-space-10); }

.zh-size-10 { width: var(--zh-space-10); height: var(--zh-space-10); }

.zh-w-12 { width: var(--zh-space-12); }

.zh-h-12 { height: var(--zh-space-12); }

.zh-size-12 { width: var(--zh-space-12); height: var(--zh-space-12); }

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

.zh-w-auto { width: auto; }

.zh-w-screen { width: 100vw; }

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

.zh-w-min { width: min-content; }

.zh-w-max { width: max-content; }

.zh-w-1-2 { width: 50%; }

.zh-w-1-3 { width: 33.3333%; }

.zh-w-2-3 { width: 66.6667%; }

.zh-w-1-4 { width: 25%; }

.zh-w-3-4 { width: 75%; }

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

.zh-h-auto { height: auto; }

.zh-h-fit { height: fit-content; }

.zh-h-screen { height: 100vh; height: 100dvh; }

.zh-h-control { height: var(--zh-control-h); }

.zh-min-h-control { min-height: var(--zh-control-h); }

.zh-size-control { width: var(--zh-control-h); height: var(--zh-control-h); }

.zh-size-icon-xs { width: var(--zh-icon-xs); height: var(--zh-icon-xs); }

.zh-size-icon-sm { width: var(--zh-icon-sm); height: var(--zh-icon-sm); }

.zh-size-icon-md { width: var(--zh-icon-md); height: var(--zh-icon-md); }

.zh-size-icon-lg { width: var(--zh-icon-lg); height: var(--zh-icon-lg); }

.zh-min-w-0 { min-width: 0; }

.zh-min-w-full { min-width: 100%; }

.zh-min-h-0 { min-height: 0; }

.zh-min-h-full { min-height: 100%; }

.zh-min-h-screen { min-height: 100vh; min-height: 100dvh; }

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

.zh-max-w-none { max-width: none; }

.zh-max-w-prose { max-width: 65ch; }

.zh-max-w-xs { max-width: 320px; }

.zh-max-w-sm { max-width: 480px; }

.zh-max-w-md { max-width: 640px; }

.zh-max-w-lg { max-width: 800px; }

.zh-max-w-xl { max-width: 1024px; }

.zh-max-w-2xl { max-width: 1200px; }

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

.zh-max-h-screen { max-height: 100vh; max-height: 100dvh; }

.zh-aspect-square { aspect-ratio: 1 / 1; }

.zh-aspect-video { aspect-ratio: 16 / 9; }

.zh-aspect-4-3 { aspect-ratio: 4 / 3; }

.zh-aspect-3-2 { aspect-ratio: 3 / 2; }

.zh-aspect-21-9 { aspect-ratio: 21 / 9; }

.zh-aspect-auto { aspect-ratio: auto; }

.zh-object-cover { object-fit: cover; }

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

.zh-object-fill { object-fit: fill; }

.zh-object-none { object-fit: none; }

.zh-object-scale-down { object-fit: scale-down; }

.zh-text-xs { font-size: .86em; }

.zh-text-sm { font-size: .93em; }

.zh-text-base { font-size: 1em; }

.zh-text-lg { font-size: 1.14em; }

.zh-text-xl { font-size: 1.43em; }

.zh-text-2xl { font-size: 1.71em; }

.zh-text-3xl { font-size: 2.29em; }

.zh-font-normal { font-weight: 400; }

.zh-font-medium { font-weight: 500; }

.zh-font-semibold { font-weight: 600; }

.zh-font-bold { font-weight: 700; }

.zh-font-sans { font-family: var(--zh-font-sans); }

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

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

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

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

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

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

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

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

.zh-normal-case { text-transform: none; }

.zh-tracking-tight { letter-spacing: -.02em; }

.zh-tracking-normal { letter-spacing: 0; }

.zh-tracking-wide { letter-spacing: .02em; }

.zh-tracking-wider { letter-spacing: .06em; }

.zh-tracking-widest { letter-spacing: .12em; }

.zh-leading-none { line-height: 1; }

.zh-leading-tight { line-height: 1.25; }

.zh-leading-snug { line-height: 1.4; }

.zh-leading-normal { line-height: var(--zh-line); }

.zh-leading-relaxed { line-height: 1.75; }

.zh-leading-loose { line-height: 2; }

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

.zh-line-clamp-1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }

.zh-line-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

.zh-line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

.zh-line-clamp-4 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }

.zh-text-wrap { white-space: normal; text-wrap: wrap; }

.zh-text-nowrap { white-space: nowrap; }

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

.zh-text-pretty { text-wrap: pretty; }

.zh-break-words { overflow-wrap: anywhere; }

.zh-break-normal { overflow-wrap: normal; word-break: normal; }

.zh-whitespace-pre-wrap { white-space: pre-wrap; }

.zh-whitespace-pre { white-space: pre; }

.zh-tabular-nums { font-variant-numeric: tabular-nums; }

.zh-proportional-nums { font-variant-numeric: proportional-nums; }

.zh-slashed-zero { font-variant-numeric: slashed-zero; }

.zh-underline { text-decoration: underline; text-underline-offset: 3px; }

.zh-line-through { text-decoration: line-through; }

.zh-no-underline { text-decoration: none; }

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

.zh-not-italic { font-style: normal; }

.zh-antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

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

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

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

.zh-text-tertiary { color: var(--zh-text-tertiary); }

.zh-text-disabled { color: var(--zh-text-disabled); }

.zh-text-inverse { color: var(--zh-text-inverse); }

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

.zh-text-on-brand { color: var(--zh-on-primary); }

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

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

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

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

.zh-text-trend-up { color: var(--zh-trend-up); }

.zh-text-trend-down { color: var(--zh-trend-down); }

.zh-text-trend-flat { color: var(--zh-trend-flat); }

.zh-text-good { color: var(--zh-num-good); }

.zh-text-warn { color: var(--zh-num-warn); }

.zh-text-bad { color: var(--zh-num-bad); }

.zh-text-chart-1 { color: var(--zh-chart-1); }

.zh-text-chart-2 { color: var(--zh-chart-2); }

.zh-text-chart-3 { color: var(--zh-chart-3); }

.zh-text-chart-4 { color: var(--zh-chart-4); }

.zh-text-chart-5 { color: var(--zh-chart-5); }

.zh-text-chart-6 { color: var(--zh-chart-6); }

.zh-text-chart-7 { color: var(--zh-chart-7); }

.zh-text-chart-8 { color: var(--zh-chart-8); }

.zh-text-inherit { color: inherit; }

.zh-text-current { color: currentColor; }

.zh-bg-page { background-color: var(--zh-bg); }

.zh-bg-subtle { background-color: var(--zh-bg-subtle); }

.zh-bg-elevated { background-color: var(--zh-bg-elevated); }

.zh-bg-glass { background-color: var(--zh-bg-glass); }

.zh-bg-code { background-color: var(--zh-code-bg); }

.zh-bg-mark { background-color: var(--zh-mark-bg); }

.zh-bg-overlay { background-color: var(--zh-overlay); }

.zh-bg-brand { background-color: var(--zh-color-primary); }

.zh-bg-brand-subtle { background-color: var(--zh-color-primary-subtle); }

.zh-bg-success-solid { background-color: var(--zh-success); }

.zh-bg-warning-solid { background-color: var(--zh-warning); }

.zh-bg-danger-solid { background-color: var(--zh-danger); }

.zh-bg-info-solid { background-color: var(--zh-info); }

.zh-bg-success { background-color: var(--zh-success-bg); }

.zh-bg-warning { background-color: var(--zh-warning-bg); }

.zh-bg-danger { background-color: var(--zh-danger-bg); }

.zh-bg-info { background-color: var(--zh-info-bg); }

.zh-bg-success-subtle { background-color: var(--zh-success-bg-subtle); }

.zh-bg-warning-subtle { background-color: var(--zh-warning-bg-subtle); }

.zh-bg-danger-subtle { background-color: var(--zh-danger-bg-subtle); }

.zh-bg-info-subtle { background-color: var(--zh-info-bg-subtle); }

.zh-bg-chart-1 { background-color: var(--zh-chart-1); }

.zh-bg-chart-2 { background-color: var(--zh-chart-2); }

.zh-bg-chart-3 { background-color: var(--zh-chart-3); }

.zh-bg-chart-4 { background-color: var(--zh-chart-4); }

.zh-bg-chart-5 { background-color: var(--zh-chart-5); }

.zh-bg-chart-6 { background-color: var(--zh-chart-6); }

.zh-bg-chart-7 { background-color: var(--zh-chart-7); }

.zh-bg-chart-8 { background-color: var(--zh-chart-8); }

.zh-bg-transparent { background-color: transparent; }

.zh-fill-chart-1 { fill: var(--zh-chart-1); }

.zh-fill-chart-2 { fill: var(--zh-chart-2); }

.zh-fill-chart-3 { fill: var(--zh-chart-3); }

.zh-fill-chart-4 { fill: var(--zh-chart-4); }

.zh-fill-chart-5 { fill: var(--zh-chart-5); }

.zh-fill-chart-6 { fill: var(--zh-chart-6); }

.zh-fill-chart-7 { fill: var(--zh-chart-7); }

.zh-fill-chart-8 { fill: var(--zh-chart-8); }

.zh-fill-current { fill: currentColor; }

.zh-stroke-current { stroke: currentColor; }

.zh-border { border: 1px solid var(--zh-border); }

.zh-border-0 { border-width: 0; }

.zh-border-2 { border-width: 2px; border-style: solid; border-color: var(--zh-border); }

.zh-border-t { border-top: 1px solid var(--zh-border); }

.zh-border-t-0 { border-top-width: 0; }

.zh-border-r { border-right: 1px solid var(--zh-border); }

.zh-border-r-0 { border-right-width: 0; }

.zh-border-b { border-bottom: 1px solid var(--zh-border); }

.zh-border-b-0 { border-bottom-width: 0; }

.zh-border-l { border-left: 1px solid var(--zh-border); }

.zh-border-l-0 { border-left-width: 0; }

.zh-border-solid { border-style: solid; }

.zh-border-dashed { border-style: dashed; }

.zh-border-dotted { border-style: dotted; }

.zh-border-none { border-style: none; }

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

.zh-border-strong { border-color: var(--zh-border-strong); }

.zh-border-brand { border-color: var(--zh-color-primary); }

.zh-border-success { border-color: var(--zh-success-border); }

.zh-border-warning { border-color: var(--zh-warning-border); }

.zh-border-danger { border-color: var(--zh-danger-border); }

.zh-border-info { border-color: var(--zh-info-border); }

.zh-border-transparent { border-color: transparent; }

.zh-rounded-none { border-radius: 0; }

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

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

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

.zh-rounded-full { border-radius: 999px; }

.zh-rounded-t-sm { border-top-left-radius: var(--zh-radius-sm); border-top-right-radius: var(--zh-radius-sm); }

.zh-rounded-b-sm { border-bottom-left-radius: var(--zh-radius-sm); border-bottom-right-radius: var(--zh-radius-sm); }

.zh-rounded-t-md { border-top-left-radius: var(--zh-radius-md); border-top-right-radius: var(--zh-radius-md); }

.zh-rounded-b-md { border-bottom-left-radius: var(--zh-radius-md); border-bottom-right-radius: var(--zh-radius-md); }

.zh-rounded-t-lg { border-top-left-radius: var(--zh-radius-lg); border-top-right-radius: var(--zh-radius-lg); }

.zh-rounded-b-lg { border-bottom-left-radius: var(--zh-radius-lg); border-bottom-right-radius: var(--zh-radius-lg); }

.zh-divide-y > * + * { border-top: 1px solid var(--zh-border); }

.zh-divide-x > * + * { border-left: 1px solid var(--zh-border); }

.zh-divide-strong > * + * { border-color: var(--zh-border-strong); }

.zh-outline-none { outline: none; }

.zh-shadow-ring { box-shadow: var(--zh-focus-ring); }

.zh-shadow-none { box-shadow: none; }

.zh-shadow-sm { box-shadow: var(--zh-shadow-sm); }

.zh-shadow-md { box-shadow: var(--zh-shadow-md); }

.zh-shadow-lg { box-shadow: var(--zh-shadow-lg); }

.zh-opacity-0 { opacity: 0; }

.zh-opacity-25 { opacity: 0.25; }

.zh-opacity-50 { opacity: 0.5; }

.zh-opacity-75 { opacity: 0.75; }

.zh-opacity-100 { opacity: 1; }

.zh-opacity-disabled { opacity: var(--zh-opacity-disabled); }

.zh-backdrop-blur { -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); }

.zh-glass { background-color: var(--zh-bg-glass); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); }

.zh-static { position: static; }

.zh-relative { position: relative; }

.zh-absolute { position: absolute; }

.zh-fixed { position: fixed; }

.zh-sticky { position: sticky; }

.zh-inset-0 { inset: 0; }

.zh-inset-x-0 { left: 0; right: 0; }

.zh-inset-y-0 { top: 0; bottom: 0; }

.zh-top-0 { top: 0; }

.zh-right-0 { right: 0; }

.zh-bottom-0 { bottom: 0; }

.zh-left-0 { left: 0; }

.zh-center-abs { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.zh-z-base { z-index: var(--zh-z-base); }

.zh-z-sticky { z-index: var(--zh-z-sticky); }

.zh-z-dropdown { z-index: var(--zh-z-dropdown); }

.zh-z-drawer { z-index: var(--zh-z-drawer); }

.zh-z-modal { z-index: var(--zh-z-modal); }

.zh-z-popover { z-index: var(--zh-z-popover); }

.zh-z-toast { z-index: var(--zh-z-toast); }

.zh-z-tooltip { z-index: var(--zh-z-tooltip); }

.zh-z-auto { z-index: auto; }

.zh-isolate { isolation: isolate; }

.zh-overflow-hidden { overflow: hidden; }

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

.zh-overflow-scroll { overflow: scroll; }

.zh-overflow-visible { overflow: visible; }

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

.zh-overflow-y-auto { overflow-y: auto; }

.zh-overflow-x-hidden { overflow-x: hidden; }

.zh-overflow-y-hidden { overflow-y: hidden; }

.zh-overflow-x-scroll { overflow-x: scroll; }

.zh-overflow-y-scroll { overflow-y: scroll; }

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

.zh-scroll-smooth { scroll-behavior: smooth; }

.zh-scrollbar-thin { scrollbar-width: thin; }

.zh-scrollbar-none { scrollbar-width: none; }

.zh-scrollbar-none::-webkit-scrollbar { display: none; }

.zh-cursor-pointer { cursor: pointer; }

.zh-cursor-default { cursor: default; }

.zh-cursor-not-allowed { cursor: not-allowed; }

.zh-cursor-text { cursor: text; }

.zh-cursor-grab { cursor: grab; }

.zh-cursor-grabbing { cursor: grabbing; }

.zh-cursor-move { cursor: move; }

.zh-cursor-wait { cursor: wait; }

.zh-cursor-help { cursor: help; }

.zh-pointer-events-none { pointer-events: none; }

.zh-pointer-events-auto { pointer-events: auto; }

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

.zh-select-text { -webkit-user-select: text; user-select: text; }

.zh-select-all { -webkit-user-select: all; user-select: all; }

.zh-select-auto { -webkit-user-select: auto; user-select: auto; }

.zh-touch-manipulation { touch-action: manipulation; }

.zh-touch-none { touch-action: none; }

.zh-appearance-none { -webkit-appearance: none; appearance: none; }

.zh-resize-none { resize: none; }

.zh-resize-y { resize: vertical; }

.zh-transition { transition-property: color, background-color, border-color, box-shadow, opacity, transform; transition-duration: var(--zh-dur-fast); transition-timing-function: var(--zh-ease-standard); }

.zh-transition-none { transition: none; }

.zh-transition-colors { transition-property: color, background-color, border-color; transition-duration: var(--zh-dur-fast); transition-timing-function: var(--zh-ease-standard); }

.zh-transition-opacity { transition-property: opacity; transition-duration: var(--zh-dur-fast); transition-timing-function: var(--zh-ease-standard); }

.zh-transition-transform { transition-property: transform; transition-duration: var(--zh-dur-base); transition-timing-function: var(--zh-ease-standard); }

.zh-transition-shadow { transition-property: box-shadow; transition-duration: var(--zh-dur-fast); transition-timing-function: var(--zh-ease-standard); }

.zh-duration-instant { transition-duration: var(--zh-dur-instant); animation-duration: var(--zh-dur-instant); }

.zh-duration-fast { transition-duration: var(--zh-dur-fast); animation-duration: var(--zh-dur-fast); }

.zh-duration-base { transition-duration: var(--zh-dur-base); animation-duration: var(--zh-dur-base); }

.zh-duration-slow { transition-duration: var(--zh-dur-slow); animation-duration: var(--zh-dur-slow); }

.zh-duration-slower { transition-duration: var(--zh-dur-slower); animation-duration: var(--zh-dur-slower); }

.zh-ease-standard { transition-timing-function: var(--zh-ease-standard); animation-timing-function: var(--zh-ease-standard); }

.zh-ease-enter { transition-timing-function: var(--zh-ease-enter); animation-timing-function: var(--zh-ease-enter); }

.zh-ease-exit { transition-timing-function: var(--zh-ease-exit); animation-timing-function: var(--zh-ease-exit); }

.zh-ease-spring { transition-timing-function: var(--zh-ease-spring); animation-timing-function: var(--zh-ease-spring); }

.zh-ease-linear { transition-timing-function: linear; animation-timing-function: linear; }

.zh-delay-0 { transition-delay: calc(var(--zh-stagger) * 0); animation-delay: calc(var(--zh-stagger) * 0); }

.zh-delay-1 { transition-delay: calc(var(--zh-stagger) * 1); animation-delay: calc(var(--zh-stagger) * 1); }

.zh-delay-2 { transition-delay: calc(var(--zh-stagger) * 2); animation-delay: calc(var(--zh-stagger) * 2); }

.zh-delay-3 { transition-delay: calc(var(--zh-stagger) * 3); animation-delay: calc(var(--zh-stagger) * 3); }

.zh-delay-4 { transition-delay: calc(var(--zh-stagger) * 4); animation-delay: calc(var(--zh-stagger) * 4); }

.zh-delay-5 { transition-delay: calc(var(--zh-stagger) * 5); animation-delay: calc(var(--zh-stagger) * 5); }

.zh-delay-6 { transition-delay: calc(var(--zh-stagger) * 6); animation-delay: calc(var(--zh-stagger) * 6); }

.zh-will-change-transform { will-change: transform; }

.zh-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.zh-not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }

.zh-invisible { visibility: hidden; }

.zh-visible { visibility: visible; }

@media (max-width: 767px) {
.zh-hide-phone { display: none; }
}

@media (min-width: 768px) and (max-width: 1199px) {
.zh-hide-tablet { display: none; }
}

@media (min-width: 1200px) and (max-width: 1919px) {
.zh-hide-desktop { display: none; }
}

@media (min-width: 1920px) {
.zh-hide-large { display: none; }
}

@media (max-width: 1199px) {
.zh-hide-tablet-down { display: none; }
}

@media (min-width: 1200px) {
.zh-hide-desktop-up { display: none; }
}

.zh-show-phone-only { display: none; }

.zh-show-tablet-only { display: none; }

.zh-show-desktop-only { display: none; }

.zh-show-large-only { display: none; }

@media (max-width: 767px) {
.zh-show-phone-only { display: block; }
}

@media (min-width: 768px) and (max-width: 1199px) {
.zh-show-tablet-only { display: block; }
}

@media (min-width: 1200px) and (max-width: 1919px) {
.zh-show-desktop-only { display: block; }
}

@media (min-width: 1920px) {
.zh-show-large-only { display: block; }
}

@media (max-width: 767px) {
.zh-flex-col-phone { flex-direction: column; }
}

@media (max-width: 767px) {
.zh-flex-row-phone { flex-direction: row; }
}

@media (max-width: 767px) {
.zh-flex-wrap-phone { flex-wrap: wrap; }
}

@media (max-width: 767px) {
.zh-flex-nowrap-phone { flex-wrap: nowrap; }
}

@media (max-width: 767px) {
.zh-items-start-phone { align-items: flex-start; }
}

@media (max-width: 767px) {
.zh-items-stretch-phone { align-items: stretch; }
}

@media (max-width: 767px) {
.zh-items-center-phone { align-items: center; }
}

@media (max-width: 767px) {
.zh-justify-start-phone { justify-content: flex-start; }
}

@media (max-width: 767px) {
.zh-justify-between-phone { justify-content: space-between; }
}

@media (max-width: 767px) {
.zh-justify-center-phone { justify-content: center; }
}

@media (max-width: 767px) {
.zh-w-full-phone { width: 100%; }
}

@media (max-width: 767px) {
.zh-w-auto-phone { width: auto; }
}

@media (max-width: 767px) {
.zh-text-left-phone { text-align: left; }
}

@media (max-width: 767px) {
.zh-text-center-phone { text-align: center; }
}

@media (max-width: 767px) {
.zh-text-right-phone { text-align: right; }
}

@media (max-width: 767px) {
.zh-text-xs-phone { font-size: .86em; }
}

@media (max-width: 767px) {
.zh-text-sm-phone { font-size: .93em; }
}

@media (max-width: 767px) {
.zh-text-base-phone { font-size: 1em; }
}

@media (max-width: 767px) {
.zh-text-lg-phone { font-size: 1.14em; }
}

@media (max-width: 767px) {
.zh-text-xl-phone { font-size: 1.43em; }
}

@media (max-width: 767px) {
.zh-text-2xl-phone { font-size: 1.71em; }
}

@media (max-width: 767px) {
.zh-p-0-phone { padding: 0; }
}

@media (max-width: 767px) {
.zh-px-0-phone { padding-left: 0; padding-right: 0; }
}

@media (max-width: 767px) {
.zh-py-0-phone { padding-top: 0; padding-bottom: 0; }
}

@media (max-width: 767px) {
.zh-gap-0-phone { gap: 0; }
}

@media (max-width: 767px) {
.zh-mt-0-phone { margin-top: 0; }
}

@media (max-width: 767px) {
.zh-mb-0-phone { margin-bottom: 0; }
}

@media (max-width: 767px) {
.zh-p-2-phone { padding: var(--zh-space-2); }
}

@media (max-width: 767px) {
.zh-px-2-phone { padding-left: var(--zh-space-2); padding-right: var(--zh-space-2); }
}

@media (max-width: 767px) {
.zh-py-2-phone { padding-top: var(--zh-space-2); padding-bottom: var(--zh-space-2); }
}

@media (max-width: 767px) {
.zh-gap-2-phone { gap: var(--zh-space-2); }
}

@media (max-width: 767px) {
.zh-mt-2-phone { margin-top: var(--zh-space-2); }
}

@media (max-width: 767px) {
.zh-mb-2-phone { margin-bottom: var(--zh-space-2); }
}

@media (max-width: 767px) {
.zh-p-3-phone { padding: var(--zh-space-3); }
}

@media (max-width: 767px) {
.zh-px-3-phone { padding-left: var(--zh-space-3); padding-right: var(--zh-space-3); }
}

@media (max-width: 767px) {
.zh-py-3-phone { padding-top: var(--zh-space-3); padding-bottom: var(--zh-space-3); }
}

@media (max-width: 767px) {
.zh-gap-3-phone { gap: var(--zh-space-3); }
}

@media (max-width: 767px) {
.zh-mt-3-phone { margin-top: var(--zh-space-3); }
}

@media (max-width: 767px) {
.zh-mb-3-phone { margin-bottom: var(--zh-space-3); }
}

@media (max-width: 767px) {
.zh-p-4-phone { padding: var(--zh-space-4); }
}

@media (max-width: 767px) {
.zh-px-4-phone { padding-left: var(--zh-space-4); padding-right: var(--zh-space-4); }
}

@media (max-width: 767px) {
.zh-py-4-phone { padding-top: var(--zh-space-4); padding-bottom: var(--zh-space-4); }
}

@media (max-width: 767px) {
.zh-gap-4-phone { gap: var(--zh-space-4); }
}

@media (max-width: 767px) {
.zh-mt-4-phone { margin-top: var(--zh-space-4); }
}

@media (max-width: 767px) {
.zh-mb-4-phone { margin-bottom: var(--zh-space-4); }
}

@media (max-width: 767px) {
.zh-p-6-phone { padding: var(--zh-space-6); }
}

@media (max-width: 767px) {
.zh-px-6-phone { padding-left: var(--zh-space-6); padding-right: var(--zh-space-6); }
}

@media (max-width: 767px) {
.zh-py-6-phone { padding-top: var(--zh-space-6); padding-bottom: var(--zh-space-6); }
}

@media (max-width: 767px) {
.zh-gap-6-phone { gap: var(--zh-space-6); }
}

@media (max-width: 767px) {
.zh-mt-6-phone { margin-top: var(--zh-space-6); }
}

@media (max-width: 767px) {
.zh-mb-6-phone { margin-bottom: var(--zh-space-6); }
}

@media (max-width: 767px) {
.zh-cols-1-phone { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
.zh-cols-2-phone { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
.zh-cols-3-phone { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
.zh-cols-4-phone { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
.zh-cols-6-phone { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
.zh-cols-12-phone { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
.zh-col-span-1-phone { grid-column: span 1 / span 1; }
}

@media (max-width: 767px) {
.zh-col-span-2-phone { grid-column: span 2 / span 2; }
}

@media (max-width: 767px) {
.zh-col-span-3-phone { grid-column: span 3 / span 3; }
}

@media (max-width: 767px) {
.zh-col-span-4-phone { grid-column: span 4 / span 4; }
}

@media (max-width: 767px) {
.zh-col-span-6-phone { grid-column: span 6 / span 6; }
}

@media (max-width: 767px) {
.zh-col-span-12-phone { grid-column: span 12 / span 12; }
}

@media (max-width: 767px) {
.zh-col-span-full-phone { grid-column: 1 / -1; }
}

@media (max-width: 1199px) {
.zh-flex-col-tablet { flex-direction: column; }
}

@media (max-width: 1199px) {
.zh-flex-row-tablet { flex-direction: row; }
}

@media (max-width: 1199px) {
.zh-flex-wrap-tablet { flex-wrap: wrap; }
}

@media (max-width: 1199px) {
.zh-flex-nowrap-tablet { flex-wrap: nowrap; }
}

@media (max-width: 1199px) {
.zh-items-start-tablet { align-items: flex-start; }
}

@media (max-width: 1199px) {
.zh-items-stretch-tablet { align-items: stretch; }
}

@media (max-width: 1199px) {
.zh-items-center-tablet { align-items: center; }
}

@media (max-width: 1199px) {
.zh-justify-start-tablet { justify-content: flex-start; }
}

@media (max-width: 1199px) {
.zh-justify-between-tablet { justify-content: space-between; }
}

@media (max-width: 1199px) {
.zh-justify-center-tablet { justify-content: center; }
}

@media (max-width: 1199px) {
.zh-w-full-tablet { width: 100%; }
}

@media (max-width: 1199px) {
.zh-w-auto-tablet { width: auto; }
}

@media (max-width: 1199px) {
.zh-text-left-tablet { text-align: left; }
}

@media (max-width: 1199px) {
.zh-text-center-tablet { text-align: center; }
}

@media (max-width: 1199px) {
.zh-text-right-tablet { text-align: right; }
}

@media (max-width: 1199px) {
.zh-text-xs-tablet { font-size: .86em; }
}

@media (max-width: 1199px) {
.zh-text-sm-tablet { font-size: .93em; }
}

@media (max-width: 1199px) {
.zh-text-base-tablet { font-size: 1em; }
}

@media (max-width: 1199px) {
.zh-text-lg-tablet { font-size: 1.14em; }
}

@media (max-width: 1199px) {
.zh-text-xl-tablet { font-size: 1.43em; }
}

@media (max-width: 1199px) {
.zh-text-2xl-tablet { font-size: 1.71em; }
}

@media (max-width: 1199px) {
.zh-p-0-tablet { padding: 0; }
}

@media (max-width: 1199px) {
.zh-px-0-tablet { padding-left: 0; padding-right: 0; }
}

@media (max-width: 1199px) {
.zh-py-0-tablet { padding-top: 0; padding-bottom: 0; }
}

@media (max-width: 1199px) {
.zh-gap-0-tablet { gap: 0; }
}

@media (max-width: 1199px) {
.zh-mt-0-tablet { margin-top: 0; }
}

@media (max-width: 1199px) {
.zh-mb-0-tablet { margin-bottom: 0; }
}

@media (max-width: 1199px) {
.zh-p-2-tablet { padding: var(--zh-space-2); }
}

@media (max-width: 1199px) {
.zh-px-2-tablet { padding-left: var(--zh-space-2); padding-right: var(--zh-space-2); }
}

@media (max-width: 1199px) {
.zh-py-2-tablet { padding-top: var(--zh-space-2); padding-bottom: var(--zh-space-2); }
}

@media (max-width: 1199px) {
.zh-gap-2-tablet { gap: var(--zh-space-2); }
}

@media (max-width: 1199px) {
.zh-mt-2-tablet { margin-top: var(--zh-space-2); }
}

@media (max-width: 1199px) {
.zh-mb-2-tablet { margin-bottom: var(--zh-space-2); }
}

@media (max-width: 1199px) {
.zh-p-3-tablet { padding: var(--zh-space-3); }
}

@media (max-width: 1199px) {
.zh-px-3-tablet { padding-left: var(--zh-space-3); padding-right: var(--zh-space-3); }
}

@media (max-width: 1199px) {
.zh-py-3-tablet { padding-top: var(--zh-space-3); padding-bottom: var(--zh-space-3); }
}

@media (max-width: 1199px) {
.zh-gap-3-tablet { gap: var(--zh-space-3); }
}

@media (max-width: 1199px) {
.zh-mt-3-tablet { margin-top: var(--zh-space-3); }
}

@media (max-width: 1199px) {
.zh-mb-3-tablet { margin-bottom: var(--zh-space-3); }
}

@media (max-width: 1199px) {
.zh-p-4-tablet { padding: var(--zh-space-4); }
}

@media (max-width: 1199px) {
.zh-px-4-tablet { padding-left: var(--zh-space-4); padding-right: var(--zh-space-4); }
}

@media (max-width: 1199px) {
.zh-py-4-tablet { padding-top: var(--zh-space-4); padding-bottom: var(--zh-space-4); }
}

@media (max-width: 1199px) {
.zh-gap-4-tablet { gap: var(--zh-space-4); }
}

@media (max-width: 1199px) {
.zh-mt-4-tablet { margin-top: var(--zh-space-4); }
}

@media (max-width: 1199px) {
.zh-mb-4-tablet { margin-bottom: var(--zh-space-4); }
}

@media (max-width: 1199px) {
.zh-p-6-tablet { padding: var(--zh-space-6); }
}

@media (max-width: 1199px) {
.zh-px-6-tablet { padding-left: var(--zh-space-6); padding-right: var(--zh-space-6); }
}

@media (max-width: 1199px) {
.zh-py-6-tablet { padding-top: var(--zh-space-6); padding-bottom: var(--zh-space-6); }
}

@media (max-width: 1199px) {
.zh-gap-6-tablet { gap: var(--zh-space-6); }
}

@media (max-width: 1199px) {
.zh-mt-6-tablet { margin-top: var(--zh-space-6); }
}

@media (max-width: 1199px) {
.zh-mb-6-tablet { margin-bottom: var(--zh-space-6); }
}

@media (max-width: 1199px) {
.zh-cols-1-tablet { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

@media (max-width: 1199px) {
.zh-cols-2-tablet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1199px) {
.zh-cols-3-tablet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1199px) {
.zh-cols-4-tablet { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1199px) {
.zh-cols-6-tablet { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 1199px) {
.zh-cols-12-tablet { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

@media (max-width: 1199px) {
.zh-col-span-1-tablet { grid-column: span 1 / span 1; }
}

@media (max-width: 1199px) {
.zh-col-span-2-tablet { grid-column: span 2 / span 2; }
}

@media (max-width: 1199px) {
.zh-col-span-3-tablet { grid-column: span 3 / span 3; }
}

@media (max-width: 1199px) {
.zh-col-span-4-tablet { grid-column: span 4 / span 4; }
}

@media (max-width: 1199px) {
.zh-col-span-6-tablet { grid-column: span 6 / span 6; }
}

@media (max-width: 1199px) {
.zh-col-span-12-tablet { grid-column: span 12 / span 12; }
}

@media (max-width: 1199px) {
.zh-col-span-full-tablet { grid-column: 1 / -1; }
}

@media (min-width: 1200px) {
.zh-flex-col-desktop { flex-direction: column; }
}

@media (min-width: 1200px) {
.zh-flex-row-desktop { flex-direction: row; }
}

@media (min-width: 1200px) {
.zh-flex-wrap-desktop { flex-wrap: wrap; }
}

@media (min-width: 1200px) {
.zh-flex-nowrap-desktop { flex-wrap: nowrap; }
}

@media (min-width: 1200px) {
.zh-items-start-desktop { align-items: flex-start; }
}

@media (min-width: 1200px) {
.zh-items-stretch-desktop { align-items: stretch; }
}

@media (min-width: 1200px) {
.zh-items-center-desktop { align-items: center; }
}

@media (min-width: 1200px) {
.zh-justify-start-desktop { justify-content: flex-start; }
}

@media (min-width: 1200px) {
.zh-justify-between-desktop { justify-content: space-between; }
}

@media (min-width: 1200px) {
.zh-justify-center-desktop { justify-content: center; }
}

@media (min-width: 1200px) {
.zh-w-full-desktop { width: 100%; }
}

@media (min-width: 1200px) {
.zh-w-auto-desktop { width: auto; }
}

@media (min-width: 1200px) {
.zh-text-left-desktop { text-align: left; }
}

@media (min-width: 1200px) {
.zh-text-center-desktop { text-align: center; }
}

@media (min-width: 1200px) {
.zh-text-right-desktop { text-align: right; }
}

@media (min-width: 1200px) {
.zh-text-xs-desktop { font-size: .86em; }
}

@media (min-width: 1200px) {
.zh-text-sm-desktop { font-size: .93em; }
}

@media (min-width: 1200px) {
.zh-text-base-desktop { font-size: 1em; }
}

@media (min-width: 1200px) {
.zh-text-lg-desktop { font-size: 1.14em; }
}

@media (min-width: 1200px) {
.zh-text-xl-desktop { font-size: 1.43em; }
}

@media (min-width: 1200px) {
.zh-text-2xl-desktop { font-size: 1.71em; }
}

@media (min-width: 1200px) {
.zh-p-0-desktop { padding: 0; }
}

@media (min-width: 1200px) {
.zh-px-0-desktop { padding-left: 0; padding-right: 0; }
}

@media (min-width: 1200px) {
.zh-py-0-desktop { padding-top: 0; padding-bottom: 0; }
}

@media (min-width: 1200px) {
.zh-gap-0-desktop { gap: 0; }
}

@media (min-width: 1200px) {
.zh-mt-0-desktop { margin-top: 0; }
}

@media (min-width: 1200px) {
.zh-mb-0-desktop { margin-bottom: 0; }
}

@media (min-width: 1200px) {
.zh-p-2-desktop { padding: var(--zh-space-2); }
}

@media (min-width: 1200px) {
.zh-px-2-desktop { padding-left: var(--zh-space-2); padding-right: var(--zh-space-2); }
}

@media (min-width: 1200px) {
.zh-py-2-desktop { padding-top: var(--zh-space-2); padding-bottom: var(--zh-space-2); }
}

@media (min-width: 1200px) {
.zh-gap-2-desktop { gap: var(--zh-space-2); }
}

@media (min-width: 1200px) {
.zh-mt-2-desktop { margin-top: var(--zh-space-2); }
}

@media (min-width: 1200px) {
.zh-mb-2-desktop { margin-bottom: var(--zh-space-2); }
}

@media (min-width: 1200px) {
.zh-p-3-desktop { padding: var(--zh-space-3); }
}

@media (min-width: 1200px) {
.zh-px-3-desktop { padding-left: var(--zh-space-3); padding-right: var(--zh-space-3); }
}

@media (min-width: 1200px) {
.zh-py-3-desktop { padding-top: var(--zh-space-3); padding-bottom: var(--zh-space-3); }
}

@media (min-width: 1200px) {
.zh-gap-3-desktop { gap: var(--zh-space-3); }
}

@media (min-width: 1200px) {
.zh-mt-3-desktop { margin-top: var(--zh-space-3); }
}

@media (min-width: 1200px) {
.zh-mb-3-desktop { margin-bottom: var(--zh-space-3); }
}

@media (min-width: 1200px) {
.zh-p-4-desktop { padding: var(--zh-space-4); }
}

@media (min-width: 1200px) {
.zh-px-4-desktop { padding-left: var(--zh-space-4); padding-right: var(--zh-space-4); }
}

@media (min-width: 1200px) {
.zh-py-4-desktop { padding-top: var(--zh-space-4); padding-bottom: var(--zh-space-4); }
}

@media (min-width: 1200px) {
.zh-gap-4-desktop { gap: var(--zh-space-4); }
}

@media (min-width: 1200px) {
.zh-mt-4-desktop { margin-top: var(--zh-space-4); }
}

@media (min-width: 1200px) {
.zh-mb-4-desktop { margin-bottom: var(--zh-space-4); }
}

@media (min-width: 1200px) {
.zh-p-6-desktop { padding: var(--zh-space-6); }
}

@media (min-width: 1200px) {
.zh-px-6-desktop { padding-left: var(--zh-space-6); padding-right: var(--zh-space-6); }
}

@media (min-width: 1200px) {
.zh-py-6-desktop { padding-top: var(--zh-space-6); padding-bottom: var(--zh-space-6); }
}

@media (min-width: 1200px) {
.zh-gap-6-desktop { gap: var(--zh-space-6); }
}

@media (min-width: 1200px) {
.zh-mt-6-desktop { margin-top: var(--zh-space-6); }
}

@media (min-width: 1200px) {
.zh-mb-6-desktop { margin-bottom: var(--zh-space-6); }
}

@media (min-width: 1200px) {
.zh-cols-1-desktop { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
.zh-cols-2-desktop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
.zh-cols-3-desktop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
.zh-cols-4-desktop { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
.zh-cols-6-desktop { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
.zh-cols-12-desktop { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
.zh-col-span-1-desktop { grid-column: span 1 / span 1; }
}

@media (min-width: 1200px) {
.zh-col-span-2-desktop { grid-column: span 2 / span 2; }
}

@media (min-width: 1200px) {
.zh-col-span-3-desktop { grid-column: span 3 / span 3; }
}

@media (min-width: 1200px) {
.zh-col-span-4-desktop { grid-column: span 4 / span 4; }
}

@media (min-width: 1200px) {
.zh-col-span-6-desktop { grid-column: span 6 / span 6; }
}

@media (min-width: 1200px) {
.zh-col-span-12-desktop { grid-column: span 12 / span 12; }
}

@media (min-width: 1200px) {
.zh-col-span-full-desktop { grid-column: 1 / -1; }
}

@media (min-width: 1920px) {
.zh-flex-col-large { flex-direction: column; }
}

@media (min-width: 1920px) {
.zh-flex-row-large { flex-direction: row; }
}

@media (min-width: 1920px) {
.zh-flex-wrap-large { flex-wrap: wrap; }
}

@media (min-width: 1920px) {
.zh-flex-nowrap-large { flex-wrap: nowrap; }
}

@media (min-width: 1920px) {
.zh-items-start-large { align-items: flex-start; }
}

@media (min-width: 1920px) {
.zh-items-stretch-large { align-items: stretch; }
}

@media (min-width: 1920px) {
.zh-items-center-large { align-items: center; }
}

@media (min-width: 1920px) {
.zh-justify-start-large { justify-content: flex-start; }
}

@media (min-width: 1920px) {
.zh-justify-between-large { justify-content: space-between; }
}

@media (min-width: 1920px) {
.zh-justify-center-large { justify-content: center; }
}

@media (min-width: 1920px) {
.zh-w-full-large { width: 100%; }
}

@media (min-width: 1920px) {
.zh-w-auto-large { width: auto; }
}

@media (min-width: 1920px) {
.zh-text-left-large { text-align: left; }
}

@media (min-width: 1920px) {
.zh-text-center-large { text-align: center; }
}

@media (min-width: 1920px) {
.zh-text-right-large { text-align: right; }
}

@media (min-width: 1920px) {
.zh-text-xs-large { font-size: .86em; }
}

@media (min-width: 1920px) {
.zh-text-sm-large { font-size: .93em; }
}

@media (min-width: 1920px) {
.zh-text-base-large { font-size: 1em; }
}

@media (min-width: 1920px) {
.zh-text-lg-large { font-size: 1.14em; }
}

@media (min-width: 1920px) {
.zh-text-xl-large { font-size: 1.43em; }
}

@media (min-width: 1920px) {
.zh-text-2xl-large { font-size: 1.71em; }
}

@media (min-width: 1920px) {
.zh-p-0-large { padding: 0; }
}

@media (min-width: 1920px) {
.zh-px-0-large { padding-left: 0; padding-right: 0; }
}

@media (min-width: 1920px) {
.zh-py-0-large { padding-top: 0; padding-bottom: 0; }
}

@media (min-width: 1920px) {
.zh-gap-0-large { gap: 0; }
}

@media (min-width: 1920px) {
.zh-mt-0-large { margin-top: 0; }
}

@media (min-width: 1920px) {
.zh-mb-0-large { margin-bottom: 0; }
}

@media (min-width: 1920px) {
.zh-p-2-large { padding: var(--zh-space-2); }
}

@media (min-width: 1920px) {
.zh-px-2-large { padding-left: var(--zh-space-2); padding-right: var(--zh-space-2); }
}

@media (min-width: 1920px) {
.zh-py-2-large { padding-top: var(--zh-space-2); padding-bottom: var(--zh-space-2); }
}

@media (min-width: 1920px) {
.zh-gap-2-large { gap: var(--zh-space-2); }
}

@media (min-width: 1920px) {
.zh-mt-2-large { margin-top: var(--zh-space-2); }
}

@media (min-width: 1920px) {
.zh-mb-2-large { margin-bottom: var(--zh-space-2); }
}

@media (min-width: 1920px) {
.zh-p-3-large { padding: var(--zh-space-3); }
}

@media (min-width: 1920px) {
.zh-px-3-large { padding-left: var(--zh-space-3); padding-right: var(--zh-space-3); }
}

@media (min-width: 1920px) {
.zh-py-3-large { padding-top: var(--zh-space-3); padding-bottom: var(--zh-space-3); }
}

@media (min-width: 1920px) {
.zh-gap-3-large { gap: var(--zh-space-3); }
}

@media (min-width: 1920px) {
.zh-mt-3-large { margin-top: var(--zh-space-3); }
}

@media (min-width: 1920px) {
.zh-mb-3-large { margin-bottom: var(--zh-space-3); }
}

@media (min-width: 1920px) {
.zh-p-4-large { padding: var(--zh-space-4); }
}

@media (min-width: 1920px) {
.zh-px-4-large { padding-left: var(--zh-space-4); padding-right: var(--zh-space-4); }
}

@media (min-width: 1920px) {
.zh-py-4-large { padding-top: var(--zh-space-4); padding-bottom: var(--zh-space-4); }
}

@media (min-width: 1920px) {
.zh-gap-4-large { gap: var(--zh-space-4); }
}

@media (min-width: 1920px) {
.zh-mt-4-large { margin-top: var(--zh-space-4); }
}

@media (min-width: 1920px) {
.zh-mb-4-large { margin-bottom: var(--zh-space-4); }
}

@media (min-width: 1920px) {
.zh-p-6-large { padding: var(--zh-space-6); }
}

@media (min-width: 1920px) {
.zh-px-6-large { padding-left: var(--zh-space-6); padding-right: var(--zh-space-6); }
}

@media (min-width: 1920px) {
.zh-py-6-large { padding-top: var(--zh-space-6); padding-bottom: var(--zh-space-6); }
}

@media (min-width: 1920px) {
.zh-gap-6-large { gap: var(--zh-space-6); }
}

@media (min-width: 1920px) {
.zh-mt-6-large { margin-top: var(--zh-space-6); }
}

@media (min-width: 1920px) {
.zh-mb-6-large { margin-bottom: var(--zh-space-6); }
}

@media (min-width: 1920px) {
.zh-cols-1-large { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

@media (min-width: 1920px) {
.zh-cols-2-large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1920px) {
.zh-cols-3-large { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1920px) {
.zh-cols-4-large { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1920px) {
.zh-cols-6-large { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1920px) {
.zh-cols-12-large { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

@media (min-width: 1920px) {
.zh-col-span-1-large { grid-column: span 1 / span 1; }
}

@media (min-width: 1920px) {
.zh-col-span-2-large { grid-column: span 2 / span 2; }
}

@media (min-width: 1920px) {
.zh-col-span-3-large { grid-column: span 3 / span 3; }
}

@media (min-width: 1920px) {
.zh-col-span-4-large { grid-column: span 4 / span 4; }
}

@media (min-width: 1920px) {
.zh-col-span-6-large { grid-column: span 6 / span 6; }
}

@media (min-width: 1920px) {
.zh-col-span-12-large { grid-column: span 12 / span 12; }
}

@media (min-width: 1920px) {
.zh-col-span-full-large { grid-column: 1 / -1; }
}

@media (hover: hover) {
.zh-hover-bg-subtle:hover { background-color: var(--zh-bg-subtle); }
.zh-hover-bg-brand-subtle:hover { background-color: var(--zh-color-primary-subtle); }
.zh-hover-bg-elevated:hover { background-color: var(--zh-bg-elevated); }
.zh-hover-text-brand:hover { color: var(--zh-color-primary-text); }
.zh-hover-text-primary:hover { color: var(--zh-text); }
.zh-hover-border-brand:hover { border-color: var(--zh-color-primary); }
.zh-hover-border-strong:hover { border-color: var(--zh-border-strong); }
.zh-hover-shadow-md:hover { box-shadow: var(--zh-shadow-md); }
.zh-hover-shadow-lg:hover { box-shadow: var(--zh-shadow-lg); }
.zh-hover-lift:hover { transform: translateY(-2px); box-shadow: var(--zh-shadow-md); }
.zh-hover-opacity-100:hover { opacity: 1; }
.zh-hover-underline:hover { text-decoration: underline; }
}

.zh-focus-ring:focus-visible { outline: none; box-shadow: var(--zh-focus-ring); }

.zh-focus-within-ring:focus-within { box-shadow: var(--zh-focus-ring); }

.zh-focus-outline-none:focus-visible { outline: none; }

.zh-active-scale:active { transform: scale(.98); }

.zh-disabled { opacity: var(--zh-opacity-disabled); cursor: not-allowed; pointer-events: none; }

.zh-container { width: 100%; margin-left: auto; margin-right: auto; max-width: var(--zh-container-max, none); padding-left: var(--zh-inner-pad); padding-right: var(--zh-inner-pad); }

.zh-divider { display: block; border: 0; height: 1px; background: var(--zh-border); margin: var(--zh-space-4) 0; }

.zh-divider-strong { background: var(--zh-border-strong); }

.zh-divider-dashed { height: 0; background: none; border-top: 1px dashed var(--zh-border-strong); }

.zh-divider-vertical { display: inline-block; width: 1px; height: 1em; margin: 0 var(--zh-space-3); vertical-align: middle; }

.zh-divider-text { display: flex; align-items: center; gap: var(--zh-space-3); height: auto; background: none; color: var(--zh-text-tertiary); font-size: .86em; margin: var(--zh-space-4) 0; }

.zh-divider-text::before,
.zh-divider-text::after { content: ""; flex: 1; height: 1px; background: var(--zh-border); }

.zh-snap-x { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }

.zh-snap-y { overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior-y: contain; }

.zh-snap-start { scroll-snap-align: start; }

.zh-snap-center { scroll-snap-align: center; }

.zh-snap-end { scroll-snap-align: end; }

.zh-snap-stop { scroll-snap-stop: always; }

.zh-pt-safe { padding-top: env(safe-area-inset-top, 0px); }

.zh-pr-safe { padding-right: env(safe-area-inset-right, 0px); }

.zh-pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }

.zh-pl-safe { padding-left: env(safe-area-inset-left, 0px); }

.zh-pb-safe-2 { padding-bottom: max(var(--zh-space-2), env(safe-area-inset-bottom, 0px)); }

.zh-pt-safe-2 { padding-top: max(var(--zh-space-2), env(safe-area-inset-top, 0px)); }

.zh-pb-safe-3 { padding-bottom: max(var(--zh-space-3), env(safe-area-inset-bottom, 0px)); }

.zh-pt-safe-3 { padding-top: max(var(--zh-space-3), env(safe-area-inset-top, 0px)); }

.zh-pb-safe-4 { padding-bottom: max(var(--zh-space-4), env(safe-area-inset-bottom, 0px)); }

.zh-pt-safe-4 { padding-top: max(var(--zh-space-4), env(safe-area-inset-top, 0px)); }

.zh-pb-safe-6 { padding-bottom: max(var(--zh-space-6), env(safe-area-inset-bottom, 0px)); }

.zh-pt-safe-6 { padding-top: max(var(--zh-space-6), env(safe-area-inset-top, 0px)); }

.zh-mb-safe { margin-bottom: env(safe-area-inset-bottom, 0px); }

/* ---- 52-motion ---- */
@keyframes zh-kf-fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes zh-kf-fade-out { from { opacity: 1; } to { opacity: 0; } }

@keyframes zh-kf-slide-up { from { opacity: 0; transform: translateY(var(--zh-anim-dist, 12px)); } to { opacity: 1; transform: none; } }

@keyframes zh-kf-slide-down { from { opacity: 0; transform: translateY(calc(var(--zh-anim-dist, 12px) * -1)); } to { opacity: 1; transform: none; } }

@keyframes zh-kf-scale-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

@keyframes zh-kf-pop { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }

@keyframes zh-kf-shake { 0%, 100% { transform: translateX(0); } 15%, 55% { transform: translateX(-6px); } 35%, 75% { transform: translateX(6px); } 90% { transform: translateX(-2px); } }

@keyframes zh-kf-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.94); } }

@keyframes zh-kf-ping { 0% { opacity: .55; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(2.4); } }

@keyframes zh-kf-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-40%); } 60% { transform: translateY(-14%); } }

@keyframes zh-kf-spin { to { transform: rotate(360deg); } }

@keyframes zh-kf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@keyframes zh-kf-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }

@keyframes zh-kf-heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.2); } 28% { transform: scale(1); } 42% { transform: scale(1.12); } 70% { transform: scale(1); } }

@keyframes zh-kf-shimmer { to { transform: translateX(100%); } }

@keyframes zh-kf-wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

@keyframes zh-kf-dots { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }

@keyframes zh-kf-draw { to { stroke-dashoffset: 0; } }

@keyframes zh-kf-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.zh-anim-fade-in { animation: zh-kf-fade-in var(--zh-anim-dur, var(--zh-dur-base)) var(--zh-ease-enter) var(--zh-anim-delay, 0s) both; }

.zh-anim-fade-out { animation: zh-kf-fade-out calc(var(--zh-anim-dur, var(--zh-dur-base)) * .7) var(--zh-ease-exit) var(--zh-anim-delay, 0s) both; }

.zh-anim-slide-up { animation: zh-kf-slide-up var(--zh-anim-dur, var(--zh-dur-base)) var(--zh-ease-enter) var(--zh-anim-delay, 0s) both; }

.zh-anim-slide-down { animation: zh-kf-slide-down var(--zh-anim-dur, var(--zh-dur-base)) var(--zh-ease-enter) var(--zh-anim-delay, 0s) both; }

.zh-anim-scale-in { animation: zh-kf-scale-in var(--zh-anim-dur, var(--zh-dur-base)) var(--zh-ease-enter) var(--zh-anim-delay, 0s) both; }

.zh-anim-pop { animation: zh-kf-pop var(--zh-anim-dur, var(--zh-dur-slow)) var(--zh-ease-spring) var(--zh-anim-delay, 0s) both; }

.zh-anim-shake { animation: zh-kf-shake var(--zh-anim-dur, var(--zh-dur-slower)) var(--zh-ease-standard) var(--zh-anim-delay, 0s) both; }

.zh-anim-pulse { animation: zh-kf-pulse 1.6s var(--zh-ease-standard) infinite; }

.zh-anim-ping { position: relative; }

.zh-anim-ping::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; animation: zh-kf-ping 1.4s var(--zh-ease-exit) infinite; }

.zh-anim-bounce { animation: zh-kf-bounce 1s var(--zh-ease-standard) infinite; }

.zh-anim-spin { animation: zh-kf-spin .8s linear infinite; }

.zh-anim-float { animation: zh-kf-float 3s var(--zh-ease-standard) infinite; }

.zh-anim-wiggle { animation: zh-kf-wiggle .9s var(--zh-ease-standard) infinite; transform-origin: 50% 20%; }

.zh-anim-heartbeat { animation: zh-kf-heartbeat 1.4s var(--zh-ease-standard) infinite; }

.zh-anim-shimmer { position: relative; overflow: hidden; background: var(--zh-bg-subtle); }

.zh-anim-shimmer::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--zh-border), transparent); animation: zh-kf-shimmer 1.4s var(--zh-ease-standard) infinite; }

.zh-anim-wave { display: inline-flex; align-items: center; gap: 3px; height: 28px; }

.zh-anim-wave i { width: 4px; height: 100%; border-radius: 2px; background: currentColor; animation: zh-kf-wave 1s var(--zh-ease-standard) infinite; animation-delay: calc(var(--zh-stagger) * var(--n, 0)); }

.zh-anim-wave i:nth-child(2) { --n: 1; }

.zh-anim-wave i:nth-child(3) { --n: 2; }

.zh-anim-wave i:nth-child(4) { --n: 3; }

.zh-anim-wave i:nth-child(5) { --n: 4; }

.zh-anim-typing-dots { display: inline-flex; gap: 4px; align-items: center; }

.zh-anim-typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: zh-kf-dots 1.2s var(--zh-ease-standard) infinite; animation-delay: calc(var(--zh-stagger) * var(--n, 0) * 3); }

.zh-anim-typing-dots i:nth-child(2) { --n: 1; }

.zh-anim-typing-dots i:nth-child(3) { --n: 2; }

.zh-anim-draw-check path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: zh-kf-draw var(--zh-anim-dur, var(--zh-dur-slow)) var(--zh-ease-standard) var(--zh-anim-delay, 0s) both; }

.zh-reduce-motion .zh-anim-slide-up,
.zh-reduce-motion .zh-anim-slide-down,
.zh-reduce-motion .zh-anim-scale-in,
.zh-reduce-motion .zh-anim-pop { animation-name: zh-kf-fade-in; }

.zh-reduce-motion .zh-anim-shake { animation: zh-kf-blink .5s linear 2 both; }

.zh-reduce-motion .zh-anim-spin { animation: zh-kf-blink 1.6s linear infinite; }

.zh-reduce-motion .zh-anim-pulse,
.zh-reduce-motion .zh-anim-bounce,
.zh-reduce-motion .zh-anim-float,
.zh-reduce-motion .zh-anim-wiggle,
.zh-reduce-motion .zh-anim-heartbeat,
.zh-reduce-motion .zh-anim-shimmer::after,
.zh-reduce-motion .zh-anim-ping::after,
.zh-reduce-motion .zh-anim-wave i,
.zh-reduce-motion .zh-anim-typing-dots i { animation: none; }

.zh-reduce-motion .zh-anim-ping::after { opacity: 0; }

.zh-reduce-motion .zh-anim-wave i { transform: scaleY(.65); }

.zh-reduce-motion .zh-anim-typing-dots i { opacity: .7; }

.zh-reduce-motion .zh-anim-draw-check path { stroke-dashoffset: 0; animation: zh-kf-fade-in var(--zh-dur-base) linear both; }