/* ============================================================
   SantyCSS v1.0  —  Plain-English Utility CSS Framework
   https://github.com/santybad/santy_css
   ============================================================ */

/* ── Box Sizing Reset ── */
*, *::before, *::after { box-sizing: border-box; }

/* ── CSS Custom Properties (Theme) ── */
:root {
  /* ── Design Tokens (override to customise) ── */
  --santy-primary:        #3b82f6;
  --santy-primary-dark:   #2563eb;
  --santy-primary-light:  #dbeafe;
  --santy-secondary:      #6b7280;
  --santy-success:        #22c55e;
  --santy-warning:        #f59e0b;
  --santy-danger:         #ef4444;
  --santy-info:           #06b6d4;
  --santy-radius-sm:      4px;
  --santy-radius:         8px;
  --santy-radius-md:      12px;
  --santy-radius-lg:      16px;
  --santy-radius-xl:      24px;
  --santy-radius-full:    9999px;
  --santy-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --santy-font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --santy-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --santy-transition-fast: all 0.15s ease;
  --santy-transition-normal: all 0.3s ease;
  --santy-transition-slow: all 0.5s ease;
  --santy-shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --santy-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --santy-shadow-md: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --santy-shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --santy-shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.25);
  --santy-shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.06);
}

/* ── Display ── */
.make-block        { display: block; }
.make-inline       { display: inline; }
.make-inline-block { display: inline-block; }
.make-flex         { display: flex; }
.make-inline-flex  { display: inline-flex; }
.make-grid         { display: grid; }
.make-inline-grid  { display: inline-grid; }
.make-table        { display: table; }
.make-hidden       { display: none; }
.make-contents     { display: contents; }

/* ── Visibility ── */
.make-visible   { visibility: visible; }
.make-invisible { visibility: hidden; }
.make-collapse  { visibility: collapse; }

/* ── Flex Direction ── */
.flex-row            { flex-direction: row; }
.flex-row-reverse    { flex-direction: row-reverse; }
.flex-column         { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }

/* ── Flex Wrap ── */
.flex-wrap        { flex-wrap: wrap; }
.flex-wrap-reverse{ flex-wrap: wrap-reverse; }
.flex-nowrap      { flex-wrap: nowrap; }

/* ── Flex Grow / Shrink / None ── */
.flex-grow        { flex-grow: 1; }
.flex-grow-none   { flex-grow: 0; }
.flex-shrink      { flex-shrink: 1; }
.flex-shrink-none { flex-shrink: 0; }
.flex-auto        { flex: 1 1 auto; }
.flex-initial     { flex: 0 1 auto; }
.flex-none        { flex: none; }
.flex-equal       { flex: 1; }

/* ── Align Items ── */
.align-start    { align-items: flex-start; }
.align-end      { align-items: flex-end; }
.align-center   { align-items: center; }
.align-stretch  { align-items: stretch; }
.align-baseline { align-items: baseline; }

/* ── Align Self ── */
.self-start    { align-self: flex-start; }
.self-end      { align-self: flex-end; }
.self-center   { align-self: center; }
.self-stretch  { align-self: stretch; }
.self-baseline { align-self: baseline; }
.self-auto     { align-self: auto; }

/* ── Align Content ── */
.content-start   { align-content: flex-start; }
.content-end     { align-content: flex-end; }
.content-center  { align-content: center; }
.content-stretch { align-content: stretch; }
.content-between { align-content: space-between; }
.content-around  { align-content: space-around; }
.content-evenly  { align-content: space-evenly; }

/* ── Justify Content ── */
.justify-start   { justify-content: flex-start; }
.justify-end     { justify-content: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

/* ── Justify Items ── */
.justify-items-start   { justify-items: start; }
.justify-items-end     { justify-items: end; }
.justify-items-center  { justify-items: center; }
.justify-items-stretch { justify-items: stretch; }

/* ── Justify Self ── */
.justify-self-start   { justify-self: start; }
.justify-self-end     { justify-self: end; }
.justify-self-center  { justify-self: center; }
.justify-self-stretch { justify-self: stretch; }
.justify-self-auto    { justify-self: auto; }

/* ── Place Content / Items / Self ── */
.place-center  { place-items: center; place-content: center; }
.place-stretch { place-items: stretch; }

/* ── Order ── */
.order-first { order: -9999; }
.order-last  { order: 9999; }
.order-none  { order: 0; }

.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-7 { order: 7; }
.order-8 { order: 8; }
.order-9 { order: 9; }
.order-10 { order: 10; }
.order-11 { order: 11; }
.order-12 { order: 12; }

/* ── Grid Template Columns ── */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid-cols-none { grid-template-columns: none; }

/* ── Grid Template Rows ── */
.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }

/* ── Grid Column / Row Span ── */
.span-col-1 { grid-column: span 1 / span 1; }
.span-col-2 { grid-column: span 2 / span 2; }
.span-col-3 { grid-column: span 3 / span 3; }
.span-col-4 { grid-column: span 4 / span 4; }
.span-col-5 { grid-column: span 5 / span 5; }
.span-col-6 { grid-column: span 6 / span 6; }
.span-col-7 { grid-column: span 7 / span 7; }
.span-col-8 { grid-column: span 8 / span 8; }
.span-col-9 { grid-column: span 9 / span 9; }
.span-col-10 { grid-column: span 10 / span 10; }
.span-col-11 { grid-column: span 11 / span 11; }
.span-col-12 { grid-column: span 12 / span 12; }
.span-row-1 { grid-row: span 1 / span 1; }
.span-row-2 { grid-row: span 2 / span 2; }
.span-row-3 { grid-row: span 3 / span 3; }
.span-row-4 { grid-row: span 4 / span 4; }
.span-row-5 { grid-row: span 5 / span 5; }
.span-row-6 { grid-row: span 6 / span 6; }
.span-col-full { grid-column: 1 / -1; }
.span-row-full { grid-row: 1 / -1; }

/* ── Grid Auto Flow ── */
.grid-flow-row    { grid-auto-flow: row; }
.grid-flow-col    { grid-auto-flow: column; }
.grid-flow-dense  { grid-auto-flow: dense; }
.grid-auto-cols-min  { grid-auto-columns: min-content; }
.grid-auto-cols-max  { grid-auto-columns: max-content; }
.grid-auto-cols-fr   { grid-auto-columns: minmax(0, 1fr); }


/* ── Padding ── */
.add-padding-0        { padding: 0px; }
.add-padding-top-0    { padding-top: 0px; }
.add-padding-bottom-0 { padding-bottom: 0px; }
.add-padding-left-0   { padding-left: 0px; }
.add-padding-right-0  { padding-right: 0px; }
.add-padding-x-0      { padding-left: 0px; padding-right: 0px; }
.add-padding-y-0      { padding-top: 0px; padding-bottom: 0px; }
.add-padding-1        { padding: 1px; }
.add-padding-top-1    { padding-top: 1px; }
.add-padding-bottom-1 { padding-bottom: 1px; }
.add-padding-left-1   { padding-left: 1px; }
.add-padding-right-1  { padding-right: 1px; }
.add-padding-x-1      { padding-left: 1px; padding-right: 1px; }
.add-padding-y-1      { padding-top: 1px; padding-bottom: 1px; }
.add-padding-2        { padding: 2px; }
.add-padding-top-2    { padding-top: 2px; }
.add-padding-bottom-2 { padding-bottom: 2px; }
.add-padding-left-2   { padding-left: 2px; }
.add-padding-right-2  { padding-right: 2px; }
.add-padding-x-2      { padding-left: 2px; padding-right: 2px; }
.add-padding-y-2      { padding-top: 2px; padding-bottom: 2px; }
.add-padding-3        { padding: 3px; }
.add-padding-top-3    { padding-top: 3px; }
.add-padding-bottom-3 { padding-bottom: 3px; }
.add-padding-left-3   { padding-left: 3px; }
.add-padding-right-3  { padding-right: 3px; }
.add-padding-x-3      { padding-left: 3px; padding-right: 3px; }
.add-padding-y-3      { padding-top: 3px; padding-bottom: 3px; }
.add-padding-4        { padding: 4px; }
.add-padding-top-4    { padding-top: 4px; }
.add-padding-bottom-4 { padding-bottom: 4px; }
.add-padding-left-4   { padding-left: 4px; }
.add-padding-right-4  { padding-right: 4px; }
.add-padding-x-4      { padding-left: 4px; padding-right: 4px; }
.add-padding-y-4      { padding-top: 4px; padding-bottom: 4px; }
.add-padding-5        { padding: 5px; }
.add-padding-top-5    { padding-top: 5px; }
.add-padding-bottom-5 { padding-bottom: 5px; }
.add-padding-left-5   { padding-left: 5px; }
.add-padding-right-5  { padding-right: 5px; }
.add-padding-x-5      { padding-left: 5px; padding-right: 5px; }
.add-padding-y-5      { padding-top: 5px; padding-bottom: 5px; }
.add-padding-6        { padding: 6px; }
.add-padding-top-6    { padding-top: 6px; }
.add-padding-bottom-6 { padding-bottom: 6px; }
.add-padding-left-6   { padding-left: 6px; }
.add-padding-right-6  { padding-right: 6px; }
.add-padding-x-6      { padding-left: 6px; padding-right: 6px; }
.add-padding-y-6      { padding-top: 6px; padding-bottom: 6px; }
.add-padding-7        { padding: 7px; }
.add-padding-top-7    { padding-top: 7px; }
.add-padding-bottom-7 { padding-bottom: 7px; }
.add-padding-left-7   { padding-left: 7px; }
.add-padding-right-7  { padding-right: 7px; }
.add-padding-x-7      { padding-left: 7px; padding-right: 7px; }
.add-padding-y-7      { padding-top: 7px; padding-bottom: 7px; }
.add-padding-8        { padding: 8px; }
.add-padding-top-8    { padding-top: 8px; }
.add-padding-bottom-8 { padding-bottom: 8px; }
.add-padding-left-8   { padding-left: 8px; }
.add-padding-right-8  { padding-right: 8px; }
.add-padding-x-8      { padding-left: 8px; padding-right: 8px; }
.add-padding-y-8      { padding-top: 8px; padding-bottom: 8px; }
.add-padding-9        { padding: 9px; }
.add-padding-top-9    { padding-top: 9px; }
.add-padding-bottom-9 { padding-bottom: 9px; }
.add-padding-left-9   { padding-left: 9px; }
.add-padding-right-9  { padding-right: 9px; }
.add-padding-x-9      { padding-left: 9px; padding-right: 9px; }
.add-padding-y-9      { padding-top: 9px; padding-bottom: 9px; }
.add-padding-10        { padding: 10px; }
.add-padding-top-10    { padding-top: 10px; }
.add-padding-bottom-10 { padding-bottom: 10px; }
.add-padding-left-10   { padding-left: 10px; }
.add-padding-right-10  { padding-right: 10px; }
.add-padding-x-10      { padding-left: 10px; padding-right: 10px; }
.add-padding-y-10      { padding-top: 10px; padding-bottom: 10px; }
.add-padding-11        { padding: 11px; }
.add-padding-top-11    { padding-top: 11px; }
.add-padding-bottom-11 { padding-bottom: 11px; }
.add-padding-left-11   { padding-left: 11px; }
.add-padding-right-11  { padding-right: 11px; }
.add-padding-x-11      { padding-left: 11px; padding-right: 11px; }
.add-padding-y-11      { padding-top: 11px; padding-bottom: 11px; }
.add-padding-12        { padding: 12px; }
.add-padding-top-12    { padding-top: 12px; }
.add-padding-bottom-12 { padding-bottom: 12px; }
.add-padding-left-12   { padding-left: 12px; }
.add-padding-right-12  { padding-right: 12px; }
.add-padding-x-12      { padding-left: 12px; padding-right: 12px; }
.add-padding-y-12      { padding-top: 12px; padding-bottom: 12px; }
.add-padding-13        { padding: 13px; }
.add-padding-top-13    { padding-top: 13px; }
.add-padding-bottom-13 { padding-bottom: 13px; }
.add-padding-left-13   { padding-left: 13px; }
.add-padding-right-13  { padding-right: 13px; }
.add-padding-x-13      { padding-left: 13px; padding-right: 13px; }
.add-padding-y-13      { padding-top: 13px; padding-bottom: 13px; }
.add-padding-14        { padding: 14px; }
.add-padding-top-14    { padding-top: 14px; }
.add-padding-bottom-14 { padding-bottom: 14px; }
.add-padding-left-14   { padding-left: 14px; }
.add-padding-right-14  { padding-right: 14px; }
.add-padding-x-14      { padding-left: 14px; padding-right: 14px; }
.add-padding-y-14      { padding-top: 14px; padding-bottom: 14px; }
.add-padding-15        { padding: 15px; }
.add-padding-top-15    { padding-top: 15px; }
.add-padding-bottom-15 { padding-bottom: 15px; }
.add-padding-left-15   { padding-left: 15px; }
.add-padding-right-15  { padding-right: 15px; }
.add-padding-x-15      { padding-left: 15px; padding-right: 15px; }
.add-padding-y-15      { padding-top: 15px; padding-bottom: 15px; }
.add-padding-16        { padding: 16px; }
.add-padding-top-16    { padding-top: 16px; }
.add-padding-bottom-16 { padding-bottom: 16px; }
.add-padding-left-16   { padding-left: 16px; }
.add-padding-right-16  { padding-right: 16px; }
.add-padding-x-16      { padding-left: 16px; padding-right: 16px; }
.add-padding-y-16      { padding-top: 16px; padding-bottom: 16px; }
.add-padding-17        { padding: 17px; }
.add-padding-top-17    { padding-top: 17px; }
.add-padding-bottom-17 { padding-bottom: 17px; }
.add-padding-left-17   { padding-left: 17px; }
.add-padding-right-17  { padding-right: 17px; }
.add-padding-x-17      { padding-left: 17px; padding-right: 17px; }
.add-padding-y-17      { padding-top: 17px; padding-bottom: 17px; }
.add-padding-18        { padding: 18px; }
.add-padding-top-18    { padding-top: 18px; }
.add-padding-bottom-18 { padding-bottom: 18px; }
.add-padding-left-18   { padding-left: 18px; }
.add-padding-right-18  { padding-right: 18px; }
.add-padding-x-18      { padding-left: 18px; padding-right: 18px; }
.add-padding-y-18      { padding-top: 18px; padding-bottom: 18px; }
.add-padding-19        { padding: 19px; }
.add-padding-top-19    { padding-top: 19px; }
.add-padding-bottom-19 { padding-bottom: 19px; }
.add-padding-left-19   { padding-left: 19px; }
.add-padding-right-19  { padding-right: 19px; }
.add-padding-x-19      { padding-left: 19px; padding-right: 19px; }
.add-padding-y-19      { padding-top: 19px; padding-bottom: 19px; }
.add-padding-20        { padding: 20px; }
.add-padding-top-20    { padding-top: 20px; }
.add-padding-bottom-20 { padding-bottom: 20px; }
.add-padding-left-20   { padding-left: 20px; }
.add-padding-right-20  { padding-right: 20px; }
.add-padding-x-20      { padding-left: 20px; padding-right: 20px; }
.add-padding-y-20      { padding-top: 20px; padding-bottom: 20px; }
.add-padding-21        { padding: 21px; }
.add-padding-top-21    { padding-top: 21px; }
.add-padding-bottom-21 { padding-bottom: 21px; }
.add-padding-left-21   { padding-left: 21px; }
.add-padding-right-21  { padding-right: 21px; }
.add-padding-x-21      { padding-left: 21px; padding-right: 21px; }
.add-padding-y-21      { padding-top: 21px; padding-bottom: 21px; }
.add-padding-22        { padding: 22px; }
.add-padding-top-22    { padding-top: 22px; }
.add-padding-bottom-22 { padding-bottom: 22px; }
.add-padding-left-22   { padding-left: 22px; }
.add-padding-right-22  { padding-right: 22px; }
.add-padding-x-22      { padding-left: 22px; padding-right: 22px; }
.add-padding-y-22      { padding-top: 22px; padding-bottom: 22px; }
.add-padding-23        { padding: 23px; }
.add-padding-top-23    { padding-top: 23px; }
.add-padding-bottom-23 { padding-bottom: 23px; }
.add-padding-left-23   { padding-left: 23px; }
.add-padding-right-23  { padding-right: 23px; }
.add-padding-x-23      { padding-left: 23px; padding-right: 23px; }
.add-padding-y-23      { padding-top: 23px; padding-bottom: 23px; }
.add-padding-24        { padding: 24px; }
.add-padding-top-24    { padding-top: 24px; }
.add-padding-bottom-24 { padding-bottom: 24px; }
.add-padding-left-24   { padding-left: 24px; }
.add-padding-right-24  { padding-right: 24px; }
.add-padding-x-24      { padding-left: 24px; padding-right: 24px; }
.add-padding-y-24      { padding-top: 24px; padding-bottom: 24px; }
.add-padding-25        { padding: 25px; }
.add-padding-top-25    { padding-top: 25px; }
.add-padding-bottom-25 { padding-bottom: 25px; }
.add-padding-left-25   { padding-left: 25px; }
.add-padding-right-25  { padding-right: 25px; }
.add-padding-x-25      { padding-left: 25px; padding-right: 25px; }
.add-padding-y-25      { padding-top: 25px; padding-bottom: 25px; }
.add-padding-26        { padding: 26px; }
.add-padding-top-26    { padding-top: 26px; }
.add-padding-bottom-26 { padding-bottom: 26px; }
.add-padding-left-26   { padding-left: 26px; }
.add-padding-right-26  { padding-right: 26px; }
.add-padding-x-26      { padding-left: 26px; padding-right: 26px; }
.add-padding-y-26      { padding-top: 26px; padding-bottom: 26px; }
.add-padding-27        { padding: 27px; }
.add-padding-top-27    { padding-top: 27px; }
.add-padding-bottom-27 { padding-bottom: 27px; }
.add-padding-left-27   { padding-left: 27px; }
.add-padding-right-27  { padding-right: 27px; }
.add-padding-x-27      { padding-left: 27px; padding-right: 27px; }
.add-padding-y-27      { padding-top: 27px; padding-bottom: 27px; }
.add-padding-28        { padding: 28px; }
.add-padding-top-28    { padding-top: 28px; }
.add-padding-bottom-28 { padding-bottom: 28px; }
.add-padding-left-28   { padding-left: 28px; }
.add-padding-right-28  { padding-right: 28px; }
.add-padding-x-28      { padding-left: 28px; padding-right: 28px; }
.add-padding-y-28      { padding-top: 28px; padding-bottom: 28px; }
.add-padding-29        { padding: 29px; }
.add-padding-top-29    { padding-top: 29px; }
.add-padding-bottom-29 { padding-bottom: 29px; }
.add-padding-left-29   { padding-left: 29px; }
.add-padding-right-29  { padding-right: 29px; }
.add-padding-x-29      { padding-left: 29px; padding-right: 29px; }
.add-padding-y-29      { padding-top: 29px; padding-bottom: 29px; }
.add-padding-30        { padding: 30px; }
.add-padding-top-30    { padding-top: 30px; }
.add-padding-bottom-30 { padding-bottom: 30px; }
.add-padding-left-30   { padding-left: 30px; }
.add-padding-right-30  { padding-right: 30px; }
.add-padding-x-30      { padding-left: 30px; padding-right: 30px; }
.add-padding-y-30      { padding-top: 30px; padding-bottom: 30px; }
.add-padding-31        { padding: 31px; }
.add-padding-top-31    { padding-top: 31px; }
.add-padding-bottom-31 { padding-bottom: 31px; }
.add-padding-left-31   { padding-left: 31px; }
.add-padding-right-31  { padding-right: 31px; }
.add-padding-x-31      { padding-left: 31px; padding-right: 31px; }
.add-padding-y-31      { padding-top: 31px; padding-bottom: 31px; }
.add-padding-32        { padding: 32px; }
.add-padding-top-32    { padding-top: 32px; }
.add-padding-bottom-32 { padding-bottom: 32px; }
.add-padding-left-32   { padding-left: 32px; }
.add-padding-right-32  { padding-right: 32px; }
.add-padding-x-32      { padding-left: 32px; padding-right: 32px; }
.add-padding-y-32      { padding-top: 32px; padding-bottom: 32px; }
.add-padding-33        { padding: 33px; }
.add-padding-top-33    { padding-top: 33px; }
.add-padding-bottom-33 { padding-bottom: 33px; }
.add-padding-left-33   { padding-left: 33px; }
.add-padding-right-33  { padding-right: 33px; }
.add-padding-x-33      { padding-left: 33px; padding-right: 33px; }
.add-padding-y-33      { padding-top: 33px; padding-bottom: 33px; }
.add-padding-34        { padding: 34px; }
.add-padding-top-34    { padding-top: 34px; }
.add-padding-bottom-34 { padding-bottom: 34px; }
.add-padding-left-34   { padding-left: 34px; }
.add-padding-right-34  { padding-right: 34px; }
.add-padding-x-34      { padding-left: 34px; padding-right: 34px; }
.add-padding-y-34      { padding-top: 34px; padding-bottom: 34px; }
.add-padding-35        { padding: 35px; }
.add-padding-top-35    { padding-top: 35px; }
.add-padding-bottom-35 { padding-bottom: 35px; }
.add-padding-left-35   { padding-left: 35px; }
.add-padding-right-35  { padding-right: 35px; }
.add-padding-x-35      { padding-left: 35px; padding-right: 35px; }
.add-padding-y-35      { padding-top: 35px; padding-bottom: 35px; }
.add-padding-36        { padding: 36px; }
.add-padding-top-36    { padding-top: 36px; }
.add-padding-bottom-36 { padding-bottom: 36px; }
.add-padding-left-36   { padding-left: 36px; }
.add-padding-right-36  { padding-right: 36px; }
.add-padding-x-36      { padding-left: 36px; padding-right: 36px; }
.add-padding-y-36      { padding-top: 36px; padding-bottom: 36px; }
.add-padding-37        { padding: 37px; }
.add-padding-top-37    { padding-top: 37px; }
.add-padding-bottom-37 { padding-bottom: 37px; }
.add-padding-left-37   { padding-left: 37px; }
.add-padding-right-37  { padding-right: 37px; }
.add-padding-x-37      { padding-left: 37px; padding-right: 37px; }
.add-padding-y-37      { padding-top: 37px; padding-bottom: 37px; }
.add-padding-38        { padding: 38px; }
.add-padding-top-38    { padding-top: 38px; }
.add-padding-bottom-38 { padding-bottom: 38px; }
.add-padding-left-38   { padding-left: 38px; }
.add-padding-right-38  { padding-right: 38px; }
.add-padding-x-38      { padding-left: 38px; padding-right: 38px; }
.add-padding-y-38      { padding-top: 38px; padding-bottom: 38px; }
.add-padding-39        { padding: 39px; }
.add-padding-top-39    { padding-top: 39px; }
.add-padding-bottom-39 { padding-bottom: 39px; }
.add-padding-left-39   { padding-left: 39px; }
.add-padding-right-39  { padding-right: 39px; }
.add-padding-x-39      { padding-left: 39px; padding-right: 39px; }
.add-padding-y-39      { padding-top: 39px; padding-bottom: 39px; }
.add-padding-40        { padding: 40px; }
.add-padding-top-40    { padding-top: 40px; }
.add-padding-bottom-40 { padding-bottom: 40px; }
.add-padding-left-40   { padding-left: 40px; }
.add-padding-right-40  { padding-right: 40px; }
.add-padding-x-40      { padding-left: 40px; padding-right: 40px; }
.add-padding-y-40      { padding-top: 40px; padding-bottom: 40px; }
.add-padding-41        { padding: 41px; }
.add-padding-top-41    { padding-top: 41px; }
.add-padding-bottom-41 { padding-bottom: 41px; }
.add-padding-left-41   { padding-left: 41px; }
.add-padding-right-41  { padding-right: 41px; }
.add-padding-x-41      { padding-left: 41px; padding-right: 41px; }
.add-padding-y-41      { padding-top: 41px; padding-bottom: 41px; }
.add-padding-42        { padding: 42px; }
.add-padding-top-42    { padding-top: 42px; }
.add-padding-bottom-42 { padding-bottom: 42px; }
.add-padding-left-42   { padding-left: 42px; }
.add-padding-right-42  { padding-right: 42px; }
.add-padding-x-42      { padding-left: 42px; padding-right: 42px; }
.add-padding-y-42      { padding-top: 42px; padding-bottom: 42px; }
.add-padding-43        { padding: 43px; }
.add-padding-top-43    { padding-top: 43px; }
.add-padding-bottom-43 { padding-bottom: 43px; }
.add-padding-left-43   { padding-left: 43px; }
.add-padding-right-43  { padding-right: 43px; }
.add-padding-x-43      { padding-left: 43px; padding-right: 43px; }
.add-padding-y-43      { padding-top: 43px; padding-bottom: 43px; }
.add-padding-44        { padding: 44px; }
.add-padding-top-44    { padding-top: 44px; }
.add-padding-bottom-44 { padding-bottom: 44px; }
.add-padding-left-44   { padding-left: 44px; }
.add-padding-right-44  { padding-right: 44px; }
.add-padding-x-44      { padding-left: 44px; padding-right: 44px; }
.add-padding-y-44      { padding-top: 44px; padding-bottom: 44px; }
.add-padding-45        { padding: 45px; }
.add-padding-top-45    { padding-top: 45px; }
.add-padding-bottom-45 { padding-bottom: 45px; }
.add-padding-left-45   { padding-left: 45px; }
.add-padding-right-45  { padding-right: 45px; }
.add-padding-x-45      { padding-left: 45px; padding-right: 45px; }
.add-padding-y-45      { padding-top: 45px; padding-bottom: 45px; }
.add-padding-46        { padding: 46px; }
.add-padding-top-46    { padding-top: 46px; }
.add-padding-bottom-46 { padding-bottom: 46px; }
.add-padding-left-46   { padding-left: 46px; }
.add-padding-right-46  { padding-right: 46px; }
.add-padding-x-46      { padding-left: 46px; padding-right: 46px; }
.add-padding-y-46      { padding-top: 46px; padding-bottom: 46px; }
.add-padding-47        { padding: 47px; }
.add-padding-top-47    { padding-top: 47px; }
.add-padding-bottom-47 { padding-bottom: 47px; }
.add-padding-left-47   { padding-left: 47px; }
.add-padding-right-47  { padding-right: 47px; }
.add-padding-x-47      { padding-left: 47px; padding-right: 47px; }
.add-padding-y-47      { padding-top: 47px; padding-bottom: 47px; }
.add-padding-48        { padding: 48px; }
.add-padding-top-48    { padding-top: 48px; }
.add-padding-bottom-48 { padding-bottom: 48px; }
.add-padding-left-48   { padding-left: 48px; }
.add-padding-right-48  { padding-right: 48px; }
.add-padding-x-48      { padding-left: 48px; padding-right: 48px; }
.add-padding-y-48      { padding-top: 48px; padding-bottom: 48px; }
.add-padding-49        { padding: 49px; }
.add-padding-top-49    { padding-top: 49px; }
.add-padding-bottom-49 { padding-bottom: 49px; }
.add-padding-left-49   { padding-left: 49px; }
.add-padding-right-49  { padding-right: 49px; }
.add-padding-x-49      { padding-left: 49px; padding-right: 49px; }
.add-padding-y-49      { padding-top: 49px; padding-bottom: 49px; }
.add-padding-50        { padding: 50px; }
.add-padding-top-50    { padding-top: 50px; }
.add-padding-bottom-50 { padding-bottom: 50px; }
.add-padding-left-50   { padding-left: 50px; }
.add-padding-right-50  { padding-right: 50px; }
.add-padding-x-50      { padding-left: 50px; padding-right: 50px; }
.add-padding-y-50      { padding-top: 50px; padding-bottom: 50px; }
.add-padding-52        { padding: 52px; }
.add-padding-top-52    { padding-top: 52px; }
.add-padding-bottom-52 { padding-bottom: 52px; }
.add-padding-left-52   { padding-left: 52px; }
.add-padding-right-52  { padding-right: 52px; }
.add-padding-x-52      { padding-left: 52px; padding-right: 52px; }
.add-padding-y-52      { padding-top: 52px; padding-bottom: 52px; }
.add-padding-56        { padding: 56px; }
.add-padding-top-56    { padding-top: 56px; }
.add-padding-bottom-56 { padding-bottom: 56px; }
.add-padding-left-56   { padding-left: 56px; }
.add-padding-right-56  { padding-right: 56px; }
.add-padding-x-56      { padding-left: 56px; padding-right: 56px; }
.add-padding-y-56      { padding-top: 56px; padding-bottom: 56px; }
.add-padding-60        { padding: 60px; }
.add-padding-top-60    { padding-top: 60px; }
.add-padding-bottom-60 { padding-bottom: 60px; }
.add-padding-left-60   { padding-left: 60px; }
.add-padding-right-60  { padding-right: 60px; }
.add-padding-x-60      { padding-left: 60px; padding-right: 60px; }
.add-padding-y-60      { padding-top: 60px; padding-bottom: 60px; }
.add-padding-64        { padding: 64px; }
.add-padding-top-64    { padding-top: 64px; }
.add-padding-bottom-64 { padding-bottom: 64px; }
.add-padding-left-64   { padding-left: 64px; }
.add-padding-right-64  { padding-right: 64px; }
.add-padding-x-64      { padding-left: 64px; padding-right: 64px; }
.add-padding-y-64      { padding-top: 64px; padding-bottom: 64px; }
.add-padding-68        { padding: 68px; }
.add-padding-top-68    { padding-top: 68px; }
.add-padding-bottom-68 { padding-bottom: 68px; }
.add-padding-left-68   { padding-left: 68px; }
.add-padding-right-68  { padding-right: 68px; }
.add-padding-x-68      { padding-left: 68px; padding-right: 68px; }
.add-padding-y-68      { padding-top: 68px; padding-bottom: 68px; }
.add-padding-72        { padding: 72px; }
.add-padding-top-72    { padding-top: 72px; }
.add-padding-bottom-72 { padding-bottom: 72px; }
.add-padding-left-72   { padding-left: 72px; }
.add-padding-right-72  { padding-right: 72px; }
.add-padding-x-72      { padding-left: 72px; padding-right: 72px; }
.add-padding-y-72      { padding-top: 72px; padding-bottom: 72px; }
.add-padding-76        { padding: 76px; }
.add-padding-top-76    { padding-top: 76px; }
.add-padding-bottom-76 { padding-bottom: 76px; }
.add-padding-left-76   { padding-left: 76px; }
.add-padding-right-76  { padding-right: 76px; }
.add-padding-x-76      { padding-left: 76px; padding-right: 76px; }
.add-padding-y-76      { padding-top: 76px; padding-bottom: 76px; }
.add-padding-80        { padding: 80px; }
.add-padding-top-80    { padding-top: 80px; }
.add-padding-bottom-80 { padding-bottom: 80px; }
.add-padding-left-80   { padding-left: 80px; }
.add-padding-right-80  { padding-right: 80px; }
.add-padding-x-80      { padding-left: 80px; padding-right: 80px; }
.add-padding-y-80      { padding-top: 80px; padding-bottom: 80px; }
.add-padding-84        { padding: 84px; }
.add-padding-top-84    { padding-top: 84px; }
.add-padding-bottom-84 { padding-bottom: 84px; }
.add-padding-left-84   { padding-left: 84px; }
.add-padding-right-84  { padding-right: 84px; }
.add-padding-x-84      { padding-left: 84px; padding-right: 84px; }
.add-padding-y-84      { padding-top: 84px; padding-bottom: 84px; }
.add-padding-88        { padding: 88px; }
.add-padding-top-88    { padding-top: 88px; }
.add-padding-bottom-88 { padding-bottom: 88px; }
.add-padding-left-88   { padding-left: 88px; }
.add-padding-right-88  { padding-right: 88px; }
.add-padding-x-88      { padding-left: 88px; padding-right: 88px; }
.add-padding-y-88      { padding-top: 88px; padding-bottom: 88px; }
.add-padding-92        { padding: 92px; }
.add-padding-top-92    { padding-top: 92px; }
.add-padding-bottom-92 { padding-bottom: 92px; }
.add-padding-left-92   { padding-left: 92px; }
.add-padding-right-92  { padding-right: 92px; }
.add-padding-x-92      { padding-left: 92px; padding-right: 92px; }
.add-padding-y-92      { padding-top: 92px; padding-bottom: 92px; }
.add-padding-96        { padding: 96px; }
.add-padding-top-96    { padding-top: 96px; }
.add-padding-bottom-96 { padding-bottom: 96px; }
.add-padding-left-96   { padding-left: 96px; }
.add-padding-right-96  { padding-right: 96px; }
.add-padding-x-96      { padding-left: 96px; padding-right: 96px; }
.add-padding-y-96      { padding-top: 96px; padding-bottom: 96px; }
.add-padding-100        { padding: 100px; }
.add-padding-top-100    { padding-top: 100px; }
.add-padding-bottom-100 { padding-bottom: 100px; }
.add-padding-left-100   { padding-left: 100px; }
.add-padding-right-100  { padding-right: 100px; }
.add-padding-x-100      { padding-left: 100px; padding-right: 100px; }
.add-padding-y-100      { padding-top: 100px; padding-bottom: 100px; }
.add-padding-104        { padding: 104px; }
.add-padding-top-104    { padding-top: 104px; }
.add-padding-bottom-104 { padding-bottom: 104px; }
.add-padding-left-104   { padding-left: 104px; }
.add-padding-right-104  { padding-right: 104px; }
.add-padding-x-104      { padding-left: 104px; padding-right: 104px; }
.add-padding-y-104      { padding-top: 104px; padding-bottom: 104px; }
.add-padding-108        { padding: 108px; }
.add-padding-top-108    { padding-top: 108px; }
.add-padding-bottom-108 { padding-bottom: 108px; }
.add-padding-left-108   { padding-left: 108px; }
.add-padding-right-108  { padding-right: 108px; }
.add-padding-x-108      { padding-left: 108px; padding-right: 108px; }
.add-padding-y-108      { padding-top: 108px; padding-bottom: 108px; }
.add-padding-112        { padding: 112px; }
.add-padding-top-112    { padding-top: 112px; }
.add-padding-bottom-112 { padding-bottom: 112px; }
.add-padding-left-112   { padding-left: 112px; }
.add-padding-right-112  { padding-right: 112px; }
.add-padding-x-112      { padding-left: 112px; padding-right: 112px; }
.add-padding-y-112      { padding-top: 112px; padding-bottom: 112px; }
.add-padding-116        { padding: 116px; }
.add-padding-top-116    { padding-top: 116px; }
.add-padding-bottom-116 { padding-bottom: 116px; }
.add-padding-left-116   { padding-left: 116px; }
.add-padding-right-116  { padding-right: 116px; }
.add-padding-x-116      { padding-left: 116px; padding-right: 116px; }
.add-padding-y-116      { padding-top: 116px; padding-bottom: 116px; }
.add-padding-120        { padding: 120px; }
.add-padding-top-120    { padding-top: 120px; }
.add-padding-bottom-120 { padding-bottom: 120px; }
.add-padding-left-120   { padding-left: 120px; }
.add-padding-right-120  { padding-right: 120px; }
.add-padding-x-120      { padding-left: 120px; padding-right: 120px; }
.add-padding-y-120      { padding-top: 120px; padding-bottom: 120px; }
.add-padding-124        { padding: 124px; }
.add-padding-top-124    { padding-top: 124px; }
.add-padding-bottom-124 { padding-bottom: 124px; }
.add-padding-left-124   { padding-left: 124px; }
.add-padding-right-124  { padding-right: 124px; }
.add-padding-x-124      { padding-left: 124px; padding-right: 124px; }
.add-padding-y-124      { padding-top: 124px; padding-bottom: 124px; }
.add-padding-128        { padding: 128px; }
.add-padding-top-128    { padding-top: 128px; }
.add-padding-bottom-128 { padding-bottom: 128px; }
.add-padding-left-128   { padding-left: 128px; }
.add-padding-right-128  { padding-right: 128px; }
.add-padding-x-128      { padding-left: 128px; padding-right: 128px; }
.add-padding-y-128      { padding-top: 128px; padding-bottom: 128px; }
.add-padding-132        { padding: 132px; }
.add-padding-top-132    { padding-top: 132px; }
.add-padding-bottom-132 { padding-bottom: 132px; }
.add-padding-left-132   { padding-left: 132px; }
.add-padding-right-132  { padding-right: 132px; }
.add-padding-x-132      { padding-left: 132px; padding-right: 132px; }
.add-padding-y-132      { padding-top: 132px; padding-bottom: 132px; }
.add-padding-136        { padding: 136px; }
.add-padding-top-136    { padding-top: 136px; }
.add-padding-bottom-136 { padding-bottom: 136px; }
.add-padding-left-136   { padding-left: 136px; }
.add-padding-right-136  { padding-right: 136px; }
.add-padding-x-136      { padding-left: 136px; padding-right: 136px; }
.add-padding-y-136      { padding-top: 136px; padding-bottom: 136px; }
.add-padding-140        { padding: 140px; }
.add-padding-top-140    { padding-top: 140px; }
.add-padding-bottom-140 { padding-bottom: 140px; }
.add-padding-left-140   { padding-left: 140px; }
.add-padding-right-140  { padding-right: 140px; }
.add-padding-x-140      { padding-left: 140px; padding-right: 140px; }
.add-padding-y-140      { padding-top: 140px; padding-bottom: 140px; }
.add-padding-144        { padding: 144px; }
.add-padding-top-144    { padding-top: 144px; }
.add-padding-bottom-144 { padding-bottom: 144px; }
.add-padding-left-144   { padding-left: 144px; }
.add-padding-right-144  { padding-right: 144px; }
.add-padding-x-144      { padding-left: 144px; padding-right: 144px; }
.add-padding-y-144      { padding-top: 144px; padding-bottom: 144px; }
.add-padding-148        { padding: 148px; }
.add-padding-top-148    { padding-top: 148px; }
.add-padding-bottom-148 { padding-bottom: 148px; }
.add-padding-left-148   { padding-left: 148px; }
.add-padding-right-148  { padding-right: 148px; }
.add-padding-x-148      { padding-left: 148px; padding-right: 148px; }
.add-padding-y-148      { padding-top: 148px; padding-bottom: 148px; }
.add-padding-152        { padding: 152px; }
.add-padding-top-152    { padding-top: 152px; }
.add-padding-bottom-152 { padding-bottom: 152px; }
.add-padding-left-152   { padding-left: 152px; }
.add-padding-right-152  { padding-right: 152px; }
.add-padding-x-152      { padding-left: 152px; padding-right: 152px; }
.add-padding-y-152      { padding-top: 152px; padding-bottom: 152px; }
.add-padding-156        { padding: 156px; }
.add-padding-top-156    { padding-top: 156px; }
.add-padding-bottom-156 { padding-bottom: 156px; }
.add-padding-left-156   { padding-left: 156px; }
.add-padding-right-156  { padding-right: 156px; }
.add-padding-x-156      { padding-left: 156px; padding-right: 156px; }
.add-padding-y-156      { padding-top: 156px; padding-bottom: 156px; }
.add-padding-160        { padding: 160px; }
.add-padding-top-160    { padding-top: 160px; }
.add-padding-bottom-160 { padding-bottom: 160px; }
.add-padding-left-160   { padding-left: 160px; }
.add-padding-right-160  { padding-right: 160px; }
.add-padding-x-160      { padding-left: 160px; padding-right: 160px; }
.add-padding-y-160      { padding-top: 160px; padding-bottom: 160px; }
.add-padding-164        { padding: 164px; }
.add-padding-top-164    { padding-top: 164px; }
.add-padding-bottom-164 { padding-bottom: 164px; }
.add-padding-left-164   { padding-left: 164px; }
.add-padding-right-164  { padding-right: 164px; }
.add-padding-x-164      { padding-left: 164px; padding-right: 164px; }
.add-padding-y-164      { padding-top: 164px; padding-bottom: 164px; }
.add-padding-168        { padding: 168px; }
.add-padding-top-168    { padding-top: 168px; }
.add-padding-bottom-168 { padding-bottom: 168px; }
.add-padding-left-168   { padding-left: 168px; }
.add-padding-right-168  { padding-right: 168px; }
.add-padding-x-168      { padding-left: 168px; padding-right: 168px; }
.add-padding-y-168      { padding-top: 168px; padding-bottom: 168px; }
.add-padding-172        { padding: 172px; }
.add-padding-top-172    { padding-top: 172px; }
.add-padding-bottom-172 { padding-bottom: 172px; }
.add-padding-left-172   { padding-left: 172px; }
.add-padding-right-172  { padding-right: 172px; }
.add-padding-x-172      { padding-left: 172px; padding-right: 172px; }
.add-padding-y-172      { padding-top: 172px; padding-bottom: 172px; }
.add-padding-176        { padding: 176px; }
.add-padding-top-176    { padding-top: 176px; }
.add-padding-bottom-176 { padding-bottom: 176px; }
.add-padding-left-176   { padding-left: 176px; }
.add-padding-right-176  { padding-right: 176px; }
.add-padding-x-176      { padding-left: 176px; padding-right: 176px; }
.add-padding-y-176      { padding-top: 176px; padding-bottom: 176px; }
.add-padding-180        { padding: 180px; }
.add-padding-top-180    { padding-top: 180px; }
.add-padding-bottom-180 { padding-bottom: 180px; }
.add-padding-left-180   { padding-left: 180px; }
.add-padding-right-180  { padding-right: 180px; }
.add-padding-x-180      { padding-left: 180px; padding-right: 180px; }
.add-padding-y-180      { padding-top: 180px; padding-bottom: 180px; }
.add-padding-184        { padding: 184px; }
.add-padding-top-184    { padding-top: 184px; }
.add-padding-bottom-184 { padding-bottom: 184px; }
.add-padding-left-184   { padding-left: 184px; }
.add-padding-right-184  { padding-right: 184px; }
.add-padding-x-184      { padding-left: 184px; padding-right: 184px; }
.add-padding-y-184      { padding-top: 184px; padding-bottom: 184px; }
.add-padding-188        { padding: 188px; }
.add-padding-top-188    { padding-top: 188px; }
.add-padding-bottom-188 { padding-bottom: 188px; }
.add-padding-left-188   { padding-left: 188px; }
.add-padding-right-188  { padding-right: 188px; }
.add-padding-x-188      { padding-left: 188px; padding-right: 188px; }
.add-padding-y-188      { padding-top: 188px; padding-bottom: 188px; }
.add-padding-192        { padding: 192px; }
.add-padding-top-192    { padding-top: 192px; }
.add-padding-bottom-192 { padding-bottom: 192px; }
.add-padding-left-192   { padding-left: 192px; }
.add-padding-right-192  { padding-right: 192px; }
.add-padding-x-192      { padding-left: 192px; padding-right: 192px; }
.add-padding-y-192      { padding-top: 192px; padding-bottom: 192px; }
.add-padding-196        { padding: 196px; }
.add-padding-top-196    { padding-top: 196px; }
.add-padding-bottom-196 { padding-bottom: 196px; }
.add-padding-left-196   { padding-left: 196px; }
.add-padding-right-196  { padding-right: 196px; }
.add-padding-x-196      { padding-left: 196px; padding-right: 196px; }
.add-padding-y-196      { padding-top: 196px; padding-bottom: 196px; }
.add-padding-200        { padding: 200px; }
.add-padding-top-200    { padding-top: 200px; }
.add-padding-bottom-200 { padding-bottom: 200px; }
.add-padding-left-200   { padding-left: 200px; }
.add-padding-right-200  { padding-right: 200px; }
.add-padding-x-200      { padding-left: 200px; padding-right: 200px; }
.add-padding-y-200      { padding-top: 200px; padding-bottom: 200px; }
.add-padding-220        { padding: 220px; }
.add-padding-top-220    { padding-top: 220px; }
.add-padding-bottom-220 { padding-bottom: 220px; }
.add-padding-left-220   { padding-left: 220px; }
.add-padding-right-220  { padding-right: 220px; }
.add-padding-x-220      { padding-left: 220px; padding-right: 220px; }
.add-padding-y-220      { padding-top: 220px; padding-bottom: 220px; }
.add-padding-240        { padding: 240px; }
.add-padding-top-240    { padding-top: 240px; }
.add-padding-bottom-240 { padding-bottom: 240px; }
.add-padding-left-240   { padding-left: 240px; }
.add-padding-right-240  { padding-right: 240px; }
.add-padding-x-240      { padding-left: 240px; padding-right: 240px; }
.add-padding-y-240      { padding-top: 240px; padding-bottom: 240px; }
.add-padding-256        { padding: 256px; }
.add-padding-top-256    { padding-top: 256px; }
.add-padding-bottom-256 { padding-bottom: 256px; }
.add-padding-left-256   { padding-left: 256px; }
.add-padding-right-256  { padding-right: 256px; }
.add-padding-x-256      { padding-left: 256px; padding-right: 256px; }
.add-padding-y-256      { padding-top: 256px; padding-bottom: 256px; }
.add-padding-280        { padding: 280px; }
.add-padding-top-280    { padding-top: 280px; }
.add-padding-bottom-280 { padding-bottom: 280px; }
.add-padding-left-280   { padding-left: 280px; }
.add-padding-right-280  { padding-right: 280px; }
.add-padding-x-280      { padding-left: 280px; padding-right: 280px; }
.add-padding-y-280      { padding-top: 280px; padding-bottom: 280px; }
.add-padding-320        { padding: 320px; }
.add-padding-top-320    { padding-top: 320px; }
.add-padding-bottom-320 { padding-bottom: 320px; }
.add-padding-left-320   { padding-left: 320px; }
.add-padding-right-320  { padding-right: 320px; }
.add-padding-x-320      { padding-left: 320px; padding-right: 320px; }
.add-padding-y-320      { padding-top: 320px; padding-bottom: 320px; }
.add-padding-360        { padding: 360px; }
.add-padding-top-360    { padding-top: 360px; }
.add-padding-bottom-360 { padding-bottom: 360px; }
.add-padding-left-360   { padding-left: 360px; }
.add-padding-right-360  { padding-right: 360px; }
.add-padding-x-360      { padding-left: 360px; padding-right: 360px; }
.add-padding-y-360      { padding-top: 360px; padding-bottom: 360px; }
.add-padding-384        { padding: 384px; }
.add-padding-top-384    { padding-top: 384px; }
.add-padding-bottom-384 { padding-bottom: 384px; }
.add-padding-left-384   { padding-left: 384px; }
.add-padding-right-384  { padding-right: 384px; }
.add-padding-x-384      { padding-left: 384px; padding-right: 384px; }
.add-padding-y-384      { padding-top: 384px; padding-bottom: 384px; }
.add-padding-400        { padding: 400px; }
.add-padding-top-400    { padding-top: 400px; }
.add-padding-bottom-400 { padding-bottom: 400px; }
.add-padding-left-400   { padding-left: 400px; }
.add-padding-right-400  { padding-right: 400px; }
.add-padding-x-400      { padding-left: 400px; padding-right: 400px; }
.add-padding-y-400      { padding-top: 400px; padding-bottom: 400px; }
.add-padding-448        { padding: 448px; }
.add-padding-top-448    { padding-top: 448px; }
.add-padding-bottom-448 { padding-bottom: 448px; }
.add-padding-left-448   { padding-left: 448px; }
.add-padding-right-448  { padding-right: 448px; }
.add-padding-x-448      { padding-left: 448px; padding-right: 448px; }
.add-padding-y-448      { padding-top: 448px; padding-bottom: 448px; }
.add-padding-512        { padding: 512px; }
.add-padding-top-512    { padding-top: 512px; }
.add-padding-bottom-512 { padding-bottom: 512px; }
.add-padding-left-512   { padding-left: 512px; }
.add-padding-right-512  { padding-right: 512px; }
.add-padding-x-512      { padding-left: 512px; padding-right: 512px; }
.add-padding-y-512      { padding-top: 512px; padding-bottom: 512px; }
.add-padding-640        { padding: 640px; }
.add-padding-top-640    { padding-top: 640px; }
.add-padding-bottom-640 { padding-bottom: 640px; }
.add-padding-left-640   { padding-left: 640px; }
.add-padding-right-640  { padding-right: 640px; }
.add-padding-x-640      { padding-left: 640px; padding-right: 640px; }
.add-padding-y-640      { padding-top: 640px; padding-bottom: 640px; }
.add-padding-768        { padding: 768px; }
.add-padding-top-768    { padding-top: 768px; }
.add-padding-bottom-768 { padding-bottom: 768px; }
.add-padding-left-768   { padding-left: 768px; }
.add-padding-right-768  { padding-right: 768px; }
.add-padding-x-768      { padding-left: 768px; padding-right: 768px; }
.add-padding-y-768      { padding-top: 768px; padding-bottom: 768px; }
.add-padding-1024        { padding: 1024px; }
.add-padding-top-1024    { padding-top: 1024px; }
.add-padding-bottom-1024 { padding-bottom: 1024px; }
.add-padding-left-1024   { padding-left: 1024px; }
.add-padding-right-1024  { padding-right: 1024px; }
.add-padding-x-1024      { padding-left: 1024px; padding-right: 1024px; }
.add-padding-y-1024      { padding-top: 1024px; padding-bottom: 1024px; }

/* ── Margin ── */
.add-margin-0        { margin: 0px; }
.add-margin-top-0    { margin-top: 0px; }
.add-margin-bottom-0 { margin-bottom: 0px; }
.add-margin-left-0   { margin-left: 0px; }
.add-margin-right-0  { margin-right: 0px; }
.add-margin-x-0      { margin-left: 0px; margin-right: 0px; }
.add-margin-y-0      { margin-top: 0px; margin-bottom: 0px; }
.add-margin-1        { margin: 1px; }
.add-margin-top-1    { margin-top: 1px; }
.add-margin-bottom-1 { margin-bottom: 1px; }
.add-margin-left-1   { margin-left: 1px; }
.add-margin-right-1  { margin-right: 1px; }
.add-margin-x-1      { margin-left: 1px; margin-right: 1px; }
.add-margin-y-1      { margin-top: 1px; margin-bottom: 1px; }
.add-margin-2        { margin: 2px; }
.add-margin-top-2    { margin-top: 2px; }
.add-margin-bottom-2 { margin-bottom: 2px; }
.add-margin-left-2   { margin-left: 2px; }
.add-margin-right-2  { margin-right: 2px; }
.add-margin-x-2      { margin-left: 2px; margin-right: 2px; }
.add-margin-y-2      { margin-top: 2px; margin-bottom: 2px; }
.add-margin-3        { margin: 3px; }
.add-margin-top-3    { margin-top: 3px; }
.add-margin-bottom-3 { margin-bottom: 3px; }
.add-margin-left-3   { margin-left: 3px; }
.add-margin-right-3  { margin-right: 3px; }
.add-margin-x-3      { margin-left: 3px; margin-right: 3px; }
.add-margin-y-3      { margin-top: 3px; margin-bottom: 3px; }
.add-margin-4        { margin: 4px; }
.add-margin-top-4    { margin-top: 4px; }
.add-margin-bottom-4 { margin-bottom: 4px; }
.add-margin-left-4   { margin-left: 4px; }
.add-margin-right-4  { margin-right: 4px; }
.add-margin-x-4      { margin-left: 4px; margin-right: 4px; }
.add-margin-y-4      { margin-top: 4px; margin-bottom: 4px; }
.add-margin-5        { margin: 5px; }
.add-margin-top-5    { margin-top: 5px; }
.add-margin-bottom-5 { margin-bottom: 5px; }
.add-margin-left-5   { margin-left: 5px; }
.add-margin-right-5  { margin-right: 5px; }
.add-margin-x-5      { margin-left: 5px; margin-right: 5px; }
.add-margin-y-5      { margin-top: 5px; margin-bottom: 5px; }
.add-margin-6        { margin: 6px; }
.add-margin-top-6    { margin-top: 6px; }
.add-margin-bottom-6 { margin-bottom: 6px; }
.add-margin-left-6   { margin-left: 6px; }
.add-margin-right-6  { margin-right: 6px; }
.add-margin-x-6      { margin-left: 6px; margin-right: 6px; }
.add-margin-y-6      { margin-top: 6px; margin-bottom: 6px; }
.add-margin-7        { margin: 7px; }
.add-margin-top-7    { margin-top: 7px; }
.add-margin-bottom-7 { margin-bottom: 7px; }
.add-margin-left-7   { margin-left: 7px; }
.add-margin-right-7  { margin-right: 7px; }
.add-margin-x-7      { margin-left: 7px; margin-right: 7px; }
.add-margin-y-7      { margin-top: 7px; margin-bottom: 7px; }
.add-margin-8        { margin: 8px; }
.add-margin-top-8    { margin-top: 8px; }
.add-margin-bottom-8 { margin-bottom: 8px; }
.add-margin-left-8   { margin-left: 8px; }
.add-margin-right-8  { margin-right: 8px; }
.add-margin-x-8      { margin-left: 8px; margin-right: 8px; }
.add-margin-y-8      { margin-top: 8px; margin-bottom: 8px; }
.add-margin-9        { margin: 9px; }
.add-margin-top-9    { margin-top: 9px; }
.add-margin-bottom-9 { margin-bottom: 9px; }
.add-margin-left-9   { margin-left: 9px; }
.add-margin-right-9  { margin-right: 9px; }
.add-margin-x-9      { margin-left: 9px; margin-right: 9px; }
.add-margin-y-9      { margin-top: 9px; margin-bottom: 9px; }
.add-margin-10        { margin: 10px; }
.add-margin-top-10    { margin-top: 10px; }
.add-margin-bottom-10 { margin-bottom: 10px; }
.add-margin-left-10   { margin-left: 10px; }
.add-margin-right-10  { margin-right: 10px; }
.add-margin-x-10      { margin-left: 10px; margin-right: 10px; }
.add-margin-y-10      { margin-top: 10px; margin-bottom: 10px; }
.add-margin-11        { margin: 11px; }
.add-margin-top-11    { margin-top: 11px; }
.add-margin-bottom-11 { margin-bottom: 11px; }
.add-margin-left-11   { margin-left: 11px; }
.add-margin-right-11  { margin-right: 11px; }
.add-margin-x-11      { margin-left: 11px; margin-right: 11px; }
.add-margin-y-11      { margin-top: 11px; margin-bottom: 11px; }
.add-margin-12        { margin: 12px; }
.add-margin-top-12    { margin-top: 12px; }
.add-margin-bottom-12 { margin-bottom: 12px; }
.add-margin-left-12   { margin-left: 12px; }
.add-margin-right-12  { margin-right: 12px; }
.add-margin-x-12      { margin-left: 12px; margin-right: 12px; }
.add-margin-y-12      { margin-top: 12px; margin-bottom: 12px; }
.add-margin-13        { margin: 13px; }
.add-margin-top-13    { margin-top: 13px; }
.add-margin-bottom-13 { margin-bottom: 13px; }
.add-margin-left-13   { margin-left: 13px; }
.add-margin-right-13  { margin-right: 13px; }
.add-margin-x-13      { margin-left: 13px; margin-right: 13px; }
.add-margin-y-13      { margin-top: 13px; margin-bottom: 13px; }
.add-margin-14        { margin: 14px; }
.add-margin-top-14    { margin-top: 14px; }
.add-margin-bottom-14 { margin-bottom: 14px; }
.add-margin-left-14   { margin-left: 14px; }
.add-margin-right-14  { margin-right: 14px; }
.add-margin-x-14      { margin-left: 14px; margin-right: 14px; }
.add-margin-y-14      { margin-top: 14px; margin-bottom: 14px; }
.add-margin-15        { margin: 15px; }
.add-margin-top-15    { margin-top: 15px; }
.add-margin-bottom-15 { margin-bottom: 15px; }
.add-margin-left-15   { margin-left: 15px; }
.add-margin-right-15  { margin-right: 15px; }
.add-margin-x-15      { margin-left: 15px; margin-right: 15px; }
.add-margin-y-15      { margin-top: 15px; margin-bottom: 15px; }
.add-margin-16        { margin: 16px; }
.add-margin-top-16    { margin-top: 16px; }
.add-margin-bottom-16 { margin-bottom: 16px; }
.add-margin-left-16   { margin-left: 16px; }
.add-margin-right-16  { margin-right: 16px; }
.add-margin-x-16      { margin-left: 16px; margin-right: 16px; }
.add-margin-y-16      { margin-top: 16px; margin-bottom: 16px; }
.add-margin-17        { margin: 17px; }
.add-margin-top-17    { margin-top: 17px; }
.add-margin-bottom-17 { margin-bottom: 17px; }
.add-margin-left-17   { margin-left: 17px; }
.add-margin-right-17  { margin-right: 17px; }
.add-margin-x-17      { margin-left: 17px; margin-right: 17px; }
.add-margin-y-17      { margin-top: 17px; margin-bottom: 17px; }
.add-margin-18        { margin: 18px; }
.add-margin-top-18    { margin-top: 18px; }
.add-margin-bottom-18 { margin-bottom: 18px; }
.add-margin-left-18   { margin-left: 18px; }
.add-margin-right-18  { margin-right: 18px; }
.add-margin-x-18      { margin-left: 18px; margin-right: 18px; }
.add-margin-y-18      { margin-top: 18px; margin-bottom: 18px; }
.add-margin-19        { margin: 19px; }
.add-margin-top-19    { margin-top: 19px; }
.add-margin-bottom-19 { margin-bottom: 19px; }
.add-margin-left-19   { margin-left: 19px; }
.add-margin-right-19  { margin-right: 19px; }
.add-margin-x-19      { margin-left: 19px; margin-right: 19px; }
.add-margin-y-19      { margin-top: 19px; margin-bottom: 19px; }
.add-margin-20        { margin: 20px; }
.add-margin-top-20    { margin-top: 20px; }
.add-margin-bottom-20 { margin-bottom: 20px; }
.add-margin-left-20   { margin-left: 20px; }
.add-margin-right-20  { margin-right: 20px; }
.add-margin-x-20      { margin-left: 20px; margin-right: 20px; }
.add-margin-y-20      { margin-top: 20px; margin-bottom: 20px; }
.add-margin-21        { margin: 21px; }
.add-margin-top-21    { margin-top: 21px; }
.add-margin-bottom-21 { margin-bottom: 21px; }
.add-margin-left-21   { margin-left: 21px; }
.add-margin-right-21  { margin-right: 21px; }
.add-margin-x-21      { margin-left: 21px; margin-right: 21px; }
.add-margin-y-21      { margin-top: 21px; margin-bottom: 21px; }
.add-margin-22        { margin: 22px; }
.add-margin-top-22    { margin-top: 22px; }
.add-margin-bottom-22 { margin-bottom: 22px; }
.add-margin-left-22   { margin-left: 22px; }
.add-margin-right-22  { margin-right: 22px; }
.add-margin-x-22      { margin-left: 22px; margin-right: 22px; }
.add-margin-y-22      { margin-top: 22px; margin-bottom: 22px; }
.add-margin-23        { margin: 23px; }
.add-margin-top-23    { margin-top: 23px; }
.add-margin-bottom-23 { margin-bottom: 23px; }
.add-margin-left-23   { margin-left: 23px; }
.add-margin-right-23  { margin-right: 23px; }
.add-margin-x-23      { margin-left: 23px; margin-right: 23px; }
.add-margin-y-23      { margin-top: 23px; margin-bottom: 23px; }
.add-margin-24        { margin: 24px; }
.add-margin-top-24    { margin-top: 24px; }
.add-margin-bottom-24 { margin-bottom: 24px; }
.add-margin-left-24   { margin-left: 24px; }
.add-margin-right-24  { margin-right: 24px; }
.add-margin-x-24      { margin-left: 24px; margin-right: 24px; }
.add-margin-y-24      { margin-top: 24px; margin-bottom: 24px; }
.add-margin-25        { margin: 25px; }
.add-margin-top-25    { margin-top: 25px; }
.add-margin-bottom-25 { margin-bottom: 25px; }
.add-margin-left-25   { margin-left: 25px; }
.add-margin-right-25  { margin-right: 25px; }
.add-margin-x-25      { margin-left: 25px; margin-right: 25px; }
.add-margin-y-25      { margin-top: 25px; margin-bottom: 25px; }
.add-margin-26        { margin: 26px; }
.add-margin-top-26    { margin-top: 26px; }
.add-margin-bottom-26 { margin-bottom: 26px; }
.add-margin-left-26   { margin-left: 26px; }
.add-margin-right-26  { margin-right: 26px; }
.add-margin-x-26      { margin-left: 26px; margin-right: 26px; }
.add-margin-y-26      { margin-top: 26px; margin-bottom: 26px; }
.add-margin-27        { margin: 27px; }
.add-margin-top-27    { margin-top: 27px; }
.add-margin-bottom-27 { margin-bottom: 27px; }
.add-margin-left-27   { margin-left: 27px; }
.add-margin-right-27  { margin-right: 27px; }
.add-margin-x-27      { margin-left: 27px; margin-right: 27px; }
.add-margin-y-27      { margin-top: 27px; margin-bottom: 27px; }
.add-margin-28        { margin: 28px; }
.add-margin-top-28    { margin-top: 28px; }
.add-margin-bottom-28 { margin-bottom: 28px; }
.add-margin-left-28   { margin-left: 28px; }
.add-margin-right-28  { margin-right: 28px; }
.add-margin-x-28      { margin-left: 28px; margin-right: 28px; }
.add-margin-y-28      { margin-top: 28px; margin-bottom: 28px; }
.add-margin-29        { margin: 29px; }
.add-margin-top-29    { margin-top: 29px; }
.add-margin-bottom-29 { margin-bottom: 29px; }
.add-margin-left-29   { margin-left: 29px; }
.add-margin-right-29  { margin-right: 29px; }
.add-margin-x-29      { margin-left: 29px; margin-right: 29px; }
.add-margin-y-29      { margin-top: 29px; margin-bottom: 29px; }
.add-margin-30        { margin: 30px; }
.add-margin-top-30    { margin-top: 30px; }
.add-margin-bottom-30 { margin-bottom: 30px; }
.add-margin-left-30   { margin-left: 30px; }
.add-margin-right-30  { margin-right: 30px; }
.add-margin-x-30      { margin-left: 30px; margin-right: 30px; }
.add-margin-y-30      { margin-top: 30px; margin-bottom: 30px; }
.add-margin-31        { margin: 31px; }
.add-margin-top-31    { margin-top: 31px; }
.add-margin-bottom-31 { margin-bottom: 31px; }
.add-margin-left-31   { margin-left: 31px; }
.add-margin-right-31  { margin-right: 31px; }
.add-margin-x-31      { margin-left: 31px; margin-right: 31px; }
.add-margin-y-31      { margin-top: 31px; margin-bottom: 31px; }
.add-margin-32        { margin: 32px; }
.add-margin-top-32    { margin-top: 32px; }
.add-margin-bottom-32 { margin-bottom: 32px; }
.add-margin-left-32   { margin-left: 32px; }
.add-margin-right-32  { margin-right: 32px; }
.add-margin-x-32      { margin-left: 32px; margin-right: 32px; }
.add-margin-y-32      { margin-top: 32px; margin-bottom: 32px; }
.add-margin-33        { margin: 33px; }
.add-margin-top-33    { margin-top: 33px; }
.add-margin-bottom-33 { margin-bottom: 33px; }
.add-margin-left-33   { margin-left: 33px; }
.add-margin-right-33  { margin-right: 33px; }
.add-margin-x-33      { margin-left: 33px; margin-right: 33px; }
.add-margin-y-33      { margin-top: 33px; margin-bottom: 33px; }
.add-margin-34        { margin: 34px; }
.add-margin-top-34    { margin-top: 34px; }
.add-margin-bottom-34 { margin-bottom: 34px; }
.add-margin-left-34   { margin-left: 34px; }
.add-margin-right-34  { margin-right: 34px; }
.add-margin-x-34      { margin-left: 34px; margin-right: 34px; }
.add-margin-y-34      { margin-top: 34px; margin-bottom: 34px; }
.add-margin-35        { margin: 35px; }
.add-margin-top-35    { margin-top: 35px; }
.add-margin-bottom-35 { margin-bottom: 35px; }
.add-margin-left-35   { margin-left: 35px; }
.add-margin-right-35  { margin-right: 35px; }
.add-margin-x-35      { margin-left: 35px; margin-right: 35px; }
.add-margin-y-35      { margin-top: 35px; margin-bottom: 35px; }
.add-margin-36        { margin: 36px; }
.add-margin-top-36    { margin-top: 36px; }
.add-margin-bottom-36 { margin-bottom: 36px; }
.add-margin-left-36   { margin-left: 36px; }
.add-margin-right-36  { margin-right: 36px; }
.add-margin-x-36      { margin-left: 36px; margin-right: 36px; }
.add-margin-y-36      { margin-top: 36px; margin-bottom: 36px; }
.add-margin-37        { margin: 37px; }
.add-margin-top-37    { margin-top: 37px; }
.add-margin-bottom-37 { margin-bottom: 37px; }
.add-margin-left-37   { margin-left: 37px; }
.add-margin-right-37  { margin-right: 37px; }
.add-margin-x-37      { margin-left: 37px; margin-right: 37px; }
.add-margin-y-37      { margin-top: 37px; margin-bottom: 37px; }
.add-margin-38        { margin: 38px; }
.add-margin-top-38    { margin-top: 38px; }
.add-margin-bottom-38 { margin-bottom: 38px; }
.add-margin-left-38   { margin-left: 38px; }
.add-margin-right-38  { margin-right: 38px; }
.add-margin-x-38      { margin-left: 38px; margin-right: 38px; }
.add-margin-y-38      { margin-top: 38px; margin-bottom: 38px; }
.add-margin-39        { margin: 39px; }
.add-margin-top-39    { margin-top: 39px; }
.add-margin-bottom-39 { margin-bottom: 39px; }
.add-margin-left-39   { margin-left: 39px; }
.add-margin-right-39  { margin-right: 39px; }
.add-margin-x-39      { margin-left: 39px; margin-right: 39px; }
.add-margin-y-39      { margin-top: 39px; margin-bottom: 39px; }
.add-margin-40        { margin: 40px; }
.add-margin-top-40    { margin-top: 40px; }
.add-margin-bottom-40 { margin-bottom: 40px; }
.add-margin-left-40   { margin-left: 40px; }
.add-margin-right-40  { margin-right: 40px; }
.add-margin-x-40      { margin-left: 40px; margin-right: 40px; }
.add-margin-y-40      { margin-top: 40px; margin-bottom: 40px; }
.add-margin-41        { margin: 41px; }
.add-margin-top-41    { margin-top: 41px; }
.add-margin-bottom-41 { margin-bottom: 41px; }
.add-margin-left-41   { margin-left: 41px; }
.add-margin-right-41  { margin-right: 41px; }
.add-margin-x-41      { margin-left: 41px; margin-right: 41px; }
.add-margin-y-41      { margin-top: 41px; margin-bottom: 41px; }
.add-margin-42        { margin: 42px; }
.add-margin-top-42    { margin-top: 42px; }
.add-margin-bottom-42 { margin-bottom: 42px; }
.add-margin-left-42   { margin-left: 42px; }
.add-margin-right-42  { margin-right: 42px; }
.add-margin-x-42      { margin-left: 42px; margin-right: 42px; }
.add-margin-y-42      { margin-top: 42px; margin-bottom: 42px; }
.add-margin-43        { margin: 43px; }
.add-margin-top-43    { margin-top: 43px; }
.add-margin-bottom-43 { margin-bottom: 43px; }
.add-margin-left-43   { margin-left: 43px; }
.add-margin-right-43  { margin-right: 43px; }
.add-margin-x-43      { margin-left: 43px; margin-right: 43px; }
.add-margin-y-43      { margin-top: 43px; margin-bottom: 43px; }
.add-margin-44        { margin: 44px; }
.add-margin-top-44    { margin-top: 44px; }
.add-margin-bottom-44 { margin-bottom: 44px; }
.add-margin-left-44   { margin-left: 44px; }
.add-margin-right-44  { margin-right: 44px; }
.add-margin-x-44      { margin-left: 44px; margin-right: 44px; }
.add-margin-y-44      { margin-top: 44px; margin-bottom: 44px; }
.add-margin-45        { margin: 45px; }
.add-margin-top-45    { margin-top: 45px; }
.add-margin-bottom-45 { margin-bottom: 45px; }
.add-margin-left-45   { margin-left: 45px; }
.add-margin-right-45  { margin-right: 45px; }
.add-margin-x-45      { margin-left: 45px; margin-right: 45px; }
.add-margin-y-45      { margin-top: 45px; margin-bottom: 45px; }
.add-margin-46        { margin: 46px; }
.add-margin-top-46    { margin-top: 46px; }
.add-margin-bottom-46 { margin-bottom: 46px; }
.add-margin-left-46   { margin-left: 46px; }
.add-margin-right-46  { margin-right: 46px; }
.add-margin-x-46      { margin-left: 46px; margin-right: 46px; }
.add-margin-y-46      { margin-top: 46px; margin-bottom: 46px; }
.add-margin-47        { margin: 47px; }
.add-margin-top-47    { margin-top: 47px; }
.add-margin-bottom-47 { margin-bottom: 47px; }
.add-margin-left-47   { margin-left: 47px; }
.add-margin-right-47  { margin-right: 47px; }
.add-margin-x-47      { margin-left: 47px; margin-right: 47px; }
.add-margin-y-47      { margin-top: 47px; margin-bottom: 47px; }
.add-margin-48        { margin: 48px; }
.add-margin-top-48    { margin-top: 48px; }
.add-margin-bottom-48 { margin-bottom: 48px; }
.add-margin-left-48   { margin-left: 48px; }
.add-margin-right-48  { margin-right: 48px; }
.add-margin-x-48      { margin-left: 48px; margin-right: 48px; }
.add-margin-y-48      { margin-top: 48px; margin-bottom: 48px; }
.add-margin-49        { margin: 49px; }
.add-margin-top-49    { margin-top: 49px; }
.add-margin-bottom-49 { margin-bottom: 49px; }
.add-margin-left-49   { margin-left: 49px; }
.add-margin-right-49  { margin-right: 49px; }
.add-margin-x-49      { margin-left: 49px; margin-right: 49px; }
.add-margin-y-49      { margin-top: 49px; margin-bottom: 49px; }
.add-margin-50        { margin: 50px; }
.add-margin-top-50    { margin-top: 50px; }
.add-margin-bottom-50 { margin-bottom: 50px; }
.add-margin-left-50   { margin-left: 50px; }
.add-margin-right-50  { margin-right: 50px; }
.add-margin-x-50      { margin-left: 50px; margin-right: 50px; }
.add-margin-y-50      { margin-top: 50px; margin-bottom: 50px; }
.add-margin-52        { margin: 52px; }
.add-margin-top-52    { margin-top: 52px; }
.add-margin-bottom-52 { margin-bottom: 52px; }
.add-margin-left-52   { margin-left: 52px; }
.add-margin-right-52  { margin-right: 52px; }
.add-margin-x-52      { margin-left: 52px; margin-right: 52px; }
.add-margin-y-52      { margin-top: 52px; margin-bottom: 52px; }
.add-margin-56        { margin: 56px; }
.add-margin-top-56    { margin-top: 56px; }
.add-margin-bottom-56 { margin-bottom: 56px; }
.add-margin-left-56   { margin-left: 56px; }
.add-margin-right-56  { margin-right: 56px; }
.add-margin-x-56      { margin-left: 56px; margin-right: 56px; }
.add-margin-y-56      { margin-top: 56px; margin-bottom: 56px; }
.add-margin-60        { margin: 60px; }
.add-margin-top-60    { margin-top: 60px; }
.add-margin-bottom-60 { margin-bottom: 60px; }
.add-margin-left-60   { margin-left: 60px; }
.add-margin-right-60  { margin-right: 60px; }
.add-margin-x-60      { margin-left: 60px; margin-right: 60px; }
.add-margin-y-60      { margin-top: 60px; margin-bottom: 60px; }
.add-margin-64        { margin: 64px; }
.add-margin-top-64    { margin-top: 64px; }
.add-margin-bottom-64 { margin-bottom: 64px; }
.add-margin-left-64   { margin-left: 64px; }
.add-margin-right-64  { margin-right: 64px; }
.add-margin-x-64      { margin-left: 64px; margin-right: 64px; }
.add-margin-y-64      { margin-top: 64px; margin-bottom: 64px; }
.add-margin-68        { margin: 68px; }
.add-margin-top-68    { margin-top: 68px; }
.add-margin-bottom-68 { margin-bottom: 68px; }
.add-margin-left-68   { margin-left: 68px; }
.add-margin-right-68  { margin-right: 68px; }
.add-margin-x-68      { margin-left: 68px; margin-right: 68px; }
.add-margin-y-68      { margin-top: 68px; margin-bottom: 68px; }
.add-margin-72        { margin: 72px; }
.add-margin-top-72    { margin-top: 72px; }
.add-margin-bottom-72 { margin-bottom: 72px; }
.add-margin-left-72   { margin-left: 72px; }
.add-margin-right-72  { margin-right: 72px; }
.add-margin-x-72      { margin-left: 72px; margin-right: 72px; }
.add-margin-y-72      { margin-top: 72px; margin-bottom: 72px; }
.add-margin-76        { margin: 76px; }
.add-margin-top-76    { margin-top: 76px; }
.add-margin-bottom-76 { margin-bottom: 76px; }
.add-margin-left-76   { margin-left: 76px; }
.add-margin-right-76  { margin-right: 76px; }
.add-margin-x-76      { margin-left: 76px; margin-right: 76px; }
.add-margin-y-76      { margin-top: 76px; margin-bottom: 76px; }
.add-margin-80        { margin: 80px; }
.add-margin-top-80    { margin-top: 80px; }
.add-margin-bottom-80 { margin-bottom: 80px; }
.add-margin-left-80   { margin-left: 80px; }
.add-margin-right-80  { margin-right: 80px; }
.add-margin-x-80      { margin-left: 80px; margin-right: 80px; }
.add-margin-y-80      { margin-top: 80px; margin-bottom: 80px; }
.add-margin-84        { margin: 84px; }
.add-margin-top-84    { margin-top: 84px; }
.add-margin-bottom-84 { margin-bottom: 84px; }
.add-margin-left-84   { margin-left: 84px; }
.add-margin-right-84  { margin-right: 84px; }
.add-margin-x-84      { margin-left: 84px; margin-right: 84px; }
.add-margin-y-84      { margin-top: 84px; margin-bottom: 84px; }
.add-margin-88        { margin: 88px; }
.add-margin-top-88    { margin-top: 88px; }
.add-margin-bottom-88 { margin-bottom: 88px; }
.add-margin-left-88   { margin-left: 88px; }
.add-margin-right-88  { margin-right: 88px; }
.add-margin-x-88      { margin-left: 88px; margin-right: 88px; }
.add-margin-y-88      { margin-top: 88px; margin-bottom: 88px; }
.add-margin-92        { margin: 92px; }
.add-margin-top-92    { margin-top: 92px; }
.add-margin-bottom-92 { margin-bottom: 92px; }
.add-margin-left-92   { margin-left: 92px; }
.add-margin-right-92  { margin-right: 92px; }
.add-margin-x-92      { margin-left: 92px; margin-right: 92px; }
.add-margin-y-92      { margin-top: 92px; margin-bottom: 92px; }
.add-margin-96        { margin: 96px; }
.add-margin-top-96    { margin-top: 96px; }
.add-margin-bottom-96 { margin-bottom: 96px; }
.add-margin-left-96   { margin-left: 96px; }
.add-margin-right-96  { margin-right: 96px; }
.add-margin-x-96      { margin-left: 96px; margin-right: 96px; }
.add-margin-y-96      { margin-top: 96px; margin-bottom: 96px; }
.add-margin-100        { margin: 100px; }
.add-margin-top-100    { margin-top: 100px; }
.add-margin-bottom-100 { margin-bottom: 100px; }
.add-margin-left-100   { margin-left: 100px; }
.add-margin-right-100  { margin-right: 100px; }
.add-margin-x-100      { margin-left: 100px; margin-right: 100px; }
.add-margin-y-100      { margin-top: 100px; margin-bottom: 100px; }
.add-margin-104        { margin: 104px; }
.add-margin-top-104    { margin-top: 104px; }
.add-margin-bottom-104 { margin-bottom: 104px; }
.add-margin-left-104   { margin-left: 104px; }
.add-margin-right-104  { margin-right: 104px; }
.add-margin-x-104      { margin-left: 104px; margin-right: 104px; }
.add-margin-y-104      { margin-top: 104px; margin-bottom: 104px; }
.add-margin-108        { margin: 108px; }
.add-margin-top-108    { margin-top: 108px; }
.add-margin-bottom-108 { margin-bottom: 108px; }
.add-margin-left-108   { margin-left: 108px; }
.add-margin-right-108  { margin-right: 108px; }
.add-margin-x-108      { margin-left: 108px; margin-right: 108px; }
.add-margin-y-108      { margin-top: 108px; margin-bottom: 108px; }
.add-margin-112        { margin: 112px; }
.add-margin-top-112    { margin-top: 112px; }
.add-margin-bottom-112 { margin-bottom: 112px; }
.add-margin-left-112   { margin-left: 112px; }
.add-margin-right-112  { margin-right: 112px; }
.add-margin-x-112      { margin-left: 112px; margin-right: 112px; }
.add-margin-y-112      { margin-top: 112px; margin-bottom: 112px; }
.add-margin-116        { margin: 116px; }
.add-margin-top-116    { margin-top: 116px; }
.add-margin-bottom-116 { margin-bottom: 116px; }
.add-margin-left-116   { margin-left: 116px; }
.add-margin-right-116  { margin-right: 116px; }
.add-margin-x-116      { margin-left: 116px; margin-right: 116px; }
.add-margin-y-116      { margin-top: 116px; margin-bottom: 116px; }
.add-margin-120        { margin: 120px; }
.add-margin-top-120    { margin-top: 120px; }
.add-margin-bottom-120 { margin-bottom: 120px; }
.add-margin-left-120   { margin-left: 120px; }
.add-margin-right-120  { margin-right: 120px; }
.add-margin-x-120      { margin-left: 120px; margin-right: 120px; }
.add-margin-y-120      { margin-top: 120px; margin-bottom: 120px; }
.add-margin-124        { margin: 124px; }
.add-margin-top-124    { margin-top: 124px; }
.add-margin-bottom-124 { margin-bottom: 124px; }
.add-margin-left-124   { margin-left: 124px; }
.add-margin-right-124  { margin-right: 124px; }
.add-margin-x-124      { margin-left: 124px; margin-right: 124px; }
.add-margin-y-124      { margin-top: 124px; margin-bottom: 124px; }
.add-margin-128        { margin: 128px; }
.add-margin-top-128    { margin-top: 128px; }
.add-margin-bottom-128 { margin-bottom: 128px; }
.add-margin-left-128   { margin-left: 128px; }
.add-margin-right-128  { margin-right: 128px; }
.add-margin-x-128      { margin-left: 128px; margin-right: 128px; }
.add-margin-y-128      { margin-top: 128px; margin-bottom: 128px; }
.add-margin-132        { margin: 132px; }
.add-margin-top-132    { margin-top: 132px; }
.add-margin-bottom-132 { margin-bottom: 132px; }
.add-margin-left-132   { margin-left: 132px; }
.add-margin-right-132  { margin-right: 132px; }
.add-margin-x-132      { margin-left: 132px; margin-right: 132px; }
.add-margin-y-132      { margin-top: 132px; margin-bottom: 132px; }
.add-margin-136        { margin: 136px; }
.add-margin-top-136    { margin-top: 136px; }
.add-margin-bottom-136 { margin-bottom: 136px; }
.add-margin-left-136   { margin-left: 136px; }
.add-margin-right-136  { margin-right: 136px; }
.add-margin-x-136      { margin-left: 136px; margin-right: 136px; }
.add-margin-y-136      { margin-top: 136px; margin-bottom: 136px; }
.add-margin-140        { margin: 140px; }
.add-margin-top-140    { margin-top: 140px; }
.add-margin-bottom-140 { margin-bottom: 140px; }
.add-margin-left-140   { margin-left: 140px; }
.add-margin-right-140  { margin-right: 140px; }
.add-margin-x-140      { margin-left: 140px; margin-right: 140px; }
.add-margin-y-140      { margin-top: 140px; margin-bottom: 140px; }
.add-margin-144        { margin: 144px; }
.add-margin-top-144    { margin-top: 144px; }
.add-margin-bottom-144 { margin-bottom: 144px; }
.add-margin-left-144   { margin-left: 144px; }
.add-margin-right-144  { margin-right: 144px; }
.add-margin-x-144      { margin-left: 144px; margin-right: 144px; }
.add-margin-y-144      { margin-top: 144px; margin-bottom: 144px; }
.add-margin-148        { margin: 148px; }
.add-margin-top-148    { margin-top: 148px; }
.add-margin-bottom-148 { margin-bottom: 148px; }
.add-margin-left-148   { margin-left: 148px; }
.add-margin-right-148  { margin-right: 148px; }
.add-margin-x-148      { margin-left: 148px; margin-right: 148px; }
.add-margin-y-148      { margin-top: 148px; margin-bottom: 148px; }
.add-margin-152        { margin: 152px; }
.add-margin-top-152    { margin-top: 152px; }
.add-margin-bottom-152 { margin-bottom: 152px; }
.add-margin-left-152   { margin-left: 152px; }
.add-margin-right-152  { margin-right: 152px; }
.add-margin-x-152      { margin-left: 152px; margin-right: 152px; }
.add-margin-y-152      { margin-top: 152px; margin-bottom: 152px; }
.add-margin-156        { margin: 156px; }
.add-margin-top-156    { margin-top: 156px; }
.add-margin-bottom-156 { margin-bottom: 156px; }
.add-margin-left-156   { margin-left: 156px; }
.add-margin-right-156  { margin-right: 156px; }
.add-margin-x-156      { margin-left: 156px; margin-right: 156px; }
.add-margin-y-156      { margin-top: 156px; margin-bottom: 156px; }
.add-margin-160        { margin: 160px; }
.add-margin-top-160    { margin-top: 160px; }
.add-margin-bottom-160 { margin-bottom: 160px; }
.add-margin-left-160   { margin-left: 160px; }
.add-margin-right-160  { margin-right: 160px; }
.add-margin-x-160      { margin-left: 160px; margin-right: 160px; }
.add-margin-y-160      { margin-top: 160px; margin-bottom: 160px; }
.add-margin-164        { margin: 164px; }
.add-margin-top-164    { margin-top: 164px; }
.add-margin-bottom-164 { margin-bottom: 164px; }
.add-margin-left-164   { margin-left: 164px; }
.add-margin-right-164  { margin-right: 164px; }
.add-margin-x-164      { margin-left: 164px; margin-right: 164px; }
.add-margin-y-164      { margin-top: 164px; margin-bottom: 164px; }
.add-margin-168        { margin: 168px; }
.add-margin-top-168    { margin-top: 168px; }
.add-margin-bottom-168 { margin-bottom: 168px; }
.add-margin-left-168   { margin-left: 168px; }
.add-margin-right-168  { margin-right: 168px; }
.add-margin-x-168      { margin-left: 168px; margin-right: 168px; }
.add-margin-y-168      { margin-top: 168px; margin-bottom: 168px; }
.add-margin-172        { margin: 172px; }
.add-margin-top-172    { margin-top: 172px; }
.add-margin-bottom-172 { margin-bottom: 172px; }
.add-margin-left-172   { margin-left: 172px; }
.add-margin-right-172  { margin-right: 172px; }
.add-margin-x-172      { margin-left: 172px; margin-right: 172px; }
.add-margin-y-172      { margin-top: 172px; margin-bottom: 172px; }
.add-margin-176        { margin: 176px; }
.add-margin-top-176    { margin-top: 176px; }
.add-margin-bottom-176 { margin-bottom: 176px; }
.add-margin-left-176   { margin-left: 176px; }
.add-margin-right-176  { margin-right: 176px; }
.add-margin-x-176      { margin-left: 176px; margin-right: 176px; }
.add-margin-y-176      { margin-top: 176px; margin-bottom: 176px; }
.add-margin-180        { margin: 180px; }
.add-margin-top-180    { margin-top: 180px; }
.add-margin-bottom-180 { margin-bottom: 180px; }
.add-margin-left-180   { margin-left: 180px; }
.add-margin-right-180  { margin-right: 180px; }
.add-margin-x-180      { margin-left: 180px; margin-right: 180px; }
.add-margin-y-180      { margin-top: 180px; margin-bottom: 180px; }
.add-margin-184        { margin: 184px; }
.add-margin-top-184    { margin-top: 184px; }
.add-margin-bottom-184 { margin-bottom: 184px; }
.add-margin-left-184   { margin-left: 184px; }
.add-margin-right-184  { margin-right: 184px; }
.add-margin-x-184      { margin-left: 184px; margin-right: 184px; }
.add-margin-y-184      { margin-top: 184px; margin-bottom: 184px; }
.add-margin-188        { margin: 188px; }
.add-margin-top-188    { margin-top: 188px; }
.add-margin-bottom-188 { margin-bottom: 188px; }
.add-margin-left-188   { margin-left: 188px; }
.add-margin-right-188  { margin-right: 188px; }
.add-margin-x-188      { margin-left: 188px; margin-right: 188px; }
.add-margin-y-188      { margin-top: 188px; margin-bottom: 188px; }
.add-margin-192        { margin: 192px; }
.add-margin-top-192    { margin-top: 192px; }
.add-margin-bottom-192 { margin-bottom: 192px; }
.add-margin-left-192   { margin-left: 192px; }
.add-margin-right-192  { margin-right: 192px; }
.add-margin-x-192      { margin-left: 192px; margin-right: 192px; }
.add-margin-y-192      { margin-top: 192px; margin-bottom: 192px; }
.add-margin-196        { margin: 196px; }
.add-margin-top-196    { margin-top: 196px; }
.add-margin-bottom-196 { margin-bottom: 196px; }
.add-margin-left-196   { margin-left: 196px; }
.add-margin-right-196  { margin-right: 196px; }
.add-margin-x-196      { margin-left: 196px; margin-right: 196px; }
.add-margin-y-196      { margin-top: 196px; margin-bottom: 196px; }
.add-margin-200        { margin: 200px; }
.add-margin-top-200    { margin-top: 200px; }
.add-margin-bottom-200 { margin-bottom: 200px; }
.add-margin-left-200   { margin-left: 200px; }
.add-margin-right-200  { margin-right: 200px; }
.add-margin-x-200      { margin-left: 200px; margin-right: 200px; }
.add-margin-y-200      { margin-top: 200px; margin-bottom: 200px; }
.add-margin-220        { margin: 220px; }
.add-margin-top-220    { margin-top: 220px; }
.add-margin-bottom-220 { margin-bottom: 220px; }
.add-margin-left-220   { margin-left: 220px; }
.add-margin-right-220  { margin-right: 220px; }
.add-margin-x-220      { margin-left: 220px; margin-right: 220px; }
.add-margin-y-220      { margin-top: 220px; margin-bottom: 220px; }
.add-margin-240        { margin: 240px; }
.add-margin-top-240    { margin-top: 240px; }
.add-margin-bottom-240 { margin-bottom: 240px; }
.add-margin-left-240   { margin-left: 240px; }
.add-margin-right-240  { margin-right: 240px; }
.add-margin-x-240      { margin-left: 240px; margin-right: 240px; }
.add-margin-y-240      { margin-top: 240px; margin-bottom: 240px; }
.add-margin-256        { margin: 256px; }
.add-margin-top-256    { margin-top: 256px; }
.add-margin-bottom-256 { margin-bottom: 256px; }
.add-margin-left-256   { margin-left: 256px; }
.add-margin-right-256  { margin-right: 256px; }
.add-margin-x-256      { margin-left: 256px; margin-right: 256px; }
.add-margin-y-256      { margin-top: 256px; margin-bottom: 256px; }
.add-margin-280        { margin: 280px; }
.add-margin-top-280    { margin-top: 280px; }
.add-margin-bottom-280 { margin-bottom: 280px; }
.add-margin-left-280   { margin-left: 280px; }
.add-margin-right-280  { margin-right: 280px; }
.add-margin-x-280      { margin-left: 280px; margin-right: 280px; }
.add-margin-y-280      { margin-top: 280px; margin-bottom: 280px; }
.add-margin-320        { margin: 320px; }
.add-margin-top-320    { margin-top: 320px; }
.add-margin-bottom-320 { margin-bottom: 320px; }
.add-margin-left-320   { margin-left: 320px; }
.add-margin-right-320  { margin-right: 320px; }
.add-margin-x-320      { margin-left: 320px; margin-right: 320px; }
.add-margin-y-320      { margin-top: 320px; margin-bottom: 320px; }
.add-margin-360        { margin: 360px; }
.add-margin-top-360    { margin-top: 360px; }
.add-margin-bottom-360 { margin-bottom: 360px; }
.add-margin-left-360   { margin-left: 360px; }
.add-margin-right-360  { margin-right: 360px; }
.add-margin-x-360      { margin-left: 360px; margin-right: 360px; }
.add-margin-y-360      { margin-top: 360px; margin-bottom: 360px; }
.add-margin-384        { margin: 384px; }
.add-margin-top-384    { margin-top: 384px; }
.add-margin-bottom-384 { margin-bottom: 384px; }
.add-margin-left-384   { margin-left: 384px; }
.add-margin-right-384  { margin-right: 384px; }
.add-margin-x-384      { margin-left: 384px; margin-right: 384px; }
.add-margin-y-384      { margin-top: 384px; margin-bottom: 384px; }
.add-margin-400        { margin: 400px; }
.add-margin-top-400    { margin-top: 400px; }
.add-margin-bottom-400 { margin-bottom: 400px; }
.add-margin-left-400   { margin-left: 400px; }
.add-margin-right-400  { margin-right: 400px; }
.add-margin-x-400      { margin-left: 400px; margin-right: 400px; }
.add-margin-y-400      { margin-top: 400px; margin-bottom: 400px; }
.add-margin-448        { margin: 448px; }
.add-margin-top-448    { margin-top: 448px; }
.add-margin-bottom-448 { margin-bottom: 448px; }
.add-margin-left-448   { margin-left: 448px; }
.add-margin-right-448  { margin-right: 448px; }
.add-margin-x-448      { margin-left: 448px; margin-right: 448px; }
.add-margin-y-448      { margin-top: 448px; margin-bottom: 448px; }
.add-margin-512        { margin: 512px; }
.add-margin-top-512    { margin-top: 512px; }
.add-margin-bottom-512 { margin-bottom: 512px; }
.add-margin-left-512   { margin-left: 512px; }
.add-margin-right-512  { margin-right: 512px; }
.add-margin-x-512      { margin-left: 512px; margin-right: 512px; }
.add-margin-y-512      { margin-top: 512px; margin-bottom: 512px; }
.add-margin-640        { margin: 640px; }
.add-margin-top-640    { margin-top: 640px; }
.add-margin-bottom-640 { margin-bottom: 640px; }
.add-margin-left-640   { margin-left: 640px; }
.add-margin-right-640  { margin-right: 640px; }
.add-margin-x-640      { margin-left: 640px; margin-right: 640px; }
.add-margin-y-640      { margin-top: 640px; margin-bottom: 640px; }
.add-margin-768        { margin: 768px; }
.add-margin-top-768    { margin-top: 768px; }
.add-margin-bottom-768 { margin-bottom: 768px; }
.add-margin-left-768   { margin-left: 768px; }
.add-margin-right-768  { margin-right: 768px; }
.add-margin-x-768      { margin-left: 768px; margin-right: 768px; }
.add-margin-y-768      { margin-top: 768px; margin-bottom: 768px; }
.add-margin-1024        { margin: 1024px; }
.add-margin-top-1024    { margin-top: 1024px; }
.add-margin-bottom-1024 { margin-bottom: 1024px; }
.add-margin-left-1024   { margin-left: 1024px; }
.add-margin-right-1024  { margin-right: 1024px; }
.add-margin-x-1024      { margin-left: 1024px; margin-right: 1024px; }
.add-margin-y-1024      { margin-top: 1024px; margin-bottom: 1024px; }
.center-margin            { margin-left: auto; margin-right: auto; }
.add-margin-auto          { margin: auto; }
.add-margin-top-auto      { margin-top: auto; }
.add-margin-bottom-auto   { margin-bottom: auto; }
.add-margin-left-auto     { margin-left: auto; }
.add-margin-right-auto    { margin-right: auto; }
.add-margin-x-auto        { margin-left: auto; margin-right: auto; }
.add-margin-y-auto        { margin-top: auto; margin-bottom: auto; }

/* ── Negative Margin ── */
.subtract-margin-1        { margin: -1px; }
.subtract-margin-top-1    { margin-top: -1px; }
.subtract-margin-bottom-1 { margin-bottom: -1px; }
.subtract-margin-left-1   { margin-left: -1px; }
.subtract-margin-right-1  { margin-right: -1px; }
.subtract-margin-2        { margin: -2px; }
.subtract-margin-top-2    { margin-top: -2px; }
.subtract-margin-bottom-2 { margin-bottom: -2px; }
.subtract-margin-left-2   { margin-left: -2px; }
.subtract-margin-right-2  { margin-right: -2px; }
.subtract-margin-4        { margin: -4px; }
.subtract-margin-top-4    { margin-top: -4px; }
.subtract-margin-bottom-4 { margin-bottom: -4px; }
.subtract-margin-left-4   { margin-left: -4px; }
.subtract-margin-right-4  { margin-right: -4px; }
.subtract-margin-8        { margin: -8px; }
.subtract-margin-top-8    { margin-top: -8px; }
.subtract-margin-bottom-8 { margin-bottom: -8px; }
.subtract-margin-left-8   { margin-left: -8px; }
.subtract-margin-right-8  { margin-right: -8px; }
.subtract-margin-12        { margin: -12px; }
.subtract-margin-top-12    { margin-top: -12px; }
.subtract-margin-bottom-12 { margin-bottom: -12px; }
.subtract-margin-left-12   { margin-left: -12px; }
.subtract-margin-right-12  { margin-right: -12px; }
.subtract-margin-16        { margin: -16px; }
.subtract-margin-top-16    { margin-top: -16px; }
.subtract-margin-bottom-16 { margin-bottom: -16px; }
.subtract-margin-left-16   { margin-left: -16px; }
.subtract-margin-right-16  { margin-right: -16px; }
.subtract-margin-20        { margin: -20px; }
.subtract-margin-top-20    { margin-top: -20px; }
.subtract-margin-bottom-20 { margin-bottom: -20px; }
.subtract-margin-left-20   { margin-left: -20px; }
.subtract-margin-right-20  { margin-right: -20px; }
.subtract-margin-24        { margin: -24px; }
.subtract-margin-top-24    { margin-top: -24px; }
.subtract-margin-bottom-24 { margin-bottom: -24px; }
.subtract-margin-left-24   { margin-left: -24px; }
.subtract-margin-right-24  { margin-right: -24px; }
.subtract-margin-32        { margin: -32px; }
.subtract-margin-top-32    { margin-top: -32px; }
.subtract-margin-bottom-32 { margin-bottom: -32px; }
.subtract-margin-left-32   { margin-left: -32px; }
.subtract-margin-right-32  { margin-right: -32px; }
.subtract-margin-40        { margin: -40px; }
.subtract-margin-top-40    { margin-top: -40px; }
.subtract-margin-bottom-40 { margin-bottom: -40px; }
.subtract-margin-left-40   { margin-left: -40px; }
.subtract-margin-right-40  { margin-right: -40px; }
.subtract-margin-48        { margin: -48px; }
.subtract-margin-top-48    { margin-top: -48px; }
.subtract-margin-bottom-48 { margin-bottom: -48px; }
.subtract-margin-left-48   { margin-left: -48px; }
.subtract-margin-right-48  { margin-right: -48px; }
.subtract-margin-64        { margin: -64px; }
.subtract-margin-top-64    { margin-top: -64px; }
.subtract-margin-bottom-64 { margin-bottom: -64px; }
.subtract-margin-left-64   { margin-left: -64px; }
.subtract-margin-right-64  { margin-right: -64px; }

/* ── Gap ── */
.gap-0   { gap: 0px; }
.gap-x-0 { column-gap: 0px; }
.gap-y-0 { row-gap: 0px; }
.gap-1   { gap: 1px; }
.gap-x-1 { column-gap: 1px; }
.gap-y-1 { row-gap: 1px; }
.gap-2   { gap: 2px; }
.gap-x-2 { column-gap: 2px; }
.gap-y-2 { row-gap: 2px; }
.gap-3   { gap: 3px; }
.gap-x-3 { column-gap: 3px; }
.gap-y-3 { row-gap: 3px; }
.gap-4   { gap: 4px; }
.gap-x-4 { column-gap: 4px; }
.gap-y-4 { row-gap: 4px; }
.gap-5   { gap: 5px; }
.gap-x-5 { column-gap: 5px; }
.gap-y-5 { row-gap: 5px; }
.gap-6   { gap: 6px; }
.gap-x-6 { column-gap: 6px; }
.gap-y-6 { row-gap: 6px; }
.gap-7   { gap: 7px; }
.gap-x-7 { column-gap: 7px; }
.gap-y-7 { row-gap: 7px; }
.gap-8   { gap: 8px; }
.gap-x-8 { column-gap: 8px; }
.gap-y-8 { row-gap: 8px; }
.gap-9   { gap: 9px; }
.gap-x-9 { column-gap: 9px; }
.gap-y-9 { row-gap: 9px; }
.gap-10   { gap: 10px; }
.gap-x-10 { column-gap: 10px; }
.gap-y-10 { row-gap: 10px; }
.gap-11   { gap: 11px; }
.gap-x-11 { column-gap: 11px; }
.gap-y-11 { row-gap: 11px; }
.gap-12   { gap: 12px; }
.gap-x-12 { column-gap: 12px; }
.gap-y-12 { row-gap: 12px; }
.gap-13   { gap: 13px; }
.gap-x-13 { column-gap: 13px; }
.gap-y-13 { row-gap: 13px; }
.gap-14   { gap: 14px; }
.gap-x-14 { column-gap: 14px; }
.gap-y-14 { row-gap: 14px; }
.gap-15   { gap: 15px; }
.gap-x-15 { column-gap: 15px; }
.gap-y-15 { row-gap: 15px; }
.gap-16   { gap: 16px; }
.gap-x-16 { column-gap: 16px; }
.gap-y-16 { row-gap: 16px; }
.gap-17   { gap: 17px; }
.gap-x-17 { column-gap: 17px; }
.gap-y-17 { row-gap: 17px; }
.gap-18   { gap: 18px; }
.gap-x-18 { column-gap: 18px; }
.gap-y-18 { row-gap: 18px; }
.gap-19   { gap: 19px; }
.gap-x-19 { column-gap: 19px; }
.gap-y-19 { row-gap: 19px; }
.gap-20   { gap: 20px; }
.gap-x-20 { column-gap: 20px; }
.gap-y-20 { row-gap: 20px; }
.gap-21   { gap: 21px; }
.gap-x-21 { column-gap: 21px; }
.gap-y-21 { row-gap: 21px; }
.gap-22   { gap: 22px; }
.gap-x-22 { column-gap: 22px; }
.gap-y-22 { row-gap: 22px; }
.gap-23   { gap: 23px; }
.gap-x-23 { column-gap: 23px; }
.gap-y-23 { row-gap: 23px; }
.gap-24   { gap: 24px; }
.gap-x-24 { column-gap: 24px; }
.gap-y-24 { row-gap: 24px; }
.gap-25   { gap: 25px; }
.gap-x-25 { column-gap: 25px; }
.gap-y-25 { row-gap: 25px; }
.gap-26   { gap: 26px; }
.gap-x-26 { column-gap: 26px; }
.gap-y-26 { row-gap: 26px; }
.gap-27   { gap: 27px; }
.gap-x-27 { column-gap: 27px; }
.gap-y-27 { row-gap: 27px; }
.gap-28   { gap: 28px; }
.gap-x-28 { column-gap: 28px; }
.gap-y-28 { row-gap: 28px; }
.gap-29   { gap: 29px; }
.gap-x-29 { column-gap: 29px; }
.gap-y-29 { row-gap: 29px; }
.gap-30   { gap: 30px; }
.gap-x-30 { column-gap: 30px; }
.gap-y-30 { row-gap: 30px; }
.gap-31   { gap: 31px; }
.gap-x-31 { column-gap: 31px; }
.gap-y-31 { row-gap: 31px; }
.gap-32   { gap: 32px; }
.gap-x-32 { column-gap: 32px; }
.gap-y-32 { row-gap: 32px; }
.gap-33   { gap: 33px; }
.gap-x-33 { column-gap: 33px; }
.gap-y-33 { row-gap: 33px; }
.gap-34   { gap: 34px; }
.gap-x-34 { column-gap: 34px; }
.gap-y-34 { row-gap: 34px; }
.gap-35   { gap: 35px; }
.gap-x-35 { column-gap: 35px; }
.gap-y-35 { row-gap: 35px; }
.gap-36   { gap: 36px; }
.gap-x-36 { column-gap: 36px; }
.gap-y-36 { row-gap: 36px; }
.gap-37   { gap: 37px; }
.gap-x-37 { column-gap: 37px; }
.gap-y-37 { row-gap: 37px; }
.gap-38   { gap: 38px; }
.gap-x-38 { column-gap: 38px; }
.gap-y-38 { row-gap: 38px; }
.gap-39   { gap: 39px; }
.gap-x-39 { column-gap: 39px; }
.gap-y-39 { row-gap: 39px; }
.gap-40   { gap: 40px; }
.gap-x-40 { column-gap: 40px; }
.gap-y-40 { row-gap: 40px; }
.gap-41   { gap: 41px; }
.gap-x-41 { column-gap: 41px; }
.gap-y-41 { row-gap: 41px; }
.gap-42   { gap: 42px; }
.gap-x-42 { column-gap: 42px; }
.gap-y-42 { row-gap: 42px; }
.gap-43   { gap: 43px; }
.gap-x-43 { column-gap: 43px; }
.gap-y-43 { row-gap: 43px; }
.gap-44   { gap: 44px; }
.gap-x-44 { column-gap: 44px; }
.gap-y-44 { row-gap: 44px; }
.gap-45   { gap: 45px; }
.gap-x-45 { column-gap: 45px; }
.gap-y-45 { row-gap: 45px; }
.gap-46   { gap: 46px; }
.gap-x-46 { column-gap: 46px; }
.gap-y-46 { row-gap: 46px; }
.gap-47   { gap: 47px; }
.gap-x-47 { column-gap: 47px; }
.gap-y-47 { row-gap: 47px; }
.gap-48   { gap: 48px; }
.gap-x-48 { column-gap: 48px; }
.gap-y-48 { row-gap: 48px; }
.gap-49   { gap: 49px; }
.gap-x-49 { column-gap: 49px; }
.gap-y-49 { row-gap: 49px; }
.gap-50   { gap: 50px; }
.gap-x-50 { column-gap: 50px; }
.gap-y-50 { row-gap: 50px; }
.gap-52   { gap: 52px; }
.gap-x-52 { column-gap: 52px; }
.gap-y-52 { row-gap: 52px; }
.gap-56   { gap: 56px; }
.gap-x-56 { column-gap: 56px; }
.gap-y-56 { row-gap: 56px; }
.gap-60   { gap: 60px; }
.gap-x-60 { column-gap: 60px; }
.gap-y-60 { row-gap: 60px; }
.gap-64   { gap: 64px; }
.gap-x-64 { column-gap: 64px; }
.gap-y-64 { row-gap: 64px; }
.gap-68   { gap: 68px; }
.gap-x-68 { column-gap: 68px; }
.gap-y-68 { row-gap: 68px; }
.gap-72   { gap: 72px; }
.gap-x-72 { column-gap: 72px; }
.gap-y-72 { row-gap: 72px; }
.gap-76   { gap: 76px; }
.gap-x-76 { column-gap: 76px; }
.gap-y-76 { row-gap: 76px; }
.gap-80   { gap: 80px; }
.gap-x-80 { column-gap: 80px; }
.gap-y-80 { row-gap: 80px; }
.gap-84   { gap: 84px; }
.gap-x-84 { column-gap: 84px; }
.gap-y-84 { row-gap: 84px; }
.gap-88   { gap: 88px; }
.gap-x-88 { column-gap: 88px; }
.gap-y-88 { row-gap: 88px; }
.gap-92   { gap: 92px; }
.gap-x-92 { column-gap: 92px; }
.gap-y-92 { row-gap: 92px; }
.gap-96   { gap: 96px; }
.gap-x-96 { column-gap: 96px; }
.gap-y-96 { row-gap: 96px; }
.gap-100   { gap: 100px; }
.gap-x-100 { column-gap: 100px; }
.gap-y-100 { row-gap: 100px; }
.gap-104   { gap: 104px; }
.gap-x-104 { column-gap: 104px; }
.gap-y-104 { row-gap: 104px; }
.gap-108   { gap: 108px; }
.gap-x-108 { column-gap: 108px; }
.gap-y-108 { row-gap: 108px; }
.gap-112   { gap: 112px; }
.gap-x-112 { column-gap: 112px; }
.gap-y-112 { row-gap: 112px; }
.gap-116   { gap: 116px; }
.gap-x-116 { column-gap: 116px; }
.gap-y-116 { row-gap: 116px; }
.gap-120   { gap: 120px; }
.gap-x-120 { column-gap: 120px; }
.gap-y-120 { row-gap: 120px; }
.gap-124   { gap: 124px; }
.gap-x-124 { column-gap: 124px; }
.gap-y-124 { row-gap: 124px; }
.gap-128   { gap: 128px; }
.gap-x-128 { column-gap: 128px; }
.gap-y-128 { row-gap: 128px; }
.gap-132   { gap: 132px; }
.gap-x-132 { column-gap: 132px; }
.gap-y-132 { row-gap: 132px; }
.gap-136   { gap: 136px; }
.gap-x-136 { column-gap: 136px; }
.gap-y-136 { row-gap: 136px; }
.gap-140   { gap: 140px; }
.gap-x-140 { column-gap: 140px; }
.gap-y-140 { row-gap: 140px; }
.gap-144   { gap: 144px; }
.gap-x-144 { column-gap: 144px; }
.gap-y-144 { row-gap: 144px; }
.gap-148   { gap: 148px; }
.gap-x-148 { column-gap: 148px; }
.gap-y-148 { row-gap: 148px; }
.gap-152   { gap: 152px; }
.gap-x-152 { column-gap: 152px; }
.gap-y-152 { row-gap: 152px; }
.gap-156   { gap: 156px; }
.gap-x-156 { column-gap: 156px; }
.gap-y-156 { row-gap: 156px; }
.gap-160   { gap: 160px; }
.gap-x-160 { column-gap: 160px; }
.gap-y-160 { row-gap: 160px; }
.gap-164   { gap: 164px; }
.gap-x-164 { column-gap: 164px; }
.gap-y-164 { row-gap: 164px; }
.gap-168   { gap: 168px; }
.gap-x-168 { column-gap: 168px; }
.gap-y-168 { row-gap: 168px; }
.gap-172   { gap: 172px; }
.gap-x-172 { column-gap: 172px; }
.gap-y-172 { row-gap: 172px; }
.gap-176   { gap: 176px; }
.gap-x-176 { column-gap: 176px; }
.gap-y-176 { row-gap: 176px; }
.gap-180   { gap: 180px; }
.gap-x-180 { column-gap: 180px; }
.gap-y-180 { row-gap: 180px; }
.gap-184   { gap: 184px; }
.gap-x-184 { column-gap: 184px; }
.gap-y-184 { row-gap: 184px; }
.gap-188   { gap: 188px; }
.gap-x-188 { column-gap: 188px; }
.gap-y-188 { row-gap: 188px; }
.gap-192   { gap: 192px; }
.gap-x-192 { column-gap: 192px; }
.gap-y-192 { row-gap: 192px; }
.gap-196   { gap: 196px; }
.gap-x-196 { column-gap: 196px; }
.gap-y-196 { row-gap: 196px; }
.gap-200   { gap: 200px; }
.gap-x-200 { column-gap: 200px; }
.gap-y-200 { row-gap: 200px; }
.gap-220   { gap: 220px; }
.gap-x-220 { column-gap: 220px; }
.gap-y-220 { row-gap: 220px; }
.gap-240   { gap: 240px; }
.gap-x-240 { column-gap: 240px; }
.gap-y-240 { row-gap: 240px; }
.gap-256   { gap: 256px; }
.gap-x-256 { column-gap: 256px; }
.gap-y-256 { row-gap: 256px; }
.gap-280   { gap: 280px; }
.gap-x-280 { column-gap: 280px; }
.gap-y-280 { row-gap: 280px; }
.gap-320   { gap: 320px; }
.gap-x-320 { column-gap: 320px; }
.gap-y-320 { row-gap: 320px; }
.gap-360   { gap: 360px; }
.gap-x-360 { column-gap: 360px; }
.gap-y-360 { row-gap: 360px; }
.gap-384   { gap: 384px; }
.gap-x-384 { column-gap: 384px; }
.gap-y-384 { row-gap: 384px; }
.gap-400   { gap: 400px; }
.gap-x-400 { column-gap: 400px; }
.gap-y-400 { row-gap: 400px; }
.gap-448   { gap: 448px; }
.gap-x-448 { column-gap: 448px; }
.gap-y-448 { row-gap: 448px; }
.gap-512   { gap: 512px; }
.gap-x-512 { column-gap: 512px; }
.gap-y-512 { row-gap: 512px; }
.gap-640   { gap: 640px; }
.gap-x-640 { column-gap: 640px; }
.gap-y-640 { row-gap: 640px; }
.gap-768   { gap: 768px; }
.gap-x-768 { column-gap: 768px; }
.gap-y-768 { row-gap: 768px; }
.gap-1024   { gap: 1024px; }
.gap-x-1024 { column-gap: 1024px; }
.gap-y-1024 { row-gap: 1024px; }

/* ── Width ── */
.set-width-0 { width: 0px; }
.set-width-1 { width: 1px; }
.set-width-2 { width: 2px; }
.set-width-3 { width: 3px; }
.set-width-4 { width: 4px; }
.set-width-5 { width: 5px; }
.set-width-6 { width: 6px; }
.set-width-7 { width: 7px; }
.set-width-8 { width: 8px; }
.set-width-9 { width: 9px; }
.set-width-10 { width: 10px; }
.set-width-11 { width: 11px; }
.set-width-12 { width: 12px; }
.set-width-13 { width: 13px; }
.set-width-14 { width: 14px; }
.set-width-15 { width: 15px; }
.set-width-16 { width: 16px; }
.set-width-17 { width: 17px; }
.set-width-18 { width: 18px; }
.set-width-19 { width: 19px; }
.set-width-20 { width: 20px; }
.set-width-21 { width: 21px; }
.set-width-22 { width: 22px; }
.set-width-23 { width: 23px; }
.set-width-24 { width: 24px; }
.set-width-25 { width: 25px; }
.set-width-26 { width: 26px; }
.set-width-27 { width: 27px; }
.set-width-28 { width: 28px; }
.set-width-29 { width: 29px; }
.set-width-30 { width: 30px; }
.set-width-31 { width: 31px; }
.set-width-32 { width: 32px; }
.set-width-33 { width: 33px; }
.set-width-34 { width: 34px; }
.set-width-35 { width: 35px; }
.set-width-36 { width: 36px; }
.set-width-37 { width: 37px; }
.set-width-38 { width: 38px; }
.set-width-39 { width: 39px; }
.set-width-40 { width: 40px; }
.set-width-41 { width: 41px; }
.set-width-42 { width: 42px; }
.set-width-43 { width: 43px; }
.set-width-44 { width: 44px; }
.set-width-45 { width: 45px; }
.set-width-46 { width: 46px; }
.set-width-47 { width: 47px; }
.set-width-48 { width: 48px; }
.set-width-49 { width: 49px; }
.set-width-50 { width: 50px; }
.set-width-52 { width: 52px; }
.set-width-56 { width: 56px; }
.set-width-60 { width: 60px; }
.set-width-64 { width: 64px; }
.set-width-68 { width: 68px; }
.set-width-72 { width: 72px; }
.set-width-76 { width: 76px; }
.set-width-80 { width: 80px; }
.set-width-84 { width: 84px; }
.set-width-88 { width: 88px; }
.set-width-92 { width: 92px; }
.set-width-96 { width: 96px; }
.set-width-100 { width: 100px; }
.set-width-104 { width: 104px; }
.set-width-108 { width: 108px; }
.set-width-112 { width: 112px; }
.set-width-116 { width: 116px; }
.set-width-120 { width: 120px; }
.set-width-124 { width: 124px; }
.set-width-128 { width: 128px; }
.set-width-132 { width: 132px; }
.set-width-136 { width: 136px; }
.set-width-140 { width: 140px; }
.set-width-144 { width: 144px; }
.set-width-148 { width: 148px; }
.set-width-152 { width: 152px; }
.set-width-156 { width: 156px; }
.set-width-160 { width: 160px; }
.set-width-164 { width: 164px; }
.set-width-168 { width: 168px; }
.set-width-172 { width: 172px; }
.set-width-176 { width: 176px; }
.set-width-180 { width: 180px; }
.set-width-184 { width: 184px; }
.set-width-188 { width: 188px; }
.set-width-192 { width: 192px; }
.set-width-196 { width: 196px; }
.set-width-200 { width: 200px; }
.set-width-220 { width: 220px; }
.set-width-240 { width: 240px; }
.set-width-256 { width: 256px; }
.set-width-280 { width: 280px; }
.set-width-320 { width: 320px; }
.set-width-360 { width: 360px; }
.set-width-384 { width: 384px; }
.set-width-400 { width: 400px; }
.set-width-448 { width: 448px; }
.set-width-512 { width: 512px; }
.set-width-640 { width: 640px; }
.set-width-768 { width: 768px; }
.set-width-1024 { width: 1024px; }
.set-width-1-of-2 { width: 50%; }
.set-width-1-of-3 { width: 33.333333%; }
.set-width-1-of-4 { width: 25%; }
.set-width-1-of-5 { width: 20%; }
.set-width-1-of-6 { width: 16.666667%; }
.set-width-1-of-12 { width: 8.333333%; }
.set-width-2-of-3 { width: 66.666667%; }
.set-width-2-of-4 { width: 50%; }
.set-width-2-of-5 { width: 40%; }
.set-width-2-of-6 { width: 33.333333%; }
.set-width-2-of-12 { width: 16.666667%; }
.set-width-3-of-4 { width: 75%; }
.set-width-3-of-5 { width: 60%; }
.set-width-3-of-6 { width: 50%; }
.set-width-3-of-12 { width: 25%; }
.set-width-4-of-5 { width: 80%; }
.set-width-4-of-6 { width: 66.666667%; }
.set-width-4-of-12 { width: 33.333333%; }
.set-width-5-of-6 { width: 83.333333%; }
.set-width-5-of-12 { width: 41.666667%; }
.set-width-6-of-12 { width: 50%; }
.set-width-7-of-12 { width: 58.333333%; }
.set-width-8-of-12 { width: 66.666667%; }
.set-width-9-of-12 { width: 75%; }
.set-width-10-of-12 { width: 83.333333%; }
.set-width-11-of-12 { width: 91.666667%; }
.set-width-full   { width: 100%; }
.set-width-screen { width: 100vw; }
.set-width-auto   { width: auto; }
.set-width-min    { width: min-content; }
.set-width-max    { width: max-content; }
.set-width-fit    { width: fit-content; }

/* ── Height ── */
.set-height-0 { height: 0px; }
.set-height-1 { height: 1px; }
.set-height-2 { height: 2px; }
.set-height-3 { height: 3px; }
.set-height-4 { height: 4px; }
.set-height-5 { height: 5px; }
.set-height-6 { height: 6px; }
.set-height-7 { height: 7px; }
.set-height-8 { height: 8px; }
.set-height-9 { height: 9px; }
.set-height-10 { height: 10px; }
.set-height-11 { height: 11px; }
.set-height-12 { height: 12px; }
.set-height-13 { height: 13px; }
.set-height-14 { height: 14px; }
.set-height-15 { height: 15px; }
.set-height-16 { height: 16px; }
.set-height-17 { height: 17px; }
.set-height-18 { height: 18px; }
.set-height-19 { height: 19px; }
.set-height-20 { height: 20px; }
.set-height-21 { height: 21px; }
.set-height-22 { height: 22px; }
.set-height-23 { height: 23px; }
.set-height-24 { height: 24px; }
.set-height-25 { height: 25px; }
.set-height-26 { height: 26px; }
.set-height-27 { height: 27px; }
.set-height-28 { height: 28px; }
.set-height-29 { height: 29px; }
.set-height-30 { height: 30px; }
.set-height-31 { height: 31px; }
.set-height-32 { height: 32px; }
.set-height-33 { height: 33px; }
.set-height-34 { height: 34px; }
.set-height-35 { height: 35px; }
.set-height-36 { height: 36px; }
.set-height-37 { height: 37px; }
.set-height-38 { height: 38px; }
.set-height-39 { height: 39px; }
.set-height-40 { height: 40px; }
.set-height-41 { height: 41px; }
.set-height-42 { height: 42px; }
.set-height-43 { height: 43px; }
.set-height-44 { height: 44px; }
.set-height-45 { height: 45px; }
.set-height-46 { height: 46px; }
.set-height-47 { height: 47px; }
.set-height-48 { height: 48px; }
.set-height-49 { height: 49px; }
.set-height-50 { height: 50px; }
.set-height-52 { height: 52px; }
.set-height-56 { height: 56px; }
.set-height-60 { height: 60px; }
.set-height-64 { height: 64px; }
.set-height-68 { height: 68px; }
.set-height-72 { height: 72px; }
.set-height-76 { height: 76px; }
.set-height-80 { height: 80px; }
.set-height-84 { height: 84px; }
.set-height-88 { height: 88px; }
.set-height-92 { height: 92px; }
.set-height-96 { height: 96px; }
.set-height-100 { height: 100px; }
.set-height-104 { height: 104px; }
.set-height-108 { height: 108px; }
.set-height-112 { height: 112px; }
.set-height-116 { height: 116px; }
.set-height-120 { height: 120px; }
.set-height-124 { height: 124px; }
.set-height-128 { height: 128px; }
.set-height-132 { height: 132px; }
.set-height-136 { height: 136px; }
.set-height-140 { height: 140px; }
.set-height-144 { height: 144px; }
.set-height-148 { height: 148px; }
.set-height-152 { height: 152px; }
.set-height-156 { height: 156px; }
.set-height-160 { height: 160px; }
.set-height-164 { height: 164px; }
.set-height-168 { height: 168px; }
.set-height-172 { height: 172px; }
.set-height-176 { height: 176px; }
.set-height-180 { height: 180px; }
.set-height-184 { height: 184px; }
.set-height-188 { height: 188px; }
.set-height-192 { height: 192px; }
.set-height-196 { height: 196px; }
.set-height-200 { height: 200px; }
.set-height-220 { height: 220px; }
.set-height-240 { height: 240px; }
.set-height-256 { height: 256px; }
.set-height-280 { height: 280px; }
.set-height-320 { height: 320px; }
.set-height-360 { height: 360px; }
.set-height-384 { height: 384px; }
.set-height-400 { height: 400px; }
.set-height-448 { height: 448px; }
.set-height-512 { height: 512px; }
.set-height-640 { height: 640px; }
.set-height-768 { height: 768px; }
.set-height-1024 { height: 1024px; }
.set-height-full   { height: 100%; }
.set-height-screen { height: 100vh; }
.set-height-auto   { height: auto; }
.set-height-min    { height: min-content; }
.set-height-max    { height: max-content; }
.set-height-fit    { height: fit-content; }

/* ── Min/Max Width/Height ── */
.min-width-0  { min-width: 0px; }
.max-width-0  { max-width: 0px; }
.min-height-0 { min-height: 0px; }
.max-height-0 { max-height: 0px; }
.min-width-1  { min-width: 1px; }
.max-width-1  { max-width: 1px; }
.min-height-1 { min-height: 1px; }
.max-height-1 { max-height: 1px; }
.min-width-2  { min-width: 2px; }
.max-width-2  { max-width: 2px; }
.min-height-2 { min-height: 2px; }
.max-height-2 { max-height: 2px; }
.min-width-3  { min-width: 3px; }
.max-width-3  { max-width: 3px; }
.min-height-3 { min-height: 3px; }
.max-height-3 { max-height: 3px; }
.min-width-4  { min-width: 4px; }
.max-width-4  { max-width: 4px; }
.min-height-4 { min-height: 4px; }
.max-height-4 { max-height: 4px; }
.min-width-5  { min-width: 5px; }
.max-width-5  { max-width: 5px; }
.min-height-5 { min-height: 5px; }
.max-height-5 { max-height: 5px; }
.min-width-6  { min-width: 6px; }
.max-width-6  { max-width: 6px; }
.min-height-6 { min-height: 6px; }
.max-height-6 { max-height: 6px; }
.min-width-7  { min-width: 7px; }
.max-width-7  { max-width: 7px; }
.min-height-7 { min-height: 7px; }
.max-height-7 { max-height: 7px; }
.min-width-8  { min-width: 8px; }
.max-width-8  { max-width: 8px; }
.min-height-8 { min-height: 8px; }
.max-height-8 { max-height: 8px; }
.min-width-9  { min-width: 9px; }
.max-width-9  { max-width: 9px; }
.min-height-9 { min-height: 9px; }
.max-height-9 { max-height: 9px; }
.min-width-10  { min-width: 10px; }
.max-width-10  { max-width: 10px; }
.min-height-10 { min-height: 10px; }
.max-height-10 { max-height: 10px; }
.min-width-11  { min-width: 11px; }
.max-width-11  { max-width: 11px; }
.min-height-11 { min-height: 11px; }
.max-height-11 { max-height: 11px; }
.min-width-12  { min-width: 12px; }
.max-width-12  { max-width: 12px; }
.min-height-12 { min-height: 12px; }
.max-height-12 { max-height: 12px; }
.min-width-13  { min-width: 13px; }
.max-width-13  { max-width: 13px; }
.min-height-13 { min-height: 13px; }
.max-height-13 { max-height: 13px; }
.min-width-14  { min-width: 14px; }
.max-width-14  { max-width: 14px; }
.min-height-14 { min-height: 14px; }
.max-height-14 { max-height: 14px; }
.min-width-15  { min-width: 15px; }
.max-width-15  { max-width: 15px; }
.min-height-15 { min-height: 15px; }
.max-height-15 { max-height: 15px; }
.min-width-16  { min-width: 16px; }
.max-width-16  { max-width: 16px; }
.min-height-16 { min-height: 16px; }
.max-height-16 { max-height: 16px; }
.min-width-17  { min-width: 17px; }
.max-width-17  { max-width: 17px; }
.min-height-17 { min-height: 17px; }
.max-height-17 { max-height: 17px; }
.min-width-18  { min-width: 18px; }
.max-width-18  { max-width: 18px; }
.min-height-18 { min-height: 18px; }
.max-height-18 { max-height: 18px; }
.min-width-19  { min-width: 19px; }
.max-width-19  { max-width: 19px; }
.min-height-19 { min-height: 19px; }
.max-height-19 { max-height: 19px; }
.min-width-20  { min-width: 20px; }
.max-width-20  { max-width: 20px; }
.min-height-20 { min-height: 20px; }
.max-height-20 { max-height: 20px; }
.min-width-21  { min-width: 21px; }
.max-width-21  { max-width: 21px; }
.min-height-21 { min-height: 21px; }
.max-height-21 { max-height: 21px; }
.min-width-22  { min-width: 22px; }
.max-width-22  { max-width: 22px; }
.min-height-22 { min-height: 22px; }
.max-height-22 { max-height: 22px; }
.min-width-23  { min-width: 23px; }
.max-width-23  { max-width: 23px; }
.min-height-23 { min-height: 23px; }
.max-height-23 { max-height: 23px; }
.min-width-24  { min-width: 24px; }
.max-width-24  { max-width: 24px; }
.min-height-24 { min-height: 24px; }
.max-height-24 { max-height: 24px; }
.min-width-25  { min-width: 25px; }
.max-width-25  { max-width: 25px; }
.min-height-25 { min-height: 25px; }
.max-height-25 { max-height: 25px; }
.min-width-26  { min-width: 26px; }
.max-width-26  { max-width: 26px; }
.min-height-26 { min-height: 26px; }
.max-height-26 { max-height: 26px; }
.min-width-27  { min-width: 27px; }
.max-width-27  { max-width: 27px; }
.min-height-27 { min-height: 27px; }
.max-height-27 { max-height: 27px; }
.min-width-28  { min-width: 28px; }
.max-width-28  { max-width: 28px; }
.min-height-28 { min-height: 28px; }
.max-height-28 { max-height: 28px; }
.min-width-29  { min-width: 29px; }
.max-width-29  { max-width: 29px; }
.min-height-29 { min-height: 29px; }
.max-height-29 { max-height: 29px; }
.min-width-30  { min-width: 30px; }
.max-width-30  { max-width: 30px; }
.min-height-30 { min-height: 30px; }
.max-height-30 { max-height: 30px; }
.min-width-31  { min-width: 31px; }
.max-width-31  { max-width: 31px; }
.min-height-31 { min-height: 31px; }
.max-height-31 { max-height: 31px; }
.min-width-32  { min-width: 32px; }
.max-width-32  { max-width: 32px; }
.min-height-32 { min-height: 32px; }
.max-height-32 { max-height: 32px; }
.min-width-33  { min-width: 33px; }
.max-width-33  { max-width: 33px; }
.min-height-33 { min-height: 33px; }
.max-height-33 { max-height: 33px; }
.min-width-34  { min-width: 34px; }
.max-width-34  { max-width: 34px; }
.min-height-34 { min-height: 34px; }
.max-height-34 { max-height: 34px; }
.min-width-35  { min-width: 35px; }
.max-width-35  { max-width: 35px; }
.min-height-35 { min-height: 35px; }
.max-height-35 { max-height: 35px; }
.min-width-36  { min-width: 36px; }
.max-width-36  { max-width: 36px; }
.min-height-36 { min-height: 36px; }
.max-height-36 { max-height: 36px; }
.min-width-37  { min-width: 37px; }
.max-width-37  { max-width: 37px; }
.min-height-37 { min-height: 37px; }
.max-height-37 { max-height: 37px; }
.min-width-38  { min-width: 38px; }
.max-width-38  { max-width: 38px; }
.min-height-38 { min-height: 38px; }
.max-height-38 { max-height: 38px; }
.min-width-39  { min-width: 39px; }
.max-width-39  { max-width: 39px; }
.min-height-39 { min-height: 39px; }
.max-height-39 { max-height: 39px; }
.min-width-40  { min-width: 40px; }
.max-width-40  { max-width: 40px; }
.min-height-40 { min-height: 40px; }
.max-height-40 { max-height: 40px; }
.min-width-41  { min-width: 41px; }
.max-width-41  { max-width: 41px; }
.min-height-41 { min-height: 41px; }
.max-height-41 { max-height: 41px; }
.min-width-42  { min-width: 42px; }
.max-width-42  { max-width: 42px; }
.min-height-42 { min-height: 42px; }
.max-height-42 { max-height: 42px; }
.min-width-43  { min-width: 43px; }
.max-width-43  { max-width: 43px; }
.min-height-43 { min-height: 43px; }
.max-height-43 { max-height: 43px; }
.min-width-44  { min-width: 44px; }
.max-width-44  { max-width: 44px; }
.min-height-44 { min-height: 44px; }
.max-height-44 { max-height: 44px; }
.min-width-45  { min-width: 45px; }
.max-width-45  { max-width: 45px; }
.min-height-45 { min-height: 45px; }
.max-height-45 { max-height: 45px; }
.min-width-46  { min-width: 46px; }
.max-width-46  { max-width: 46px; }
.min-height-46 { min-height: 46px; }
.max-height-46 { max-height: 46px; }
.min-width-47  { min-width: 47px; }
.max-width-47  { max-width: 47px; }
.min-height-47 { min-height: 47px; }
.max-height-47 { max-height: 47px; }
.min-width-48  { min-width: 48px; }
.max-width-48  { max-width: 48px; }
.min-height-48 { min-height: 48px; }
.max-height-48 { max-height: 48px; }
.min-width-49  { min-width: 49px; }
.max-width-49  { max-width: 49px; }
.min-height-49 { min-height: 49px; }
.max-height-49 { max-height: 49px; }
.min-width-50  { min-width: 50px; }
.max-width-50  { max-width: 50px; }
.min-height-50 { min-height: 50px; }
.max-height-50 { max-height: 50px; }
.min-width-52  { min-width: 52px; }
.max-width-52  { max-width: 52px; }
.min-height-52 { min-height: 52px; }
.max-height-52 { max-height: 52px; }
.min-width-56  { min-width: 56px; }
.max-width-56  { max-width: 56px; }
.min-height-56 { min-height: 56px; }
.max-height-56 { max-height: 56px; }
.min-width-60  { min-width: 60px; }
.max-width-60  { max-width: 60px; }
.min-height-60 { min-height: 60px; }
.max-height-60 { max-height: 60px; }
.min-width-64  { min-width: 64px; }
.max-width-64  { max-width: 64px; }
.min-height-64 { min-height: 64px; }
.max-height-64 { max-height: 64px; }
.min-width-68  { min-width: 68px; }
.max-width-68  { max-width: 68px; }
.min-height-68 { min-height: 68px; }
.max-height-68 { max-height: 68px; }
.min-width-72  { min-width: 72px; }
.max-width-72  { max-width: 72px; }
.min-height-72 { min-height: 72px; }
.max-height-72 { max-height: 72px; }
.min-width-76  { min-width: 76px; }
.max-width-76  { max-width: 76px; }
.min-height-76 { min-height: 76px; }
.max-height-76 { max-height: 76px; }
.min-width-80  { min-width: 80px; }
.max-width-80  { max-width: 80px; }
.min-height-80 { min-height: 80px; }
.max-height-80 { max-height: 80px; }
.min-width-84  { min-width: 84px; }
.max-width-84  { max-width: 84px; }
.min-height-84 { min-height: 84px; }
.max-height-84 { max-height: 84px; }
.min-width-88  { min-width: 88px; }
.max-width-88  { max-width: 88px; }
.min-height-88 { min-height: 88px; }
.max-height-88 { max-height: 88px; }
.min-width-92  { min-width: 92px; }
.max-width-92  { max-width: 92px; }
.min-height-92 { min-height: 92px; }
.max-height-92 { max-height: 92px; }
.min-width-96  { min-width: 96px; }
.max-width-96  { max-width: 96px; }
.min-height-96 { min-height: 96px; }
.max-height-96 { max-height: 96px; }
.min-width-100  { min-width: 100px; }
.max-width-100  { max-width: 100px; }
.min-height-100 { min-height: 100px; }
.max-height-100 { max-height: 100px; }
.min-width-104  { min-width: 104px; }
.max-width-104  { max-width: 104px; }
.min-height-104 { min-height: 104px; }
.max-height-104 { max-height: 104px; }
.min-width-108  { min-width: 108px; }
.max-width-108  { max-width: 108px; }
.min-height-108 { min-height: 108px; }
.max-height-108 { max-height: 108px; }
.min-width-112  { min-width: 112px; }
.max-width-112  { max-width: 112px; }
.min-height-112 { min-height: 112px; }
.max-height-112 { max-height: 112px; }
.min-width-116  { min-width: 116px; }
.max-width-116  { max-width: 116px; }
.min-height-116 { min-height: 116px; }
.max-height-116 { max-height: 116px; }
.min-width-120  { min-width: 120px; }
.max-width-120  { max-width: 120px; }
.min-height-120 { min-height: 120px; }
.max-height-120 { max-height: 120px; }
.min-width-124  { min-width: 124px; }
.max-width-124  { max-width: 124px; }
.min-height-124 { min-height: 124px; }
.max-height-124 { max-height: 124px; }
.min-width-128  { min-width: 128px; }
.max-width-128  { max-width: 128px; }
.min-height-128 { min-height: 128px; }
.max-height-128 { max-height: 128px; }
.min-width-132  { min-width: 132px; }
.max-width-132  { max-width: 132px; }
.min-height-132 { min-height: 132px; }
.max-height-132 { max-height: 132px; }
.min-width-136  { min-width: 136px; }
.max-width-136  { max-width: 136px; }
.min-height-136 { min-height: 136px; }
.max-height-136 { max-height: 136px; }
.min-width-140  { min-width: 140px; }
.max-width-140  { max-width: 140px; }
.min-height-140 { min-height: 140px; }
.max-height-140 { max-height: 140px; }
.min-width-144  { min-width: 144px; }
.max-width-144  { max-width: 144px; }
.min-height-144 { min-height: 144px; }
.max-height-144 { max-height: 144px; }
.min-width-148  { min-width: 148px; }
.max-width-148  { max-width: 148px; }
.min-height-148 { min-height: 148px; }
.max-height-148 { max-height: 148px; }
.min-width-152  { min-width: 152px; }
.max-width-152  { max-width: 152px; }
.min-height-152 { min-height: 152px; }
.max-height-152 { max-height: 152px; }
.min-width-156  { min-width: 156px; }
.max-width-156  { max-width: 156px; }
.min-height-156 { min-height: 156px; }
.max-height-156 { max-height: 156px; }
.min-width-160  { min-width: 160px; }
.max-width-160  { max-width: 160px; }
.min-height-160 { min-height: 160px; }
.max-height-160 { max-height: 160px; }
.min-width-164  { min-width: 164px; }
.max-width-164  { max-width: 164px; }
.min-height-164 { min-height: 164px; }
.max-height-164 { max-height: 164px; }
.min-width-168  { min-width: 168px; }
.max-width-168  { max-width: 168px; }
.min-height-168 { min-height: 168px; }
.max-height-168 { max-height: 168px; }
.min-width-172  { min-width: 172px; }
.max-width-172  { max-width: 172px; }
.min-height-172 { min-height: 172px; }
.max-height-172 { max-height: 172px; }
.min-width-176  { min-width: 176px; }
.max-width-176  { max-width: 176px; }
.min-height-176 { min-height: 176px; }
.max-height-176 { max-height: 176px; }
.min-width-180  { min-width: 180px; }
.max-width-180  { max-width: 180px; }
.min-height-180 { min-height: 180px; }
.max-height-180 { max-height: 180px; }
.min-width-184  { min-width: 184px; }
.max-width-184  { max-width: 184px; }
.min-height-184 { min-height: 184px; }
.max-height-184 { max-height: 184px; }
.min-width-188  { min-width: 188px; }
.max-width-188  { max-width: 188px; }
.min-height-188 { min-height: 188px; }
.max-height-188 { max-height: 188px; }
.min-width-192  { min-width: 192px; }
.max-width-192  { max-width: 192px; }
.min-height-192 { min-height: 192px; }
.max-height-192 { max-height: 192px; }
.min-width-196  { min-width: 196px; }
.max-width-196  { max-width: 196px; }
.min-height-196 { min-height: 196px; }
.max-height-196 { max-height: 196px; }
.min-width-200  { min-width: 200px; }
.max-width-200  { max-width: 200px; }
.min-height-200 { min-height: 200px; }
.max-height-200 { max-height: 200px; }
.min-width-220  { min-width: 220px; }
.max-width-220  { max-width: 220px; }
.min-height-220 { min-height: 220px; }
.max-height-220 { max-height: 220px; }
.min-width-240  { min-width: 240px; }
.max-width-240  { max-width: 240px; }
.min-height-240 { min-height: 240px; }
.max-height-240 { max-height: 240px; }
.min-width-256  { min-width: 256px; }
.max-width-256  { max-width: 256px; }
.min-height-256 { min-height: 256px; }
.max-height-256 { max-height: 256px; }
.min-width-280  { min-width: 280px; }
.max-width-280  { max-width: 280px; }
.min-height-280 { min-height: 280px; }
.max-height-280 { max-height: 280px; }
.min-width-320  { min-width: 320px; }
.max-width-320  { max-width: 320px; }
.min-height-320 { min-height: 320px; }
.max-height-320 { max-height: 320px; }
.min-width-360  { min-width: 360px; }
.max-width-360  { max-width: 360px; }
.min-height-360 { min-height: 360px; }
.max-height-360 { max-height: 360px; }
.min-width-384  { min-width: 384px; }
.max-width-384  { max-width: 384px; }
.min-height-384 { min-height: 384px; }
.max-height-384 { max-height: 384px; }
.min-width-400  { min-width: 400px; }
.max-width-400  { max-width: 400px; }
.min-height-400 { min-height: 400px; }
.max-height-400 { max-height: 400px; }
.min-width-448  { min-width: 448px; }
.max-width-448  { max-width: 448px; }
.min-height-448 { min-height: 448px; }
.max-height-448 { max-height: 448px; }
.min-width-512  { min-width: 512px; }
.max-width-512  { max-width: 512px; }
.min-height-512 { min-height: 512px; }
.max-height-512 { max-height: 512px; }
.min-width-full   { min-width: 100%; }
.max-width-full   { max-width: 100%; }
.min-width-screen { min-width: 100vw; }
.max-width-screen { max-width: 100vw; }
.min-height-full   { min-height: 100%; }
.max-height-full   { max-height: 100%; }
.min-height-screen { min-height: 100vh; }
.max-height-screen { max-height: 100vh; }
.min-width-none    { min-width: none; }
.max-width-none    { max-width: none; }

/* ── Border Width ── */
.add-border-0        { border: 0px solid; }
.add-border-top-0    { border-top: 0px solid; }
.add-border-bottom-0 { border-bottom: 0px solid; }
.add-border-left-0   { border-left: 0px solid; }
.add-border-right-0  { border-right: 0px solid; }
.add-border-x-0      { border-left: 0px solid; border-right: 0px solid; }
.add-border-y-0      { border-top: 0px solid; border-bottom: 0px solid; }
.add-border-1        { border: 1px solid; }
.add-border-top-1    { border-top: 1px solid; }
.add-border-bottom-1 { border-bottom: 1px solid; }
.add-border-left-1   { border-left: 1px solid; }
.add-border-right-1  { border-right: 1px solid; }
.add-border-x-1      { border-left: 1px solid; border-right: 1px solid; }
.add-border-y-1      { border-top: 1px solid; border-bottom: 1px solid; }
.add-border-2        { border: 2px solid; }
.add-border-top-2    { border-top: 2px solid; }
.add-border-bottom-2 { border-bottom: 2px solid; }
.add-border-left-2   { border-left: 2px solid; }
.add-border-right-2  { border-right: 2px solid; }
.add-border-x-2      { border-left: 2px solid; border-right: 2px solid; }
.add-border-y-2      { border-top: 2px solid; border-bottom: 2px solid; }
.add-border-3        { border: 3px solid; }
.add-border-top-3    { border-top: 3px solid; }
.add-border-bottom-3 { border-bottom: 3px solid; }
.add-border-left-3   { border-left: 3px solid; }
.add-border-right-3  { border-right: 3px solid; }
.add-border-x-3      { border-left: 3px solid; border-right: 3px solid; }
.add-border-y-3      { border-top: 3px solid; border-bottom: 3px solid; }
.add-border-4        { border: 4px solid; }
.add-border-top-4    { border-top: 4px solid; }
.add-border-bottom-4 { border-bottom: 4px solid; }
.add-border-left-4   { border-left: 4px solid; }
.add-border-right-4  { border-right: 4px solid; }
.add-border-x-4      { border-left: 4px solid; border-right: 4px solid; }
.add-border-y-4      { border-top: 4px solid; border-bottom: 4px solid; }
.add-border-5        { border: 5px solid; }
.add-border-top-5    { border-top: 5px solid; }
.add-border-bottom-5 { border-bottom: 5px solid; }
.add-border-left-5   { border-left: 5px solid; }
.add-border-right-5  { border-right: 5px solid; }
.add-border-x-5      { border-left: 5px solid; border-right: 5px solid; }
.add-border-y-5      { border-top: 5px solid; border-bottom: 5px solid; }
.add-border-6        { border: 6px solid; }
.add-border-top-6    { border-top: 6px solid; }
.add-border-bottom-6 { border-bottom: 6px solid; }
.add-border-left-6   { border-left: 6px solid; }
.add-border-right-6  { border-right: 6px solid; }
.add-border-x-6      { border-left: 6px solid; border-right: 6px solid; }
.add-border-y-6      { border-top: 6px solid; border-bottom: 6px solid; }
.add-border-8        { border: 8px solid; }
.add-border-top-8    { border-top: 8px solid; }
.add-border-bottom-8 { border-bottom: 8px solid; }
.add-border-left-8   { border-left: 8px solid; }
.add-border-right-8  { border-right: 8px solid; }
.add-border-x-8      { border-left: 8px solid; border-right: 8px solid; }
.add-border-y-8      { border-top: 8px solid; border-bottom: 8px solid; }
.add-border-10        { border: 10px solid; }
.add-border-top-10    { border-top: 10px solid; }
.add-border-bottom-10 { border-bottom: 10px solid; }
.add-border-left-10   { border-left: 10px solid; }
.add-border-right-10  { border-right: 10px solid; }
.add-border-x-10      { border-left: 10px solid; border-right: 10px solid; }
.add-border-y-10      { border-top: 10px solid; border-bottom: 10px solid; }
.add-border-12        { border: 12px solid; }
.add-border-top-12    { border-top: 12px solid; }
.add-border-bottom-12 { border-bottom: 12px solid; }
.add-border-left-12   { border-left: 12px solid; }
.add-border-right-12  { border-right: 12px solid; }
.add-border-x-12      { border-left: 12px solid; border-right: 12px solid; }
.add-border-y-12      { border-top: 12px solid; border-bottom: 12px solid; }
.add-border-16        { border: 16px solid; }
.add-border-top-16    { border-top: 16px solid; }
.add-border-bottom-16 { border-bottom: 16px solid; }
.add-border-left-16   { border-left: 16px solid; }
.add-border-right-16  { border-right: 16px solid; }
.add-border-x-16      { border-left: 16px solid; border-right: 16px solid; }
.add-border-y-16      { border-top: 16px solid; border-bottom: 16px solid; }
.add-border-20        { border: 20px solid; }
.add-border-top-20    { border-top: 20px solid; }
.add-border-bottom-20 { border-bottom: 20px solid; }
.add-border-left-20   { border-left: 20px solid; }
.add-border-right-20  { border-right: 20px solid; }
.add-border-x-20      { border-left: 20px solid; border-right: 20px solid; }
.add-border-y-20      { border-top: 20px solid; border-bottom: 20px solid; }
.add-border-24        { border: 24px solid; }
.add-border-top-24    { border-top: 24px solid; }
.add-border-bottom-24 { border-bottom: 24px solid; }
.add-border-left-24   { border-left: 24px solid; }
.add-border-right-24  { border-right: 24px solid; }
.add-border-x-24      { border-left: 24px solid; border-right: 24px solid; }
.add-border-y-24      { border-top: 24px solid; border-bottom: 24px solid; }
.add-border-28        { border: 28px solid; }
.add-border-top-28    { border-top: 28px solid; }
.add-border-bottom-28 { border-bottom: 28px solid; }
.add-border-left-28   { border-left: 28px solid; }
.add-border-right-28  { border-right: 28px solid; }
.add-border-x-28      { border-left: 28px solid; border-right: 28px solid; }
.add-border-y-28      { border-top: 28px solid; border-bottom: 28px solid; }
.add-border-32        { border: 32px solid; }
.add-border-top-32    { border-top: 32px solid; }
.add-border-bottom-32 { border-bottom: 32px solid; }
.add-border-left-32   { border-left: 32px solid; }
.add-border-right-32  { border-right: 32px solid; }
.add-border-x-32      { border-left: 32px solid; border-right: 32px solid; }
.add-border-y-32      { border-top: 32px solid; border-bottom: 32px solid; }
.add-border-40        { border: 40px solid; }
.add-border-top-40    { border-top: 40px solid; }
.add-border-bottom-40 { border-bottom: 40px solid; }
.add-border-left-40   { border-left: 40px solid; }
.add-border-right-40  { border-right: 40px solid; }
.add-border-x-40      { border-left: 40px solid; border-right: 40px solid; }
.add-border-y-40      { border-top: 40px solid; border-bottom: 40px solid; }
.add-border-48        { border: 48px solid; }
.add-border-top-48    { border-top: 48px solid; }
.add-border-bottom-48 { border-bottom: 48px solid; }
.add-border-left-48   { border-left: 48px solid; }
.add-border-right-48  { border-right: 48px solid; }
.add-border-x-48      { border-left: 48px solid; border-right: 48px solid; }
.add-border-y-48      { border-top: 48px solid; border-bottom: 48px solid; }

/* ── Border Style ── */
.border-solid  { border-style: solid; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }
.border-double { border-style: double; }
.border-hidden { border-style: hidden; }
.border-none   { border-style: none; }

/* ── Border Radius ── */
.round-corners-0 { border-radius: 0px; }
.round-corners-2 { border-radius: 2px; }
.round-corners-4 { border-radius: 4px; }
.round-corners-6 { border-radius: 6px; }
.round-corners-8 { border-radius: 8px; }
.round-corners-10 { border-radius: 10px; }
.round-corners-12 { border-radius: 12px; }
.round-corners-14 { border-radius: 14px; }
.round-corners-16 { border-radius: 16px; }
.round-corners-18 { border-radius: 18px; }
.round-corners-20 { border-radius: 20px; }
.round-corners-24 { border-radius: 24px; }
.round-corners-28 { border-radius: 28px; }
.round-corners-32 { border-radius: 32px; }
.round-corners-36 { border-radius: 36px; }
.round-corners-40 { border-radius: 40px; }
.round-corners-48 { border-radius: 48px; }
.round-corners-56 { border-radius: 56px; }
.round-corners-64 { border-radius: 64px; }
.round-corners-72 { border-radius: 72px; }
.round-corners-96 { border-radius: 96px; }
.round-corners-128 { border-radius: 128px; }
.make-circle          { border-radius: 50%; }
.make-pill            { border-radius: 9999px; }
.round-top-0       { border-top-left-radius: 0; border-top-right-radius: 0; }
.round-top-2    { border-top-left-radius: 2px; border-top-right-radius: 2px; }
.round-bottom-2 { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; }
.round-left-2   { border-top-left-radius: 2px; border-bottom-left-radius: 2px; }
.round-right-2  { border-top-right-radius: 2px; border-bottom-right-radius: 2px; }
.round-top-4    { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.round-bottom-4 { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.round-left-4   { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.round-right-4  { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.round-top-6    { border-top-left-radius: 6px; border-top-right-radius: 6px; }
.round-bottom-6 { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.round-left-6   { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.round-right-6  { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.round-top-8    { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.round-bottom-8 { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.round-left-8   { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.round-right-8  { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.round-top-10    { border-top-left-radius: 10px; border-top-right-radius: 10px; }
.round-bottom-10 { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.round-left-10   { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.round-right-10  { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.round-top-12    { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.round-bottom-12 { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.round-left-12   { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.round-right-12  { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.round-top-14    { border-top-left-radius: 14px; border-top-right-radius: 14px; }
.round-bottom-14 { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
.round-left-14   { border-top-left-radius: 14px; border-bottom-left-radius: 14px; }
.round-right-14  { border-top-right-radius: 14px; border-bottom-right-radius: 14px; }
.round-top-16    { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.round-bottom-16 { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
.round-left-16   { border-top-left-radius: 16px; border-bottom-left-radius: 16px; }
.round-right-16  { border-top-right-radius: 16px; border-bottom-right-radius: 16px; }
.round-top-18    { border-top-left-radius: 18px; border-top-right-radius: 18px; }
.round-bottom-18 { border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; }
.round-left-18   { border-top-left-radius: 18px; border-bottom-left-radius: 18px; }
.round-right-18  { border-top-right-radius: 18px; border-bottom-right-radius: 18px; }
.round-top-20    { border-top-left-radius: 20px; border-top-right-radius: 20px; }
.round-bottom-20 { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.round-left-20   { border-top-left-radius: 20px; border-bottom-left-radius: 20px; }
.round-right-20  { border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
.round-top-24    { border-top-left-radius: 24px; border-top-right-radius: 24px; }
.round-bottom-24 { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
.round-left-24   { border-top-left-radius: 24px; border-bottom-left-radius: 24px; }
.round-right-24  { border-top-right-radius: 24px; border-bottom-right-radius: 24px; }
.round-top-28    { border-top-left-radius: 28px; border-top-right-radius: 28px; }
.round-bottom-28 { border-bottom-left-radius: 28px; border-bottom-right-radius: 28px; }
.round-left-28   { border-top-left-radius: 28px; border-bottom-left-radius: 28px; }
.round-right-28  { border-top-right-radius: 28px; border-bottom-right-radius: 28px; }
.round-top-32    { border-top-left-radius: 32px; border-top-right-radius: 32px; }
.round-bottom-32 { border-bottom-left-radius: 32px; border-bottom-right-radius: 32px; }
.round-left-32   { border-top-left-radius: 32px; border-bottom-left-radius: 32px; }
.round-right-32  { border-top-right-radius: 32px; border-bottom-right-radius: 32px; }
.round-top-36    { border-top-left-radius: 36px; border-top-right-radius: 36px; }
.round-bottom-36 { border-bottom-left-radius: 36px; border-bottom-right-radius: 36px; }
.round-left-36   { border-top-left-radius: 36px; border-bottom-left-radius: 36px; }
.round-right-36  { border-top-right-radius: 36px; border-bottom-right-radius: 36px; }
.round-top-40    { border-top-left-radius: 40px; border-top-right-radius: 40px; }
.round-bottom-40 { border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; }
.round-left-40   { border-top-left-radius: 40px; border-bottom-left-radius: 40px; }
.round-right-40  { border-top-right-radius: 40px; border-bottom-right-radius: 40px; }
.round-top-48    { border-top-left-radius: 48px; border-top-right-radius: 48px; }
.round-bottom-48 { border-bottom-left-radius: 48px; border-bottom-right-radius: 48px; }
.round-left-48   { border-top-left-radius: 48px; border-bottom-left-radius: 48px; }
.round-right-48  { border-top-right-radius: 48px; border-bottom-right-radius: 48px; }
.round-top-56    { border-top-left-radius: 56px; border-top-right-radius: 56px; }
.round-bottom-56 { border-bottom-left-radius: 56px; border-bottom-right-radius: 56px; }
.round-left-56   { border-top-left-radius: 56px; border-bottom-left-radius: 56px; }
.round-right-56  { border-top-right-radius: 56px; border-bottom-right-radius: 56px; }
.round-top-64    { border-top-left-radius: 64px; border-top-right-radius: 64px; }
.round-bottom-64 { border-bottom-left-radius: 64px; border-bottom-right-radius: 64px; }
.round-left-64   { border-top-left-radius: 64px; border-bottom-left-radius: 64px; }
.round-right-64  { border-top-right-radius: 64px; border-bottom-right-radius: 64px; }
.round-top-72    { border-top-left-radius: 72px; border-top-right-radius: 72px; }
.round-bottom-72 { border-bottom-left-radius: 72px; border-bottom-right-radius: 72px; }
.round-left-72   { border-top-left-radius: 72px; border-bottom-left-radius: 72px; }
.round-right-72  { border-top-right-radius: 72px; border-bottom-right-radius: 72px; }
.round-top-96    { border-top-left-radius: 96px; border-top-right-radius: 96px; }
.round-bottom-96 { border-bottom-left-radius: 96px; border-bottom-right-radius: 96px; }
.round-left-96   { border-top-left-radius: 96px; border-bottom-left-radius: 96px; }
.round-right-96  { border-top-right-radius: 96px; border-bottom-right-radius: 96px; }
.round-top-128    { border-top-left-radius: 128px; border-top-right-radius: 128px; }
.round-bottom-128 { border-bottom-left-radius: 128px; border-bottom-right-radius: 128px; }
.round-left-128   { border-top-left-radius: 128px; border-bottom-left-radius: 128px; }
.round-right-128  { border-top-right-radius: 128px; border-bottom-right-radius: 128px; }

/* ── Font Size ── */
.set-text-8 { font-size: 8px; }
.set-text-9 { font-size: 9px; }
.set-text-10 { font-size: 10px; }
.set-text-11 { font-size: 11px; }
.set-text-12 { font-size: 12px; }
.set-text-13 { font-size: 13px; }
.set-text-14 { font-size: 14px; }
.set-text-15 { font-size: 15px; }
.set-text-16 { font-size: 16px; }
.set-text-17 { font-size: 17px; }
.set-text-18 { font-size: 18px; }
.set-text-19 { font-size: 19px; }
.set-text-20 { font-size: 20px; }
.set-text-22 { font-size: 22px; }
.set-text-24 { font-size: 24px; }
.set-text-26 { font-size: 26px; }
.set-text-28 { font-size: 28px; }
.set-text-30 { font-size: 30px; }
.set-text-32 { font-size: 32px; }
.set-text-36 { font-size: 36px; }
.set-text-40 { font-size: 40px; }
.set-text-44 { font-size: 44px; }
.set-text-48 { font-size: 48px; }
.set-text-52 { font-size: 52px; }
.set-text-56 { font-size: 56px; }
.set-text-60 { font-size: 60px; }
.set-text-64 { font-size: 64px; }
.set-text-72 { font-size: 72px; }
.set-text-80 { font-size: 80px; }
.set-text-96 { font-size: 96px; }
.set-text-120 { font-size: 120px; }
.set-text-144 { font-size: 144px; }

/* ── Font Weight ── */
.text-thin        { font-weight: 100; }
.text-extra-light { font-weight: 200; }
.text-light       { font-weight: 300; }
.text-normal      { font-weight: 400; }
.text-medium      { font-weight: 500; }
.text-semibold    { font-weight: 600; }
.text-bold        { font-weight: 700; }
.text-extra-bold  { font-weight: 800; }
.text-black-weight{ font-weight: 900; }

/* ── Font Style ── */
.text-italic     { font-style: italic; }
.text-not-italic { font-style: normal; }

/* ── Font Family ── */
.font-sans  { font-family: var(--santy-font-sans); }
.font-serif { font-family: var(--santy-font-serif); }
.font-mono  { font-family: var(--santy-font-mono); }

/* ── Text Align ── */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-justify { text-align: justify; }
.text-start   { text-align: start; }
.text-end     { text-align: end; }

/* ── Text Decoration ── */
.text-underline      { text-decoration: underline; }
.text-overline       { text-decoration: overline; }
.text-strikethrough  { text-decoration: line-through; }
.text-no-decoration  { text-decoration: none; }

/* ── Text Transform ── */
.text-uppercase  { text-transform: uppercase; }
.text-lowercase  { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.text-no-transform { text-transform: none; }

/* ── Text Overflow ── */
.text-truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-clip       { text-overflow: clip; }
.text-ellipsis   { text-overflow: ellipsis; }
.text-wrap       { white-space: normal; }
.text-nowrap     { white-space: nowrap; }
.text-pre        { white-space: pre; }
.text-pre-wrap   { white-space: pre-wrap; }
.text-pre-line   { white-space: pre-line; }
.text-break-word { word-break: break-word; overflow-wrap: break-word; }
.text-break-all  { word-break: break-all; }

/* ── Line Height ── */
.line-height-none  { line-height: 1; }
.line-height-tight { line-height: 1.25; }
.line-height-snug  { line-height: 1.375; }
.line-height-normal { line-height: 1.5; }
.line-height-relaxed { line-height: 1.625; }
.line-height-loose { line-height: 2; }

.line-height-1 { line-height: 1; }
.line-height-1-25 { line-height: 1.25; }
.line-height-1-375 { line-height: 1.375; }
.line-height-1-5 { line-height: 1.5; }
.line-height-1-625 { line-height: 1.625; }
.line-height-1-75 { line-height: 1.75; }
.line-height-2 { line-height: 2; }
.line-height-2-5 { line-height: 2.5; }
.line-height-3 { line-height: 3; }

/* ── Letter Spacing ── */
.subtract-letter-space-2 { letter-spacing: -2px; }
.subtract-letter-space-1 { letter-spacing: -1px; }
.add-letter-space-0 { letter-spacing: 0px; }
.add-letter-space-1 { letter-spacing: 1px; }
.add-letter-space-2 { letter-spacing: 2px; }
.add-letter-space-4 { letter-spacing: 4px; }
.add-letter-space-6 { letter-spacing: 6px; }
.add-letter-space-8 { letter-spacing: 8px; }
.add-letter-space-10 { letter-spacing: 10px; }
.add-letter-space-12 { letter-spacing: 12px; }
.add-letter-space-16 { letter-spacing: 16px; }
.letter-space-tight  { letter-spacing: -0.05em; }
.letter-space-snug   { letter-spacing: -0.025em; }
.letter-space-normal { letter-spacing: 0em; }
.letter-space-wide   { letter-spacing: 0.025em; }
.letter-space-wider  { letter-spacing: 0.05em; }
.letter-space-widest { letter-spacing: 0.1em; }

/* ── Text Colors ── */
.color-red-50 { color: #fef2f2; }
.color-red-100 { color: #fee2e2; }
.color-red-200 { color: #fecaca; }
.color-red-300 { color: #fca5a5; }
.color-red-400 { color: #f87171; }
.color-red-500 { color: #ef4444; }
.color-red-600 { color: #dc2626; }
.color-red-700 { color: #b91c1c; }
.color-red-800 { color: #991b1b; }
.color-red-900 { color: #7f1d1d; }
.color-orange-50 { color: #fff7ed; }
.color-orange-100 { color: #ffedd5; }
.color-orange-200 { color: #fed7aa; }
.color-orange-300 { color: #fdba74; }
.color-orange-400 { color: #fb923c; }
.color-orange-500 { color: #f97316; }
.color-orange-600 { color: #ea580c; }
.color-orange-700 { color: #c2410c; }
.color-orange-800 { color: #9a3412; }
.color-orange-900 { color: #7c2d12; }
.color-amber-50 { color: #fffbeb; }
.color-amber-100 { color: #fef3c7; }
.color-amber-200 { color: #fde68a; }
.color-amber-300 { color: #fcd34d; }
.color-amber-400 { color: #fbbf24; }
.color-amber-500 { color: #f59e0b; }
.color-amber-600 { color: #d97706; }
.color-amber-700 { color: #b45309; }
.color-amber-800 { color: #92400e; }
.color-amber-900 { color: #78350f; }
.color-yellow-50 { color: #fefce8; }
.color-yellow-100 { color: #fef9c3; }
.color-yellow-200 { color: #fef08a; }
.color-yellow-300 { color: #fde047; }
.color-yellow-400 { color: #facc15; }
.color-yellow-500 { color: #eab308; }
.color-yellow-600 { color: #ca8a04; }
.color-yellow-700 { color: #a16207; }
.color-yellow-800 { color: #854d0e; }
.color-yellow-900 { color: #713f12; }
.color-lime-50 { color: #f7fee7; }
.color-lime-100 { color: #ecfccb; }
.color-lime-200 { color: #d9f99d; }
.color-lime-300 { color: #bef264; }
.color-lime-400 { color: #a3e635; }
.color-lime-500 { color: #84cc16; }
.color-lime-600 { color: #65a30d; }
.color-lime-700 { color: #4d7c0f; }
.color-lime-800 { color: #3f6212; }
.color-lime-900 { color: #365314; }
.color-green-50 { color: #f0fdf4; }
.color-green-100 { color: #dcfce7; }
.color-green-200 { color: #bbf7d0; }
.color-green-300 { color: #86efac; }
.color-green-400 { color: #4ade80; }
.color-green-500 { color: #22c55e; }
.color-green-600 { color: #16a34a; }
.color-green-700 { color: #15803d; }
.color-green-800 { color: #166534; }
.color-green-900 { color: #14532d; }
.color-teal-50 { color: #f0fdfa; }
.color-teal-100 { color: #ccfbf1; }
.color-teal-200 { color: #99f6e4; }
.color-teal-300 { color: #5eead4; }
.color-teal-400 { color: #2dd4bf; }
.color-teal-500 { color: #14b8a6; }
.color-teal-600 { color: #0d9488; }
.color-teal-700 { color: #0f766e; }
.color-teal-800 { color: #115e59; }
.color-teal-900 { color: #134e4a; }
.color-cyan-50 { color: #ecfeff; }
.color-cyan-100 { color: #cffafe; }
.color-cyan-200 { color: #a5f3fc; }
.color-cyan-300 { color: #67e8f9; }
.color-cyan-400 { color: #22d3ee; }
.color-cyan-500 { color: #06b6d4; }
.color-cyan-600 { color: #0891b2; }
.color-cyan-700 { color: #0e7490; }
.color-cyan-800 { color: #155e75; }
.color-cyan-900 { color: #164e63; }
.color-blue-50 { color: #eff6ff; }
.color-blue-100 { color: #dbeafe; }
.color-blue-200 { color: #bfdbfe; }
.color-blue-300 { color: #93c5fd; }
.color-blue-400 { color: #60a5fa; }
.color-blue-500 { color: #3b82f6; }
.color-blue-600 { color: #2563eb; }
.color-blue-700 { color: #1d4ed8; }
.color-blue-800 { color: #1e40af; }
.color-blue-900 { color: #1e3a8a; }
.color-indigo-50 { color: #eef2ff; }
.color-indigo-100 { color: #e0e7ff; }
.color-indigo-200 { color: #c7d2fe; }
.color-indigo-300 { color: #a5b4fc; }
.color-indigo-400 { color: #818cf8; }
.color-indigo-500 { color: #6366f1; }
.color-indigo-600 { color: #4f46e5; }
.color-indigo-700 { color: #4338ca; }
.color-indigo-800 { color: #3730a3; }
.color-indigo-900 { color: #312e81; }
.color-violet-50 { color: #f5f3ff; }
.color-violet-100 { color: #ede9fe; }
.color-violet-200 { color: #ddd6fe; }
.color-violet-300 { color: #c4b5fd; }
.color-violet-400 { color: #a78bfa; }
.color-violet-500 { color: #8b5cf6; }
.color-violet-600 { color: #7c3aed; }
.color-violet-700 { color: #6d28d9; }
.color-violet-800 { color: #5b21b6; }
.color-violet-900 { color: #4c1d95; }
.color-purple-50 { color: #faf5ff; }
.color-purple-100 { color: #f3e8ff; }
.color-purple-200 { color: #e9d5ff; }
.color-purple-300 { color: #d8b4fe; }
.color-purple-400 { color: #c084fc; }
.color-purple-500 { color: #a855f7; }
.color-purple-600 { color: #9333ea; }
.color-purple-700 { color: #7e22ce; }
.color-purple-800 { color: #6b21a8; }
.color-purple-900 { color: #581c87; }
.color-pink-50 { color: #fdf2f8; }
.color-pink-100 { color: #fce7f3; }
.color-pink-200 { color: #fbcfe8; }
.color-pink-300 { color: #f9a8d4; }
.color-pink-400 { color: #f472b6; }
.color-pink-500 { color: #ec4899; }
.color-pink-600 { color: #db2777; }
.color-pink-700 { color: #be185d; }
.color-pink-800 { color: #9d174d; }
.color-pink-900 { color: #831843; }
.color-rose-50 { color: #fff1f2; }
.color-rose-100 { color: #ffe4e6; }
.color-rose-200 { color: #fecdd3; }
.color-rose-300 { color: #fda4af; }
.color-rose-400 { color: #fb7185; }
.color-rose-500 { color: #f43f5e; }
.color-rose-600 { color: #e11d48; }
.color-rose-700 { color: #be123c; }
.color-rose-800 { color: #9f1239; }
.color-rose-900 { color: #881337; }
.color-slate-50 { color: #f8fafc; }
.color-slate-100 { color: #f1f5f9; }
.color-slate-200 { color: #e2e8f0; }
.color-slate-300 { color: #cbd5e1; }
.color-slate-400 { color: #94a3b8; }
.color-slate-500 { color: #64748b; }
.color-slate-600 { color: #475569; }
.color-slate-700 { color: #334155; }
.color-slate-800 { color: #1e293b; }
.color-slate-900 { color: #0f172a; }
.color-gray-50 { color: #f9fafb; }
.color-gray-100 { color: #f3f4f6; }
.color-gray-200 { color: #e5e7eb; }
.color-gray-300 { color: #d1d5db; }
.color-gray-400 { color: #9ca3af; }
.color-gray-500 { color: #6b7280; }
.color-gray-600 { color: #4b5563; }
.color-gray-700 { color: #374151; }
.color-gray-800 { color: #1f2937; }
.color-gray-900 { color: #111827; }
.color-zinc-50 { color: #fafafa; }
.color-zinc-100 { color: #f4f4f5; }
.color-zinc-200 { color: #e4e4e7; }
.color-zinc-300 { color: #d4d4d8; }
.color-zinc-400 { color: #a1a1aa; }
.color-zinc-500 { color: #71717a; }
.color-zinc-600 { color: #52525b; }
.color-zinc-700 { color: #3f3f46; }
.color-zinc-800 { color: #27272a; }
.color-zinc-900 { color: #18181b; }
.color-stone-50 { color: #fafaf9; }
.color-stone-100 { color: #f5f5f4; }
.color-stone-200 { color: #e7e5e4; }
.color-stone-300 { color: #d6d3d1; }
.color-stone-400 { color: #a8a29e; }
.color-stone-500 { color: #78716c; }
.color-stone-600 { color: #57534e; }
.color-stone-700 { color: #44403c; }
.color-stone-800 { color: #292524; }
.color-stone-900 { color: #1c1917; }
.color-white { color: #ffffff; }
.color-black { color: #000000; }
.color-transparent { color: transparent; }
.color-current { color: currentColor; }

/* ── Background Colors ── */
.background-red-50 { background-color: #fef2f2; }
.background-red-100 { background-color: #fee2e2; }
.background-red-200 { background-color: #fecaca; }
.background-red-300 { background-color: #fca5a5; }
.background-red-400 { background-color: #f87171; }
.background-red-500 { background-color: #ef4444; }
.background-red-600 { background-color: #dc2626; }
.background-red-700 { background-color: #b91c1c; }
.background-red-800 { background-color: #991b1b; }
.background-red-900 { background-color: #7f1d1d; }
.background-orange-50 { background-color: #fff7ed; }
.background-orange-100 { background-color: #ffedd5; }
.background-orange-200 { background-color: #fed7aa; }
.background-orange-300 { background-color: #fdba74; }
.background-orange-400 { background-color: #fb923c; }
.background-orange-500 { background-color: #f97316; }
.background-orange-600 { background-color: #ea580c; }
.background-orange-700 { background-color: #c2410c; }
.background-orange-800 { background-color: #9a3412; }
.background-orange-900 { background-color: #7c2d12; }
.background-amber-50 { background-color: #fffbeb; }
.background-amber-100 { background-color: #fef3c7; }
.background-amber-200 { background-color: #fde68a; }
.background-amber-300 { background-color: #fcd34d; }
.background-amber-400 { background-color: #fbbf24; }
.background-amber-500 { background-color: #f59e0b; }
.background-amber-600 { background-color: #d97706; }
.background-amber-700 { background-color: #b45309; }
.background-amber-800 { background-color: #92400e; }
.background-amber-900 { background-color: #78350f; }
.background-yellow-50 { background-color: #fefce8; }
.background-yellow-100 { background-color: #fef9c3; }
.background-yellow-200 { background-color: #fef08a; }
.background-yellow-300 { background-color: #fde047; }
.background-yellow-400 { background-color: #facc15; }
.background-yellow-500 { background-color: #eab308; }
.background-yellow-600 { background-color: #ca8a04; }
.background-yellow-700 { background-color: #a16207; }
.background-yellow-800 { background-color: #854d0e; }
.background-yellow-900 { background-color: #713f12; }
.background-lime-50 { background-color: #f7fee7; }
.background-lime-100 { background-color: #ecfccb; }
.background-lime-200 { background-color: #d9f99d; }
.background-lime-300 { background-color: #bef264; }
.background-lime-400 { background-color: #a3e635; }
.background-lime-500 { background-color: #84cc16; }
.background-lime-600 { background-color: #65a30d; }
.background-lime-700 { background-color: #4d7c0f; }
.background-lime-800 { background-color: #3f6212; }
.background-lime-900 { background-color: #365314; }
.background-green-50 { background-color: #f0fdf4; }
.background-green-100 { background-color: #dcfce7; }
.background-green-200 { background-color: #bbf7d0; }
.background-green-300 { background-color: #86efac; }
.background-green-400 { background-color: #4ade80; }
.background-green-500 { background-color: #22c55e; }
.background-green-600 { background-color: #16a34a; }
.background-green-700 { background-color: #15803d; }
.background-green-800 { background-color: #166534; }
.background-green-900 { background-color: #14532d; }
.background-teal-50 { background-color: #f0fdfa; }
.background-teal-100 { background-color: #ccfbf1; }
.background-teal-200 { background-color: #99f6e4; }
.background-teal-300 { background-color: #5eead4; }
.background-teal-400 { background-color: #2dd4bf; }
.background-teal-500 { background-color: #14b8a6; }
.background-teal-600 { background-color: #0d9488; }
.background-teal-700 { background-color: #0f766e; }
.background-teal-800 { background-color: #115e59; }
.background-teal-900 { background-color: #134e4a; }
.background-cyan-50 { background-color: #ecfeff; }
.background-cyan-100 { background-color: #cffafe; }
.background-cyan-200 { background-color: #a5f3fc; }
.background-cyan-300 { background-color: #67e8f9; }
.background-cyan-400 { background-color: #22d3ee; }
.background-cyan-500 { background-color: #06b6d4; }
.background-cyan-600 { background-color: #0891b2; }
.background-cyan-700 { background-color: #0e7490; }
.background-cyan-800 { background-color: #155e75; }
.background-cyan-900 { background-color: #164e63; }
.background-blue-50 { background-color: #eff6ff; }
.background-blue-100 { background-color: #dbeafe; }
.background-blue-200 { background-color: #bfdbfe; }
.background-blue-300 { background-color: #93c5fd; }
.background-blue-400 { background-color: #60a5fa; }
.background-blue-500 { background-color: #3b82f6; }
.background-blue-600 { background-color: #2563eb; }
.background-blue-700 { background-color: #1d4ed8; }
.background-blue-800 { background-color: #1e40af; }
.background-blue-900 { background-color: #1e3a8a; }
.background-indigo-50 { background-color: #eef2ff; }
.background-indigo-100 { background-color: #e0e7ff; }
.background-indigo-200 { background-color: #c7d2fe; }
.background-indigo-300 { background-color: #a5b4fc; }
.background-indigo-400 { background-color: #818cf8; }
.background-indigo-500 { background-color: #6366f1; }
.background-indigo-600 { background-color: #4f46e5; }
.background-indigo-700 { background-color: #4338ca; }
.background-indigo-800 { background-color: #3730a3; }
.background-indigo-900 { background-color: #312e81; }
.background-violet-50 { background-color: #f5f3ff; }
.background-violet-100 { background-color: #ede9fe; }
.background-violet-200 { background-color: #ddd6fe; }
.background-violet-300 { background-color: #c4b5fd; }
.background-violet-400 { background-color: #a78bfa; }
.background-violet-500 { background-color: #8b5cf6; }
.background-violet-600 { background-color: #7c3aed; }
.background-violet-700 { background-color: #6d28d9; }
.background-violet-800 { background-color: #5b21b6; }
.background-violet-900 { background-color: #4c1d95; }
.background-purple-50 { background-color: #faf5ff; }
.background-purple-100 { background-color: #f3e8ff; }
.background-purple-200 { background-color: #e9d5ff; }
.background-purple-300 { background-color: #d8b4fe; }
.background-purple-400 { background-color: #c084fc; }
.background-purple-500 { background-color: #a855f7; }
.background-purple-600 { background-color: #9333ea; }
.background-purple-700 { background-color: #7e22ce; }
.background-purple-800 { background-color: #6b21a8; }
.background-purple-900 { background-color: #581c87; }
.background-pink-50 { background-color: #fdf2f8; }
.background-pink-100 { background-color: #fce7f3; }
.background-pink-200 { background-color: #fbcfe8; }
.background-pink-300 { background-color: #f9a8d4; }
.background-pink-400 { background-color: #f472b6; }
.background-pink-500 { background-color: #ec4899; }
.background-pink-600 { background-color: #db2777; }
.background-pink-700 { background-color: #be185d; }
.background-pink-800 { background-color: #9d174d; }
.background-pink-900 { background-color: #831843; }
.background-rose-50 { background-color: #fff1f2; }
.background-rose-100 { background-color: #ffe4e6; }
.background-rose-200 { background-color: #fecdd3; }
.background-rose-300 { background-color: #fda4af; }
.background-rose-400 { background-color: #fb7185; }
.background-rose-500 { background-color: #f43f5e; }
.background-rose-600 { background-color: #e11d48; }
.background-rose-700 { background-color: #be123c; }
.background-rose-800 { background-color: #9f1239; }
.background-rose-900 { background-color: #881337; }
.background-slate-50 { background-color: #f8fafc; }
.background-slate-100 { background-color: #f1f5f9; }
.background-slate-200 { background-color: #e2e8f0; }
.background-slate-300 { background-color: #cbd5e1; }
.background-slate-400 { background-color: #94a3b8; }
.background-slate-500 { background-color: #64748b; }
.background-slate-600 { background-color: #475569; }
.background-slate-700 { background-color: #334155; }
.background-slate-800 { background-color: #1e293b; }
.background-slate-900 { background-color: #0f172a; }
.background-gray-50 { background-color: #f9fafb; }
.background-gray-100 { background-color: #f3f4f6; }
.background-gray-200 { background-color: #e5e7eb; }
.background-gray-300 { background-color: #d1d5db; }
.background-gray-400 { background-color: #9ca3af; }
.background-gray-500 { background-color: #6b7280; }
.background-gray-600 { background-color: #4b5563; }
.background-gray-700 { background-color: #374151; }
.background-gray-800 { background-color: #1f2937; }
.background-gray-900 { background-color: #111827; }
.background-zinc-50 { background-color: #fafafa; }
.background-zinc-100 { background-color: #f4f4f5; }
.background-zinc-200 { background-color: #e4e4e7; }
.background-zinc-300 { background-color: #d4d4d8; }
.background-zinc-400 { background-color: #a1a1aa; }
.background-zinc-500 { background-color: #71717a; }
.background-zinc-600 { background-color: #52525b; }
.background-zinc-700 { background-color: #3f3f46; }
.background-zinc-800 { background-color: #27272a; }
.background-zinc-900 { background-color: #18181b; }
.background-stone-50 { background-color: #fafaf9; }
.background-stone-100 { background-color: #f5f5f4; }
.background-stone-200 { background-color: #e7e5e4; }
.background-stone-300 { background-color: #d6d3d1; }
.background-stone-400 { background-color: #a8a29e; }
.background-stone-500 { background-color: #78716c; }
.background-stone-600 { background-color: #57534e; }
.background-stone-700 { background-color: #44403c; }
.background-stone-800 { background-color: #292524; }
.background-stone-900 { background-color: #1c1917; }
.background-white { background-color: #ffffff; }
.background-black { background-color: #000000; }
.background-transparent { background-color: transparent; }
.background-current { background-color: currentColor; }

/* ── Border Colors ── */
.border-color-red-50 { border-color: #fef2f2; }
.border-color-red-100 { border-color: #fee2e2; }
.border-color-red-200 { border-color: #fecaca; }
.border-color-red-300 { border-color: #fca5a5; }
.border-color-red-400 { border-color: #f87171; }
.border-color-red-500 { border-color: #ef4444; }
.border-color-red-600 { border-color: #dc2626; }
.border-color-red-700 { border-color: #b91c1c; }
.border-color-red-800 { border-color: #991b1b; }
.border-color-red-900 { border-color: #7f1d1d; }
.border-color-orange-50 { border-color: #fff7ed; }
.border-color-orange-100 { border-color: #ffedd5; }
.border-color-orange-200 { border-color: #fed7aa; }
.border-color-orange-300 { border-color: #fdba74; }
.border-color-orange-400 { border-color: #fb923c; }
.border-color-orange-500 { border-color: #f97316; }
.border-color-orange-600 { border-color: #ea580c; }
.border-color-orange-700 { border-color: #c2410c; }
.border-color-orange-800 { border-color: #9a3412; }
.border-color-orange-900 { border-color: #7c2d12; }
.border-color-amber-50 { border-color: #fffbeb; }
.border-color-amber-100 { border-color: #fef3c7; }
.border-color-amber-200 { border-color: #fde68a; }
.border-color-amber-300 { border-color: #fcd34d; }
.border-color-amber-400 { border-color: #fbbf24; }
.border-color-amber-500 { border-color: #f59e0b; }
.border-color-amber-600 { border-color: #d97706; }
.border-color-amber-700 { border-color: #b45309; }
.border-color-amber-800 { border-color: #92400e; }
.border-color-amber-900 { border-color: #78350f; }
.border-color-yellow-50 { border-color: #fefce8; }
.border-color-yellow-100 { border-color: #fef9c3; }
.border-color-yellow-200 { border-color: #fef08a; }
.border-color-yellow-300 { border-color: #fde047; }
.border-color-yellow-400 { border-color: #facc15; }
.border-color-yellow-500 { border-color: #eab308; }
.border-color-yellow-600 { border-color: #ca8a04; }
.border-color-yellow-700 { border-color: #a16207; }
.border-color-yellow-800 { border-color: #854d0e; }
.border-color-yellow-900 { border-color: #713f12; }
.border-color-lime-50 { border-color: #f7fee7; }
.border-color-lime-100 { border-color: #ecfccb; }
.border-color-lime-200 { border-color: #d9f99d; }
.border-color-lime-300 { border-color: #bef264; }
.border-color-lime-400 { border-color: #a3e635; }
.border-color-lime-500 { border-color: #84cc16; }
.border-color-lime-600 { border-color: #65a30d; }
.border-color-lime-700 { border-color: #4d7c0f; }
.border-color-lime-800 { border-color: #3f6212; }
.border-color-lime-900 { border-color: #365314; }
.border-color-green-50 { border-color: #f0fdf4; }
.border-color-green-100 { border-color: #dcfce7; }
.border-color-green-200 { border-color: #bbf7d0; }
.border-color-green-300 { border-color: #86efac; }
.border-color-green-400 { border-color: #4ade80; }
.border-color-green-500 { border-color: #22c55e; }
.border-color-green-600 { border-color: #16a34a; }
.border-color-green-700 { border-color: #15803d; }
.border-color-green-800 { border-color: #166534; }
.border-color-green-900 { border-color: #14532d; }
.border-color-teal-50 { border-color: #f0fdfa; }
.border-color-teal-100 { border-color: #ccfbf1; }
.border-color-teal-200 { border-color: #99f6e4; }
.border-color-teal-300 { border-color: #5eead4; }
.border-color-teal-400 { border-color: #2dd4bf; }
.border-color-teal-500 { border-color: #14b8a6; }
.border-color-teal-600 { border-color: #0d9488; }
.border-color-teal-700 { border-color: #0f766e; }
.border-color-teal-800 { border-color: #115e59; }
.border-color-teal-900 { border-color: #134e4a; }
.border-color-cyan-50 { border-color: #ecfeff; }
.border-color-cyan-100 { border-color: #cffafe; }
.border-color-cyan-200 { border-color: #a5f3fc; }
.border-color-cyan-300 { border-color: #67e8f9; }
.border-color-cyan-400 { border-color: #22d3ee; }
.border-color-cyan-500 { border-color: #06b6d4; }
.border-color-cyan-600 { border-color: #0891b2; }
.border-color-cyan-700 { border-color: #0e7490; }
.border-color-cyan-800 { border-color: #155e75; }
.border-color-cyan-900 { border-color: #164e63; }
.border-color-blue-50 { border-color: #eff6ff; }
.border-color-blue-100 { border-color: #dbeafe; }
.border-color-blue-200 { border-color: #bfdbfe; }
.border-color-blue-300 { border-color: #93c5fd; }
.border-color-blue-400 { border-color: #60a5fa; }
.border-color-blue-500 { border-color: #3b82f6; }
.border-color-blue-600 { border-color: #2563eb; }
.border-color-blue-700 { border-color: #1d4ed8; }
.border-color-blue-800 { border-color: #1e40af; }
.border-color-blue-900 { border-color: #1e3a8a; }
.border-color-indigo-50 { border-color: #eef2ff; }
.border-color-indigo-100 { border-color: #e0e7ff; }
.border-color-indigo-200 { border-color: #c7d2fe; }
.border-color-indigo-300 { border-color: #a5b4fc; }
.border-color-indigo-400 { border-color: #818cf8; }
.border-color-indigo-500 { border-color: #6366f1; }
.border-color-indigo-600 { border-color: #4f46e5; }
.border-color-indigo-700 { border-color: #4338ca; }
.border-color-indigo-800 { border-color: #3730a3; }
.border-color-indigo-900 { border-color: #312e81; }
.border-color-violet-50 { border-color: #f5f3ff; }
.border-color-violet-100 { border-color: #ede9fe; }
.border-color-violet-200 { border-color: #ddd6fe; }
.border-color-violet-300 { border-color: #c4b5fd; }
.border-color-violet-400 { border-color: #a78bfa; }
.border-color-violet-500 { border-color: #8b5cf6; }
.border-color-violet-600 { border-color: #7c3aed; }
.border-color-violet-700 { border-color: #6d28d9; }
.border-color-violet-800 { border-color: #5b21b6; }
.border-color-violet-900 { border-color: #4c1d95; }
.border-color-purple-50 { border-color: #faf5ff; }
.border-color-purple-100 { border-color: #f3e8ff; }
.border-color-purple-200 { border-color: #e9d5ff; }
.border-color-purple-300 { border-color: #d8b4fe; }
.border-color-purple-400 { border-color: #c084fc; }
.border-color-purple-500 { border-color: #a855f7; }
.border-color-purple-600 { border-color: #9333ea; }
.border-color-purple-700 { border-color: #7e22ce; }
.border-color-purple-800 { border-color: #6b21a8; }
.border-color-purple-900 { border-color: #581c87; }
.border-color-pink-50 { border-color: #fdf2f8; }
.border-color-pink-100 { border-color: #fce7f3; }
.border-color-pink-200 { border-color: #fbcfe8; }
.border-color-pink-300 { border-color: #f9a8d4; }
.border-color-pink-400 { border-color: #f472b6; }
.border-color-pink-500 { border-color: #ec4899; }
.border-color-pink-600 { border-color: #db2777; }
.border-color-pink-700 { border-color: #be185d; }
.border-color-pink-800 { border-color: #9d174d; }
.border-color-pink-900 { border-color: #831843; }
.border-color-rose-50 { border-color: #fff1f2; }
.border-color-rose-100 { border-color: #ffe4e6; }
.border-color-rose-200 { border-color: #fecdd3; }
.border-color-rose-300 { border-color: #fda4af; }
.border-color-rose-400 { border-color: #fb7185; }
.border-color-rose-500 { border-color: #f43f5e; }
.border-color-rose-600 { border-color: #e11d48; }
.border-color-rose-700 { border-color: #be123c; }
.border-color-rose-800 { border-color: #9f1239; }
.border-color-rose-900 { border-color: #881337; }
.border-color-slate-50 { border-color: #f8fafc; }
.border-color-slate-100 { border-color: #f1f5f9; }
.border-color-slate-200 { border-color: #e2e8f0; }
.border-color-slate-300 { border-color: #cbd5e1; }
.border-color-slate-400 { border-color: #94a3b8; }
.border-color-slate-500 { border-color: #64748b; }
.border-color-slate-600 { border-color: #475569; }
.border-color-slate-700 { border-color: #334155; }
.border-color-slate-800 { border-color: #1e293b; }
.border-color-slate-900 { border-color: #0f172a; }
.border-color-gray-50 { border-color: #f9fafb; }
.border-color-gray-100 { border-color: #f3f4f6; }
.border-color-gray-200 { border-color: #e5e7eb; }
.border-color-gray-300 { border-color: #d1d5db; }
.border-color-gray-400 { border-color: #9ca3af; }
.border-color-gray-500 { border-color: #6b7280; }
.border-color-gray-600 { border-color: #4b5563; }
.border-color-gray-700 { border-color: #374151; }
.border-color-gray-800 { border-color: #1f2937; }
.border-color-gray-900 { border-color: #111827; }
.border-color-zinc-50 { border-color: #fafafa; }
.border-color-zinc-100 { border-color: #f4f4f5; }
.border-color-zinc-200 { border-color: #e4e4e7; }
.border-color-zinc-300 { border-color: #d4d4d8; }
.border-color-zinc-400 { border-color: #a1a1aa; }
.border-color-zinc-500 { border-color: #71717a; }
.border-color-zinc-600 { border-color: #52525b; }
.border-color-zinc-700 { border-color: #3f3f46; }
.border-color-zinc-800 { border-color: #27272a; }
.border-color-zinc-900 { border-color: #18181b; }
.border-color-stone-50 { border-color: #fafaf9; }
.border-color-stone-100 { border-color: #f5f5f4; }
.border-color-stone-200 { border-color: #e7e5e4; }
.border-color-stone-300 { border-color: #d6d3d1; }
.border-color-stone-400 { border-color: #a8a29e; }
.border-color-stone-500 { border-color: #78716c; }
.border-color-stone-600 { border-color: #57534e; }
.border-color-stone-700 { border-color: #44403c; }
.border-color-stone-800 { border-color: #292524; }
.border-color-stone-900 { border-color: #1c1917; }
.border-color-white { border-color: #ffffff; }
.border-color-black { border-color: #000000; }
.border-color-transparent { border-color: transparent; }
.border-color-current { border-color: currentColor; }

/* ── Fill (SVG) ── */
.fill-red-50 { fill: #fef2f2; }
.fill-red-100 { fill: #fee2e2; }
.fill-red-200 { fill: #fecaca; }
.fill-red-300 { fill: #fca5a5; }
.fill-red-400 { fill: #f87171; }
.fill-red-500 { fill: #ef4444; }
.fill-red-600 { fill: #dc2626; }
.fill-red-700 { fill: #b91c1c; }
.fill-red-800 { fill: #991b1b; }
.fill-red-900 { fill: #7f1d1d; }
.fill-orange-50 { fill: #fff7ed; }
.fill-orange-100 { fill: #ffedd5; }
.fill-orange-200 { fill: #fed7aa; }
.fill-orange-300 { fill: #fdba74; }
.fill-orange-400 { fill: #fb923c; }
.fill-orange-500 { fill: #f97316; }
.fill-orange-600 { fill: #ea580c; }
.fill-orange-700 { fill: #c2410c; }
.fill-orange-800 { fill: #9a3412; }
.fill-orange-900 { fill: #7c2d12; }
.fill-amber-50 { fill: #fffbeb; }
.fill-amber-100 { fill: #fef3c7; }
.fill-amber-200 { fill: #fde68a; }
.fill-amber-300 { fill: #fcd34d; }
.fill-amber-400 { fill: #fbbf24; }
.fill-amber-500 { fill: #f59e0b; }
.fill-amber-600 { fill: #d97706; }
.fill-amber-700 { fill: #b45309; }
.fill-amber-800 { fill: #92400e; }
.fill-amber-900 { fill: #78350f; }
.fill-yellow-50 { fill: #fefce8; }
.fill-yellow-100 { fill: #fef9c3; }
.fill-yellow-200 { fill: #fef08a; }
.fill-yellow-300 { fill: #fde047; }
.fill-yellow-400 { fill: #facc15; }
.fill-yellow-500 { fill: #eab308; }
.fill-yellow-600 { fill: #ca8a04; }
.fill-yellow-700 { fill: #a16207; }
.fill-yellow-800 { fill: #854d0e; }
.fill-yellow-900 { fill: #713f12; }
.fill-lime-50 { fill: #f7fee7; }
.fill-lime-100 { fill: #ecfccb; }
.fill-lime-200 { fill: #d9f99d; }
.fill-lime-300 { fill: #bef264; }
.fill-lime-400 { fill: #a3e635; }
.fill-lime-500 { fill: #84cc16; }
.fill-lime-600 { fill: #65a30d; }
.fill-lime-700 { fill: #4d7c0f; }
.fill-lime-800 { fill: #3f6212; }
.fill-lime-900 { fill: #365314; }
.fill-green-50 { fill: #f0fdf4; }
.fill-green-100 { fill: #dcfce7; }
.fill-green-200 { fill: #bbf7d0; }
.fill-green-300 { fill: #86efac; }
.fill-green-400 { fill: #4ade80; }
.fill-green-500 { fill: #22c55e; }
.fill-green-600 { fill: #16a34a; }
.fill-green-700 { fill: #15803d; }
.fill-green-800 { fill: #166534; }
.fill-green-900 { fill: #14532d; }
.fill-teal-50 { fill: #f0fdfa; }
.fill-teal-100 { fill: #ccfbf1; }
.fill-teal-200 { fill: #99f6e4; }
.fill-teal-300 { fill: #5eead4; }
.fill-teal-400 { fill: #2dd4bf; }
.fill-teal-500 { fill: #14b8a6; }
.fill-teal-600 { fill: #0d9488; }
.fill-teal-700 { fill: #0f766e; }
.fill-teal-800 { fill: #115e59; }
.fill-teal-900 { fill: #134e4a; }
.fill-cyan-50 { fill: #ecfeff; }
.fill-cyan-100 { fill: #cffafe; }
.fill-cyan-200 { fill: #a5f3fc; }
.fill-cyan-300 { fill: #67e8f9; }
.fill-cyan-400 { fill: #22d3ee; }
.fill-cyan-500 { fill: #06b6d4; }
.fill-cyan-600 { fill: #0891b2; }
.fill-cyan-700 { fill: #0e7490; }
.fill-cyan-800 { fill: #155e75; }
.fill-cyan-900 { fill: #164e63; }
.fill-blue-50 { fill: #eff6ff; }
.fill-blue-100 { fill: #dbeafe; }
.fill-blue-200 { fill: #bfdbfe; }
.fill-blue-300 { fill: #93c5fd; }
.fill-blue-400 { fill: #60a5fa; }
.fill-blue-500 { fill: #3b82f6; }
.fill-blue-600 { fill: #2563eb; }
.fill-blue-700 { fill: #1d4ed8; }
.fill-blue-800 { fill: #1e40af; }
.fill-blue-900 { fill: #1e3a8a; }
.fill-indigo-50 { fill: #eef2ff; }
.fill-indigo-100 { fill: #e0e7ff; }
.fill-indigo-200 { fill: #c7d2fe; }
.fill-indigo-300 { fill: #a5b4fc; }
.fill-indigo-400 { fill: #818cf8; }
.fill-indigo-500 { fill: #6366f1; }
.fill-indigo-600 { fill: #4f46e5; }
.fill-indigo-700 { fill: #4338ca; }
.fill-indigo-800 { fill: #3730a3; }
.fill-indigo-900 { fill: #312e81; }
.fill-violet-50 { fill: #f5f3ff; }
.fill-violet-100 { fill: #ede9fe; }
.fill-violet-200 { fill: #ddd6fe; }
.fill-violet-300 { fill: #c4b5fd; }
.fill-violet-400 { fill: #a78bfa; }
.fill-violet-500 { fill: #8b5cf6; }
.fill-violet-600 { fill: #7c3aed; }
.fill-violet-700 { fill: #6d28d9; }
.fill-violet-800 { fill: #5b21b6; }
.fill-violet-900 { fill: #4c1d95; }
.fill-purple-50 { fill: #faf5ff; }
.fill-purple-100 { fill: #f3e8ff; }
.fill-purple-200 { fill: #e9d5ff; }
.fill-purple-300 { fill: #d8b4fe; }
.fill-purple-400 { fill: #c084fc; }
.fill-purple-500 { fill: #a855f7; }
.fill-purple-600 { fill: #9333ea; }
.fill-purple-700 { fill: #7e22ce; }
.fill-purple-800 { fill: #6b21a8; }
.fill-purple-900 { fill: #581c87; }
.fill-pink-50 { fill: #fdf2f8; }
.fill-pink-100 { fill: #fce7f3; }
.fill-pink-200 { fill: #fbcfe8; }
.fill-pink-300 { fill: #f9a8d4; }
.fill-pink-400 { fill: #f472b6; }
.fill-pink-500 { fill: #ec4899; }
.fill-pink-600 { fill: #db2777; }
.fill-pink-700 { fill: #be185d; }
.fill-pink-800 { fill: #9d174d; }
.fill-pink-900 { fill: #831843; }
.fill-rose-50 { fill: #fff1f2; }
.fill-rose-100 { fill: #ffe4e6; }
.fill-rose-200 { fill: #fecdd3; }
.fill-rose-300 { fill: #fda4af; }
.fill-rose-400 { fill: #fb7185; }
.fill-rose-500 { fill: #f43f5e; }
.fill-rose-600 { fill: #e11d48; }
.fill-rose-700 { fill: #be123c; }
.fill-rose-800 { fill: #9f1239; }
.fill-rose-900 { fill: #881337; }
.fill-slate-50 { fill: #f8fafc; }
.fill-slate-100 { fill: #f1f5f9; }
.fill-slate-200 { fill: #e2e8f0; }
.fill-slate-300 { fill: #cbd5e1; }
.fill-slate-400 { fill: #94a3b8; }
.fill-slate-500 { fill: #64748b; }
.fill-slate-600 { fill: #475569; }
.fill-slate-700 { fill: #334155; }
.fill-slate-800 { fill: #1e293b; }
.fill-slate-900 { fill: #0f172a; }
.fill-gray-50 { fill: #f9fafb; }
.fill-gray-100 { fill: #f3f4f6; }
.fill-gray-200 { fill: #e5e7eb; }
.fill-gray-300 { fill: #d1d5db; }
.fill-gray-400 { fill: #9ca3af; }
.fill-gray-500 { fill: #6b7280; }
.fill-gray-600 { fill: #4b5563; }
.fill-gray-700 { fill: #374151; }
.fill-gray-800 { fill: #1f2937; }
.fill-gray-900 { fill: #111827; }
.fill-zinc-50 { fill: #fafafa; }
.fill-zinc-100 { fill: #f4f4f5; }
.fill-zinc-200 { fill: #e4e4e7; }
.fill-zinc-300 { fill: #d4d4d8; }
.fill-zinc-400 { fill: #a1a1aa; }
.fill-zinc-500 { fill: #71717a; }
.fill-zinc-600 { fill: #52525b; }
.fill-zinc-700 { fill: #3f3f46; }
.fill-zinc-800 { fill: #27272a; }
.fill-zinc-900 { fill: #18181b; }
.fill-stone-50 { fill: #fafaf9; }
.fill-stone-100 { fill: #f5f5f4; }
.fill-stone-200 { fill: #e7e5e4; }
.fill-stone-300 { fill: #d6d3d1; }
.fill-stone-400 { fill: #a8a29e; }
.fill-stone-500 { fill: #78716c; }
.fill-stone-600 { fill: #57534e; }
.fill-stone-700 { fill: #44403c; }
.fill-stone-800 { fill: #292524; }
.fill-stone-900 { fill: #1c1917; }

/* ── Stroke (SVG) ── */
.stroke-red-50 { stroke: #fef2f2; }
.stroke-red-100 { stroke: #fee2e2; }
.stroke-red-200 { stroke: #fecaca; }
.stroke-red-300 { stroke: #fca5a5; }
.stroke-red-400 { stroke: #f87171; }
.stroke-red-500 { stroke: #ef4444; }
.stroke-red-600 { stroke: #dc2626; }
.stroke-red-700 { stroke: #b91c1c; }
.stroke-red-800 { stroke: #991b1b; }
.stroke-red-900 { stroke: #7f1d1d; }
.stroke-orange-50 { stroke: #fff7ed; }
.stroke-orange-100 { stroke: #ffedd5; }
.stroke-orange-200 { stroke: #fed7aa; }
.stroke-orange-300 { stroke: #fdba74; }
.stroke-orange-400 { stroke: #fb923c; }
.stroke-orange-500 { stroke: #f97316; }
.stroke-orange-600 { stroke: #ea580c; }
.stroke-orange-700 { stroke: #c2410c; }
.stroke-orange-800 { stroke: #9a3412; }
.stroke-orange-900 { stroke: #7c2d12; }
.stroke-amber-50 { stroke: #fffbeb; }
.stroke-amber-100 { stroke: #fef3c7; }
.stroke-amber-200 { stroke: #fde68a; }
.stroke-amber-300 { stroke: #fcd34d; }
.stroke-amber-400 { stroke: #fbbf24; }
.stroke-amber-500 { stroke: #f59e0b; }
.stroke-amber-600 { stroke: #d97706; }
.stroke-amber-700 { stroke: #b45309; }
.stroke-amber-800 { stroke: #92400e; }
.stroke-amber-900 { stroke: #78350f; }
.stroke-yellow-50 { stroke: #fefce8; }
.stroke-yellow-100 { stroke: #fef9c3; }
.stroke-yellow-200 { stroke: #fef08a; }
.stroke-yellow-300 { stroke: #fde047; }
.stroke-yellow-400 { stroke: #facc15; }
.stroke-yellow-500 { stroke: #eab308; }
.stroke-yellow-600 { stroke: #ca8a04; }
.stroke-yellow-700 { stroke: #a16207; }
.stroke-yellow-800 { stroke: #854d0e; }
.stroke-yellow-900 { stroke: #713f12; }
.stroke-lime-50 { stroke: #f7fee7; }
.stroke-lime-100 { stroke: #ecfccb; }
.stroke-lime-200 { stroke: #d9f99d; }
.stroke-lime-300 { stroke: #bef264; }
.stroke-lime-400 { stroke: #a3e635; }
.stroke-lime-500 { stroke: #84cc16; }
.stroke-lime-600 { stroke: #65a30d; }
.stroke-lime-700 { stroke: #4d7c0f; }
.stroke-lime-800 { stroke: #3f6212; }
.stroke-lime-900 { stroke: #365314; }
.stroke-green-50 { stroke: #f0fdf4; }
.stroke-green-100 { stroke: #dcfce7; }
.stroke-green-200 { stroke: #bbf7d0; }
.stroke-green-300 { stroke: #86efac; }
.stroke-green-400 { stroke: #4ade80; }
.stroke-green-500 { stroke: #22c55e; }
.stroke-green-600 { stroke: #16a34a; }
.stroke-green-700 { stroke: #15803d; }
.stroke-green-800 { stroke: #166534; }
.stroke-green-900 { stroke: #14532d; }
.stroke-teal-50 { stroke: #f0fdfa; }
.stroke-teal-100 { stroke: #ccfbf1; }
.stroke-teal-200 { stroke: #99f6e4; }
.stroke-teal-300 { stroke: #5eead4; }
.stroke-teal-400 { stroke: #2dd4bf; }
.stroke-teal-500 { stroke: #14b8a6; }
.stroke-teal-600 { stroke: #0d9488; }
.stroke-teal-700 { stroke: #0f766e; }
.stroke-teal-800 { stroke: #115e59; }
.stroke-teal-900 { stroke: #134e4a; }
.stroke-cyan-50 { stroke: #ecfeff; }
.stroke-cyan-100 { stroke: #cffafe; }
.stroke-cyan-200 { stroke: #a5f3fc; }
.stroke-cyan-300 { stroke: #67e8f9; }
.stroke-cyan-400 { stroke: #22d3ee; }
.stroke-cyan-500 { stroke: #06b6d4; }
.stroke-cyan-600 { stroke: #0891b2; }
.stroke-cyan-700 { stroke: #0e7490; }
.stroke-cyan-800 { stroke: #155e75; }
.stroke-cyan-900 { stroke: #164e63; }
.stroke-blue-50 { stroke: #eff6ff; }
.stroke-blue-100 { stroke: #dbeafe; }
.stroke-blue-200 { stroke: #bfdbfe; }
.stroke-blue-300 { stroke: #93c5fd; }
.stroke-blue-400 { stroke: #60a5fa; }
.stroke-blue-500 { stroke: #3b82f6; }
.stroke-blue-600 { stroke: #2563eb; }
.stroke-blue-700 { stroke: #1d4ed8; }
.stroke-blue-800 { stroke: #1e40af; }
.stroke-blue-900 { stroke: #1e3a8a; }
.stroke-indigo-50 { stroke: #eef2ff; }
.stroke-indigo-100 { stroke: #e0e7ff; }
.stroke-indigo-200 { stroke: #c7d2fe; }
.stroke-indigo-300 { stroke: #a5b4fc; }
.stroke-indigo-400 { stroke: #818cf8; }
.stroke-indigo-500 { stroke: #6366f1; }
.stroke-indigo-600 { stroke: #4f46e5; }
.stroke-indigo-700 { stroke: #4338ca; }
.stroke-indigo-800 { stroke: #3730a3; }
.stroke-indigo-900 { stroke: #312e81; }
.stroke-violet-50 { stroke: #f5f3ff; }
.stroke-violet-100 { stroke: #ede9fe; }
.stroke-violet-200 { stroke: #ddd6fe; }
.stroke-violet-300 { stroke: #c4b5fd; }
.stroke-violet-400 { stroke: #a78bfa; }
.stroke-violet-500 { stroke: #8b5cf6; }
.stroke-violet-600 { stroke: #7c3aed; }
.stroke-violet-700 { stroke: #6d28d9; }
.stroke-violet-800 { stroke: #5b21b6; }
.stroke-violet-900 { stroke: #4c1d95; }
.stroke-purple-50 { stroke: #faf5ff; }
.stroke-purple-100 { stroke: #f3e8ff; }
.stroke-purple-200 { stroke: #e9d5ff; }
.stroke-purple-300 { stroke: #d8b4fe; }
.stroke-purple-400 { stroke: #c084fc; }
.stroke-purple-500 { stroke: #a855f7; }
.stroke-purple-600 { stroke: #9333ea; }
.stroke-purple-700 { stroke: #7e22ce; }
.stroke-purple-800 { stroke: #6b21a8; }
.stroke-purple-900 { stroke: #581c87; }
.stroke-pink-50 { stroke: #fdf2f8; }
.stroke-pink-100 { stroke: #fce7f3; }
.stroke-pink-200 { stroke: #fbcfe8; }
.stroke-pink-300 { stroke: #f9a8d4; }
.stroke-pink-400 { stroke: #f472b6; }
.stroke-pink-500 { stroke: #ec4899; }
.stroke-pink-600 { stroke: #db2777; }
.stroke-pink-700 { stroke: #be185d; }
.stroke-pink-800 { stroke: #9d174d; }
.stroke-pink-900 { stroke: #831843; }
.stroke-rose-50 { stroke: #fff1f2; }
.stroke-rose-100 { stroke: #ffe4e6; }
.stroke-rose-200 { stroke: #fecdd3; }
.stroke-rose-300 { stroke: #fda4af; }
.stroke-rose-400 { stroke: #fb7185; }
.stroke-rose-500 { stroke: #f43f5e; }
.stroke-rose-600 { stroke: #e11d48; }
.stroke-rose-700 { stroke: #be123c; }
.stroke-rose-800 { stroke: #9f1239; }
.stroke-rose-900 { stroke: #881337; }
.stroke-slate-50 { stroke: #f8fafc; }
.stroke-slate-100 { stroke: #f1f5f9; }
.stroke-slate-200 { stroke: #e2e8f0; }
.stroke-slate-300 { stroke: #cbd5e1; }
.stroke-slate-400 { stroke: #94a3b8; }
.stroke-slate-500 { stroke: #64748b; }
.stroke-slate-600 { stroke: #475569; }
.stroke-slate-700 { stroke: #334155; }
.stroke-slate-800 { stroke: #1e293b; }
.stroke-slate-900 { stroke: #0f172a; }
.stroke-gray-50 { stroke: #f9fafb; }
.stroke-gray-100 { stroke: #f3f4f6; }
.stroke-gray-200 { stroke: #e5e7eb; }
.stroke-gray-300 { stroke: #d1d5db; }
.stroke-gray-400 { stroke: #9ca3af; }
.stroke-gray-500 { stroke: #6b7280; }
.stroke-gray-600 { stroke: #4b5563; }
.stroke-gray-700 { stroke: #374151; }
.stroke-gray-800 { stroke: #1f2937; }
.stroke-gray-900 { stroke: #111827; }
.stroke-zinc-50 { stroke: #fafafa; }
.stroke-zinc-100 { stroke: #f4f4f5; }
.stroke-zinc-200 { stroke: #e4e4e7; }
.stroke-zinc-300 { stroke: #d4d4d8; }
.stroke-zinc-400 { stroke: #a1a1aa; }
.stroke-zinc-500 { stroke: #71717a; }
.stroke-zinc-600 { stroke: #52525b; }
.stroke-zinc-700 { stroke: #3f3f46; }
.stroke-zinc-800 { stroke: #27272a; }
.stroke-zinc-900 { stroke: #18181b; }
.stroke-stone-50 { stroke: #fafaf9; }
.stroke-stone-100 { stroke: #f5f5f4; }
.stroke-stone-200 { stroke: #e7e5e4; }
.stroke-stone-300 { stroke: #d6d3d1; }
.stroke-stone-400 { stroke: #a8a29e; }
.stroke-stone-500 { stroke: #78716c; }
.stroke-stone-600 { stroke: #57534e; }
.stroke-stone-700 { stroke: #44403c; }
.stroke-stone-800 { stroke: #292524; }
.stroke-stone-900 { stroke: #1c1917; }

/* ── Background Position ── */
.bg-top         { background-position: top; }
.bg-bottom      { background-position: bottom; }
.bg-left        { background-position: left; }
.bg-right       { background-position: right; }
.bg-center      { background-position: center; }
.bg-top-left    { background-position: top left; }
.bg-top-right   { background-position: top right; }
.bg-bottom-left { background-position: bottom left; }
.bg-bottom-right{ background-position: bottom right; }

/* ── Background Repeat ── */
.bg-repeat       { background-repeat: repeat; }
.bg-no-repeat    { background-repeat: no-repeat; }
.bg-repeat-x     { background-repeat: repeat-x; }
.bg-repeat-y     { background-repeat: repeat-y; }
.bg-repeat-round { background-repeat: round; }
.bg-repeat-space { background-repeat: space; }

/* ── Background Size ── */
.bg-cover   { background-size: cover; }
.bg-contain { background-size: contain; }
.bg-auto    { background-size: auto; }

/* ── Background Attachment ── */
.bg-fixed   { background-attachment: fixed; }
.bg-local   { background-attachment: local; }
.bg-scroll-bg { background-attachment: scroll; }

/* ── Background Clip ── */
.bg-clip-border  { background-clip: border-box; }
.bg-clip-padding { background-clip: padding-box; }
.bg-clip-content { background-clip: content-box; }
.bg-clip-text    { background-clip: text; -webkit-background-clip: text; }

/* ── Gradients ── */
.gradient-to-right  { background-image: linear-gradient(to right, var(--grad-from, transparent), var(--grad-to, transparent)); }
.gradient-to-left   { background-image: linear-gradient(to left, var(--grad-from, transparent), var(--grad-to, transparent)); }
.gradient-to-top    { background-image: linear-gradient(to top, var(--grad-from, transparent), var(--grad-to, transparent)); }
.gradient-to-bottom { background-image: linear-gradient(to bottom, var(--grad-from, transparent), var(--grad-to, transparent)); }
.gradient-to-top-right    { background-image: linear-gradient(to top right, var(--grad-from, transparent), var(--grad-to, transparent)); }
.gradient-to-bottom-right { background-image: linear-gradient(to bottom right, var(--grad-from, transparent), var(--grad-to, transparent)); }


/* ── Position ── */
.position-static   { position: static; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed    { position: fixed; }
.position-sticky   { position: sticky; }


/* ── Pin (top/bottom/left/right/inset) ── */
.pin-top-0    { top: 0px; }
.pin-bottom-0 { bottom: 0px; }
.pin-left-0   { left: 0px; }
.pin-right-0  { right: 0px; }
.pin-all-0    { top: 0px; right: 0px; bottom: 0px; left: 0px; }
.pin-top-1    { top: 1px; }
.pin-bottom-1 { bottom: 1px; }
.pin-left-1   { left: 1px; }
.pin-right-1  { right: 1px; }
.pin-all-1    { top: 1px; right: 1px; bottom: 1px; left: 1px; }
.pin-top-2    { top: 2px; }
.pin-bottom-2 { bottom: 2px; }
.pin-left-2   { left: 2px; }
.pin-right-2  { right: 2px; }
.pin-all-2    { top: 2px; right: 2px; bottom: 2px; left: 2px; }
.pin-top-3    { top: 3px; }
.pin-bottom-3 { bottom: 3px; }
.pin-left-3   { left: 3px; }
.pin-right-3  { right: 3px; }
.pin-all-3    { top: 3px; right: 3px; bottom: 3px; left: 3px; }
.pin-top-4    { top: 4px; }
.pin-bottom-4 { bottom: 4px; }
.pin-left-4   { left: 4px; }
.pin-right-4  { right: 4px; }
.pin-all-4    { top: 4px; right: 4px; bottom: 4px; left: 4px; }
.pin-top-5    { top: 5px; }
.pin-bottom-5 { bottom: 5px; }
.pin-left-5   { left: 5px; }
.pin-right-5  { right: 5px; }
.pin-all-5    { top: 5px; right: 5px; bottom: 5px; left: 5px; }
.pin-top-6    { top: 6px; }
.pin-bottom-6 { bottom: 6px; }
.pin-left-6   { left: 6px; }
.pin-right-6  { right: 6px; }
.pin-all-6    { top: 6px; right: 6px; bottom: 6px; left: 6px; }
.pin-top-7    { top: 7px; }
.pin-bottom-7 { bottom: 7px; }
.pin-left-7   { left: 7px; }
.pin-right-7  { right: 7px; }
.pin-all-7    { top: 7px; right: 7px; bottom: 7px; left: 7px; }
.pin-top-8    { top: 8px; }
.pin-bottom-8 { bottom: 8px; }
.pin-left-8   { left: 8px; }
.pin-right-8  { right: 8px; }
.pin-all-8    { top: 8px; right: 8px; bottom: 8px; left: 8px; }
.pin-top-9    { top: 9px; }
.pin-bottom-9 { bottom: 9px; }
.pin-left-9   { left: 9px; }
.pin-right-9  { right: 9px; }
.pin-all-9    { top: 9px; right: 9px; bottom: 9px; left: 9px; }
.pin-top-10    { top: 10px; }
.pin-bottom-10 { bottom: 10px; }
.pin-left-10   { left: 10px; }
.pin-right-10  { right: 10px; }
.pin-all-10    { top: 10px; right: 10px; bottom: 10px; left: 10px; }
.pin-top-11    { top: 11px; }
.pin-bottom-11 { bottom: 11px; }
.pin-left-11   { left: 11px; }
.pin-right-11  { right: 11px; }
.pin-all-11    { top: 11px; right: 11px; bottom: 11px; left: 11px; }
.pin-top-12    { top: 12px; }
.pin-bottom-12 { bottom: 12px; }
.pin-left-12   { left: 12px; }
.pin-right-12  { right: 12px; }
.pin-all-12    { top: 12px; right: 12px; bottom: 12px; left: 12px; }
.pin-top-13    { top: 13px; }
.pin-bottom-13 { bottom: 13px; }
.pin-left-13   { left: 13px; }
.pin-right-13  { right: 13px; }
.pin-all-13    { top: 13px; right: 13px; bottom: 13px; left: 13px; }
.pin-top-14    { top: 14px; }
.pin-bottom-14 { bottom: 14px; }
.pin-left-14   { left: 14px; }
.pin-right-14  { right: 14px; }
.pin-all-14    { top: 14px; right: 14px; bottom: 14px; left: 14px; }
.pin-top-15    { top: 15px; }
.pin-bottom-15 { bottom: 15px; }
.pin-left-15   { left: 15px; }
.pin-right-15  { right: 15px; }
.pin-all-15    { top: 15px; right: 15px; bottom: 15px; left: 15px; }
.pin-top-16    { top: 16px; }
.pin-bottom-16 { bottom: 16px; }
.pin-left-16   { left: 16px; }
.pin-right-16  { right: 16px; }
.pin-all-16    { top: 16px; right: 16px; bottom: 16px; left: 16px; }
.pin-top-17    { top: 17px; }
.pin-bottom-17 { bottom: 17px; }
.pin-left-17   { left: 17px; }
.pin-right-17  { right: 17px; }
.pin-all-17    { top: 17px; right: 17px; bottom: 17px; left: 17px; }
.pin-top-18    { top: 18px; }
.pin-bottom-18 { bottom: 18px; }
.pin-left-18   { left: 18px; }
.pin-right-18  { right: 18px; }
.pin-all-18    { top: 18px; right: 18px; bottom: 18px; left: 18px; }
.pin-top-19    { top: 19px; }
.pin-bottom-19 { bottom: 19px; }
.pin-left-19   { left: 19px; }
.pin-right-19  { right: 19px; }
.pin-all-19    { top: 19px; right: 19px; bottom: 19px; left: 19px; }
.pin-top-20    { top: 20px; }
.pin-bottom-20 { bottom: 20px; }
.pin-left-20   { left: 20px; }
.pin-right-20  { right: 20px; }
.pin-all-20    { top: 20px; right: 20px; bottom: 20px; left: 20px; }
.pin-top-21    { top: 21px; }
.pin-bottom-21 { bottom: 21px; }
.pin-left-21   { left: 21px; }
.pin-right-21  { right: 21px; }
.pin-all-21    { top: 21px; right: 21px; bottom: 21px; left: 21px; }
.pin-top-22    { top: 22px; }
.pin-bottom-22 { bottom: 22px; }
.pin-left-22   { left: 22px; }
.pin-right-22  { right: 22px; }
.pin-all-22    { top: 22px; right: 22px; bottom: 22px; left: 22px; }
.pin-top-23    { top: 23px; }
.pin-bottom-23 { bottom: 23px; }
.pin-left-23   { left: 23px; }
.pin-right-23  { right: 23px; }
.pin-all-23    { top: 23px; right: 23px; bottom: 23px; left: 23px; }
.pin-top-24    { top: 24px; }
.pin-bottom-24 { bottom: 24px; }
.pin-left-24   { left: 24px; }
.pin-right-24  { right: 24px; }
.pin-all-24    { top: 24px; right: 24px; bottom: 24px; left: 24px; }
.pin-top-25    { top: 25px; }
.pin-bottom-25 { bottom: 25px; }
.pin-left-25   { left: 25px; }
.pin-right-25  { right: 25px; }
.pin-all-25    { top: 25px; right: 25px; bottom: 25px; left: 25px; }
.pin-top-26    { top: 26px; }
.pin-bottom-26 { bottom: 26px; }
.pin-left-26   { left: 26px; }
.pin-right-26  { right: 26px; }
.pin-all-26    { top: 26px; right: 26px; bottom: 26px; left: 26px; }
.pin-top-27    { top: 27px; }
.pin-bottom-27 { bottom: 27px; }
.pin-left-27   { left: 27px; }
.pin-right-27  { right: 27px; }
.pin-all-27    { top: 27px; right: 27px; bottom: 27px; left: 27px; }
.pin-top-28    { top: 28px; }
.pin-bottom-28 { bottom: 28px; }
.pin-left-28   { left: 28px; }
.pin-right-28  { right: 28px; }
.pin-all-28    { top: 28px; right: 28px; bottom: 28px; left: 28px; }
.pin-top-29    { top: 29px; }
.pin-bottom-29 { bottom: 29px; }
.pin-left-29   { left: 29px; }
.pin-right-29  { right: 29px; }
.pin-all-29    { top: 29px; right: 29px; bottom: 29px; left: 29px; }
.pin-top-30    { top: 30px; }
.pin-bottom-30 { bottom: 30px; }
.pin-left-30   { left: 30px; }
.pin-right-30  { right: 30px; }
.pin-all-30    { top: 30px; right: 30px; bottom: 30px; left: 30px; }
.pin-top-31    { top: 31px; }
.pin-bottom-31 { bottom: 31px; }
.pin-left-31   { left: 31px; }
.pin-right-31  { right: 31px; }
.pin-all-31    { top: 31px; right: 31px; bottom: 31px; left: 31px; }
.pin-top-32    { top: 32px; }
.pin-bottom-32 { bottom: 32px; }
.pin-left-32   { left: 32px; }
.pin-right-32  { right: 32px; }
.pin-all-32    { top: 32px; right: 32px; bottom: 32px; left: 32px; }
.pin-top-33    { top: 33px; }
.pin-bottom-33 { bottom: 33px; }
.pin-left-33   { left: 33px; }
.pin-right-33  { right: 33px; }
.pin-all-33    { top: 33px; right: 33px; bottom: 33px; left: 33px; }
.pin-top-34    { top: 34px; }
.pin-bottom-34 { bottom: 34px; }
.pin-left-34   { left: 34px; }
.pin-right-34  { right: 34px; }
.pin-all-34    { top: 34px; right: 34px; bottom: 34px; left: 34px; }
.pin-top-35    { top: 35px; }
.pin-bottom-35 { bottom: 35px; }
.pin-left-35   { left: 35px; }
.pin-right-35  { right: 35px; }
.pin-all-35    { top: 35px; right: 35px; bottom: 35px; left: 35px; }
.pin-top-36    { top: 36px; }
.pin-bottom-36 { bottom: 36px; }
.pin-left-36   { left: 36px; }
.pin-right-36  { right: 36px; }
.pin-all-36    { top: 36px; right: 36px; bottom: 36px; left: 36px; }
.pin-top-37    { top: 37px; }
.pin-bottom-37 { bottom: 37px; }
.pin-left-37   { left: 37px; }
.pin-right-37  { right: 37px; }
.pin-all-37    { top: 37px; right: 37px; bottom: 37px; left: 37px; }
.pin-top-38    { top: 38px; }
.pin-bottom-38 { bottom: 38px; }
.pin-left-38   { left: 38px; }
.pin-right-38  { right: 38px; }
.pin-all-38    { top: 38px; right: 38px; bottom: 38px; left: 38px; }
.pin-top-39    { top: 39px; }
.pin-bottom-39 { bottom: 39px; }
.pin-left-39   { left: 39px; }
.pin-right-39  { right: 39px; }
.pin-all-39    { top: 39px; right: 39px; bottom: 39px; left: 39px; }
.pin-top-40    { top: 40px; }
.pin-bottom-40 { bottom: 40px; }
.pin-left-40   { left: 40px; }
.pin-right-40  { right: 40px; }
.pin-all-40    { top: 40px; right: 40px; bottom: 40px; left: 40px; }
.pin-top-41    { top: 41px; }
.pin-bottom-41 { bottom: 41px; }
.pin-left-41   { left: 41px; }
.pin-right-41  { right: 41px; }
.pin-all-41    { top: 41px; right: 41px; bottom: 41px; left: 41px; }
.pin-top-42    { top: 42px; }
.pin-bottom-42 { bottom: 42px; }
.pin-left-42   { left: 42px; }
.pin-right-42  { right: 42px; }
.pin-all-42    { top: 42px; right: 42px; bottom: 42px; left: 42px; }
.pin-top-43    { top: 43px; }
.pin-bottom-43 { bottom: 43px; }
.pin-left-43   { left: 43px; }
.pin-right-43  { right: 43px; }
.pin-all-43    { top: 43px; right: 43px; bottom: 43px; left: 43px; }
.pin-top-44    { top: 44px; }
.pin-bottom-44 { bottom: 44px; }
.pin-left-44   { left: 44px; }
.pin-right-44  { right: 44px; }
.pin-all-44    { top: 44px; right: 44px; bottom: 44px; left: 44px; }
.pin-top-45    { top: 45px; }
.pin-bottom-45 { bottom: 45px; }
.pin-left-45   { left: 45px; }
.pin-right-45  { right: 45px; }
.pin-all-45    { top: 45px; right: 45px; bottom: 45px; left: 45px; }
.pin-top-46    { top: 46px; }
.pin-bottom-46 { bottom: 46px; }
.pin-left-46   { left: 46px; }
.pin-right-46  { right: 46px; }
.pin-all-46    { top: 46px; right: 46px; bottom: 46px; left: 46px; }
.pin-top-47    { top: 47px; }
.pin-bottom-47 { bottom: 47px; }
.pin-left-47   { left: 47px; }
.pin-right-47  { right: 47px; }
.pin-all-47    { top: 47px; right: 47px; bottom: 47px; left: 47px; }
.pin-top-48    { top: 48px; }
.pin-bottom-48 { bottom: 48px; }
.pin-left-48   { left: 48px; }
.pin-right-48  { right: 48px; }
.pin-all-48    { top: 48px; right: 48px; bottom: 48px; left: 48px; }
.pin-top-49    { top: 49px; }
.pin-bottom-49 { bottom: 49px; }
.pin-left-49   { left: 49px; }
.pin-right-49  { right: 49px; }
.pin-all-49    { top: 49px; right: 49px; bottom: 49px; left: 49px; }
.pin-top-50    { top: 50px; }
.pin-bottom-50 { bottom: 50px; }
.pin-left-50   { left: 50px; }
.pin-right-50  { right: 50px; }
.pin-all-50    { top: 50px; right: 50px; bottom: 50px; left: 50px; }
.pin-top-52    { top: 52px; }
.pin-bottom-52 { bottom: 52px; }
.pin-left-52   { left: 52px; }
.pin-right-52  { right: 52px; }
.pin-all-52    { top: 52px; right: 52px; bottom: 52px; left: 52px; }
.pin-top-56    { top: 56px; }
.pin-bottom-56 { bottom: 56px; }
.pin-left-56   { left: 56px; }
.pin-right-56  { right: 56px; }
.pin-all-56    { top: 56px; right: 56px; bottom: 56px; left: 56px; }
.pin-top-60    { top: 60px; }
.pin-bottom-60 { bottom: 60px; }
.pin-left-60   { left: 60px; }
.pin-right-60  { right: 60px; }
.pin-all-60    { top: 60px; right: 60px; bottom: 60px; left: 60px; }
.pin-top-64    { top: 64px; }
.pin-bottom-64 { bottom: 64px; }
.pin-left-64   { left: 64px; }
.pin-right-64  { right: 64px; }
.pin-all-64    { top: 64px; right: 64px; bottom: 64px; left: 64px; }
.pin-top-68    { top: 68px; }
.pin-bottom-68 { bottom: 68px; }
.pin-left-68   { left: 68px; }
.pin-right-68  { right: 68px; }
.pin-all-68    { top: 68px; right: 68px; bottom: 68px; left: 68px; }
.pin-top-72    { top: 72px; }
.pin-bottom-72 { bottom: 72px; }
.pin-left-72   { left: 72px; }
.pin-right-72  { right: 72px; }
.pin-all-72    { top: 72px; right: 72px; bottom: 72px; left: 72px; }
.pin-top-76    { top: 76px; }
.pin-bottom-76 { bottom: 76px; }
.pin-left-76   { left: 76px; }
.pin-right-76  { right: 76px; }
.pin-all-76    { top: 76px; right: 76px; bottom: 76px; left: 76px; }
.pin-top-80    { top: 80px; }
.pin-bottom-80 { bottom: 80px; }
.pin-left-80   { left: 80px; }
.pin-right-80  { right: 80px; }
.pin-all-80    { top: 80px; right: 80px; bottom: 80px; left: 80px; }
.pin-top-84    { top: 84px; }
.pin-bottom-84 { bottom: 84px; }
.pin-left-84   { left: 84px; }
.pin-right-84  { right: 84px; }
.pin-all-84    { top: 84px; right: 84px; bottom: 84px; left: 84px; }
.pin-top-88    { top: 88px; }
.pin-bottom-88 { bottom: 88px; }
.pin-left-88   { left: 88px; }
.pin-right-88  { right: 88px; }
.pin-all-88    { top: 88px; right: 88px; bottom: 88px; left: 88px; }
.pin-top-92    { top: 92px; }
.pin-bottom-92 { bottom: 92px; }
.pin-left-92   { left: 92px; }
.pin-right-92  { right: 92px; }
.pin-all-92    { top: 92px; right: 92px; bottom: 92px; left: 92px; }
.pin-top-96    { top: 96px; }
.pin-bottom-96 { bottom: 96px; }
.pin-left-96   { left: 96px; }
.pin-right-96  { right: 96px; }
.pin-all-96    { top: 96px; right: 96px; bottom: 96px; left: 96px; }
.pin-top-100    { top: 100px; }
.pin-bottom-100 { bottom: 100px; }
.pin-left-100   { left: 100px; }
.pin-right-100  { right: 100px; }
.pin-all-100    { top: 100px; right: 100px; bottom: 100px; left: 100px; }
.pin-top-104    { top: 104px; }
.pin-bottom-104 { bottom: 104px; }
.pin-left-104   { left: 104px; }
.pin-right-104  { right: 104px; }
.pin-all-104    { top: 104px; right: 104px; bottom: 104px; left: 104px; }
.pin-top-108    { top: 108px; }
.pin-bottom-108 { bottom: 108px; }
.pin-left-108   { left: 108px; }
.pin-right-108  { right: 108px; }
.pin-all-108    { top: 108px; right: 108px; bottom: 108px; left: 108px; }
.pin-top-112    { top: 112px; }
.pin-bottom-112 { bottom: 112px; }
.pin-left-112   { left: 112px; }
.pin-right-112  { right: 112px; }
.pin-all-112    { top: 112px; right: 112px; bottom: 112px; left: 112px; }
.pin-top-116    { top: 116px; }
.pin-bottom-116 { bottom: 116px; }
.pin-left-116   { left: 116px; }
.pin-right-116  { right: 116px; }
.pin-all-116    { top: 116px; right: 116px; bottom: 116px; left: 116px; }
.pin-top-120    { top: 120px; }
.pin-bottom-120 { bottom: 120px; }
.pin-left-120   { left: 120px; }
.pin-right-120  { right: 120px; }
.pin-all-120    { top: 120px; right: 120px; bottom: 120px; left: 120px; }
.pin-top-124    { top: 124px; }
.pin-bottom-124 { bottom: 124px; }
.pin-left-124   { left: 124px; }
.pin-right-124  { right: 124px; }
.pin-all-124    { top: 124px; right: 124px; bottom: 124px; left: 124px; }
.pin-top-128    { top: 128px; }
.pin-bottom-128 { bottom: 128px; }
.pin-left-128   { left: 128px; }
.pin-right-128  { right: 128px; }
.pin-all-128    { top: 128px; right: 128px; bottom: 128px; left: 128px; }
.pin-top-132    { top: 132px; }
.pin-bottom-132 { bottom: 132px; }
.pin-left-132   { left: 132px; }
.pin-right-132  { right: 132px; }
.pin-all-132    { top: 132px; right: 132px; bottom: 132px; left: 132px; }
.pin-top-136    { top: 136px; }
.pin-bottom-136 { bottom: 136px; }
.pin-left-136   { left: 136px; }
.pin-right-136  { right: 136px; }
.pin-all-136    { top: 136px; right: 136px; bottom: 136px; left: 136px; }
.pin-top-140    { top: 140px; }
.pin-bottom-140 { bottom: 140px; }
.pin-left-140   { left: 140px; }
.pin-right-140  { right: 140px; }
.pin-all-140    { top: 140px; right: 140px; bottom: 140px; left: 140px; }
.pin-top-144    { top: 144px; }
.pin-bottom-144 { bottom: 144px; }
.pin-left-144   { left: 144px; }
.pin-right-144  { right: 144px; }
.pin-all-144    { top: 144px; right: 144px; bottom: 144px; left: 144px; }
.pin-top-148    { top: 148px; }
.pin-bottom-148 { bottom: 148px; }
.pin-left-148   { left: 148px; }
.pin-right-148  { right: 148px; }
.pin-all-148    { top: 148px; right: 148px; bottom: 148px; left: 148px; }
.pin-top-152    { top: 152px; }
.pin-bottom-152 { bottom: 152px; }
.pin-left-152   { left: 152px; }
.pin-right-152  { right: 152px; }
.pin-all-152    { top: 152px; right: 152px; bottom: 152px; left: 152px; }
.pin-top-156    { top: 156px; }
.pin-bottom-156 { bottom: 156px; }
.pin-left-156   { left: 156px; }
.pin-right-156  { right: 156px; }
.pin-all-156    { top: 156px; right: 156px; bottom: 156px; left: 156px; }
.pin-top-160    { top: 160px; }
.pin-bottom-160 { bottom: 160px; }
.pin-left-160   { left: 160px; }
.pin-right-160  { right: 160px; }
.pin-all-160    { top: 160px; right: 160px; bottom: 160px; left: 160px; }
.pin-top-164    { top: 164px; }
.pin-bottom-164 { bottom: 164px; }
.pin-left-164   { left: 164px; }
.pin-right-164  { right: 164px; }
.pin-all-164    { top: 164px; right: 164px; bottom: 164px; left: 164px; }
.pin-top-168    { top: 168px; }
.pin-bottom-168 { bottom: 168px; }
.pin-left-168   { left: 168px; }
.pin-right-168  { right: 168px; }
.pin-all-168    { top: 168px; right: 168px; bottom: 168px; left: 168px; }
.pin-top-172    { top: 172px; }
.pin-bottom-172 { bottom: 172px; }
.pin-left-172   { left: 172px; }
.pin-right-172  { right: 172px; }
.pin-all-172    { top: 172px; right: 172px; bottom: 172px; left: 172px; }
.pin-top-176    { top: 176px; }
.pin-bottom-176 { bottom: 176px; }
.pin-left-176   { left: 176px; }
.pin-right-176  { right: 176px; }
.pin-all-176    { top: 176px; right: 176px; bottom: 176px; left: 176px; }
.pin-top-180    { top: 180px; }
.pin-bottom-180 { bottom: 180px; }
.pin-left-180   { left: 180px; }
.pin-right-180  { right: 180px; }
.pin-all-180    { top: 180px; right: 180px; bottom: 180px; left: 180px; }
.pin-top-184    { top: 184px; }
.pin-bottom-184 { bottom: 184px; }
.pin-left-184   { left: 184px; }
.pin-right-184  { right: 184px; }
.pin-all-184    { top: 184px; right: 184px; bottom: 184px; left: 184px; }
.pin-top-188    { top: 188px; }
.pin-bottom-188 { bottom: 188px; }
.pin-left-188   { left: 188px; }
.pin-right-188  { right: 188px; }
.pin-all-188    { top: 188px; right: 188px; bottom: 188px; left: 188px; }
.pin-top-192    { top: 192px; }
.pin-bottom-192 { bottom: 192px; }
.pin-left-192   { left: 192px; }
.pin-right-192  { right: 192px; }
.pin-all-192    { top: 192px; right: 192px; bottom: 192px; left: 192px; }
.pin-top-196    { top: 196px; }
.pin-bottom-196 { bottom: 196px; }
.pin-left-196   { left: 196px; }
.pin-right-196  { right: 196px; }
.pin-all-196    { top: 196px; right: 196px; bottom: 196px; left: 196px; }
.pin-top-200    { top: 200px; }
.pin-bottom-200 { bottom: 200px; }
.pin-left-200   { left: 200px; }
.pin-right-200  { right: 200px; }
.pin-all-200    { top: 200px; right: 200px; bottom: 200px; left: 200px; }
.pin-top-auto    { top: auto; }
.pin-bottom-auto { bottom: auto; }
.pin-left-auto   { left: auto; }
.pin-right-auto  { right: auto; }
.pin-center      { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pin-center-x    { left: 50%; transform: translateX(-50%); }
.pin-center-y    { top: 50%; transform: translateY(-50%); }
.pin-top-full    { top: 100%; }
.pin-bottom-full { bottom: 100%; }
.pin-left-full   { left: 100%; }
.pin-right-full  { right: 100%; }

/* ── Layer (z-index) ── */
.layer-0 { z-index: 0; }
.layer-1 { z-index: 1; }
.layer-2 { z-index: 2; }
.layer-3 { z-index: 3; }
.layer-5 { z-index: 5; }
.layer-10 { z-index: 10; }
.layer-20 { z-index: 20; }
.layer-30 { z-index: 30; }
.layer-40 { z-index: 40; }
.layer-50 { z-index: 50; }
.layer-100 { z-index: 100; }
.layer-200 { z-index: 200; }
.layer-500 { z-index: 500; }
.layer-999 { z-index: 999; }
.layer-1000 { z-index: 1000; }
.layer-9999 { z-index: 9999; }
.layer-auto { z-index: auto; }

/* ── Z-index (standard aliases) ── */
.z-0    { z-index: 0; }
.z-10   { z-index: 10; }
.z-20   { z-index: 20; }
.z-30   { z-index: 30; }
.z-40   { z-index: 40; }
.z-50   { z-index: 50; }
.z-100  { z-index: 100; }
.z-auto { z-index: auto; }

/* ── Overflow ── */
.overflow-auto    { overflow: auto; }
.overflow-hidden  { overflow: hidden; }
.overflow-scroll  { overflow: scroll; }
.overflow-visible { overflow: visible; }
.overflow-clip    { overflow: clip; }
.overflow-x-auto    { overflow-x: auto; }
.overflow-x-hidden  { overflow-x: hidden; }
.overflow-x-scroll  { overflow-x: scroll; }
.overflow-x-visible { overflow-x: visible; }
.overflow-y-auto    { overflow-y: auto; }
.overflow-y-hidden  { overflow-y: hidden; }
.overflow-y-scroll  { overflow-y: scroll; }
.overflow-y-visible { overflow-y: visible; }


/* ── Opacity ── */
.opacity-0 { opacity: 0; }
.opacity-5 { opacity: 0.05; }
.opacity-10 { opacity: 0.1; }
.opacity-15 { opacity: 0.15; }
.opacity-20 { opacity: 0.2; }
.opacity-25 { opacity: 0.25; }
.opacity-30 { opacity: 0.3; }
.opacity-35 { opacity: 0.35; }
.opacity-40 { opacity: 0.4; }
.opacity-45 { opacity: 0.45; }
.opacity-50 { opacity: 0.5; }
.opacity-55 { opacity: 0.55; }
.opacity-60 { opacity: 0.6; }
.opacity-65 { opacity: 0.65; }
.opacity-70 { opacity: 0.7; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.8; }
.opacity-85 { opacity: 0.85; }
.opacity-90 { opacity: 0.9; }
.opacity-95 { opacity: 0.95; }
.opacity-100 { opacity: 1; }

/* ── Box Shadow ── */
.add-shadow-sm  { box-shadow: var(--santy-shadow-sm); }
.add-shadow     { box-shadow: var(--santy-shadow); }
.add-shadow-md  { box-shadow: var(--santy-shadow-md); }
.add-shadow-lg  { box-shadow: var(--santy-shadow-lg); }
.add-shadow-xl  { box-shadow: var(--santy-shadow-xl); }
.add-shadow-inner { box-shadow: var(--santy-shadow-inner); }
.add-shadow-none  { box-shadow: none; }
.no-shadow        { box-shadow: none; }

/* ── Drop Shadow (filter) ── */
.drop-shadow-sm  { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05)); }
.drop-shadow     { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)); }
.drop-shadow-md  { filter: drop-shadow(0 4px 3px rgba(0,0,0,0.07)); }
.drop-shadow-lg  { filter: drop-shadow(0 10px 8px rgba(0,0,0,0.04)); }
.drop-shadow-xl  { filter: drop-shadow(0 20px 13px rgba(0,0,0,0.03)); }
.drop-shadow-none { filter: drop-shadow(0 0 #0000); }

/* ── Text Shadow ── */
.text-shadow-sm  { text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.text-shadow     { text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.text-shadow-lg  { text-shadow: 0 4px 8px rgba(0,0,0,0.4); }
.text-shadow-none{ text-shadow: none; }


/* ── Transition ── */
.transition-fast   { transition: var(--santy-transition-fast); }
.transition-normal { transition: var(--santy-transition-normal); }
.transition-slow   { transition: var(--santy-transition-slow); }
.transition-none   { transition: none; }
.transition-colors { transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; }
.transition-opacity{ transition: opacity 0.3s ease; }
.transition-transform{ transition: transform 0.3s ease; }

/* ── Transform ── */
.flip-horizontal  { transform: scaleX(-1); }
.flip-vertical    { transform: scaleY(-1); }
.rotate-45        { transform: rotate(45deg); }
.rotate-90        { transform: rotate(90deg); }
.rotate-135       { transform: rotate(135deg); }
.rotate-180       { transform: rotate(180deg); }
.rotate-270       { transform: rotate(270deg); }
.rotate-minus-45  { transform: rotate(-45deg); }
.rotate-minus-90  { transform: rotate(-90deg); }
.scale-75         { transform: scale(0.75); }
.scale-90         { transform: scale(0.90); }
.scale-95         { transform: scale(0.95); }
.scale-100        { transform: scale(1); }
.scale-105        { transform: scale(1.05); }
.scale-110        { transform: scale(1.10); }
.scale-125        { transform: scale(1.25); }
.scale-150        { transform: scale(1.50); }
.skew-x-3        { transform: skewX(3deg); }
.skew-x-6        { transform: skewX(6deg); }
.skew-x-12       { transform: skewX(12deg); }
.skew-y-3        { transform: skewY(3deg); }
.skew-y-6        { transform: skewY(6deg); }
.skew-y-12       { transform: skewY(12deg); }
.transform-origin-center      { transform-origin: center; }
.transform-origin-top         { transform-origin: top; }
.transform-origin-top-right   { transform-origin: top right; }
.transform-origin-right       { transform-origin: right; }
.transform-origin-bottom-right{ transform-origin: bottom right; }
.transform-origin-bottom      { transform-origin: bottom; }
.transform-origin-bottom-left { transform-origin: bottom left; }
.transform-origin-left        { transform-origin: left; }
.transform-origin-top-left    { transform-origin: top left; }

/* ── Animation ── */
.animate-spin     { animation: santy-spin 1s linear infinite; }
.animate-ping     { animation: santy-ping 1s cubic-bezier(0,0,0.2,1) infinite; }
.animate-pulse    { animation: santy-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
.animate-bounce   { animation: santy-bounce 1s infinite; }
.animate-fade-in  { animation: santy-fade-in 0.5s ease; }
.animate-fade-out { animation: santy-fade-out 0.5s ease; }
.animate-slide-up { animation: santy-slide-up 0.4s ease; }
.animate-slide-down { animation: santy-slide-down 0.4s ease; }
.animate-zoom-in  { animation: santy-zoom-in 0.3s ease; }
.animation-paused { animation-play-state: paused; }
.animation-none   { animation: none; }

@keyframes santy-spin    { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes santy-ping    { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes santy-pulse   { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes santy-bounce  { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,0.2,1); } }
@keyframes santy-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes santy-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes santy-slide-up   { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes santy-slide-down { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes santy-zoom-in    { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }


/* ── Cursor ── */
.cursor-auto        { cursor: auto; }
.cursor-default     { cursor: default; }
.cursor-pointer     { cursor: pointer; }
.cursor-wait        { cursor: wait; }
.cursor-text        { cursor: text; }
.cursor-move        { cursor: move; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-crosshair   { cursor: crosshair; }
.cursor-grab        { cursor: grab; }
.cursor-grabbing    { cursor: grabbing; }
.cursor-zoom-in     { cursor: zoom-in; }
.cursor-zoom-out    { cursor: zoom-out; }
.cursor-help        { cursor: help; }
.cursor-none        { cursor: none; }


/* ── Object Fit ── */
.fit-cover   { object-fit: cover; }
.fit-contain { object-fit: contain; }
.fit-fill    { object-fit: fill; }
.fit-none    { object-fit: none; }
.fit-scale   { object-fit: scale-down; }
/* Standard object-fit-* aliases */
.object-fit-cover   { object-fit: cover; }
.object-fit-contain { object-fit: contain; }
.object-fit-fill    { object-fit: fill; }
.object-fit-none    { object-fit: none; }
.object-fit-scale   { object-fit: scale-down; }

/* ── Object Position ── */
.object-top              { object-position: top; }
.object-bottom           { object-position: bottom; }
.object-left             { object-position: left; }
.object-right            { object-position: right; }
.object-center           { object-position: center; }
.object-position-top     { object-position: top; }
.object-position-bottom  { object-position: bottom; }
.object-position-center  { object-position: center; }
.object-position-left    { object-position: left; }
.object-position-right   { object-position: right; }


/* ── Aspect Ratio ── */
.ratio-square      { aspect-ratio: 1 / 1; }
.ratio-video       { aspect-ratio: 16 / 9; }
.ratio-portrait    { aspect-ratio: 9 / 16; }
.ratio-4-3         { aspect-ratio: 4 / 3; }
.ratio-3-2         { aspect-ratio: 3 / 2; }
.ratio-21-9        { aspect-ratio: 21 / 9; }
.ratio-auto        { aspect-ratio: auto; }
/* Standard aspect-ratio-* aliases */
.aspect-ratio-1-1  { aspect-ratio: 1 / 1; }
.aspect-ratio-16-9 { aspect-ratio: 16 / 9; }
.aspect-ratio-4-3  { aspect-ratio: 4 / 3; }
.aspect-ratio-3-2  { aspect-ratio: 3 / 2; }
.aspect-ratio-9-16 { aspect-ratio: 9 / 16; }
.aspect-square     { aspect-ratio: 1 / 1; }
.aspect-video      { aspect-ratio: 16 / 9; }


/* ── Filter ── */
.blur-sm  { filter: blur(4px); }
.blur     { filter: blur(8px); }
.blur-md  { filter: blur(12px); }
.blur-lg  { filter: blur(16px); }
.blur-xl  { filter: blur(24px); }
.blur-none{ filter: blur(0); }
.brightness-50  { filter: brightness(0.5); }
.brightness-75  { filter: brightness(0.75); }
.brightness-90  { filter: brightness(0.9); }
.brightness-100 { filter: brightness(1); }
.brightness-110 { filter: brightness(1.1); }
.brightness-125 { filter: brightness(1.25); }
.brightness-150 { filter: brightness(1.5); }
.brightness-200 { filter: brightness(2); }
.contrast-50    { filter: contrast(0.5); }
.contrast-75    { filter: contrast(0.75); }
.contrast-100   { filter: contrast(1); }
.contrast-125   { filter: contrast(1.25); }
.contrast-150   { filter: contrast(1.5); }
.contrast-200   { filter: contrast(2); }
.grayscale      { filter: grayscale(100%); }
.grayscale-0    { filter: grayscale(0); }
.sepia          { filter: sepia(100%); }
.sepia-0        { filter: sepia(0); }
.invert         { filter: invert(100%); }
.invert-0       { filter: invert(0); }
.saturate-0     { filter: saturate(0); }
.saturate-50    { filter: saturate(0.5); }
.saturate-100   { filter: saturate(1); }
.saturate-150   { filter: saturate(1.5); }
.saturate-200   { filter: saturate(2); }
.hue-rotate-30  { filter: hue-rotate(30deg); }
.hue-rotate-60  { filter: hue-rotate(60deg); }
.hue-rotate-90  { filter: hue-rotate(90deg); }
.hue-rotate-180 { filter: hue-rotate(180deg); }


/* ── Pointer Events ── */
.pointer-none         { pointer-events: none; }
.pointer-auto         { pointer-events: auto; }
.pointer-all          { pointer-events: all; }
/* Standard pointer-events-* aliases */
.pointer-events-none  { pointer-events: none; }
.pointer-events-auto  { pointer-events: auto; }

/* ── User Select ── */
.select-none  { user-select: none; }
.select-text  { user-select: text; }
.select-all   { user-select: all; }
.select-auto  { user-select: auto; }

/* ── Resize ── */
.resize-none { resize: none; }
.resize      { resize: both; }
.resize-x    { resize: horizontal; }
.resize-y    { resize: vertical; }

/* ── Appearance ── */
.appearance-none { appearance: none; -webkit-appearance: none; }
.appearance-auto { appearance: auto; }

/* ── Outline ── */
.outline-none     { outline: none; }
.outline          { outline: 2px solid currentColor; }
.outline-dashed   { outline: 2px dashed currentColor; }
.outline-offset-2 { outline-offset: 2px; }
.outline-offset-4 { outline-offset: 4px; }

/* ── List Style ── */
.list-none   { list-style-type: none; padding-left: 0; }
.list-disc   { list-style-type: disc; }
.list-decimal{ list-style-type: decimal; }
.list-inside { list-style-position: inside; }
.list-outside{ list-style-position: outside; }

/* ── Table ── */
.table-auto    { table-layout: auto; }
.table-fixed   { table-layout: fixed; }
.border-collapse{ border-collapse: collapse; }
.border-separate{ border-collapse: separate; }

/* ── Columns ── */
.columns-auto { columns: auto; }

.columns-1 { columns: 1; }
.columns-2 { columns: 2; }
.columns-3 { columns: 3; }
.columns-4 { columns: 4; }
.columns-5 { columns: 5; }
.columns-6 { columns: 6; }

/* ── Screen Reader Only ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}
.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ── Break ── */
.break-before-auto   { break-before: auto; }
.break-before-always { break-before: always; }
.break-before-avoid  { break-before: avoid; }
.break-after-auto    { break-after: auto; }
.break-after-always  { break-after: always; }
.break-after-avoid   { break-after: avoid; }
.break-inside-auto   { break-inside: auto; }
.break-inside-avoid  { break-inside: avoid; }

/* ── Isolation ── */
.isolate          { isolation: isolate; }
.isolation-auto   { isolation: auto; }

/* ── Mix Blend Mode ── */
.blend-normal      { mix-blend-mode: normal; }
.blend-multiply    { mix-blend-mode: multiply; }
.blend-screen      { mix-blend-mode: screen; }
.blend-overlay     { mix-blend-mode: overlay; }
.blend-darken      { mix-blend-mode: darken; }
.blend-lighten     { mix-blend-mode: lighten; }
.blend-difference  { mix-blend-mode: difference; }
.blend-exclusion   { mix-blend-mode: exclusion; }
.blend-hue         { mix-blend-mode: hue; }
.blend-saturation  { mix-blend-mode: saturation; }
.blend-color       { mix-blend-mode: color; }
.blend-luminosity  { mix-blend-mode: luminosity; }

/* ── Will Change ── */
.will-change-auto      { will-change: auto; }
.will-change-scroll    { will-change: scroll-position; }
.will-change-contents  { will-change: contents; }
.will-change-transform { will-change: transform; }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE VARIANTS
   Usage: class="on-mobile:make-hidden md:make-flex lg:grid-cols-3"
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
  .on-mobile\:make-block { display:block; }
  .on-mobile\:make-inline { display:inline; }
  .on-mobile\:make-inline-block { display:inline-block; }
  .on-mobile\:make-flex { display:flex; }
  .on-mobile\:make-grid { display:grid; }
  .on-mobile\:make-hidden { display:none; }
  .on-mobile\:flex-row { flex-direction:row; }
  .on-mobile\:flex-column { flex-direction:column; }
  .on-mobile\:flex-wrap { flex-wrap:wrap; }
  .on-mobile\:flex-nowrap { flex-wrap:nowrap; }
  .on-mobile\:align-center { align-items:center; }
  .on-mobile\:align-start { align-items:flex-start; }
  .on-mobile\:align-end { align-items:flex-end; }
  .on-mobile\:justify-center { justify-content:center; }
  .on-mobile\:justify-between { justify-content:space-between; }
  .on-mobile\:justify-start { justify-content:flex-start; }
  .on-mobile\:justify-end { justify-content:flex-end; }
  .on-mobile\:text-left { text-align:left; }
  .on-mobile\:text-center { text-align:center; }
  .on-mobile\:text-right { text-align:right; }
  .on-mobile\:add-padding-0 { padding:0px; }
  .on-mobile\:add-padding-x-0 { padding-left:0px; padding-right:0px; }
  .on-mobile\:add-padding-y-0 { padding-top:0px; padding-bottom:0px; }
  .on-mobile\:add-margin-0 { margin:0px; }
  .on-mobile\:add-margin-x-0 { margin-left:0px; margin-right:0px; }
  .on-mobile\:add-margin-y-0 { margin-top:0px; margin-bottom:0px; }
  .on-mobile\:gap-0 { gap:0px; }
  .on-mobile\:add-padding-4 { padding:4px; }
  .on-mobile\:add-padding-x-4 { padding-left:4px; padding-right:4px; }
  .on-mobile\:add-padding-y-4 { padding-top:4px; padding-bottom:4px; }
  .on-mobile\:add-margin-4 { margin:4px; }
  .on-mobile\:add-margin-x-4 { margin-left:4px; margin-right:4px; }
  .on-mobile\:add-margin-y-4 { margin-top:4px; margin-bottom:4px; }
  .on-mobile\:gap-4 { gap:4px; }
  .on-mobile\:add-padding-8 { padding:8px; }
  .on-mobile\:add-padding-x-8 { padding-left:8px; padding-right:8px; }
  .on-mobile\:add-padding-y-8 { padding-top:8px; padding-bottom:8px; }
  .on-mobile\:add-margin-8 { margin:8px; }
  .on-mobile\:add-margin-x-8 { margin-left:8px; margin-right:8px; }
  .on-mobile\:add-margin-y-8 { margin-top:8px; margin-bottom:8px; }
  .on-mobile\:gap-8 { gap:8px; }
  .on-mobile\:add-padding-12 { padding:12px; }
  .on-mobile\:add-padding-x-12 { padding-left:12px; padding-right:12px; }
  .on-mobile\:add-padding-y-12 { padding-top:12px; padding-bottom:12px; }
  .on-mobile\:add-margin-12 { margin:12px; }
  .on-mobile\:add-margin-x-12 { margin-left:12px; margin-right:12px; }
  .on-mobile\:add-margin-y-12 { margin-top:12px; margin-bottom:12px; }
  .on-mobile\:gap-12 { gap:12px; }
  .on-mobile\:add-padding-16 { padding:16px; }
  .on-mobile\:add-padding-x-16 { padding-left:16px; padding-right:16px; }
  .on-mobile\:add-padding-y-16 { padding-top:16px; padding-bottom:16px; }
  .on-mobile\:add-margin-16 { margin:16px; }
  .on-mobile\:add-margin-x-16 { margin-left:16px; margin-right:16px; }
  .on-mobile\:add-margin-y-16 { margin-top:16px; margin-bottom:16px; }
  .on-mobile\:gap-16 { gap:16px; }
  .on-mobile\:add-padding-20 { padding:20px; }
  .on-mobile\:add-padding-x-20 { padding-left:20px; padding-right:20px; }
  .on-mobile\:add-padding-y-20 { padding-top:20px; padding-bottom:20px; }
  .on-mobile\:add-margin-20 { margin:20px; }
  .on-mobile\:add-margin-x-20 { margin-left:20px; margin-right:20px; }
  .on-mobile\:add-margin-y-20 { margin-top:20px; margin-bottom:20px; }
  .on-mobile\:gap-20 { gap:20px; }
  .on-mobile\:add-padding-24 { padding:24px; }
  .on-mobile\:add-padding-x-24 { padding-left:24px; padding-right:24px; }
  .on-mobile\:add-padding-y-24 { padding-top:24px; padding-bottom:24px; }
  .on-mobile\:add-margin-24 { margin:24px; }
  .on-mobile\:add-margin-x-24 { margin-left:24px; margin-right:24px; }
  .on-mobile\:add-margin-y-24 { margin-top:24px; margin-bottom:24px; }
  .on-mobile\:gap-24 { gap:24px; }
  .on-mobile\:add-padding-32 { padding:32px; }
  .on-mobile\:add-padding-x-32 { padding-left:32px; padding-right:32px; }
  .on-mobile\:add-padding-y-32 { padding-top:32px; padding-bottom:32px; }
  .on-mobile\:add-margin-32 { margin:32px; }
  .on-mobile\:add-margin-x-32 { margin-left:32px; margin-right:32px; }
  .on-mobile\:add-margin-y-32 { margin-top:32px; margin-bottom:32px; }
  .on-mobile\:gap-32 { gap:32px; }
  .on-mobile\:add-padding-40 { padding:40px; }
  .on-mobile\:add-padding-x-40 { padding-left:40px; padding-right:40px; }
  .on-mobile\:add-padding-y-40 { padding-top:40px; padding-bottom:40px; }
  .on-mobile\:add-margin-40 { margin:40px; }
  .on-mobile\:add-margin-x-40 { margin-left:40px; margin-right:40px; }
  .on-mobile\:add-margin-y-40 { margin-top:40px; margin-bottom:40px; }
  .on-mobile\:gap-40 { gap:40px; }
  .on-mobile\:add-padding-48 { padding:48px; }
  .on-mobile\:add-padding-x-48 { padding-left:48px; padding-right:48px; }
  .on-mobile\:add-padding-y-48 { padding-top:48px; padding-bottom:48px; }
  .on-mobile\:add-margin-48 { margin:48px; }
  .on-mobile\:add-margin-x-48 { margin-left:48px; margin-right:48px; }
  .on-mobile\:add-margin-y-48 { margin-top:48px; margin-bottom:48px; }
  .on-mobile\:gap-48 { gap:48px; }
  .on-mobile\:add-padding-64 { padding:64px; }
  .on-mobile\:add-padding-x-64 { padding-left:64px; padding-right:64px; }
  .on-mobile\:add-padding-y-64 { padding-top:64px; padding-bottom:64px; }
  .on-mobile\:add-margin-64 { margin:64px; }
  .on-mobile\:add-margin-x-64 { margin-left:64px; margin-right:64px; }
  .on-mobile\:add-margin-y-64 { margin-top:64px; margin-bottom:64px; }
  .on-mobile\:gap-64 { gap:64px; }
  .on-mobile\:grid-cols-1 { grid-template-columns:repeat(1,minmax(0,1fr)); }
  .on-mobile\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .on-mobile\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .on-mobile\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .on-mobile\:grid-cols-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .on-mobile\:grid-cols-6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .on-mobile\:grid-cols-7 { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .on-mobile\:grid-cols-8 { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .on-mobile\:grid-cols-9 { grid-template-columns:repeat(9,minmax(0,1fr)); }
  .on-mobile\:grid-cols-10 { grid-template-columns:repeat(10,minmax(0,1fr)); }
  .on-mobile\:grid-cols-11 { grid-template-columns:repeat(11,minmax(0,1fr)); }
  .on-mobile\:grid-cols-12 { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .on-mobile\:set-text-12 { font-size:12px; }
  .on-mobile\:set-text-14 { font-size:14px; }
  .on-mobile\:set-text-16 { font-size:16px; }
  .on-mobile\:set-text-18 { font-size:18px; }
  .on-mobile\:set-text-20 { font-size:20px; }
  .on-mobile\:set-text-24 { font-size:24px; }
  .on-mobile\:set-text-28 { font-size:28px; }
  .on-mobile\:set-text-32 { font-size:32px; }
  .on-mobile\:set-text-36 { font-size:36px; }
  .on-mobile\:set-text-40 { font-size:40px; }
  .on-mobile\:set-text-48 { font-size:48px; }
  .on-mobile\:set-text-56 { font-size:56px; }
  .on-mobile\:set-text-64 { font-size:64px; }
  .on-mobile\:set-width-full { width:100%; }
  .on-mobile\:set-width-auto { width:auto; }
  .on-mobile\:set-width-screen { width:100vw; }
  .on-mobile\:set-width-0 { width:0px; }
  .on-mobile\:set-height-0 { height:0px; }
  .on-mobile\:set-width-4 { width:4px; }
  .on-mobile\:set-height-4 { height:4px; }
  .on-mobile\:set-width-8 { width:8px; }
  .on-mobile\:set-height-8 { height:8px; }
  .on-mobile\:set-width-12 { width:12px; }
  .on-mobile\:set-height-12 { height:12px; }
  .on-mobile\:set-width-16 { width:16px; }
  .on-mobile\:set-height-16 { height:16px; }
  .on-mobile\:set-width-20 { width:20px; }
  .on-mobile\:set-height-20 { height:20px; }
  .on-mobile\:set-width-24 { width:24px; }
  .on-mobile\:set-height-24 { height:24px; }
  .on-mobile\:set-width-32 { width:32px; }
  .on-mobile\:set-height-32 { height:32px; }
  .on-mobile\:set-width-40 { width:40px; }
  .on-mobile\:set-height-40 { height:40px; }
  .on-mobile\:set-width-48 { width:48px; }
  .on-mobile\:set-height-48 { height:48px; }
  .on-mobile\:set-width-64 { width:64px; }
  .on-mobile\:set-height-64 { height:64px; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .on-tablet\:make-block { display:block; }
  .on-tablet\:make-inline { display:inline; }
  .on-tablet\:make-inline-block { display:inline-block; }
  .on-tablet\:make-flex { display:flex; }
  .on-tablet\:make-grid { display:grid; }
  .on-tablet\:make-hidden { display:none; }
  .on-tablet\:flex-row { flex-direction:row; }
  .on-tablet\:flex-column { flex-direction:column; }
  .on-tablet\:flex-wrap { flex-wrap:wrap; }
  .on-tablet\:flex-nowrap { flex-wrap:nowrap; }
  .on-tablet\:align-center { align-items:center; }
  .on-tablet\:align-start { align-items:flex-start; }
  .on-tablet\:align-end { align-items:flex-end; }
  .on-tablet\:justify-center { justify-content:center; }
  .on-tablet\:justify-between { justify-content:space-between; }
  .on-tablet\:justify-start { justify-content:flex-start; }
  .on-tablet\:justify-end { justify-content:flex-end; }
  .on-tablet\:text-left { text-align:left; }
  .on-tablet\:text-center { text-align:center; }
  .on-tablet\:text-right { text-align:right; }
  .on-tablet\:add-padding-0 { padding:0px; }
  .on-tablet\:add-padding-x-0 { padding-left:0px; padding-right:0px; }
  .on-tablet\:add-padding-y-0 { padding-top:0px; padding-bottom:0px; }
  .on-tablet\:add-margin-0 { margin:0px; }
  .on-tablet\:add-margin-x-0 { margin-left:0px; margin-right:0px; }
  .on-tablet\:add-margin-y-0 { margin-top:0px; margin-bottom:0px; }
  .on-tablet\:gap-0 { gap:0px; }
  .on-tablet\:add-padding-4 { padding:4px; }
  .on-tablet\:add-padding-x-4 { padding-left:4px; padding-right:4px; }
  .on-tablet\:add-padding-y-4 { padding-top:4px; padding-bottom:4px; }
  .on-tablet\:add-margin-4 { margin:4px; }
  .on-tablet\:add-margin-x-4 { margin-left:4px; margin-right:4px; }
  .on-tablet\:add-margin-y-4 { margin-top:4px; margin-bottom:4px; }
  .on-tablet\:gap-4 { gap:4px; }
  .on-tablet\:add-padding-8 { padding:8px; }
  .on-tablet\:add-padding-x-8 { padding-left:8px; padding-right:8px; }
  .on-tablet\:add-padding-y-8 { padding-top:8px; padding-bottom:8px; }
  .on-tablet\:add-margin-8 { margin:8px; }
  .on-tablet\:add-margin-x-8 { margin-left:8px; margin-right:8px; }
  .on-tablet\:add-margin-y-8 { margin-top:8px; margin-bottom:8px; }
  .on-tablet\:gap-8 { gap:8px; }
  .on-tablet\:add-padding-12 { padding:12px; }
  .on-tablet\:add-padding-x-12 { padding-left:12px; padding-right:12px; }
  .on-tablet\:add-padding-y-12 { padding-top:12px; padding-bottom:12px; }
  .on-tablet\:add-margin-12 { margin:12px; }
  .on-tablet\:add-margin-x-12 { margin-left:12px; margin-right:12px; }
  .on-tablet\:add-margin-y-12 { margin-top:12px; margin-bottom:12px; }
  .on-tablet\:gap-12 { gap:12px; }
  .on-tablet\:add-padding-16 { padding:16px; }
  .on-tablet\:add-padding-x-16 { padding-left:16px; padding-right:16px; }
  .on-tablet\:add-padding-y-16 { padding-top:16px; padding-bottom:16px; }
  .on-tablet\:add-margin-16 { margin:16px; }
  .on-tablet\:add-margin-x-16 { margin-left:16px; margin-right:16px; }
  .on-tablet\:add-margin-y-16 { margin-top:16px; margin-bottom:16px; }
  .on-tablet\:gap-16 { gap:16px; }
  .on-tablet\:add-padding-20 { padding:20px; }
  .on-tablet\:add-padding-x-20 { padding-left:20px; padding-right:20px; }
  .on-tablet\:add-padding-y-20 { padding-top:20px; padding-bottom:20px; }
  .on-tablet\:add-margin-20 { margin:20px; }
  .on-tablet\:add-margin-x-20 { margin-left:20px; margin-right:20px; }
  .on-tablet\:add-margin-y-20 { margin-top:20px; margin-bottom:20px; }
  .on-tablet\:gap-20 { gap:20px; }
  .on-tablet\:add-padding-24 { padding:24px; }
  .on-tablet\:add-padding-x-24 { padding-left:24px; padding-right:24px; }
  .on-tablet\:add-padding-y-24 { padding-top:24px; padding-bottom:24px; }
  .on-tablet\:add-margin-24 { margin:24px; }
  .on-tablet\:add-margin-x-24 { margin-left:24px; margin-right:24px; }
  .on-tablet\:add-margin-y-24 { margin-top:24px; margin-bottom:24px; }
  .on-tablet\:gap-24 { gap:24px; }
  .on-tablet\:add-padding-32 { padding:32px; }
  .on-tablet\:add-padding-x-32 { padding-left:32px; padding-right:32px; }
  .on-tablet\:add-padding-y-32 { padding-top:32px; padding-bottom:32px; }
  .on-tablet\:add-margin-32 { margin:32px; }
  .on-tablet\:add-margin-x-32 { margin-left:32px; margin-right:32px; }
  .on-tablet\:add-margin-y-32 { margin-top:32px; margin-bottom:32px; }
  .on-tablet\:gap-32 { gap:32px; }
  .on-tablet\:add-padding-40 { padding:40px; }
  .on-tablet\:add-padding-x-40 { padding-left:40px; padding-right:40px; }
  .on-tablet\:add-padding-y-40 { padding-top:40px; padding-bottom:40px; }
  .on-tablet\:add-margin-40 { margin:40px; }
  .on-tablet\:add-margin-x-40 { margin-left:40px; margin-right:40px; }
  .on-tablet\:add-margin-y-40 { margin-top:40px; margin-bottom:40px; }
  .on-tablet\:gap-40 { gap:40px; }
  .on-tablet\:add-padding-48 { padding:48px; }
  .on-tablet\:add-padding-x-48 { padding-left:48px; padding-right:48px; }
  .on-tablet\:add-padding-y-48 { padding-top:48px; padding-bottom:48px; }
  .on-tablet\:add-margin-48 { margin:48px; }
  .on-tablet\:add-margin-x-48 { margin-left:48px; margin-right:48px; }
  .on-tablet\:add-margin-y-48 { margin-top:48px; margin-bottom:48px; }
  .on-tablet\:gap-48 { gap:48px; }
  .on-tablet\:add-padding-64 { padding:64px; }
  .on-tablet\:add-padding-x-64 { padding-left:64px; padding-right:64px; }
  .on-tablet\:add-padding-y-64 { padding-top:64px; padding-bottom:64px; }
  .on-tablet\:add-margin-64 { margin:64px; }
  .on-tablet\:add-margin-x-64 { margin-left:64px; margin-right:64px; }
  .on-tablet\:add-margin-y-64 { margin-top:64px; margin-bottom:64px; }
  .on-tablet\:gap-64 { gap:64px; }
  .on-tablet\:grid-cols-1 { grid-template-columns:repeat(1,minmax(0,1fr)); }
  .on-tablet\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .on-tablet\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .on-tablet\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .on-tablet\:grid-cols-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .on-tablet\:grid-cols-6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .on-tablet\:grid-cols-7 { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .on-tablet\:grid-cols-8 { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .on-tablet\:grid-cols-9 { grid-template-columns:repeat(9,minmax(0,1fr)); }
  .on-tablet\:grid-cols-10 { grid-template-columns:repeat(10,minmax(0,1fr)); }
  .on-tablet\:grid-cols-11 { grid-template-columns:repeat(11,minmax(0,1fr)); }
  .on-tablet\:grid-cols-12 { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .on-tablet\:set-text-12 { font-size:12px; }
  .on-tablet\:set-text-14 { font-size:14px; }
  .on-tablet\:set-text-16 { font-size:16px; }
  .on-tablet\:set-text-18 { font-size:18px; }
  .on-tablet\:set-text-20 { font-size:20px; }
  .on-tablet\:set-text-24 { font-size:24px; }
  .on-tablet\:set-text-28 { font-size:28px; }
  .on-tablet\:set-text-32 { font-size:32px; }
  .on-tablet\:set-text-36 { font-size:36px; }
  .on-tablet\:set-text-40 { font-size:40px; }
  .on-tablet\:set-text-48 { font-size:48px; }
  .on-tablet\:set-text-56 { font-size:56px; }
  .on-tablet\:set-text-64 { font-size:64px; }
  .on-tablet\:set-width-full { width:100%; }
  .on-tablet\:set-width-auto { width:auto; }
  .on-tablet\:set-width-screen { width:100vw; }
  .on-tablet\:set-width-0 { width:0px; }
  .on-tablet\:set-height-0 { height:0px; }
  .on-tablet\:set-width-4 { width:4px; }
  .on-tablet\:set-height-4 { height:4px; }
  .on-tablet\:set-width-8 { width:8px; }
  .on-tablet\:set-height-8 { height:8px; }
  .on-tablet\:set-width-12 { width:12px; }
  .on-tablet\:set-height-12 { height:12px; }
  .on-tablet\:set-width-16 { width:16px; }
  .on-tablet\:set-height-16 { height:16px; }
  .on-tablet\:set-width-20 { width:20px; }
  .on-tablet\:set-height-20 { height:20px; }
  .on-tablet\:set-width-24 { width:24px; }
  .on-tablet\:set-height-24 { height:24px; }
  .on-tablet\:set-width-32 { width:32px; }
  .on-tablet\:set-height-32 { height:32px; }
  .on-tablet\:set-width-40 { width:40px; }
  .on-tablet\:set-height-40 { height:40px; }
  .on-tablet\:set-width-48 { width:48px; }
  .on-tablet\:set-height-48 { height:48px; }
  .on-tablet\:set-width-64 { width:64px; }
  .on-tablet\:set-height-64 { height:64px; }
}

@media (min-width: 1024px) {
  .on-desktop\:make-block { display:block; }
  .on-desktop\:make-inline { display:inline; }
  .on-desktop\:make-inline-block { display:inline-block; }
  .on-desktop\:make-flex { display:flex; }
  .on-desktop\:make-grid { display:grid; }
  .on-desktop\:make-hidden { display:none; }
  .on-desktop\:flex-row { flex-direction:row; }
  .on-desktop\:flex-column { flex-direction:column; }
  .on-desktop\:flex-wrap { flex-wrap:wrap; }
  .on-desktop\:flex-nowrap { flex-wrap:nowrap; }
  .on-desktop\:align-center { align-items:center; }
  .on-desktop\:align-start { align-items:flex-start; }
  .on-desktop\:align-end { align-items:flex-end; }
  .on-desktop\:justify-center { justify-content:center; }
  .on-desktop\:justify-between { justify-content:space-between; }
  .on-desktop\:justify-start { justify-content:flex-start; }
  .on-desktop\:justify-end { justify-content:flex-end; }
  .on-desktop\:text-left { text-align:left; }
  .on-desktop\:text-center { text-align:center; }
  .on-desktop\:text-right { text-align:right; }
  .on-desktop\:add-padding-0 { padding:0px; }
  .on-desktop\:add-padding-x-0 { padding-left:0px; padding-right:0px; }
  .on-desktop\:add-padding-y-0 { padding-top:0px; padding-bottom:0px; }
  .on-desktop\:add-margin-0 { margin:0px; }
  .on-desktop\:add-margin-x-0 { margin-left:0px; margin-right:0px; }
  .on-desktop\:add-margin-y-0 { margin-top:0px; margin-bottom:0px; }
  .on-desktop\:gap-0 { gap:0px; }
  .on-desktop\:add-padding-4 { padding:4px; }
  .on-desktop\:add-padding-x-4 { padding-left:4px; padding-right:4px; }
  .on-desktop\:add-padding-y-4 { padding-top:4px; padding-bottom:4px; }
  .on-desktop\:add-margin-4 { margin:4px; }
  .on-desktop\:add-margin-x-4 { margin-left:4px; margin-right:4px; }
  .on-desktop\:add-margin-y-4 { margin-top:4px; margin-bottom:4px; }
  .on-desktop\:gap-4 { gap:4px; }
  .on-desktop\:add-padding-8 { padding:8px; }
  .on-desktop\:add-padding-x-8 { padding-left:8px; padding-right:8px; }
  .on-desktop\:add-padding-y-8 { padding-top:8px; padding-bottom:8px; }
  .on-desktop\:add-margin-8 { margin:8px; }
  .on-desktop\:add-margin-x-8 { margin-left:8px; margin-right:8px; }
  .on-desktop\:add-margin-y-8 { margin-top:8px; margin-bottom:8px; }
  .on-desktop\:gap-8 { gap:8px; }
  .on-desktop\:add-padding-12 { padding:12px; }
  .on-desktop\:add-padding-x-12 { padding-left:12px; padding-right:12px; }
  .on-desktop\:add-padding-y-12 { padding-top:12px; padding-bottom:12px; }
  .on-desktop\:add-margin-12 { margin:12px; }
  .on-desktop\:add-margin-x-12 { margin-left:12px; margin-right:12px; }
  .on-desktop\:add-margin-y-12 { margin-top:12px; margin-bottom:12px; }
  .on-desktop\:gap-12 { gap:12px; }
  .on-desktop\:add-padding-16 { padding:16px; }
  .on-desktop\:add-padding-x-16 { padding-left:16px; padding-right:16px; }
  .on-desktop\:add-padding-y-16 { padding-top:16px; padding-bottom:16px; }
  .on-desktop\:add-margin-16 { margin:16px; }
  .on-desktop\:add-margin-x-16 { margin-left:16px; margin-right:16px; }
  .on-desktop\:add-margin-y-16 { margin-top:16px; margin-bottom:16px; }
  .on-desktop\:gap-16 { gap:16px; }
  .on-desktop\:add-padding-20 { padding:20px; }
  .on-desktop\:add-padding-x-20 { padding-left:20px; padding-right:20px; }
  .on-desktop\:add-padding-y-20 { padding-top:20px; padding-bottom:20px; }
  .on-desktop\:add-margin-20 { margin:20px; }
  .on-desktop\:add-margin-x-20 { margin-left:20px; margin-right:20px; }
  .on-desktop\:add-margin-y-20 { margin-top:20px; margin-bottom:20px; }
  .on-desktop\:gap-20 { gap:20px; }
  .on-desktop\:add-padding-24 { padding:24px; }
  .on-desktop\:add-padding-x-24 { padding-left:24px; padding-right:24px; }
  .on-desktop\:add-padding-y-24 { padding-top:24px; padding-bottom:24px; }
  .on-desktop\:add-margin-24 { margin:24px; }
  .on-desktop\:add-margin-x-24 { margin-left:24px; margin-right:24px; }
  .on-desktop\:add-margin-y-24 { margin-top:24px; margin-bottom:24px; }
  .on-desktop\:gap-24 { gap:24px; }
  .on-desktop\:add-padding-32 { padding:32px; }
  .on-desktop\:add-padding-x-32 { padding-left:32px; padding-right:32px; }
  .on-desktop\:add-padding-y-32 { padding-top:32px; padding-bottom:32px; }
  .on-desktop\:add-margin-32 { margin:32px; }
  .on-desktop\:add-margin-x-32 { margin-left:32px; margin-right:32px; }
  .on-desktop\:add-margin-y-32 { margin-top:32px; margin-bottom:32px; }
  .on-desktop\:gap-32 { gap:32px; }
  .on-desktop\:add-padding-40 { padding:40px; }
  .on-desktop\:add-padding-x-40 { padding-left:40px; padding-right:40px; }
  .on-desktop\:add-padding-y-40 { padding-top:40px; padding-bottom:40px; }
  .on-desktop\:add-margin-40 { margin:40px; }
  .on-desktop\:add-margin-x-40 { margin-left:40px; margin-right:40px; }
  .on-desktop\:add-margin-y-40 { margin-top:40px; margin-bottom:40px; }
  .on-desktop\:gap-40 { gap:40px; }
  .on-desktop\:add-padding-48 { padding:48px; }
  .on-desktop\:add-padding-x-48 { padding-left:48px; padding-right:48px; }
  .on-desktop\:add-padding-y-48 { padding-top:48px; padding-bottom:48px; }
  .on-desktop\:add-margin-48 { margin:48px; }
  .on-desktop\:add-margin-x-48 { margin-left:48px; margin-right:48px; }
  .on-desktop\:add-margin-y-48 { margin-top:48px; margin-bottom:48px; }
  .on-desktop\:gap-48 { gap:48px; }
  .on-desktop\:add-padding-64 { padding:64px; }
  .on-desktop\:add-padding-x-64 { padding-left:64px; padding-right:64px; }
  .on-desktop\:add-padding-y-64 { padding-top:64px; padding-bottom:64px; }
  .on-desktop\:add-margin-64 { margin:64px; }
  .on-desktop\:add-margin-x-64 { margin-left:64px; margin-right:64px; }
  .on-desktop\:add-margin-y-64 { margin-top:64px; margin-bottom:64px; }
  .on-desktop\:gap-64 { gap:64px; }
  .on-desktop\:grid-cols-1 { grid-template-columns:repeat(1,minmax(0,1fr)); }
  .on-desktop\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .on-desktop\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .on-desktop\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .on-desktop\:grid-cols-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .on-desktop\:grid-cols-6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .on-desktop\:grid-cols-7 { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .on-desktop\:grid-cols-8 { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .on-desktop\:grid-cols-9 { grid-template-columns:repeat(9,minmax(0,1fr)); }
  .on-desktop\:grid-cols-10 { grid-template-columns:repeat(10,minmax(0,1fr)); }
  .on-desktop\:grid-cols-11 { grid-template-columns:repeat(11,minmax(0,1fr)); }
  .on-desktop\:grid-cols-12 { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .on-desktop\:set-text-12 { font-size:12px; }
  .on-desktop\:set-text-14 { font-size:14px; }
  .on-desktop\:set-text-16 { font-size:16px; }
  .on-desktop\:set-text-18 { font-size:18px; }
  .on-desktop\:set-text-20 { font-size:20px; }
  .on-desktop\:set-text-24 { font-size:24px; }
  .on-desktop\:set-text-28 { font-size:28px; }
  .on-desktop\:set-text-32 { font-size:32px; }
  .on-desktop\:set-text-36 { font-size:36px; }
  .on-desktop\:set-text-40 { font-size:40px; }
  .on-desktop\:set-text-48 { font-size:48px; }
  .on-desktop\:set-text-56 { font-size:56px; }
  .on-desktop\:set-text-64 { font-size:64px; }
  .on-desktop\:set-width-full { width:100%; }
  .on-desktop\:set-width-auto { width:auto; }
  .on-desktop\:set-width-screen { width:100vw; }
  .on-desktop\:set-width-0 { width:0px; }
  .on-desktop\:set-height-0 { height:0px; }
  .on-desktop\:set-width-4 { width:4px; }
  .on-desktop\:set-height-4 { height:4px; }
  .on-desktop\:set-width-8 { width:8px; }
  .on-desktop\:set-height-8 { height:8px; }
  .on-desktop\:set-width-12 { width:12px; }
  .on-desktop\:set-height-12 { height:12px; }
  .on-desktop\:set-width-16 { width:16px; }
  .on-desktop\:set-height-16 { height:16px; }
  .on-desktop\:set-width-20 { width:20px; }
  .on-desktop\:set-height-20 { height:20px; }
  .on-desktop\:set-width-24 { width:24px; }
  .on-desktop\:set-height-24 { height:24px; }
  .on-desktop\:set-width-32 { width:32px; }
  .on-desktop\:set-height-32 { height:32px; }
  .on-desktop\:set-width-40 { width:40px; }
  .on-desktop\:set-height-40 { height:40px; }
  .on-desktop\:set-width-48 { width:48px; }
  .on-desktop\:set-height-48 { height:48px; }
  .on-desktop\:set-width-64 { width:64px; }
  .on-desktop\:set-height-64 { height:64px; }
}

@media (min-width: 1280px) {
  .on-wide\:make-block { display:block; }
  .on-wide\:make-inline { display:inline; }
  .on-wide\:make-inline-block { display:inline-block; }
  .on-wide\:make-flex { display:flex; }
  .on-wide\:make-grid { display:grid; }
  .on-wide\:make-hidden { display:none; }
  .on-wide\:flex-row { flex-direction:row; }
  .on-wide\:flex-column { flex-direction:column; }
  .on-wide\:flex-wrap { flex-wrap:wrap; }
  .on-wide\:flex-nowrap { flex-wrap:nowrap; }
  .on-wide\:align-center { align-items:center; }
  .on-wide\:align-start { align-items:flex-start; }
  .on-wide\:align-end { align-items:flex-end; }
  .on-wide\:justify-center { justify-content:center; }
  .on-wide\:justify-between { justify-content:space-between; }
  .on-wide\:justify-start { justify-content:flex-start; }
  .on-wide\:justify-end { justify-content:flex-end; }
  .on-wide\:text-left { text-align:left; }
  .on-wide\:text-center { text-align:center; }
  .on-wide\:text-right { text-align:right; }
  .on-wide\:add-padding-0 { padding:0px; }
  .on-wide\:add-padding-x-0 { padding-left:0px; padding-right:0px; }
  .on-wide\:add-padding-y-0 { padding-top:0px; padding-bottom:0px; }
  .on-wide\:add-margin-0 { margin:0px; }
  .on-wide\:add-margin-x-0 { margin-left:0px; margin-right:0px; }
  .on-wide\:add-margin-y-0 { margin-top:0px; margin-bottom:0px; }
  .on-wide\:gap-0 { gap:0px; }
  .on-wide\:add-padding-4 { padding:4px; }
  .on-wide\:add-padding-x-4 { padding-left:4px; padding-right:4px; }
  .on-wide\:add-padding-y-4 { padding-top:4px; padding-bottom:4px; }
  .on-wide\:add-margin-4 { margin:4px; }
  .on-wide\:add-margin-x-4 { margin-left:4px; margin-right:4px; }
  .on-wide\:add-margin-y-4 { margin-top:4px; margin-bottom:4px; }
  .on-wide\:gap-4 { gap:4px; }
  .on-wide\:add-padding-8 { padding:8px; }
  .on-wide\:add-padding-x-8 { padding-left:8px; padding-right:8px; }
  .on-wide\:add-padding-y-8 { padding-top:8px; padding-bottom:8px; }
  .on-wide\:add-margin-8 { margin:8px; }
  .on-wide\:add-margin-x-8 { margin-left:8px; margin-right:8px; }
  .on-wide\:add-margin-y-8 { margin-top:8px; margin-bottom:8px; }
  .on-wide\:gap-8 { gap:8px; }
  .on-wide\:add-padding-12 { padding:12px; }
  .on-wide\:add-padding-x-12 { padding-left:12px; padding-right:12px; }
  .on-wide\:add-padding-y-12 { padding-top:12px; padding-bottom:12px; }
  .on-wide\:add-margin-12 { margin:12px; }
  .on-wide\:add-margin-x-12 { margin-left:12px; margin-right:12px; }
  .on-wide\:add-margin-y-12 { margin-top:12px; margin-bottom:12px; }
  .on-wide\:gap-12 { gap:12px; }
  .on-wide\:add-padding-16 { padding:16px; }
  .on-wide\:add-padding-x-16 { padding-left:16px; padding-right:16px; }
  .on-wide\:add-padding-y-16 { padding-top:16px; padding-bottom:16px; }
  .on-wide\:add-margin-16 { margin:16px; }
  .on-wide\:add-margin-x-16 { margin-left:16px; margin-right:16px; }
  .on-wide\:add-margin-y-16 { margin-top:16px; margin-bottom:16px; }
  .on-wide\:gap-16 { gap:16px; }
  .on-wide\:add-padding-20 { padding:20px; }
  .on-wide\:add-padding-x-20 { padding-left:20px; padding-right:20px; }
  .on-wide\:add-padding-y-20 { padding-top:20px; padding-bottom:20px; }
  .on-wide\:add-margin-20 { margin:20px; }
  .on-wide\:add-margin-x-20 { margin-left:20px; margin-right:20px; }
  .on-wide\:add-margin-y-20 { margin-top:20px; margin-bottom:20px; }
  .on-wide\:gap-20 { gap:20px; }
  .on-wide\:add-padding-24 { padding:24px; }
  .on-wide\:add-padding-x-24 { padding-left:24px; padding-right:24px; }
  .on-wide\:add-padding-y-24 { padding-top:24px; padding-bottom:24px; }
  .on-wide\:add-margin-24 { margin:24px; }
  .on-wide\:add-margin-x-24 { margin-left:24px; margin-right:24px; }
  .on-wide\:add-margin-y-24 { margin-top:24px; margin-bottom:24px; }
  .on-wide\:gap-24 { gap:24px; }
  .on-wide\:add-padding-32 { padding:32px; }
  .on-wide\:add-padding-x-32 { padding-left:32px; padding-right:32px; }
  .on-wide\:add-padding-y-32 { padding-top:32px; padding-bottom:32px; }
  .on-wide\:add-margin-32 { margin:32px; }
  .on-wide\:add-margin-x-32 { margin-left:32px; margin-right:32px; }
  .on-wide\:add-margin-y-32 { margin-top:32px; margin-bottom:32px; }
  .on-wide\:gap-32 { gap:32px; }
  .on-wide\:add-padding-40 { padding:40px; }
  .on-wide\:add-padding-x-40 { padding-left:40px; padding-right:40px; }
  .on-wide\:add-padding-y-40 { padding-top:40px; padding-bottom:40px; }
  .on-wide\:add-margin-40 { margin:40px; }
  .on-wide\:add-margin-x-40 { margin-left:40px; margin-right:40px; }
  .on-wide\:add-margin-y-40 { margin-top:40px; margin-bottom:40px; }
  .on-wide\:gap-40 { gap:40px; }
  .on-wide\:add-padding-48 { padding:48px; }
  .on-wide\:add-padding-x-48 { padding-left:48px; padding-right:48px; }
  .on-wide\:add-padding-y-48 { padding-top:48px; padding-bottom:48px; }
  .on-wide\:add-margin-48 { margin:48px; }
  .on-wide\:add-margin-x-48 { margin-left:48px; margin-right:48px; }
  .on-wide\:add-margin-y-48 { margin-top:48px; margin-bottom:48px; }
  .on-wide\:gap-48 { gap:48px; }
  .on-wide\:add-padding-64 { padding:64px; }
  .on-wide\:add-padding-x-64 { padding-left:64px; padding-right:64px; }
  .on-wide\:add-padding-y-64 { padding-top:64px; padding-bottom:64px; }
  .on-wide\:add-margin-64 { margin:64px; }
  .on-wide\:add-margin-x-64 { margin-left:64px; margin-right:64px; }
  .on-wide\:add-margin-y-64 { margin-top:64px; margin-bottom:64px; }
  .on-wide\:gap-64 { gap:64px; }
  .on-wide\:grid-cols-1 { grid-template-columns:repeat(1,minmax(0,1fr)); }
  .on-wide\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .on-wide\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .on-wide\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .on-wide\:grid-cols-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .on-wide\:grid-cols-6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .on-wide\:grid-cols-7 { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .on-wide\:grid-cols-8 { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .on-wide\:grid-cols-9 { grid-template-columns:repeat(9,minmax(0,1fr)); }
  .on-wide\:grid-cols-10 { grid-template-columns:repeat(10,minmax(0,1fr)); }
  .on-wide\:grid-cols-11 { grid-template-columns:repeat(11,minmax(0,1fr)); }
  .on-wide\:grid-cols-12 { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .on-wide\:set-text-12 { font-size:12px; }
  .on-wide\:set-text-14 { font-size:14px; }
  .on-wide\:set-text-16 { font-size:16px; }
  .on-wide\:set-text-18 { font-size:18px; }
  .on-wide\:set-text-20 { font-size:20px; }
  .on-wide\:set-text-24 { font-size:24px; }
  .on-wide\:set-text-28 { font-size:28px; }
  .on-wide\:set-text-32 { font-size:32px; }
  .on-wide\:set-text-36 { font-size:36px; }
  .on-wide\:set-text-40 { font-size:40px; }
  .on-wide\:set-text-48 { font-size:48px; }
  .on-wide\:set-text-56 { font-size:56px; }
  .on-wide\:set-text-64 { font-size:64px; }
  .on-wide\:set-width-full { width:100%; }
  .on-wide\:set-width-auto { width:auto; }
  .on-wide\:set-width-screen { width:100vw; }
  .on-wide\:set-width-0 { width:0px; }
  .on-wide\:set-height-0 { height:0px; }
  .on-wide\:set-width-4 { width:4px; }
  .on-wide\:set-height-4 { height:4px; }
  .on-wide\:set-width-8 { width:8px; }
  .on-wide\:set-height-8 { height:8px; }
  .on-wide\:set-width-12 { width:12px; }
  .on-wide\:set-height-12 { height:12px; }
  .on-wide\:set-width-16 { width:16px; }
  .on-wide\:set-height-16 { height:16px; }
  .on-wide\:set-width-20 { width:20px; }
  .on-wide\:set-height-20 { height:20px; }
  .on-wide\:set-width-24 { width:24px; }
  .on-wide\:set-height-24 { height:24px; }
  .on-wide\:set-width-32 { width:32px; }
  .on-wide\:set-height-32 { height:32px; }
  .on-wide\:set-width-40 { width:40px; }
  .on-wide\:set-height-40 { height:40px; }
  .on-wide\:set-width-48 { width:48px; }
  .on-wide\:set-height-48 { height:48px; }
  .on-wide\:set-width-64 { width:64px; }
  .on-wide\:set-height-64 { height:64px; }
}

@media (min-width: 1536px) {
  .on-ultra\:make-block { display:block; }
  .on-ultra\:make-inline { display:inline; }
  .on-ultra\:make-inline-block { display:inline-block; }
  .on-ultra\:make-flex { display:flex; }
  .on-ultra\:make-grid { display:grid; }
  .on-ultra\:make-hidden { display:none; }
  .on-ultra\:flex-row { flex-direction:row; }
  .on-ultra\:flex-column { flex-direction:column; }
  .on-ultra\:flex-wrap { flex-wrap:wrap; }
  .on-ultra\:flex-nowrap { flex-wrap:nowrap; }
  .on-ultra\:align-center { align-items:center; }
  .on-ultra\:align-start { align-items:flex-start; }
  .on-ultra\:align-end { align-items:flex-end; }
  .on-ultra\:justify-center { justify-content:center; }
  .on-ultra\:justify-between { justify-content:space-between; }
  .on-ultra\:justify-start { justify-content:flex-start; }
  .on-ultra\:justify-end { justify-content:flex-end; }
  .on-ultra\:text-left { text-align:left; }
  .on-ultra\:text-center { text-align:center; }
  .on-ultra\:text-right { text-align:right; }
  .on-ultra\:add-padding-0 { padding:0px; }
  .on-ultra\:add-padding-x-0 { padding-left:0px; padding-right:0px; }
  .on-ultra\:add-padding-y-0 { padding-top:0px; padding-bottom:0px; }
  .on-ultra\:add-margin-0 { margin:0px; }
  .on-ultra\:add-margin-x-0 { margin-left:0px; margin-right:0px; }
  .on-ultra\:add-margin-y-0 { margin-top:0px; margin-bottom:0px; }
  .on-ultra\:gap-0 { gap:0px; }
  .on-ultra\:add-padding-4 { padding:4px; }
  .on-ultra\:add-padding-x-4 { padding-left:4px; padding-right:4px; }
  .on-ultra\:add-padding-y-4 { padding-top:4px; padding-bottom:4px; }
  .on-ultra\:add-margin-4 { margin:4px; }
  .on-ultra\:add-margin-x-4 { margin-left:4px; margin-right:4px; }
  .on-ultra\:add-margin-y-4 { margin-top:4px; margin-bottom:4px; }
  .on-ultra\:gap-4 { gap:4px; }
  .on-ultra\:add-padding-8 { padding:8px; }
  .on-ultra\:add-padding-x-8 { padding-left:8px; padding-right:8px; }
  .on-ultra\:add-padding-y-8 { padding-top:8px; padding-bottom:8px; }
  .on-ultra\:add-margin-8 { margin:8px; }
  .on-ultra\:add-margin-x-8 { margin-left:8px; margin-right:8px; }
  .on-ultra\:add-margin-y-8 { margin-top:8px; margin-bottom:8px; }
  .on-ultra\:gap-8 { gap:8px; }
  .on-ultra\:add-padding-12 { padding:12px; }
  .on-ultra\:add-padding-x-12 { padding-left:12px; padding-right:12px; }
  .on-ultra\:add-padding-y-12 { padding-top:12px; padding-bottom:12px; }
  .on-ultra\:add-margin-12 { margin:12px; }
  .on-ultra\:add-margin-x-12 { margin-left:12px; margin-right:12px; }
  .on-ultra\:add-margin-y-12 { margin-top:12px; margin-bottom:12px; }
  .on-ultra\:gap-12 { gap:12px; }
  .on-ultra\:add-padding-16 { padding:16px; }
  .on-ultra\:add-padding-x-16 { padding-left:16px; padding-right:16px; }
  .on-ultra\:add-padding-y-16 { padding-top:16px; padding-bottom:16px; }
  .on-ultra\:add-margin-16 { margin:16px; }
  .on-ultra\:add-margin-x-16 { margin-left:16px; margin-right:16px; }
  .on-ultra\:add-margin-y-16 { margin-top:16px; margin-bottom:16px; }
  .on-ultra\:gap-16 { gap:16px; }
  .on-ultra\:add-padding-20 { padding:20px; }
  .on-ultra\:add-padding-x-20 { padding-left:20px; padding-right:20px; }
  .on-ultra\:add-padding-y-20 { padding-top:20px; padding-bottom:20px; }
  .on-ultra\:add-margin-20 { margin:20px; }
  .on-ultra\:add-margin-x-20 { margin-left:20px; margin-right:20px; }
  .on-ultra\:add-margin-y-20 { margin-top:20px; margin-bottom:20px; }
  .on-ultra\:gap-20 { gap:20px; }
  .on-ultra\:add-padding-24 { padding:24px; }
  .on-ultra\:add-padding-x-24 { padding-left:24px; padding-right:24px; }
  .on-ultra\:add-padding-y-24 { padding-top:24px; padding-bottom:24px; }
  .on-ultra\:add-margin-24 { margin:24px; }
  .on-ultra\:add-margin-x-24 { margin-left:24px; margin-right:24px; }
  .on-ultra\:add-margin-y-24 { margin-top:24px; margin-bottom:24px; }
  .on-ultra\:gap-24 { gap:24px; }
  .on-ultra\:add-padding-32 { padding:32px; }
  .on-ultra\:add-padding-x-32 { padding-left:32px; padding-right:32px; }
  .on-ultra\:add-padding-y-32 { padding-top:32px; padding-bottom:32px; }
  .on-ultra\:add-margin-32 { margin:32px; }
  .on-ultra\:add-margin-x-32 { margin-left:32px; margin-right:32px; }
  .on-ultra\:add-margin-y-32 { margin-top:32px; margin-bottom:32px; }
  .on-ultra\:gap-32 { gap:32px; }
  .on-ultra\:add-padding-40 { padding:40px; }
  .on-ultra\:add-padding-x-40 { padding-left:40px; padding-right:40px; }
  .on-ultra\:add-padding-y-40 { padding-top:40px; padding-bottom:40px; }
  .on-ultra\:add-margin-40 { margin:40px; }
  .on-ultra\:add-margin-x-40 { margin-left:40px; margin-right:40px; }
  .on-ultra\:add-margin-y-40 { margin-top:40px; margin-bottom:40px; }
  .on-ultra\:gap-40 { gap:40px; }
  .on-ultra\:add-padding-48 { padding:48px; }
  .on-ultra\:add-padding-x-48 { padding-left:48px; padding-right:48px; }
  .on-ultra\:add-padding-y-48 { padding-top:48px; padding-bottom:48px; }
  .on-ultra\:add-margin-48 { margin:48px; }
  .on-ultra\:add-margin-x-48 { margin-left:48px; margin-right:48px; }
  .on-ultra\:add-margin-y-48 { margin-top:48px; margin-bottom:48px; }
  .on-ultra\:gap-48 { gap:48px; }
  .on-ultra\:add-padding-64 { padding:64px; }
  .on-ultra\:add-padding-x-64 { padding-left:64px; padding-right:64px; }
  .on-ultra\:add-padding-y-64 { padding-top:64px; padding-bottom:64px; }
  .on-ultra\:add-margin-64 { margin:64px; }
  .on-ultra\:add-margin-x-64 { margin-left:64px; margin-right:64px; }
  .on-ultra\:add-margin-y-64 { margin-top:64px; margin-bottom:64px; }
  .on-ultra\:gap-64 { gap:64px; }
  .on-ultra\:grid-cols-1 { grid-template-columns:repeat(1,minmax(0,1fr)); }
  .on-ultra\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .on-ultra\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .on-ultra\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .on-ultra\:grid-cols-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .on-ultra\:grid-cols-6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .on-ultra\:grid-cols-7 { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .on-ultra\:grid-cols-8 { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .on-ultra\:grid-cols-9 { grid-template-columns:repeat(9,minmax(0,1fr)); }
  .on-ultra\:grid-cols-10 { grid-template-columns:repeat(10,minmax(0,1fr)); }
  .on-ultra\:grid-cols-11 { grid-template-columns:repeat(11,minmax(0,1fr)); }
  .on-ultra\:grid-cols-12 { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .on-ultra\:set-text-12 { font-size:12px; }
  .on-ultra\:set-text-14 { font-size:14px; }
  .on-ultra\:set-text-16 { font-size:16px; }
  .on-ultra\:set-text-18 { font-size:18px; }
  .on-ultra\:set-text-20 { font-size:20px; }
  .on-ultra\:set-text-24 { font-size:24px; }
  .on-ultra\:set-text-28 { font-size:28px; }
  .on-ultra\:set-text-32 { font-size:32px; }
  .on-ultra\:set-text-36 { font-size:36px; }
  .on-ultra\:set-text-40 { font-size:40px; }
  .on-ultra\:set-text-48 { font-size:48px; }
  .on-ultra\:set-text-56 { font-size:56px; }
  .on-ultra\:set-text-64 { font-size:64px; }
  .on-ultra\:set-width-full { width:100%; }
  .on-ultra\:set-width-auto { width:auto; }
  .on-ultra\:set-width-screen { width:100vw; }
  .on-ultra\:set-width-0 { width:0px; }
  .on-ultra\:set-height-0 { height:0px; }
  .on-ultra\:set-width-4 { width:4px; }
  .on-ultra\:set-height-4 { height:4px; }
  .on-ultra\:set-width-8 { width:8px; }
  .on-ultra\:set-height-8 { height:8px; }
  .on-ultra\:set-width-12 { width:12px; }
  .on-ultra\:set-height-12 { height:12px; }
  .on-ultra\:set-width-16 { width:16px; }
  .on-ultra\:set-height-16 { height:16px; }
  .on-ultra\:set-width-20 { width:20px; }
  .on-ultra\:set-height-20 { height:20px; }
  .on-ultra\:set-width-24 { width:24px; }
  .on-ultra\:set-height-24 { height:24px; }
  .on-ultra\:set-width-32 { width:32px; }
  .on-ultra\:set-height-32 { height:32px; }
  .on-ultra\:set-width-40 { width:40px; }
  .on-ultra\:set-height-40 { height:40px; }
  .on-ultra\:set-width-48 { width:48px; }
  .on-ultra\:set-height-48 { height:48px; }
  .on-ultra\:set-width-64 { width:64px; }
  .on-ultra\:set-height-64 { height:64px; }
}

@media (min-width: 640px) {
  .sm\:make-block { display:block; }
  .sm\:make-inline { display:inline; }
  .sm\:make-inline-block { display:inline-block; }
  .sm\:make-flex { display:flex; }
  .sm\:make-grid { display:grid; }
  .sm\:make-hidden { display:none; }
  .sm\:flex-row { flex-direction:row; }
  .sm\:flex-column { flex-direction:column; }
  .sm\:flex-wrap { flex-wrap:wrap; }
  .sm\:flex-nowrap { flex-wrap:nowrap; }
  .sm\:align-center { align-items:center; }
  .sm\:align-start { align-items:flex-start; }
  .sm\:align-end { align-items:flex-end; }
  .sm\:justify-center { justify-content:center; }
  .sm\:justify-between { justify-content:space-between; }
  .sm\:justify-start { justify-content:flex-start; }
  .sm\:justify-end { justify-content:flex-end; }
  .sm\:text-left { text-align:left; }
  .sm\:text-center { text-align:center; }
  .sm\:text-right { text-align:right; }
  .sm\:add-padding-0 { padding:0px; }
  .sm\:add-padding-x-0 { padding-left:0px; padding-right:0px; }
  .sm\:add-padding-y-0 { padding-top:0px; padding-bottom:0px; }
  .sm\:add-margin-0 { margin:0px; }
  .sm\:add-margin-x-0 { margin-left:0px; margin-right:0px; }
  .sm\:add-margin-y-0 { margin-top:0px; margin-bottom:0px; }
  .sm\:gap-0 { gap:0px; }
  .sm\:add-padding-4 { padding:4px; }
  .sm\:add-padding-x-4 { padding-left:4px; padding-right:4px; }
  .sm\:add-padding-y-4 { padding-top:4px; padding-bottom:4px; }
  .sm\:add-margin-4 { margin:4px; }
  .sm\:add-margin-x-4 { margin-left:4px; margin-right:4px; }
  .sm\:add-margin-y-4 { margin-top:4px; margin-bottom:4px; }
  .sm\:gap-4 { gap:4px; }
  .sm\:add-padding-8 { padding:8px; }
  .sm\:add-padding-x-8 { padding-left:8px; padding-right:8px; }
  .sm\:add-padding-y-8 { padding-top:8px; padding-bottom:8px; }
  .sm\:add-margin-8 { margin:8px; }
  .sm\:add-margin-x-8 { margin-left:8px; margin-right:8px; }
  .sm\:add-margin-y-8 { margin-top:8px; margin-bottom:8px; }
  .sm\:gap-8 { gap:8px; }
  .sm\:add-padding-12 { padding:12px; }
  .sm\:add-padding-x-12 { padding-left:12px; padding-right:12px; }
  .sm\:add-padding-y-12 { padding-top:12px; padding-bottom:12px; }
  .sm\:add-margin-12 { margin:12px; }
  .sm\:add-margin-x-12 { margin-left:12px; margin-right:12px; }
  .sm\:add-margin-y-12 { margin-top:12px; margin-bottom:12px; }
  .sm\:gap-12 { gap:12px; }
  .sm\:add-padding-16 { padding:16px; }
  .sm\:add-padding-x-16 { padding-left:16px; padding-right:16px; }
  .sm\:add-padding-y-16 { padding-top:16px; padding-bottom:16px; }
  .sm\:add-margin-16 { margin:16px; }
  .sm\:add-margin-x-16 { margin-left:16px; margin-right:16px; }
  .sm\:add-margin-y-16 { margin-top:16px; margin-bottom:16px; }
  .sm\:gap-16 { gap:16px; }
  .sm\:add-padding-20 { padding:20px; }
  .sm\:add-padding-x-20 { padding-left:20px; padding-right:20px; }
  .sm\:add-padding-y-20 { padding-top:20px; padding-bottom:20px; }
  .sm\:add-margin-20 { margin:20px; }
  .sm\:add-margin-x-20 { margin-left:20px; margin-right:20px; }
  .sm\:add-margin-y-20 { margin-top:20px; margin-bottom:20px; }
  .sm\:gap-20 { gap:20px; }
  .sm\:add-padding-24 { padding:24px; }
  .sm\:add-padding-x-24 { padding-left:24px; padding-right:24px; }
  .sm\:add-padding-y-24 { padding-top:24px; padding-bottom:24px; }
  .sm\:add-margin-24 { margin:24px; }
  .sm\:add-margin-x-24 { margin-left:24px; margin-right:24px; }
  .sm\:add-margin-y-24 { margin-top:24px; margin-bottom:24px; }
  .sm\:gap-24 { gap:24px; }
  .sm\:add-padding-32 { padding:32px; }
  .sm\:add-padding-x-32 { padding-left:32px; padding-right:32px; }
  .sm\:add-padding-y-32 { padding-top:32px; padding-bottom:32px; }
  .sm\:add-margin-32 { margin:32px; }
  .sm\:add-margin-x-32 { margin-left:32px; margin-right:32px; }
  .sm\:add-margin-y-32 { margin-top:32px; margin-bottom:32px; }
  .sm\:gap-32 { gap:32px; }
  .sm\:add-padding-40 { padding:40px; }
  .sm\:add-padding-x-40 { padding-left:40px; padding-right:40px; }
  .sm\:add-padding-y-40 { padding-top:40px; padding-bottom:40px; }
  .sm\:add-margin-40 { margin:40px; }
  .sm\:add-margin-x-40 { margin-left:40px; margin-right:40px; }
  .sm\:add-margin-y-40 { margin-top:40px; margin-bottom:40px; }
  .sm\:gap-40 { gap:40px; }
  .sm\:add-padding-48 { padding:48px; }
  .sm\:add-padding-x-48 { padding-left:48px; padding-right:48px; }
  .sm\:add-padding-y-48 { padding-top:48px; padding-bottom:48px; }
  .sm\:add-margin-48 { margin:48px; }
  .sm\:add-margin-x-48 { margin-left:48px; margin-right:48px; }
  .sm\:add-margin-y-48 { margin-top:48px; margin-bottom:48px; }
  .sm\:gap-48 { gap:48px; }
  .sm\:add-padding-64 { padding:64px; }
  .sm\:add-padding-x-64 { padding-left:64px; padding-right:64px; }
  .sm\:add-padding-y-64 { padding-top:64px; padding-bottom:64px; }
  .sm\:add-margin-64 { margin:64px; }
  .sm\:add-margin-x-64 { margin-left:64px; margin-right:64px; }
  .sm\:add-margin-y-64 { margin-top:64px; margin-bottom:64px; }
  .sm\:gap-64 { gap:64px; }
  .sm\:grid-cols-1 { grid-template-columns:repeat(1,minmax(0,1fr)); }
  .sm\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sm\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sm\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .sm\:grid-cols-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .sm\:grid-cols-6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .sm\:grid-cols-7 { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .sm\:grid-cols-8 { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .sm\:grid-cols-9 { grid-template-columns:repeat(9,minmax(0,1fr)); }
  .sm\:grid-cols-10 { grid-template-columns:repeat(10,minmax(0,1fr)); }
  .sm\:grid-cols-11 { grid-template-columns:repeat(11,minmax(0,1fr)); }
  .sm\:grid-cols-12 { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .sm\:set-text-12 { font-size:12px; }
  .sm\:set-text-14 { font-size:14px; }
  .sm\:set-text-16 { font-size:16px; }
  .sm\:set-text-18 { font-size:18px; }
  .sm\:set-text-20 { font-size:20px; }
  .sm\:set-text-24 { font-size:24px; }
  .sm\:set-text-28 { font-size:28px; }
  .sm\:set-text-32 { font-size:32px; }
  .sm\:set-text-36 { font-size:36px; }
  .sm\:set-text-40 { font-size:40px; }
  .sm\:set-text-48 { font-size:48px; }
  .sm\:set-text-56 { font-size:56px; }
  .sm\:set-text-64 { font-size:64px; }
  .sm\:set-width-full { width:100%; }
  .sm\:set-width-auto { width:auto; }
  .sm\:set-width-screen { width:100vw; }
  .sm\:set-width-0 { width:0px; }
  .sm\:set-height-0 { height:0px; }
  .sm\:set-width-4 { width:4px; }
  .sm\:set-height-4 { height:4px; }
  .sm\:set-width-8 { width:8px; }
  .sm\:set-height-8 { height:8px; }
  .sm\:set-width-12 { width:12px; }
  .sm\:set-height-12 { height:12px; }
  .sm\:set-width-16 { width:16px; }
  .sm\:set-height-16 { height:16px; }
  .sm\:set-width-20 { width:20px; }
  .sm\:set-height-20 { height:20px; }
  .sm\:set-width-24 { width:24px; }
  .sm\:set-height-24 { height:24px; }
  .sm\:set-width-32 { width:32px; }
  .sm\:set-height-32 { height:32px; }
  .sm\:set-width-40 { width:40px; }
  .sm\:set-height-40 { height:40px; }
  .sm\:set-width-48 { width:48px; }
  .sm\:set-height-48 { height:48px; }
  .sm\:set-width-64 { width:64px; }
  .sm\:set-height-64 { height:64px; }
}

@media (min-width: 768px) {
  .md\:make-block { display:block; }
  .md\:make-inline { display:inline; }
  .md\:make-inline-block { display:inline-block; }
  .md\:make-flex { display:flex; }
  .md\:make-grid { display:grid; }
  .md\:make-hidden { display:none; }
  .md\:flex-row { flex-direction:row; }
  .md\:flex-column { flex-direction:column; }
  .md\:flex-wrap { flex-wrap:wrap; }
  .md\:flex-nowrap { flex-wrap:nowrap; }
  .md\:align-center { align-items:center; }
  .md\:align-start { align-items:flex-start; }
  .md\:align-end { align-items:flex-end; }
  .md\:justify-center { justify-content:center; }
  .md\:justify-between { justify-content:space-between; }
  .md\:justify-start { justify-content:flex-start; }
  .md\:justify-end { justify-content:flex-end; }
  .md\:text-left { text-align:left; }
  .md\:text-center { text-align:center; }
  .md\:text-right { text-align:right; }
  .md\:add-padding-0 { padding:0px; }
  .md\:add-padding-x-0 { padding-left:0px; padding-right:0px; }
  .md\:add-padding-y-0 { padding-top:0px; padding-bottom:0px; }
  .md\:add-margin-0 { margin:0px; }
  .md\:add-margin-x-0 { margin-left:0px; margin-right:0px; }
  .md\:add-margin-y-0 { margin-top:0px; margin-bottom:0px; }
  .md\:gap-0 { gap:0px; }
  .md\:add-padding-4 { padding:4px; }
  .md\:add-padding-x-4 { padding-left:4px; padding-right:4px; }
  .md\:add-padding-y-4 { padding-top:4px; padding-bottom:4px; }
  .md\:add-margin-4 { margin:4px; }
  .md\:add-margin-x-4 { margin-left:4px; margin-right:4px; }
  .md\:add-margin-y-4 { margin-top:4px; margin-bottom:4px; }
  .md\:gap-4 { gap:4px; }
  .md\:add-padding-8 { padding:8px; }
  .md\:add-padding-x-8 { padding-left:8px; padding-right:8px; }
  .md\:add-padding-y-8 { padding-top:8px; padding-bottom:8px; }
  .md\:add-margin-8 { margin:8px; }
  .md\:add-margin-x-8 { margin-left:8px; margin-right:8px; }
  .md\:add-margin-y-8 { margin-top:8px; margin-bottom:8px; }
  .md\:gap-8 { gap:8px; }
  .md\:add-padding-12 { padding:12px; }
  .md\:add-padding-x-12 { padding-left:12px; padding-right:12px; }
  .md\:add-padding-y-12 { padding-top:12px; padding-bottom:12px; }
  .md\:add-margin-12 { margin:12px; }
  .md\:add-margin-x-12 { margin-left:12px; margin-right:12px; }
  .md\:add-margin-y-12 { margin-top:12px; margin-bottom:12px; }
  .md\:gap-12 { gap:12px; }
  .md\:add-padding-16 { padding:16px; }
  .md\:add-padding-x-16 { padding-left:16px; padding-right:16px; }
  .md\:add-padding-y-16 { padding-top:16px; padding-bottom:16px; }
  .md\:add-margin-16 { margin:16px; }
  .md\:add-margin-x-16 { margin-left:16px; margin-right:16px; }
  .md\:add-margin-y-16 { margin-top:16px; margin-bottom:16px; }
  .md\:gap-16 { gap:16px; }
  .md\:add-padding-20 { padding:20px; }
  .md\:add-padding-x-20 { padding-left:20px; padding-right:20px; }
  .md\:add-padding-y-20 { padding-top:20px; padding-bottom:20px; }
  .md\:add-margin-20 { margin:20px; }
  .md\:add-margin-x-20 { margin-left:20px; margin-right:20px; }
  .md\:add-margin-y-20 { margin-top:20px; margin-bottom:20px; }
  .md\:gap-20 { gap:20px; }
  .md\:add-padding-24 { padding:24px; }
  .md\:add-padding-x-24 { padding-left:24px; padding-right:24px; }
  .md\:add-padding-y-24 { padding-top:24px; padding-bottom:24px; }
  .md\:add-margin-24 { margin:24px; }
  .md\:add-margin-x-24 { margin-left:24px; margin-right:24px; }
  .md\:add-margin-y-24 { margin-top:24px; margin-bottom:24px; }
  .md\:gap-24 { gap:24px; }
  .md\:add-padding-32 { padding:32px; }
  .md\:add-padding-x-32 { padding-left:32px; padding-right:32px; }
  .md\:add-padding-y-32 { padding-top:32px; padding-bottom:32px; }
  .md\:add-margin-32 { margin:32px; }
  .md\:add-margin-x-32 { margin-left:32px; margin-right:32px; }
  .md\:add-margin-y-32 { margin-top:32px; margin-bottom:32px; }
  .md\:gap-32 { gap:32px; }
  .md\:add-padding-40 { padding:40px; }
  .md\:add-padding-x-40 { padding-left:40px; padding-right:40px; }
  .md\:add-padding-y-40 { padding-top:40px; padding-bottom:40px; }
  .md\:add-margin-40 { margin:40px; }
  .md\:add-margin-x-40 { margin-left:40px; margin-right:40px; }
  .md\:add-margin-y-40 { margin-top:40px; margin-bottom:40px; }
  .md\:gap-40 { gap:40px; }
  .md\:add-padding-48 { padding:48px; }
  .md\:add-padding-x-48 { padding-left:48px; padding-right:48px; }
  .md\:add-padding-y-48 { padding-top:48px; padding-bottom:48px; }
  .md\:add-margin-48 { margin:48px; }
  .md\:add-margin-x-48 { margin-left:48px; margin-right:48px; }
  .md\:add-margin-y-48 { margin-top:48px; margin-bottom:48px; }
  .md\:gap-48 { gap:48px; }
  .md\:add-padding-64 { padding:64px; }
  .md\:add-padding-x-64 { padding-left:64px; padding-right:64px; }
  .md\:add-padding-y-64 { padding-top:64px; padding-bottom:64px; }
  .md\:add-margin-64 { margin:64px; }
  .md\:add-margin-x-64 { margin-left:64px; margin-right:64px; }
  .md\:add-margin-y-64 { margin-top:64px; margin-bottom:64px; }
  .md\:gap-64 { gap:64px; }
  .md\:grid-cols-1 { grid-template-columns:repeat(1,minmax(0,1fr)); }
  .md\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .md\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .md\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .md\:grid-cols-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .md\:grid-cols-6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .md\:grid-cols-7 { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .md\:grid-cols-8 { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .md\:grid-cols-9 { grid-template-columns:repeat(9,minmax(0,1fr)); }
  .md\:grid-cols-10 { grid-template-columns:repeat(10,minmax(0,1fr)); }
  .md\:grid-cols-11 { grid-template-columns:repeat(11,minmax(0,1fr)); }
  .md\:grid-cols-12 { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .md\:set-text-12 { font-size:12px; }
  .md\:set-text-14 { font-size:14px; }
  .md\:set-text-16 { font-size:16px; }
  .md\:set-text-18 { font-size:18px; }
  .md\:set-text-20 { font-size:20px; }
  .md\:set-text-24 { font-size:24px; }
  .md\:set-text-28 { font-size:28px; }
  .md\:set-text-32 { font-size:32px; }
  .md\:set-text-36 { font-size:36px; }
  .md\:set-text-40 { font-size:40px; }
  .md\:set-text-48 { font-size:48px; }
  .md\:set-text-56 { font-size:56px; }
  .md\:set-text-64 { font-size:64px; }
  .md\:set-width-full { width:100%; }
  .md\:set-width-auto { width:auto; }
  .md\:set-width-screen { width:100vw; }
  .md\:set-width-0 { width:0px; }
  .md\:set-height-0 { height:0px; }
  .md\:set-width-4 { width:4px; }
  .md\:set-height-4 { height:4px; }
  .md\:set-width-8 { width:8px; }
  .md\:set-height-8 { height:8px; }
  .md\:set-width-12 { width:12px; }
  .md\:set-height-12 { height:12px; }
  .md\:set-width-16 { width:16px; }
  .md\:set-height-16 { height:16px; }
  .md\:set-width-20 { width:20px; }
  .md\:set-height-20 { height:20px; }
  .md\:set-width-24 { width:24px; }
  .md\:set-height-24 { height:24px; }
  .md\:set-width-32 { width:32px; }
  .md\:set-height-32 { height:32px; }
  .md\:set-width-40 { width:40px; }
  .md\:set-height-40 { height:40px; }
  .md\:set-width-48 { width:48px; }
  .md\:set-height-48 { height:48px; }
  .md\:set-width-64 { width:64px; }
  .md\:set-height-64 { height:64px; }
}

@media (min-width: 1024px) {
  .lg\:make-block { display:block; }
  .lg\:make-inline { display:inline; }
  .lg\:make-inline-block { display:inline-block; }
  .lg\:make-flex { display:flex; }
  .lg\:make-grid { display:grid; }
  .lg\:make-hidden { display:none; }
  .lg\:flex-row { flex-direction:row; }
  .lg\:flex-column { flex-direction:column; }
  .lg\:flex-wrap { flex-wrap:wrap; }
  .lg\:flex-nowrap { flex-wrap:nowrap; }
  .lg\:align-center { align-items:center; }
  .lg\:align-start { align-items:flex-start; }
  .lg\:align-end { align-items:flex-end; }
  .lg\:justify-center { justify-content:center; }
  .lg\:justify-between { justify-content:space-between; }
  .lg\:justify-start { justify-content:flex-start; }
  .lg\:justify-end { justify-content:flex-end; }
  .lg\:text-left { text-align:left; }
  .lg\:text-center { text-align:center; }
  .lg\:text-right { text-align:right; }
  .lg\:add-padding-0 { padding:0px; }
  .lg\:add-padding-x-0 { padding-left:0px; padding-right:0px; }
  .lg\:add-padding-y-0 { padding-top:0px; padding-bottom:0px; }
  .lg\:add-margin-0 { margin:0px; }
  .lg\:add-margin-x-0 { margin-left:0px; margin-right:0px; }
  .lg\:add-margin-y-0 { margin-top:0px; margin-bottom:0px; }
  .lg\:gap-0 { gap:0px; }
  .lg\:add-padding-4 { padding:4px; }
  .lg\:add-padding-x-4 { padding-left:4px; padding-right:4px; }
  .lg\:add-padding-y-4 { padding-top:4px; padding-bottom:4px; }
  .lg\:add-margin-4 { margin:4px; }
  .lg\:add-margin-x-4 { margin-left:4px; margin-right:4px; }
  .lg\:add-margin-y-4 { margin-top:4px; margin-bottom:4px; }
  .lg\:gap-4 { gap:4px; }
  .lg\:add-padding-8 { padding:8px; }
  .lg\:add-padding-x-8 { padding-left:8px; padding-right:8px; }
  .lg\:add-padding-y-8 { padding-top:8px; padding-bottom:8px; }
  .lg\:add-margin-8 { margin:8px; }
  .lg\:add-margin-x-8 { margin-left:8px; margin-right:8px; }
  .lg\:add-margin-y-8 { margin-top:8px; margin-bottom:8px; }
  .lg\:gap-8 { gap:8px; }
  .lg\:add-padding-12 { padding:12px; }
  .lg\:add-padding-x-12 { padding-left:12px; padding-right:12px; }
  .lg\:add-padding-y-12 { padding-top:12px; padding-bottom:12px; }
  .lg\:add-margin-12 { margin:12px; }
  .lg\:add-margin-x-12 { margin-left:12px; margin-right:12px; }
  .lg\:add-margin-y-12 { margin-top:12px; margin-bottom:12px; }
  .lg\:gap-12 { gap:12px; }
  .lg\:add-padding-16 { padding:16px; }
  .lg\:add-padding-x-16 { padding-left:16px; padding-right:16px; }
  .lg\:add-padding-y-16 { padding-top:16px; padding-bottom:16px; }
  .lg\:add-margin-16 { margin:16px; }
  .lg\:add-margin-x-16 { margin-left:16px; margin-right:16px; }
  .lg\:add-margin-y-16 { margin-top:16px; margin-bottom:16px; }
  .lg\:gap-16 { gap:16px; }
  .lg\:add-padding-20 { padding:20px; }
  .lg\:add-padding-x-20 { padding-left:20px; padding-right:20px; }
  .lg\:add-padding-y-20 { padding-top:20px; padding-bottom:20px; }
  .lg\:add-margin-20 { margin:20px; }
  .lg\:add-margin-x-20 { margin-left:20px; margin-right:20px; }
  .lg\:add-margin-y-20 { margin-top:20px; margin-bottom:20px; }
  .lg\:gap-20 { gap:20px; }
  .lg\:add-padding-24 { padding:24px; }
  .lg\:add-padding-x-24 { padding-left:24px; padding-right:24px; }
  .lg\:add-padding-y-24 { padding-top:24px; padding-bottom:24px; }
  .lg\:add-margin-24 { margin:24px; }
  .lg\:add-margin-x-24 { margin-left:24px; margin-right:24px; }
  .lg\:add-margin-y-24 { margin-top:24px; margin-bottom:24px; }
  .lg\:gap-24 { gap:24px; }
  .lg\:add-padding-32 { padding:32px; }
  .lg\:add-padding-x-32 { padding-left:32px; padding-right:32px; }
  .lg\:add-padding-y-32 { padding-top:32px; padding-bottom:32px; }
  .lg\:add-margin-32 { margin:32px; }
  .lg\:add-margin-x-32 { margin-left:32px; margin-right:32px; }
  .lg\:add-margin-y-32 { margin-top:32px; margin-bottom:32px; }
  .lg\:gap-32 { gap:32px; }
  .lg\:add-padding-40 { padding:40px; }
  .lg\:add-padding-x-40 { padding-left:40px; padding-right:40px; }
  .lg\:add-padding-y-40 { padding-top:40px; padding-bottom:40px; }
  .lg\:add-margin-40 { margin:40px; }
  .lg\:add-margin-x-40 { margin-left:40px; margin-right:40px; }
  .lg\:add-margin-y-40 { margin-top:40px; margin-bottom:40px; }
  .lg\:gap-40 { gap:40px; }
  .lg\:add-padding-48 { padding:48px; }
  .lg\:add-padding-x-48 { padding-left:48px; padding-right:48px; }
  .lg\:add-padding-y-48 { padding-top:48px; padding-bottom:48px; }
  .lg\:add-margin-48 { margin:48px; }
  .lg\:add-margin-x-48 { margin-left:48px; margin-right:48px; }
  .lg\:add-margin-y-48 { margin-top:48px; margin-bottom:48px; }
  .lg\:gap-48 { gap:48px; }
  .lg\:add-padding-64 { padding:64px; }
  .lg\:add-padding-x-64 { padding-left:64px; padding-right:64px; }
  .lg\:add-padding-y-64 { padding-top:64px; padding-bottom:64px; }
  .lg\:add-margin-64 { margin:64px; }
  .lg\:add-margin-x-64 { margin-left:64px; margin-right:64px; }
  .lg\:add-margin-y-64 { margin-top:64px; margin-bottom:64px; }
  .lg\:gap-64 { gap:64px; }
  .lg\:grid-cols-1 { grid-template-columns:repeat(1,minmax(0,1fr)); }
  .lg\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lg\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lg\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .lg\:grid-cols-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .lg\:grid-cols-6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .lg\:grid-cols-7 { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .lg\:grid-cols-8 { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .lg\:grid-cols-9 { grid-template-columns:repeat(9,minmax(0,1fr)); }
  .lg\:grid-cols-10 { grid-template-columns:repeat(10,minmax(0,1fr)); }
  .lg\:grid-cols-11 { grid-template-columns:repeat(11,minmax(0,1fr)); }
  .lg\:grid-cols-12 { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .lg\:set-text-12 { font-size:12px; }
  .lg\:set-text-14 { font-size:14px; }
  .lg\:set-text-16 { font-size:16px; }
  .lg\:set-text-18 { font-size:18px; }
  .lg\:set-text-20 { font-size:20px; }
  .lg\:set-text-24 { font-size:24px; }
  .lg\:set-text-28 { font-size:28px; }
  .lg\:set-text-32 { font-size:32px; }
  .lg\:set-text-36 { font-size:36px; }
  .lg\:set-text-40 { font-size:40px; }
  .lg\:set-text-48 { font-size:48px; }
  .lg\:set-text-56 { font-size:56px; }
  .lg\:set-text-64 { font-size:64px; }
  .lg\:set-width-full { width:100%; }
  .lg\:set-width-auto { width:auto; }
  .lg\:set-width-screen { width:100vw; }
  .lg\:set-width-0 { width:0px; }
  .lg\:set-height-0 { height:0px; }
  .lg\:set-width-4 { width:4px; }
  .lg\:set-height-4 { height:4px; }
  .lg\:set-width-8 { width:8px; }
  .lg\:set-height-8 { height:8px; }
  .lg\:set-width-12 { width:12px; }
  .lg\:set-height-12 { height:12px; }
  .lg\:set-width-16 { width:16px; }
  .lg\:set-height-16 { height:16px; }
  .lg\:set-width-20 { width:20px; }
  .lg\:set-height-20 { height:20px; }
  .lg\:set-width-24 { width:24px; }
  .lg\:set-height-24 { height:24px; }
  .lg\:set-width-32 { width:32px; }
  .lg\:set-height-32 { height:32px; }
  .lg\:set-width-40 { width:40px; }
  .lg\:set-height-40 { height:40px; }
  .lg\:set-width-48 { width:48px; }
  .lg\:set-height-48 { height:48px; }
  .lg\:set-width-64 { width:64px; }
  .lg\:set-height-64 { height:64px; }
}

@media (min-width: 1280px) {
  .xl\:make-block { display:block; }
  .xl\:make-inline { display:inline; }
  .xl\:make-inline-block { display:inline-block; }
  .xl\:make-flex { display:flex; }
  .xl\:make-grid { display:grid; }
  .xl\:make-hidden { display:none; }
  .xl\:flex-row { flex-direction:row; }
  .xl\:flex-column { flex-direction:column; }
  .xl\:flex-wrap { flex-wrap:wrap; }
  .xl\:flex-nowrap { flex-wrap:nowrap; }
  .xl\:align-center { align-items:center; }
  .xl\:align-start { align-items:flex-start; }
  .xl\:align-end { align-items:flex-end; }
  .xl\:justify-center { justify-content:center; }
  .xl\:justify-between { justify-content:space-between; }
  .xl\:justify-start { justify-content:flex-start; }
  .xl\:justify-end { justify-content:flex-end; }
  .xl\:text-left { text-align:left; }
  .xl\:text-center { text-align:center; }
  .xl\:text-right { text-align:right; }
  .xl\:add-padding-0 { padding:0px; }
  .xl\:add-padding-x-0 { padding-left:0px; padding-right:0px; }
  .xl\:add-padding-y-0 { padding-top:0px; padding-bottom:0px; }
  .xl\:add-margin-0 { margin:0px; }
  .xl\:add-margin-x-0 { margin-left:0px; margin-right:0px; }
  .xl\:add-margin-y-0 { margin-top:0px; margin-bottom:0px; }
  .xl\:gap-0 { gap:0px; }
  .xl\:add-padding-4 { padding:4px; }
  .xl\:add-padding-x-4 { padding-left:4px; padding-right:4px; }
  .xl\:add-padding-y-4 { padding-top:4px; padding-bottom:4px; }
  .xl\:add-margin-4 { margin:4px; }
  .xl\:add-margin-x-4 { margin-left:4px; margin-right:4px; }
  .xl\:add-margin-y-4 { margin-top:4px; margin-bottom:4px; }
  .xl\:gap-4 { gap:4px; }
  .xl\:add-padding-8 { padding:8px; }
  .xl\:add-padding-x-8 { padding-left:8px; padding-right:8px; }
  .xl\:add-padding-y-8 { padding-top:8px; padding-bottom:8px; }
  .xl\:add-margin-8 { margin:8px; }
  .xl\:add-margin-x-8 { margin-left:8px; margin-right:8px; }
  .xl\:add-margin-y-8 { margin-top:8px; margin-bottom:8px; }
  .xl\:gap-8 { gap:8px; }
  .xl\:add-padding-12 { padding:12px; }
  .xl\:add-padding-x-12 { padding-left:12px; padding-right:12px; }
  .xl\:add-padding-y-12 { padding-top:12px; padding-bottom:12px; }
  .xl\:add-margin-12 { margin:12px; }
  .xl\:add-margin-x-12 { margin-left:12px; margin-right:12px; }
  .xl\:add-margin-y-12 { margin-top:12px; margin-bottom:12px; }
  .xl\:gap-12 { gap:12px; }
  .xl\:add-padding-16 { padding:16px; }
  .xl\:add-padding-x-16 { padding-left:16px; padding-right:16px; }
  .xl\:add-padding-y-16 { padding-top:16px; padding-bottom:16px; }
  .xl\:add-margin-16 { margin:16px; }
  .xl\:add-margin-x-16 { margin-left:16px; margin-right:16px; }
  .xl\:add-margin-y-16 { margin-top:16px; margin-bottom:16px; }
  .xl\:gap-16 { gap:16px; }
  .xl\:add-padding-20 { padding:20px; }
  .xl\:add-padding-x-20 { padding-left:20px; padding-right:20px; }
  .xl\:add-padding-y-20 { padding-top:20px; padding-bottom:20px; }
  .xl\:add-margin-20 { margin:20px; }
  .xl\:add-margin-x-20 { margin-left:20px; margin-right:20px; }
  .xl\:add-margin-y-20 { margin-top:20px; margin-bottom:20px; }
  .xl\:gap-20 { gap:20px; }
  .xl\:add-padding-24 { padding:24px; }
  .xl\:add-padding-x-24 { padding-left:24px; padding-right:24px; }
  .xl\:add-padding-y-24 { padding-top:24px; padding-bottom:24px; }
  .xl\:add-margin-24 { margin:24px; }
  .xl\:add-margin-x-24 { margin-left:24px; margin-right:24px; }
  .xl\:add-margin-y-24 { margin-top:24px; margin-bottom:24px; }
  .xl\:gap-24 { gap:24px; }
  .xl\:add-padding-32 { padding:32px; }
  .xl\:add-padding-x-32 { padding-left:32px; padding-right:32px; }
  .xl\:add-padding-y-32 { padding-top:32px; padding-bottom:32px; }
  .xl\:add-margin-32 { margin:32px; }
  .xl\:add-margin-x-32 { margin-left:32px; margin-right:32px; }
  .xl\:add-margin-y-32 { margin-top:32px; margin-bottom:32px; }
  .xl\:gap-32 { gap:32px; }
  .xl\:add-padding-40 { padding:40px; }
  .xl\:add-padding-x-40 { padding-left:40px; padding-right:40px; }
  .xl\:add-padding-y-40 { padding-top:40px; padding-bottom:40px; }
  .xl\:add-margin-40 { margin:40px; }
  .xl\:add-margin-x-40 { margin-left:40px; margin-right:40px; }
  .xl\:add-margin-y-40 { margin-top:40px; margin-bottom:40px; }
  .xl\:gap-40 { gap:40px; }
  .xl\:add-padding-48 { padding:48px; }
  .xl\:add-padding-x-48 { padding-left:48px; padding-right:48px; }
  .xl\:add-padding-y-48 { padding-top:48px; padding-bottom:48px; }
  .xl\:add-margin-48 { margin:48px; }
  .xl\:add-margin-x-48 { margin-left:48px; margin-right:48px; }
  .xl\:add-margin-y-48 { margin-top:48px; margin-bottom:48px; }
  .xl\:gap-48 { gap:48px; }
  .xl\:add-padding-64 { padding:64px; }
  .xl\:add-padding-x-64 { padding-left:64px; padding-right:64px; }
  .xl\:add-padding-y-64 { padding-top:64px; padding-bottom:64px; }
  .xl\:add-margin-64 { margin:64px; }
  .xl\:add-margin-x-64 { margin-left:64px; margin-right:64px; }
  .xl\:add-margin-y-64 { margin-top:64px; margin-bottom:64px; }
  .xl\:gap-64 { gap:64px; }
  .xl\:grid-cols-1 { grid-template-columns:repeat(1,minmax(0,1fr)); }
  .xl\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .xl\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .xl\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .xl\:grid-cols-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .xl\:grid-cols-6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .xl\:grid-cols-7 { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .xl\:grid-cols-8 { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .xl\:grid-cols-9 { grid-template-columns:repeat(9,minmax(0,1fr)); }
  .xl\:grid-cols-10 { grid-template-columns:repeat(10,minmax(0,1fr)); }
  .xl\:grid-cols-11 { grid-template-columns:repeat(11,minmax(0,1fr)); }
  .xl\:grid-cols-12 { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .xl\:set-text-12 { font-size:12px; }
  .xl\:set-text-14 { font-size:14px; }
  .xl\:set-text-16 { font-size:16px; }
  .xl\:set-text-18 { font-size:18px; }
  .xl\:set-text-20 { font-size:20px; }
  .xl\:set-text-24 { font-size:24px; }
  .xl\:set-text-28 { font-size:28px; }
  .xl\:set-text-32 { font-size:32px; }
  .xl\:set-text-36 { font-size:36px; }
  .xl\:set-text-40 { font-size:40px; }
  .xl\:set-text-48 { font-size:48px; }
  .xl\:set-text-56 { font-size:56px; }
  .xl\:set-text-64 { font-size:64px; }
  .xl\:set-width-full { width:100%; }
  .xl\:set-width-auto { width:auto; }
  .xl\:set-width-screen { width:100vw; }
  .xl\:set-width-0 { width:0px; }
  .xl\:set-height-0 { height:0px; }
  .xl\:set-width-4 { width:4px; }
  .xl\:set-height-4 { height:4px; }
  .xl\:set-width-8 { width:8px; }
  .xl\:set-height-8 { height:8px; }
  .xl\:set-width-12 { width:12px; }
  .xl\:set-height-12 { height:12px; }
  .xl\:set-width-16 { width:16px; }
  .xl\:set-height-16 { height:16px; }
  .xl\:set-width-20 { width:20px; }
  .xl\:set-height-20 { height:20px; }
  .xl\:set-width-24 { width:24px; }
  .xl\:set-height-24 { height:24px; }
  .xl\:set-width-32 { width:32px; }
  .xl\:set-height-32 { height:32px; }
  .xl\:set-width-40 { width:40px; }
  .xl\:set-height-40 { height:40px; }
  .xl\:set-width-48 { width:48px; }
  .xl\:set-height-48 { height:48px; }
  .xl\:set-width-64 { width:64px; }
  .xl\:set-height-64 { height:64px; }
}

@media (min-width: 1536px) {
  .xxl\:make-block { display:block; }
  .xxl\:make-inline { display:inline; }
  .xxl\:make-inline-block { display:inline-block; }
  .xxl\:make-flex { display:flex; }
  .xxl\:make-grid { display:grid; }
  .xxl\:make-hidden { display:none; }
  .xxl\:flex-row { flex-direction:row; }
  .xxl\:flex-column { flex-direction:column; }
  .xxl\:flex-wrap { flex-wrap:wrap; }
  .xxl\:flex-nowrap { flex-wrap:nowrap; }
  .xxl\:align-center { align-items:center; }
  .xxl\:align-start { align-items:flex-start; }
  .xxl\:align-end { align-items:flex-end; }
  .xxl\:justify-center { justify-content:center; }
  .xxl\:justify-between { justify-content:space-between; }
  .xxl\:justify-start { justify-content:flex-start; }
  .xxl\:justify-end { justify-content:flex-end; }
  .xxl\:text-left { text-align:left; }
  .xxl\:text-center { text-align:center; }
  .xxl\:text-right { text-align:right; }
  .xxl\:add-padding-0 { padding:0px; }
  .xxl\:add-padding-x-0 { padding-left:0px; padding-right:0px; }
  .xxl\:add-padding-y-0 { padding-top:0px; padding-bottom:0px; }
  .xxl\:add-margin-0 { margin:0px; }
  .xxl\:add-margin-x-0 { margin-left:0px; margin-right:0px; }
  .xxl\:add-margin-y-0 { margin-top:0px; margin-bottom:0px; }
  .xxl\:gap-0 { gap:0px; }
  .xxl\:add-padding-4 { padding:4px; }
  .xxl\:add-padding-x-4 { padding-left:4px; padding-right:4px; }
  .xxl\:add-padding-y-4 { padding-top:4px; padding-bottom:4px; }
  .xxl\:add-margin-4 { margin:4px; }
  .xxl\:add-margin-x-4 { margin-left:4px; margin-right:4px; }
  .xxl\:add-margin-y-4 { margin-top:4px; margin-bottom:4px; }
  .xxl\:gap-4 { gap:4px; }
  .xxl\:add-padding-8 { padding:8px; }
  .xxl\:add-padding-x-8 { padding-left:8px; padding-right:8px; }
  .xxl\:add-padding-y-8 { padding-top:8px; padding-bottom:8px; }
  .xxl\:add-margin-8 { margin:8px; }
  .xxl\:add-margin-x-8 { margin-left:8px; margin-right:8px; }
  .xxl\:add-margin-y-8 { margin-top:8px; margin-bottom:8px; }
  .xxl\:gap-8 { gap:8px; }
  .xxl\:add-padding-12 { padding:12px; }
  .xxl\:add-padding-x-12 { padding-left:12px; padding-right:12px; }
  .xxl\:add-padding-y-12 { padding-top:12px; padding-bottom:12px; }
  .xxl\:add-margin-12 { margin:12px; }
  .xxl\:add-margin-x-12 { margin-left:12px; margin-right:12px; }
  .xxl\:add-margin-y-12 { margin-top:12px; margin-bottom:12px; }
  .xxl\:gap-12 { gap:12px; }
  .xxl\:add-padding-16 { padding:16px; }
  .xxl\:add-padding-x-16 { padding-left:16px; padding-right:16px; }
  .xxl\:add-padding-y-16 { padding-top:16px; padding-bottom:16px; }
  .xxl\:add-margin-16 { margin:16px; }
  .xxl\:add-margin-x-16 { margin-left:16px; margin-right:16px; }
  .xxl\:add-margin-y-16 { margin-top:16px; margin-bottom:16px; }
  .xxl\:gap-16 { gap:16px; }
  .xxl\:add-padding-20 { padding:20px; }
  .xxl\:add-padding-x-20 { padding-left:20px; padding-right:20px; }
  .xxl\:add-padding-y-20 { padding-top:20px; padding-bottom:20px; }
  .xxl\:add-margin-20 { margin:20px; }
  .xxl\:add-margin-x-20 { margin-left:20px; margin-right:20px; }
  .xxl\:add-margin-y-20 { margin-top:20px; margin-bottom:20px; }
  .xxl\:gap-20 { gap:20px; }
  .xxl\:add-padding-24 { padding:24px; }
  .xxl\:add-padding-x-24 { padding-left:24px; padding-right:24px; }
  .xxl\:add-padding-y-24 { padding-top:24px; padding-bottom:24px; }
  .xxl\:add-margin-24 { margin:24px; }
  .xxl\:add-margin-x-24 { margin-left:24px; margin-right:24px; }
  .xxl\:add-margin-y-24 { margin-top:24px; margin-bottom:24px; }
  .xxl\:gap-24 { gap:24px; }
  .xxl\:add-padding-32 { padding:32px; }
  .xxl\:add-padding-x-32 { padding-left:32px; padding-right:32px; }
  .xxl\:add-padding-y-32 { padding-top:32px; padding-bottom:32px; }
  .xxl\:add-margin-32 { margin:32px; }
  .xxl\:add-margin-x-32 { margin-left:32px; margin-right:32px; }
  .xxl\:add-margin-y-32 { margin-top:32px; margin-bottom:32px; }
  .xxl\:gap-32 { gap:32px; }
  .xxl\:add-padding-40 { padding:40px; }
  .xxl\:add-padding-x-40 { padding-left:40px; padding-right:40px; }
  .xxl\:add-padding-y-40 { padding-top:40px; padding-bottom:40px; }
  .xxl\:add-margin-40 { margin:40px; }
  .xxl\:add-margin-x-40 { margin-left:40px; margin-right:40px; }
  .xxl\:add-margin-y-40 { margin-top:40px; margin-bottom:40px; }
  .xxl\:gap-40 { gap:40px; }
  .xxl\:add-padding-48 { padding:48px; }
  .xxl\:add-padding-x-48 { padding-left:48px; padding-right:48px; }
  .xxl\:add-padding-y-48 { padding-top:48px; padding-bottom:48px; }
  .xxl\:add-margin-48 { margin:48px; }
  .xxl\:add-margin-x-48 { margin-left:48px; margin-right:48px; }
  .xxl\:add-margin-y-48 { margin-top:48px; margin-bottom:48px; }
  .xxl\:gap-48 { gap:48px; }
  .xxl\:add-padding-64 { padding:64px; }
  .xxl\:add-padding-x-64 { padding-left:64px; padding-right:64px; }
  .xxl\:add-padding-y-64 { padding-top:64px; padding-bottom:64px; }
  .xxl\:add-margin-64 { margin:64px; }
  .xxl\:add-margin-x-64 { margin-left:64px; margin-right:64px; }
  .xxl\:add-margin-y-64 { margin-top:64px; margin-bottom:64px; }
  .xxl\:gap-64 { gap:64px; }
  .xxl\:grid-cols-1 { grid-template-columns:repeat(1,minmax(0,1fr)); }
  .xxl\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .xxl\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .xxl\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .xxl\:grid-cols-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .xxl\:grid-cols-6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .xxl\:grid-cols-7 { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .xxl\:grid-cols-8 { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .xxl\:grid-cols-9 { grid-template-columns:repeat(9,minmax(0,1fr)); }
  .xxl\:grid-cols-10 { grid-template-columns:repeat(10,minmax(0,1fr)); }
  .xxl\:grid-cols-11 { grid-template-columns:repeat(11,minmax(0,1fr)); }
  .xxl\:grid-cols-12 { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .xxl\:set-text-12 { font-size:12px; }
  .xxl\:set-text-14 { font-size:14px; }
  .xxl\:set-text-16 { font-size:16px; }
  .xxl\:set-text-18 { font-size:18px; }
  .xxl\:set-text-20 { font-size:20px; }
  .xxl\:set-text-24 { font-size:24px; }
  .xxl\:set-text-28 { font-size:28px; }
  .xxl\:set-text-32 { font-size:32px; }
  .xxl\:set-text-36 { font-size:36px; }
  .xxl\:set-text-40 { font-size:40px; }
  .xxl\:set-text-48 { font-size:48px; }
  .xxl\:set-text-56 { font-size:56px; }
  .xxl\:set-text-64 { font-size:64px; }
  .xxl\:set-width-full { width:100%; }
  .xxl\:set-width-auto { width:auto; }
  .xxl\:set-width-screen { width:100vw; }
  .xxl\:set-width-0 { width:0px; }
  .xxl\:set-height-0 { height:0px; }
  .xxl\:set-width-4 { width:4px; }
  .xxl\:set-height-4 { height:4px; }
  .xxl\:set-width-8 { width:8px; }
  .xxl\:set-height-8 { height:8px; }
  .xxl\:set-width-12 { width:12px; }
  .xxl\:set-height-12 { height:12px; }
  .xxl\:set-width-16 { width:16px; }
  .xxl\:set-height-16 { height:16px; }
  .xxl\:set-width-20 { width:20px; }
  .xxl\:set-height-20 { height:20px; }
  .xxl\:set-width-24 { width:24px; }
  .xxl\:set-height-24 { height:24px; }
  .xxl\:set-width-32 { width:32px; }
  .xxl\:set-height-32 { height:32px; }
  .xxl\:set-width-40 { width:40px; }
  .xxl\:set-height-40 { height:40px; }
  .xxl\:set-width-48 { width:48px; }
  .xxl\:set-height-48 { height:48px; }
  .xxl\:set-width-64 { width:64px; }
  .xxl\:set-height-64 { height:64px; }
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE VARIANTS
   Usage: class="dark:background-gray-900 dark:color-white"
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  .dark\:background-white { background-color:#ffffff; }
  .dark\:background-black { background-color:#000000; }
  .dark\:color-white { color:#ffffff; }
  .dark\:color-black { color:#000000; }
  .dark\:background-red-50 { background-color:#fef2f2; }
  .dark\:color-red-50 { color:#fef2f2; }
  .dark\:border-color-red-50 { border-color:#fef2f2; }
  .dark\:background-red-100 { background-color:#fee2e2; }
  .dark\:color-red-100 { color:#fee2e2; }
  .dark\:border-color-red-100 { border-color:#fee2e2; }
  .dark\:background-red-200 { background-color:#fecaca; }
  .dark\:color-red-200 { color:#fecaca; }
  .dark\:border-color-red-200 { border-color:#fecaca; }
  .dark\:background-red-300 { background-color:#fca5a5; }
  .dark\:color-red-300 { color:#fca5a5; }
  .dark\:border-color-red-300 { border-color:#fca5a5; }
  .dark\:background-red-400 { background-color:#f87171; }
  .dark\:color-red-400 { color:#f87171; }
  .dark\:border-color-red-400 { border-color:#f87171; }
  .dark\:background-red-500 { background-color:#ef4444; }
  .dark\:color-red-500 { color:#ef4444; }
  .dark\:border-color-red-500 { border-color:#ef4444; }
  .dark\:background-red-600 { background-color:#dc2626; }
  .dark\:color-red-600 { color:#dc2626; }
  .dark\:border-color-red-600 { border-color:#dc2626; }
  .dark\:background-red-700 { background-color:#b91c1c; }
  .dark\:color-red-700 { color:#b91c1c; }
  .dark\:border-color-red-700 { border-color:#b91c1c; }
  .dark\:background-red-800 { background-color:#991b1b; }
  .dark\:color-red-800 { color:#991b1b; }
  .dark\:border-color-red-800 { border-color:#991b1b; }
  .dark\:background-red-900 { background-color:#7f1d1d; }
  .dark\:color-red-900 { color:#7f1d1d; }
  .dark\:border-color-red-900 { border-color:#7f1d1d; }
  .dark\:background-orange-50 { background-color:#fff7ed; }
  .dark\:color-orange-50 { color:#fff7ed; }
  .dark\:border-color-orange-50 { border-color:#fff7ed; }
  .dark\:background-orange-100 { background-color:#ffedd5; }
  .dark\:color-orange-100 { color:#ffedd5; }
  .dark\:border-color-orange-100 { border-color:#ffedd5; }
  .dark\:background-orange-200 { background-color:#fed7aa; }
  .dark\:color-orange-200 { color:#fed7aa; }
  .dark\:border-color-orange-200 { border-color:#fed7aa; }
  .dark\:background-orange-300 { background-color:#fdba74; }
  .dark\:color-orange-300 { color:#fdba74; }
  .dark\:border-color-orange-300 { border-color:#fdba74; }
  .dark\:background-orange-400 { background-color:#fb923c; }
  .dark\:color-orange-400 { color:#fb923c; }
  .dark\:border-color-orange-400 { border-color:#fb923c; }
  .dark\:background-orange-500 { background-color:#f97316; }
  .dark\:color-orange-500 { color:#f97316; }
  .dark\:border-color-orange-500 { border-color:#f97316; }
  .dark\:background-orange-600 { background-color:#ea580c; }
  .dark\:color-orange-600 { color:#ea580c; }
  .dark\:border-color-orange-600 { border-color:#ea580c; }
  .dark\:background-orange-700 { background-color:#c2410c; }
  .dark\:color-orange-700 { color:#c2410c; }
  .dark\:border-color-orange-700 { border-color:#c2410c; }
  .dark\:background-orange-800 { background-color:#9a3412; }
  .dark\:color-orange-800 { color:#9a3412; }
  .dark\:border-color-orange-800 { border-color:#9a3412; }
  .dark\:background-orange-900 { background-color:#7c2d12; }
  .dark\:color-orange-900 { color:#7c2d12; }
  .dark\:border-color-orange-900 { border-color:#7c2d12; }
  .dark\:background-amber-50 { background-color:#fffbeb; }
  .dark\:color-amber-50 { color:#fffbeb; }
  .dark\:border-color-amber-50 { border-color:#fffbeb; }
  .dark\:background-amber-100 { background-color:#fef3c7; }
  .dark\:color-amber-100 { color:#fef3c7; }
  .dark\:border-color-amber-100 { border-color:#fef3c7; }
  .dark\:background-amber-200 { background-color:#fde68a; }
  .dark\:color-amber-200 { color:#fde68a; }
  .dark\:border-color-amber-200 { border-color:#fde68a; }
  .dark\:background-amber-300 { background-color:#fcd34d; }
  .dark\:color-amber-300 { color:#fcd34d; }
  .dark\:border-color-amber-300 { border-color:#fcd34d; }
  .dark\:background-amber-400 { background-color:#fbbf24; }
  .dark\:color-amber-400 { color:#fbbf24; }
  .dark\:border-color-amber-400 { border-color:#fbbf24; }
  .dark\:background-amber-500 { background-color:#f59e0b; }
  .dark\:color-amber-500 { color:#f59e0b; }
  .dark\:border-color-amber-500 { border-color:#f59e0b; }
  .dark\:background-amber-600 { background-color:#d97706; }
  .dark\:color-amber-600 { color:#d97706; }
  .dark\:border-color-amber-600 { border-color:#d97706; }
  .dark\:background-amber-700 { background-color:#b45309; }
  .dark\:color-amber-700 { color:#b45309; }
  .dark\:border-color-amber-700 { border-color:#b45309; }
  .dark\:background-amber-800 { background-color:#92400e; }
  .dark\:color-amber-800 { color:#92400e; }
  .dark\:border-color-amber-800 { border-color:#92400e; }
  .dark\:background-amber-900 { background-color:#78350f; }
  .dark\:color-amber-900 { color:#78350f; }
  .dark\:border-color-amber-900 { border-color:#78350f; }
  .dark\:background-yellow-50 { background-color:#fefce8; }
  .dark\:color-yellow-50 { color:#fefce8; }
  .dark\:border-color-yellow-50 { border-color:#fefce8; }
  .dark\:background-yellow-100 { background-color:#fef9c3; }
  .dark\:color-yellow-100 { color:#fef9c3; }
  .dark\:border-color-yellow-100 { border-color:#fef9c3; }
  .dark\:background-yellow-200 { background-color:#fef08a; }
  .dark\:color-yellow-200 { color:#fef08a; }
  .dark\:border-color-yellow-200 { border-color:#fef08a; }
  .dark\:background-yellow-300 { background-color:#fde047; }
  .dark\:color-yellow-300 { color:#fde047; }
  .dark\:border-color-yellow-300 { border-color:#fde047; }
  .dark\:background-yellow-400 { background-color:#facc15; }
  .dark\:color-yellow-400 { color:#facc15; }
  .dark\:border-color-yellow-400 { border-color:#facc15; }
  .dark\:background-yellow-500 { background-color:#eab308; }
  .dark\:color-yellow-500 { color:#eab308; }
  .dark\:border-color-yellow-500 { border-color:#eab308; }
  .dark\:background-yellow-600 { background-color:#ca8a04; }
  .dark\:color-yellow-600 { color:#ca8a04; }
  .dark\:border-color-yellow-600 { border-color:#ca8a04; }
  .dark\:background-yellow-700 { background-color:#a16207; }
  .dark\:color-yellow-700 { color:#a16207; }
  .dark\:border-color-yellow-700 { border-color:#a16207; }
  .dark\:background-yellow-800 { background-color:#854d0e; }
  .dark\:color-yellow-800 { color:#854d0e; }
  .dark\:border-color-yellow-800 { border-color:#854d0e; }
  .dark\:background-yellow-900 { background-color:#713f12; }
  .dark\:color-yellow-900 { color:#713f12; }
  .dark\:border-color-yellow-900 { border-color:#713f12; }
  .dark\:background-lime-50 { background-color:#f7fee7; }
  .dark\:color-lime-50 { color:#f7fee7; }
  .dark\:border-color-lime-50 { border-color:#f7fee7; }
  .dark\:background-lime-100 { background-color:#ecfccb; }
  .dark\:color-lime-100 { color:#ecfccb; }
  .dark\:border-color-lime-100 { border-color:#ecfccb; }
  .dark\:background-lime-200 { background-color:#d9f99d; }
  .dark\:color-lime-200 { color:#d9f99d; }
  .dark\:border-color-lime-200 { border-color:#d9f99d; }
  .dark\:background-lime-300 { background-color:#bef264; }
  .dark\:color-lime-300 { color:#bef264; }
  .dark\:border-color-lime-300 { border-color:#bef264; }
  .dark\:background-lime-400 { background-color:#a3e635; }
  .dark\:color-lime-400 { color:#a3e635; }
  .dark\:border-color-lime-400 { border-color:#a3e635; }
  .dark\:background-lime-500 { background-color:#84cc16; }
  .dark\:color-lime-500 { color:#84cc16; }
  .dark\:border-color-lime-500 { border-color:#84cc16; }
  .dark\:background-lime-600 { background-color:#65a30d; }
  .dark\:color-lime-600 { color:#65a30d; }
  .dark\:border-color-lime-600 { border-color:#65a30d; }
  .dark\:background-lime-700 { background-color:#4d7c0f; }
  .dark\:color-lime-700 { color:#4d7c0f; }
  .dark\:border-color-lime-700 { border-color:#4d7c0f; }
  .dark\:background-lime-800 { background-color:#3f6212; }
  .dark\:color-lime-800 { color:#3f6212; }
  .dark\:border-color-lime-800 { border-color:#3f6212; }
  .dark\:background-lime-900 { background-color:#365314; }
  .dark\:color-lime-900 { color:#365314; }
  .dark\:border-color-lime-900 { border-color:#365314; }
  .dark\:background-green-50 { background-color:#f0fdf4; }
  .dark\:color-green-50 { color:#f0fdf4; }
  .dark\:border-color-green-50 { border-color:#f0fdf4; }
  .dark\:background-green-100 { background-color:#dcfce7; }
  .dark\:color-green-100 { color:#dcfce7; }
  .dark\:border-color-green-100 { border-color:#dcfce7; }
  .dark\:background-green-200 { background-color:#bbf7d0; }
  .dark\:color-green-200 { color:#bbf7d0; }
  .dark\:border-color-green-200 { border-color:#bbf7d0; }
  .dark\:background-green-300 { background-color:#86efac; }
  .dark\:color-green-300 { color:#86efac; }
  .dark\:border-color-green-300 { border-color:#86efac; }
  .dark\:background-green-400 { background-color:#4ade80; }
  .dark\:color-green-400 { color:#4ade80; }
  .dark\:border-color-green-400 { border-color:#4ade80; }
  .dark\:background-green-500 { background-color:#22c55e; }
  .dark\:color-green-500 { color:#22c55e; }
  .dark\:border-color-green-500 { border-color:#22c55e; }
  .dark\:background-green-600 { background-color:#16a34a; }
  .dark\:color-green-600 { color:#16a34a; }
  .dark\:border-color-green-600 { border-color:#16a34a; }
  .dark\:background-green-700 { background-color:#15803d; }
  .dark\:color-green-700 { color:#15803d; }
  .dark\:border-color-green-700 { border-color:#15803d; }
  .dark\:background-green-800 { background-color:#166534; }
  .dark\:color-green-800 { color:#166534; }
  .dark\:border-color-green-800 { border-color:#166534; }
  .dark\:background-green-900 { background-color:#14532d; }
  .dark\:color-green-900 { color:#14532d; }
  .dark\:border-color-green-900 { border-color:#14532d; }
  .dark\:background-teal-50 { background-color:#f0fdfa; }
  .dark\:color-teal-50 { color:#f0fdfa; }
  .dark\:border-color-teal-50 { border-color:#f0fdfa; }
  .dark\:background-teal-100 { background-color:#ccfbf1; }
  .dark\:color-teal-100 { color:#ccfbf1; }
  .dark\:border-color-teal-100 { border-color:#ccfbf1; }
  .dark\:background-teal-200 { background-color:#99f6e4; }
  .dark\:color-teal-200 { color:#99f6e4; }
  .dark\:border-color-teal-200 { border-color:#99f6e4; }
  .dark\:background-teal-300 { background-color:#5eead4; }
  .dark\:color-teal-300 { color:#5eead4; }
  .dark\:border-color-teal-300 { border-color:#5eead4; }
  .dark\:background-teal-400 { background-color:#2dd4bf; }
  .dark\:color-teal-400 { color:#2dd4bf; }
  .dark\:border-color-teal-400 { border-color:#2dd4bf; }
  .dark\:background-teal-500 { background-color:#14b8a6; }
  .dark\:color-teal-500 { color:#14b8a6; }
  .dark\:border-color-teal-500 { border-color:#14b8a6; }
  .dark\:background-teal-600 { background-color:#0d9488; }
  .dark\:color-teal-600 { color:#0d9488; }
  .dark\:border-color-teal-600 { border-color:#0d9488; }
  .dark\:background-teal-700 { background-color:#0f766e; }
  .dark\:color-teal-700 { color:#0f766e; }
  .dark\:border-color-teal-700 { border-color:#0f766e; }
  .dark\:background-teal-800 { background-color:#115e59; }
  .dark\:color-teal-800 { color:#115e59; }
  .dark\:border-color-teal-800 { border-color:#115e59; }
  .dark\:background-teal-900 { background-color:#134e4a; }
  .dark\:color-teal-900 { color:#134e4a; }
  .dark\:border-color-teal-900 { border-color:#134e4a; }
  .dark\:background-cyan-50 { background-color:#ecfeff; }
  .dark\:color-cyan-50 { color:#ecfeff; }
  .dark\:border-color-cyan-50 { border-color:#ecfeff; }
  .dark\:background-cyan-100 { background-color:#cffafe; }
  .dark\:color-cyan-100 { color:#cffafe; }
  .dark\:border-color-cyan-100 { border-color:#cffafe; }
  .dark\:background-cyan-200 { background-color:#a5f3fc; }
  .dark\:color-cyan-200 { color:#a5f3fc; }
  .dark\:border-color-cyan-200 { border-color:#a5f3fc; }
  .dark\:background-cyan-300 { background-color:#67e8f9; }
  .dark\:color-cyan-300 { color:#67e8f9; }
  .dark\:border-color-cyan-300 { border-color:#67e8f9; }
  .dark\:background-cyan-400 { background-color:#22d3ee; }
  .dark\:color-cyan-400 { color:#22d3ee; }
  .dark\:border-color-cyan-400 { border-color:#22d3ee; }
  .dark\:background-cyan-500 { background-color:#06b6d4; }
  .dark\:color-cyan-500 { color:#06b6d4; }
  .dark\:border-color-cyan-500 { border-color:#06b6d4; }
  .dark\:background-cyan-600 { background-color:#0891b2; }
  .dark\:color-cyan-600 { color:#0891b2; }
  .dark\:border-color-cyan-600 { border-color:#0891b2; }
  .dark\:background-cyan-700 { background-color:#0e7490; }
  .dark\:color-cyan-700 { color:#0e7490; }
  .dark\:border-color-cyan-700 { border-color:#0e7490; }
  .dark\:background-cyan-800 { background-color:#155e75; }
  .dark\:color-cyan-800 { color:#155e75; }
  .dark\:border-color-cyan-800 { border-color:#155e75; }
  .dark\:background-cyan-900 { background-color:#164e63; }
  .dark\:color-cyan-900 { color:#164e63; }
  .dark\:border-color-cyan-900 { border-color:#164e63; }
  .dark\:background-blue-50 { background-color:#eff6ff; }
  .dark\:color-blue-50 { color:#eff6ff; }
  .dark\:border-color-blue-50 { border-color:#eff6ff; }
  .dark\:background-blue-100 { background-color:#dbeafe; }
  .dark\:color-blue-100 { color:#dbeafe; }
  .dark\:border-color-blue-100 { border-color:#dbeafe; }
  .dark\:background-blue-200 { background-color:#bfdbfe; }
  .dark\:color-blue-200 { color:#bfdbfe; }
  .dark\:border-color-blue-200 { border-color:#bfdbfe; }
  .dark\:background-blue-300 { background-color:#93c5fd; }
  .dark\:color-blue-300 { color:#93c5fd; }
  .dark\:border-color-blue-300 { border-color:#93c5fd; }
  .dark\:background-blue-400 { background-color:#60a5fa; }
  .dark\:color-blue-400 { color:#60a5fa; }
  .dark\:border-color-blue-400 { border-color:#60a5fa; }
  .dark\:background-blue-500 { background-color:#3b82f6; }
  .dark\:color-blue-500 { color:#3b82f6; }
  .dark\:border-color-blue-500 { border-color:#3b82f6; }
  .dark\:background-blue-600 { background-color:#2563eb; }
  .dark\:color-blue-600 { color:#2563eb; }
  .dark\:border-color-blue-600 { border-color:#2563eb; }
  .dark\:background-blue-700 { background-color:#1d4ed8; }
  .dark\:color-blue-700 { color:#1d4ed8; }
  .dark\:border-color-blue-700 { border-color:#1d4ed8; }
  .dark\:background-blue-800 { background-color:#1e40af; }
  .dark\:color-blue-800 { color:#1e40af; }
  .dark\:border-color-blue-800 { border-color:#1e40af; }
  .dark\:background-blue-900 { background-color:#1e3a8a; }
  .dark\:color-blue-900 { color:#1e3a8a; }
  .dark\:border-color-blue-900 { border-color:#1e3a8a; }
  .dark\:background-indigo-50 { background-color:#eef2ff; }
  .dark\:color-indigo-50 { color:#eef2ff; }
  .dark\:border-color-indigo-50 { border-color:#eef2ff; }
  .dark\:background-indigo-100 { background-color:#e0e7ff; }
  .dark\:color-indigo-100 { color:#e0e7ff; }
  .dark\:border-color-indigo-100 { border-color:#e0e7ff; }
  .dark\:background-indigo-200 { background-color:#c7d2fe; }
  .dark\:color-indigo-200 { color:#c7d2fe; }
  .dark\:border-color-indigo-200 { border-color:#c7d2fe; }
  .dark\:background-indigo-300 { background-color:#a5b4fc; }
  .dark\:color-indigo-300 { color:#a5b4fc; }
  .dark\:border-color-indigo-300 { border-color:#a5b4fc; }
  .dark\:background-indigo-400 { background-color:#818cf8; }
  .dark\:color-indigo-400 { color:#818cf8; }
  .dark\:border-color-indigo-400 { border-color:#818cf8; }
  .dark\:background-indigo-500 { background-color:#6366f1; }
  .dark\:color-indigo-500 { color:#6366f1; }
  .dark\:border-color-indigo-500 { border-color:#6366f1; }
  .dark\:background-indigo-600 { background-color:#4f46e5; }
  .dark\:color-indigo-600 { color:#4f46e5; }
  .dark\:border-color-indigo-600 { border-color:#4f46e5; }
  .dark\:background-indigo-700 { background-color:#4338ca; }
  .dark\:color-indigo-700 { color:#4338ca; }
  .dark\:border-color-indigo-700 { border-color:#4338ca; }
  .dark\:background-indigo-800 { background-color:#3730a3; }
  .dark\:color-indigo-800 { color:#3730a3; }
  .dark\:border-color-indigo-800 { border-color:#3730a3; }
  .dark\:background-indigo-900 { background-color:#312e81; }
  .dark\:color-indigo-900 { color:#312e81; }
  .dark\:border-color-indigo-900 { border-color:#312e81; }
  .dark\:background-violet-50 { background-color:#f5f3ff; }
  .dark\:color-violet-50 { color:#f5f3ff; }
  .dark\:border-color-violet-50 { border-color:#f5f3ff; }
  .dark\:background-violet-100 { background-color:#ede9fe; }
  .dark\:color-violet-100 { color:#ede9fe; }
  .dark\:border-color-violet-100 { border-color:#ede9fe; }
  .dark\:background-violet-200 { background-color:#ddd6fe; }
  .dark\:color-violet-200 { color:#ddd6fe; }
  .dark\:border-color-violet-200 { border-color:#ddd6fe; }
  .dark\:background-violet-300 { background-color:#c4b5fd; }
  .dark\:color-violet-300 { color:#c4b5fd; }
  .dark\:border-color-violet-300 { border-color:#c4b5fd; }
  .dark\:background-violet-400 { background-color:#a78bfa; }
  .dark\:color-violet-400 { color:#a78bfa; }
  .dark\:border-color-violet-400 { border-color:#a78bfa; }
  .dark\:background-violet-500 { background-color:#8b5cf6; }
  .dark\:color-violet-500 { color:#8b5cf6; }
  .dark\:border-color-violet-500 { border-color:#8b5cf6; }
  .dark\:background-violet-600 { background-color:#7c3aed; }
  .dark\:color-violet-600 { color:#7c3aed; }
  .dark\:border-color-violet-600 { border-color:#7c3aed; }
  .dark\:background-violet-700 { background-color:#6d28d9; }
  .dark\:color-violet-700 { color:#6d28d9; }
  .dark\:border-color-violet-700 { border-color:#6d28d9; }
  .dark\:background-violet-800 { background-color:#5b21b6; }
  .dark\:color-violet-800 { color:#5b21b6; }
  .dark\:border-color-violet-800 { border-color:#5b21b6; }
  .dark\:background-violet-900 { background-color:#4c1d95; }
  .dark\:color-violet-900 { color:#4c1d95; }
  .dark\:border-color-violet-900 { border-color:#4c1d95; }
  .dark\:background-purple-50 { background-color:#faf5ff; }
  .dark\:color-purple-50 { color:#faf5ff; }
  .dark\:border-color-purple-50 { border-color:#faf5ff; }
  .dark\:background-purple-100 { background-color:#f3e8ff; }
  .dark\:color-purple-100 { color:#f3e8ff; }
  .dark\:border-color-purple-100 { border-color:#f3e8ff; }
  .dark\:background-purple-200 { background-color:#e9d5ff; }
  .dark\:color-purple-200 { color:#e9d5ff; }
  .dark\:border-color-purple-200 { border-color:#e9d5ff; }
  .dark\:background-purple-300 { background-color:#d8b4fe; }
  .dark\:color-purple-300 { color:#d8b4fe; }
  .dark\:border-color-purple-300 { border-color:#d8b4fe; }
  .dark\:background-purple-400 { background-color:#c084fc; }
  .dark\:color-purple-400 { color:#c084fc; }
  .dark\:border-color-purple-400 { border-color:#c084fc; }
  .dark\:background-purple-500 { background-color:#a855f7; }
  .dark\:color-purple-500 { color:#a855f7; }
  .dark\:border-color-purple-500 { border-color:#a855f7; }
  .dark\:background-purple-600 { background-color:#9333ea; }
  .dark\:color-purple-600 { color:#9333ea; }
  .dark\:border-color-purple-600 { border-color:#9333ea; }
  .dark\:background-purple-700 { background-color:#7e22ce; }
  .dark\:color-purple-700 { color:#7e22ce; }
  .dark\:border-color-purple-700 { border-color:#7e22ce; }
  .dark\:background-purple-800 { background-color:#6b21a8; }
  .dark\:color-purple-800 { color:#6b21a8; }
  .dark\:border-color-purple-800 { border-color:#6b21a8; }
  .dark\:background-purple-900 { background-color:#581c87; }
  .dark\:color-purple-900 { color:#581c87; }
  .dark\:border-color-purple-900 { border-color:#581c87; }
  .dark\:background-pink-50 { background-color:#fdf2f8; }
  .dark\:color-pink-50 { color:#fdf2f8; }
  .dark\:border-color-pink-50 { border-color:#fdf2f8; }
  .dark\:background-pink-100 { background-color:#fce7f3; }
  .dark\:color-pink-100 { color:#fce7f3; }
  .dark\:border-color-pink-100 { border-color:#fce7f3; }
  .dark\:background-pink-200 { background-color:#fbcfe8; }
  .dark\:color-pink-200 { color:#fbcfe8; }
  .dark\:border-color-pink-200 { border-color:#fbcfe8; }
  .dark\:background-pink-300 { background-color:#f9a8d4; }
  .dark\:color-pink-300 { color:#f9a8d4; }
  .dark\:border-color-pink-300 { border-color:#f9a8d4; }
  .dark\:background-pink-400 { background-color:#f472b6; }
  .dark\:color-pink-400 { color:#f472b6; }
  .dark\:border-color-pink-400 { border-color:#f472b6; }
  .dark\:background-pink-500 { background-color:#ec4899; }
  .dark\:color-pink-500 { color:#ec4899; }
  .dark\:border-color-pink-500 { border-color:#ec4899; }
  .dark\:background-pink-600 { background-color:#db2777; }
  .dark\:color-pink-600 { color:#db2777; }
  .dark\:border-color-pink-600 { border-color:#db2777; }
  .dark\:background-pink-700 { background-color:#be185d; }
  .dark\:color-pink-700 { color:#be185d; }
  .dark\:border-color-pink-700 { border-color:#be185d; }
  .dark\:background-pink-800 { background-color:#9d174d; }
  .dark\:color-pink-800 { color:#9d174d; }
  .dark\:border-color-pink-800 { border-color:#9d174d; }
  .dark\:background-pink-900 { background-color:#831843; }
  .dark\:color-pink-900 { color:#831843; }
  .dark\:border-color-pink-900 { border-color:#831843; }
  .dark\:background-rose-50 { background-color:#fff1f2; }
  .dark\:color-rose-50 { color:#fff1f2; }
  .dark\:border-color-rose-50 { border-color:#fff1f2; }
  .dark\:background-rose-100 { background-color:#ffe4e6; }
  .dark\:color-rose-100 { color:#ffe4e6; }
  .dark\:border-color-rose-100 { border-color:#ffe4e6; }
  .dark\:background-rose-200 { background-color:#fecdd3; }
  .dark\:color-rose-200 { color:#fecdd3; }
  .dark\:border-color-rose-200 { border-color:#fecdd3; }
  .dark\:background-rose-300 { background-color:#fda4af; }
  .dark\:color-rose-300 { color:#fda4af; }
  .dark\:border-color-rose-300 { border-color:#fda4af; }
  .dark\:background-rose-400 { background-color:#fb7185; }
  .dark\:color-rose-400 { color:#fb7185; }
  .dark\:border-color-rose-400 { border-color:#fb7185; }
  .dark\:background-rose-500 { background-color:#f43f5e; }
  .dark\:color-rose-500 { color:#f43f5e; }
  .dark\:border-color-rose-500 { border-color:#f43f5e; }
  .dark\:background-rose-600 { background-color:#e11d48; }
  .dark\:color-rose-600 { color:#e11d48; }
  .dark\:border-color-rose-600 { border-color:#e11d48; }
  .dark\:background-rose-700 { background-color:#be123c; }
  .dark\:color-rose-700 { color:#be123c; }
  .dark\:border-color-rose-700 { border-color:#be123c; }
  .dark\:background-rose-800 { background-color:#9f1239; }
  .dark\:color-rose-800 { color:#9f1239; }
  .dark\:border-color-rose-800 { border-color:#9f1239; }
  .dark\:background-rose-900 { background-color:#881337; }
  .dark\:color-rose-900 { color:#881337; }
  .dark\:border-color-rose-900 { border-color:#881337; }
  .dark\:background-slate-50 { background-color:#f8fafc; }
  .dark\:color-slate-50 { color:#f8fafc; }
  .dark\:border-color-slate-50 { border-color:#f8fafc; }
  .dark\:background-slate-100 { background-color:#f1f5f9; }
  .dark\:color-slate-100 { color:#f1f5f9; }
  .dark\:border-color-slate-100 { border-color:#f1f5f9; }
  .dark\:background-slate-200 { background-color:#e2e8f0; }
  .dark\:color-slate-200 { color:#e2e8f0; }
  .dark\:border-color-slate-200 { border-color:#e2e8f0; }
  .dark\:background-slate-300 { background-color:#cbd5e1; }
  .dark\:color-slate-300 { color:#cbd5e1; }
  .dark\:border-color-slate-300 { border-color:#cbd5e1; }
  .dark\:background-slate-400 { background-color:#94a3b8; }
  .dark\:color-slate-400 { color:#94a3b8; }
  .dark\:border-color-slate-400 { border-color:#94a3b8; }
  .dark\:background-slate-500 { background-color:#64748b; }
  .dark\:color-slate-500 { color:#64748b; }
  .dark\:border-color-slate-500 { border-color:#64748b; }
  .dark\:background-slate-600 { background-color:#475569; }
  .dark\:color-slate-600 { color:#475569; }
  .dark\:border-color-slate-600 { border-color:#475569; }
  .dark\:background-slate-700 { background-color:#334155; }
  .dark\:color-slate-700 { color:#334155; }
  .dark\:border-color-slate-700 { border-color:#334155; }
  .dark\:background-slate-800 { background-color:#1e293b; }
  .dark\:color-slate-800 { color:#1e293b; }
  .dark\:border-color-slate-800 { border-color:#1e293b; }
  .dark\:background-slate-900 { background-color:#0f172a; }
  .dark\:color-slate-900 { color:#0f172a; }
  .dark\:border-color-slate-900 { border-color:#0f172a; }
  .dark\:background-gray-50 { background-color:#f9fafb; }
  .dark\:color-gray-50 { color:#f9fafb; }
  .dark\:border-color-gray-50 { border-color:#f9fafb; }
  .dark\:background-gray-100 { background-color:#f3f4f6; }
  .dark\:color-gray-100 { color:#f3f4f6; }
  .dark\:border-color-gray-100 { border-color:#f3f4f6; }
  .dark\:background-gray-200 { background-color:#e5e7eb; }
  .dark\:color-gray-200 { color:#e5e7eb; }
  .dark\:border-color-gray-200 { border-color:#e5e7eb; }
  .dark\:background-gray-300 { background-color:#d1d5db; }
  .dark\:color-gray-300 { color:#d1d5db; }
  .dark\:border-color-gray-300 { border-color:#d1d5db; }
  .dark\:background-gray-400 { background-color:#9ca3af; }
  .dark\:color-gray-400 { color:#9ca3af; }
  .dark\:border-color-gray-400 { border-color:#9ca3af; }
  .dark\:background-gray-500 { background-color:#6b7280; }
  .dark\:color-gray-500 { color:#6b7280; }
  .dark\:border-color-gray-500 { border-color:#6b7280; }
  .dark\:background-gray-600 { background-color:#4b5563; }
  .dark\:color-gray-600 { color:#4b5563; }
  .dark\:border-color-gray-600 { border-color:#4b5563; }
  .dark\:background-gray-700 { background-color:#374151; }
  .dark\:color-gray-700 { color:#374151; }
  .dark\:border-color-gray-700 { border-color:#374151; }
  .dark\:background-gray-800 { background-color:#1f2937; }
  .dark\:color-gray-800 { color:#1f2937; }
  .dark\:border-color-gray-800 { border-color:#1f2937; }
  .dark\:background-gray-900 { background-color:#111827; }
  .dark\:color-gray-900 { color:#111827; }
  .dark\:border-color-gray-900 { border-color:#111827; }
  .dark\:background-zinc-50 { background-color:#fafafa; }
  .dark\:color-zinc-50 { color:#fafafa; }
  .dark\:border-color-zinc-50 { border-color:#fafafa; }
  .dark\:background-zinc-100 { background-color:#f4f4f5; }
  .dark\:color-zinc-100 { color:#f4f4f5; }
  .dark\:border-color-zinc-100 { border-color:#f4f4f5; }
  .dark\:background-zinc-200 { background-color:#e4e4e7; }
  .dark\:color-zinc-200 { color:#e4e4e7; }
  .dark\:border-color-zinc-200 { border-color:#e4e4e7; }
  .dark\:background-zinc-300 { background-color:#d4d4d8; }
  .dark\:color-zinc-300 { color:#d4d4d8; }
  .dark\:border-color-zinc-300 { border-color:#d4d4d8; }
  .dark\:background-zinc-400 { background-color:#a1a1aa; }
  .dark\:color-zinc-400 { color:#a1a1aa; }
  .dark\:border-color-zinc-400 { border-color:#a1a1aa; }
  .dark\:background-zinc-500 { background-color:#71717a; }
  .dark\:color-zinc-500 { color:#71717a; }
  .dark\:border-color-zinc-500 { border-color:#71717a; }
  .dark\:background-zinc-600 { background-color:#52525b; }
  .dark\:color-zinc-600 { color:#52525b; }
  .dark\:border-color-zinc-600 { border-color:#52525b; }
  .dark\:background-zinc-700 { background-color:#3f3f46; }
  .dark\:color-zinc-700 { color:#3f3f46; }
  .dark\:border-color-zinc-700 { border-color:#3f3f46; }
  .dark\:background-zinc-800 { background-color:#27272a; }
  .dark\:color-zinc-800 { color:#27272a; }
  .dark\:border-color-zinc-800 { border-color:#27272a; }
  .dark\:background-zinc-900 { background-color:#18181b; }
  .dark\:color-zinc-900 { color:#18181b; }
  .dark\:border-color-zinc-900 { border-color:#18181b; }
  .dark\:background-stone-50 { background-color:#fafaf9; }
  .dark\:color-stone-50 { color:#fafaf9; }
  .dark\:border-color-stone-50 { border-color:#fafaf9; }
  .dark\:background-stone-100 { background-color:#f5f5f4; }
  .dark\:color-stone-100 { color:#f5f5f4; }
  .dark\:border-color-stone-100 { border-color:#f5f5f4; }
  .dark\:background-stone-200 { background-color:#e7e5e4; }
  .dark\:color-stone-200 { color:#e7e5e4; }
  .dark\:border-color-stone-200 { border-color:#e7e5e4; }
  .dark\:background-stone-300 { background-color:#d6d3d1; }
  .dark\:color-stone-300 { color:#d6d3d1; }
  .dark\:border-color-stone-300 { border-color:#d6d3d1; }
  .dark\:background-stone-400 { background-color:#a8a29e; }
  .dark\:color-stone-400 { color:#a8a29e; }
  .dark\:border-color-stone-400 { border-color:#a8a29e; }
  .dark\:background-stone-500 { background-color:#78716c; }
  .dark\:color-stone-500 { color:#78716c; }
  .dark\:border-color-stone-500 { border-color:#78716c; }
  .dark\:background-stone-600 { background-color:#57534e; }
  .dark\:color-stone-600 { color:#57534e; }
  .dark\:border-color-stone-600 { border-color:#57534e; }
  .dark\:background-stone-700 { background-color:#44403c; }
  .dark\:color-stone-700 { color:#44403c; }
  .dark\:border-color-stone-700 { border-color:#44403c; }
  .dark\:background-stone-800 { background-color:#292524; }
  .dark\:color-stone-800 { color:#292524; }
  .dark\:border-color-stone-800 { border-color:#292524; }
  .dark\:background-stone-900 { background-color:#1c1917; }
  .dark\:color-stone-900 { color:#1c1917; }
  .dark\:border-color-stone-900 { border-color:#1c1917; }
}

/* ═══════════════════════════════════════════════════════════════
   STATE VARIANTS (hover, focus, active, disabled, group-hover)
   Usage: class="on-hover:background-blue-500 on-focus:outline-none"
   ═══════════════════════════════════════════════════════════════ */

/* on-hover */
.on-hover\:background-red-300:hover { background-color:#fca5a5; }
.on-hover\:color-red-300:hover { color:#fca5a5; }
.on-hover\:border-color-red-300:hover { border-color:#fca5a5; }
.on-hover\:background-red-400:hover { background-color:#f87171; }
.on-hover\:color-red-400:hover { color:#f87171; }
.on-hover\:border-color-red-400:hover { border-color:#f87171; }
.on-hover\:background-red-500:hover { background-color:#ef4444; }
.on-hover\:color-red-500:hover { color:#ef4444; }
.on-hover\:border-color-red-500:hover { border-color:#ef4444; }
.on-hover\:background-red-600:hover { background-color:#dc2626; }
.on-hover\:color-red-600:hover { color:#dc2626; }
.on-hover\:border-color-red-600:hover { border-color:#dc2626; }
.on-hover\:background-red-700:hover { background-color:#b91c1c; }
.on-hover\:color-red-700:hover { color:#b91c1c; }
.on-hover\:border-color-red-700:hover { border-color:#b91c1c; }
.on-hover\:background-orange-300:hover { background-color:#fdba74; }
.on-hover\:color-orange-300:hover { color:#fdba74; }
.on-hover\:border-color-orange-300:hover { border-color:#fdba74; }
.on-hover\:background-orange-400:hover { background-color:#fb923c; }
.on-hover\:color-orange-400:hover { color:#fb923c; }
.on-hover\:border-color-orange-400:hover { border-color:#fb923c; }
.on-hover\:background-orange-500:hover { background-color:#f97316; }
.on-hover\:color-orange-500:hover { color:#f97316; }
.on-hover\:border-color-orange-500:hover { border-color:#f97316; }
.on-hover\:background-orange-600:hover { background-color:#ea580c; }
.on-hover\:color-orange-600:hover { color:#ea580c; }
.on-hover\:border-color-orange-600:hover { border-color:#ea580c; }
.on-hover\:background-orange-700:hover { background-color:#c2410c; }
.on-hover\:color-orange-700:hover { color:#c2410c; }
.on-hover\:border-color-orange-700:hover { border-color:#c2410c; }
.on-hover\:background-amber-300:hover { background-color:#fcd34d; }
.on-hover\:color-amber-300:hover { color:#fcd34d; }
.on-hover\:border-color-amber-300:hover { border-color:#fcd34d; }
.on-hover\:background-amber-400:hover { background-color:#fbbf24; }
.on-hover\:color-amber-400:hover { color:#fbbf24; }
.on-hover\:border-color-amber-400:hover { border-color:#fbbf24; }
.on-hover\:background-amber-500:hover { background-color:#f59e0b; }
.on-hover\:color-amber-500:hover { color:#f59e0b; }
.on-hover\:border-color-amber-500:hover { border-color:#f59e0b; }
.on-hover\:background-amber-600:hover { background-color:#d97706; }
.on-hover\:color-amber-600:hover { color:#d97706; }
.on-hover\:border-color-amber-600:hover { border-color:#d97706; }
.on-hover\:background-amber-700:hover { background-color:#b45309; }
.on-hover\:color-amber-700:hover { color:#b45309; }
.on-hover\:border-color-amber-700:hover { border-color:#b45309; }
.on-hover\:background-yellow-300:hover { background-color:#fde047; }
.on-hover\:color-yellow-300:hover { color:#fde047; }
.on-hover\:border-color-yellow-300:hover { border-color:#fde047; }
.on-hover\:background-yellow-400:hover { background-color:#facc15; }
.on-hover\:color-yellow-400:hover { color:#facc15; }
.on-hover\:border-color-yellow-400:hover { border-color:#facc15; }
.on-hover\:background-yellow-500:hover { background-color:#eab308; }
.on-hover\:color-yellow-500:hover { color:#eab308; }
.on-hover\:border-color-yellow-500:hover { border-color:#eab308; }
.on-hover\:background-yellow-600:hover { background-color:#ca8a04; }
.on-hover\:color-yellow-600:hover { color:#ca8a04; }
.on-hover\:border-color-yellow-600:hover { border-color:#ca8a04; }
.on-hover\:background-yellow-700:hover { background-color:#a16207; }
.on-hover\:color-yellow-700:hover { color:#a16207; }
.on-hover\:border-color-yellow-700:hover { border-color:#a16207; }
.on-hover\:background-lime-300:hover { background-color:#bef264; }
.on-hover\:color-lime-300:hover { color:#bef264; }
.on-hover\:border-color-lime-300:hover { border-color:#bef264; }
.on-hover\:background-lime-400:hover { background-color:#a3e635; }
.on-hover\:color-lime-400:hover { color:#a3e635; }
.on-hover\:border-color-lime-400:hover { border-color:#a3e635; }
.on-hover\:background-lime-500:hover { background-color:#84cc16; }
.on-hover\:color-lime-500:hover { color:#84cc16; }
.on-hover\:border-color-lime-500:hover { border-color:#84cc16; }
.on-hover\:background-lime-600:hover { background-color:#65a30d; }
.on-hover\:color-lime-600:hover { color:#65a30d; }
.on-hover\:border-color-lime-600:hover { border-color:#65a30d; }
.on-hover\:background-lime-700:hover { background-color:#4d7c0f; }
.on-hover\:color-lime-700:hover { color:#4d7c0f; }
.on-hover\:border-color-lime-700:hover { border-color:#4d7c0f; }
.on-hover\:background-green-300:hover { background-color:#86efac; }
.on-hover\:color-green-300:hover { color:#86efac; }
.on-hover\:border-color-green-300:hover { border-color:#86efac; }
.on-hover\:background-green-400:hover { background-color:#4ade80; }
.on-hover\:color-green-400:hover { color:#4ade80; }
.on-hover\:border-color-green-400:hover { border-color:#4ade80; }
.on-hover\:background-green-500:hover { background-color:#22c55e; }
.on-hover\:color-green-500:hover { color:#22c55e; }
.on-hover\:border-color-green-500:hover { border-color:#22c55e; }
.on-hover\:background-green-600:hover { background-color:#16a34a; }
.on-hover\:color-green-600:hover { color:#16a34a; }
.on-hover\:border-color-green-600:hover { border-color:#16a34a; }
.on-hover\:background-green-700:hover { background-color:#15803d; }
.on-hover\:color-green-700:hover { color:#15803d; }
.on-hover\:border-color-green-700:hover { border-color:#15803d; }
.on-hover\:background-teal-300:hover { background-color:#5eead4; }
.on-hover\:color-teal-300:hover { color:#5eead4; }
.on-hover\:border-color-teal-300:hover { border-color:#5eead4; }
.on-hover\:background-teal-400:hover { background-color:#2dd4bf; }
.on-hover\:color-teal-400:hover { color:#2dd4bf; }
.on-hover\:border-color-teal-400:hover { border-color:#2dd4bf; }
.on-hover\:background-teal-500:hover { background-color:#14b8a6; }
.on-hover\:color-teal-500:hover { color:#14b8a6; }
.on-hover\:border-color-teal-500:hover { border-color:#14b8a6; }
.on-hover\:background-teal-600:hover { background-color:#0d9488; }
.on-hover\:color-teal-600:hover { color:#0d9488; }
.on-hover\:border-color-teal-600:hover { border-color:#0d9488; }
.on-hover\:background-teal-700:hover { background-color:#0f766e; }
.on-hover\:color-teal-700:hover { color:#0f766e; }
.on-hover\:border-color-teal-700:hover { border-color:#0f766e; }
.on-hover\:background-cyan-300:hover { background-color:#67e8f9; }
.on-hover\:color-cyan-300:hover { color:#67e8f9; }
.on-hover\:border-color-cyan-300:hover { border-color:#67e8f9; }
.on-hover\:background-cyan-400:hover { background-color:#22d3ee; }
.on-hover\:color-cyan-400:hover { color:#22d3ee; }
.on-hover\:border-color-cyan-400:hover { border-color:#22d3ee; }
.on-hover\:background-cyan-500:hover { background-color:#06b6d4; }
.on-hover\:color-cyan-500:hover { color:#06b6d4; }
.on-hover\:border-color-cyan-500:hover { border-color:#06b6d4; }
.on-hover\:background-cyan-600:hover { background-color:#0891b2; }
.on-hover\:color-cyan-600:hover { color:#0891b2; }
.on-hover\:border-color-cyan-600:hover { border-color:#0891b2; }
.on-hover\:background-cyan-700:hover { background-color:#0e7490; }
.on-hover\:color-cyan-700:hover { color:#0e7490; }
.on-hover\:border-color-cyan-700:hover { border-color:#0e7490; }
.on-hover\:background-blue-300:hover { background-color:#93c5fd; }
.on-hover\:color-blue-300:hover { color:#93c5fd; }
.on-hover\:border-color-blue-300:hover { border-color:#93c5fd; }
.on-hover\:background-blue-400:hover { background-color:#60a5fa; }
.on-hover\:color-blue-400:hover { color:#60a5fa; }
.on-hover\:border-color-blue-400:hover { border-color:#60a5fa; }
.on-hover\:background-blue-500:hover { background-color:#3b82f6; }
.on-hover\:color-blue-500:hover { color:#3b82f6; }
.on-hover\:border-color-blue-500:hover { border-color:#3b82f6; }
.on-hover\:background-blue-600:hover { background-color:#2563eb; }
.on-hover\:color-blue-600:hover { color:#2563eb; }
.on-hover\:border-color-blue-600:hover { border-color:#2563eb; }
.on-hover\:background-blue-700:hover { background-color:#1d4ed8; }
.on-hover\:color-blue-700:hover { color:#1d4ed8; }
.on-hover\:border-color-blue-700:hover { border-color:#1d4ed8; }
.on-hover\:background-indigo-300:hover { background-color:#a5b4fc; }
.on-hover\:color-indigo-300:hover { color:#a5b4fc; }
.on-hover\:border-color-indigo-300:hover { border-color:#a5b4fc; }
.on-hover\:background-indigo-400:hover { background-color:#818cf8; }
.on-hover\:color-indigo-400:hover { color:#818cf8; }
.on-hover\:border-color-indigo-400:hover { border-color:#818cf8; }
.on-hover\:background-indigo-500:hover { background-color:#6366f1; }
.on-hover\:color-indigo-500:hover { color:#6366f1; }
.on-hover\:border-color-indigo-500:hover { border-color:#6366f1; }
.on-hover\:background-indigo-600:hover { background-color:#4f46e5; }
.on-hover\:color-indigo-600:hover { color:#4f46e5; }
.on-hover\:border-color-indigo-600:hover { border-color:#4f46e5; }
.on-hover\:background-indigo-700:hover { background-color:#4338ca; }
.on-hover\:color-indigo-700:hover { color:#4338ca; }
.on-hover\:border-color-indigo-700:hover { border-color:#4338ca; }
.on-hover\:background-violet-300:hover { background-color:#c4b5fd; }
.on-hover\:color-violet-300:hover { color:#c4b5fd; }
.on-hover\:border-color-violet-300:hover { border-color:#c4b5fd; }
.on-hover\:background-violet-400:hover { background-color:#a78bfa; }
.on-hover\:color-violet-400:hover { color:#a78bfa; }
.on-hover\:border-color-violet-400:hover { border-color:#a78bfa; }
.on-hover\:background-violet-500:hover { background-color:#8b5cf6; }
.on-hover\:color-violet-500:hover { color:#8b5cf6; }
.on-hover\:border-color-violet-500:hover { border-color:#8b5cf6; }
.on-hover\:background-violet-600:hover { background-color:#7c3aed; }
.on-hover\:color-violet-600:hover { color:#7c3aed; }
.on-hover\:border-color-violet-600:hover { border-color:#7c3aed; }
.on-hover\:background-violet-700:hover { background-color:#6d28d9; }
.on-hover\:color-violet-700:hover { color:#6d28d9; }
.on-hover\:border-color-violet-700:hover { border-color:#6d28d9; }
.on-hover\:background-purple-300:hover { background-color:#d8b4fe; }
.on-hover\:color-purple-300:hover { color:#d8b4fe; }
.on-hover\:border-color-purple-300:hover { border-color:#d8b4fe; }
.on-hover\:background-purple-400:hover { background-color:#c084fc; }
.on-hover\:color-purple-400:hover { color:#c084fc; }
.on-hover\:border-color-purple-400:hover { border-color:#c084fc; }
.on-hover\:background-purple-500:hover { background-color:#a855f7; }
.on-hover\:color-purple-500:hover { color:#a855f7; }
.on-hover\:border-color-purple-500:hover { border-color:#a855f7; }
.on-hover\:background-purple-600:hover { background-color:#9333ea; }
.on-hover\:color-purple-600:hover { color:#9333ea; }
.on-hover\:border-color-purple-600:hover { border-color:#9333ea; }
.on-hover\:background-purple-700:hover { background-color:#7e22ce; }
.on-hover\:color-purple-700:hover { color:#7e22ce; }
.on-hover\:border-color-purple-700:hover { border-color:#7e22ce; }
.on-hover\:background-pink-300:hover { background-color:#f9a8d4; }
.on-hover\:color-pink-300:hover { color:#f9a8d4; }
.on-hover\:border-color-pink-300:hover { border-color:#f9a8d4; }
.on-hover\:background-pink-400:hover { background-color:#f472b6; }
.on-hover\:color-pink-400:hover { color:#f472b6; }
.on-hover\:border-color-pink-400:hover { border-color:#f472b6; }
.on-hover\:background-pink-500:hover { background-color:#ec4899; }
.on-hover\:color-pink-500:hover { color:#ec4899; }
.on-hover\:border-color-pink-500:hover { border-color:#ec4899; }
.on-hover\:background-pink-600:hover { background-color:#db2777; }
.on-hover\:color-pink-600:hover { color:#db2777; }
.on-hover\:border-color-pink-600:hover { border-color:#db2777; }
.on-hover\:background-pink-700:hover { background-color:#be185d; }
.on-hover\:color-pink-700:hover { color:#be185d; }
.on-hover\:border-color-pink-700:hover { border-color:#be185d; }
.on-hover\:background-rose-300:hover { background-color:#fda4af; }
.on-hover\:color-rose-300:hover { color:#fda4af; }
.on-hover\:border-color-rose-300:hover { border-color:#fda4af; }
.on-hover\:background-rose-400:hover { background-color:#fb7185; }
.on-hover\:color-rose-400:hover { color:#fb7185; }
.on-hover\:border-color-rose-400:hover { border-color:#fb7185; }
.on-hover\:background-rose-500:hover { background-color:#f43f5e; }
.on-hover\:color-rose-500:hover { color:#f43f5e; }
.on-hover\:border-color-rose-500:hover { border-color:#f43f5e; }
.on-hover\:background-rose-600:hover { background-color:#e11d48; }
.on-hover\:color-rose-600:hover { color:#e11d48; }
.on-hover\:border-color-rose-600:hover { border-color:#e11d48; }
.on-hover\:background-rose-700:hover { background-color:#be123c; }
.on-hover\:color-rose-700:hover { color:#be123c; }
.on-hover\:border-color-rose-700:hover { border-color:#be123c; }
.on-hover\:background-slate-300:hover { background-color:#cbd5e1; }
.on-hover\:color-slate-300:hover { color:#cbd5e1; }
.on-hover\:border-color-slate-300:hover { border-color:#cbd5e1; }
.on-hover\:background-slate-400:hover { background-color:#94a3b8; }
.on-hover\:color-slate-400:hover { color:#94a3b8; }
.on-hover\:border-color-slate-400:hover { border-color:#94a3b8; }
.on-hover\:background-slate-500:hover { background-color:#64748b; }
.on-hover\:color-slate-500:hover { color:#64748b; }
.on-hover\:border-color-slate-500:hover { border-color:#64748b; }
.on-hover\:background-slate-600:hover { background-color:#475569; }
.on-hover\:color-slate-600:hover { color:#475569; }
.on-hover\:border-color-slate-600:hover { border-color:#475569; }
.on-hover\:background-slate-700:hover { background-color:#334155; }
.on-hover\:color-slate-700:hover { color:#334155; }
.on-hover\:border-color-slate-700:hover { border-color:#334155; }
.on-hover\:background-gray-300:hover { background-color:#d1d5db; }
.on-hover\:color-gray-300:hover { color:#d1d5db; }
.on-hover\:border-color-gray-300:hover { border-color:#d1d5db; }
.on-hover\:background-gray-400:hover { background-color:#9ca3af; }
.on-hover\:color-gray-400:hover { color:#9ca3af; }
.on-hover\:border-color-gray-400:hover { border-color:#9ca3af; }
.on-hover\:background-gray-500:hover { background-color:#6b7280; }
.on-hover\:color-gray-500:hover { color:#6b7280; }
.on-hover\:border-color-gray-500:hover { border-color:#6b7280; }
.on-hover\:background-gray-600:hover { background-color:#4b5563; }
.on-hover\:color-gray-600:hover { color:#4b5563; }
.on-hover\:border-color-gray-600:hover { border-color:#4b5563; }
.on-hover\:background-gray-700:hover { background-color:#374151; }
.on-hover\:color-gray-700:hover { color:#374151; }
.on-hover\:border-color-gray-700:hover { border-color:#374151; }
.on-hover\:background-zinc-300:hover { background-color:#d4d4d8; }
.on-hover\:color-zinc-300:hover { color:#d4d4d8; }
.on-hover\:border-color-zinc-300:hover { border-color:#d4d4d8; }
.on-hover\:background-zinc-400:hover { background-color:#a1a1aa; }
.on-hover\:color-zinc-400:hover { color:#a1a1aa; }
.on-hover\:border-color-zinc-400:hover { border-color:#a1a1aa; }
.on-hover\:background-zinc-500:hover { background-color:#71717a; }
.on-hover\:color-zinc-500:hover { color:#71717a; }
.on-hover\:border-color-zinc-500:hover { border-color:#71717a; }
.on-hover\:background-zinc-600:hover { background-color:#52525b; }
.on-hover\:color-zinc-600:hover { color:#52525b; }
.on-hover\:border-color-zinc-600:hover { border-color:#52525b; }
.on-hover\:background-zinc-700:hover { background-color:#3f3f46; }
.on-hover\:color-zinc-700:hover { color:#3f3f46; }
.on-hover\:border-color-zinc-700:hover { border-color:#3f3f46; }
.on-hover\:background-stone-300:hover { background-color:#d6d3d1; }
.on-hover\:color-stone-300:hover { color:#d6d3d1; }
.on-hover\:border-color-stone-300:hover { border-color:#d6d3d1; }
.on-hover\:background-stone-400:hover { background-color:#a8a29e; }
.on-hover\:color-stone-400:hover { color:#a8a29e; }
.on-hover\:border-color-stone-400:hover { border-color:#a8a29e; }
.on-hover\:background-stone-500:hover { background-color:#78716c; }
.on-hover\:color-stone-500:hover { color:#78716c; }
.on-hover\:border-color-stone-500:hover { border-color:#78716c; }
.on-hover\:background-stone-600:hover { background-color:#57534e; }
.on-hover\:color-stone-600:hover { color:#57534e; }
.on-hover\:border-color-stone-600:hover { border-color:#57534e; }
.on-hover\:background-stone-700:hover { background-color:#44403c; }
.on-hover\:color-stone-700:hover { color:#44403c; }
.on-hover\:border-color-stone-700:hover { border-color:#44403c; }
.on-hover\:add-shadow-sm:hover { box-shadow:var(--santy-shadow-sm); }
.on-hover\:add-shadow:hover { box-shadow:var(--santy-shadow); }
.on-hover\:add-shadow-md:hover { box-shadow:var(--santy-shadow-md); }
.on-hover\:add-shadow-lg:hover { box-shadow:var(--santy-shadow-lg); }
.on-hover\:no-shadow:hover { box-shadow:none; }
.on-hover\:opacity-0:hover { opacity:0; }
.on-hover\:opacity-25:hover { opacity:0.25; }
.on-hover\:opacity-50:hover { opacity:0.5; }
.on-hover\:opacity-75:hover { opacity:0.75; }
.on-hover\:opacity-100:hover { opacity:1; }
.on-hover\:scale-90:hover { transform:scale(0.9); }
.on-hover\:scale-95:hover { transform:scale(0.95); }
.on-hover\:scale-100:hover { transform:scale(1); }
.on-hover\:scale-105:hover { transform:scale(1.05); }
.on-hover\:scale-110:hover { transform:scale(1.1); }
.on-hover\:make-hidden:hover { display:none; }
.on-hover\:make-block:hover { display:block; }
.on-hover\:make-flex:hover { display:flex; }
.on-hover\:cursor-pointer:hover { cursor:pointer; }
.on-hover\:cursor-not-allowed:hover { cursor:not-allowed; }
.on-hover\:outline-none:hover { outline:none; }
.on-hover\:text-underline:hover { text-decoration:underline; }
.on-hover\:text-no-decoration:hover { text-decoration:none; }
.on-hover\:text-bold:hover { font-weight:700; }
.on-hover\:transition-fast:hover { transition:var(--santy-transition-fast); }
.on-hover\:transition-normal:hover { transition:var(--santy-transition-normal); }
.on-hover\:add-border-1:hover { border:1px solid; }
.on-hover\:add-border-2:hover { border:2px solid; }
.on-hover\:add-border-4:hover { border:4px solid; }

/* on-focus */
.on-focus\:background-red-300:focus { background-color:#fca5a5; }
.on-focus\:color-red-300:focus { color:#fca5a5; }
.on-focus\:border-color-red-300:focus { border-color:#fca5a5; }
.on-focus\:background-red-400:focus { background-color:#f87171; }
.on-focus\:color-red-400:focus { color:#f87171; }
.on-focus\:border-color-red-400:focus { border-color:#f87171; }
.on-focus\:background-red-500:focus { background-color:#ef4444; }
.on-focus\:color-red-500:focus { color:#ef4444; }
.on-focus\:border-color-red-500:focus { border-color:#ef4444; }
.on-focus\:background-red-600:focus { background-color:#dc2626; }
.on-focus\:color-red-600:focus { color:#dc2626; }
.on-focus\:border-color-red-600:focus { border-color:#dc2626; }
.on-focus\:background-red-700:focus { background-color:#b91c1c; }
.on-focus\:color-red-700:focus { color:#b91c1c; }
.on-focus\:border-color-red-700:focus { border-color:#b91c1c; }
.on-focus\:background-orange-300:focus { background-color:#fdba74; }
.on-focus\:color-orange-300:focus { color:#fdba74; }
.on-focus\:border-color-orange-300:focus { border-color:#fdba74; }
.on-focus\:background-orange-400:focus { background-color:#fb923c; }
.on-focus\:color-orange-400:focus { color:#fb923c; }
.on-focus\:border-color-orange-400:focus { border-color:#fb923c; }
.on-focus\:background-orange-500:focus { background-color:#f97316; }
.on-focus\:color-orange-500:focus { color:#f97316; }
.on-focus\:border-color-orange-500:focus { border-color:#f97316; }
.on-focus\:background-orange-600:focus { background-color:#ea580c; }
.on-focus\:color-orange-600:focus { color:#ea580c; }
.on-focus\:border-color-orange-600:focus { border-color:#ea580c; }
.on-focus\:background-orange-700:focus { background-color:#c2410c; }
.on-focus\:color-orange-700:focus { color:#c2410c; }
.on-focus\:border-color-orange-700:focus { border-color:#c2410c; }
.on-focus\:background-amber-300:focus { background-color:#fcd34d; }
.on-focus\:color-amber-300:focus { color:#fcd34d; }
.on-focus\:border-color-amber-300:focus { border-color:#fcd34d; }
.on-focus\:background-amber-400:focus { background-color:#fbbf24; }
.on-focus\:color-amber-400:focus { color:#fbbf24; }
.on-focus\:border-color-amber-400:focus { border-color:#fbbf24; }
.on-focus\:background-amber-500:focus { background-color:#f59e0b; }
.on-focus\:color-amber-500:focus { color:#f59e0b; }
.on-focus\:border-color-amber-500:focus { border-color:#f59e0b; }
.on-focus\:background-amber-600:focus { background-color:#d97706; }
.on-focus\:color-amber-600:focus { color:#d97706; }
.on-focus\:border-color-amber-600:focus { border-color:#d97706; }
.on-focus\:background-amber-700:focus { background-color:#b45309; }
.on-focus\:color-amber-700:focus { color:#b45309; }
.on-focus\:border-color-amber-700:focus { border-color:#b45309; }
.on-focus\:background-yellow-300:focus { background-color:#fde047; }
.on-focus\:color-yellow-300:focus { color:#fde047; }
.on-focus\:border-color-yellow-300:focus { border-color:#fde047; }
.on-focus\:background-yellow-400:focus { background-color:#facc15; }
.on-focus\:color-yellow-400:focus { color:#facc15; }
.on-focus\:border-color-yellow-400:focus { border-color:#facc15; }
.on-focus\:background-yellow-500:focus { background-color:#eab308; }
.on-focus\:color-yellow-500:focus { color:#eab308; }
.on-focus\:border-color-yellow-500:focus { border-color:#eab308; }
.on-focus\:background-yellow-600:focus { background-color:#ca8a04; }
.on-focus\:color-yellow-600:focus { color:#ca8a04; }
.on-focus\:border-color-yellow-600:focus { border-color:#ca8a04; }
.on-focus\:background-yellow-700:focus { background-color:#a16207; }
.on-focus\:color-yellow-700:focus { color:#a16207; }
.on-focus\:border-color-yellow-700:focus { border-color:#a16207; }
.on-focus\:background-lime-300:focus { background-color:#bef264; }
.on-focus\:color-lime-300:focus { color:#bef264; }
.on-focus\:border-color-lime-300:focus { border-color:#bef264; }
.on-focus\:background-lime-400:focus { background-color:#a3e635; }
.on-focus\:color-lime-400:focus { color:#a3e635; }
.on-focus\:border-color-lime-400:focus { border-color:#a3e635; }
.on-focus\:background-lime-500:focus { background-color:#84cc16; }
.on-focus\:color-lime-500:focus { color:#84cc16; }
.on-focus\:border-color-lime-500:focus { border-color:#84cc16; }
.on-focus\:background-lime-600:focus { background-color:#65a30d; }
.on-focus\:color-lime-600:focus { color:#65a30d; }
.on-focus\:border-color-lime-600:focus { border-color:#65a30d; }
.on-focus\:background-lime-700:focus { background-color:#4d7c0f; }
.on-focus\:color-lime-700:focus { color:#4d7c0f; }
.on-focus\:border-color-lime-700:focus { border-color:#4d7c0f; }
.on-focus\:background-green-300:focus { background-color:#86efac; }
.on-focus\:color-green-300:focus { color:#86efac; }
.on-focus\:border-color-green-300:focus { border-color:#86efac; }
.on-focus\:background-green-400:focus { background-color:#4ade80; }
.on-focus\:color-green-400:focus { color:#4ade80; }
.on-focus\:border-color-green-400:focus { border-color:#4ade80; }
.on-focus\:background-green-500:focus { background-color:#22c55e; }
.on-focus\:color-green-500:focus { color:#22c55e; }
.on-focus\:border-color-green-500:focus { border-color:#22c55e; }
.on-focus\:background-green-600:focus { background-color:#16a34a; }
.on-focus\:color-green-600:focus { color:#16a34a; }
.on-focus\:border-color-green-600:focus { border-color:#16a34a; }
.on-focus\:background-green-700:focus { background-color:#15803d; }
.on-focus\:color-green-700:focus { color:#15803d; }
.on-focus\:border-color-green-700:focus { border-color:#15803d; }
.on-focus\:background-teal-300:focus { background-color:#5eead4; }
.on-focus\:color-teal-300:focus { color:#5eead4; }
.on-focus\:border-color-teal-300:focus { border-color:#5eead4; }
.on-focus\:background-teal-400:focus { background-color:#2dd4bf; }
.on-focus\:color-teal-400:focus { color:#2dd4bf; }
.on-focus\:border-color-teal-400:focus { border-color:#2dd4bf; }
.on-focus\:background-teal-500:focus { background-color:#14b8a6; }
.on-focus\:color-teal-500:focus { color:#14b8a6; }
.on-focus\:border-color-teal-500:focus { border-color:#14b8a6; }
.on-focus\:background-teal-600:focus { background-color:#0d9488; }
.on-focus\:color-teal-600:focus { color:#0d9488; }
.on-focus\:border-color-teal-600:focus { border-color:#0d9488; }
.on-focus\:background-teal-700:focus { background-color:#0f766e; }
.on-focus\:color-teal-700:focus { color:#0f766e; }
.on-focus\:border-color-teal-700:focus { border-color:#0f766e; }
.on-focus\:background-cyan-300:focus { background-color:#67e8f9; }
.on-focus\:color-cyan-300:focus { color:#67e8f9; }
.on-focus\:border-color-cyan-300:focus { border-color:#67e8f9; }
.on-focus\:background-cyan-400:focus { background-color:#22d3ee; }
.on-focus\:color-cyan-400:focus { color:#22d3ee; }
.on-focus\:border-color-cyan-400:focus { border-color:#22d3ee; }
.on-focus\:background-cyan-500:focus { background-color:#06b6d4; }
.on-focus\:color-cyan-500:focus { color:#06b6d4; }
.on-focus\:border-color-cyan-500:focus { border-color:#06b6d4; }
.on-focus\:background-cyan-600:focus { background-color:#0891b2; }
.on-focus\:color-cyan-600:focus { color:#0891b2; }
.on-focus\:border-color-cyan-600:focus { border-color:#0891b2; }
.on-focus\:background-cyan-700:focus { background-color:#0e7490; }
.on-focus\:color-cyan-700:focus { color:#0e7490; }
.on-focus\:border-color-cyan-700:focus { border-color:#0e7490; }
.on-focus\:background-blue-300:focus { background-color:#93c5fd; }
.on-focus\:color-blue-300:focus { color:#93c5fd; }
.on-focus\:border-color-blue-300:focus { border-color:#93c5fd; }
.on-focus\:background-blue-400:focus { background-color:#60a5fa; }
.on-focus\:color-blue-400:focus { color:#60a5fa; }
.on-focus\:border-color-blue-400:focus { border-color:#60a5fa; }
.on-focus\:background-blue-500:focus { background-color:#3b82f6; }
.on-focus\:color-blue-500:focus { color:#3b82f6; }
.on-focus\:border-color-blue-500:focus { border-color:#3b82f6; }
.on-focus\:background-blue-600:focus { background-color:#2563eb; }
.on-focus\:color-blue-600:focus { color:#2563eb; }
.on-focus\:border-color-blue-600:focus { border-color:#2563eb; }
.on-focus\:background-blue-700:focus { background-color:#1d4ed8; }
.on-focus\:color-blue-700:focus { color:#1d4ed8; }
.on-focus\:border-color-blue-700:focus { border-color:#1d4ed8; }
.on-focus\:background-indigo-300:focus { background-color:#a5b4fc; }
.on-focus\:color-indigo-300:focus { color:#a5b4fc; }
.on-focus\:border-color-indigo-300:focus { border-color:#a5b4fc; }
.on-focus\:background-indigo-400:focus { background-color:#818cf8; }
.on-focus\:color-indigo-400:focus { color:#818cf8; }
.on-focus\:border-color-indigo-400:focus { border-color:#818cf8; }
.on-focus\:background-indigo-500:focus { background-color:#6366f1; }
.on-focus\:color-indigo-500:focus { color:#6366f1; }
.on-focus\:border-color-indigo-500:focus { border-color:#6366f1; }
.on-focus\:background-indigo-600:focus { background-color:#4f46e5; }
.on-focus\:color-indigo-600:focus { color:#4f46e5; }
.on-focus\:border-color-indigo-600:focus { border-color:#4f46e5; }
.on-focus\:background-indigo-700:focus { background-color:#4338ca; }
.on-focus\:color-indigo-700:focus { color:#4338ca; }
.on-focus\:border-color-indigo-700:focus { border-color:#4338ca; }
.on-focus\:background-violet-300:focus { background-color:#c4b5fd; }
.on-focus\:color-violet-300:focus { color:#c4b5fd; }
.on-focus\:border-color-violet-300:focus { border-color:#c4b5fd; }
.on-focus\:background-violet-400:focus { background-color:#a78bfa; }
.on-focus\:color-violet-400:focus { color:#a78bfa; }
.on-focus\:border-color-violet-400:focus { border-color:#a78bfa; }
.on-focus\:background-violet-500:focus { background-color:#8b5cf6; }
.on-focus\:color-violet-500:focus { color:#8b5cf6; }
.on-focus\:border-color-violet-500:focus { border-color:#8b5cf6; }
.on-focus\:background-violet-600:focus { background-color:#7c3aed; }
.on-focus\:color-violet-600:focus { color:#7c3aed; }
.on-focus\:border-color-violet-600:focus { border-color:#7c3aed; }
.on-focus\:background-violet-700:focus { background-color:#6d28d9; }
.on-focus\:color-violet-700:focus { color:#6d28d9; }
.on-focus\:border-color-violet-700:focus { border-color:#6d28d9; }
.on-focus\:background-purple-300:focus { background-color:#d8b4fe; }
.on-focus\:color-purple-300:focus { color:#d8b4fe; }
.on-focus\:border-color-purple-300:focus { border-color:#d8b4fe; }
.on-focus\:background-purple-400:focus { background-color:#c084fc; }
.on-focus\:color-purple-400:focus { color:#c084fc; }
.on-focus\:border-color-purple-400:focus { border-color:#c084fc; }
.on-focus\:background-purple-500:focus { background-color:#a855f7; }
.on-focus\:color-purple-500:focus { color:#a855f7; }
.on-focus\:border-color-purple-500:focus { border-color:#a855f7; }
.on-focus\:background-purple-600:focus { background-color:#9333ea; }
.on-focus\:color-purple-600:focus { color:#9333ea; }
.on-focus\:border-color-purple-600:focus { border-color:#9333ea; }
.on-focus\:background-purple-700:focus { background-color:#7e22ce; }
.on-focus\:color-purple-700:focus { color:#7e22ce; }
.on-focus\:border-color-purple-700:focus { border-color:#7e22ce; }
.on-focus\:background-pink-300:focus { background-color:#f9a8d4; }
.on-focus\:color-pink-300:focus { color:#f9a8d4; }
.on-focus\:border-color-pink-300:focus { border-color:#f9a8d4; }
.on-focus\:background-pink-400:focus { background-color:#f472b6; }
.on-focus\:color-pink-400:focus { color:#f472b6; }
.on-focus\:border-color-pink-400:focus { border-color:#f472b6; }
.on-focus\:background-pink-500:focus { background-color:#ec4899; }
.on-focus\:color-pink-500:focus { color:#ec4899; }
.on-focus\:border-color-pink-500:focus { border-color:#ec4899; }
.on-focus\:background-pink-600:focus { background-color:#db2777; }
.on-focus\:color-pink-600:focus { color:#db2777; }
.on-focus\:border-color-pink-600:focus { border-color:#db2777; }
.on-focus\:background-pink-700:focus { background-color:#be185d; }
.on-focus\:color-pink-700:focus { color:#be185d; }
.on-focus\:border-color-pink-700:focus { border-color:#be185d; }
.on-focus\:background-rose-300:focus { background-color:#fda4af; }
.on-focus\:color-rose-300:focus { color:#fda4af; }
.on-focus\:border-color-rose-300:focus { border-color:#fda4af; }
.on-focus\:background-rose-400:focus { background-color:#fb7185; }
.on-focus\:color-rose-400:focus { color:#fb7185; }
.on-focus\:border-color-rose-400:focus { border-color:#fb7185; }
.on-focus\:background-rose-500:focus { background-color:#f43f5e; }
.on-focus\:color-rose-500:focus { color:#f43f5e; }
.on-focus\:border-color-rose-500:focus { border-color:#f43f5e; }
.on-focus\:background-rose-600:focus { background-color:#e11d48; }
.on-focus\:color-rose-600:focus { color:#e11d48; }
.on-focus\:border-color-rose-600:focus { border-color:#e11d48; }
.on-focus\:background-rose-700:focus { background-color:#be123c; }
.on-focus\:color-rose-700:focus { color:#be123c; }
.on-focus\:border-color-rose-700:focus { border-color:#be123c; }
.on-focus\:background-slate-300:focus { background-color:#cbd5e1; }
.on-focus\:color-slate-300:focus { color:#cbd5e1; }
.on-focus\:border-color-slate-300:focus { border-color:#cbd5e1; }
.on-focus\:background-slate-400:focus { background-color:#94a3b8; }
.on-focus\:color-slate-400:focus { color:#94a3b8; }
.on-focus\:border-color-slate-400:focus { border-color:#94a3b8; }
.on-focus\:background-slate-500:focus { background-color:#64748b; }
.on-focus\:color-slate-500:focus { color:#64748b; }
.on-focus\:border-color-slate-500:focus { border-color:#64748b; }
.on-focus\:background-slate-600:focus { background-color:#475569; }
.on-focus\:color-slate-600:focus { color:#475569; }
.on-focus\:border-color-slate-600:focus { border-color:#475569; }
.on-focus\:background-slate-700:focus { background-color:#334155; }
.on-focus\:color-slate-700:focus { color:#334155; }
.on-focus\:border-color-slate-700:focus { border-color:#334155; }
.on-focus\:background-gray-300:focus { background-color:#d1d5db; }
.on-focus\:color-gray-300:focus { color:#d1d5db; }
.on-focus\:border-color-gray-300:focus { border-color:#d1d5db; }
.on-focus\:background-gray-400:focus { background-color:#9ca3af; }
.on-focus\:color-gray-400:focus { color:#9ca3af; }
.on-focus\:border-color-gray-400:focus { border-color:#9ca3af; }
.on-focus\:background-gray-500:focus { background-color:#6b7280; }
.on-focus\:color-gray-500:focus { color:#6b7280; }
.on-focus\:border-color-gray-500:focus { border-color:#6b7280; }
.on-focus\:background-gray-600:focus { background-color:#4b5563; }
.on-focus\:color-gray-600:focus { color:#4b5563; }
.on-focus\:border-color-gray-600:focus { border-color:#4b5563; }
.on-focus\:background-gray-700:focus { background-color:#374151; }
.on-focus\:color-gray-700:focus { color:#374151; }
.on-focus\:border-color-gray-700:focus { border-color:#374151; }
.on-focus\:background-zinc-300:focus { background-color:#d4d4d8; }
.on-focus\:color-zinc-300:focus { color:#d4d4d8; }
.on-focus\:border-color-zinc-300:focus { border-color:#d4d4d8; }
.on-focus\:background-zinc-400:focus { background-color:#a1a1aa; }
.on-focus\:color-zinc-400:focus { color:#a1a1aa; }
.on-focus\:border-color-zinc-400:focus { border-color:#a1a1aa; }
.on-focus\:background-zinc-500:focus { background-color:#71717a; }
.on-focus\:color-zinc-500:focus { color:#71717a; }
.on-focus\:border-color-zinc-500:focus { border-color:#71717a; }
.on-focus\:background-zinc-600:focus { background-color:#52525b; }
.on-focus\:color-zinc-600:focus { color:#52525b; }
.on-focus\:border-color-zinc-600:focus { border-color:#52525b; }
.on-focus\:background-zinc-700:focus { background-color:#3f3f46; }
.on-focus\:color-zinc-700:focus { color:#3f3f46; }
.on-focus\:border-color-zinc-700:focus { border-color:#3f3f46; }
.on-focus\:background-stone-300:focus { background-color:#d6d3d1; }
.on-focus\:color-stone-300:focus { color:#d6d3d1; }
.on-focus\:border-color-stone-300:focus { border-color:#d6d3d1; }
.on-focus\:background-stone-400:focus { background-color:#a8a29e; }
.on-focus\:color-stone-400:focus { color:#a8a29e; }
.on-focus\:border-color-stone-400:focus { border-color:#a8a29e; }
.on-focus\:background-stone-500:focus { background-color:#78716c; }
.on-focus\:color-stone-500:focus { color:#78716c; }
.on-focus\:border-color-stone-500:focus { border-color:#78716c; }
.on-focus\:background-stone-600:focus { background-color:#57534e; }
.on-focus\:color-stone-600:focus { color:#57534e; }
.on-focus\:border-color-stone-600:focus { border-color:#57534e; }
.on-focus\:background-stone-700:focus { background-color:#44403c; }
.on-focus\:color-stone-700:focus { color:#44403c; }
.on-focus\:border-color-stone-700:focus { border-color:#44403c; }
.on-focus\:add-shadow-sm:focus { box-shadow:var(--santy-shadow-sm); }
.on-focus\:add-shadow:focus { box-shadow:var(--santy-shadow); }
.on-focus\:add-shadow-md:focus { box-shadow:var(--santy-shadow-md); }
.on-focus\:add-shadow-lg:focus { box-shadow:var(--santy-shadow-lg); }
.on-focus\:no-shadow:focus { box-shadow:none; }
.on-focus\:opacity-0:focus { opacity:0; }
.on-focus\:opacity-25:focus { opacity:0.25; }
.on-focus\:opacity-50:focus { opacity:0.5; }
.on-focus\:opacity-75:focus { opacity:0.75; }
.on-focus\:opacity-100:focus { opacity:1; }
.on-focus\:scale-90:focus { transform:scale(0.9); }
.on-focus\:scale-95:focus { transform:scale(0.95); }
.on-focus\:scale-100:focus { transform:scale(1); }
.on-focus\:scale-105:focus { transform:scale(1.05); }
.on-focus\:scale-110:focus { transform:scale(1.1); }
.on-focus\:make-hidden:focus { display:none; }
.on-focus\:make-block:focus { display:block; }
.on-focus\:make-flex:focus { display:flex; }
.on-focus\:cursor-pointer:focus { cursor:pointer; }
.on-focus\:cursor-not-allowed:focus { cursor:not-allowed; }
.on-focus\:outline-none:focus { outline:none; }
.on-focus\:text-underline:focus { text-decoration:underline; }
.on-focus\:text-no-decoration:focus { text-decoration:none; }
.on-focus\:text-bold:focus { font-weight:700; }
.on-focus\:transition-fast:focus { transition:var(--santy-transition-fast); }
.on-focus\:transition-normal:focus { transition:var(--santy-transition-normal); }
.on-focus\:add-border-1:focus { border:1px solid; }
.on-focus\:add-border-2:focus { border:2px solid; }
.on-focus\:add-border-4:focus { border:4px solid; }

/* on-active */
.on-active\:background-red-300:active { background-color:#fca5a5; }
.on-active\:color-red-300:active { color:#fca5a5; }
.on-active\:border-color-red-300:active { border-color:#fca5a5; }
.on-active\:background-red-400:active { background-color:#f87171; }
.on-active\:color-red-400:active { color:#f87171; }
.on-active\:border-color-red-400:active { border-color:#f87171; }
.on-active\:background-red-500:active { background-color:#ef4444; }
.on-active\:color-red-500:active { color:#ef4444; }
.on-active\:border-color-red-500:active { border-color:#ef4444; }
.on-active\:background-red-600:active { background-color:#dc2626; }
.on-active\:color-red-600:active { color:#dc2626; }
.on-active\:border-color-red-600:active { border-color:#dc2626; }
.on-active\:background-red-700:active { background-color:#b91c1c; }
.on-active\:color-red-700:active { color:#b91c1c; }
.on-active\:border-color-red-700:active { border-color:#b91c1c; }
.on-active\:background-orange-300:active { background-color:#fdba74; }
.on-active\:color-orange-300:active { color:#fdba74; }
.on-active\:border-color-orange-300:active { border-color:#fdba74; }
.on-active\:background-orange-400:active { background-color:#fb923c; }
.on-active\:color-orange-400:active { color:#fb923c; }
.on-active\:border-color-orange-400:active { border-color:#fb923c; }
.on-active\:background-orange-500:active { background-color:#f97316; }
.on-active\:color-orange-500:active { color:#f97316; }
.on-active\:border-color-orange-500:active { border-color:#f97316; }
.on-active\:background-orange-600:active { background-color:#ea580c; }
.on-active\:color-orange-600:active { color:#ea580c; }
.on-active\:border-color-orange-600:active { border-color:#ea580c; }
.on-active\:background-orange-700:active { background-color:#c2410c; }
.on-active\:color-orange-700:active { color:#c2410c; }
.on-active\:border-color-orange-700:active { border-color:#c2410c; }
.on-active\:background-amber-300:active { background-color:#fcd34d; }
.on-active\:color-amber-300:active { color:#fcd34d; }
.on-active\:border-color-amber-300:active { border-color:#fcd34d; }
.on-active\:background-amber-400:active { background-color:#fbbf24; }
.on-active\:color-amber-400:active { color:#fbbf24; }
.on-active\:border-color-amber-400:active { border-color:#fbbf24; }
.on-active\:background-amber-500:active { background-color:#f59e0b; }
.on-active\:color-amber-500:active { color:#f59e0b; }
.on-active\:border-color-amber-500:active { border-color:#f59e0b; }
.on-active\:background-amber-600:active { background-color:#d97706; }
.on-active\:color-amber-600:active { color:#d97706; }
.on-active\:border-color-amber-600:active { border-color:#d97706; }
.on-active\:background-amber-700:active { background-color:#b45309; }
.on-active\:color-amber-700:active { color:#b45309; }
.on-active\:border-color-amber-700:active { border-color:#b45309; }
.on-active\:background-yellow-300:active { background-color:#fde047; }
.on-active\:color-yellow-300:active { color:#fde047; }
.on-active\:border-color-yellow-300:active { border-color:#fde047; }
.on-active\:background-yellow-400:active { background-color:#facc15; }
.on-active\:color-yellow-400:active { color:#facc15; }
.on-active\:border-color-yellow-400:active { border-color:#facc15; }
.on-active\:background-yellow-500:active { background-color:#eab308; }
.on-active\:color-yellow-500:active { color:#eab308; }
.on-active\:border-color-yellow-500:active { border-color:#eab308; }
.on-active\:background-yellow-600:active { background-color:#ca8a04; }
.on-active\:color-yellow-600:active { color:#ca8a04; }
.on-active\:border-color-yellow-600:active { border-color:#ca8a04; }
.on-active\:background-yellow-700:active { background-color:#a16207; }
.on-active\:color-yellow-700:active { color:#a16207; }
.on-active\:border-color-yellow-700:active { border-color:#a16207; }
.on-active\:background-lime-300:active { background-color:#bef264; }
.on-active\:color-lime-300:active { color:#bef264; }
.on-active\:border-color-lime-300:active { border-color:#bef264; }
.on-active\:background-lime-400:active { background-color:#a3e635; }
.on-active\:color-lime-400:active { color:#a3e635; }
.on-active\:border-color-lime-400:active { border-color:#a3e635; }
.on-active\:background-lime-500:active { background-color:#84cc16; }
.on-active\:color-lime-500:active { color:#84cc16; }
.on-active\:border-color-lime-500:active { border-color:#84cc16; }
.on-active\:background-lime-600:active { background-color:#65a30d; }
.on-active\:color-lime-600:active { color:#65a30d; }
.on-active\:border-color-lime-600:active { border-color:#65a30d; }
.on-active\:background-lime-700:active { background-color:#4d7c0f; }
.on-active\:color-lime-700:active { color:#4d7c0f; }
.on-active\:border-color-lime-700:active { border-color:#4d7c0f; }
.on-active\:background-green-300:active { background-color:#86efac; }
.on-active\:color-green-300:active { color:#86efac; }
.on-active\:border-color-green-300:active { border-color:#86efac; }
.on-active\:background-green-400:active { background-color:#4ade80; }
.on-active\:color-green-400:active { color:#4ade80; }
.on-active\:border-color-green-400:active { border-color:#4ade80; }
.on-active\:background-green-500:active { background-color:#22c55e; }
.on-active\:color-green-500:active { color:#22c55e; }
.on-active\:border-color-green-500:active { border-color:#22c55e; }
.on-active\:background-green-600:active { background-color:#16a34a; }
.on-active\:color-green-600:active { color:#16a34a; }
.on-active\:border-color-green-600:active { border-color:#16a34a; }
.on-active\:background-green-700:active { background-color:#15803d; }
.on-active\:color-green-700:active { color:#15803d; }
.on-active\:border-color-green-700:active { border-color:#15803d; }
.on-active\:background-teal-300:active { background-color:#5eead4; }
.on-active\:color-teal-300:active { color:#5eead4; }
.on-active\:border-color-teal-300:active { border-color:#5eead4; }
.on-active\:background-teal-400:active { background-color:#2dd4bf; }
.on-active\:color-teal-400:active { color:#2dd4bf; }
.on-active\:border-color-teal-400:active { border-color:#2dd4bf; }
.on-active\:background-teal-500:active { background-color:#14b8a6; }
.on-active\:color-teal-500:active { color:#14b8a6; }
.on-active\:border-color-teal-500:active { border-color:#14b8a6; }
.on-active\:background-teal-600:active { background-color:#0d9488; }
.on-active\:color-teal-600:active { color:#0d9488; }
.on-active\:border-color-teal-600:active { border-color:#0d9488; }
.on-active\:background-teal-700:active { background-color:#0f766e; }
.on-active\:color-teal-700:active { color:#0f766e; }
.on-active\:border-color-teal-700:active { border-color:#0f766e; }
.on-active\:background-cyan-300:active { background-color:#67e8f9; }
.on-active\:color-cyan-300:active { color:#67e8f9; }
.on-active\:border-color-cyan-300:active { border-color:#67e8f9; }
.on-active\:background-cyan-400:active { background-color:#22d3ee; }
.on-active\:color-cyan-400:active { color:#22d3ee; }
.on-active\:border-color-cyan-400:active { border-color:#22d3ee; }
.on-active\:background-cyan-500:active { background-color:#06b6d4; }
.on-active\:color-cyan-500:active { color:#06b6d4; }
.on-active\:border-color-cyan-500:active { border-color:#06b6d4; }
.on-active\:background-cyan-600:active { background-color:#0891b2; }
.on-active\:color-cyan-600:active { color:#0891b2; }
.on-active\:border-color-cyan-600:active { border-color:#0891b2; }
.on-active\:background-cyan-700:active { background-color:#0e7490; }
.on-active\:color-cyan-700:active { color:#0e7490; }
.on-active\:border-color-cyan-700:active { border-color:#0e7490; }
.on-active\:background-blue-300:active { background-color:#93c5fd; }
.on-active\:color-blue-300:active { color:#93c5fd; }
.on-active\:border-color-blue-300:active { border-color:#93c5fd; }
.on-active\:background-blue-400:active { background-color:#60a5fa; }
.on-active\:color-blue-400:active { color:#60a5fa; }
.on-active\:border-color-blue-400:active { border-color:#60a5fa; }
.on-active\:background-blue-500:active { background-color:#3b82f6; }
.on-active\:color-blue-500:active { color:#3b82f6; }
.on-active\:border-color-blue-500:active { border-color:#3b82f6; }
.on-active\:background-blue-600:active { background-color:#2563eb; }
.on-active\:color-blue-600:active { color:#2563eb; }
.on-active\:border-color-blue-600:active { border-color:#2563eb; }
.on-active\:background-blue-700:active { background-color:#1d4ed8; }
.on-active\:color-blue-700:active { color:#1d4ed8; }
.on-active\:border-color-blue-700:active { border-color:#1d4ed8; }
.on-active\:background-indigo-300:active { background-color:#a5b4fc; }
.on-active\:color-indigo-300:active { color:#a5b4fc; }
.on-active\:border-color-indigo-300:active { border-color:#a5b4fc; }
.on-active\:background-indigo-400:active { background-color:#818cf8; }
.on-active\:color-indigo-400:active { color:#818cf8; }
.on-active\:border-color-indigo-400:active { border-color:#818cf8; }
.on-active\:background-indigo-500:active { background-color:#6366f1; }
.on-active\:color-indigo-500:active { color:#6366f1; }
.on-active\:border-color-indigo-500:active { border-color:#6366f1; }
.on-active\:background-indigo-600:active { background-color:#4f46e5; }
.on-active\:color-indigo-600:active { color:#4f46e5; }
.on-active\:border-color-indigo-600:active { border-color:#4f46e5; }
.on-active\:background-indigo-700:active { background-color:#4338ca; }
.on-active\:color-indigo-700:active { color:#4338ca; }
.on-active\:border-color-indigo-700:active { border-color:#4338ca; }
.on-active\:background-violet-300:active { background-color:#c4b5fd; }
.on-active\:color-violet-300:active { color:#c4b5fd; }
.on-active\:border-color-violet-300:active { border-color:#c4b5fd; }
.on-active\:background-violet-400:active { background-color:#a78bfa; }
.on-active\:color-violet-400:active { color:#a78bfa; }
.on-active\:border-color-violet-400:active { border-color:#a78bfa; }
.on-active\:background-violet-500:active { background-color:#8b5cf6; }
.on-active\:color-violet-500:active { color:#8b5cf6; }
.on-active\:border-color-violet-500:active { border-color:#8b5cf6; }
.on-active\:background-violet-600:active { background-color:#7c3aed; }
.on-active\:color-violet-600:active { color:#7c3aed; }
.on-active\:border-color-violet-600:active { border-color:#7c3aed; }
.on-active\:background-violet-700:active { background-color:#6d28d9; }
.on-active\:color-violet-700:active { color:#6d28d9; }
.on-active\:border-color-violet-700:active { border-color:#6d28d9; }
.on-active\:background-purple-300:active { background-color:#d8b4fe; }
.on-active\:color-purple-300:active { color:#d8b4fe; }
.on-active\:border-color-purple-300:active { border-color:#d8b4fe; }
.on-active\:background-purple-400:active { background-color:#c084fc; }
.on-active\:color-purple-400:active { color:#c084fc; }
.on-active\:border-color-purple-400:active { border-color:#c084fc; }
.on-active\:background-purple-500:active { background-color:#a855f7; }
.on-active\:color-purple-500:active { color:#a855f7; }
.on-active\:border-color-purple-500:active { border-color:#a855f7; }
.on-active\:background-purple-600:active { background-color:#9333ea; }
.on-active\:color-purple-600:active { color:#9333ea; }
.on-active\:border-color-purple-600:active { border-color:#9333ea; }
.on-active\:background-purple-700:active { background-color:#7e22ce; }
.on-active\:color-purple-700:active { color:#7e22ce; }
.on-active\:border-color-purple-700:active { border-color:#7e22ce; }
.on-active\:background-pink-300:active { background-color:#f9a8d4; }
.on-active\:color-pink-300:active { color:#f9a8d4; }
.on-active\:border-color-pink-300:active { border-color:#f9a8d4; }
.on-active\:background-pink-400:active { background-color:#f472b6; }
.on-active\:color-pink-400:active { color:#f472b6; }
.on-active\:border-color-pink-400:active { border-color:#f472b6; }
.on-active\:background-pink-500:active { background-color:#ec4899; }
.on-active\:color-pink-500:active { color:#ec4899; }
.on-active\:border-color-pink-500:active { border-color:#ec4899; }
.on-active\:background-pink-600:active { background-color:#db2777; }
.on-active\:color-pink-600:active { color:#db2777; }
.on-active\:border-color-pink-600:active { border-color:#db2777; }
.on-active\:background-pink-700:active { background-color:#be185d; }
.on-active\:color-pink-700:active { color:#be185d; }
.on-active\:border-color-pink-700:active { border-color:#be185d; }
.on-active\:background-rose-300:active { background-color:#fda4af; }
.on-active\:color-rose-300:active { color:#fda4af; }
.on-active\:border-color-rose-300:active { border-color:#fda4af; }
.on-active\:background-rose-400:active { background-color:#fb7185; }
.on-active\:color-rose-400:active { color:#fb7185; }
.on-active\:border-color-rose-400:active { border-color:#fb7185; }
.on-active\:background-rose-500:active { background-color:#f43f5e; }
.on-active\:color-rose-500:active { color:#f43f5e; }
.on-active\:border-color-rose-500:active { border-color:#f43f5e; }
.on-active\:background-rose-600:active { background-color:#e11d48; }
.on-active\:color-rose-600:active { color:#e11d48; }
.on-active\:border-color-rose-600:active { border-color:#e11d48; }
.on-active\:background-rose-700:active { background-color:#be123c; }
.on-active\:color-rose-700:active { color:#be123c; }
.on-active\:border-color-rose-700:active { border-color:#be123c; }
.on-active\:background-slate-300:active { background-color:#cbd5e1; }
.on-active\:color-slate-300:active { color:#cbd5e1; }
.on-active\:border-color-slate-300:active { border-color:#cbd5e1; }
.on-active\:background-slate-400:active { background-color:#94a3b8; }
.on-active\:color-slate-400:active { color:#94a3b8; }
.on-active\:border-color-slate-400:active { border-color:#94a3b8; }
.on-active\:background-slate-500:active { background-color:#64748b; }
.on-active\:color-slate-500:active { color:#64748b; }
.on-active\:border-color-slate-500:active { border-color:#64748b; }
.on-active\:background-slate-600:active { background-color:#475569; }
.on-active\:color-slate-600:active { color:#475569; }
.on-active\:border-color-slate-600:active { border-color:#475569; }
.on-active\:background-slate-700:active { background-color:#334155; }
.on-active\:color-slate-700:active { color:#334155; }
.on-active\:border-color-slate-700:active { border-color:#334155; }
.on-active\:background-gray-300:active { background-color:#d1d5db; }
.on-active\:color-gray-300:active { color:#d1d5db; }
.on-active\:border-color-gray-300:active { border-color:#d1d5db; }
.on-active\:background-gray-400:active { background-color:#9ca3af; }
.on-active\:color-gray-400:active { color:#9ca3af; }
.on-active\:border-color-gray-400:active { border-color:#9ca3af; }
.on-active\:background-gray-500:active { background-color:#6b7280; }
.on-active\:color-gray-500:active { color:#6b7280; }
.on-active\:border-color-gray-500:active { border-color:#6b7280; }
.on-active\:background-gray-600:active { background-color:#4b5563; }
.on-active\:color-gray-600:active { color:#4b5563; }
.on-active\:border-color-gray-600:active { border-color:#4b5563; }
.on-active\:background-gray-700:active { background-color:#374151; }
.on-active\:color-gray-700:active { color:#374151; }
.on-active\:border-color-gray-700:active { border-color:#374151; }
.on-active\:background-zinc-300:active { background-color:#d4d4d8; }
.on-active\:color-zinc-300:active { color:#d4d4d8; }
.on-active\:border-color-zinc-300:active { border-color:#d4d4d8; }
.on-active\:background-zinc-400:active { background-color:#a1a1aa; }
.on-active\:color-zinc-400:active { color:#a1a1aa; }
.on-active\:border-color-zinc-400:active { border-color:#a1a1aa; }
.on-active\:background-zinc-500:active { background-color:#71717a; }
.on-active\:color-zinc-500:active { color:#71717a; }
.on-active\:border-color-zinc-500:active { border-color:#71717a; }
.on-active\:background-zinc-600:active { background-color:#52525b; }
.on-active\:color-zinc-600:active { color:#52525b; }
.on-active\:border-color-zinc-600:active { border-color:#52525b; }
.on-active\:background-zinc-700:active { background-color:#3f3f46; }
.on-active\:color-zinc-700:active { color:#3f3f46; }
.on-active\:border-color-zinc-700:active { border-color:#3f3f46; }
.on-active\:background-stone-300:active { background-color:#d6d3d1; }
.on-active\:color-stone-300:active { color:#d6d3d1; }
.on-active\:border-color-stone-300:active { border-color:#d6d3d1; }
.on-active\:background-stone-400:active { background-color:#a8a29e; }
.on-active\:color-stone-400:active { color:#a8a29e; }
.on-active\:border-color-stone-400:active { border-color:#a8a29e; }
.on-active\:background-stone-500:active { background-color:#78716c; }
.on-active\:color-stone-500:active { color:#78716c; }
.on-active\:border-color-stone-500:active { border-color:#78716c; }
.on-active\:background-stone-600:active { background-color:#57534e; }
.on-active\:color-stone-600:active { color:#57534e; }
.on-active\:border-color-stone-600:active { border-color:#57534e; }
.on-active\:background-stone-700:active { background-color:#44403c; }
.on-active\:color-stone-700:active { color:#44403c; }
.on-active\:border-color-stone-700:active { border-color:#44403c; }
.on-active\:add-shadow-sm:active { box-shadow:var(--santy-shadow-sm); }
.on-active\:add-shadow:active { box-shadow:var(--santy-shadow); }
.on-active\:add-shadow-md:active { box-shadow:var(--santy-shadow-md); }
.on-active\:add-shadow-lg:active { box-shadow:var(--santy-shadow-lg); }
.on-active\:no-shadow:active { box-shadow:none; }
.on-active\:opacity-0:active { opacity:0; }
.on-active\:opacity-25:active { opacity:0.25; }
.on-active\:opacity-50:active { opacity:0.5; }
.on-active\:opacity-75:active { opacity:0.75; }
.on-active\:opacity-100:active { opacity:1; }
.on-active\:scale-90:active { transform:scale(0.9); }
.on-active\:scale-95:active { transform:scale(0.95); }
.on-active\:scale-100:active { transform:scale(1); }
.on-active\:scale-105:active { transform:scale(1.05); }
.on-active\:scale-110:active { transform:scale(1.1); }
.on-active\:make-hidden:active { display:none; }
.on-active\:make-block:active { display:block; }
.on-active\:make-flex:active { display:flex; }
.on-active\:cursor-pointer:active { cursor:pointer; }
.on-active\:cursor-not-allowed:active { cursor:not-allowed; }
.on-active\:outline-none:active { outline:none; }
.on-active\:text-underline:active { text-decoration:underline; }
.on-active\:text-no-decoration:active { text-decoration:none; }
.on-active\:text-bold:active { font-weight:700; }
.on-active\:transition-fast:active { transition:var(--santy-transition-fast); }
.on-active\:transition-normal:active { transition:var(--santy-transition-normal); }
.on-active\:add-border-1:active { border:1px solid; }
.on-active\:add-border-2:active { border:2px solid; }
.on-active\:add-border-4:active { border:4px solid; }

/* on-disabled */
.on-disabled\:background-red-300:disabled { background-color:#fca5a5; }
.on-disabled\:color-red-300:disabled { color:#fca5a5; }
.on-disabled\:border-color-red-300:disabled { border-color:#fca5a5; }
.on-disabled\:background-red-400:disabled { background-color:#f87171; }
.on-disabled\:color-red-400:disabled { color:#f87171; }
.on-disabled\:border-color-red-400:disabled { border-color:#f87171; }
.on-disabled\:background-red-500:disabled { background-color:#ef4444; }
.on-disabled\:color-red-500:disabled { color:#ef4444; }
.on-disabled\:border-color-red-500:disabled { border-color:#ef4444; }
.on-disabled\:background-red-600:disabled { background-color:#dc2626; }
.on-disabled\:color-red-600:disabled { color:#dc2626; }
.on-disabled\:border-color-red-600:disabled { border-color:#dc2626; }
.on-disabled\:background-red-700:disabled { background-color:#b91c1c; }
.on-disabled\:color-red-700:disabled { color:#b91c1c; }
.on-disabled\:border-color-red-700:disabled { border-color:#b91c1c; }
.on-disabled\:background-orange-300:disabled { background-color:#fdba74; }
.on-disabled\:color-orange-300:disabled { color:#fdba74; }
.on-disabled\:border-color-orange-300:disabled { border-color:#fdba74; }
.on-disabled\:background-orange-400:disabled { background-color:#fb923c; }
.on-disabled\:color-orange-400:disabled { color:#fb923c; }
.on-disabled\:border-color-orange-400:disabled { border-color:#fb923c; }
.on-disabled\:background-orange-500:disabled { background-color:#f97316; }
.on-disabled\:color-orange-500:disabled { color:#f97316; }
.on-disabled\:border-color-orange-500:disabled { border-color:#f97316; }
.on-disabled\:background-orange-600:disabled { background-color:#ea580c; }
.on-disabled\:color-orange-600:disabled { color:#ea580c; }
.on-disabled\:border-color-orange-600:disabled { border-color:#ea580c; }
.on-disabled\:background-orange-700:disabled { background-color:#c2410c; }
.on-disabled\:color-orange-700:disabled { color:#c2410c; }
.on-disabled\:border-color-orange-700:disabled { border-color:#c2410c; }
.on-disabled\:background-amber-300:disabled { background-color:#fcd34d; }
.on-disabled\:color-amber-300:disabled { color:#fcd34d; }
.on-disabled\:border-color-amber-300:disabled { border-color:#fcd34d; }
.on-disabled\:background-amber-400:disabled { background-color:#fbbf24; }
.on-disabled\:color-amber-400:disabled { color:#fbbf24; }
.on-disabled\:border-color-amber-400:disabled { border-color:#fbbf24; }
.on-disabled\:background-amber-500:disabled { background-color:#f59e0b; }
.on-disabled\:color-amber-500:disabled { color:#f59e0b; }
.on-disabled\:border-color-amber-500:disabled { border-color:#f59e0b; }
.on-disabled\:background-amber-600:disabled { background-color:#d97706; }
.on-disabled\:color-amber-600:disabled { color:#d97706; }
.on-disabled\:border-color-amber-600:disabled { border-color:#d97706; }
.on-disabled\:background-amber-700:disabled { background-color:#b45309; }
.on-disabled\:color-amber-700:disabled { color:#b45309; }
.on-disabled\:border-color-amber-700:disabled { border-color:#b45309; }
.on-disabled\:background-yellow-300:disabled { background-color:#fde047; }
.on-disabled\:color-yellow-300:disabled { color:#fde047; }
.on-disabled\:border-color-yellow-300:disabled { border-color:#fde047; }
.on-disabled\:background-yellow-400:disabled { background-color:#facc15; }
.on-disabled\:color-yellow-400:disabled { color:#facc15; }
.on-disabled\:border-color-yellow-400:disabled { border-color:#facc15; }
.on-disabled\:background-yellow-500:disabled { background-color:#eab308; }
.on-disabled\:color-yellow-500:disabled { color:#eab308; }
.on-disabled\:border-color-yellow-500:disabled { border-color:#eab308; }
.on-disabled\:background-yellow-600:disabled { background-color:#ca8a04; }
.on-disabled\:color-yellow-600:disabled { color:#ca8a04; }
.on-disabled\:border-color-yellow-600:disabled { border-color:#ca8a04; }
.on-disabled\:background-yellow-700:disabled { background-color:#a16207; }
.on-disabled\:color-yellow-700:disabled { color:#a16207; }
.on-disabled\:border-color-yellow-700:disabled { border-color:#a16207; }
.on-disabled\:background-lime-300:disabled { background-color:#bef264; }
.on-disabled\:color-lime-300:disabled { color:#bef264; }
.on-disabled\:border-color-lime-300:disabled { border-color:#bef264; }
.on-disabled\:background-lime-400:disabled { background-color:#a3e635; }
.on-disabled\:color-lime-400:disabled { color:#a3e635; }
.on-disabled\:border-color-lime-400:disabled { border-color:#a3e635; }
.on-disabled\:background-lime-500:disabled { background-color:#84cc16; }
.on-disabled\:color-lime-500:disabled { color:#84cc16; }
.on-disabled\:border-color-lime-500:disabled { border-color:#84cc16; }
.on-disabled\:background-lime-600:disabled { background-color:#65a30d; }
.on-disabled\:color-lime-600:disabled { color:#65a30d; }
.on-disabled\:border-color-lime-600:disabled { border-color:#65a30d; }
.on-disabled\:background-lime-700:disabled { background-color:#4d7c0f; }
.on-disabled\:color-lime-700:disabled { color:#4d7c0f; }
.on-disabled\:border-color-lime-700:disabled { border-color:#4d7c0f; }
.on-disabled\:background-green-300:disabled { background-color:#86efac; }
.on-disabled\:color-green-300:disabled { color:#86efac; }
.on-disabled\:border-color-green-300:disabled { border-color:#86efac; }
.on-disabled\:background-green-400:disabled { background-color:#4ade80; }
.on-disabled\:color-green-400:disabled { color:#4ade80; }
.on-disabled\:border-color-green-400:disabled { border-color:#4ade80; }
.on-disabled\:background-green-500:disabled { background-color:#22c55e; }
.on-disabled\:color-green-500:disabled { color:#22c55e; }
.on-disabled\:border-color-green-500:disabled { border-color:#22c55e; }
.on-disabled\:background-green-600:disabled { background-color:#16a34a; }
.on-disabled\:color-green-600:disabled { color:#16a34a; }
.on-disabled\:border-color-green-600:disabled { border-color:#16a34a; }
.on-disabled\:background-green-700:disabled { background-color:#15803d; }
.on-disabled\:color-green-700:disabled { color:#15803d; }
.on-disabled\:border-color-green-700:disabled { border-color:#15803d; }
.on-disabled\:background-teal-300:disabled { background-color:#5eead4; }
.on-disabled\:color-teal-300:disabled { color:#5eead4; }
.on-disabled\:border-color-teal-300:disabled { border-color:#5eead4; }
.on-disabled\:background-teal-400:disabled { background-color:#2dd4bf; }
.on-disabled\:color-teal-400:disabled { color:#2dd4bf; }
.on-disabled\:border-color-teal-400:disabled { border-color:#2dd4bf; }
.on-disabled\:background-teal-500:disabled { background-color:#14b8a6; }
.on-disabled\:color-teal-500:disabled { color:#14b8a6; }
.on-disabled\:border-color-teal-500:disabled { border-color:#14b8a6; }
.on-disabled\:background-teal-600:disabled { background-color:#0d9488; }
.on-disabled\:color-teal-600:disabled { color:#0d9488; }
.on-disabled\:border-color-teal-600:disabled { border-color:#0d9488; }
.on-disabled\:background-teal-700:disabled { background-color:#0f766e; }
.on-disabled\:color-teal-700:disabled { color:#0f766e; }
.on-disabled\:border-color-teal-700:disabled { border-color:#0f766e; }
.on-disabled\:background-cyan-300:disabled { background-color:#67e8f9; }
.on-disabled\:color-cyan-300:disabled { color:#67e8f9; }
.on-disabled\:border-color-cyan-300:disabled { border-color:#67e8f9; }
.on-disabled\:background-cyan-400:disabled { background-color:#22d3ee; }
.on-disabled\:color-cyan-400:disabled { color:#22d3ee; }
.on-disabled\:border-color-cyan-400:disabled { border-color:#22d3ee; }
.on-disabled\:background-cyan-500:disabled { background-color:#06b6d4; }
.on-disabled\:color-cyan-500:disabled { color:#06b6d4; }
.on-disabled\:border-color-cyan-500:disabled { border-color:#06b6d4; }
.on-disabled\:background-cyan-600:disabled { background-color:#0891b2; }
.on-disabled\:color-cyan-600:disabled { color:#0891b2; }
.on-disabled\:border-color-cyan-600:disabled { border-color:#0891b2; }
.on-disabled\:background-cyan-700:disabled { background-color:#0e7490; }
.on-disabled\:color-cyan-700:disabled { color:#0e7490; }
.on-disabled\:border-color-cyan-700:disabled { border-color:#0e7490; }
.on-disabled\:background-blue-300:disabled { background-color:#93c5fd; }
.on-disabled\:color-blue-300:disabled { color:#93c5fd; }
.on-disabled\:border-color-blue-300:disabled { border-color:#93c5fd; }
.on-disabled\:background-blue-400:disabled { background-color:#60a5fa; }
.on-disabled\:color-blue-400:disabled { color:#60a5fa; }
.on-disabled\:border-color-blue-400:disabled { border-color:#60a5fa; }
.on-disabled\:background-blue-500:disabled { background-color:#3b82f6; }
.on-disabled\:color-blue-500:disabled { color:#3b82f6; }
.on-disabled\:border-color-blue-500:disabled { border-color:#3b82f6; }
.on-disabled\:background-blue-600:disabled { background-color:#2563eb; }
.on-disabled\:color-blue-600:disabled { color:#2563eb; }
.on-disabled\:border-color-blue-600:disabled { border-color:#2563eb; }
.on-disabled\:background-blue-700:disabled { background-color:#1d4ed8; }
.on-disabled\:color-blue-700:disabled { color:#1d4ed8; }
.on-disabled\:border-color-blue-700:disabled { border-color:#1d4ed8; }
.on-disabled\:background-indigo-300:disabled { background-color:#a5b4fc; }
.on-disabled\:color-indigo-300:disabled { color:#a5b4fc; }
.on-disabled\:border-color-indigo-300:disabled { border-color:#a5b4fc; }
.on-disabled\:background-indigo-400:disabled { background-color:#818cf8; }
.on-disabled\:color-indigo-400:disabled { color:#818cf8; }
.on-disabled\:border-color-indigo-400:disabled { border-color:#818cf8; }
.on-disabled\:background-indigo-500:disabled { background-color:#6366f1; }
.on-disabled\:color-indigo-500:disabled { color:#6366f1; }
.on-disabled\:border-color-indigo-500:disabled { border-color:#6366f1; }
.on-disabled\:background-indigo-600:disabled { background-color:#4f46e5; }
.on-disabled\:color-indigo-600:disabled { color:#4f46e5; }
.on-disabled\:border-color-indigo-600:disabled { border-color:#4f46e5; }
.on-disabled\:background-indigo-700:disabled { background-color:#4338ca; }
.on-disabled\:color-indigo-700:disabled { color:#4338ca; }
.on-disabled\:border-color-indigo-700:disabled { border-color:#4338ca; }
.on-disabled\:background-violet-300:disabled { background-color:#c4b5fd; }
.on-disabled\:color-violet-300:disabled { color:#c4b5fd; }
.on-disabled\:border-color-violet-300:disabled { border-color:#c4b5fd; }
.on-disabled\:background-violet-400:disabled { background-color:#a78bfa; }
.on-disabled\:color-violet-400:disabled { color:#a78bfa; }
.on-disabled\:border-color-violet-400:disabled { border-color:#a78bfa; }
.on-disabled\:background-violet-500:disabled { background-color:#8b5cf6; }
.on-disabled\:color-violet-500:disabled { color:#8b5cf6; }
.on-disabled\:border-color-violet-500:disabled { border-color:#8b5cf6; }
.on-disabled\:background-violet-600:disabled { background-color:#7c3aed; }
.on-disabled\:color-violet-600:disabled { color:#7c3aed; }
.on-disabled\:border-color-violet-600:disabled { border-color:#7c3aed; }
.on-disabled\:background-violet-700:disabled { background-color:#6d28d9; }
.on-disabled\:color-violet-700:disabled { color:#6d28d9; }
.on-disabled\:border-color-violet-700:disabled { border-color:#6d28d9; }
.on-disabled\:background-purple-300:disabled { background-color:#d8b4fe; }
.on-disabled\:color-purple-300:disabled { color:#d8b4fe; }
.on-disabled\:border-color-purple-300:disabled { border-color:#d8b4fe; }
.on-disabled\:background-purple-400:disabled { background-color:#c084fc; }
.on-disabled\:color-purple-400:disabled { color:#c084fc; }
.on-disabled\:border-color-purple-400:disabled { border-color:#c084fc; }
.on-disabled\:background-purple-500:disabled { background-color:#a855f7; }
.on-disabled\:color-purple-500:disabled { color:#a855f7; }
.on-disabled\:border-color-purple-500:disabled { border-color:#a855f7; }
.on-disabled\:background-purple-600:disabled { background-color:#9333ea; }
.on-disabled\:color-purple-600:disabled { color:#9333ea; }
.on-disabled\:border-color-purple-600:disabled { border-color:#9333ea; }
.on-disabled\:background-purple-700:disabled { background-color:#7e22ce; }
.on-disabled\:color-purple-700:disabled { color:#7e22ce; }
.on-disabled\:border-color-purple-700:disabled { border-color:#7e22ce; }
.on-disabled\:background-pink-300:disabled { background-color:#f9a8d4; }
.on-disabled\:color-pink-300:disabled { color:#f9a8d4; }
.on-disabled\:border-color-pink-300:disabled { border-color:#f9a8d4; }
.on-disabled\:background-pink-400:disabled { background-color:#f472b6; }
.on-disabled\:color-pink-400:disabled { color:#f472b6; }
.on-disabled\:border-color-pink-400:disabled { border-color:#f472b6; }
.on-disabled\:background-pink-500:disabled { background-color:#ec4899; }
.on-disabled\:color-pink-500:disabled { color:#ec4899; }
.on-disabled\:border-color-pink-500:disabled { border-color:#ec4899; }
.on-disabled\:background-pink-600:disabled { background-color:#db2777; }
.on-disabled\:color-pink-600:disabled { color:#db2777; }
.on-disabled\:border-color-pink-600:disabled { border-color:#db2777; }
.on-disabled\:background-pink-700:disabled { background-color:#be185d; }
.on-disabled\:color-pink-700:disabled { color:#be185d; }
.on-disabled\:border-color-pink-700:disabled { border-color:#be185d; }
.on-disabled\:background-rose-300:disabled { background-color:#fda4af; }
.on-disabled\:color-rose-300:disabled { color:#fda4af; }
.on-disabled\:border-color-rose-300:disabled { border-color:#fda4af; }
.on-disabled\:background-rose-400:disabled { background-color:#fb7185; }
.on-disabled\:color-rose-400:disabled { color:#fb7185; }
.on-disabled\:border-color-rose-400:disabled { border-color:#fb7185; }
.on-disabled\:background-rose-500:disabled { background-color:#f43f5e; }
.on-disabled\:color-rose-500:disabled { color:#f43f5e; }
.on-disabled\:border-color-rose-500:disabled { border-color:#f43f5e; }
.on-disabled\:background-rose-600:disabled { background-color:#e11d48; }
.on-disabled\:color-rose-600:disabled { color:#e11d48; }
.on-disabled\:border-color-rose-600:disabled { border-color:#e11d48; }
.on-disabled\:background-rose-700:disabled { background-color:#be123c; }
.on-disabled\:color-rose-700:disabled { color:#be123c; }
.on-disabled\:border-color-rose-700:disabled { border-color:#be123c; }
.on-disabled\:background-slate-300:disabled { background-color:#cbd5e1; }
.on-disabled\:color-slate-300:disabled { color:#cbd5e1; }
.on-disabled\:border-color-slate-300:disabled { border-color:#cbd5e1; }
.on-disabled\:background-slate-400:disabled { background-color:#94a3b8; }
.on-disabled\:color-slate-400:disabled { color:#94a3b8; }
.on-disabled\:border-color-slate-400:disabled { border-color:#94a3b8; }
.on-disabled\:background-slate-500:disabled { background-color:#64748b; }
.on-disabled\:color-slate-500:disabled { color:#64748b; }
.on-disabled\:border-color-slate-500:disabled { border-color:#64748b; }
.on-disabled\:background-slate-600:disabled { background-color:#475569; }
.on-disabled\:color-slate-600:disabled { color:#475569; }
.on-disabled\:border-color-slate-600:disabled { border-color:#475569; }
.on-disabled\:background-slate-700:disabled { background-color:#334155; }
.on-disabled\:color-slate-700:disabled { color:#334155; }
.on-disabled\:border-color-slate-700:disabled { border-color:#334155; }
.on-disabled\:background-gray-300:disabled { background-color:#d1d5db; }
.on-disabled\:color-gray-300:disabled { color:#d1d5db; }
.on-disabled\:border-color-gray-300:disabled { border-color:#d1d5db; }
.on-disabled\:background-gray-400:disabled { background-color:#9ca3af; }
.on-disabled\:color-gray-400:disabled { color:#9ca3af; }
.on-disabled\:border-color-gray-400:disabled { border-color:#9ca3af; }
.on-disabled\:background-gray-500:disabled { background-color:#6b7280; }
.on-disabled\:color-gray-500:disabled { color:#6b7280; }
.on-disabled\:border-color-gray-500:disabled { border-color:#6b7280; }
.on-disabled\:background-gray-600:disabled { background-color:#4b5563; }
.on-disabled\:color-gray-600:disabled { color:#4b5563; }
.on-disabled\:border-color-gray-600:disabled { border-color:#4b5563; }
.on-disabled\:background-gray-700:disabled { background-color:#374151; }
.on-disabled\:color-gray-700:disabled { color:#374151; }
.on-disabled\:border-color-gray-700:disabled { border-color:#374151; }
.on-disabled\:background-zinc-300:disabled { background-color:#d4d4d8; }
.on-disabled\:color-zinc-300:disabled { color:#d4d4d8; }
.on-disabled\:border-color-zinc-300:disabled { border-color:#d4d4d8; }
.on-disabled\:background-zinc-400:disabled { background-color:#a1a1aa; }
.on-disabled\:color-zinc-400:disabled { color:#a1a1aa; }
.on-disabled\:border-color-zinc-400:disabled { border-color:#a1a1aa; }
.on-disabled\:background-zinc-500:disabled { background-color:#71717a; }
.on-disabled\:color-zinc-500:disabled { color:#71717a; }
.on-disabled\:border-color-zinc-500:disabled { border-color:#71717a; }
.on-disabled\:background-zinc-600:disabled { background-color:#52525b; }
.on-disabled\:color-zinc-600:disabled { color:#52525b; }
.on-disabled\:border-color-zinc-600:disabled { border-color:#52525b; }
.on-disabled\:background-zinc-700:disabled { background-color:#3f3f46; }
.on-disabled\:color-zinc-700:disabled { color:#3f3f46; }
.on-disabled\:border-color-zinc-700:disabled { border-color:#3f3f46; }
.on-disabled\:background-stone-300:disabled { background-color:#d6d3d1; }
.on-disabled\:color-stone-300:disabled { color:#d6d3d1; }
.on-disabled\:border-color-stone-300:disabled { border-color:#d6d3d1; }
.on-disabled\:background-stone-400:disabled { background-color:#a8a29e; }
.on-disabled\:color-stone-400:disabled { color:#a8a29e; }
.on-disabled\:border-color-stone-400:disabled { border-color:#a8a29e; }
.on-disabled\:background-stone-500:disabled { background-color:#78716c; }
.on-disabled\:color-stone-500:disabled { color:#78716c; }
.on-disabled\:border-color-stone-500:disabled { border-color:#78716c; }
.on-disabled\:background-stone-600:disabled { background-color:#57534e; }
.on-disabled\:color-stone-600:disabled { color:#57534e; }
.on-disabled\:border-color-stone-600:disabled { border-color:#57534e; }
.on-disabled\:background-stone-700:disabled { background-color:#44403c; }
.on-disabled\:color-stone-700:disabled { color:#44403c; }
.on-disabled\:border-color-stone-700:disabled { border-color:#44403c; }
.on-disabled\:add-shadow-sm:disabled { box-shadow:var(--santy-shadow-sm); }
.on-disabled\:add-shadow:disabled { box-shadow:var(--santy-shadow); }
.on-disabled\:add-shadow-md:disabled { box-shadow:var(--santy-shadow-md); }
.on-disabled\:add-shadow-lg:disabled { box-shadow:var(--santy-shadow-lg); }
.on-disabled\:no-shadow:disabled { box-shadow:none; }
.on-disabled\:opacity-0:disabled { opacity:0; }
.on-disabled\:opacity-25:disabled { opacity:0.25; }
.on-disabled\:opacity-50:disabled { opacity:0.5; }
.on-disabled\:opacity-75:disabled { opacity:0.75; }
.on-disabled\:opacity-100:disabled { opacity:1; }
.on-disabled\:scale-90:disabled { transform:scale(0.9); }
.on-disabled\:scale-95:disabled { transform:scale(0.95); }
.on-disabled\:scale-100:disabled { transform:scale(1); }
.on-disabled\:scale-105:disabled { transform:scale(1.05); }
.on-disabled\:scale-110:disabled { transform:scale(1.1); }
.on-disabled\:make-hidden:disabled { display:none; }
.on-disabled\:make-block:disabled { display:block; }
.on-disabled\:make-flex:disabled { display:flex; }
.on-disabled\:cursor-pointer:disabled { cursor:pointer; }
.on-disabled\:cursor-not-allowed:disabled { cursor:not-allowed; }
.on-disabled\:outline-none:disabled { outline:none; }
.on-disabled\:text-underline:disabled { text-decoration:underline; }
.on-disabled\:text-no-decoration:disabled { text-decoration:none; }
.on-disabled\:text-bold:disabled { font-weight:700; }
.on-disabled\:transition-fast:disabled { transition:var(--santy-transition-fast); }
.on-disabled\:transition-normal:disabled { transition:var(--santy-transition-normal); }
.on-disabled\:add-border-1:disabled { border:1px solid; }
.on-disabled\:add-border-2:disabled { border:2px solid; }
.on-disabled\:add-border-4:disabled { border:4px solid; }

/* on-checked */
.on-checked\:background-red-300:checked { background-color:#fca5a5; }
.on-checked\:color-red-300:checked { color:#fca5a5; }
.on-checked\:border-color-red-300:checked { border-color:#fca5a5; }
.on-checked\:background-red-400:checked { background-color:#f87171; }
.on-checked\:color-red-400:checked { color:#f87171; }
.on-checked\:border-color-red-400:checked { border-color:#f87171; }
.on-checked\:background-red-500:checked { background-color:#ef4444; }
.on-checked\:color-red-500:checked { color:#ef4444; }
.on-checked\:border-color-red-500:checked { border-color:#ef4444; }
.on-checked\:background-red-600:checked { background-color:#dc2626; }
.on-checked\:color-red-600:checked { color:#dc2626; }
.on-checked\:border-color-red-600:checked { border-color:#dc2626; }
.on-checked\:background-red-700:checked { background-color:#b91c1c; }
.on-checked\:color-red-700:checked { color:#b91c1c; }
.on-checked\:border-color-red-700:checked { border-color:#b91c1c; }
.on-checked\:background-orange-300:checked { background-color:#fdba74; }
.on-checked\:color-orange-300:checked { color:#fdba74; }
.on-checked\:border-color-orange-300:checked { border-color:#fdba74; }
.on-checked\:background-orange-400:checked { background-color:#fb923c; }
.on-checked\:color-orange-400:checked { color:#fb923c; }
.on-checked\:border-color-orange-400:checked { border-color:#fb923c; }
.on-checked\:background-orange-500:checked { background-color:#f97316; }
.on-checked\:color-orange-500:checked { color:#f97316; }
.on-checked\:border-color-orange-500:checked { border-color:#f97316; }
.on-checked\:background-orange-600:checked { background-color:#ea580c; }
.on-checked\:color-orange-600:checked { color:#ea580c; }
.on-checked\:border-color-orange-600:checked { border-color:#ea580c; }
.on-checked\:background-orange-700:checked { background-color:#c2410c; }
.on-checked\:color-orange-700:checked { color:#c2410c; }
.on-checked\:border-color-orange-700:checked { border-color:#c2410c; }
.on-checked\:background-amber-300:checked { background-color:#fcd34d; }
.on-checked\:color-amber-300:checked { color:#fcd34d; }
.on-checked\:border-color-amber-300:checked { border-color:#fcd34d; }
.on-checked\:background-amber-400:checked { background-color:#fbbf24; }
.on-checked\:color-amber-400:checked { color:#fbbf24; }
.on-checked\:border-color-amber-400:checked { border-color:#fbbf24; }
.on-checked\:background-amber-500:checked { background-color:#f59e0b; }
.on-checked\:color-amber-500:checked { color:#f59e0b; }
.on-checked\:border-color-amber-500:checked { border-color:#f59e0b; }
.on-checked\:background-amber-600:checked { background-color:#d97706; }
.on-checked\:color-amber-600:checked { color:#d97706; }
.on-checked\:border-color-amber-600:checked { border-color:#d97706; }
.on-checked\:background-amber-700:checked { background-color:#b45309; }
.on-checked\:color-amber-700:checked { color:#b45309; }
.on-checked\:border-color-amber-700:checked { border-color:#b45309; }
.on-checked\:background-yellow-300:checked { background-color:#fde047; }
.on-checked\:color-yellow-300:checked { color:#fde047; }
.on-checked\:border-color-yellow-300:checked { border-color:#fde047; }
.on-checked\:background-yellow-400:checked { background-color:#facc15; }
.on-checked\:color-yellow-400:checked { color:#facc15; }
.on-checked\:border-color-yellow-400:checked { border-color:#facc15; }
.on-checked\:background-yellow-500:checked { background-color:#eab308; }
.on-checked\:color-yellow-500:checked { color:#eab308; }
.on-checked\:border-color-yellow-500:checked { border-color:#eab308; }
.on-checked\:background-yellow-600:checked { background-color:#ca8a04; }
.on-checked\:color-yellow-600:checked { color:#ca8a04; }
.on-checked\:border-color-yellow-600:checked { border-color:#ca8a04; }
.on-checked\:background-yellow-700:checked { background-color:#a16207; }
.on-checked\:color-yellow-700:checked { color:#a16207; }
.on-checked\:border-color-yellow-700:checked { border-color:#a16207; }
.on-checked\:background-lime-300:checked { background-color:#bef264; }
.on-checked\:color-lime-300:checked { color:#bef264; }
.on-checked\:border-color-lime-300:checked { border-color:#bef264; }
.on-checked\:background-lime-400:checked { background-color:#a3e635; }
.on-checked\:color-lime-400:checked { color:#a3e635; }
.on-checked\:border-color-lime-400:checked { border-color:#a3e635; }
.on-checked\:background-lime-500:checked { background-color:#84cc16; }
.on-checked\:color-lime-500:checked { color:#84cc16; }
.on-checked\:border-color-lime-500:checked { border-color:#84cc16; }
.on-checked\:background-lime-600:checked { background-color:#65a30d; }
.on-checked\:color-lime-600:checked { color:#65a30d; }
.on-checked\:border-color-lime-600:checked { border-color:#65a30d; }
.on-checked\:background-lime-700:checked { background-color:#4d7c0f; }
.on-checked\:color-lime-700:checked { color:#4d7c0f; }
.on-checked\:border-color-lime-700:checked { border-color:#4d7c0f; }
.on-checked\:background-green-300:checked { background-color:#86efac; }
.on-checked\:color-green-300:checked { color:#86efac; }
.on-checked\:border-color-green-300:checked { border-color:#86efac; }
.on-checked\:background-green-400:checked { background-color:#4ade80; }
.on-checked\:color-green-400:checked { color:#4ade80; }
.on-checked\:border-color-green-400:checked { border-color:#4ade80; }
.on-checked\:background-green-500:checked { background-color:#22c55e; }
.on-checked\:color-green-500:checked { color:#22c55e; }
.on-checked\:border-color-green-500:checked { border-color:#22c55e; }
.on-checked\:background-green-600:checked { background-color:#16a34a; }
.on-checked\:color-green-600:checked { color:#16a34a; }
.on-checked\:border-color-green-600:checked { border-color:#16a34a; }
.on-checked\:background-green-700:checked { background-color:#15803d; }
.on-checked\:color-green-700:checked { color:#15803d; }
.on-checked\:border-color-green-700:checked { border-color:#15803d; }
.on-checked\:background-teal-300:checked { background-color:#5eead4; }
.on-checked\:color-teal-300:checked { color:#5eead4; }
.on-checked\:border-color-teal-300:checked { border-color:#5eead4; }
.on-checked\:background-teal-400:checked { background-color:#2dd4bf; }
.on-checked\:color-teal-400:checked { color:#2dd4bf; }
.on-checked\:border-color-teal-400:checked { border-color:#2dd4bf; }
.on-checked\:background-teal-500:checked { background-color:#14b8a6; }
.on-checked\:color-teal-500:checked { color:#14b8a6; }
.on-checked\:border-color-teal-500:checked { border-color:#14b8a6; }
.on-checked\:background-teal-600:checked { background-color:#0d9488; }
.on-checked\:color-teal-600:checked { color:#0d9488; }
.on-checked\:border-color-teal-600:checked { border-color:#0d9488; }
.on-checked\:background-teal-700:checked { background-color:#0f766e; }
.on-checked\:color-teal-700:checked { color:#0f766e; }
.on-checked\:border-color-teal-700:checked { border-color:#0f766e; }
.on-checked\:background-cyan-300:checked { background-color:#67e8f9; }
.on-checked\:color-cyan-300:checked { color:#67e8f9; }
.on-checked\:border-color-cyan-300:checked { border-color:#67e8f9; }
.on-checked\:background-cyan-400:checked { background-color:#22d3ee; }
.on-checked\:color-cyan-400:checked { color:#22d3ee; }
.on-checked\:border-color-cyan-400:checked { border-color:#22d3ee; }
.on-checked\:background-cyan-500:checked { background-color:#06b6d4; }
.on-checked\:color-cyan-500:checked { color:#06b6d4; }
.on-checked\:border-color-cyan-500:checked { border-color:#06b6d4; }
.on-checked\:background-cyan-600:checked { background-color:#0891b2; }
.on-checked\:color-cyan-600:checked { color:#0891b2; }
.on-checked\:border-color-cyan-600:checked { border-color:#0891b2; }
.on-checked\:background-cyan-700:checked { background-color:#0e7490; }
.on-checked\:color-cyan-700:checked { color:#0e7490; }
.on-checked\:border-color-cyan-700:checked { border-color:#0e7490; }
.on-checked\:background-blue-300:checked { background-color:#93c5fd; }
.on-checked\:color-blue-300:checked { color:#93c5fd; }
.on-checked\:border-color-blue-300:checked { border-color:#93c5fd; }
.on-checked\:background-blue-400:checked { background-color:#60a5fa; }
.on-checked\:color-blue-400:checked { color:#60a5fa; }
.on-checked\:border-color-blue-400:checked { border-color:#60a5fa; }
.on-checked\:background-blue-500:checked { background-color:#3b82f6; }
.on-checked\:color-blue-500:checked { color:#3b82f6; }
.on-checked\:border-color-blue-500:checked { border-color:#3b82f6; }
.on-checked\:background-blue-600:checked { background-color:#2563eb; }
.on-checked\:color-blue-600:checked { color:#2563eb; }
.on-checked\:border-color-blue-600:checked { border-color:#2563eb; }
.on-checked\:background-blue-700:checked { background-color:#1d4ed8; }
.on-checked\:color-blue-700:checked { color:#1d4ed8; }
.on-checked\:border-color-blue-700:checked { border-color:#1d4ed8; }
.on-checked\:background-indigo-300:checked { background-color:#a5b4fc; }
.on-checked\:color-indigo-300:checked { color:#a5b4fc; }
.on-checked\:border-color-indigo-300:checked { border-color:#a5b4fc; }
.on-checked\:background-indigo-400:checked { background-color:#818cf8; }
.on-checked\:color-indigo-400:checked { color:#818cf8; }
.on-checked\:border-color-indigo-400:checked { border-color:#818cf8; }
.on-checked\:background-indigo-500:checked { background-color:#6366f1; }
.on-checked\:color-indigo-500:checked { color:#6366f1; }
.on-checked\:border-color-indigo-500:checked { border-color:#6366f1; }
.on-checked\:background-indigo-600:checked { background-color:#4f46e5; }
.on-checked\:color-indigo-600:checked { color:#4f46e5; }
.on-checked\:border-color-indigo-600:checked { border-color:#4f46e5; }
.on-checked\:background-indigo-700:checked { background-color:#4338ca; }
.on-checked\:color-indigo-700:checked { color:#4338ca; }
.on-checked\:border-color-indigo-700:checked { border-color:#4338ca; }
.on-checked\:background-violet-300:checked { background-color:#c4b5fd; }
.on-checked\:color-violet-300:checked { color:#c4b5fd; }
.on-checked\:border-color-violet-300:checked { border-color:#c4b5fd; }
.on-checked\:background-violet-400:checked { background-color:#a78bfa; }
.on-checked\:color-violet-400:checked { color:#a78bfa; }
.on-checked\:border-color-violet-400:checked { border-color:#a78bfa; }
.on-checked\:background-violet-500:checked { background-color:#8b5cf6; }
.on-checked\:color-violet-500:checked { color:#8b5cf6; }
.on-checked\:border-color-violet-500:checked { border-color:#8b5cf6; }
.on-checked\:background-violet-600:checked { background-color:#7c3aed; }
.on-checked\:color-violet-600:checked { color:#7c3aed; }
.on-checked\:border-color-violet-600:checked { border-color:#7c3aed; }
.on-checked\:background-violet-700:checked { background-color:#6d28d9; }
.on-checked\:color-violet-700:checked { color:#6d28d9; }
.on-checked\:border-color-violet-700:checked { border-color:#6d28d9; }
.on-checked\:background-purple-300:checked { background-color:#d8b4fe; }
.on-checked\:color-purple-300:checked { color:#d8b4fe; }
.on-checked\:border-color-purple-300:checked { border-color:#d8b4fe; }
.on-checked\:background-purple-400:checked { background-color:#c084fc; }
.on-checked\:color-purple-400:checked { color:#c084fc; }
.on-checked\:border-color-purple-400:checked { border-color:#c084fc; }
.on-checked\:background-purple-500:checked { background-color:#a855f7; }
.on-checked\:color-purple-500:checked { color:#a855f7; }
.on-checked\:border-color-purple-500:checked { border-color:#a855f7; }
.on-checked\:background-purple-600:checked { background-color:#9333ea; }
.on-checked\:color-purple-600:checked { color:#9333ea; }
.on-checked\:border-color-purple-600:checked { border-color:#9333ea; }
.on-checked\:background-purple-700:checked { background-color:#7e22ce; }
.on-checked\:color-purple-700:checked { color:#7e22ce; }
.on-checked\:border-color-purple-700:checked { border-color:#7e22ce; }
.on-checked\:background-pink-300:checked { background-color:#f9a8d4; }
.on-checked\:color-pink-300:checked { color:#f9a8d4; }
.on-checked\:border-color-pink-300:checked { border-color:#f9a8d4; }
.on-checked\:background-pink-400:checked { background-color:#f472b6; }
.on-checked\:color-pink-400:checked { color:#f472b6; }
.on-checked\:border-color-pink-400:checked { border-color:#f472b6; }
.on-checked\:background-pink-500:checked { background-color:#ec4899; }
.on-checked\:color-pink-500:checked { color:#ec4899; }
.on-checked\:border-color-pink-500:checked { border-color:#ec4899; }
.on-checked\:background-pink-600:checked { background-color:#db2777; }
.on-checked\:color-pink-600:checked { color:#db2777; }
.on-checked\:border-color-pink-600:checked { border-color:#db2777; }
.on-checked\:background-pink-700:checked { background-color:#be185d; }
.on-checked\:color-pink-700:checked { color:#be185d; }
.on-checked\:border-color-pink-700:checked { border-color:#be185d; }
.on-checked\:background-rose-300:checked { background-color:#fda4af; }
.on-checked\:color-rose-300:checked { color:#fda4af; }
.on-checked\:border-color-rose-300:checked { border-color:#fda4af; }
.on-checked\:background-rose-400:checked { background-color:#fb7185; }
.on-checked\:color-rose-400:checked { color:#fb7185; }
.on-checked\:border-color-rose-400:checked { border-color:#fb7185; }
.on-checked\:background-rose-500:checked { background-color:#f43f5e; }
.on-checked\:color-rose-500:checked { color:#f43f5e; }
.on-checked\:border-color-rose-500:checked { border-color:#f43f5e; }
.on-checked\:background-rose-600:checked { background-color:#e11d48; }
.on-checked\:color-rose-600:checked { color:#e11d48; }
.on-checked\:border-color-rose-600:checked { border-color:#e11d48; }
.on-checked\:background-rose-700:checked { background-color:#be123c; }
.on-checked\:color-rose-700:checked { color:#be123c; }
.on-checked\:border-color-rose-700:checked { border-color:#be123c; }
.on-checked\:background-slate-300:checked { background-color:#cbd5e1; }
.on-checked\:color-slate-300:checked { color:#cbd5e1; }
.on-checked\:border-color-slate-300:checked { border-color:#cbd5e1; }
.on-checked\:background-slate-400:checked { background-color:#94a3b8; }
.on-checked\:color-slate-400:checked { color:#94a3b8; }
.on-checked\:border-color-slate-400:checked { border-color:#94a3b8; }
.on-checked\:background-slate-500:checked { background-color:#64748b; }
.on-checked\:color-slate-500:checked { color:#64748b; }
.on-checked\:border-color-slate-500:checked { border-color:#64748b; }
.on-checked\:background-slate-600:checked { background-color:#475569; }
.on-checked\:color-slate-600:checked { color:#475569; }
.on-checked\:border-color-slate-600:checked { border-color:#475569; }
.on-checked\:background-slate-700:checked { background-color:#334155; }
.on-checked\:color-slate-700:checked { color:#334155; }
.on-checked\:border-color-slate-700:checked { border-color:#334155; }
.on-checked\:background-gray-300:checked { background-color:#d1d5db; }
.on-checked\:color-gray-300:checked { color:#d1d5db; }
.on-checked\:border-color-gray-300:checked { border-color:#d1d5db; }
.on-checked\:background-gray-400:checked { background-color:#9ca3af; }
.on-checked\:color-gray-400:checked { color:#9ca3af; }
.on-checked\:border-color-gray-400:checked { border-color:#9ca3af; }
.on-checked\:background-gray-500:checked { background-color:#6b7280; }
.on-checked\:color-gray-500:checked { color:#6b7280; }
.on-checked\:border-color-gray-500:checked { border-color:#6b7280; }
.on-checked\:background-gray-600:checked { background-color:#4b5563; }
.on-checked\:color-gray-600:checked { color:#4b5563; }
.on-checked\:border-color-gray-600:checked { border-color:#4b5563; }
.on-checked\:background-gray-700:checked { background-color:#374151; }
.on-checked\:color-gray-700:checked { color:#374151; }
.on-checked\:border-color-gray-700:checked { border-color:#374151; }
.on-checked\:background-zinc-300:checked { background-color:#d4d4d8; }
.on-checked\:color-zinc-300:checked { color:#d4d4d8; }
.on-checked\:border-color-zinc-300:checked { border-color:#d4d4d8; }
.on-checked\:background-zinc-400:checked { background-color:#a1a1aa; }
.on-checked\:color-zinc-400:checked { color:#a1a1aa; }
.on-checked\:border-color-zinc-400:checked { border-color:#a1a1aa; }
.on-checked\:background-zinc-500:checked { background-color:#71717a; }
.on-checked\:color-zinc-500:checked { color:#71717a; }
.on-checked\:border-color-zinc-500:checked { border-color:#71717a; }
.on-checked\:background-zinc-600:checked { background-color:#52525b; }
.on-checked\:color-zinc-600:checked { color:#52525b; }
.on-checked\:border-color-zinc-600:checked { border-color:#52525b; }
.on-checked\:background-zinc-700:checked { background-color:#3f3f46; }
.on-checked\:color-zinc-700:checked { color:#3f3f46; }
.on-checked\:border-color-zinc-700:checked { border-color:#3f3f46; }
.on-checked\:background-stone-300:checked { background-color:#d6d3d1; }
.on-checked\:color-stone-300:checked { color:#d6d3d1; }
.on-checked\:border-color-stone-300:checked { border-color:#d6d3d1; }
.on-checked\:background-stone-400:checked { background-color:#a8a29e; }
.on-checked\:color-stone-400:checked { color:#a8a29e; }
.on-checked\:border-color-stone-400:checked { border-color:#a8a29e; }
.on-checked\:background-stone-500:checked { background-color:#78716c; }
.on-checked\:color-stone-500:checked { color:#78716c; }
.on-checked\:border-color-stone-500:checked { border-color:#78716c; }
.on-checked\:background-stone-600:checked { background-color:#57534e; }
.on-checked\:color-stone-600:checked { color:#57534e; }
.on-checked\:border-color-stone-600:checked { border-color:#57534e; }
.on-checked\:background-stone-700:checked { background-color:#44403c; }
.on-checked\:color-stone-700:checked { color:#44403c; }
.on-checked\:border-color-stone-700:checked { border-color:#44403c; }
.on-checked\:add-shadow-sm:checked { box-shadow:var(--santy-shadow-sm); }
.on-checked\:add-shadow:checked { box-shadow:var(--santy-shadow); }
.on-checked\:add-shadow-md:checked { box-shadow:var(--santy-shadow-md); }
.on-checked\:add-shadow-lg:checked { box-shadow:var(--santy-shadow-lg); }
.on-checked\:no-shadow:checked { box-shadow:none; }
.on-checked\:opacity-0:checked { opacity:0; }
.on-checked\:opacity-25:checked { opacity:0.25; }
.on-checked\:opacity-50:checked { opacity:0.5; }
.on-checked\:opacity-75:checked { opacity:0.75; }
.on-checked\:opacity-100:checked { opacity:1; }
.on-checked\:scale-90:checked { transform:scale(0.9); }
.on-checked\:scale-95:checked { transform:scale(0.95); }
.on-checked\:scale-100:checked { transform:scale(1); }
.on-checked\:scale-105:checked { transform:scale(1.05); }
.on-checked\:scale-110:checked { transform:scale(1.1); }
.on-checked\:make-hidden:checked { display:none; }
.on-checked\:make-block:checked { display:block; }
.on-checked\:make-flex:checked { display:flex; }
.on-checked\:cursor-pointer:checked { cursor:pointer; }
.on-checked\:cursor-not-allowed:checked { cursor:not-allowed; }
.on-checked\:outline-none:checked { outline:none; }
.on-checked\:text-underline:checked { text-decoration:underline; }
.on-checked\:text-no-decoration:checked { text-decoration:none; }
.on-checked\:text-bold:checked { font-weight:700; }
.on-checked\:transition-fast:checked { transition:var(--santy-transition-fast); }
.on-checked\:transition-normal:checked { transition:var(--santy-transition-normal); }
.on-checked\:add-border-1:checked { border:1px solid; }
.on-checked\:add-border-2:checked { border:2px solid; }
.on-checked\:add-border-4:checked { border:4px solid; }

/* on-first */
.on-first\:background-red-300:first-child { background-color:#fca5a5; }
.on-first\:color-red-300:first-child { color:#fca5a5; }
.on-first\:border-color-red-300:first-child { border-color:#fca5a5; }
.on-first\:background-red-400:first-child { background-color:#f87171; }
.on-first\:color-red-400:first-child { color:#f87171; }
.on-first\:border-color-red-400:first-child { border-color:#f87171; }
.on-first\:background-red-500:first-child { background-color:#ef4444; }
.on-first\:color-red-500:first-child { color:#ef4444; }
.on-first\:border-color-red-500:first-child { border-color:#ef4444; }
.on-first\:background-red-600:first-child { background-color:#dc2626; }
.on-first\:color-red-600:first-child { color:#dc2626; }
.on-first\:border-color-red-600:first-child { border-color:#dc2626; }
.on-first\:background-red-700:first-child { background-color:#b91c1c; }
.on-first\:color-red-700:first-child { color:#b91c1c; }
.on-first\:border-color-red-700:first-child { border-color:#b91c1c; }
.on-first\:background-orange-300:first-child { background-color:#fdba74; }
.on-first\:color-orange-300:first-child { color:#fdba74; }
.on-first\:border-color-orange-300:first-child { border-color:#fdba74; }
.on-first\:background-orange-400:first-child { background-color:#fb923c; }
.on-first\:color-orange-400:first-child { color:#fb923c; }
.on-first\:border-color-orange-400:first-child { border-color:#fb923c; }
.on-first\:background-orange-500:first-child { background-color:#f97316; }
.on-first\:color-orange-500:first-child { color:#f97316; }
.on-first\:border-color-orange-500:first-child { border-color:#f97316; }
.on-first\:background-orange-600:first-child { background-color:#ea580c; }
.on-first\:color-orange-600:first-child { color:#ea580c; }
.on-first\:border-color-orange-600:first-child { border-color:#ea580c; }
.on-first\:background-orange-700:first-child { background-color:#c2410c; }
.on-first\:color-orange-700:first-child { color:#c2410c; }
.on-first\:border-color-orange-700:first-child { border-color:#c2410c; }
.on-first\:background-amber-300:first-child { background-color:#fcd34d; }
.on-first\:color-amber-300:first-child { color:#fcd34d; }
.on-first\:border-color-amber-300:first-child { border-color:#fcd34d; }
.on-first\:background-amber-400:first-child { background-color:#fbbf24; }
.on-first\:color-amber-400:first-child { color:#fbbf24; }
.on-first\:border-color-amber-400:first-child { border-color:#fbbf24; }
.on-first\:background-amber-500:first-child { background-color:#f59e0b; }
.on-first\:color-amber-500:first-child { color:#f59e0b; }
.on-first\:border-color-amber-500:first-child { border-color:#f59e0b; }
.on-first\:background-amber-600:first-child { background-color:#d97706; }
.on-first\:color-amber-600:first-child { color:#d97706; }
.on-first\:border-color-amber-600:first-child { border-color:#d97706; }
.on-first\:background-amber-700:first-child { background-color:#b45309; }
.on-first\:color-amber-700:first-child { color:#b45309; }
.on-first\:border-color-amber-700:first-child { border-color:#b45309; }
.on-first\:background-yellow-300:first-child { background-color:#fde047; }
.on-first\:color-yellow-300:first-child { color:#fde047; }
.on-first\:border-color-yellow-300:first-child { border-color:#fde047; }
.on-first\:background-yellow-400:first-child { background-color:#facc15; }
.on-first\:color-yellow-400:first-child { color:#facc15; }
.on-first\:border-color-yellow-400:first-child { border-color:#facc15; }
.on-first\:background-yellow-500:first-child { background-color:#eab308; }
.on-first\:color-yellow-500:first-child { color:#eab308; }
.on-first\:border-color-yellow-500:first-child { border-color:#eab308; }
.on-first\:background-yellow-600:first-child { background-color:#ca8a04; }
.on-first\:color-yellow-600:first-child { color:#ca8a04; }
.on-first\:border-color-yellow-600:first-child { border-color:#ca8a04; }
.on-first\:background-yellow-700:first-child { background-color:#a16207; }
.on-first\:color-yellow-700:first-child { color:#a16207; }
.on-first\:border-color-yellow-700:first-child { border-color:#a16207; }
.on-first\:background-lime-300:first-child { background-color:#bef264; }
.on-first\:color-lime-300:first-child { color:#bef264; }
.on-first\:border-color-lime-300:first-child { border-color:#bef264; }
.on-first\:background-lime-400:first-child { background-color:#a3e635; }
.on-first\:color-lime-400:first-child { color:#a3e635; }
.on-first\:border-color-lime-400:first-child { border-color:#a3e635; }
.on-first\:background-lime-500:first-child { background-color:#84cc16; }
.on-first\:color-lime-500:first-child { color:#84cc16; }
.on-first\:border-color-lime-500:first-child { border-color:#84cc16; }
.on-first\:background-lime-600:first-child { background-color:#65a30d; }
.on-first\:color-lime-600:first-child { color:#65a30d; }
.on-first\:border-color-lime-600:first-child { border-color:#65a30d; }
.on-first\:background-lime-700:first-child { background-color:#4d7c0f; }
.on-first\:color-lime-700:first-child { color:#4d7c0f; }
.on-first\:border-color-lime-700:first-child { border-color:#4d7c0f; }
.on-first\:background-green-300:first-child { background-color:#86efac; }
.on-first\:color-green-300:first-child { color:#86efac; }
.on-first\:border-color-green-300:first-child { border-color:#86efac; }
.on-first\:background-green-400:first-child { background-color:#4ade80; }
.on-first\:color-green-400:first-child { color:#4ade80; }
.on-first\:border-color-green-400:first-child { border-color:#4ade80; }
.on-first\:background-green-500:first-child { background-color:#22c55e; }
.on-first\:color-green-500:first-child { color:#22c55e; }
.on-first\:border-color-green-500:first-child { border-color:#22c55e; }
.on-first\:background-green-600:first-child { background-color:#16a34a; }
.on-first\:color-green-600:first-child { color:#16a34a; }
.on-first\:border-color-green-600:first-child { border-color:#16a34a; }
.on-first\:background-green-700:first-child { background-color:#15803d; }
.on-first\:color-green-700:first-child { color:#15803d; }
.on-first\:border-color-green-700:first-child { border-color:#15803d; }
.on-first\:background-teal-300:first-child { background-color:#5eead4; }
.on-first\:color-teal-300:first-child { color:#5eead4; }
.on-first\:border-color-teal-300:first-child { border-color:#5eead4; }
.on-first\:background-teal-400:first-child { background-color:#2dd4bf; }
.on-first\:color-teal-400:first-child { color:#2dd4bf; }
.on-first\:border-color-teal-400:first-child { border-color:#2dd4bf; }
.on-first\:background-teal-500:first-child { background-color:#14b8a6; }
.on-first\:color-teal-500:first-child { color:#14b8a6; }
.on-first\:border-color-teal-500:first-child { border-color:#14b8a6; }
.on-first\:background-teal-600:first-child { background-color:#0d9488; }
.on-first\:color-teal-600:first-child { color:#0d9488; }
.on-first\:border-color-teal-600:first-child { border-color:#0d9488; }
.on-first\:background-teal-700:first-child { background-color:#0f766e; }
.on-first\:color-teal-700:first-child { color:#0f766e; }
.on-first\:border-color-teal-700:first-child { border-color:#0f766e; }
.on-first\:background-cyan-300:first-child { background-color:#67e8f9; }
.on-first\:color-cyan-300:first-child { color:#67e8f9; }
.on-first\:border-color-cyan-300:first-child { border-color:#67e8f9; }
.on-first\:background-cyan-400:first-child { background-color:#22d3ee; }
.on-first\:color-cyan-400:first-child { color:#22d3ee; }
.on-first\:border-color-cyan-400:first-child { border-color:#22d3ee; }
.on-first\:background-cyan-500:first-child { background-color:#06b6d4; }
.on-first\:color-cyan-500:first-child { color:#06b6d4; }
.on-first\:border-color-cyan-500:first-child { border-color:#06b6d4; }
.on-first\:background-cyan-600:first-child { background-color:#0891b2; }
.on-first\:color-cyan-600:first-child { color:#0891b2; }
.on-first\:border-color-cyan-600:first-child { border-color:#0891b2; }
.on-first\:background-cyan-700:first-child { background-color:#0e7490; }
.on-first\:color-cyan-700:first-child { color:#0e7490; }
.on-first\:border-color-cyan-700:first-child { border-color:#0e7490; }
.on-first\:background-blue-300:first-child { background-color:#93c5fd; }
.on-first\:color-blue-300:first-child { color:#93c5fd; }
.on-first\:border-color-blue-300:first-child { border-color:#93c5fd; }
.on-first\:background-blue-400:first-child { background-color:#60a5fa; }
.on-first\:color-blue-400:first-child { color:#60a5fa; }
.on-first\:border-color-blue-400:first-child { border-color:#60a5fa; }
.on-first\:background-blue-500:first-child { background-color:#3b82f6; }
.on-first\:color-blue-500:first-child { color:#3b82f6; }
.on-first\:border-color-blue-500:first-child { border-color:#3b82f6; }
.on-first\:background-blue-600:first-child { background-color:#2563eb; }
.on-first\:color-blue-600:first-child { color:#2563eb; }
.on-first\:border-color-blue-600:first-child { border-color:#2563eb; }
.on-first\:background-blue-700:first-child { background-color:#1d4ed8; }
.on-first\:color-blue-700:first-child { color:#1d4ed8; }
.on-first\:border-color-blue-700:first-child { border-color:#1d4ed8; }
.on-first\:background-indigo-300:first-child { background-color:#a5b4fc; }
.on-first\:color-indigo-300:first-child { color:#a5b4fc; }
.on-first\:border-color-indigo-300:first-child { border-color:#a5b4fc; }
.on-first\:background-indigo-400:first-child { background-color:#818cf8; }
.on-first\:color-indigo-400:first-child { color:#818cf8; }
.on-first\:border-color-indigo-400:first-child { border-color:#818cf8; }
.on-first\:background-indigo-500:first-child { background-color:#6366f1; }
.on-first\:color-indigo-500:first-child { color:#6366f1; }
.on-first\:border-color-indigo-500:first-child { border-color:#6366f1; }
.on-first\:background-indigo-600:first-child { background-color:#4f46e5; }
.on-first\:color-indigo-600:first-child { color:#4f46e5; }
.on-first\:border-color-indigo-600:first-child { border-color:#4f46e5; }
.on-first\:background-indigo-700:first-child { background-color:#4338ca; }
.on-first\:color-indigo-700:first-child { color:#4338ca; }
.on-first\:border-color-indigo-700:first-child { border-color:#4338ca; }
.on-first\:background-violet-300:first-child { background-color:#c4b5fd; }
.on-first\:color-violet-300:first-child { color:#c4b5fd; }
.on-first\:border-color-violet-300:first-child { border-color:#c4b5fd; }
.on-first\:background-violet-400:first-child { background-color:#a78bfa; }
.on-first\:color-violet-400:first-child { color:#a78bfa; }
.on-first\:border-color-violet-400:first-child { border-color:#a78bfa; }
.on-first\:background-violet-500:first-child { background-color:#8b5cf6; }
.on-first\:color-violet-500:first-child { color:#8b5cf6; }
.on-first\:border-color-violet-500:first-child { border-color:#8b5cf6; }
.on-first\:background-violet-600:first-child { background-color:#7c3aed; }
.on-first\:color-violet-600:first-child { color:#7c3aed; }
.on-first\:border-color-violet-600:first-child { border-color:#7c3aed; }
.on-first\:background-violet-700:first-child { background-color:#6d28d9; }
.on-first\:color-violet-700:first-child { color:#6d28d9; }
.on-first\:border-color-violet-700:first-child { border-color:#6d28d9; }
.on-first\:background-purple-300:first-child { background-color:#d8b4fe; }
.on-first\:color-purple-300:first-child { color:#d8b4fe; }
.on-first\:border-color-purple-300:first-child { border-color:#d8b4fe; }
.on-first\:background-purple-400:first-child { background-color:#c084fc; }
.on-first\:color-purple-400:first-child { color:#c084fc; }
.on-first\:border-color-purple-400:first-child { border-color:#c084fc; }
.on-first\:background-purple-500:first-child { background-color:#a855f7; }
.on-first\:color-purple-500:first-child { color:#a855f7; }
.on-first\:border-color-purple-500:first-child { border-color:#a855f7; }
.on-first\:background-purple-600:first-child { background-color:#9333ea; }
.on-first\:color-purple-600:first-child { color:#9333ea; }
.on-first\:border-color-purple-600:first-child { border-color:#9333ea; }
.on-first\:background-purple-700:first-child { background-color:#7e22ce; }
.on-first\:color-purple-700:first-child { color:#7e22ce; }
.on-first\:border-color-purple-700:first-child { border-color:#7e22ce; }
.on-first\:background-pink-300:first-child { background-color:#f9a8d4; }
.on-first\:color-pink-300:first-child { color:#f9a8d4; }
.on-first\:border-color-pink-300:first-child { border-color:#f9a8d4; }
.on-first\:background-pink-400:first-child { background-color:#f472b6; }
.on-first\:color-pink-400:first-child { color:#f472b6; }
.on-first\:border-color-pink-400:first-child { border-color:#f472b6; }
.on-first\:background-pink-500:first-child { background-color:#ec4899; }
.on-first\:color-pink-500:first-child { color:#ec4899; }
.on-first\:border-color-pink-500:first-child { border-color:#ec4899; }
.on-first\:background-pink-600:first-child { background-color:#db2777; }
.on-first\:color-pink-600:first-child { color:#db2777; }
.on-first\:border-color-pink-600:first-child { border-color:#db2777; }
.on-first\:background-pink-700:first-child { background-color:#be185d; }
.on-first\:color-pink-700:first-child { color:#be185d; }
.on-first\:border-color-pink-700:first-child { border-color:#be185d; }
.on-first\:background-rose-300:first-child { background-color:#fda4af; }
.on-first\:color-rose-300:first-child { color:#fda4af; }
.on-first\:border-color-rose-300:first-child { border-color:#fda4af; }
.on-first\:background-rose-400:first-child { background-color:#fb7185; }
.on-first\:color-rose-400:first-child { color:#fb7185; }
.on-first\:border-color-rose-400:first-child { border-color:#fb7185; }
.on-first\:background-rose-500:first-child { background-color:#f43f5e; }
.on-first\:color-rose-500:first-child { color:#f43f5e; }
.on-first\:border-color-rose-500:first-child { border-color:#f43f5e; }
.on-first\:background-rose-600:first-child { background-color:#e11d48; }
.on-first\:color-rose-600:first-child { color:#e11d48; }
.on-first\:border-color-rose-600:first-child { border-color:#e11d48; }
.on-first\:background-rose-700:first-child { background-color:#be123c; }
.on-first\:color-rose-700:first-child { color:#be123c; }
.on-first\:border-color-rose-700:first-child { border-color:#be123c; }
.on-first\:background-slate-300:first-child { background-color:#cbd5e1; }
.on-first\:color-slate-300:first-child { color:#cbd5e1; }
.on-first\:border-color-slate-300:first-child { border-color:#cbd5e1; }
.on-first\:background-slate-400:first-child { background-color:#94a3b8; }
.on-first\:color-slate-400:first-child { color:#94a3b8; }
.on-first\:border-color-slate-400:first-child { border-color:#94a3b8; }
.on-first\:background-slate-500:first-child { background-color:#64748b; }
.on-first\:color-slate-500:first-child { color:#64748b; }
.on-first\:border-color-slate-500:first-child { border-color:#64748b; }
.on-first\:background-slate-600:first-child { background-color:#475569; }
.on-first\:color-slate-600:first-child { color:#475569; }
.on-first\:border-color-slate-600:first-child { border-color:#475569; }
.on-first\:background-slate-700:first-child { background-color:#334155; }
.on-first\:color-slate-700:first-child { color:#334155; }
.on-first\:border-color-slate-700:first-child { border-color:#334155; }
.on-first\:background-gray-300:first-child { background-color:#d1d5db; }
.on-first\:color-gray-300:first-child { color:#d1d5db; }
.on-first\:border-color-gray-300:first-child { border-color:#d1d5db; }
.on-first\:background-gray-400:first-child { background-color:#9ca3af; }
.on-first\:color-gray-400:first-child { color:#9ca3af; }
.on-first\:border-color-gray-400:first-child { border-color:#9ca3af; }
.on-first\:background-gray-500:first-child { background-color:#6b7280; }
.on-first\:color-gray-500:first-child { color:#6b7280; }
.on-first\:border-color-gray-500:first-child { border-color:#6b7280; }
.on-first\:background-gray-600:first-child { background-color:#4b5563; }
.on-first\:color-gray-600:first-child { color:#4b5563; }
.on-first\:border-color-gray-600:first-child { border-color:#4b5563; }
.on-first\:background-gray-700:first-child { background-color:#374151; }
.on-first\:color-gray-700:first-child { color:#374151; }
.on-first\:border-color-gray-700:first-child { border-color:#374151; }
.on-first\:background-zinc-300:first-child { background-color:#d4d4d8; }
.on-first\:color-zinc-300:first-child { color:#d4d4d8; }
.on-first\:border-color-zinc-300:first-child { border-color:#d4d4d8; }
.on-first\:background-zinc-400:first-child { background-color:#a1a1aa; }
.on-first\:color-zinc-400:first-child { color:#a1a1aa; }
.on-first\:border-color-zinc-400:first-child { border-color:#a1a1aa; }
.on-first\:background-zinc-500:first-child { background-color:#71717a; }
.on-first\:color-zinc-500:first-child { color:#71717a; }
.on-first\:border-color-zinc-500:first-child { border-color:#71717a; }
.on-first\:background-zinc-600:first-child { background-color:#52525b; }
.on-first\:color-zinc-600:first-child { color:#52525b; }
.on-first\:border-color-zinc-600:first-child { border-color:#52525b; }
.on-first\:background-zinc-700:first-child { background-color:#3f3f46; }
.on-first\:color-zinc-700:first-child { color:#3f3f46; }
.on-first\:border-color-zinc-700:first-child { border-color:#3f3f46; }
.on-first\:background-stone-300:first-child { background-color:#d6d3d1; }
.on-first\:color-stone-300:first-child { color:#d6d3d1; }
.on-first\:border-color-stone-300:first-child { border-color:#d6d3d1; }
.on-first\:background-stone-400:first-child { background-color:#a8a29e; }
.on-first\:color-stone-400:first-child { color:#a8a29e; }
.on-first\:border-color-stone-400:first-child { border-color:#a8a29e; }
.on-first\:background-stone-500:first-child { background-color:#78716c; }
.on-first\:color-stone-500:first-child { color:#78716c; }
.on-first\:border-color-stone-500:first-child { border-color:#78716c; }
.on-first\:background-stone-600:first-child { background-color:#57534e; }
.on-first\:color-stone-600:first-child { color:#57534e; }
.on-first\:border-color-stone-600:first-child { border-color:#57534e; }
.on-first\:background-stone-700:first-child { background-color:#44403c; }
.on-first\:color-stone-700:first-child { color:#44403c; }
.on-first\:border-color-stone-700:first-child { border-color:#44403c; }
.on-first\:add-shadow-sm:first-child { box-shadow:var(--santy-shadow-sm); }
.on-first\:add-shadow:first-child { box-shadow:var(--santy-shadow); }
.on-first\:add-shadow-md:first-child { box-shadow:var(--santy-shadow-md); }
.on-first\:add-shadow-lg:first-child { box-shadow:var(--santy-shadow-lg); }
.on-first\:no-shadow:first-child { box-shadow:none; }
.on-first\:opacity-0:first-child { opacity:0; }
.on-first\:opacity-25:first-child { opacity:0.25; }
.on-first\:opacity-50:first-child { opacity:0.5; }
.on-first\:opacity-75:first-child { opacity:0.75; }
.on-first\:opacity-100:first-child { opacity:1; }
.on-first\:scale-90:first-child { transform:scale(0.9); }
.on-first\:scale-95:first-child { transform:scale(0.95); }
.on-first\:scale-100:first-child { transform:scale(1); }
.on-first\:scale-105:first-child { transform:scale(1.05); }
.on-first\:scale-110:first-child { transform:scale(1.1); }
.on-first\:make-hidden:first-child { display:none; }
.on-first\:make-block:first-child { display:block; }
.on-first\:make-flex:first-child { display:flex; }
.on-first\:cursor-pointer:first-child { cursor:pointer; }
.on-first\:cursor-not-allowed:first-child { cursor:not-allowed; }
.on-first\:outline-none:first-child { outline:none; }
.on-first\:text-underline:first-child { text-decoration:underline; }
.on-first\:text-no-decoration:first-child { text-decoration:none; }
.on-first\:text-bold:first-child { font-weight:700; }
.on-first\:transition-fast:first-child { transition:var(--santy-transition-fast); }
.on-first\:transition-normal:first-child { transition:var(--santy-transition-normal); }
.on-first\:add-border-1:first-child { border:1px solid; }
.on-first\:add-border-2:first-child { border:2px solid; }
.on-first\:add-border-4:first-child { border:4px solid; }

/* on-last */
.on-last\:background-red-300:last-child { background-color:#fca5a5; }
.on-last\:color-red-300:last-child { color:#fca5a5; }
.on-last\:border-color-red-300:last-child { border-color:#fca5a5; }
.on-last\:background-red-400:last-child { background-color:#f87171; }
.on-last\:color-red-400:last-child { color:#f87171; }
.on-last\:border-color-red-400:last-child { border-color:#f87171; }
.on-last\:background-red-500:last-child { background-color:#ef4444; }
.on-last\:color-red-500:last-child { color:#ef4444; }
.on-last\:border-color-red-500:last-child { border-color:#ef4444; }
.on-last\:background-red-600:last-child { background-color:#dc2626; }
.on-last\:color-red-600:last-child { color:#dc2626; }
.on-last\:border-color-red-600:last-child { border-color:#dc2626; }
.on-last\:background-red-700:last-child { background-color:#b91c1c; }
.on-last\:color-red-700:last-child { color:#b91c1c; }
.on-last\:border-color-red-700:last-child { border-color:#b91c1c; }
.on-last\:background-orange-300:last-child { background-color:#fdba74; }
.on-last\:color-orange-300:last-child { color:#fdba74; }
.on-last\:border-color-orange-300:last-child { border-color:#fdba74; }
.on-last\:background-orange-400:last-child { background-color:#fb923c; }
.on-last\:color-orange-400:last-child { color:#fb923c; }
.on-last\:border-color-orange-400:last-child { border-color:#fb923c; }
.on-last\:background-orange-500:last-child { background-color:#f97316; }
.on-last\:color-orange-500:last-child { color:#f97316; }
.on-last\:border-color-orange-500:last-child { border-color:#f97316; }
.on-last\:background-orange-600:last-child { background-color:#ea580c; }
.on-last\:color-orange-600:last-child { color:#ea580c; }
.on-last\:border-color-orange-600:last-child { border-color:#ea580c; }
.on-last\:background-orange-700:last-child { background-color:#c2410c; }
.on-last\:color-orange-700:last-child { color:#c2410c; }
.on-last\:border-color-orange-700:last-child { border-color:#c2410c; }
.on-last\:background-amber-300:last-child { background-color:#fcd34d; }
.on-last\:color-amber-300:last-child { color:#fcd34d; }
.on-last\:border-color-amber-300:last-child { border-color:#fcd34d; }
.on-last\:background-amber-400:last-child { background-color:#fbbf24; }
.on-last\:color-amber-400:last-child { color:#fbbf24; }
.on-last\:border-color-amber-400:last-child { border-color:#fbbf24; }
.on-last\:background-amber-500:last-child { background-color:#f59e0b; }
.on-last\:color-amber-500:last-child { color:#f59e0b; }
.on-last\:border-color-amber-500:last-child { border-color:#f59e0b; }
.on-last\:background-amber-600:last-child { background-color:#d97706; }
.on-last\:color-amber-600:last-child { color:#d97706; }
.on-last\:border-color-amber-600:last-child { border-color:#d97706; }
.on-last\:background-amber-700:last-child { background-color:#b45309; }
.on-last\:color-amber-700:last-child { color:#b45309; }
.on-last\:border-color-amber-700:last-child { border-color:#b45309; }
.on-last\:background-yellow-300:last-child { background-color:#fde047; }
.on-last\:color-yellow-300:last-child { color:#fde047; }
.on-last\:border-color-yellow-300:last-child { border-color:#fde047; }
.on-last\:background-yellow-400:last-child { background-color:#facc15; }
.on-last\:color-yellow-400:last-child { color:#facc15; }
.on-last\:border-color-yellow-400:last-child { border-color:#facc15; }
.on-last\:background-yellow-500:last-child { background-color:#eab308; }
.on-last\:color-yellow-500:last-child { color:#eab308; }
.on-last\:border-color-yellow-500:last-child { border-color:#eab308; }
.on-last\:background-yellow-600:last-child { background-color:#ca8a04; }
.on-last\:color-yellow-600:last-child { color:#ca8a04; }
.on-last\:border-color-yellow-600:last-child { border-color:#ca8a04; }
.on-last\:background-yellow-700:last-child { background-color:#a16207; }
.on-last\:color-yellow-700:last-child { color:#a16207; }
.on-last\:border-color-yellow-700:last-child { border-color:#a16207; }
.on-last\:background-lime-300:last-child { background-color:#bef264; }
.on-last\:color-lime-300:last-child { color:#bef264; }
.on-last\:border-color-lime-300:last-child { border-color:#bef264; }
.on-last\:background-lime-400:last-child { background-color:#a3e635; }
.on-last\:color-lime-400:last-child { color:#a3e635; }
.on-last\:border-color-lime-400:last-child { border-color:#a3e635; }
.on-last\:background-lime-500:last-child { background-color:#84cc16; }
.on-last\:color-lime-500:last-child { color:#84cc16; }
.on-last\:border-color-lime-500:last-child { border-color:#84cc16; }
.on-last\:background-lime-600:last-child { background-color:#65a30d; }
.on-last\:color-lime-600:last-child { color:#65a30d; }
.on-last\:border-color-lime-600:last-child { border-color:#65a30d; }
.on-last\:background-lime-700:last-child { background-color:#4d7c0f; }
.on-last\:color-lime-700:last-child { color:#4d7c0f; }
.on-last\:border-color-lime-700:last-child { border-color:#4d7c0f; }
.on-last\:background-green-300:last-child { background-color:#86efac; }
.on-last\:color-green-300:last-child { color:#86efac; }
.on-last\:border-color-green-300:last-child { border-color:#86efac; }
.on-last\:background-green-400:last-child { background-color:#4ade80; }
.on-last\:color-green-400:last-child { color:#4ade80; }
.on-last\:border-color-green-400:last-child { border-color:#4ade80; }
.on-last\:background-green-500:last-child { background-color:#22c55e; }
.on-last\:color-green-500:last-child { color:#22c55e; }
.on-last\:border-color-green-500:last-child { border-color:#22c55e; }
.on-last\:background-green-600:last-child { background-color:#16a34a; }
.on-last\:color-green-600:last-child { color:#16a34a; }
.on-last\:border-color-green-600:last-child { border-color:#16a34a; }
.on-last\:background-green-700:last-child { background-color:#15803d; }
.on-last\:color-green-700:last-child { color:#15803d; }
.on-last\:border-color-green-700:last-child { border-color:#15803d; }
.on-last\:background-teal-300:last-child { background-color:#5eead4; }
.on-last\:color-teal-300:last-child { color:#5eead4; }
.on-last\:border-color-teal-300:last-child { border-color:#5eead4; }
.on-last\:background-teal-400:last-child { background-color:#2dd4bf; }
.on-last\:color-teal-400:last-child { color:#2dd4bf; }
.on-last\:border-color-teal-400:last-child { border-color:#2dd4bf; }
.on-last\:background-teal-500:last-child { background-color:#14b8a6; }
.on-last\:color-teal-500:last-child { color:#14b8a6; }
.on-last\:border-color-teal-500:last-child { border-color:#14b8a6; }
.on-last\:background-teal-600:last-child { background-color:#0d9488; }
.on-last\:color-teal-600:last-child { color:#0d9488; }
.on-last\:border-color-teal-600:last-child { border-color:#0d9488; }
.on-last\:background-teal-700:last-child { background-color:#0f766e; }
.on-last\:color-teal-700:last-child { color:#0f766e; }
.on-last\:border-color-teal-700:last-child { border-color:#0f766e; }
.on-last\:background-cyan-300:last-child { background-color:#67e8f9; }
.on-last\:color-cyan-300:last-child { color:#67e8f9; }
.on-last\:border-color-cyan-300:last-child { border-color:#67e8f9; }
.on-last\:background-cyan-400:last-child { background-color:#22d3ee; }
.on-last\:color-cyan-400:last-child { color:#22d3ee; }
.on-last\:border-color-cyan-400:last-child { border-color:#22d3ee; }
.on-last\:background-cyan-500:last-child { background-color:#06b6d4; }
.on-last\:color-cyan-500:last-child { color:#06b6d4; }
.on-last\:border-color-cyan-500:last-child { border-color:#06b6d4; }
.on-last\:background-cyan-600:last-child { background-color:#0891b2; }
.on-last\:color-cyan-600:last-child { color:#0891b2; }
.on-last\:border-color-cyan-600:last-child { border-color:#0891b2; }
.on-last\:background-cyan-700:last-child { background-color:#0e7490; }
.on-last\:color-cyan-700:last-child { color:#0e7490; }
.on-last\:border-color-cyan-700:last-child { border-color:#0e7490; }
.on-last\:background-blue-300:last-child { background-color:#93c5fd; }
.on-last\:color-blue-300:last-child { color:#93c5fd; }
.on-last\:border-color-blue-300:last-child { border-color:#93c5fd; }
.on-last\:background-blue-400:last-child { background-color:#60a5fa; }
.on-last\:color-blue-400:last-child { color:#60a5fa; }
.on-last\:border-color-blue-400:last-child { border-color:#60a5fa; }
.on-last\:background-blue-500:last-child { background-color:#3b82f6; }
.on-last\:color-blue-500:last-child { color:#3b82f6; }
.on-last\:border-color-blue-500:last-child { border-color:#3b82f6; }
.on-last\:background-blue-600:last-child { background-color:#2563eb; }
.on-last\:color-blue-600:last-child { color:#2563eb; }
.on-last\:border-color-blue-600:last-child { border-color:#2563eb; }
.on-last\:background-blue-700:last-child { background-color:#1d4ed8; }
.on-last\:color-blue-700:last-child { color:#1d4ed8; }
.on-last\:border-color-blue-700:last-child { border-color:#1d4ed8; }
.on-last\:background-indigo-300:last-child { background-color:#a5b4fc; }
.on-last\:color-indigo-300:last-child { color:#a5b4fc; }
.on-last\:border-color-indigo-300:last-child { border-color:#a5b4fc; }
.on-last\:background-indigo-400:last-child { background-color:#818cf8; }
.on-last\:color-indigo-400:last-child { color:#818cf8; }
.on-last\:border-color-indigo-400:last-child { border-color:#818cf8; }
.on-last\:background-indigo-500:last-child { background-color:#6366f1; }
.on-last\:color-indigo-500:last-child { color:#6366f1; }
.on-last\:border-color-indigo-500:last-child { border-color:#6366f1; }
.on-last\:background-indigo-600:last-child { background-color:#4f46e5; }
.on-last\:color-indigo-600:last-child { color:#4f46e5; }
.on-last\:border-color-indigo-600:last-child { border-color:#4f46e5; }
.on-last\:background-indigo-700:last-child { background-color:#4338ca; }
.on-last\:color-indigo-700:last-child { color:#4338ca; }
.on-last\:border-color-indigo-700:last-child { border-color:#4338ca; }
.on-last\:background-violet-300:last-child { background-color:#c4b5fd; }
.on-last\:color-violet-300:last-child { color:#c4b5fd; }
.on-last\:border-color-violet-300:last-child { border-color:#c4b5fd; }
.on-last\:background-violet-400:last-child { background-color:#a78bfa; }
.on-last\:color-violet-400:last-child { color:#a78bfa; }
.on-last\:border-color-violet-400:last-child { border-color:#a78bfa; }
.on-last\:background-violet-500:last-child { background-color:#8b5cf6; }
.on-last\:color-violet-500:last-child { color:#8b5cf6; }
.on-last\:border-color-violet-500:last-child { border-color:#8b5cf6; }
.on-last\:background-violet-600:last-child { background-color:#7c3aed; }
.on-last\:color-violet-600:last-child { color:#7c3aed; }
.on-last\:border-color-violet-600:last-child { border-color:#7c3aed; }
.on-last\:background-violet-700:last-child { background-color:#6d28d9; }
.on-last\:color-violet-700:last-child { color:#6d28d9; }
.on-last\:border-color-violet-700:last-child { border-color:#6d28d9; }
.on-last\:background-purple-300:last-child { background-color:#d8b4fe; }
.on-last\:color-purple-300:last-child { color:#d8b4fe; }
.on-last\:border-color-purple-300:last-child { border-color:#d8b4fe; }
.on-last\:background-purple-400:last-child { background-color:#c084fc; }
.on-last\:color-purple-400:last-child { color:#c084fc; }
.on-last\:border-color-purple-400:last-child { border-color:#c084fc; }
.on-last\:background-purple-500:last-child { background-color:#a855f7; }
.on-last\:color-purple-500:last-child { color:#a855f7; }
.on-last\:border-color-purple-500:last-child { border-color:#a855f7; }
.on-last\:background-purple-600:last-child { background-color:#9333ea; }
.on-last\:color-purple-600:last-child { color:#9333ea; }
.on-last\:border-color-purple-600:last-child { border-color:#9333ea; }
.on-last\:background-purple-700:last-child { background-color:#7e22ce; }
.on-last\:color-purple-700:last-child { color:#7e22ce; }
.on-last\:border-color-purple-700:last-child { border-color:#7e22ce; }
.on-last\:background-pink-300:last-child { background-color:#f9a8d4; }
.on-last\:color-pink-300:last-child { color:#f9a8d4; }
.on-last\:border-color-pink-300:last-child { border-color:#f9a8d4; }
.on-last\:background-pink-400:last-child { background-color:#f472b6; }
.on-last\:color-pink-400:last-child { color:#f472b6; }
.on-last\:border-color-pink-400:last-child { border-color:#f472b6; }
.on-last\:background-pink-500:last-child { background-color:#ec4899; }
.on-last\:color-pink-500:last-child { color:#ec4899; }
.on-last\:border-color-pink-500:last-child { border-color:#ec4899; }
.on-last\:background-pink-600:last-child { background-color:#db2777; }
.on-last\:color-pink-600:last-child { color:#db2777; }
.on-last\:border-color-pink-600:last-child { border-color:#db2777; }
.on-last\:background-pink-700:last-child { background-color:#be185d; }
.on-last\:color-pink-700:last-child { color:#be185d; }
.on-last\:border-color-pink-700:last-child { border-color:#be185d; }
.on-last\:background-rose-300:last-child { background-color:#fda4af; }
.on-last\:color-rose-300:last-child { color:#fda4af; }
.on-last\:border-color-rose-300:last-child { border-color:#fda4af; }
.on-last\:background-rose-400:last-child { background-color:#fb7185; }
.on-last\:color-rose-400:last-child { color:#fb7185; }
.on-last\:border-color-rose-400:last-child { border-color:#fb7185; }
.on-last\:background-rose-500:last-child { background-color:#f43f5e; }
.on-last\:color-rose-500:last-child { color:#f43f5e; }
.on-last\:border-color-rose-500:last-child { border-color:#f43f5e; }
.on-last\:background-rose-600:last-child { background-color:#e11d48; }
.on-last\:color-rose-600:last-child { color:#e11d48; }
.on-last\:border-color-rose-600:last-child { border-color:#e11d48; }
.on-last\:background-rose-700:last-child { background-color:#be123c; }
.on-last\:color-rose-700:last-child { color:#be123c; }
.on-last\:border-color-rose-700:last-child { border-color:#be123c; }
.on-last\:background-slate-300:last-child { background-color:#cbd5e1; }
.on-last\:color-slate-300:last-child { color:#cbd5e1; }
.on-last\:border-color-slate-300:last-child { border-color:#cbd5e1; }
.on-last\:background-slate-400:last-child { background-color:#94a3b8; }
.on-last\:color-slate-400:last-child { color:#94a3b8; }
.on-last\:border-color-slate-400:last-child { border-color:#94a3b8; }
.on-last\:background-slate-500:last-child { background-color:#64748b; }
.on-last\:color-slate-500:last-child { color:#64748b; }
.on-last\:border-color-slate-500:last-child { border-color:#64748b; }
.on-last\:background-slate-600:last-child { background-color:#475569; }
.on-last\:color-slate-600:last-child { color:#475569; }
.on-last\:border-color-slate-600:last-child { border-color:#475569; }
.on-last\:background-slate-700:last-child { background-color:#334155; }
.on-last\:color-slate-700:last-child { color:#334155; }
.on-last\:border-color-slate-700:last-child { border-color:#334155; }
.on-last\:background-gray-300:last-child { background-color:#d1d5db; }
.on-last\:color-gray-300:last-child { color:#d1d5db; }
.on-last\:border-color-gray-300:last-child { border-color:#d1d5db; }
.on-last\:background-gray-400:last-child { background-color:#9ca3af; }
.on-last\:color-gray-400:last-child { color:#9ca3af; }
.on-last\:border-color-gray-400:last-child { border-color:#9ca3af; }
.on-last\:background-gray-500:last-child { background-color:#6b7280; }
.on-last\:color-gray-500:last-child { color:#6b7280; }
.on-last\:border-color-gray-500:last-child { border-color:#6b7280; }
.on-last\:background-gray-600:last-child { background-color:#4b5563; }
.on-last\:color-gray-600:last-child { color:#4b5563; }
.on-last\:border-color-gray-600:last-child { border-color:#4b5563; }
.on-last\:background-gray-700:last-child { background-color:#374151; }
.on-last\:color-gray-700:last-child { color:#374151; }
.on-last\:border-color-gray-700:last-child { border-color:#374151; }
.on-last\:background-zinc-300:last-child { background-color:#d4d4d8; }
.on-last\:color-zinc-300:last-child { color:#d4d4d8; }
.on-last\:border-color-zinc-300:last-child { border-color:#d4d4d8; }
.on-last\:background-zinc-400:last-child { background-color:#a1a1aa; }
.on-last\:color-zinc-400:last-child { color:#a1a1aa; }
.on-last\:border-color-zinc-400:last-child { border-color:#a1a1aa; }
.on-last\:background-zinc-500:last-child { background-color:#71717a; }
.on-last\:color-zinc-500:last-child { color:#71717a; }
.on-last\:border-color-zinc-500:last-child { border-color:#71717a; }
.on-last\:background-zinc-600:last-child { background-color:#52525b; }
.on-last\:color-zinc-600:last-child { color:#52525b; }
.on-last\:border-color-zinc-600:last-child { border-color:#52525b; }
.on-last\:background-zinc-700:last-child { background-color:#3f3f46; }
.on-last\:color-zinc-700:last-child { color:#3f3f46; }
.on-last\:border-color-zinc-700:last-child { border-color:#3f3f46; }
.on-last\:background-stone-300:last-child { background-color:#d6d3d1; }
.on-last\:color-stone-300:last-child { color:#d6d3d1; }
.on-last\:border-color-stone-300:last-child { border-color:#d6d3d1; }
.on-last\:background-stone-400:last-child { background-color:#a8a29e; }
.on-last\:color-stone-400:last-child { color:#a8a29e; }
.on-last\:border-color-stone-400:last-child { border-color:#a8a29e; }
.on-last\:background-stone-500:last-child { background-color:#78716c; }
.on-last\:color-stone-500:last-child { color:#78716c; }
.on-last\:border-color-stone-500:last-child { border-color:#78716c; }
.on-last\:background-stone-600:last-child { background-color:#57534e; }
.on-last\:color-stone-600:last-child { color:#57534e; }
.on-last\:border-color-stone-600:last-child { border-color:#57534e; }
.on-last\:background-stone-700:last-child { background-color:#44403c; }
.on-last\:color-stone-700:last-child { color:#44403c; }
.on-last\:border-color-stone-700:last-child { border-color:#44403c; }
.on-last\:add-shadow-sm:last-child { box-shadow:var(--santy-shadow-sm); }
.on-last\:add-shadow:last-child { box-shadow:var(--santy-shadow); }
.on-last\:add-shadow-md:last-child { box-shadow:var(--santy-shadow-md); }
.on-last\:add-shadow-lg:last-child { box-shadow:var(--santy-shadow-lg); }
.on-last\:no-shadow:last-child { box-shadow:none; }
.on-last\:opacity-0:last-child { opacity:0; }
.on-last\:opacity-25:last-child { opacity:0.25; }
.on-last\:opacity-50:last-child { opacity:0.5; }
.on-last\:opacity-75:last-child { opacity:0.75; }
.on-last\:opacity-100:last-child { opacity:1; }
.on-last\:scale-90:last-child { transform:scale(0.9); }
.on-last\:scale-95:last-child { transform:scale(0.95); }
.on-last\:scale-100:last-child { transform:scale(1); }
.on-last\:scale-105:last-child { transform:scale(1.05); }
.on-last\:scale-110:last-child { transform:scale(1.1); }
.on-last\:make-hidden:last-child { display:none; }
.on-last\:make-block:last-child { display:block; }
.on-last\:make-flex:last-child { display:flex; }
.on-last\:cursor-pointer:last-child { cursor:pointer; }
.on-last\:cursor-not-allowed:last-child { cursor:not-allowed; }
.on-last\:outline-none:last-child { outline:none; }
.on-last\:text-underline:last-child { text-decoration:underline; }
.on-last\:text-no-decoration:last-child { text-decoration:none; }
.on-last\:text-bold:last-child { font-weight:700; }
.on-last\:transition-fast:last-child { transition:var(--santy-transition-fast); }
.on-last\:transition-normal:last-child { transition:var(--santy-transition-normal); }
.on-last\:add-border-1:last-child { border:1px solid; }
.on-last\:add-border-2:last-child { border:2px solid; }
.on-last\:add-border-4:last-child { border:4px solid; }

/* on-odd */
.on-odd\:background-red-300:nth-child(odd) { background-color:#fca5a5; }
.on-odd\:color-red-300:nth-child(odd) { color:#fca5a5; }
.on-odd\:border-color-red-300:nth-child(odd) { border-color:#fca5a5; }
.on-odd\:background-red-400:nth-child(odd) { background-color:#f87171; }
.on-odd\:color-red-400:nth-child(odd) { color:#f87171; }
.on-odd\:border-color-red-400:nth-child(odd) { border-color:#f87171; }
.on-odd\:background-red-500:nth-child(odd) { background-color:#ef4444; }
.on-odd\:color-red-500:nth-child(odd) { color:#ef4444; }
.on-odd\:border-color-red-500:nth-child(odd) { border-color:#ef4444; }
.on-odd\:background-red-600:nth-child(odd) { background-color:#dc2626; }
.on-odd\:color-red-600:nth-child(odd) { color:#dc2626; }
.on-odd\:border-color-red-600:nth-child(odd) { border-color:#dc2626; }
.on-odd\:background-red-700:nth-child(odd) { background-color:#b91c1c; }
.on-odd\:color-red-700:nth-child(odd) { color:#b91c1c; }
.on-odd\:border-color-red-700:nth-child(odd) { border-color:#b91c1c; }
.on-odd\:background-orange-300:nth-child(odd) { background-color:#fdba74; }
.on-odd\:color-orange-300:nth-child(odd) { color:#fdba74; }
.on-odd\:border-color-orange-300:nth-child(odd) { border-color:#fdba74; }
.on-odd\:background-orange-400:nth-child(odd) { background-color:#fb923c; }
.on-odd\:color-orange-400:nth-child(odd) { color:#fb923c; }
.on-odd\:border-color-orange-400:nth-child(odd) { border-color:#fb923c; }
.on-odd\:background-orange-500:nth-child(odd) { background-color:#f97316; }
.on-odd\:color-orange-500:nth-child(odd) { color:#f97316; }
.on-odd\:border-color-orange-500:nth-child(odd) { border-color:#f97316; }
.on-odd\:background-orange-600:nth-child(odd) { background-color:#ea580c; }
.on-odd\:color-orange-600:nth-child(odd) { color:#ea580c; }
.on-odd\:border-color-orange-600:nth-child(odd) { border-color:#ea580c; }
.on-odd\:background-orange-700:nth-child(odd) { background-color:#c2410c; }
.on-odd\:color-orange-700:nth-child(odd) { color:#c2410c; }
.on-odd\:border-color-orange-700:nth-child(odd) { border-color:#c2410c; }
.on-odd\:background-amber-300:nth-child(odd) { background-color:#fcd34d; }
.on-odd\:color-amber-300:nth-child(odd) { color:#fcd34d; }
.on-odd\:border-color-amber-300:nth-child(odd) { border-color:#fcd34d; }
.on-odd\:background-amber-400:nth-child(odd) { background-color:#fbbf24; }
.on-odd\:color-amber-400:nth-child(odd) { color:#fbbf24; }
.on-odd\:border-color-amber-400:nth-child(odd) { border-color:#fbbf24; }
.on-odd\:background-amber-500:nth-child(odd) { background-color:#f59e0b; }
.on-odd\:color-amber-500:nth-child(odd) { color:#f59e0b; }
.on-odd\:border-color-amber-500:nth-child(odd) { border-color:#f59e0b; }
.on-odd\:background-amber-600:nth-child(odd) { background-color:#d97706; }
.on-odd\:color-amber-600:nth-child(odd) { color:#d97706; }
.on-odd\:border-color-amber-600:nth-child(odd) { border-color:#d97706; }
.on-odd\:background-amber-700:nth-child(odd) { background-color:#b45309; }
.on-odd\:color-amber-700:nth-child(odd) { color:#b45309; }
.on-odd\:border-color-amber-700:nth-child(odd) { border-color:#b45309; }
.on-odd\:background-yellow-300:nth-child(odd) { background-color:#fde047; }
.on-odd\:color-yellow-300:nth-child(odd) { color:#fde047; }
.on-odd\:border-color-yellow-300:nth-child(odd) { border-color:#fde047; }
.on-odd\:background-yellow-400:nth-child(odd) { background-color:#facc15; }
.on-odd\:color-yellow-400:nth-child(odd) { color:#facc15; }
.on-odd\:border-color-yellow-400:nth-child(odd) { border-color:#facc15; }
.on-odd\:background-yellow-500:nth-child(odd) { background-color:#eab308; }
.on-odd\:color-yellow-500:nth-child(odd) { color:#eab308; }
.on-odd\:border-color-yellow-500:nth-child(odd) { border-color:#eab308; }
.on-odd\:background-yellow-600:nth-child(odd) { background-color:#ca8a04; }
.on-odd\:color-yellow-600:nth-child(odd) { color:#ca8a04; }
.on-odd\:border-color-yellow-600:nth-child(odd) { border-color:#ca8a04; }
.on-odd\:background-yellow-700:nth-child(odd) { background-color:#a16207; }
.on-odd\:color-yellow-700:nth-child(odd) { color:#a16207; }
.on-odd\:border-color-yellow-700:nth-child(odd) { border-color:#a16207; }
.on-odd\:background-lime-300:nth-child(odd) { background-color:#bef264; }
.on-odd\:color-lime-300:nth-child(odd) { color:#bef264; }
.on-odd\:border-color-lime-300:nth-child(odd) { border-color:#bef264; }
.on-odd\:background-lime-400:nth-child(odd) { background-color:#a3e635; }
.on-odd\:color-lime-400:nth-child(odd) { color:#a3e635; }
.on-odd\:border-color-lime-400:nth-child(odd) { border-color:#a3e635; }
.on-odd\:background-lime-500:nth-child(odd) { background-color:#84cc16; }
.on-odd\:color-lime-500:nth-child(odd) { color:#84cc16; }
.on-odd\:border-color-lime-500:nth-child(odd) { border-color:#84cc16; }
.on-odd\:background-lime-600:nth-child(odd) { background-color:#65a30d; }
.on-odd\:color-lime-600:nth-child(odd) { color:#65a30d; }
.on-odd\:border-color-lime-600:nth-child(odd) { border-color:#65a30d; }
.on-odd\:background-lime-700:nth-child(odd) { background-color:#4d7c0f; }
.on-odd\:color-lime-700:nth-child(odd) { color:#4d7c0f; }
.on-odd\:border-color-lime-700:nth-child(odd) { border-color:#4d7c0f; }
.on-odd\:background-green-300:nth-child(odd) { background-color:#86efac; }
.on-odd\:color-green-300:nth-child(odd) { color:#86efac; }
.on-odd\:border-color-green-300:nth-child(odd) { border-color:#86efac; }
.on-odd\:background-green-400:nth-child(odd) { background-color:#4ade80; }
.on-odd\:color-green-400:nth-child(odd) { color:#4ade80; }
.on-odd\:border-color-green-400:nth-child(odd) { border-color:#4ade80; }
.on-odd\:background-green-500:nth-child(odd) { background-color:#22c55e; }
.on-odd\:color-green-500:nth-child(odd) { color:#22c55e; }
.on-odd\:border-color-green-500:nth-child(odd) { border-color:#22c55e; }
.on-odd\:background-green-600:nth-child(odd) { background-color:#16a34a; }
.on-odd\:color-green-600:nth-child(odd) { color:#16a34a; }
.on-odd\:border-color-green-600:nth-child(odd) { border-color:#16a34a; }
.on-odd\:background-green-700:nth-child(odd) { background-color:#15803d; }
.on-odd\:color-green-700:nth-child(odd) { color:#15803d; }
.on-odd\:border-color-green-700:nth-child(odd) { border-color:#15803d; }
.on-odd\:background-teal-300:nth-child(odd) { background-color:#5eead4; }
.on-odd\:color-teal-300:nth-child(odd) { color:#5eead4; }
.on-odd\:border-color-teal-300:nth-child(odd) { border-color:#5eead4; }
.on-odd\:background-teal-400:nth-child(odd) { background-color:#2dd4bf; }
.on-odd\:color-teal-400:nth-child(odd) { color:#2dd4bf; }
.on-odd\:border-color-teal-400:nth-child(odd) { border-color:#2dd4bf; }
.on-odd\:background-teal-500:nth-child(odd) { background-color:#14b8a6; }
.on-odd\:color-teal-500:nth-child(odd) { color:#14b8a6; }
.on-odd\:border-color-teal-500:nth-child(odd) { border-color:#14b8a6; }
.on-odd\:background-teal-600:nth-child(odd) { background-color:#0d9488; }
.on-odd\:color-teal-600:nth-child(odd) { color:#0d9488; }
.on-odd\:border-color-teal-600:nth-child(odd) { border-color:#0d9488; }
.on-odd\:background-teal-700:nth-child(odd) { background-color:#0f766e; }
.on-odd\:color-teal-700:nth-child(odd) { color:#0f766e; }
.on-odd\:border-color-teal-700:nth-child(odd) { border-color:#0f766e; }
.on-odd\:background-cyan-300:nth-child(odd) { background-color:#67e8f9; }
.on-odd\:color-cyan-300:nth-child(odd) { color:#67e8f9; }
.on-odd\:border-color-cyan-300:nth-child(odd) { border-color:#67e8f9; }
.on-odd\:background-cyan-400:nth-child(odd) { background-color:#22d3ee; }
.on-odd\:color-cyan-400:nth-child(odd) { color:#22d3ee; }
.on-odd\:border-color-cyan-400:nth-child(odd) { border-color:#22d3ee; }
.on-odd\:background-cyan-500:nth-child(odd) { background-color:#06b6d4; }
.on-odd\:color-cyan-500:nth-child(odd) { color:#06b6d4; }
.on-odd\:border-color-cyan-500:nth-child(odd) { border-color:#06b6d4; }
.on-odd\:background-cyan-600:nth-child(odd) { background-color:#0891b2; }
.on-odd\:color-cyan-600:nth-child(odd) { color:#0891b2; }
.on-odd\:border-color-cyan-600:nth-child(odd) { border-color:#0891b2; }
.on-odd\:background-cyan-700:nth-child(odd) { background-color:#0e7490; }
.on-odd\:color-cyan-700:nth-child(odd) { color:#0e7490; }
.on-odd\:border-color-cyan-700:nth-child(odd) { border-color:#0e7490; }
.on-odd\:background-blue-300:nth-child(odd) { background-color:#93c5fd; }
.on-odd\:color-blue-300:nth-child(odd) { color:#93c5fd; }
.on-odd\:border-color-blue-300:nth-child(odd) { border-color:#93c5fd; }
.on-odd\:background-blue-400:nth-child(odd) { background-color:#60a5fa; }
.on-odd\:color-blue-400:nth-child(odd) { color:#60a5fa; }
.on-odd\:border-color-blue-400:nth-child(odd) { border-color:#60a5fa; }
.on-odd\:background-blue-500:nth-child(odd) { background-color:#3b82f6; }
.on-odd\:color-blue-500:nth-child(odd) { color:#3b82f6; }
.on-odd\:border-color-blue-500:nth-child(odd) { border-color:#3b82f6; }
.on-odd\:background-blue-600:nth-child(odd) { background-color:#2563eb; }
.on-odd\:color-blue-600:nth-child(odd) { color:#2563eb; }
.on-odd\:border-color-blue-600:nth-child(odd) { border-color:#2563eb; }
.on-odd\:background-blue-700:nth-child(odd) { background-color:#1d4ed8; }
.on-odd\:color-blue-700:nth-child(odd) { color:#1d4ed8; }
.on-odd\:border-color-blue-700:nth-child(odd) { border-color:#1d4ed8; }
.on-odd\:background-indigo-300:nth-child(odd) { background-color:#a5b4fc; }
.on-odd\:color-indigo-300:nth-child(odd) { color:#a5b4fc; }
.on-odd\:border-color-indigo-300:nth-child(odd) { border-color:#a5b4fc; }
.on-odd\:background-indigo-400:nth-child(odd) { background-color:#818cf8; }
.on-odd\:color-indigo-400:nth-child(odd) { color:#818cf8; }
.on-odd\:border-color-indigo-400:nth-child(odd) { border-color:#818cf8; }
.on-odd\:background-indigo-500:nth-child(odd) { background-color:#6366f1; }
.on-odd\:color-indigo-500:nth-child(odd) { color:#6366f1; }
.on-odd\:border-color-indigo-500:nth-child(odd) { border-color:#6366f1; }
.on-odd\:background-indigo-600:nth-child(odd) { background-color:#4f46e5; }
.on-odd\:color-indigo-600:nth-child(odd) { color:#4f46e5; }
.on-odd\:border-color-indigo-600:nth-child(odd) { border-color:#4f46e5; }
.on-odd\:background-indigo-700:nth-child(odd) { background-color:#4338ca; }
.on-odd\:color-indigo-700:nth-child(odd) { color:#4338ca; }
.on-odd\:border-color-indigo-700:nth-child(odd) { border-color:#4338ca; }
.on-odd\:background-violet-300:nth-child(odd) { background-color:#c4b5fd; }
.on-odd\:color-violet-300:nth-child(odd) { color:#c4b5fd; }
.on-odd\:border-color-violet-300:nth-child(odd) { border-color:#c4b5fd; }
.on-odd\:background-violet-400:nth-child(odd) { background-color:#a78bfa; }
.on-odd\:color-violet-400:nth-child(odd) { color:#a78bfa; }
.on-odd\:border-color-violet-400:nth-child(odd) { border-color:#a78bfa; }
.on-odd\:background-violet-500:nth-child(odd) { background-color:#8b5cf6; }
.on-odd\:color-violet-500:nth-child(odd) { color:#8b5cf6; }
.on-odd\:border-color-violet-500:nth-child(odd) { border-color:#8b5cf6; }
.on-odd\:background-violet-600:nth-child(odd) { background-color:#7c3aed; }
.on-odd\:color-violet-600:nth-child(odd) { color:#7c3aed; }
.on-odd\:border-color-violet-600:nth-child(odd) { border-color:#7c3aed; }
.on-odd\:background-violet-700:nth-child(odd) { background-color:#6d28d9; }
.on-odd\:color-violet-700:nth-child(odd) { color:#6d28d9; }
.on-odd\:border-color-violet-700:nth-child(odd) { border-color:#6d28d9; }
.on-odd\:background-purple-300:nth-child(odd) { background-color:#d8b4fe; }
.on-odd\:color-purple-300:nth-child(odd) { color:#d8b4fe; }
.on-odd\:border-color-purple-300:nth-child(odd) { border-color:#d8b4fe; }
.on-odd\:background-purple-400:nth-child(odd) { background-color:#c084fc; }
.on-odd\:color-purple-400:nth-child(odd) { color:#c084fc; }
.on-odd\:border-color-purple-400:nth-child(odd) { border-color:#c084fc; }
.on-odd\:background-purple-500:nth-child(odd) { background-color:#a855f7; }
.on-odd\:color-purple-500:nth-child(odd) { color:#a855f7; }
.on-odd\:border-color-purple-500:nth-child(odd) { border-color:#a855f7; }
.on-odd\:background-purple-600:nth-child(odd) { background-color:#9333ea; }
.on-odd\:color-purple-600:nth-child(odd) { color:#9333ea; }
.on-odd\:border-color-purple-600:nth-child(odd) { border-color:#9333ea; }
.on-odd\:background-purple-700:nth-child(odd) { background-color:#7e22ce; }
.on-odd\:color-purple-700:nth-child(odd) { color:#7e22ce; }
.on-odd\:border-color-purple-700:nth-child(odd) { border-color:#7e22ce; }
.on-odd\:background-pink-300:nth-child(odd) { background-color:#f9a8d4; }
.on-odd\:color-pink-300:nth-child(odd) { color:#f9a8d4; }
.on-odd\:border-color-pink-300:nth-child(odd) { border-color:#f9a8d4; }
.on-odd\:background-pink-400:nth-child(odd) { background-color:#f472b6; }
.on-odd\:color-pink-400:nth-child(odd) { color:#f472b6; }
.on-odd\:border-color-pink-400:nth-child(odd) { border-color:#f472b6; }
.on-odd\:background-pink-500:nth-child(odd) { background-color:#ec4899; }
.on-odd\:color-pink-500:nth-child(odd) { color:#ec4899; }
.on-odd\:border-color-pink-500:nth-child(odd) { border-color:#ec4899; }
.on-odd\:background-pink-600:nth-child(odd) { background-color:#db2777; }
.on-odd\:color-pink-600:nth-child(odd) { color:#db2777; }
.on-odd\:border-color-pink-600:nth-child(odd) { border-color:#db2777; }
.on-odd\:background-pink-700:nth-child(odd) { background-color:#be185d; }
.on-odd\:color-pink-700:nth-child(odd) { color:#be185d; }
.on-odd\:border-color-pink-700:nth-child(odd) { border-color:#be185d; }
.on-odd\:background-rose-300:nth-child(odd) { background-color:#fda4af; }
.on-odd\:color-rose-300:nth-child(odd) { color:#fda4af; }
.on-odd\:border-color-rose-300:nth-child(odd) { border-color:#fda4af; }
.on-odd\:background-rose-400:nth-child(odd) { background-color:#fb7185; }
.on-odd\:color-rose-400:nth-child(odd) { color:#fb7185; }
.on-odd\:border-color-rose-400:nth-child(odd) { border-color:#fb7185; }
.on-odd\:background-rose-500:nth-child(odd) { background-color:#f43f5e; }
.on-odd\:color-rose-500:nth-child(odd) { color:#f43f5e; }
.on-odd\:border-color-rose-500:nth-child(odd) { border-color:#f43f5e; }
.on-odd\:background-rose-600:nth-child(odd) { background-color:#e11d48; }
.on-odd\:color-rose-600:nth-child(odd) { color:#e11d48; }
.on-odd\:border-color-rose-600:nth-child(odd) { border-color:#e11d48; }
.on-odd\:background-rose-700:nth-child(odd) { background-color:#be123c; }
.on-odd\:color-rose-700:nth-child(odd) { color:#be123c; }
.on-odd\:border-color-rose-700:nth-child(odd) { border-color:#be123c; }
.on-odd\:background-slate-300:nth-child(odd) { background-color:#cbd5e1; }
.on-odd\:color-slate-300:nth-child(odd) { color:#cbd5e1; }
.on-odd\:border-color-slate-300:nth-child(odd) { border-color:#cbd5e1; }
.on-odd\:background-slate-400:nth-child(odd) { background-color:#94a3b8; }
.on-odd\:color-slate-400:nth-child(odd) { color:#94a3b8; }
.on-odd\:border-color-slate-400:nth-child(odd) { border-color:#94a3b8; }
.on-odd\:background-slate-500:nth-child(odd) { background-color:#64748b; }
.on-odd\:color-slate-500:nth-child(odd) { color:#64748b; }
.on-odd\:border-color-slate-500:nth-child(odd) { border-color:#64748b; }
.on-odd\:background-slate-600:nth-child(odd) { background-color:#475569; }
.on-odd\:color-slate-600:nth-child(odd) { color:#475569; }
.on-odd\:border-color-slate-600:nth-child(odd) { border-color:#475569; }
.on-odd\:background-slate-700:nth-child(odd) { background-color:#334155; }
.on-odd\:color-slate-700:nth-child(odd) { color:#334155; }
.on-odd\:border-color-slate-700:nth-child(odd) { border-color:#334155; }
.on-odd\:background-gray-300:nth-child(odd) { background-color:#d1d5db; }
.on-odd\:color-gray-300:nth-child(odd) { color:#d1d5db; }
.on-odd\:border-color-gray-300:nth-child(odd) { border-color:#d1d5db; }
.on-odd\:background-gray-400:nth-child(odd) { background-color:#9ca3af; }
.on-odd\:color-gray-400:nth-child(odd) { color:#9ca3af; }
.on-odd\:border-color-gray-400:nth-child(odd) { border-color:#9ca3af; }
.on-odd\:background-gray-500:nth-child(odd) { background-color:#6b7280; }
.on-odd\:color-gray-500:nth-child(odd) { color:#6b7280; }
.on-odd\:border-color-gray-500:nth-child(odd) { border-color:#6b7280; }
.on-odd\:background-gray-600:nth-child(odd) { background-color:#4b5563; }
.on-odd\:color-gray-600:nth-child(odd) { color:#4b5563; }
.on-odd\:border-color-gray-600:nth-child(odd) { border-color:#4b5563; }
.on-odd\:background-gray-700:nth-child(odd) { background-color:#374151; }
.on-odd\:color-gray-700:nth-child(odd) { color:#374151; }
.on-odd\:border-color-gray-700:nth-child(odd) { border-color:#374151; }
.on-odd\:background-zinc-300:nth-child(odd) { background-color:#d4d4d8; }
.on-odd\:color-zinc-300:nth-child(odd) { color:#d4d4d8; }
.on-odd\:border-color-zinc-300:nth-child(odd) { border-color:#d4d4d8; }
.on-odd\:background-zinc-400:nth-child(odd) { background-color:#a1a1aa; }
.on-odd\:color-zinc-400:nth-child(odd) { color:#a1a1aa; }
.on-odd\:border-color-zinc-400:nth-child(odd) { border-color:#a1a1aa; }
.on-odd\:background-zinc-500:nth-child(odd) { background-color:#71717a; }
.on-odd\:color-zinc-500:nth-child(odd) { color:#71717a; }
.on-odd\:border-color-zinc-500:nth-child(odd) { border-color:#71717a; }
.on-odd\:background-zinc-600:nth-child(odd) { background-color:#52525b; }
.on-odd\:color-zinc-600:nth-child(odd) { color:#52525b; }
.on-odd\:border-color-zinc-600:nth-child(odd) { border-color:#52525b; }
.on-odd\:background-zinc-700:nth-child(odd) { background-color:#3f3f46; }
.on-odd\:color-zinc-700:nth-child(odd) { color:#3f3f46; }
.on-odd\:border-color-zinc-700:nth-child(odd) { border-color:#3f3f46; }
.on-odd\:background-stone-300:nth-child(odd) { background-color:#d6d3d1; }
.on-odd\:color-stone-300:nth-child(odd) { color:#d6d3d1; }
.on-odd\:border-color-stone-300:nth-child(odd) { border-color:#d6d3d1; }
.on-odd\:background-stone-400:nth-child(odd) { background-color:#a8a29e; }
.on-odd\:color-stone-400:nth-child(odd) { color:#a8a29e; }
.on-odd\:border-color-stone-400:nth-child(odd) { border-color:#a8a29e; }
.on-odd\:background-stone-500:nth-child(odd) { background-color:#78716c; }
.on-odd\:color-stone-500:nth-child(odd) { color:#78716c; }
.on-odd\:border-color-stone-500:nth-child(odd) { border-color:#78716c; }
.on-odd\:background-stone-600:nth-child(odd) { background-color:#57534e; }
.on-odd\:color-stone-600:nth-child(odd) { color:#57534e; }
.on-odd\:border-color-stone-600:nth-child(odd) { border-color:#57534e; }
.on-odd\:background-stone-700:nth-child(odd) { background-color:#44403c; }
.on-odd\:color-stone-700:nth-child(odd) { color:#44403c; }
.on-odd\:border-color-stone-700:nth-child(odd) { border-color:#44403c; }
.on-odd\:add-shadow-sm:nth-child(odd) { box-shadow:var(--santy-shadow-sm); }
.on-odd\:add-shadow:nth-child(odd) { box-shadow:var(--santy-shadow); }
.on-odd\:add-shadow-md:nth-child(odd) { box-shadow:var(--santy-shadow-md); }
.on-odd\:add-shadow-lg:nth-child(odd) { box-shadow:var(--santy-shadow-lg); }
.on-odd\:no-shadow:nth-child(odd) { box-shadow:none; }
.on-odd\:opacity-0:nth-child(odd) { opacity:0; }
.on-odd\:opacity-25:nth-child(odd) { opacity:0.25; }
.on-odd\:opacity-50:nth-child(odd) { opacity:0.5; }
.on-odd\:opacity-75:nth-child(odd) { opacity:0.75; }
.on-odd\:opacity-100:nth-child(odd) { opacity:1; }
.on-odd\:scale-90:nth-child(odd) { transform:scale(0.9); }
.on-odd\:scale-95:nth-child(odd) { transform:scale(0.95); }
.on-odd\:scale-100:nth-child(odd) { transform:scale(1); }
.on-odd\:scale-105:nth-child(odd) { transform:scale(1.05); }
.on-odd\:scale-110:nth-child(odd) { transform:scale(1.1); }
.on-odd\:make-hidden:nth-child(odd) { display:none; }
.on-odd\:make-block:nth-child(odd) { display:block; }
.on-odd\:make-flex:nth-child(odd) { display:flex; }
.on-odd\:cursor-pointer:nth-child(odd) { cursor:pointer; }
.on-odd\:cursor-not-allowed:nth-child(odd) { cursor:not-allowed; }
.on-odd\:outline-none:nth-child(odd) { outline:none; }
.on-odd\:text-underline:nth-child(odd) { text-decoration:underline; }
.on-odd\:text-no-decoration:nth-child(odd) { text-decoration:none; }
.on-odd\:text-bold:nth-child(odd) { font-weight:700; }
.on-odd\:transition-fast:nth-child(odd) { transition:var(--santy-transition-fast); }
.on-odd\:transition-normal:nth-child(odd) { transition:var(--santy-transition-normal); }
.on-odd\:add-border-1:nth-child(odd) { border:1px solid; }
.on-odd\:add-border-2:nth-child(odd) { border:2px solid; }
.on-odd\:add-border-4:nth-child(odd) { border:4px solid; }

/* on-even */
.on-even\:background-red-300:nth-child(even) { background-color:#fca5a5; }
.on-even\:color-red-300:nth-child(even) { color:#fca5a5; }
.on-even\:border-color-red-300:nth-child(even) { border-color:#fca5a5; }
.on-even\:background-red-400:nth-child(even) { background-color:#f87171; }
.on-even\:color-red-400:nth-child(even) { color:#f87171; }
.on-even\:border-color-red-400:nth-child(even) { border-color:#f87171; }
.on-even\:background-red-500:nth-child(even) { background-color:#ef4444; }
.on-even\:color-red-500:nth-child(even) { color:#ef4444; }
.on-even\:border-color-red-500:nth-child(even) { border-color:#ef4444; }
.on-even\:background-red-600:nth-child(even) { background-color:#dc2626; }
.on-even\:color-red-600:nth-child(even) { color:#dc2626; }
.on-even\:border-color-red-600:nth-child(even) { border-color:#dc2626; }
.on-even\:background-red-700:nth-child(even) { background-color:#b91c1c; }
.on-even\:color-red-700:nth-child(even) { color:#b91c1c; }
.on-even\:border-color-red-700:nth-child(even) { border-color:#b91c1c; }
.on-even\:background-orange-300:nth-child(even) { background-color:#fdba74; }
.on-even\:color-orange-300:nth-child(even) { color:#fdba74; }
.on-even\:border-color-orange-300:nth-child(even) { border-color:#fdba74; }
.on-even\:background-orange-400:nth-child(even) { background-color:#fb923c; }
.on-even\:color-orange-400:nth-child(even) { color:#fb923c; }
.on-even\:border-color-orange-400:nth-child(even) { border-color:#fb923c; }
.on-even\:background-orange-500:nth-child(even) { background-color:#f97316; }
.on-even\:color-orange-500:nth-child(even) { color:#f97316; }
.on-even\:border-color-orange-500:nth-child(even) { border-color:#f97316; }
.on-even\:background-orange-600:nth-child(even) { background-color:#ea580c; }
.on-even\:color-orange-600:nth-child(even) { color:#ea580c; }
.on-even\:border-color-orange-600:nth-child(even) { border-color:#ea580c; }
.on-even\:background-orange-700:nth-child(even) { background-color:#c2410c; }
.on-even\:color-orange-700:nth-child(even) { color:#c2410c; }
.on-even\:border-color-orange-700:nth-child(even) { border-color:#c2410c; }
.on-even\:background-amber-300:nth-child(even) { background-color:#fcd34d; }
.on-even\:color-amber-300:nth-child(even) { color:#fcd34d; }
.on-even\:border-color-amber-300:nth-child(even) { border-color:#fcd34d; }
.on-even\:background-amber-400:nth-child(even) { background-color:#fbbf24; }
.on-even\:color-amber-400:nth-child(even) { color:#fbbf24; }
.on-even\:border-color-amber-400:nth-child(even) { border-color:#fbbf24; }
.on-even\:background-amber-500:nth-child(even) { background-color:#f59e0b; }
.on-even\:color-amber-500:nth-child(even) { color:#f59e0b; }
.on-even\:border-color-amber-500:nth-child(even) { border-color:#f59e0b; }
.on-even\:background-amber-600:nth-child(even) { background-color:#d97706; }
.on-even\:color-amber-600:nth-child(even) { color:#d97706; }
.on-even\:border-color-amber-600:nth-child(even) { border-color:#d97706; }
.on-even\:background-amber-700:nth-child(even) { background-color:#b45309; }
.on-even\:color-amber-700:nth-child(even) { color:#b45309; }
.on-even\:border-color-amber-700:nth-child(even) { border-color:#b45309; }
.on-even\:background-yellow-300:nth-child(even) { background-color:#fde047; }
.on-even\:color-yellow-300:nth-child(even) { color:#fde047; }
.on-even\:border-color-yellow-300:nth-child(even) { border-color:#fde047; }
.on-even\:background-yellow-400:nth-child(even) { background-color:#facc15; }
.on-even\:color-yellow-400:nth-child(even) { color:#facc15; }
.on-even\:border-color-yellow-400:nth-child(even) { border-color:#facc15; }
.on-even\:background-yellow-500:nth-child(even) { background-color:#eab308; }
.on-even\:color-yellow-500:nth-child(even) { color:#eab308; }
.on-even\:border-color-yellow-500:nth-child(even) { border-color:#eab308; }
.on-even\:background-yellow-600:nth-child(even) { background-color:#ca8a04; }
.on-even\:color-yellow-600:nth-child(even) { color:#ca8a04; }
.on-even\:border-color-yellow-600:nth-child(even) { border-color:#ca8a04; }
.on-even\:background-yellow-700:nth-child(even) { background-color:#a16207; }
.on-even\:color-yellow-700:nth-child(even) { color:#a16207; }
.on-even\:border-color-yellow-700:nth-child(even) { border-color:#a16207; }
.on-even\:background-lime-300:nth-child(even) { background-color:#bef264; }
.on-even\:color-lime-300:nth-child(even) { color:#bef264; }
.on-even\:border-color-lime-300:nth-child(even) { border-color:#bef264; }
.on-even\:background-lime-400:nth-child(even) { background-color:#a3e635; }
.on-even\:color-lime-400:nth-child(even) { color:#a3e635; }
.on-even\:border-color-lime-400:nth-child(even) { border-color:#a3e635; }
.on-even\:background-lime-500:nth-child(even) { background-color:#84cc16; }
.on-even\:color-lime-500:nth-child(even) { color:#84cc16; }
.on-even\:border-color-lime-500:nth-child(even) { border-color:#84cc16; }
.on-even\:background-lime-600:nth-child(even) { background-color:#65a30d; }
.on-even\:color-lime-600:nth-child(even) { color:#65a30d; }
.on-even\:border-color-lime-600:nth-child(even) { border-color:#65a30d; }
.on-even\:background-lime-700:nth-child(even) { background-color:#4d7c0f; }
.on-even\:color-lime-700:nth-child(even) { color:#4d7c0f; }
.on-even\:border-color-lime-700:nth-child(even) { border-color:#4d7c0f; }
.on-even\:background-green-300:nth-child(even) { background-color:#86efac; }
.on-even\:color-green-300:nth-child(even) { color:#86efac; }
.on-even\:border-color-green-300:nth-child(even) { border-color:#86efac; }
.on-even\:background-green-400:nth-child(even) { background-color:#4ade80; }
.on-even\:color-green-400:nth-child(even) { color:#4ade80; }
.on-even\:border-color-green-400:nth-child(even) { border-color:#4ade80; }
.on-even\:background-green-500:nth-child(even) { background-color:#22c55e; }
.on-even\:color-green-500:nth-child(even) { color:#22c55e; }
.on-even\:border-color-green-500:nth-child(even) { border-color:#22c55e; }
.on-even\:background-green-600:nth-child(even) { background-color:#16a34a; }
.on-even\:color-green-600:nth-child(even) { color:#16a34a; }
.on-even\:border-color-green-600:nth-child(even) { border-color:#16a34a; }
.on-even\:background-green-700:nth-child(even) { background-color:#15803d; }
.on-even\:color-green-700:nth-child(even) { color:#15803d; }
.on-even\:border-color-green-700:nth-child(even) { border-color:#15803d; }
.on-even\:background-teal-300:nth-child(even) { background-color:#5eead4; }
.on-even\:color-teal-300:nth-child(even) { color:#5eead4; }
.on-even\:border-color-teal-300:nth-child(even) { border-color:#5eead4; }
.on-even\:background-teal-400:nth-child(even) { background-color:#2dd4bf; }
.on-even\:color-teal-400:nth-child(even) { color:#2dd4bf; }
.on-even\:border-color-teal-400:nth-child(even) { border-color:#2dd4bf; }
.on-even\:background-teal-500:nth-child(even) { background-color:#14b8a6; }
.on-even\:color-teal-500:nth-child(even) { color:#14b8a6; }
.on-even\:border-color-teal-500:nth-child(even) { border-color:#14b8a6; }
.on-even\:background-teal-600:nth-child(even) { background-color:#0d9488; }
.on-even\:color-teal-600:nth-child(even) { color:#0d9488; }
.on-even\:border-color-teal-600:nth-child(even) { border-color:#0d9488; }
.on-even\:background-teal-700:nth-child(even) { background-color:#0f766e; }
.on-even\:color-teal-700:nth-child(even) { color:#0f766e; }
.on-even\:border-color-teal-700:nth-child(even) { border-color:#0f766e; }
.on-even\:background-cyan-300:nth-child(even) { background-color:#67e8f9; }
.on-even\:color-cyan-300:nth-child(even) { color:#67e8f9; }
.on-even\:border-color-cyan-300:nth-child(even) { border-color:#67e8f9; }
.on-even\:background-cyan-400:nth-child(even) { background-color:#22d3ee; }
.on-even\:color-cyan-400:nth-child(even) { color:#22d3ee; }
.on-even\:border-color-cyan-400:nth-child(even) { border-color:#22d3ee; }
.on-even\:background-cyan-500:nth-child(even) { background-color:#06b6d4; }
.on-even\:color-cyan-500:nth-child(even) { color:#06b6d4; }
.on-even\:border-color-cyan-500:nth-child(even) { border-color:#06b6d4; }
.on-even\:background-cyan-600:nth-child(even) { background-color:#0891b2; }
.on-even\:color-cyan-600:nth-child(even) { color:#0891b2; }
.on-even\:border-color-cyan-600:nth-child(even) { border-color:#0891b2; }
.on-even\:background-cyan-700:nth-child(even) { background-color:#0e7490; }
.on-even\:color-cyan-700:nth-child(even) { color:#0e7490; }
.on-even\:border-color-cyan-700:nth-child(even) { border-color:#0e7490; }
.on-even\:background-blue-300:nth-child(even) { background-color:#93c5fd; }
.on-even\:color-blue-300:nth-child(even) { color:#93c5fd; }
.on-even\:border-color-blue-300:nth-child(even) { border-color:#93c5fd; }
.on-even\:background-blue-400:nth-child(even) { background-color:#60a5fa; }
.on-even\:color-blue-400:nth-child(even) { color:#60a5fa; }
.on-even\:border-color-blue-400:nth-child(even) { border-color:#60a5fa; }
.on-even\:background-blue-500:nth-child(even) { background-color:#3b82f6; }
.on-even\:color-blue-500:nth-child(even) { color:#3b82f6; }
.on-even\:border-color-blue-500:nth-child(even) { border-color:#3b82f6; }
.on-even\:background-blue-600:nth-child(even) { background-color:#2563eb; }
.on-even\:color-blue-600:nth-child(even) { color:#2563eb; }
.on-even\:border-color-blue-600:nth-child(even) { border-color:#2563eb; }
.on-even\:background-blue-700:nth-child(even) { background-color:#1d4ed8; }
.on-even\:color-blue-700:nth-child(even) { color:#1d4ed8; }
.on-even\:border-color-blue-700:nth-child(even) { border-color:#1d4ed8; }
.on-even\:background-indigo-300:nth-child(even) { background-color:#a5b4fc; }
.on-even\:color-indigo-300:nth-child(even) { color:#a5b4fc; }
.on-even\:border-color-indigo-300:nth-child(even) { border-color:#a5b4fc; }
.on-even\:background-indigo-400:nth-child(even) { background-color:#818cf8; }
.on-even\:color-indigo-400:nth-child(even) { color:#818cf8; }
.on-even\:border-color-indigo-400:nth-child(even) { border-color:#818cf8; }
.on-even\:background-indigo-500:nth-child(even) { background-color:#6366f1; }
.on-even\:color-indigo-500:nth-child(even) { color:#6366f1; }
.on-even\:border-color-indigo-500:nth-child(even) { border-color:#6366f1; }
.on-even\:background-indigo-600:nth-child(even) { background-color:#4f46e5; }
.on-even\:color-indigo-600:nth-child(even) { color:#4f46e5; }
.on-even\:border-color-indigo-600:nth-child(even) { border-color:#4f46e5; }
.on-even\:background-indigo-700:nth-child(even) { background-color:#4338ca; }
.on-even\:color-indigo-700:nth-child(even) { color:#4338ca; }
.on-even\:border-color-indigo-700:nth-child(even) { border-color:#4338ca; }
.on-even\:background-violet-300:nth-child(even) { background-color:#c4b5fd; }
.on-even\:color-violet-300:nth-child(even) { color:#c4b5fd; }
.on-even\:border-color-violet-300:nth-child(even) { border-color:#c4b5fd; }
.on-even\:background-violet-400:nth-child(even) { background-color:#a78bfa; }
.on-even\:color-violet-400:nth-child(even) { color:#a78bfa; }
.on-even\:border-color-violet-400:nth-child(even) { border-color:#a78bfa; }
.on-even\:background-violet-500:nth-child(even) { background-color:#8b5cf6; }
.on-even\:color-violet-500:nth-child(even) { color:#8b5cf6; }
.on-even\:border-color-violet-500:nth-child(even) { border-color:#8b5cf6; }
.on-even\:background-violet-600:nth-child(even) { background-color:#7c3aed; }
.on-even\:color-violet-600:nth-child(even) { color:#7c3aed; }
.on-even\:border-color-violet-600:nth-child(even) { border-color:#7c3aed; }
.on-even\:background-violet-700:nth-child(even) { background-color:#6d28d9; }
.on-even\:color-violet-700:nth-child(even) { color:#6d28d9; }
.on-even\:border-color-violet-700:nth-child(even) { border-color:#6d28d9; }
.on-even\:background-purple-300:nth-child(even) { background-color:#d8b4fe; }
.on-even\:color-purple-300:nth-child(even) { color:#d8b4fe; }
.on-even\:border-color-purple-300:nth-child(even) { border-color:#d8b4fe; }
.on-even\:background-purple-400:nth-child(even) { background-color:#c084fc; }
.on-even\:color-purple-400:nth-child(even) { color:#c084fc; }
.on-even\:border-color-purple-400:nth-child(even) { border-color:#c084fc; }
.on-even\:background-purple-500:nth-child(even) { background-color:#a855f7; }
.on-even\:color-purple-500:nth-child(even) { color:#a855f7; }
.on-even\:border-color-purple-500:nth-child(even) { border-color:#a855f7; }
.on-even\:background-purple-600:nth-child(even) { background-color:#9333ea; }
.on-even\:color-purple-600:nth-child(even) { color:#9333ea; }
.on-even\:border-color-purple-600:nth-child(even) { border-color:#9333ea; }
.on-even\:background-purple-700:nth-child(even) { background-color:#7e22ce; }
.on-even\:color-purple-700:nth-child(even) { color:#7e22ce; }
.on-even\:border-color-purple-700:nth-child(even) { border-color:#7e22ce; }
.on-even\:background-pink-300:nth-child(even) { background-color:#f9a8d4; }
.on-even\:color-pink-300:nth-child(even) { color:#f9a8d4; }
.on-even\:border-color-pink-300:nth-child(even) { border-color:#f9a8d4; }
.on-even\:background-pink-400:nth-child(even) { background-color:#f472b6; }
.on-even\:color-pink-400:nth-child(even) { color:#f472b6; }
.on-even\:border-color-pink-400:nth-child(even) { border-color:#f472b6; }
.on-even\:background-pink-500:nth-child(even) { background-color:#ec4899; }
.on-even\:color-pink-500:nth-child(even) { color:#ec4899; }
.on-even\:border-color-pink-500:nth-child(even) { border-color:#ec4899; }
.on-even\:background-pink-600:nth-child(even) { background-color:#db2777; }
.on-even\:color-pink-600:nth-child(even) { color:#db2777; }
.on-even\:border-color-pink-600:nth-child(even) { border-color:#db2777; }
.on-even\:background-pink-700:nth-child(even) { background-color:#be185d; }
.on-even\:color-pink-700:nth-child(even) { color:#be185d; }
.on-even\:border-color-pink-700:nth-child(even) { border-color:#be185d; }
.on-even\:background-rose-300:nth-child(even) { background-color:#fda4af; }
.on-even\:color-rose-300:nth-child(even) { color:#fda4af; }
.on-even\:border-color-rose-300:nth-child(even) { border-color:#fda4af; }
.on-even\:background-rose-400:nth-child(even) { background-color:#fb7185; }
.on-even\:color-rose-400:nth-child(even) { color:#fb7185; }
.on-even\:border-color-rose-400:nth-child(even) { border-color:#fb7185; }
.on-even\:background-rose-500:nth-child(even) { background-color:#f43f5e; }
.on-even\:color-rose-500:nth-child(even) { color:#f43f5e; }
.on-even\:border-color-rose-500:nth-child(even) { border-color:#f43f5e; }
.on-even\:background-rose-600:nth-child(even) { background-color:#e11d48; }
.on-even\:color-rose-600:nth-child(even) { color:#e11d48; }
.on-even\:border-color-rose-600:nth-child(even) { border-color:#e11d48; }
.on-even\:background-rose-700:nth-child(even) { background-color:#be123c; }
.on-even\:color-rose-700:nth-child(even) { color:#be123c; }
.on-even\:border-color-rose-700:nth-child(even) { border-color:#be123c; }
.on-even\:background-slate-300:nth-child(even) { background-color:#cbd5e1; }
.on-even\:color-slate-300:nth-child(even) { color:#cbd5e1; }
.on-even\:border-color-slate-300:nth-child(even) { border-color:#cbd5e1; }
.on-even\:background-slate-400:nth-child(even) { background-color:#94a3b8; }
.on-even\:color-slate-400:nth-child(even) { color:#94a3b8; }
.on-even\:border-color-slate-400:nth-child(even) { border-color:#94a3b8; }
.on-even\:background-slate-500:nth-child(even) { background-color:#64748b; }
.on-even\:color-slate-500:nth-child(even) { color:#64748b; }
.on-even\:border-color-slate-500:nth-child(even) { border-color:#64748b; }
.on-even\:background-slate-600:nth-child(even) { background-color:#475569; }
.on-even\:color-slate-600:nth-child(even) { color:#475569; }
.on-even\:border-color-slate-600:nth-child(even) { border-color:#475569; }
.on-even\:background-slate-700:nth-child(even) { background-color:#334155; }
.on-even\:color-slate-700:nth-child(even) { color:#334155; }
.on-even\:border-color-slate-700:nth-child(even) { border-color:#334155; }
.on-even\:background-gray-300:nth-child(even) { background-color:#d1d5db; }
.on-even\:color-gray-300:nth-child(even) { color:#d1d5db; }
.on-even\:border-color-gray-300:nth-child(even) { border-color:#d1d5db; }
.on-even\:background-gray-400:nth-child(even) { background-color:#9ca3af; }
.on-even\:color-gray-400:nth-child(even) { color:#9ca3af; }
.on-even\:border-color-gray-400:nth-child(even) { border-color:#9ca3af; }
.on-even\:background-gray-500:nth-child(even) { background-color:#6b7280; }
.on-even\:color-gray-500:nth-child(even) { color:#6b7280; }
.on-even\:border-color-gray-500:nth-child(even) { border-color:#6b7280; }
.on-even\:background-gray-600:nth-child(even) { background-color:#4b5563; }
.on-even\:color-gray-600:nth-child(even) { color:#4b5563; }
.on-even\:border-color-gray-600:nth-child(even) { border-color:#4b5563; }
.on-even\:background-gray-700:nth-child(even) { background-color:#374151; }
.on-even\:color-gray-700:nth-child(even) { color:#374151; }
.on-even\:border-color-gray-700:nth-child(even) { border-color:#374151; }
.on-even\:background-zinc-300:nth-child(even) { background-color:#d4d4d8; }
.on-even\:color-zinc-300:nth-child(even) { color:#d4d4d8; }
.on-even\:border-color-zinc-300:nth-child(even) { border-color:#d4d4d8; }
.on-even\:background-zinc-400:nth-child(even) { background-color:#a1a1aa; }
.on-even\:color-zinc-400:nth-child(even) { color:#a1a1aa; }
.on-even\:border-color-zinc-400:nth-child(even) { border-color:#a1a1aa; }
.on-even\:background-zinc-500:nth-child(even) { background-color:#71717a; }
.on-even\:color-zinc-500:nth-child(even) { color:#71717a; }
.on-even\:border-color-zinc-500:nth-child(even) { border-color:#71717a; }
.on-even\:background-zinc-600:nth-child(even) { background-color:#52525b; }
.on-even\:color-zinc-600:nth-child(even) { color:#52525b; }
.on-even\:border-color-zinc-600:nth-child(even) { border-color:#52525b; }
.on-even\:background-zinc-700:nth-child(even) { background-color:#3f3f46; }
.on-even\:color-zinc-700:nth-child(even) { color:#3f3f46; }
.on-even\:border-color-zinc-700:nth-child(even) { border-color:#3f3f46; }
.on-even\:background-stone-300:nth-child(even) { background-color:#d6d3d1; }
.on-even\:color-stone-300:nth-child(even) { color:#d6d3d1; }
.on-even\:border-color-stone-300:nth-child(even) { border-color:#d6d3d1; }
.on-even\:background-stone-400:nth-child(even) { background-color:#a8a29e; }
.on-even\:color-stone-400:nth-child(even) { color:#a8a29e; }
.on-even\:border-color-stone-400:nth-child(even) { border-color:#a8a29e; }
.on-even\:background-stone-500:nth-child(even) { background-color:#78716c; }
.on-even\:color-stone-500:nth-child(even) { color:#78716c; }
.on-even\:border-color-stone-500:nth-child(even) { border-color:#78716c; }
.on-even\:background-stone-600:nth-child(even) { background-color:#57534e; }
.on-even\:color-stone-600:nth-child(even) { color:#57534e; }
.on-even\:border-color-stone-600:nth-child(even) { border-color:#57534e; }
.on-even\:background-stone-700:nth-child(even) { background-color:#44403c; }
.on-even\:color-stone-700:nth-child(even) { color:#44403c; }
.on-even\:border-color-stone-700:nth-child(even) { border-color:#44403c; }
.on-even\:add-shadow-sm:nth-child(even) { box-shadow:var(--santy-shadow-sm); }
.on-even\:add-shadow:nth-child(even) { box-shadow:var(--santy-shadow); }
.on-even\:add-shadow-md:nth-child(even) { box-shadow:var(--santy-shadow-md); }
.on-even\:add-shadow-lg:nth-child(even) { box-shadow:var(--santy-shadow-lg); }
.on-even\:no-shadow:nth-child(even) { box-shadow:none; }
.on-even\:opacity-0:nth-child(even) { opacity:0; }
.on-even\:opacity-25:nth-child(even) { opacity:0.25; }
.on-even\:opacity-50:nth-child(even) { opacity:0.5; }
.on-even\:opacity-75:nth-child(even) { opacity:0.75; }
.on-even\:opacity-100:nth-child(even) { opacity:1; }
.on-even\:scale-90:nth-child(even) { transform:scale(0.9); }
.on-even\:scale-95:nth-child(even) { transform:scale(0.95); }
.on-even\:scale-100:nth-child(even) { transform:scale(1); }
.on-even\:scale-105:nth-child(even) { transform:scale(1.05); }
.on-even\:scale-110:nth-child(even) { transform:scale(1.1); }
.on-even\:make-hidden:nth-child(even) { display:none; }
.on-even\:make-block:nth-child(even) { display:block; }
.on-even\:make-flex:nth-child(even) { display:flex; }
.on-even\:cursor-pointer:nth-child(even) { cursor:pointer; }
.on-even\:cursor-not-allowed:nth-child(even) { cursor:not-allowed; }
.on-even\:outline-none:nth-child(even) { outline:none; }
.on-even\:text-underline:nth-child(even) { text-decoration:underline; }
.on-even\:text-no-decoration:nth-child(even) { text-decoration:none; }
.on-even\:text-bold:nth-child(even) { font-weight:700; }
.on-even\:transition-fast:nth-child(even) { transition:var(--santy-transition-fast); }
.on-even\:transition-normal:nth-child(even) { transition:var(--santy-transition-normal); }
.on-even\:add-border-1:nth-child(even) { border:1px solid; }
.on-even\:add-border-2:nth-child(even) { border:2px solid; }
.on-even\:add-border-4:nth-child(even) { border:4px solid; }

/* on-placeholder */
.on-placeholder\:background-red-300::placeholder { background-color:#fca5a5; }
.on-placeholder\:color-red-300::placeholder { color:#fca5a5; }
.on-placeholder\:border-color-red-300::placeholder { border-color:#fca5a5; }
.on-placeholder\:background-red-400::placeholder { background-color:#f87171; }
.on-placeholder\:color-red-400::placeholder { color:#f87171; }
.on-placeholder\:border-color-red-400::placeholder { border-color:#f87171; }
.on-placeholder\:background-red-500::placeholder { background-color:#ef4444; }
.on-placeholder\:color-red-500::placeholder { color:#ef4444; }
.on-placeholder\:border-color-red-500::placeholder { border-color:#ef4444; }
.on-placeholder\:background-red-600::placeholder { background-color:#dc2626; }
.on-placeholder\:color-red-600::placeholder { color:#dc2626; }
.on-placeholder\:border-color-red-600::placeholder { border-color:#dc2626; }
.on-placeholder\:background-red-700::placeholder { background-color:#b91c1c; }
.on-placeholder\:color-red-700::placeholder { color:#b91c1c; }
.on-placeholder\:border-color-red-700::placeholder { border-color:#b91c1c; }
.on-placeholder\:background-orange-300::placeholder { background-color:#fdba74; }
.on-placeholder\:color-orange-300::placeholder { color:#fdba74; }
.on-placeholder\:border-color-orange-300::placeholder { border-color:#fdba74; }
.on-placeholder\:background-orange-400::placeholder { background-color:#fb923c; }
.on-placeholder\:color-orange-400::placeholder { color:#fb923c; }
.on-placeholder\:border-color-orange-400::placeholder { border-color:#fb923c; }
.on-placeholder\:background-orange-500::placeholder { background-color:#f97316; }
.on-placeholder\:color-orange-500::placeholder { color:#f97316; }
.on-placeholder\:border-color-orange-500::placeholder { border-color:#f97316; }
.on-placeholder\:background-orange-600::placeholder { background-color:#ea580c; }
.on-placeholder\:color-orange-600::placeholder { color:#ea580c; }
.on-placeholder\:border-color-orange-600::placeholder { border-color:#ea580c; }
.on-placeholder\:background-orange-700::placeholder { background-color:#c2410c; }
.on-placeholder\:color-orange-700::placeholder { color:#c2410c; }
.on-placeholder\:border-color-orange-700::placeholder { border-color:#c2410c; }
.on-placeholder\:background-amber-300::placeholder { background-color:#fcd34d; }
.on-placeholder\:color-amber-300::placeholder { color:#fcd34d; }
.on-placeholder\:border-color-amber-300::placeholder { border-color:#fcd34d; }
.on-placeholder\:background-amber-400::placeholder { background-color:#fbbf24; }
.on-placeholder\:color-amber-400::placeholder { color:#fbbf24; }
.on-placeholder\:border-color-amber-400::placeholder { border-color:#fbbf24; }
.on-placeholder\:background-amber-500::placeholder { background-color:#f59e0b; }
.on-placeholder\:color-amber-500::placeholder { color:#f59e0b; }
.on-placeholder\:border-color-amber-500::placeholder { border-color:#f59e0b; }
.on-placeholder\:background-amber-600::placeholder { background-color:#d97706; }
.on-placeholder\:color-amber-600::placeholder { color:#d97706; }
.on-placeholder\:border-color-amber-600::placeholder { border-color:#d97706; }
.on-placeholder\:background-amber-700::placeholder { background-color:#b45309; }
.on-placeholder\:color-amber-700::placeholder { color:#b45309; }
.on-placeholder\:border-color-amber-700::placeholder { border-color:#b45309; }
.on-placeholder\:background-yellow-300::placeholder { background-color:#fde047; }
.on-placeholder\:color-yellow-300::placeholder { color:#fde047; }
.on-placeholder\:border-color-yellow-300::placeholder { border-color:#fde047; }
.on-placeholder\:background-yellow-400::placeholder { background-color:#facc15; }
.on-placeholder\:color-yellow-400::placeholder { color:#facc15; }
.on-placeholder\:border-color-yellow-400::placeholder { border-color:#facc15; }
.on-placeholder\:background-yellow-500::placeholder { background-color:#eab308; }
.on-placeholder\:color-yellow-500::placeholder { color:#eab308; }
.on-placeholder\:border-color-yellow-500::placeholder { border-color:#eab308; }
.on-placeholder\:background-yellow-600::placeholder { background-color:#ca8a04; }
.on-placeholder\:color-yellow-600::placeholder { color:#ca8a04; }
.on-placeholder\:border-color-yellow-600::placeholder { border-color:#ca8a04; }
.on-placeholder\:background-yellow-700::placeholder { background-color:#a16207; }
.on-placeholder\:color-yellow-700::placeholder { color:#a16207; }
.on-placeholder\:border-color-yellow-700::placeholder { border-color:#a16207; }
.on-placeholder\:background-lime-300::placeholder { background-color:#bef264; }
.on-placeholder\:color-lime-300::placeholder { color:#bef264; }
.on-placeholder\:border-color-lime-300::placeholder { border-color:#bef264; }
.on-placeholder\:background-lime-400::placeholder { background-color:#a3e635; }
.on-placeholder\:color-lime-400::placeholder { color:#a3e635; }
.on-placeholder\:border-color-lime-400::placeholder { border-color:#a3e635; }
.on-placeholder\:background-lime-500::placeholder { background-color:#84cc16; }
.on-placeholder\:color-lime-500::placeholder { color:#84cc16; }
.on-placeholder\:border-color-lime-500::placeholder { border-color:#84cc16; }
.on-placeholder\:background-lime-600::placeholder { background-color:#65a30d; }
.on-placeholder\:color-lime-600::placeholder { color:#65a30d; }
.on-placeholder\:border-color-lime-600::placeholder { border-color:#65a30d; }
.on-placeholder\:background-lime-700::placeholder { background-color:#4d7c0f; }
.on-placeholder\:color-lime-700::placeholder { color:#4d7c0f; }
.on-placeholder\:border-color-lime-700::placeholder { border-color:#4d7c0f; }
.on-placeholder\:background-green-300::placeholder { background-color:#86efac; }
.on-placeholder\:color-green-300::placeholder { color:#86efac; }
.on-placeholder\:border-color-green-300::placeholder { border-color:#86efac; }
.on-placeholder\:background-green-400::placeholder { background-color:#4ade80; }
.on-placeholder\:color-green-400::placeholder { color:#4ade80; }
.on-placeholder\:border-color-green-400::placeholder { border-color:#4ade80; }
.on-placeholder\:background-green-500::placeholder { background-color:#22c55e; }
.on-placeholder\:color-green-500::placeholder { color:#22c55e; }
.on-placeholder\:border-color-green-500::placeholder { border-color:#22c55e; }
.on-placeholder\:background-green-600::placeholder { background-color:#16a34a; }
.on-placeholder\:color-green-600::placeholder { color:#16a34a; }
.on-placeholder\:border-color-green-600::placeholder { border-color:#16a34a; }
.on-placeholder\:background-green-700::placeholder { background-color:#15803d; }
.on-placeholder\:color-green-700::placeholder { color:#15803d; }
.on-placeholder\:border-color-green-700::placeholder { border-color:#15803d; }
.on-placeholder\:background-teal-300::placeholder { background-color:#5eead4; }
.on-placeholder\:color-teal-300::placeholder { color:#5eead4; }
.on-placeholder\:border-color-teal-300::placeholder { border-color:#5eead4; }
.on-placeholder\:background-teal-400::placeholder { background-color:#2dd4bf; }
.on-placeholder\:color-teal-400::placeholder { color:#2dd4bf; }
.on-placeholder\:border-color-teal-400::placeholder { border-color:#2dd4bf; }
.on-placeholder\:background-teal-500::placeholder { background-color:#14b8a6; }
.on-placeholder\:color-teal-500::placeholder { color:#14b8a6; }
.on-placeholder\:border-color-teal-500::placeholder { border-color:#14b8a6; }
.on-placeholder\:background-teal-600::placeholder { background-color:#0d9488; }
.on-placeholder\:color-teal-600::placeholder { color:#0d9488; }
.on-placeholder\:border-color-teal-600::placeholder { border-color:#0d9488; }
.on-placeholder\:background-teal-700::placeholder { background-color:#0f766e; }
.on-placeholder\:color-teal-700::placeholder { color:#0f766e; }
.on-placeholder\:border-color-teal-700::placeholder { border-color:#0f766e; }
.on-placeholder\:background-cyan-300::placeholder { background-color:#67e8f9; }
.on-placeholder\:color-cyan-300::placeholder { color:#67e8f9; }
.on-placeholder\:border-color-cyan-300::placeholder { border-color:#67e8f9; }
.on-placeholder\:background-cyan-400::placeholder { background-color:#22d3ee; }
.on-placeholder\:color-cyan-400::placeholder { color:#22d3ee; }
.on-placeholder\:border-color-cyan-400::placeholder { border-color:#22d3ee; }
.on-placeholder\:background-cyan-500::placeholder { background-color:#06b6d4; }
.on-placeholder\:color-cyan-500::placeholder { color:#06b6d4; }
.on-placeholder\:border-color-cyan-500::placeholder { border-color:#06b6d4; }
.on-placeholder\:background-cyan-600::placeholder { background-color:#0891b2; }
.on-placeholder\:color-cyan-600::placeholder { color:#0891b2; }
.on-placeholder\:border-color-cyan-600::placeholder { border-color:#0891b2; }
.on-placeholder\:background-cyan-700::placeholder { background-color:#0e7490; }
.on-placeholder\:color-cyan-700::placeholder { color:#0e7490; }
.on-placeholder\:border-color-cyan-700::placeholder { border-color:#0e7490; }
.on-placeholder\:background-blue-300::placeholder { background-color:#93c5fd; }
.on-placeholder\:color-blue-300::placeholder { color:#93c5fd; }
.on-placeholder\:border-color-blue-300::placeholder { border-color:#93c5fd; }
.on-placeholder\:background-blue-400::placeholder { background-color:#60a5fa; }
.on-placeholder\:color-blue-400::placeholder { color:#60a5fa; }
.on-placeholder\:border-color-blue-400::placeholder { border-color:#60a5fa; }
.on-placeholder\:background-blue-500::placeholder { background-color:#3b82f6; }
.on-placeholder\:color-blue-500::placeholder { color:#3b82f6; }
.on-placeholder\:border-color-blue-500::placeholder { border-color:#3b82f6; }
.on-placeholder\:background-blue-600::placeholder { background-color:#2563eb; }
.on-placeholder\:color-blue-600::placeholder { color:#2563eb; }
.on-placeholder\:border-color-blue-600::placeholder { border-color:#2563eb; }
.on-placeholder\:background-blue-700::placeholder { background-color:#1d4ed8; }
.on-placeholder\:color-blue-700::placeholder { color:#1d4ed8; }
.on-placeholder\:border-color-blue-700::placeholder { border-color:#1d4ed8; }
.on-placeholder\:background-indigo-300::placeholder { background-color:#a5b4fc; }
.on-placeholder\:color-indigo-300::placeholder { color:#a5b4fc; }
.on-placeholder\:border-color-indigo-300::placeholder { border-color:#a5b4fc; }
.on-placeholder\:background-indigo-400::placeholder { background-color:#818cf8; }
.on-placeholder\:color-indigo-400::placeholder { color:#818cf8; }
.on-placeholder\:border-color-indigo-400::placeholder { border-color:#818cf8; }
.on-placeholder\:background-indigo-500::placeholder { background-color:#6366f1; }
.on-placeholder\:color-indigo-500::placeholder { color:#6366f1; }
.on-placeholder\:border-color-indigo-500::placeholder { border-color:#6366f1; }
.on-placeholder\:background-indigo-600::placeholder { background-color:#4f46e5; }
.on-placeholder\:color-indigo-600::placeholder { color:#4f46e5; }
.on-placeholder\:border-color-indigo-600::placeholder { border-color:#4f46e5; }
.on-placeholder\:background-indigo-700::placeholder { background-color:#4338ca; }
.on-placeholder\:color-indigo-700::placeholder { color:#4338ca; }
.on-placeholder\:border-color-indigo-700::placeholder { border-color:#4338ca; }
.on-placeholder\:background-violet-300::placeholder { background-color:#c4b5fd; }
.on-placeholder\:color-violet-300::placeholder { color:#c4b5fd; }
.on-placeholder\:border-color-violet-300::placeholder { border-color:#c4b5fd; }
.on-placeholder\:background-violet-400::placeholder { background-color:#a78bfa; }
.on-placeholder\:color-violet-400::placeholder { color:#a78bfa; }
.on-placeholder\:border-color-violet-400::placeholder { border-color:#a78bfa; }
.on-placeholder\:background-violet-500::placeholder { background-color:#8b5cf6; }
.on-placeholder\:color-violet-500::placeholder { color:#8b5cf6; }
.on-placeholder\:border-color-violet-500::placeholder { border-color:#8b5cf6; }
.on-placeholder\:background-violet-600::placeholder { background-color:#7c3aed; }
.on-placeholder\:color-violet-600::placeholder { color:#7c3aed; }
.on-placeholder\:border-color-violet-600::placeholder { border-color:#7c3aed; }
.on-placeholder\:background-violet-700::placeholder { background-color:#6d28d9; }
.on-placeholder\:color-violet-700::placeholder { color:#6d28d9; }
.on-placeholder\:border-color-violet-700::placeholder { border-color:#6d28d9; }
.on-placeholder\:background-purple-300::placeholder { background-color:#d8b4fe; }
.on-placeholder\:color-purple-300::placeholder { color:#d8b4fe; }
.on-placeholder\:border-color-purple-300::placeholder { border-color:#d8b4fe; }
.on-placeholder\:background-purple-400::placeholder { background-color:#c084fc; }
.on-placeholder\:color-purple-400::placeholder { color:#c084fc; }
.on-placeholder\:border-color-purple-400::placeholder { border-color:#c084fc; }
.on-placeholder\:background-purple-500::placeholder { background-color:#a855f7; }
.on-placeholder\:color-purple-500::placeholder { color:#a855f7; }
.on-placeholder\:border-color-purple-500::placeholder { border-color:#a855f7; }
.on-placeholder\:background-purple-600::placeholder { background-color:#9333ea; }
.on-placeholder\:color-purple-600::placeholder { color:#9333ea; }
.on-placeholder\:border-color-purple-600::placeholder { border-color:#9333ea; }
.on-placeholder\:background-purple-700::placeholder { background-color:#7e22ce; }
.on-placeholder\:color-purple-700::placeholder { color:#7e22ce; }
.on-placeholder\:border-color-purple-700::placeholder { border-color:#7e22ce; }
.on-placeholder\:background-pink-300::placeholder { background-color:#f9a8d4; }
.on-placeholder\:color-pink-300::placeholder { color:#f9a8d4; }
.on-placeholder\:border-color-pink-300::placeholder { border-color:#f9a8d4; }
.on-placeholder\:background-pink-400::placeholder { background-color:#f472b6; }
.on-placeholder\:color-pink-400::placeholder { color:#f472b6; }
.on-placeholder\:border-color-pink-400::placeholder { border-color:#f472b6; }
.on-placeholder\:background-pink-500::placeholder { background-color:#ec4899; }
.on-placeholder\:color-pink-500::placeholder { color:#ec4899; }
.on-placeholder\:border-color-pink-500::placeholder { border-color:#ec4899; }
.on-placeholder\:background-pink-600::placeholder { background-color:#db2777; }
.on-placeholder\:color-pink-600::placeholder { color:#db2777; }
.on-placeholder\:border-color-pink-600::placeholder { border-color:#db2777; }
.on-placeholder\:background-pink-700::placeholder { background-color:#be185d; }
.on-placeholder\:color-pink-700::placeholder { color:#be185d; }
.on-placeholder\:border-color-pink-700::placeholder { border-color:#be185d; }
.on-placeholder\:background-rose-300::placeholder { background-color:#fda4af; }
.on-placeholder\:color-rose-300::placeholder { color:#fda4af; }
.on-placeholder\:border-color-rose-300::placeholder { border-color:#fda4af; }
.on-placeholder\:background-rose-400::placeholder { background-color:#fb7185; }
.on-placeholder\:color-rose-400::placeholder { color:#fb7185; }
.on-placeholder\:border-color-rose-400::placeholder { border-color:#fb7185; }
.on-placeholder\:background-rose-500::placeholder { background-color:#f43f5e; }
.on-placeholder\:color-rose-500::placeholder { color:#f43f5e; }
.on-placeholder\:border-color-rose-500::placeholder { border-color:#f43f5e; }
.on-placeholder\:background-rose-600::placeholder { background-color:#e11d48; }
.on-placeholder\:color-rose-600::placeholder { color:#e11d48; }
.on-placeholder\:border-color-rose-600::placeholder { border-color:#e11d48; }
.on-placeholder\:background-rose-700::placeholder { background-color:#be123c; }
.on-placeholder\:color-rose-700::placeholder { color:#be123c; }
.on-placeholder\:border-color-rose-700::placeholder { border-color:#be123c; }
.on-placeholder\:background-slate-300::placeholder { background-color:#cbd5e1; }
.on-placeholder\:color-slate-300::placeholder { color:#cbd5e1; }
.on-placeholder\:border-color-slate-300::placeholder { border-color:#cbd5e1; }
.on-placeholder\:background-slate-400::placeholder { background-color:#94a3b8; }
.on-placeholder\:color-slate-400::placeholder { color:#94a3b8; }
.on-placeholder\:border-color-slate-400::placeholder { border-color:#94a3b8; }
.on-placeholder\:background-slate-500::placeholder { background-color:#64748b; }
.on-placeholder\:color-slate-500::placeholder { color:#64748b; }
.on-placeholder\:border-color-slate-500::placeholder { border-color:#64748b; }
.on-placeholder\:background-slate-600::placeholder { background-color:#475569; }
.on-placeholder\:color-slate-600::placeholder { color:#475569; }
.on-placeholder\:border-color-slate-600::placeholder { border-color:#475569; }
.on-placeholder\:background-slate-700::placeholder { background-color:#334155; }
.on-placeholder\:color-slate-700::placeholder { color:#334155; }
.on-placeholder\:border-color-slate-700::placeholder { border-color:#334155; }
.on-placeholder\:background-gray-300::placeholder { background-color:#d1d5db; }
.on-placeholder\:color-gray-300::placeholder { color:#d1d5db; }
.on-placeholder\:border-color-gray-300::placeholder { border-color:#d1d5db; }
.on-placeholder\:background-gray-400::placeholder { background-color:#9ca3af; }
.on-placeholder\:color-gray-400::placeholder { color:#9ca3af; }
.on-placeholder\:border-color-gray-400::placeholder { border-color:#9ca3af; }
.on-placeholder\:background-gray-500::placeholder { background-color:#6b7280; }
.on-placeholder\:color-gray-500::placeholder { color:#6b7280; }
.on-placeholder\:border-color-gray-500::placeholder { border-color:#6b7280; }
.on-placeholder\:background-gray-600::placeholder { background-color:#4b5563; }
.on-placeholder\:color-gray-600::placeholder { color:#4b5563; }
.on-placeholder\:border-color-gray-600::placeholder { border-color:#4b5563; }
.on-placeholder\:background-gray-700::placeholder { background-color:#374151; }
.on-placeholder\:color-gray-700::placeholder { color:#374151; }
.on-placeholder\:border-color-gray-700::placeholder { border-color:#374151; }
.on-placeholder\:background-zinc-300::placeholder { background-color:#d4d4d8; }
.on-placeholder\:color-zinc-300::placeholder { color:#d4d4d8; }
.on-placeholder\:border-color-zinc-300::placeholder { border-color:#d4d4d8; }
.on-placeholder\:background-zinc-400::placeholder { background-color:#a1a1aa; }
.on-placeholder\:color-zinc-400::placeholder { color:#a1a1aa; }
.on-placeholder\:border-color-zinc-400::placeholder { border-color:#a1a1aa; }
.on-placeholder\:background-zinc-500::placeholder { background-color:#71717a; }
.on-placeholder\:color-zinc-500::placeholder { color:#71717a; }
.on-placeholder\:border-color-zinc-500::placeholder { border-color:#71717a; }
.on-placeholder\:background-zinc-600::placeholder { background-color:#52525b; }
.on-placeholder\:color-zinc-600::placeholder { color:#52525b; }
.on-placeholder\:border-color-zinc-600::placeholder { border-color:#52525b; }
.on-placeholder\:background-zinc-700::placeholder { background-color:#3f3f46; }
.on-placeholder\:color-zinc-700::placeholder { color:#3f3f46; }
.on-placeholder\:border-color-zinc-700::placeholder { border-color:#3f3f46; }
.on-placeholder\:background-stone-300::placeholder { background-color:#d6d3d1; }
.on-placeholder\:color-stone-300::placeholder { color:#d6d3d1; }
.on-placeholder\:border-color-stone-300::placeholder { border-color:#d6d3d1; }
.on-placeholder\:background-stone-400::placeholder { background-color:#a8a29e; }
.on-placeholder\:color-stone-400::placeholder { color:#a8a29e; }
.on-placeholder\:border-color-stone-400::placeholder { border-color:#a8a29e; }
.on-placeholder\:background-stone-500::placeholder { background-color:#78716c; }
.on-placeholder\:color-stone-500::placeholder { color:#78716c; }
.on-placeholder\:border-color-stone-500::placeholder { border-color:#78716c; }
.on-placeholder\:background-stone-600::placeholder { background-color:#57534e; }
.on-placeholder\:color-stone-600::placeholder { color:#57534e; }
.on-placeholder\:border-color-stone-600::placeholder { border-color:#57534e; }
.on-placeholder\:background-stone-700::placeholder { background-color:#44403c; }
.on-placeholder\:color-stone-700::placeholder { color:#44403c; }
.on-placeholder\:border-color-stone-700::placeholder { border-color:#44403c; }
.on-placeholder\:add-shadow-sm::placeholder { box-shadow:var(--santy-shadow-sm); }
.on-placeholder\:add-shadow::placeholder { box-shadow:var(--santy-shadow); }
.on-placeholder\:add-shadow-md::placeholder { box-shadow:var(--santy-shadow-md); }
.on-placeholder\:add-shadow-lg::placeholder { box-shadow:var(--santy-shadow-lg); }
.on-placeholder\:no-shadow::placeholder { box-shadow:none; }
.on-placeholder\:opacity-0::placeholder { opacity:0; }
.on-placeholder\:opacity-25::placeholder { opacity:0.25; }
.on-placeholder\:opacity-50::placeholder { opacity:0.5; }
.on-placeholder\:opacity-75::placeholder { opacity:0.75; }
.on-placeholder\:opacity-100::placeholder { opacity:1; }
.on-placeholder\:scale-90::placeholder { transform:scale(0.9); }
.on-placeholder\:scale-95::placeholder { transform:scale(0.95); }
.on-placeholder\:scale-100::placeholder { transform:scale(1); }
.on-placeholder\:scale-105::placeholder { transform:scale(1.05); }
.on-placeholder\:scale-110::placeholder { transform:scale(1.1); }
.on-placeholder\:make-hidden::placeholder { display:none; }
.on-placeholder\:make-block::placeholder { display:block; }
.on-placeholder\:make-flex::placeholder { display:flex; }
.on-placeholder\:cursor-pointer::placeholder { cursor:pointer; }
.on-placeholder\:cursor-not-allowed::placeholder { cursor:not-allowed; }
.on-placeholder\:outline-none::placeholder { outline:none; }
.on-placeholder\:text-underline::placeholder { text-decoration:underline; }
.on-placeholder\:text-no-decoration::placeholder { text-decoration:none; }
.on-placeholder\:text-bold::placeholder { font-weight:700; }
.on-placeholder\:transition-fast::placeholder { transition:var(--santy-transition-fast); }
.on-placeholder\:transition-normal::placeholder { transition:var(--santy-transition-normal); }
.on-placeholder\:add-border-1::placeholder { border:1px solid; }
.on-placeholder\:add-border-2::placeholder { border:2px solid; }
.on-placeholder\:add-border-4::placeholder { border:4px solid; }

/* on-focus-within */
.on-focus-within\:background-red-300:focus-within { background-color:#fca5a5; }
.on-focus-within\:color-red-300:focus-within { color:#fca5a5; }
.on-focus-within\:border-color-red-300:focus-within { border-color:#fca5a5; }
.on-focus-within\:background-red-400:focus-within { background-color:#f87171; }
.on-focus-within\:color-red-400:focus-within { color:#f87171; }
.on-focus-within\:border-color-red-400:focus-within { border-color:#f87171; }
.on-focus-within\:background-red-500:focus-within { background-color:#ef4444; }
.on-focus-within\:color-red-500:focus-within { color:#ef4444; }
.on-focus-within\:border-color-red-500:focus-within { border-color:#ef4444; }
.on-focus-within\:background-red-600:focus-within { background-color:#dc2626; }
.on-focus-within\:color-red-600:focus-within { color:#dc2626; }
.on-focus-within\:border-color-red-600:focus-within { border-color:#dc2626; }
.on-focus-within\:background-red-700:focus-within { background-color:#b91c1c; }
.on-focus-within\:color-red-700:focus-within { color:#b91c1c; }
.on-focus-within\:border-color-red-700:focus-within { border-color:#b91c1c; }
.on-focus-within\:background-orange-300:focus-within { background-color:#fdba74; }
.on-focus-within\:color-orange-300:focus-within { color:#fdba74; }
.on-focus-within\:border-color-orange-300:focus-within { border-color:#fdba74; }
.on-focus-within\:background-orange-400:focus-within { background-color:#fb923c; }
.on-focus-within\:color-orange-400:focus-within { color:#fb923c; }
.on-focus-within\:border-color-orange-400:focus-within { border-color:#fb923c; }
.on-focus-within\:background-orange-500:focus-within { background-color:#f97316; }
.on-focus-within\:color-orange-500:focus-within { color:#f97316; }
.on-focus-within\:border-color-orange-500:focus-within { border-color:#f97316; }
.on-focus-within\:background-orange-600:focus-within { background-color:#ea580c; }
.on-focus-within\:color-orange-600:focus-within { color:#ea580c; }
.on-focus-within\:border-color-orange-600:focus-within { border-color:#ea580c; }
.on-focus-within\:background-orange-700:focus-within { background-color:#c2410c; }
.on-focus-within\:color-orange-700:focus-within { color:#c2410c; }
.on-focus-within\:border-color-orange-700:focus-within { border-color:#c2410c; }
.on-focus-within\:background-amber-300:focus-within { background-color:#fcd34d; }
.on-focus-within\:color-amber-300:focus-within { color:#fcd34d; }
.on-focus-within\:border-color-amber-300:focus-within { border-color:#fcd34d; }
.on-focus-within\:background-amber-400:focus-within { background-color:#fbbf24; }
.on-focus-within\:color-amber-400:focus-within { color:#fbbf24; }
.on-focus-within\:border-color-amber-400:focus-within { border-color:#fbbf24; }
.on-focus-within\:background-amber-500:focus-within { background-color:#f59e0b; }
.on-focus-within\:color-amber-500:focus-within { color:#f59e0b; }
.on-focus-within\:border-color-amber-500:focus-within { border-color:#f59e0b; }
.on-focus-within\:background-amber-600:focus-within { background-color:#d97706; }
.on-focus-within\:color-amber-600:focus-within { color:#d97706; }
.on-focus-within\:border-color-amber-600:focus-within { border-color:#d97706; }
.on-focus-within\:background-amber-700:focus-within { background-color:#b45309; }
.on-focus-within\:color-amber-700:focus-within { color:#b45309; }
.on-focus-within\:border-color-amber-700:focus-within { border-color:#b45309; }
.on-focus-within\:background-yellow-300:focus-within { background-color:#fde047; }
.on-focus-within\:color-yellow-300:focus-within { color:#fde047; }
.on-focus-within\:border-color-yellow-300:focus-within { border-color:#fde047; }
.on-focus-within\:background-yellow-400:focus-within { background-color:#facc15; }
.on-focus-within\:color-yellow-400:focus-within { color:#facc15; }
.on-focus-within\:border-color-yellow-400:focus-within { border-color:#facc15; }
.on-focus-within\:background-yellow-500:focus-within { background-color:#eab308; }
.on-focus-within\:color-yellow-500:focus-within { color:#eab308; }
.on-focus-within\:border-color-yellow-500:focus-within { border-color:#eab308; }
.on-focus-within\:background-yellow-600:focus-within { background-color:#ca8a04; }
.on-focus-within\:color-yellow-600:focus-within { color:#ca8a04; }
.on-focus-within\:border-color-yellow-600:focus-within { border-color:#ca8a04; }
.on-focus-within\:background-yellow-700:focus-within { background-color:#a16207; }
.on-focus-within\:color-yellow-700:focus-within { color:#a16207; }
.on-focus-within\:border-color-yellow-700:focus-within { border-color:#a16207; }
.on-focus-within\:background-lime-300:focus-within { background-color:#bef264; }
.on-focus-within\:color-lime-300:focus-within { color:#bef264; }
.on-focus-within\:border-color-lime-300:focus-within { border-color:#bef264; }
.on-focus-within\:background-lime-400:focus-within { background-color:#a3e635; }
.on-focus-within\:color-lime-400:focus-within { color:#a3e635; }
.on-focus-within\:border-color-lime-400:focus-within { border-color:#a3e635; }
.on-focus-within\:background-lime-500:focus-within { background-color:#84cc16; }
.on-focus-within\:color-lime-500:focus-within { color:#84cc16; }
.on-focus-within\:border-color-lime-500:focus-within { border-color:#84cc16; }
.on-focus-within\:background-lime-600:focus-within { background-color:#65a30d; }
.on-focus-within\:color-lime-600:focus-within { color:#65a30d; }
.on-focus-within\:border-color-lime-600:focus-within { border-color:#65a30d; }
.on-focus-within\:background-lime-700:focus-within { background-color:#4d7c0f; }
.on-focus-within\:color-lime-700:focus-within { color:#4d7c0f; }
.on-focus-within\:border-color-lime-700:focus-within { border-color:#4d7c0f; }
.on-focus-within\:background-green-300:focus-within { background-color:#86efac; }
.on-focus-within\:color-green-300:focus-within { color:#86efac; }
.on-focus-within\:border-color-green-300:focus-within { border-color:#86efac; }
.on-focus-within\:background-green-400:focus-within { background-color:#4ade80; }
.on-focus-within\:color-green-400:focus-within { color:#4ade80; }
.on-focus-within\:border-color-green-400:focus-within { border-color:#4ade80; }
.on-focus-within\:background-green-500:focus-within { background-color:#22c55e; }
.on-focus-within\:color-green-500:focus-within { color:#22c55e; }
.on-focus-within\:border-color-green-500:focus-within { border-color:#22c55e; }
.on-focus-within\:background-green-600:focus-within { background-color:#16a34a; }
.on-focus-within\:color-green-600:focus-within { color:#16a34a; }
.on-focus-within\:border-color-green-600:focus-within { border-color:#16a34a; }
.on-focus-within\:background-green-700:focus-within { background-color:#15803d; }
.on-focus-within\:color-green-700:focus-within { color:#15803d; }
.on-focus-within\:border-color-green-700:focus-within { border-color:#15803d; }
.on-focus-within\:background-teal-300:focus-within { background-color:#5eead4; }
.on-focus-within\:color-teal-300:focus-within { color:#5eead4; }
.on-focus-within\:border-color-teal-300:focus-within { border-color:#5eead4; }
.on-focus-within\:background-teal-400:focus-within { background-color:#2dd4bf; }
.on-focus-within\:color-teal-400:focus-within { color:#2dd4bf; }
.on-focus-within\:border-color-teal-400:focus-within { border-color:#2dd4bf; }
.on-focus-within\:background-teal-500:focus-within { background-color:#14b8a6; }
.on-focus-within\:color-teal-500:focus-within { color:#14b8a6; }
.on-focus-within\:border-color-teal-500:focus-within { border-color:#14b8a6; }
.on-focus-within\:background-teal-600:focus-within { background-color:#0d9488; }
.on-focus-within\:color-teal-600:focus-within { color:#0d9488; }
.on-focus-within\:border-color-teal-600:focus-within { border-color:#0d9488; }
.on-focus-within\:background-teal-700:focus-within { background-color:#0f766e; }
.on-focus-within\:color-teal-700:focus-within { color:#0f766e; }
.on-focus-within\:border-color-teal-700:focus-within { border-color:#0f766e; }
.on-focus-within\:background-cyan-300:focus-within { background-color:#67e8f9; }
.on-focus-within\:color-cyan-300:focus-within { color:#67e8f9; }
.on-focus-within\:border-color-cyan-300:focus-within { border-color:#67e8f9; }
.on-focus-within\:background-cyan-400:focus-within { background-color:#22d3ee; }
.on-focus-within\:color-cyan-400:focus-within { color:#22d3ee; }
.on-focus-within\:border-color-cyan-400:focus-within { border-color:#22d3ee; }
.on-focus-within\:background-cyan-500:focus-within { background-color:#06b6d4; }
.on-focus-within\:color-cyan-500:focus-within { color:#06b6d4; }
.on-focus-within\:border-color-cyan-500:focus-within { border-color:#06b6d4; }
.on-focus-within\:background-cyan-600:focus-within { background-color:#0891b2; }
.on-focus-within\:color-cyan-600:focus-within { color:#0891b2; }
.on-focus-within\:border-color-cyan-600:focus-within { border-color:#0891b2; }
.on-focus-within\:background-cyan-700:focus-within { background-color:#0e7490; }
.on-focus-within\:color-cyan-700:focus-within { color:#0e7490; }
.on-focus-within\:border-color-cyan-700:focus-within { border-color:#0e7490; }
.on-focus-within\:background-blue-300:focus-within { background-color:#93c5fd; }
.on-focus-within\:color-blue-300:focus-within { color:#93c5fd; }
.on-focus-within\:border-color-blue-300:focus-within { border-color:#93c5fd; }
.on-focus-within\:background-blue-400:focus-within { background-color:#60a5fa; }
.on-focus-within\:color-blue-400:focus-within { color:#60a5fa; }
.on-focus-within\:border-color-blue-400:focus-within { border-color:#60a5fa; }
.on-focus-within\:background-blue-500:focus-within { background-color:#3b82f6; }
.on-focus-within\:color-blue-500:focus-within { color:#3b82f6; }
.on-focus-within\:border-color-blue-500:focus-within { border-color:#3b82f6; }
.on-focus-within\:background-blue-600:focus-within { background-color:#2563eb; }
.on-focus-within\:color-blue-600:focus-within { color:#2563eb; }
.on-focus-within\:border-color-blue-600:focus-within { border-color:#2563eb; }
.on-focus-within\:background-blue-700:focus-within { background-color:#1d4ed8; }
.on-focus-within\:color-blue-700:focus-within { color:#1d4ed8; }
.on-focus-within\:border-color-blue-700:focus-within { border-color:#1d4ed8; }
.on-focus-within\:background-indigo-300:focus-within { background-color:#a5b4fc; }
.on-focus-within\:color-indigo-300:focus-within { color:#a5b4fc; }
.on-focus-within\:border-color-indigo-300:focus-within { border-color:#a5b4fc; }
.on-focus-within\:background-indigo-400:focus-within { background-color:#818cf8; }
.on-focus-within\:color-indigo-400:focus-within { color:#818cf8; }
.on-focus-within\:border-color-indigo-400:focus-within { border-color:#818cf8; }
.on-focus-within\:background-indigo-500:focus-within { background-color:#6366f1; }
.on-focus-within\:color-indigo-500:focus-within { color:#6366f1; }
.on-focus-within\:border-color-indigo-500:focus-within { border-color:#6366f1; }
.on-focus-within\:background-indigo-600:focus-within { background-color:#4f46e5; }
.on-focus-within\:color-indigo-600:focus-within { color:#4f46e5; }
.on-focus-within\:border-color-indigo-600:focus-within { border-color:#4f46e5; }
.on-focus-within\:background-indigo-700:focus-within { background-color:#4338ca; }
.on-focus-within\:color-indigo-700:focus-within { color:#4338ca; }
.on-focus-within\:border-color-indigo-700:focus-within { border-color:#4338ca; }
.on-focus-within\:background-violet-300:focus-within { background-color:#c4b5fd; }
.on-focus-within\:color-violet-300:focus-within { color:#c4b5fd; }
.on-focus-within\:border-color-violet-300:focus-within { border-color:#c4b5fd; }
.on-focus-within\:background-violet-400:focus-within { background-color:#a78bfa; }
.on-focus-within\:color-violet-400:focus-within { color:#a78bfa; }
.on-focus-within\:border-color-violet-400:focus-within { border-color:#a78bfa; }
.on-focus-within\:background-violet-500:focus-within { background-color:#8b5cf6; }
.on-focus-within\:color-violet-500:focus-within { color:#8b5cf6; }
.on-focus-within\:border-color-violet-500:focus-within { border-color:#8b5cf6; }
.on-focus-within\:background-violet-600:focus-within { background-color:#7c3aed; }
.on-focus-within\:color-violet-600:focus-within { color:#7c3aed; }
.on-focus-within\:border-color-violet-600:focus-within { border-color:#7c3aed; }
.on-focus-within\:background-violet-700:focus-within { background-color:#6d28d9; }
.on-focus-within\:color-violet-700:focus-within { color:#6d28d9; }
.on-focus-within\:border-color-violet-700:focus-within { border-color:#6d28d9; }
.on-focus-within\:background-purple-300:focus-within { background-color:#d8b4fe; }
.on-focus-within\:color-purple-300:focus-within { color:#d8b4fe; }
.on-focus-within\:border-color-purple-300:focus-within { border-color:#d8b4fe; }
.on-focus-within\:background-purple-400:focus-within { background-color:#c084fc; }
.on-focus-within\:color-purple-400:focus-within { color:#c084fc; }
.on-focus-within\:border-color-purple-400:focus-within { border-color:#c084fc; }
.on-focus-within\:background-purple-500:focus-within { background-color:#a855f7; }
.on-focus-within\:color-purple-500:focus-within { color:#a855f7; }
.on-focus-within\:border-color-purple-500:focus-within { border-color:#a855f7; }
.on-focus-within\:background-purple-600:focus-within { background-color:#9333ea; }
.on-focus-within\:color-purple-600:focus-within { color:#9333ea; }
.on-focus-within\:border-color-purple-600:focus-within { border-color:#9333ea; }
.on-focus-within\:background-purple-700:focus-within { background-color:#7e22ce; }
.on-focus-within\:color-purple-700:focus-within { color:#7e22ce; }
.on-focus-within\:border-color-purple-700:focus-within { border-color:#7e22ce; }
.on-focus-within\:background-pink-300:focus-within { background-color:#f9a8d4; }
.on-focus-within\:color-pink-300:focus-within { color:#f9a8d4; }
.on-focus-within\:border-color-pink-300:focus-within { border-color:#f9a8d4; }
.on-focus-within\:background-pink-400:focus-within { background-color:#f472b6; }
.on-focus-within\:color-pink-400:focus-within { color:#f472b6; }
.on-focus-within\:border-color-pink-400:focus-within { border-color:#f472b6; }
.on-focus-within\:background-pink-500:focus-within { background-color:#ec4899; }
.on-focus-within\:color-pink-500:focus-within { color:#ec4899; }
.on-focus-within\:border-color-pink-500:focus-within { border-color:#ec4899; }
.on-focus-within\:background-pink-600:focus-within { background-color:#db2777; }
.on-focus-within\:color-pink-600:focus-within { color:#db2777; }
.on-focus-within\:border-color-pink-600:focus-within { border-color:#db2777; }
.on-focus-within\:background-pink-700:focus-within { background-color:#be185d; }
.on-focus-within\:color-pink-700:focus-within { color:#be185d; }
.on-focus-within\:border-color-pink-700:focus-within { border-color:#be185d; }
.on-focus-within\:background-rose-300:focus-within { background-color:#fda4af; }
.on-focus-within\:color-rose-300:focus-within { color:#fda4af; }
.on-focus-within\:border-color-rose-300:focus-within { border-color:#fda4af; }
.on-focus-within\:background-rose-400:focus-within { background-color:#fb7185; }
.on-focus-within\:color-rose-400:focus-within { color:#fb7185; }
.on-focus-within\:border-color-rose-400:focus-within { border-color:#fb7185; }
.on-focus-within\:background-rose-500:focus-within { background-color:#f43f5e; }
.on-focus-within\:color-rose-500:focus-within { color:#f43f5e; }
.on-focus-within\:border-color-rose-500:focus-within { border-color:#f43f5e; }
.on-focus-within\:background-rose-600:focus-within { background-color:#e11d48; }
.on-focus-within\:color-rose-600:focus-within { color:#e11d48; }
.on-focus-within\:border-color-rose-600:focus-within { border-color:#e11d48; }
.on-focus-within\:background-rose-700:focus-within { background-color:#be123c; }
.on-focus-within\:color-rose-700:focus-within { color:#be123c; }
.on-focus-within\:border-color-rose-700:focus-within { border-color:#be123c; }
.on-focus-within\:background-slate-300:focus-within { background-color:#cbd5e1; }
.on-focus-within\:color-slate-300:focus-within { color:#cbd5e1; }
.on-focus-within\:border-color-slate-300:focus-within { border-color:#cbd5e1; }
.on-focus-within\:background-slate-400:focus-within { background-color:#94a3b8; }
.on-focus-within\:color-slate-400:focus-within { color:#94a3b8; }
.on-focus-within\:border-color-slate-400:focus-within { border-color:#94a3b8; }
.on-focus-within\:background-slate-500:focus-within { background-color:#64748b; }
.on-focus-within\:color-slate-500:focus-within { color:#64748b; }
.on-focus-within\:border-color-slate-500:focus-within { border-color:#64748b; }
.on-focus-within\:background-slate-600:focus-within { background-color:#475569; }
.on-focus-within\:color-slate-600:focus-within { color:#475569; }
.on-focus-within\:border-color-slate-600:focus-within { border-color:#475569; }
.on-focus-within\:background-slate-700:focus-within { background-color:#334155; }
.on-focus-within\:color-slate-700:focus-within { color:#334155; }
.on-focus-within\:border-color-slate-700:focus-within { border-color:#334155; }
.on-focus-within\:background-gray-300:focus-within { background-color:#d1d5db; }
.on-focus-within\:color-gray-300:focus-within { color:#d1d5db; }
.on-focus-within\:border-color-gray-300:focus-within { border-color:#d1d5db; }
.on-focus-within\:background-gray-400:focus-within { background-color:#9ca3af; }
.on-focus-within\:color-gray-400:focus-within { color:#9ca3af; }
.on-focus-within\:border-color-gray-400:focus-within { border-color:#9ca3af; }
.on-focus-within\:background-gray-500:focus-within { background-color:#6b7280; }
.on-focus-within\:color-gray-500:focus-within { color:#6b7280; }
.on-focus-within\:border-color-gray-500:focus-within { border-color:#6b7280; }
.on-focus-within\:background-gray-600:focus-within { background-color:#4b5563; }
.on-focus-within\:color-gray-600:focus-within { color:#4b5563; }
.on-focus-within\:border-color-gray-600:focus-within { border-color:#4b5563; }
.on-focus-within\:background-gray-700:focus-within { background-color:#374151; }
.on-focus-within\:color-gray-700:focus-within { color:#374151; }
.on-focus-within\:border-color-gray-700:focus-within { border-color:#374151; }
.on-focus-within\:background-zinc-300:focus-within { background-color:#d4d4d8; }
.on-focus-within\:color-zinc-300:focus-within { color:#d4d4d8; }
.on-focus-within\:border-color-zinc-300:focus-within { border-color:#d4d4d8; }
.on-focus-within\:background-zinc-400:focus-within { background-color:#a1a1aa; }
.on-focus-within\:color-zinc-400:focus-within { color:#a1a1aa; }
.on-focus-within\:border-color-zinc-400:focus-within { border-color:#a1a1aa; }
.on-focus-within\:background-zinc-500:focus-within { background-color:#71717a; }
.on-focus-within\:color-zinc-500:focus-within { color:#71717a; }
.on-focus-within\:border-color-zinc-500:focus-within { border-color:#71717a; }
.on-focus-within\:background-zinc-600:focus-within { background-color:#52525b; }
.on-focus-within\:color-zinc-600:focus-within { color:#52525b; }
.on-focus-within\:border-color-zinc-600:focus-within { border-color:#52525b; }
.on-focus-within\:background-zinc-700:focus-within { background-color:#3f3f46; }
.on-focus-within\:color-zinc-700:focus-within { color:#3f3f46; }
.on-focus-within\:border-color-zinc-700:focus-within { border-color:#3f3f46; }
.on-focus-within\:background-stone-300:focus-within { background-color:#d6d3d1; }
.on-focus-within\:color-stone-300:focus-within { color:#d6d3d1; }
.on-focus-within\:border-color-stone-300:focus-within { border-color:#d6d3d1; }
.on-focus-within\:background-stone-400:focus-within { background-color:#a8a29e; }
.on-focus-within\:color-stone-400:focus-within { color:#a8a29e; }
.on-focus-within\:border-color-stone-400:focus-within { border-color:#a8a29e; }
.on-focus-within\:background-stone-500:focus-within { background-color:#78716c; }
.on-focus-within\:color-stone-500:focus-within { color:#78716c; }
.on-focus-within\:border-color-stone-500:focus-within { border-color:#78716c; }
.on-focus-within\:background-stone-600:focus-within { background-color:#57534e; }
.on-focus-within\:color-stone-600:focus-within { color:#57534e; }
.on-focus-within\:border-color-stone-600:focus-within { border-color:#57534e; }
.on-focus-within\:background-stone-700:focus-within { background-color:#44403c; }
.on-focus-within\:color-stone-700:focus-within { color:#44403c; }
.on-focus-within\:border-color-stone-700:focus-within { border-color:#44403c; }
.on-focus-within\:add-shadow-sm:focus-within { box-shadow:var(--santy-shadow-sm); }
.on-focus-within\:add-shadow:focus-within { box-shadow:var(--santy-shadow); }
.on-focus-within\:add-shadow-md:focus-within { box-shadow:var(--santy-shadow-md); }
.on-focus-within\:add-shadow-lg:focus-within { box-shadow:var(--santy-shadow-lg); }
.on-focus-within\:no-shadow:focus-within { box-shadow:none; }
.on-focus-within\:opacity-0:focus-within { opacity:0; }
.on-focus-within\:opacity-25:focus-within { opacity:0.25; }
.on-focus-within\:opacity-50:focus-within { opacity:0.5; }
.on-focus-within\:opacity-75:focus-within { opacity:0.75; }
.on-focus-within\:opacity-100:focus-within { opacity:1; }
.on-focus-within\:scale-90:focus-within { transform:scale(0.9); }
.on-focus-within\:scale-95:focus-within { transform:scale(0.95); }
.on-focus-within\:scale-100:focus-within { transform:scale(1); }
.on-focus-within\:scale-105:focus-within { transform:scale(1.05); }
.on-focus-within\:scale-110:focus-within { transform:scale(1.1); }
.on-focus-within\:make-hidden:focus-within { display:none; }
.on-focus-within\:make-block:focus-within { display:block; }
.on-focus-within\:make-flex:focus-within { display:flex; }
.on-focus-within\:cursor-pointer:focus-within { cursor:pointer; }
.on-focus-within\:cursor-not-allowed:focus-within { cursor:not-allowed; }
.on-focus-within\:outline-none:focus-within { outline:none; }
.on-focus-within\:text-underline:focus-within { text-decoration:underline; }
.on-focus-within\:text-no-decoration:focus-within { text-decoration:none; }
.on-focus-within\:text-bold:focus-within { font-weight:700; }
.on-focus-within\:transition-fast:focus-within { transition:var(--santy-transition-fast); }
.on-focus-within\:transition-normal:focus-within { transition:var(--santy-transition-normal); }
.on-focus-within\:add-border-1:focus-within { border:1px solid; }
.on-focus-within\:add-border-2:focus-within { border:2px solid; }
.on-focus-within\:add-border-4:focus-within { border:4px solid; }

/* on-focus-visible */
.on-focus-visible\:background-red-300:focus-visible { background-color:#fca5a5; }
.on-focus-visible\:color-red-300:focus-visible { color:#fca5a5; }
.on-focus-visible\:border-color-red-300:focus-visible { border-color:#fca5a5; }
.on-focus-visible\:background-red-400:focus-visible { background-color:#f87171; }
.on-focus-visible\:color-red-400:focus-visible { color:#f87171; }
.on-focus-visible\:border-color-red-400:focus-visible { border-color:#f87171; }
.on-focus-visible\:background-red-500:focus-visible { background-color:#ef4444; }
.on-focus-visible\:color-red-500:focus-visible { color:#ef4444; }
.on-focus-visible\:border-color-red-500:focus-visible { border-color:#ef4444; }
.on-focus-visible\:background-red-600:focus-visible { background-color:#dc2626; }
.on-focus-visible\:color-red-600:focus-visible { color:#dc2626; }
.on-focus-visible\:border-color-red-600:focus-visible { border-color:#dc2626; }
.on-focus-visible\:background-red-700:focus-visible { background-color:#b91c1c; }
.on-focus-visible\:color-red-700:focus-visible { color:#b91c1c; }
.on-focus-visible\:border-color-red-700:focus-visible { border-color:#b91c1c; }
.on-focus-visible\:background-orange-300:focus-visible { background-color:#fdba74; }
.on-focus-visible\:color-orange-300:focus-visible { color:#fdba74; }
.on-focus-visible\:border-color-orange-300:focus-visible { border-color:#fdba74; }
.on-focus-visible\:background-orange-400:focus-visible { background-color:#fb923c; }
.on-focus-visible\:color-orange-400:focus-visible { color:#fb923c; }
.on-focus-visible\:border-color-orange-400:focus-visible { border-color:#fb923c; }
.on-focus-visible\:background-orange-500:focus-visible { background-color:#f97316; }
.on-focus-visible\:color-orange-500:focus-visible { color:#f97316; }
.on-focus-visible\:border-color-orange-500:focus-visible { border-color:#f97316; }
.on-focus-visible\:background-orange-600:focus-visible { background-color:#ea580c; }
.on-focus-visible\:color-orange-600:focus-visible { color:#ea580c; }
.on-focus-visible\:border-color-orange-600:focus-visible { border-color:#ea580c; }
.on-focus-visible\:background-orange-700:focus-visible { background-color:#c2410c; }
.on-focus-visible\:color-orange-700:focus-visible { color:#c2410c; }
.on-focus-visible\:border-color-orange-700:focus-visible { border-color:#c2410c; }
.on-focus-visible\:background-amber-300:focus-visible { background-color:#fcd34d; }
.on-focus-visible\:color-amber-300:focus-visible { color:#fcd34d; }
.on-focus-visible\:border-color-amber-300:focus-visible { border-color:#fcd34d; }
.on-focus-visible\:background-amber-400:focus-visible { background-color:#fbbf24; }
.on-focus-visible\:color-amber-400:focus-visible { color:#fbbf24; }
.on-focus-visible\:border-color-amber-400:focus-visible { border-color:#fbbf24; }
.on-focus-visible\:background-amber-500:focus-visible { background-color:#f59e0b; }
.on-focus-visible\:color-amber-500:focus-visible { color:#f59e0b; }
.on-focus-visible\:border-color-amber-500:focus-visible { border-color:#f59e0b; }
.on-focus-visible\:background-amber-600:focus-visible { background-color:#d97706; }
.on-focus-visible\:color-amber-600:focus-visible { color:#d97706; }
.on-focus-visible\:border-color-amber-600:focus-visible { border-color:#d97706; }
.on-focus-visible\:background-amber-700:focus-visible { background-color:#b45309; }
.on-focus-visible\:color-amber-700:focus-visible { color:#b45309; }
.on-focus-visible\:border-color-amber-700:focus-visible { border-color:#b45309; }
.on-focus-visible\:background-yellow-300:focus-visible { background-color:#fde047; }
.on-focus-visible\:color-yellow-300:focus-visible { color:#fde047; }
.on-focus-visible\:border-color-yellow-300:focus-visible { border-color:#fde047; }
.on-focus-visible\:background-yellow-400:focus-visible { background-color:#facc15; }
.on-focus-visible\:color-yellow-400:focus-visible { color:#facc15; }
.on-focus-visible\:border-color-yellow-400:focus-visible { border-color:#facc15; }
.on-focus-visible\:background-yellow-500:focus-visible { background-color:#eab308; }
.on-focus-visible\:color-yellow-500:focus-visible { color:#eab308; }
.on-focus-visible\:border-color-yellow-500:focus-visible { border-color:#eab308; }
.on-focus-visible\:background-yellow-600:focus-visible { background-color:#ca8a04; }
.on-focus-visible\:color-yellow-600:focus-visible { color:#ca8a04; }
.on-focus-visible\:border-color-yellow-600:focus-visible { border-color:#ca8a04; }
.on-focus-visible\:background-yellow-700:focus-visible { background-color:#a16207; }
.on-focus-visible\:color-yellow-700:focus-visible { color:#a16207; }
.on-focus-visible\:border-color-yellow-700:focus-visible { border-color:#a16207; }
.on-focus-visible\:background-lime-300:focus-visible { background-color:#bef264; }
.on-focus-visible\:color-lime-300:focus-visible { color:#bef264; }
.on-focus-visible\:border-color-lime-300:focus-visible { border-color:#bef264; }
.on-focus-visible\:background-lime-400:focus-visible { background-color:#a3e635; }
.on-focus-visible\:color-lime-400:focus-visible { color:#a3e635; }
.on-focus-visible\:border-color-lime-400:focus-visible { border-color:#a3e635; }
.on-focus-visible\:background-lime-500:focus-visible { background-color:#84cc16; }
.on-focus-visible\:color-lime-500:focus-visible { color:#84cc16; }
.on-focus-visible\:border-color-lime-500:focus-visible { border-color:#84cc16; }
.on-focus-visible\:background-lime-600:focus-visible { background-color:#65a30d; }
.on-focus-visible\:color-lime-600:focus-visible { color:#65a30d; }
.on-focus-visible\:border-color-lime-600:focus-visible { border-color:#65a30d; }
.on-focus-visible\:background-lime-700:focus-visible { background-color:#4d7c0f; }
.on-focus-visible\:color-lime-700:focus-visible { color:#4d7c0f; }
.on-focus-visible\:border-color-lime-700:focus-visible { border-color:#4d7c0f; }
.on-focus-visible\:background-green-300:focus-visible { background-color:#86efac; }
.on-focus-visible\:color-green-300:focus-visible { color:#86efac; }
.on-focus-visible\:border-color-green-300:focus-visible { border-color:#86efac; }
.on-focus-visible\:background-green-400:focus-visible { background-color:#4ade80; }
.on-focus-visible\:color-green-400:focus-visible { color:#4ade80; }
.on-focus-visible\:border-color-green-400:focus-visible { border-color:#4ade80; }
.on-focus-visible\:background-green-500:focus-visible { background-color:#22c55e; }
.on-focus-visible\:color-green-500:focus-visible { color:#22c55e; }
.on-focus-visible\:border-color-green-500:focus-visible { border-color:#22c55e; }
.on-focus-visible\:background-green-600:focus-visible { background-color:#16a34a; }
.on-focus-visible\:color-green-600:focus-visible { color:#16a34a; }
.on-focus-visible\:border-color-green-600:focus-visible { border-color:#16a34a; }
.on-focus-visible\:background-green-700:focus-visible { background-color:#15803d; }
.on-focus-visible\:color-green-700:focus-visible { color:#15803d; }
.on-focus-visible\:border-color-green-700:focus-visible { border-color:#15803d; }
.on-focus-visible\:background-teal-300:focus-visible { background-color:#5eead4; }
.on-focus-visible\:color-teal-300:focus-visible { color:#5eead4; }
.on-focus-visible\:border-color-teal-300:focus-visible { border-color:#5eead4; }
.on-focus-visible\:background-teal-400:focus-visible { background-color:#2dd4bf; }
.on-focus-visible\:color-teal-400:focus-visible { color:#2dd4bf; }
.on-focus-visible\:border-color-teal-400:focus-visible { border-color:#2dd4bf; }
.on-focus-visible\:background-teal-500:focus-visible { background-color:#14b8a6; }
.on-focus-visible\:color-teal-500:focus-visible { color:#14b8a6; }
.on-focus-visible\:border-color-teal-500:focus-visible { border-color:#14b8a6; }
.on-focus-visible\:background-teal-600:focus-visible { background-color:#0d9488; }
.on-focus-visible\:color-teal-600:focus-visible { color:#0d9488; }
.on-focus-visible\:border-color-teal-600:focus-visible { border-color:#0d9488; }
.on-focus-visible\:background-teal-700:focus-visible { background-color:#0f766e; }
.on-focus-visible\:color-teal-700:focus-visible { color:#0f766e; }
.on-focus-visible\:border-color-teal-700:focus-visible { border-color:#0f766e; }
.on-focus-visible\:background-cyan-300:focus-visible { background-color:#67e8f9; }
.on-focus-visible\:color-cyan-300:focus-visible { color:#67e8f9; }
.on-focus-visible\:border-color-cyan-300:focus-visible { border-color:#67e8f9; }
.on-focus-visible\:background-cyan-400:focus-visible { background-color:#22d3ee; }
.on-focus-visible\:color-cyan-400:focus-visible { color:#22d3ee; }
.on-focus-visible\:border-color-cyan-400:focus-visible { border-color:#22d3ee; }
.on-focus-visible\:background-cyan-500:focus-visible { background-color:#06b6d4; }
.on-focus-visible\:color-cyan-500:focus-visible { color:#06b6d4; }
.on-focus-visible\:border-color-cyan-500:focus-visible { border-color:#06b6d4; }
.on-focus-visible\:background-cyan-600:focus-visible { background-color:#0891b2; }
.on-focus-visible\:color-cyan-600:focus-visible { color:#0891b2; }
.on-focus-visible\:border-color-cyan-600:focus-visible { border-color:#0891b2; }
.on-focus-visible\:background-cyan-700:focus-visible { background-color:#0e7490; }
.on-focus-visible\:color-cyan-700:focus-visible { color:#0e7490; }
.on-focus-visible\:border-color-cyan-700:focus-visible { border-color:#0e7490; }
.on-focus-visible\:background-blue-300:focus-visible { background-color:#93c5fd; }
.on-focus-visible\:color-blue-300:focus-visible { color:#93c5fd; }
.on-focus-visible\:border-color-blue-300:focus-visible { border-color:#93c5fd; }
.on-focus-visible\:background-blue-400:focus-visible { background-color:#60a5fa; }
.on-focus-visible\:color-blue-400:focus-visible { color:#60a5fa; }
.on-focus-visible\:border-color-blue-400:focus-visible { border-color:#60a5fa; }
.on-focus-visible\:background-blue-500:focus-visible { background-color:#3b82f6; }
.on-focus-visible\:color-blue-500:focus-visible { color:#3b82f6; }
.on-focus-visible\:border-color-blue-500:focus-visible { border-color:#3b82f6; }
.on-focus-visible\:background-blue-600:focus-visible { background-color:#2563eb; }
.on-focus-visible\:color-blue-600:focus-visible { color:#2563eb; }
.on-focus-visible\:border-color-blue-600:focus-visible { border-color:#2563eb; }
.on-focus-visible\:background-blue-700:focus-visible { background-color:#1d4ed8; }
.on-focus-visible\:color-blue-700:focus-visible { color:#1d4ed8; }
.on-focus-visible\:border-color-blue-700:focus-visible { border-color:#1d4ed8; }
.on-focus-visible\:background-indigo-300:focus-visible { background-color:#a5b4fc; }
.on-focus-visible\:color-indigo-300:focus-visible { color:#a5b4fc; }
.on-focus-visible\:border-color-indigo-300:focus-visible { border-color:#a5b4fc; }
.on-focus-visible\:background-indigo-400:focus-visible { background-color:#818cf8; }
.on-focus-visible\:color-indigo-400:focus-visible { color:#818cf8; }
.on-focus-visible\:border-color-indigo-400:focus-visible { border-color:#818cf8; }
.on-focus-visible\:background-indigo-500:focus-visible { background-color:#6366f1; }
.on-focus-visible\:color-indigo-500:focus-visible { color:#6366f1; }
.on-focus-visible\:border-color-indigo-500:focus-visible { border-color:#6366f1; }
.on-focus-visible\:background-indigo-600:focus-visible { background-color:#4f46e5; }
.on-focus-visible\:color-indigo-600:focus-visible { color:#4f46e5; }
.on-focus-visible\:border-color-indigo-600:focus-visible { border-color:#4f46e5; }
.on-focus-visible\:background-indigo-700:focus-visible { background-color:#4338ca; }
.on-focus-visible\:color-indigo-700:focus-visible { color:#4338ca; }
.on-focus-visible\:border-color-indigo-700:focus-visible { border-color:#4338ca; }
.on-focus-visible\:background-violet-300:focus-visible { background-color:#c4b5fd; }
.on-focus-visible\:color-violet-300:focus-visible { color:#c4b5fd; }
.on-focus-visible\:border-color-violet-300:focus-visible { border-color:#c4b5fd; }
.on-focus-visible\:background-violet-400:focus-visible { background-color:#a78bfa; }
.on-focus-visible\:color-violet-400:focus-visible { color:#a78bfa; }
.on-focus-visible\:border-color-violet-400:focus-visible { border-color:#a78bfa; }
.on-focus-visible\:background-violet-500:focus-visible { background-color:#8b5cf6; }
.on-focus-visible\:color-violet-500:focus-visible { color:#8b5cf6; }
.on-focus-visible\:border-color-violet-500:focus-visible { border-color:#8b5cf6; }
.on-focus-visible\:background-violet-600:focus-visible { background-color:#7c3aed; }
.on-focus-visible\:color-violet-600:focus-visible { color:#7c3aed; }
.on-focus-visible\:border-color-violet-600:focus-visible { border-color:#7c3aed; }
.on-focus-visible\:background-violet-700:focus-visible { background-color:#6d28d9; }
.on-focus-visible\:color-violet-700:focus-visible { color:#6d28d9; }
.on-focus-visible\:border-color-violet-700:focus-visible { border-color:#6d28d9; }
.on-focus-visible\:background-purple-300:focus-visible { background-color:#d8b4fe; }
.on-focus-visible\:color-purple-300:focus-visible { color:#d8b4fe; }
.on-focus-visible\:border-color-purple-300:focus-visible { border-color:#d8b4fe; }
.on-focus-visible\:background-purple-400:focus-visible { background-color:#c084fc; }
.on-focus-visible\:color-purple-400:focus-visible { color:#c084fc; }
.on-focus-visible\:border-color-purple-400:focus-visible { border-color:#c084fc; }
.on-focus-visible\:background-purple-500:focus-visible { background-color:#a855f7; }
.on-focus-visible\:color-purple-500:focus-visible { color:#a855f7; }
.on-focus-visible\:border-color-purple-500:focus-visible { border-color:#a855f7; }
.on-focus-visible\:background-purple-600:focus-visible { background-color:#9333ea; }
.on-focus-visible\:color-purple-600:focus-visible { color:#9333ea; }
.on-focus-visible\:border-color-purple-600:focus-visible { border-color:#9333ea; }
.on-focus-visible\:background-purple-700:focus-visible { background-color:#7e22ce; }
.on-focus-visible\:color-purple-700:focus-visible { color:#7e22ce; }
.on-focus-visible\:border-color-purple-700:focus-visible { border-color:#7e22ce; }
.on-focus-visible\:background-pink-300:focus-visible { background-color:#f9a8d4; }
.on-focus-visible\:color-pink-300:focus-visible { color:#f9a8d4; }
.on-focus-visible\:border-color-pink-300:focus-visible { border-color:#f9a8d4; }
.on-focus-visible\:background-pink-400:focus-visible { background-color:#f472b6; }
.on-focus-visible\:color-pink-400:focus-visible { color:#f472b6; }
.on-focus-visible\:border-color-pink-400:focus-visible { border-color:#f472b6; }
.on-focus-visible\:background-pink-500:focus-visible { background-color:#ec4899; }
.on-focus-visible\:color-pink-500:focus-visible { color:#ec4899; }
.on-focus-visible\:border-color-pink-500:focus-visible { border-color:#ec4899; }
.on-focus-visible\:background-pink-600:focus-visible { background-color:#db2777; }
.on-focus-visible\:color-pink-600:focus-visible { color:#db2777; }
.on-focus-visible\:border-color-pink-600:focus-visible { border-color:#db2777; }
.on-focus-visible\:background-pink-700:focus-visible { background-color:#be185d; }
.on-focus-visible\:color-pink-700:focus-visible { color:#be185d; }
.on-focus-visible\:border-color-pink-700:focus-visible { border-color:#be185d; }
.on-focus-visible\:background-rose-300:focus-visible { background-color:#fda4af; }
.on-focus-visible\:color-rose-300:focus-visible { color:#fda4af; }
.on-focus-visible\:border-color-rose-300:focus-visible { border-color:#fda4af; }
.on-focus-visible\:background-rose-400:focus-visible { background-color:#fb7185; }
.on-focus-visible\:color-rose-400:focus-visible { color:#fb7185; }
.on-focus-visible\:border-color-rose-400:focus-visible { border-color:#fb7185; }
.on-focus-visible\:background-rose-500:focus-visible { background-color:#f43f5e; }
.on-focus-visible\:color-rose-500:focus-visible { color:#f43f5e; }
.on-focus-visible\:border-color-rose-500:focus-visible { border-color:#f43f5e; }
.on-focus-visible\:background-rose-600:focus-visible { background-color:#e11d48; }
.on-focus-visible\:color-rose-600:focus-visible { color:#e11d48; }
.on-focus-visible\:border-color-rose-600:focus-visible { border-color:#e11d48; }
.on-focus-visible\:background-rose-700:focus-visible { background-color:#be123c; }
.on-focus-visible\:color-rose-700:focus-visible { color:#be123c; }
.on-focus-visible\:border-color-rose-700:focus-visible { border-color:#be123c; }
.on-focus-visible\:background-slate-300:focus-visible { background-color:#cbd5e1; }
.on-focus-visible\:color-slate-300:focus-visible { color:#cbd5e1; }
.on-focus-visible\:border-color-slate-300:focus-visible { border-color:#cbd5e1; }
.on-focus-visible\:background-slate-400:focus-visible { background-color:#94a3b8; }
.on-focus-visible\:color-slate-400:focus-visible { color:#94a3b8; }
.on-focus-visible\:border-color-slate-400:focus-visible { border-color:#94a3b8; }
.on-focus-visible\:background-slate-500:focus-visible { background-color:#64748b; }
.on-focus-visible\:color-slate-500:focus-visible { color:#64748b; }
.on-focus-visible\:border-color-slate-500:focus-visible { border-color:#64748b; }
.on-focus-visible\:background-slate-600:focus-visible { background-color:#475569; }
.on-focus-visible\:color-slate-600:focus-visible { color:#475569; }
.on-focus-visible\:border-color-slate-600:focus-visible { border-color:#475569; }
.on-focus-visible\:background-slate-700:focus-visible { background-color:#334155; }
.on-focus-visible\:color-slate-700:focus-visible { color:#334155; }
.on-focus-visible\:border-color-slate-700:focus-visible { border-color:#334155; }
.on-focus-visible\:background-gray-300:focus-visible { background-color:#d1d5db; }
.on-focus-visible\:color-gray-300:focus-visible { color:#d1d5db; }
.on-focus-visible\:border-color-gray-300:focus-visible { border-color:#d1d5db; }
.on-focus-visible\:background-gray-400:focus-visible { background-color:#9ca3af; }
.on-focus-visible\:color-gray-400:focus-visible { color:#9ca3af; }
.on-focus-visible\:border-color-gray-400:focus-visible { border-color:#9ca3af; }
.on-focus-visible\:background-gray-500:focus-visible { background-color:#6b7280; }
.on-focus-visible\:color-gray-500:focus-visible { color:#6b7280; }
.on-focus-visible\:border-color-gray-500:focus-visible { border-color:#6b7280; }
.on-focus-visible\:background-gray-600:focus-visible { background-color:#4b5563; }
.on-focus-visible\:color-gray-600:focus-visible { color:#4b5563; }
.on-focus-visible\:border-color-gray-600:focus-visible { border-color:#4b5563; }
.on-focus-visible\:background-gray-700:focus-visible { background-color:#374151; }
.on-focus-visible\:color-gray-700:focus-visible { color:#374151; }
.on-focus-visible\:border-color-gray-700:focus-visible { border-color:#374151; }
.on-focus-visible\:background-zinc-300:focus-visible { background-color:#d4d4d8; }
.on-focus-visible\:color-zinc-300:focus-visible { color:#d4d4d8; }
.on-focus-visible\:border-color-zinc-300:focus-visible { border-color:#d4d4d8; }
.on-focus-visible\:background-zinc-400:focus-visible { background-color:#a1a1aa; }
.on-focus-visible\:color-zinc-400:focus-visible { color:#a1a1aa; }
.on-focus-visible\:border-color-zinc-400:focus-visible { border-color:#a1a1aa; }
.on-focus-visible\:background-zinc-500:focus-visible { background-color:#71717a; }
.on-focus-visible\:color-zinc-500:focus-visible { color:#71717a; }
.on-focus-visible\:border-color-zinc-500:focus-visible { border-color:#71717a; }
.on-focus-visible\:background-zinc-600:focus-visible { background-color:#52525b; }
.on-focus-visible\:color-zinc-600:focus-visible { color:#52525b; }
.on-focus-visible\:border-color-zinc-600:focus-visible { border-color:#52525b; }
.on-focus-visible\:background-zinc-700:focus-visible { background-color:#3f3f46; }
.on-focus-visible\:color-zinc-700:focus-visible { color:#3f3f46; }
.on-focus-visible\:border-color-zinc-700:focus-visible { border-color:#3f3f46; }
.on-focus-visible\:background-stone-300:focus-visible { background-color:#d6d3d1; }
.on-focus-visible\:color-stone-300:focus-visible { color:#d6d3d1; }
.on-focus-visible\:border-color-stone-300:focus-visible { border-color:#d6d3d1; }
.on-focus-visible\:background-stone-400:focus-visible { background-color:#a8a29e; }
.on-focus-visible\:color-stone-400:focus-visible { color:#a8a29e; }
.on-focus-visible\:border-color-stone-400:focus-visible { border-color:#a8a29e; }
.on-focus-visible\:background-stone-500:focus-visible { background-color:#78716c; }
.on-focus-visible\:color-stone-500:focus-visible { color:#78716c; }
.on-focus-visible\:border-color-stone-500:focus-visible { border-color:#78716c; }
.on-focus-visible\:background-stone-600:focus-visible { background-color:#57534e; }
.on-focus-visible\:color-stone-600:focus-visible { color:#57534e; }
.on-focus-visible\:border-color-stone-600:focus-visible { border-color:#57534e; }
.on-focus-visible\:background-stone-700:focus-visible { background-color:#44403c; }
.on-focus-visible\:color-stone-700:focus-visible { color:#44403c; }
.on-focus-visible\:border-color-stone-700:focus-visible { border-color:#44403c; }
.on-focus-visible\:add-shadow-sm:focus-visible { box-shadow:var(--santy-shadow-sm); }
.on-focus-visible\:add-shadow:focus-visible { box-shadow:var(--santy-shadow); }
.on-focus-visible\:add-shadow-md:focus-visible { box-shadow:var(--santy-shadow-md); }
.on-focus-visible\:add-shadow-lg:focus-visible { box-shadow:var(--santy-shadow-lg); }
.on-focus-visible\:no-shadow:focus-visible { box-shadow:none; }
.on-focus-visible\:opacity-0:focus-visible { opacity:0; }
.on-focus-visible\:opacity-25:focus-visible { opacity:0.25; }
.on-focus-visible\:opacity-50:focus-visible { opacity:0.5; }
.on-focus-visible\:opacity-75:focus-visible { opacity:0.75; }
.on-focus-visible\:opacity-100:focus-visible { opacity:1; }
.on-focus-visible\:scale-90:focus-visible { transform:scale(0.9); }
.on-focus-visible\:scale-95:focus-visible { transform:scale(0.95); }
.on-focus-visible\:scale-100:focus-visible { transform:scale(1); }
.on-focus-visible\:scale-105:focus-visible { transform:scale(1.05); }
.on-focus-visible\:scale-110:focus-visible { transform:scale(1.1); }
.on-focus-visible\:make-hidden:focus-visible { display:none; }
.on-focus-visible\:make-block:focus-visible { display:block; }
.on-focus-visible\:make-flex:focus-visible { display:flex; }
.on-focus-visible\:cursor-pointer:focus-visible { cursor:pointer; }
.on-focus-visible\:cursor-not-allowed:focus-visible { cursor:not-allowed; }
.on-focus-visible\:outline-none:focus-visible { outline:none; }
.on-focus-visible\:text-underline:focus-visible { text-decoration:underline; }
.on-focus-visible\:text-no-decoration:focus-visible { text-decoration:none; }
.on-focus-visible\:text-bold:focus-visible { font-weight:700; }
.on-focus-visible\:transition-fast:focus-visible { transition:var(--santy-transition-fast); }
.on-focus-visible\:transition-normal:focus-visible { transition:var(--santy-transition-normal); }
.on-focus-visible\:add-border-1:focus-visible { border:1px solid; }
.on-focus-visible\:add-border-2:focus-visible { border:2px solid; }
.on-focus-visible\:add-border-4:focus-visible { border:4px solid; }

/* ── Group Hover ── */
/* Add class="group" to parent, then use group-hover: on children */
.group:hover .group-hover\:background-red-300 { background-color:#fca5a5; }
.group:hover .group-hover\:color-red-300 { color:#fca5a5; }
.group:hover .group-hover\:border-color-red-300 { border-color:#fca5a5; }
.group:hover .group-hover\:background-red-400 { background-color:#f87171; }
.group:hover .group-hover\:color-red-400 { color:#f87171; }
.group:hover .group-hover\:border-color-red-400 { border-color:#f87171; }
.group:hover .group-hover\:background-red-500 { background-color:#ef4444; }
.group:hover .group-hover\:color-red-500 { color:#ef4444; }
.group:hover .group-hover\:border-color-red-500 { border-color:#ef4444; }
.group:hover .group-hover\:background-red-600 { background-color:#dc2626; }
.group:hover .group-hover\:color-red-600 { color:#dc2626; }
.group:hover .group-hover\:border-color-red-600 { border-color:#dc2626; }
.group:hover .group-hover\:background-red-700 { background-color:#b91c1c; }
.group:hover .group-hover\:color-red-700 { color:#b91c1c; }
.group:hover .group-hover\:border-color-red-700 { border-color:#b91c1c; }
.group:hover .group-hover\:background-orange-300 { background-color:#fdba74; }
.group:hover .group-hover\:color-orange-300 { color:#fdba74; }
.group:hover .group-hover\:border-color-orange-300 { border-color:#fdba74; }
.group:hover .group-hover\:background-orange-400 { background-color:#fb923c; }
.group:hover .group-hover\:color-orange-400 { color:#fb923c; }
.group:hover .group-hover\:border-color-orange-400 { border-color:#fb923c; }
.group:hover .group-hover\:background-orange-500 { background-color:#f97316; }
.group:hover .group-hover\:color-orange-500 { color:#f97316; }
.group:hover .group-hover\:border-color-orange-500 { border-color:#f97316; }
.group:hover .group-hover\:background-orange-600 { background-color:#ea580c; }
.group:hover .group-hover\:color-orange-600 { color:#ea580c; }
.group:hover .group-hover\:border-color-orange-600 { border-color:#ea580c; }
.group:hover .group-hover\:background-orange-700 { background-color:#c2410c; }
.group:hover .group-hover\:color-orange-700 { color:#c2410c; }
.group:hover .group-hover\:border-color-orange-700 { border-color:#c2410c; }
.group:hover .group-hover\:background-amber-300 { background-color:#fcd34d; }
.group:hover .group-hover\:color-amber-300 { color:#fcd34d; }
.group:hover .group-hover\:border-color-amber-300 { border-color:#fcd34d; }
.group:hover .group-hover\:background-amber-400 { background-color:#fbbf24; }
.group:hover .group-hover\:color-amber-400 { color:#fbbf24; }
.group:hover .group-hover\:border-color-amber-400 { border-color:#fbbf24; }
.group:hover .group-hover\:background-amber-500 { background-color:#f59e0b; }
.group:hover .group-hover\:color-amber-500 { color:#f59e0b; }
.group:hover .group-hover\:border-color-amber-500 { border-color:#f59e0b; }
.group:hover .group-hover\:background-amber-600 { background-color:#d97706; }
.group:hover .group-hover\:color-amber-600 { color:#d97706; }
.group:hover .group-hover\:border-color-amber-600 { border-color:#d97706; }
.group:hover .group-hover\:background-amber-700 { background-color:#b45309; }
.group:hover .group-hover\:color-amber-700 { color:#b45309; }
.group:hover .group-hover\:border-color-amber-700 { border-color:#b45309; }
.group:hover .group-hover\:background-yellow-300 { background-color:#fde047; }
.group:hover .group-hover\:color-yellow-300 { color:#fde047; }
.group:hover .group-hover\:border-color-yellow-300 { border-color:#fde047; }
.group:hover .group-hover\:background-yellow-400 { background-color:#facc15; }
.group:hover .group-hover\:color-yellow-400 { color:#facc15; }
.group:hover .group-hover\:border-color-yellow-400 { border-color:#facc15; }
.group:hover .group-hover\:background-yellow-500 { background-color:#eab308; }
.group:hover .group-hover\:color-yellow-500 { color:#eab308; }
.group:hover .group-hover\:border-color-yellow-500 { border-color:#eab308; }
.group:hover .group-hover\:background-yellow-600 { background-color:#ca8a04; }
.group:hover .group-hover\:color-yellow-600 { color:#ca8a04; }
.group:hover .group-hover\:border-color-yellow-600 { border-color:#ca8a04; }
.group:hover .group-hover\:background-yellow-700 { background-color:#a16207; }
.group:hover .group-hover\:color-yellow-700 { color:#a16207; }
.group:hover .group-hover\:border-color-yellow-700 { border-color:#a16207; }
.group:hover .group-hover\:background-lime-300 { background-color:#bef264; }
.group:hover .group-hover\:color-lime-300 { color:#bef264; }
.group:hover .group-hover\:border-color-lime-300 { border-color:#bef264; }
.group:hover .group-hover\:background-lime-400 { background-color:#a3e635; }
.group:hover .group-hover\:color-lime-400 { color:#a3e635; }
.group:hover .group-hover\:border-color-lime-400 { border-color:#a3e635; }
.group:hover .group-hover\:background-lime-500 { background-color:#84cc16; }
.group:hover .group-hover\:color-lime-500 { color:#84cc16; }
.group:hover .group-hover\:border-color-lime-500 { border-color:#84cc16; }
.group:hover .group-hover\:background-lime-600 { background-color:#65a30d; }
.group:hover .group-hover\:color-lime-600 { color:#65a30d; }
.group:hover .group-hover\:border-color-lime-600 { border-color:#65a30d; }
.group:hover .group-hover\:background-lime-700 { background-color:#4d7c0f; }
.group:hover .group-hover\:color-lime-700 { color:#4d7c0f; }
.group:hover .group-hover\:border-color-lime-700 { border-color:#4d7c0f; }
.group:hover .group-hover\:background-green-300 { background-color:#86efac; }
.group:hover .group-hover\:color-green-300 { color:#86efac; }
.group:hover .group-hover\:border-color-green-300 { border-color:#86efac; }
.group:hover .group-hover\:background-green-400 { background-color:#4ade80; }
.group:hover .group-hover\:color-green-400 { color:#4ade80; }
.group:hover .group-hover\:border-color-green-400 { border-color:#4ade80; }
.group:hover .group-hover\:background-green-500 { background-color:#22c55e; }
.group:hover .group-hover\:color-green-500 { color:#22c55e; }
.group:hover .group-hover\:border-color-green-500 { border-color:#22c55e; }
.group:hover .group-hover\:background-green-600 { background-color:#16a34a; }
.group:hover .group-hover\:color-green-600 { color:#16a34a; }
.group:hover .group-hover\:border-color-green-600 { border-color:#16a34a; }
.group:hover .group-hover\:background-green-700 { background-color:#15803d; }
.group:hover .group-hover\:color-green-700 { color:#15803d; }
.group:hover .group-hover\:border-color-green-700 { border-color:#15803d; }
.group:hover .group-hover\:background-teal-300 { background-color:#5eead4; }
.group:hover .group-hover\:color-teal-300 { color:#5eead4; }
.group:hover .group-hover\:border-color-teal-300 { border-color:#5eead4; }
.group:hover .group-hover\:background-teal-400 { background-color:#2dd4bf; }
.group:hover .group-hover\:color-teal-400 { color:#2dd4bf; }
.group:hover .group-hover\:border-color-teal-400 { border-color:#2dd4bf; }
.group:hover .group-hover\:background-teal-500 { background-color:#14b8a6; }
.group:hover .group-hover\:color-teal-500 { color:#14b8a6; }
.group:hover .group-hover\:border-color-teal-500 { border-color:#14b8a6; }
.group:hover .group-hover\:background-teal-600 { background-color:#0d9488; }
.group:hover .group-hover\:color-teal-600 { color:#0d9488; }
.group:hover .group-hover\:border-color-teal-600 { border-color:#0d9488; }
.group:hover .group-hover\:background-teal-700 { background-color:#0f766e; }
.group:hover .group-hover\:color-teal-700 { color:#0f766e; }
.group:hover .group-hover\:border-color-teal-700 { border-color:#0f766e; }
.group:hover .group-hover\:background-cyan-300 { background-color:#67e8f9; }
.group:hover .group-hover\:color-cyan-300 { color:#67e8f9; }
.group:hover .group-hover\:border-color-cyan-300 { border-color:#67e8f9; }
.group:hover .group-hover\:background-cyan-400 { background-color:#22d3ee; }
.group:hover .group-hover\:color-cyan-400 { color:#22d3ee; }
.group:hover .group-hover\:border-color-cyan-400 { border-color:#22d3ee; }
.group:hover .group-hover\:background-cyan-500 { background-color:#06b6d4; }
.group:hover .group-hover\:color-cyan-500 { color:#06b6d4; }
.group:hover .group-hover\:border-color-cyan-500 { border-color:#06b6d4; }
.group:hover .group-hover\:background-cyan-600 { background-color:#0891b2; }
.group:hover .group-hover\:color-cyan-600 { color:#0891b2; }
.group:hover .group-hover\:border-color-cyan-600 { border-color:#0891b2; }
.group:hover .group-hover\:background-cyan-700 { background-color:#0e7490; }
.group:hover .group-hover\:color-cyan-700 { color:#0e7490; }
.group:hover .group-hover\:border-color-cyan-700 { border-color:#0e7490; }
.group:hover .group-hover\:background-blue-300 { background-color:#93c5fd; }
.group:hover .group-hover\:color-blue-300 { color:#93c5fd; }
.group:hover .group-hover\:border-color-blue-300 { border-color:#93c5fd; }
.group:hover .group-hover\:background-blue-400 { background-color:#60a5fa; }
.group:hover .group-hover\:color-blue-400 { color:#60a5fa; }
.group:hover .group-hover\:border-color-blue-400 { border-color:#60a5fa; }
.group:hover .group-hover\:background-blue-500 { background-color:#3b82f6; }
.group:hover .group-hover\:color-blue-500 { color:#3b82f6; }
.group:hover .group-hover\:border-color-blue-500 { border-color:#3b82f6; }
.group:hover .group-hover\:background-blue-600 { background-color:#2563eb; }
.group:hover .group-hover\:color-blue-600 { color:#2563eb; }
.group:hover .group-hover\:border-color-blue-600 { border-color:#2563eb; }
.group:hover .group-hover\:background-blue-700 { background-color:#1d4ed8; }
.group:hover .group-hover\:color-blue-700 { color:#1d4ed8; }
.group:hover .group-hover\:border-color-blue-700 { border-color:#1d4ed8; }
.group:hover .group-hover\:background-indigo-300 { background-color:#a5b4fc; }
.group:hover .group-hover\:color-indigo-300 { color:#a5b4fc; }
.group:hover .group-hover\:border-color-indigo-300 { border-color:#a5b4fc; }
.group:hover .group-hover\:background-indigo-400 { background-color:#818cf8; }
.group:hover .group-hover\:color-indigo-400 { color:#818cf8; }
.group:hover .group-hover\:border-color-indigo-400 { border-color:#818cf8; }
.group:hover .group-hover\:background-indigo-500 { background-color:#6366f1; }
.group:hover .group-hover\:color-indigo-500 { color:#6366f1; }
.group:hover .group-hover\:border-color-indigo-500 { border-color:#6366f1; }
.group:hover .group-hover\:background-indigo-600 { background-color:#4f46e5; }
.group:hover .group-hover\:color-indigo-600 { color:#4f46e5; }
.group:hover .group-hover\:border-color-indigo-600 { border-color:#4f46e5; }
.group:hover .group-hover\:background-indigo-700 { background-color:#4338ca; }
.group:hover .group-hover\:color-indigo-700 { color:#4338ca; }
.group:hover .group-hover\:border-color-indigo-700 { border-color:#4338ca; }
.group:hover .group-hover\:background-violet-300 { background-color:#c4b5fd; }
.group:hover .group-hover\:color-violet-300 { color:#c4b5fd; }
.group:hover .group-hover\:border-color-violet-300 { border-color:#c4b5fd; }
.group:hover .group-hover\:background-violet-400 { background-color:#a78bfa; }
.group:hover .group-hover\:color-violet-400 { color:#a78bfa; }
.group:hover .group-hover\:border-color-violet-400 { border-color:#a78bfa; }
.group:hover .group-hover\:background-violet-500 { background-color:#8b5cf6; }
.group:hover .group-hover\:color-violet-500 { color:#8b5cf6; }
.group:hover .group-hover\:border-color-violet-500 { border-color:#8b5cf6; }
.group:hover .group-hover\:background-violet-600 { background-color:#7c3aed; }
.group:hover .group-hover\:color-violet-600 { color:#7c3aed; }
.group:hover .group-hover\:border-color-violet-600 { border-color:#7c3aed; }
.group:hover .group-hover\:background-violet-700 { background-color:#6d28d9; }
.group:hover .group-hover\:color-violet-700 { color:#6d28d9; }
.group:hover .group-hover\:border-color-violet-700 { border-color:#6d28d9; }
.group:hover .group-hover\:background-purple-300 { background-color:#d8b4fe; }
.group:hover .group-hover\:color-purple-300 { color:#d8b4fe; }
.group:hover .group-hover\:border-color-purple-300 { border-color:#d8b4fe; }
.group:hover .group-hover\:background-purple-400 { background-color:#c084fc; }
.group:hover .group-hover\:color-purple-400 { color:#c084fc; }
.group:hover .group-hover\:border-color-purple-400 { border-color:#c084fc; }
.group:hover .group-hover\:background-purple-500 { background-color:#a855f7; }
.group:hover .group-hover\:color-purple-500 { color:#a855f7; }
.group:hover .group-hover\:border-color-purple-500 { border-color:#a855f7; }
.group:hover .group-hover\:background-purple-600 { background-color:#9333ea; }
.group:hover .group-hover\:color-purple-600 { color:#9333ea; }
.group:hover .group-hover\:border-color-purple-600 { border-color:#9333ea; }
.group:hover .group-hover\:background-purple-700 { background-color:#7e22ce; }
.group:hover .group-hover\:color-purple-700 { color:#7e22ce; }
.group:hover .group-hover\:border-color-purple-700 { border-color:#7e22ce; }
.group:hover .group-hover\:background-pink-300 { background-color:#f9a8d4; }
.group:hover .group-hover\:color-pink-300 { color:#f9a8d4; }
.group:hover .group-hover\:border-color-pink-300 { border-color:#f9a8d4; }
.group:hover .group-hover\:background-pink-400 { background-color:#f472b6; }
.group:hover .group-hover\:color-pink-400 { color:#f472b6; }
.group:hover .group-hover\:border-color-pink-400 { border-color:#f472b6; }
.group:hover .group-hover\:background-pink-500 { background-color:#ec4899; }
.group:hover .group-hover\:color-pink-500 { color:#ec4899; }
.group:hover .group-hover\:border-color-pink-500 { border-color:#ec4899; }
.group:hover .group-hover\:background-pink-600 { background-color:#db2777; }
.group:hover .group-hover\:color-pink-600 { color:#db2777; }
.group:hover .group-hover\:border-color-pink-600 { border-color:#db2777; }
.group:hover .group-hover\:background-pink-700 { background-color:#be185d; }
.group:hover .group-hover\:color-pink-700 { color:#be185d; }
.group:hover .group-hover\:border-color-pink-700 { border-color:#be185d; }
.group:hover .group-hover\:background-rose-300 { background-color:#fda4af; }
.group:hover .group-hover\:color-rose-300 { color:#fda4af; }
.group:hover .group-hover\:border-color-rose-300 { border-color:#fda4af; }
.group:hover .group-hover\:background-rose-400 { background-color:#fb7185; }
.group:hover .group-hover\:color-rose-400 { color:#fb7185; }
.group:hover .group-hover\:border-color-rose-400 { border-color:#fb7185; }
.group:hover .group-hover\:background-rose-500 { background-color:#f43f5e; }
.group:hover .group-hover\:color-rose-500 { color:#f43f5e; }
.group:hover .group-hover\:border-color-rose-500 { border-color:#f43f5e; }
.group:hover .group-hover\:background-rose-600 { background-color:#e11d48; }
.group:hover .group-hover\:color-rose-600 { color:#e11d48; }
.group:hover .group-hover\:border-color-rose-600 { border-color:#e11d48; }
.group:hover .group-hover\:background-rose-700 { background-color:#be123c; }
.group:hover .group-hover\:color-rose-700 { color:#be123c; }
.group:hover .group-hover\:border-color-rose-700 { border-color:#be123c; }
.group:hover .group-hover\:background-slate-300 { background-color:#cbd5e1; }
.group:hover .group-hover\:color-slate-300 { color:#cbd5e1; }
.group:hover .group-hover\:border-color-slate-300 { border-color:#cbd5e1; }
.group:hover .group-hover\:background-slate-400 { background-color:#94a3b8; }
.group:hover .group-hover\:color-slate-400 { color:#94a3b8; }
.group:hover .group-hover\:border-color-slate-400 { border-color:#94a3b8; }
.group:hover .group-hover\:background-slate-500 { background-color:#64748b; }
.group:hover .group-hover\:color-slate-500 { color:#64748b; }
.group:hover .group-hover\:border-color-slate-500 { border-color:#64748b; }
.group:hover .group-hover\:background-slate-600 { background-color:#475569; }
.group:hover .group-hover\:color-slate-600 { color:#475569; }
.group:hover .group-hover\:border-color-slate-600 { border-color:#475569; }
.group:hover .group-hover\:background-slate-700 { background-color:#334155; }
.group:hover .group-hover\:color-slate-700 { color:#334155; }
.group:hover .group-hover\:border-color-slate-700 { border-color:#334155; }
.group:hover .group-hover\:background-gray-300 { background-color:#d1d5db; }
.group:hover .group-hover\:color-gray-300 { color:#d1d5db; }
.group:hover .group-hover\:border-color-gray-300 { border-color:#d1d5db; }
.group:hover .group-hover\:background-gray-400 { background-color:#9ca3af; }
.group:hover .group-hover\:color-gray-400 { color:#9ca3af; }
.group:hover .group-hover\:border-color-gray-400 { border-color:#9ca3af; }
.group:hover .group-hover\:background-gray-500 { background-color:#6b7280; }
.group:hover .group-hover\:color-gray-500 { color:#6b7280; }
.group:hover .group-hover\:border-color-gray-500 { border-color:#6b7280; }
.group:hover .group-hover\:background-gray-600 { background-color:#4b5563; }
.group:hover .group-hover\:color-gray-600 { color:#4b5563; }
.group:hover .group-hover\:border-color-gray-600 { border-color:#4b5563; }
.group:hover .group-hover\:background-gray-700 { background-color:#374151; }
.group:hover .group-hover\:color-gray-700 { color:#374151; }
.group:hover .group-hover\:border-color-gray-700 { border-color:#374151; }
.group:hover .group-hover\:background-zinc-300 { background-color:#d4d4d8; }
.group:hover .group-hover\:color-zinc-300 { color:#d4d4d8; }
.group:hover .group-hover\:border-color-zinc-300 { border-color:#d4d4d8; }
.group:hover .group-hover\:background-zinc-400 { background-color:#a1a1aa; }
.group:hover .group-hover\:color-zinc-400 { color:#a1a1aa; }
.group:hover .group-hover\:border-color-zinc-400 { border-color:#a1a1aa; }
.group:hover .group-hover\:background-zinc-500 { background-color:#71717a; }
.group:hover .group-hover\:color-zinc-500 { color:#71717a; }
.group:hover .group-hover\:border-color-zinc-500 { border-color:#71717a; }
.group:hover .group-hover\:background-zinc-600 { background-color:#52525b; }
.group:hover .group-hover\:color-zinc-600 { color:#52525b; }
.group:hover .group-hover\:border-color-zinc-600 { border-color:#52525b; }
.group:hover .group-hover\:background-zinc-700 { background-color:#3f3f46; }
.group:hover .group-hover\:color-zinc-700 { color:#3f3f46; }
.group:hover .group-hover\:border-color-zinc-700 { border-color:#3f3f46; }
.group:hover .group-hover\:background-stone-300 { background-color:#d6d3d1; }
.group:hover .group-hover\:color-stone-300 { color:#d6d3d1; }
.group:hover .group-hover\:border-color-stone-300 { border-color:#d6d3d1; }
.group:hover .group-hover\:background-stone-400 { background-color:#a8a29e; }
.group:hover .group-hover\:color-stone-400 { color:#a8a29e; }
.group:hover .group-hover\:border-color-stone-400 { border-color:#a8a29e; }
.group:hover .group-hover\:background-stone-500 { background-color:#78716c; }
.group:hover .group-hover\:color-stone-500 { color:#78716c; }
.group:hover .group-hover\:border-color-stone-500 { border-color:#78716c; }
.group:hover .group-hover\:background-stone-600 { background-color:#57534e; }
.group:hover .group-hover\:color-stone-600 { color:#57534e; }
.group:hover .group-hover\:border-color-stone-600 { border-color:#57534e; }
.group:hover .group-hover\:background-stone-700 { background-color:#44403c; }
.group:hover .group-hover\:color-stone-700 { color:#44403c; }
.group:hover .group-hover\:border-color-stone-700 { border-color:#44403c; }
.group:hover .group-hover\:add-shadow-sm { box-shadow:var(--santy-shadow-sm); }
.group:hover .group-hover\:add-shadow { box-shadow:var(--santy-shadow); }
.group:hover .group-hover\:add-shadow-md { box-shadow:var(--santy-shadow-md); }
.group:hover .group-hover\:add-shadow-lg { box-shadow:var(--santy-shadow-lg); }
.group:hover .group-hover\:no-shadow { box-shadow:none; }
.group:hover .group-hover\:opacity-0 { opacity:0; }
.group:hover .group-hover\:opacity-25 { opacity:0.25; }
.group:hover .group-hover\:opacity-50 { opacity:0.5; }
.group:hover .group-hover\:opacity-75 { opacity:0.75; }
.group:hover .group-hover\:opacity-100 { opacity:1; }
.group:hover .group-hover\:scale-90 { transform:scale(0.9); }
.group:hover .group-hover\:scale-95 { transform:scale(0.95); }
.group:hover .group-hover\:scale-100 { transform:scale(1); }
.group:hover .group-hover\:scale-105 { transform:scale(1.05); }
.group:hover .group-hover\:scale-110 { transform:scale(1.1); }
.group:hover .group-hover\:make-hidden { display:none; }
.group:hover .group-hover\:make-block { display:block; }
.group:hover .group-hover\:make-flex { display:flex; }
.group:hover .group-hover\:cursor-pointer { cursor:pointer; }
.group:hover .group-hover\:cursor-not-allowed { cursor:not-allowed; }
.group:hover .group-hover\:outline-none { outline:none; }
.group:hover .group-hover\:text-underline { text-decoration:underline; }
.group:hover .group-hover\:text-no-decoration { text-decoration:none; }
.group:hover .group-hover\:text-bold { font-weight:700; }
.group:hover .group-hover\:transition-fast { transition:var(--santy-transition-fast); }
.group:hover .group-hover\:transition-normal { transition:var(--santy-transition-normal); }
.group:hover .group-hover\:add-border-1 { border:1px solid; }
.group:hover .group-hover\:add-border-2 { border:2px solid; }
.group:hover .group-hover\:add-border-4 { border:4px solid; }

/* ── Print Utilities ── */
@media print {
  .print\:hidden { display: none; }
  .print\:block  { display: block; }
  .print\:no-shadow { box-shadow: none !important; }
}


/* ── Backdrop Filter ── */
.backdrop-blur-none { backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
.backdrop-blur-sm   { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.backdrop-blur      { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.backdrop-blur-md   { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-lg   { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.backdrop-blur-xl   { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.backdrop-blur-2xl  { backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); }
.backdrop-blur-3xl  { backdrop-filter: blur(64px); -webkit-backdrop-filter: blur(64px); }
.backdrop-brightness-50  { backdrop-filter: brightness(0.5); -webkit-backdrop-filter: brightness(0.5); }
.backdrop-brightness-75  { backdrop-filter: brightness(0.75); -webkit-backdrop-filter: brightness(0.75); }
.backdrop-brightness-110 { backdrop-filter: brightness(1.1); -webkit-backdrop-filter: brightness(1.1); }

/* ── Ring (Focus Rings) ── */
.ring-0 { box-shadow: 0 0 0 0px var(--santy-primary); }
.ring-1 { box-shadow: 0 0 0 1px var(--santy-primary); }
.ring-2 { box-shadow: 0 0 0 2px var(--santy-primary); }
.ring-4 { box-shadow: 0 0 0 4px var(--santy-primary); }
.ring-8 { box-shadow: 0 0 0 8px var(--santy-primary); }
.ring-inset { --ring-inset: inset; }
.ring-blue   { box-shadow: 0 0 0 3px rgba(59,130,246,.4); }
.ring-green  { box-shadow: 0 0 0 3px rgba(34,197,94,.4); }
.ring-red    { box-shadow: 0 0 0 3px rgba(239,68,68,.4); }
.ring-yellow { box-shadow: 0 0 0 3px rgba(234,179,8,.4); }
.ring-purple { box-shadow: 0 0 0 3px rgba(139,92,246,.4); }
/* Ring offset */
.ring-offset-1 { box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--santy-primary); }
.ring-offset-2 { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--santy-primary); }
.ring-offset-4 { box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--santy-primary); }

/* ── Gradient Color Stops ── */
.from-transparent { --grad-from: transparent; }
.from-white       { --grad-from: #ffffff; }
.from-black       { --grad-from: #000000; }
.from-gray-100    { --grad-from: #f3f4f6; }
.from-gray-900    { --grad-from: #111827; }
.from-blue-400    { --grad-from: #60a5fa; }
.from-blue-500    { --grad-from: #3b82f6; }
.from-blue-600    { --grad-from: #2563eb; }
.from-indigo-500  { --grad-from: #6366f1; }
.from-purple-500  { --grad-from: #a855f7; }
.from-purple-600  { --grad-from: #9333ea; }
.from-pink-500    { --grad-from: #ec4899; }
.from-rose-500    { --grad-from: #f43f5e; }
.from-red-500     { --grad-from: #ef4444; }
.from-orange-500  { --grad-from: #f97316; }
.from-amber-400   { --grad-from: #fbbf24; }
.from-yellow-400  { --grad-from: #facc15; }
.from-green-400   { --grad-from: #4ade80; }
.from-green-500   { --grad-from: #22c55e; }
.from-teal-500    { --grad-from: #14b8a6; }
.from-cyan-400    { --grad-from: #22d3ee; }
.from-sky-400     { --grad-from: #38bdf8; }
.from-sky-500     { --grad-from: #0ea5e9; }
.to-transparent   { --grad-to: transparent; }
.to-white         { --grad-to: #ffffff; }
.to-black         { --grad-to: #000000; }
.to-gray-100      { --grad-to: #f3f4f6; }
.to-gray-900      { --grad-to: #111827; }
.to-blue-400      { --grad-to: #60a5fa; }
.to-blue-500      { --grad-to: #3b82f6; }
.to-blue-600      { --grad-to: #2563eb; }
.to-indigo-500    { --grad-to: #6366f1; }
.to-purple-500    { --grad-to: #a855f7; }
.to-purple-600    { --grad-to: #9333ea; }
.to-pink-500      { --grad-to: #ec4899; }
.to-rose-500      { --grad-to: #f43f5e; }
.to-red-500       { --grad-to: #ef4444; }
.to-orange-500    { --grad-to: #f97316; }
.to-amber-400     { --grad-to: #fbbf24; }
.to-yellow-400    { --grad-to: #facc15; }
.to-green-400     { --grad-to: #4ade80; }
.to-green-500     { --grad-to: #22c55e; }
.to-teal-500      { --grad-to: #14b8a6; }
.to-cyan-400      { --grad-to: #22d3ee; }
.to-sky-400       { --grad-to: #38bdf8; }
.to-sky-500       { --grad-to: #0ea5e9; }

/* ── Text Wrap ── */
.text-wrap    { text-wrap: wrap; white-space: normal; }
.text-nowrap  { text-wrap: nowrap; white-space: nowrap; }
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

/* ── Word Break / Overflow Wrap ── */
.word-break-normal { word-break: normal; overflow-wrap: normal; }
.word-break-all    { word-break: break-all; }
.word-break-words  { overflow-wrap: break-word; word-break: break-word; }
.word-break-keep   { word-break: keep-all; }
.truncate          { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-ellipsis     { text-overflow: ellipsis; }
.text-clip         { text-overflow: clip; }

/* ── Space Between (auto margin between siblings) ── */
.space-x-0  > * + * { margin-left: 0; }
.space-x-1  > * + * { margin-left: 4px; }
.space-x-2  > * + * { margin-left: 8px; }
.space-x-3  > * + * { margin-left: 12px; }
.space-x-4  > * + * { margin-left: 16px; }
.space-x-5  > * + * { margin-left: 20px; }
.space-x-6  > * + * { margin-left: 24px; }
.space-x-8  > * + * { margin-left: 32px; }
.space-x-10 > * + * { margin-left: 40px; }
.space-x-12 > * + * { margin-left: 48px; }
.space-x-16 > * + * { margin-left: 64px; }
.space-y-0  > * + * { margin-top: 0; }
.space-y-1  > * + * { margin-top: 4px; }
.space-y-2  > * + * { margin-top: 8px; }
.space-y-3  > * + * { margin-top: 12px; }
.space-y-4  > * + * { margin-top: 16px; }
.space-y-5  > * + * { margin-top: 20px; }
.space-y-6  > * + * { margin-top: 24px; }
.space-y-8  > * + * { margin-top: 32px; }
.space-y-10 > * + * { margin-top: 40px; }
.space-y-12 > * + * { margin-top: 48px; }
.space-y-16 > * + * { margin-top: 64px; }

/* ── Divide (borders between children) ── */
.divide-x > * + * { border-left: 1px solid #e5e7eb; }
.divide-x-2 > * + * { border-left: 2px solid #e5e7eb; }
.divide-y > * + * { border-top: 1px solid #e5e7eb; }
.divide-y-2 > * + * { border-top: 2px solid #e5e7eb; }
.divide-white > * + * { border-color: #fff; }
.divide-gray > * + * { border-color: #d1d5db; }
.divide-gray-dark > * + * { border-color: #374151; }

/* ── Content (::before / ::after) ── */
.content-none    { content: none; }
.content-empty   { content: ''; }
.content-open    { content: open-quote; }
.content-close   { content: close-quote; }

/* ── Will Change ── */
.will-change-opacity { will-change: opacity; }

/* ── Text Gradient ── */
.text-gradient-blue-purple {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-green-teal {
  background: linear-gradient(135deg, #22c55e, #14b8a6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-orange-red {
  background: linear-gradient(135deg, #f97316, #ef4444);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-pink-rose {
  background: linear-gradient(135deg, #ec4899, #f43f5e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-sky-blue {
  background: linear-gradient(135deg, #38bdf8, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── RTL / Logical Properties ── */
.ps-0  { padding-inline-start: 0; }
.ps-4  { padding-inline-start: 4px; }
.ps-8  { padding-inline-start: 8px; }
.ps-12 { padding-inline-start: 12px; }
.ps-16 { padding-inline-start: 16px; }
.ps-20 { padding-inline-start: 20px; }
.ps-24 { padding-inline-start: 24px; }
.ps-32 { padding-inline-start: 32px; }
.pe-0  { padding-inline-end: 0; }
.pe-4  { padding-inline-end: 4px; }
.pe-8  { padding-inline-end: 8px; }
.pe-12 { padding-inline-end: 12px; }
.pe-16 { padding-inline-end: 16px; }
.pe-20 { padding-inline-end: 20px; }
.pe-24 { padding-inline-end: 24px; }
.pe-32 { padding-inline-end: 32px; }
.ms-auto { margin-inline-start: auto; }
.me-auto { margin-inline-end: auto; }
.border-start-1 { border-inline-start: 1px solid; }
.border-start-2 { border-inline-start: 2px solid; }
.border-start-4 { border-inline-start: 4px solid; }
.border-end-1   { border-inline-end: 1px solid; }
.border-end-2   { border-inline-end: 2px solid; }
.border-end-4   { border-inline-end: 4px solid; }
.start-0  { inset-inline-start: 0; }
.end-0    { inset-inline-end: 0; }
.start-auto { inset-inline-start: auto; }
.end-auto   { inset-inline-end: auto; }


/* ── Peer Variants ── */
/* Usage: add class="peer" to input, then class="peer-checked:make-block" to sibling */
.peer:hover ~ .peer-hover\:make-block { display:block; }
.peer:focus ~ .peer-focus\:make-block { display:block; }
.peer:checked ~ .peer-checked\:make-block { display:block; }
.peer:disabled ~ .peer-disabled\:make-block { display:block; }
.peer:hover ~ .peer-hover\:make-hidden { display:none; }
.peer:focus ~ .peer-focus\:make-hidden { display:none; }
.peer:checked ~ .peer-checked\:make-hidden { display:none; }
.peer:disabled ~ .peer-disabled\:make-hidden { display:none; }
.peer:hover ~ .peer-hover\:make-flex { display:flex; }
.peer:focus ~ .peer-focus\:make-flex { display:flex; }
.peer:checked ~ .peer-checked\:make-flex { display:flex; }
.peer:disabled ~ .peer-disabled\:make-flex { display:flex; }
.peer:hover ~ .peer-hover\:opacity-100 { opacity:1; }
.peer:focus ~ .peer-focus\:opacity-100 { opacity:1; }
.peer:checked ~ .peer-checked\:opacity-100 { opacity:1; }
.peer:disabled ~ .peer-disabled\:opacity-100 { opacity:1; }
.peer:hover ~ .peer-hover\:opacity-0 { opacity:0; }
.peer:focus ~ .peer-focus\:opacity-0 { opacity:0; }
.peer:checked ~ .peer-checked\:opacity-0 { opacity:0; }
.peer:disabled ~ .peer-disabled\:opacity-0 { opacity:0; }
.peer:hover ~ .peer-hover\:color-blue-600 { color:#2563eb; }
.peer:focus ~ .peer-focus\:color-blue-600 { color:#2563eb; }
.peer:checked ~ .peer-checked\:color-blue-600 { color:#2563eb; }
.peer:disabled ~ .peer-disabled\:color-blue-600 { color:#2563eb; }
.peer:hover ~ .peer-hover\:color-gray-500 { color:#6b7280; }
.peer:focus ~ .peer-focus\:color-gray-500 { color:#6b7280; }
.peer:checked ~ .peer-checked\:color-gray-500 { color:#6b7280; }
.peer:disabled ~ .peer-disabled\:color-gray-500 { color:#6b7280; }
.peer:hover ~ .peer-hover\:border-blue-500 { border-color:#3b82f6; }
.peer:focus ~ .peer-focus\:border-blue-500 { border-color:#3b82f6; }
.peer:checked ~ .peer-checked\:border-blue-500 { border-color:#3b82f6; }
.peer:disabled ~ .peer-disabled\:border-blue-500 { border-color:#3b82f6; }
.peer:hover ~ .peer-hover\:background-blue-50 { background-color:#eff6ff; }
.peer:focus ~ .peer-focus\:background-blue-50 { background-color:#eff6ff; }
.peer:checked ~ .peer-checked\:background-blue-50 { background-color:#eff6ff; }
.peer:disabled ~ .peer-disabled\:background-blue-50 { background-color:#eff6ff; }
.peer:hover ~ .peer-hover\:background-green-50 { background-color:#f0fdf4; }
.peer:focus ~ .peer-focus\:background-green-50 { background-color:#f0fdf4; }
.peer:checked ~ .peer-checked\:background-green-50 { background-color:#f0fdf4; }
.peer:disabled ~ .peer-disabled\:background-green-50 { background-color:#f0fdf4; }
.peer:hover ~ .peer-hover\:translate-x-full { transform:translateX(100%); }
.peer:focus ~ .peer-focus\:translate-x-full { transform:translateX(100%); }
.peer:checked ~ .peer-checked\:translate-x-full { transform:translateX(100%); }
.peer:disabled ~ .peer-disabled\:translate-x-full { transform:translateX(100%); }
.peer:hover ~ .peer-hover\:translate-x-0 { transform:translateX(0); }
.peer:focus ~ .peer-focus\:translate-x-0 { transform:translateX(0); }
.peer:checked ~ .peer-checked\:translate-x-0 { transform:translateX(0); }
.peer:disabled ~ .peer-disabled\:translate-x-0 { transform:translateX(0); }

/* ── Motion Variants ── */
@media (prefers-reduced-motion: no-preference) {
  .motion-safe\:animate-spin    { animation: santy-spin 1s linear infinite; }
  .motion-safe\:animate-bounce  { animation: santy-bounce 1s infinite; }
  .motion-safe\:animate-pulse   { animation: santy-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
  .motion-safe\:transition-fast { transition: var(--santy-transition-fast); }
  .motion-safe\:transition-normal{ transition: var(--santy-transition-normal); }
}
@media (prefers-reduced-motion: reduce) {
  .motion-reduce\:animate-none  { animation: none !important; }
  .motion-reduce\:transition-none{ transition: none !important; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* ── Extra State Variants ── */

/* on-visited */
.on-visited\:color-blue-600:visited { color:#2563eb; }
.on-visited\:color-red-600:visited { color:#dc2626; }
.on-visited\:color-green-600:visited { color:#16a34a; }
.on-visited\:color-gray-500:visited { color:#6b7280; }
.on-visited\:border-blue-500:visited { border-color:#3b82f6; }
.on-visited\:border-red-500:visited { border-color:#ef4444; }
.on-visited\:border-green-500:visited { border-color:#22c55e; }
.on-visited\:background-blue-50:visited { background-color:#eff6ff; }
.on-visited\:background-red-50:visited { background-color:#fef2f2; }
.on-visited\:background-green-50:visited { background-color:#f0fdf4; }
.on-visited\:opacity-100:visited { opacity:1; }
.on-visited\:opacity-75:visited { opacity:0.75; }
.on-visited\:opacity-50:visited { opacity:0.5; }
.on-visited\:ring-blue:visited { box-shadow:0 0 0 3px rgba(59,130,246,.4); }
.on-visited\:ring-red:visited { box-shadow:0 0 0 3px rgba(239,68,68,.4); }
.on-visited\:ring-green:visited { box-shadow:0 0 0 3px rgba(34,197,94,.4); }
.on-visited\:make-block:visited { display:block; }
.on-visited\:make-hidden:visited { display:none; }

/* on-required */
.on-required\:color-blue-600:required { color:#2563eb; }
.on-required\:color-red-600:required { color:#dc2626; }
.on-required\:color-green-600:required { color:#16a34a; }
.on-required\:color-gray-500:required { color:#6b7280; }
.on-required\:border-blue-500:required { border-color:#3b82f6; }
.on-required\:border-red-500:required { border-color:#ef4444; }
.on-required\:border-green-500:required { border-color:#22c55e; }
.on-required\:background-blue-50:required { background-color:#eff6ff; }
.on-required\:background-red-50:required { background-color:#fef2f2; }
.on-required\:background-green-50:required { background-color:#f0fdf4; }
.on-required\:opacity-100:required { opacity:1; }
.on-required\:opacity-75:required { opacity:0.75; }
.on-required\:opacity-50:required { opacity:0.5; }
.on-required\:ring-blue:required { box-shadow:0 0 0 3px rgba(59,130,246,.4); }
.on-required\:ring-red:required { box-shadow:0 0 0 3px rgba(239,68,68,.4); }
.on-required\:ring-green:required { box-shadow:0 0 0 3px rgba(34,197,94,.4); }
.on-required\:make-block:required { display:block; }
.on-required\:make-hidden:required { display:none; }

/* on-optional */
.on-optional\:color-blue-600:optional { color:#2563eb; }
.on-optional\:color-red-600:optional { color:#dc2626; }
.on-optional\:color-green-600:optional { color:#16a34a; }
.on-optional\:color-gray-500:optional { color:#6b7280; }
.on-optional\:border-blue-500:optional { border-color:#3b82f6; }
.on-optional\:border-red-500:optional { border-color:#ef4444; }
.on-optional\:border-green-500:optional { border-color:#22c55e; }
.on-optional\:background-blue-50:optional { background-color:#eff6ff; }
.on-optional\:background-red-50:optional { background-color:#fef2f2; }
.on-optional\:background-green-50:optional { background-color:#f0fdf4; }
.on-optional\:opacity-100:optional { opacity:1; }
.on-optional\:opacity-75:optional { opacity:0.75; }
.on-optional\:opacity-50:optional { opacity:0.5; }
.on-optional\:ring-blue:optional { box-shadow:0 0 0 3px rgba(59,130,246,.4); }
.on-optional\:ring-red:optional { box-shadow:0 0 0 3px rgba(239,68,68,.4); }
.on-optional\:ring-green:optional { box-shadow:0 0 0 3px rgba(34,197,94,.4); }
.on-optional\:make-block:optional { display:block; }
.on-optional\:make-hidden:optional { display:none; }

/* on-invalid */
.on-invalid\:color-blue-600:invalid { color:#2563eb; }
.on-invalid\:color-red-600:invalid { color:#dc2626; }
.on-invalid\:color-green-600:invalid { color:#16a34a; }
.on-invalid\:color-gray-500:invalid { color:#6b7280; }
.on-invalid\:border-blue-500:invalid { border-color:#3b82f6; }
.on-invalid\:border-red-500:invalid { border-color:#ef4444; }
.on-invalid\:border-green-500:invalid { border-color:#22c55e; }
.on-invalid\:background-blue-50:invalid { background-color:#eff6ff; }
.on-invalid\:background-red-50:invalid { background-color:#fef2f2; }
.on-invalid\:background-green-50:invalid { background-color:#f0fdf4; }
.on-invalid\:opacity-100:invalid { opacity:1; }
.on-invalid\:opacity-75:invalid { opacity:0.75; }
.on-invalid\:opacity-50:invalid { opacity:0.5; }
.on-invalid\:ring-blue:invalid { box-shadow:0 0 0 3px rgba(59,130,246,.4); }
.on-invalid\:ring-red:invalid { box-shadow:0 0 0 3px rgba(239,68,68,.4); }
.on-invalid\:ring-green:invalid { box-shadow:0 0 0 3px rgba(34,197,94,.4); }
.on-invalid\:make-block:invalid { display:block; }
.on-invalid\:make-hidden:invalid { display:none; }

/* on-valid */
.on-valid\:color-blue-600:valid { color:#2563eb; }
.on-valid\:color-red-600:valid { color:#dc2626; }
.on-valid\:color-green-600:valid { color:#16a34a; }
.on-valid\:color-gray-500:valid { color:#6b7280; }
.on-valid\:border-blue-500:valid { border-color:#3b82f6; }
.on-valid\:border-red-500:valid { border-color:#ef4444; }
.on-valid\:border-green-500:valid { border-color:#22c55e; }
.on-valid\:background-blue-50:valid { background-color:#eff6ff; }
.on-valid\:background-red-50:valid { background-color:#fef2f2; }
.on-valid\:background-green-50:valid { background-color:#f0fdf4; }
.on-valid\:opacity-100:valid { opacity:1; }
.on-valid\:opacity-75:valid { opacity:0.75; }
.on-valid\:opacity-50:valid { opacity:0.5; }
.on-valid\:ring-blue:valid { box-shadow:0 0 0 3px rgba(59,130,246,.4); }
.on-valid\:ring-red:valid { box-shadow:0 0 0 3px rgba(239,68,68,.4); }
.on-valid\:ring-green:valid { box-shadow:0 0 0 3px rgba(34,197,94,.4); }
.on-valid\:make-block:valid { display:block; }
.on-valid\:make-hidden:valid { display:none; }

/* on-empty */
.on-empty\:color-blue-600:empty { color:#2563eb; }
.on-empty\:color-red-600:empty { color:#dc2626; }
.on-empty\:color-green-600:empty { color:#16a34a; }
.on-empty\:color-gray-500:empty { color:#6b7280; }
.on-empty\:border-blue-500:empty { border-color:#3b82f6; }
.on-empty\:border-red-500:empty { border-color:#ef4444; }
.on-empty\:border-green-500:empty { border-color:#22c55e; }
.on-empty\:background-blue-50:empty { background-color:#eff6ff; }
.on-empty\:background-red-50:empty { background-color:#fef2f2; }
.on-empty\:background-green-50:empty { background-color:#f0fdf4; }
.on-empty\:opacity-100:empty { opacity:1; }
.on-empty\:opacity-75:empty { opacity:0.75; }
.on-empty\:opacity-50:empty { opacity:0.5; }
.on-empty\:ring-blue:empty { box-shadow:0 0 0 3px rgba(59,130,246,.4); }
.on-empty\:ring-red:empty { box-shadow:0 0 0 3px rgba(239,68,68,.4); }
.on-empty\:ring-green:empty { box-shadow:0 0 0 3px rgba(34,197,94,.4); }
.on-empty\:make-block:empty { display:block; }
.on-empty\:make-hidden:empty { display:none; }

/* on-open */
.on-open\:color-blue-600[open] { color:#2563eb; }
.on-open\:color-red-600[open] { color:#dc2626; }
.on-open\:color-green-600[open] { color:#16a34a; }
.on-open\:color-gray-500[open] { color:#6b7280; }
.on-open\:border-blue-500[open] { border-color:#3b82f6; }
.on-open\:border-red-500[open] { border-color:#ef4444; }
.on-open\:border-green-500[open] { border-color:#22c55e; }
.on-open\:background-blue-50[open] { background-color:#eff6ff; }
.on-open\:background-red-50[open] { background-color:#fef2f2; }
.on-open\:background-green-50[open] { background-color:#f0fdf4; }
.on-open\:opacity-100[open] { opacity:1; }
.on-open\:opacity-75[open] { opacity:0.75; }
.on-open\:opacity-50[open] { opacity:0.5; }
.on-open\:ring-blue[open] { box-shadow:0 0 0 3px rgba(59,130,246,.4); }
.on-open\:ring-red[open] { box-shadow:0 0 0 3px rgba(239,68,68,.4); }
.on-open\:ring-green[open] { box-shadow:0 0 0 3px rgba(34,197,94,.4); }
.on-open\:make-block[open] { display:block; }
.on-open\:make-hidden[open] { display:none; }

/* on-checked */
.on-checked\:color-blue-600:checked { color:#2563eb; }
.on-checked\:color-red-600:checked { color:#dc2626; }
.on-checked\:color-green-600:checked { color:#16a34a; }
.on-checked\:color-gray-500:checked { color:#6b7280; }
.on-checked\:border-blue-500:checked { border-color:#3b82f6; }
.on-checked\:border-red-500:checked { border-color:#ef4444; }
.on-checked\:border-green-500:checked { border-color:#22c55e; }
.on-checked\:background-blue-50:checked { background-color:#eff6ff; }
.on-checked\:background-red-50:checked { background-color:#fef2f2; }
.on-checked\:background-green-50:checked { background-color:#f0fdf4; }
.on-checked\:opacity-100:checked { opacity:1; }
.on-checked\:opacity-75:checked { opacity:0.75; }
.on-checked\:opacity-50:checked { opacity:0.5; }
.on-checked\:ring-blue:checked { box-shadow:0 0 0 3px rgba(59,130,246,.4); }
.on-checked\:ring-red:checked { box-shadow:0 0 0 3px rgba(239,68,68,.4); }
.on-checked\:ring-green:checked { box-shadow:0 0 0 3px rgba(34,197,94,.4); }
.on-checked\:make-block:checked { display:block; }
.on-checked\:make-hidden:checked { display:none; }

/* on-indeterminate */
.on-indeterminate\:color-blue-600:indeterminate { color:#2563eb; }
.on-indeterminate\:color-red-600:indeterminate { color:#dc2626; }
.on-indeterminate\:color-green-600:indeterminate { color:#16a34a; }
.on-indeterminate\:color-gray-500:indeterminate { color:#6b7280; }
.on-indeterminate\:border-blue-500:indeterminate { border-color:#3b82f6; }
.on-indeterminate\:border-red-500:indeterminate { border-color:#ef4444; }
.on-indeterminate\:border-green-500:indeterminate { border-color:#22c55e; }
.on-indeterminate\:background-blue-50:indeterminate { background-color:#eff6ff; }
.on-indeterminate\:background-red-50:indeterminate { background-color:#fef2f2; }
.on-indeterminate\:background-green-50:indeterminate { background-color:#f0fdf4; }
.on-indeterminate\:opacity-100:indeterminate { opacity:1; }
.on-indeterminate\:opacity-75:indeterminate { opacity:0.75; }
.on-indeterminate\:opacity-50:indeterminate { opacity:0.5; }
.on-indeterminate\:ring-blue:indeterminate { box-shadow:0 0 0 3px rgba(59,130,246,.4); }
.on-indeterminate\:ring-red:indeterminate { box-shadow:0 0 0 3px rgba(239,68,68,.4); }
.on-indeterminate\:ring-green:indeterminate { box-shadow:0 0 0 3px rgba(34,197,94,.4); }
.on-indeterminate\:make-block:indeterminate { display:block; }
.on-indeterminate\:make-hidden:indeterminate { display:none; }

/* on-placeholder-shown */
.on-placeholder-shown\:color-blue-600:placeholder-shown { color:#2563eb; }
.on-placeholder-shown\:color-red-600:placeholder-shown { color:#dc2626; }
.on-placeholder-shown\:color-green-600:placeholder-shown { color:#16a34a; }
.on-placeholder-shown\:color-gray-500:placeholder-shown { color:#6b7280; }
.on-placeholder-shown\:border-blue-500:placeholder-shown { border-color:#3b82f6; }
.on-placeholder-shown\:border-red-500:placeholder-shown { border-color:#ef4444; }
.on-placeholder-shown\:border-green-500:placeholder-shown { border-color:#22c55e; }
.on-placeholder-shown\:background-blue-50:placeholder-shown { background-color:#eff6ff; }
.on-placeholder-shown\:background-red-50:placeholder-shown { background-color:#fef2f2; }
.on-placeholder-shown\:background-green-50:placeholder-shown { background-color:#f0fdf4; }
.on-placeholder-shown\:opacity-100:placeholder-shown { opacity:1; }
.on-placeholder-shown\:opacity-75:placeholder-shown { opacity:0.75; }
.on-placeholder-shown\:opacity-50:placeholder-shown { opacity:0.5; }
.on-placeholder-shown\:ring-blue:placeholder-shown { box-shadow:0 0 0 3px rgba(59,130,246,.4); }
.on-placeholder-shown\:ring-red:placeholder-shown { box-shadow:0 0 0 3px rgba(239,68,68,.4); }
.on-placeholder-shown\:ring-green:placeholder-shown { box-shadow:0 0 0 3px rgba(34,197,94,.4); }
.on-placeholder-shown\:make-block:placeholder-shown { display:block; }
.on-placeholder-shown\:make-hidden:placeholder-shown { display:none; }

/* on-autofill */
.on-autofill\:color-blue-600:-webkit-autofill { color:#2563eb; }
.on-autofill\:color-red-600:-webkit-autofill { color:#dc2626; }
.on-autofill\:color-green-600:-webkit-autofill { color:#16a34a; }
.on-autofill\:color-gray-500:-webkit-autofill { color:#6b7280; }
.on-autofill\:border-blue-500:-webkit-autofill { border-color:#3b82f6; }
.on-autofill\:border-red-500:-webkit-autofill { border-color:#ef4444; }
.on-autofill\:border-green-500:-webkit-autofill { border-color:#22c55e; }
.on-autofill\:background-blue-50:-webkit-autofill { background-color:#eff6ff; }
.on-autofill\:background-red-50:-webkit-autofill { background-color:#fef2f2; }
.on-autofill\:background-green-50:-webkit-autofill { background-color:#f0fdf4; }
.on-autofill\:opacity-100:-webkit-autofill { opacity:1; }
.on-autofill\:opacity-75:-webkit-autofill { opacity:0.75; }
.on-autofill\:opacity-50:-webkit-autofill { opacity:0.5; }
.on-autofill\:ring-blue:-webkit-autofill { box-shadow:0 0 0 3px rgba(59,130,246,.4); }
.on-autofill\:ring-red:-webkit-autofill { box-shadow:0 0 0 3px rgba(239,68,68,.4); }
.on-autofill\:ring-green:-webkit-autofill { box-shadow:0 0 0 3px rgba(34,197,94,.4); }
.on-autofill\:make-block:-webkit-autofill { display:block; }
.on-autofill\:make-hidden:-webkit-autofill { display:none; }

/* on-read-only */
.on-read-only\:color-blue-600:read-only { color:#2563eb; }
.on-read-only\:color-red-600:read-only { color:#dc2626; }
.on-read-only\:color-green-600:read-only { color:#16a34a; }
.on-read-only\:color-gray-500:read-only { color:#6b7280; }
.on-read-only\:border-blue-500:read-only { border-color:#3b82f6; }
.on-read-only\:border-red-500:read-only { border-color:#ef4444; }
.on-read-only\:border-green-500:read-only { border-color:#22c55e; }
.on-read-only\:background-blue-50:read-only { background-color:#eff6ff; }
.on-read-only\:background-red-50:read-only { background-color:#fef2f2; }
.on-read-only\:background-green-50:read-only { background-color:#f0fdf4; }
.on-read-only\:opacity-100:read-only { opacity:1; }
.on-read-only\:opacity-75:read-only { opacity:0.75; }
.on-read-only\:opacity-50:read-only { opacity:0.5; }
.on-read-only\:ring-blue:read-only { box-shadow:0 0 0 3px rgba(59,130,246,.4); }
.on-read-only\:ring-red:read-only { box-shadow:0 0 0 3px rgba(239,68,68,.4); }
.on-read-only\:ring-green:read-only { box-shadow:0 0 0 3px rgba(34,197,94,.4); }
.on-read-only\:make-block:read-only { display:block; }
.on-read-only\:make-hidden:read-only { display:none; }

/* on-read-write */
.on-read-write\:color-blue-600:read-write { color:#2563eb; }
.on-read-write\:color-red-600:read-write { color:#dc2626; }
.on-read-write\:color-green-600:read-write { color:#16a34a; }
.on-read-write\:color-gray-500:read-write { color:#6b7280; }
.on-read-write\:border-blue-500:read-write { border-color:#3b82f6; }
.on-read-write\:border-red-500:read-write { border-color:#ef4444; }
.on-read-write\:border-green-500:read-write { border-color:#22c55e; }
.on-read-write\:background-blue-50:read-write { background-color:#eff6ff; }
.on-read-write\:background-red-50:read-write { background-color:#fef2f2; }
.on-read-write\:background-green-50:read-write { background-color:#f0fdf4; }
.on-read-write\:opacity-100:read-write { opacity:1; }
.on-read-write\:opacity-75:read-write { opacity:0.75; }
.on-read-write\:opacity-50:read-write { opacity:0.5; }
.on-read-write\:ring-blue:read-write { box-shadow:0 0 0 3px rgba(59,130,246,.4); }
.on-read-write\:ring-red:read-write { box-shadow:0 0 0 3px rgba(239,68,68,.4); }
.on-read-write\:ring-green:read-write { box-shadow:0 0 0 3px rgba(34,197,94,.4); }
.on-read-write\:make-block:read-write { display:block; }
.on-read-write\:make-hidden:read-write { display:none; }

/* ═══════════════════════════════════════════════════════════════════════
   SANTY ANIMATIONS — animate.css compatible · Plain-English naming
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Speed helpers ── */
.animation-speed-fastest { animation-duration: 0.3s !important; }
.animation-speed-fast    { animation-duration: 0.5s !important; }
.animation-speed-normal  { animation-duration: 1s   !important; }
.animation-speed-slow    { animation-duration: 1.5s !important; }
.animation-speed-slowest { animation-duration: 2s   !important; }
.animation-speed-glacial { animation-duration: 3s   !important; }

/* ── Delay helpers ── */
.animation-delay-100  { animation-delay: 0.1s; }
.animation-delay-200  { animation-delay: 0.2s; }
.animation-delay-300  { animation-delay: 0.3s; }
.animation-delay-400  { animation-delay: 0.4s; }
.animation-delay-500  { animation-delay: 0.5s; }
.animation-delay-600  { animation-delay: 0.6s; }
.animation-delay-700  { animation-delay: 0.7s; }
.animation-delay-800  { animation-delay: 0.8s; }
.animation-delay-900  { animation-delay: 0.9s; }
.animation-delay-1000 { animation-delay: 1s; }
.animation-delay-1500 { animation-delay: 1.5s; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-3000 { animation-delay: 3s; }

/* ── Iteration helpers ── */
.animation-loop-1       { animation-iteration-count: 1; }
.animation-loop-2       { animation-iteration-count: 2; }
.animation-loop-3       { animation-iteration-count: 3; }
.animation-loop-4       { animation-iteration-count: 4; }
.animation-loop-5       { animation-iteration-count: 5; }
.animation-loop-forever { animation-iteration-count: infinite; }

/* ── Fill-mode helpers ── */
.animation-fill-none      { animation-fill-mode: none; }
.animation-fill-forwards  { animation-fill-mode: forwards; }
.animation-fill-backwards { animation-fill-mode: backwards; }
.animation-fill-both      { animation-fill-mode: both; }

/* ── Timing-function helpers ── */
.animation-ease           { animation-timing-function: ease; }
.animation-ease-in        { animation-timing-function: ease-in; }
.animation-ease-out       { animation-timing-function: ease-out; }
.animation-ease-in-out    { animation-timing-function: ease-in-out; }
.animation-linear         { animation-timing-function: linear; }
.animation-ease-bounce    { animation-timing-function: cubic-bezier(0.34,1.56,0.64,1); }
.animation-ease-elastic   { animation-timing-function: cubic-bezier(0.68,-0.55,0.265,1.55); }
.animation-ease-spring    { animation-timing-function: cubic-bezier(0.175,0.885,0.32,1.275); }

/* ── Direction helpers ── */
.animation-direction-normal            { animation-direction: normal; }
.animation-direction-reverse           { animation-direction: reverse; }
.animation-direction-alternate         { animation-direction: alternate; }
.animation-direction-alternate-reverse { animation-direction: alternate-reverse; }

/* ── Extra delay helpers ── */
.animation-delay-750  { animation-delay: 0.75s; }
.animation-delay-1250 { animation-delay: 1.25s; }
.animation-delay-1500 { animation-delay: 1.5s; }
.animation-delay-2500 { animation-delay: 2.5s; }
.animation-delay-3000 { animation-delay: 3s; }
.animation-delay-4000 { animation-delay: 4s; }
.animation-delay-5000 { animation-delay: 5s; }

/* ── Extra speed helpers ── */
.animation-speed-ultra-fast { animation-duration: 0.15s !important; }

/* ── Extra iteration helpers ── */
.animation-iteration-2 { animation-iteration-count: 2; }
.animation-iteration-4 { animation-iteration-count: 4; }
.animation-iteration-5 { animation-iteration-count: 5; }

/* ── Pause / play ── */
.animation-paused                 { animation-play-state: paused; }
.animation-running                { animation-play-state: running; }
.animation-none                   { animation: none; }
.animation-pause-on-hover:hover   { animation-play-state: paused; }

/* ════════════════════════════════════════════════════
   ATTENTION SEEKERS
   Keep looping or use once (add animation-loop-1)
   ════════════════════════════════════════════════════ */
.animate-flash       { animation: santy-flash       1s   ease         both; }
.animate-rubber-band { animation: santy-rubber-band 1s   ease         both; }
.animate-shake-x     { animation: santy-shake-x     1s   ease         both; }
.animate-shake-y     { animation: santy-shake-y     1s   ease         both; }
.animate-shake-head  { animation: santy-shake-head  1s   ease-in-out  both; }
.animate-swing       { animation: santy-swing       1s   ease         both; transform-origin: top center; }
.animate-tada        { animation: santy-tada        1s   ease         both; }
.animate-wobble      { animation: santy-wobble      1s   ease         both; }
.animate-jelly       { animation: santy-jelly       1s   ease         both; }
.animate-heartbeat   { animation: santy-heartbeat   1.3s ease-in-out  both; }

/* ════════════════════════════════════════════════════
   FADING ENTRANCES
   ════════════════════════════════════════════════════ */
.animate-fade-in              { animation: santy-fade-in              0.5s ease both; }
.animate-fade-in-from-top     { animation: santy-fade-in-from-top     0.5s ease both; }
.animate-fade-in-from-bottom  { animation: santy-fade-in-from-bottom  0.5s ease both; }
.animate-fade-in-from-left    { animation: santy-fade-in-from-left    0.5s ease both; }
.animate-fade-in-from-right   { animation: santy-fade-in-from-right   0.5s ease both; }
.animate-fade-in-top-left     { animation: santy-fade-in-top-left     0.5s ease both; }
.animate-fade-in-top-right    { animation: santy-fade-in-top-right    0.5s ease both; }
.animate-fade-in-bottom-left  { animation: santy-fade-in-bottom-left  0.5s ease both; }
.animate-fade-in-bottom-right { animation: santy-fade-in-bottom-right 0.5s ease both; }

/* ════════════════════════════════════════════════════
   FADING EXITS
   ════════════════════════════════════════════════════ */
.animate-fade-out              { animation: santy-fade-out              0.5s ease both; }
.animate-fade-out-to-top       { animation: santy-fade-out-to-top       0.5s ease both; }
.animate-fade-out-to-bottom    { animation: santy-fade-out-to-bottom    0.5s ease both; }
.animate-fade-out-to-left      { animation: santy-fade-out-to-left      0.5s ease both; }
.animate-fade-out-to-right     { animation: santy-fade-out-to-right     0.5s ease both; }
.animate-fade-out-top-left     { animation: santy-fade-out-top-left     0.5s ease both; }
.animate-fade-out-top-right    { animation: santy-fade-out-top-right    0.5s ease both; }
.animate-fade-out-bottom-left  { animation: santy-fade-out-bottom-left  0.5s ease both; }
.animate-fade-out-bottom-right { animation: santy-fade-out-bottom-right 0.5s ease both; }

/* ════════════════════════════════════════════════════
   BOUNCING ENTRANCES
   ════════════════════════════════════════════════════ */
.animate-bounce-in             { animation: santy-bounce-in             0.75s ease both; }
.animate-bounce-in-from-top    { animation: santy-bounce-in-from-top    0.75s ease both; }
.animate-bounce-in-from-bottom { animation: santy-bounce-in-from-bottom 0.75s ease both; }
.animate-bounce-in-from-left   { animation: santy-bounce-in-from-left   0.75s ease both; }
.animate-bounce-in-from-right  { animation: santy-bounce-in-from-right  0.75s ease both; }

/* ════════════════════════════════════════════════════
   BOUNCING EXITS
   ════════════════════════════════════════════════════ */
.animate-bounce-out             { animation: santy-bounce-out             0.75s ease both; }
.animate-bounce-out-to-top      { animation: santy-bounce-out-to-top      0.75s ease both; }
.animate-bounce-out-to-bottom   { animation: santy-bounce-out-to-bottom   0.75s ease both; }
.animate-bounce-out-to-left     { animation: santy-bounce-out-to-left     0.75s ease both; }
.animate-bounce-out-to-right    { animation: santy-bounce-out-to-right    0.75s ease both; }

/* ════════════════════════════════════════════════════
   SLIDING ENTRANCES
   ════════════════════════════════════════════════════ */
.animate-slide-in-from-top    { animation: santy-slide-in-from-top    0.4s ease both; }
.animate-slide-in-from-bottom { animation: santy-slide-in-from-bottom 0.4s ease both; }
.animate-slide-in-from-left   { animation: santy-slide-in-from-left   0.4s ease both; }
.animate-slide-in-from-right  { animation: santy-slide-in-from-right  0.4s ease both; }

/* ════════════════════════════════════════════════════
   SLIDING EXITS
   ════════════════════════════════════════════════════ */
.animate-slide-out-to-top    { animation: santy-slide-out-to-top    0.4s ease both; }
.animate-slide-out-to-bottom { animation: santy-slide-out-to-bottom 0.4s ease both; }
.animate-slide-out-to-left   { animation: santy-slide-out-to-left   0.4s ease both; }
.animate-slide-out-to-right  { animation: santy-slide-out-to-right  0.4s ease both; }

/* ════════════════════════════════════════════════════
   ZOOMING ENTRANCES
   ════════════════════════════════════════════════════ */
.animate-zoom-in             { animation: santy-zoom-in             0.3s ease both; }
.animate-zoom-in-from-top    { animation: santy-zoom-in-from-top    0.5s ease both; }
.animate-zoom-in-from-bottom { animation: santy-zoom-in-from-bottom 0.5s ease both; }
.animate-zoom-in-from-left   { animation: santy-zoom-in-from-left   0.5s ease both; }
.animate-zoom-in-from-right  { animation: santy-zoom-in-from-right  0.5s ease both; }

/* ════════════════════════════════════════════════════
   ZOOMING EXITS
   ════════════════════════════════════════════════════ */
.animate-zoom-out             { animation: santy-zoom-out             0.3s ease both; }
.animate-zoom-out-to-top      { animation: santy-zoom-out-to-top      0.5s ease both; }
.animate-zoom-out-to-bottom   { animation: santy-zoom-out-to-bottom   0.5s ease both; }
.animate-zoom-out-to-left     { animation: santy-zoom-out-to-left     0.5s ease both; }
.animate-zoom-out-to-right    { animation: santy-zoom-out-to-right    0.5s ease both; }

/* ════════════════════════════════════════════════════
   FLIPPING
   ════════════════════════════════════════════════════ */
.animate-flip       { animation: santy-flip       1s   ease both; backface-visibility: visible !important; }
.animate-flip-in-x  { animation: santy-flip-in-x  0.75s ease both; backface-visibility: visible !important; }
.animate-flip-in-y  { animation: santy-flip-in-y  0.75s ease both; backface-visibility: visible !important; }
.animate-flip-out-x { animation: santy-flip-out-x 0.75s ease both; backface-visibility: visible !important; }
.animate-flip-out-y { animation: santy-flip-out-y 0.75s ease both; backface-visibility: visible !important; }

/* ════════════════════════════════════════════════════
   ROTATING ENTRANCES
   ════════════════════════════════════════════════════ */
.animate-rotate-in                   { animation: santy-rotate-in                   0.6s ease both; }
.animate-rotate-in-from-top-left     { animation: santy-rotate-in-from-top-left     0.6s ease both; transform-origin: left top;     }
.animate-rotate-in-from-top-right    { animation: santy-rotate-in-from-top-right    0.6s ease both; transform-origin: right top;    }
.animate-rotate-in-from-bottom-left  { animation: santy-rotate-in-from-bottom-left  0.6s ease both; transform-origin: left bottom;  }
.animate-rotate-in-from-bottom-right { animation: santy-rotate-in-from-bottom-right 0.6s ease both; transform-origin: right bottom; }

/* ════════════════════════════════════════════════════
   ROTATING EXITS
   ════════════════════════════════════════════════════ */
.animate-rotate-out                   { animation: santy-rotate-out                   0.6s ease both; }
.animate-rotate-out-to-top-left       { animation: santy-rotate-out-to-top-left       0.6s ease both; transform-origin: left top;     }
.animate-rotate-out-to-top-right      { animation: santy-rotate-out-to-top-right      0.6s ease both; transform-origin: right top;    }
.animate-rotate-out-to-bottom-left    { animation: santy-rotate-out-to-bottom-left    0.6s ease both; transform-origin: left bottom;  }
.animate-rotate-out-to-bottom-right   { animation: santy-rotate-out-to-bottom-right   0.6s ease both; transform-origin: right bottom; }

/* ════════════════════════════════════════════════════
   BACK ENTRANCES (scale from afar)
   ════════════════════════════════════════════════════ */
.animate-back-in-from-top    { animation: santy-back-in-from-top    0.7s ease both; }
.animate-back-in-from-bottom { animation: santy-back-in-from-bottom 0.7s ease both; }
.animate-back-in-from-left   { animation: santy-back-in-from-left   0.7s ease both; }
.animate-back-in-from-right  { animation: santy-back-in-from-right  0.7s ease both; }

/* ════════════════════════════════════════════════════
   BACK EXITS
   ════════════════════════════════════════════════════ */
.animate-back-out-to-top    { animation: santy-back-out-to-top    0.7s ease both; }
.animate-back-out-to-bottom { animation: santy-back-out-to-bottom 0.7s ease both; }
.animate-back-out-to-left   { animation: santy-back-out-to-left   0.7s ease both; }
.animate-back-out-to-right  { animation: santy-back-out-to-right  0.7s ease both; }

/* ════════════════════════════════════════════════════
   LIGHT SPEED (skew + slide)
   ════════════════════════════════════════════════════ */
.animate-speed-in-from-left  { animation: santy-speed-in-from-left  0.5s ease-out both; }
.animate-speed-in-from-right { animation: santy-speed-in-from-right 0.5s ease-out both; }
.animate-speed-out-to-left   { animation: santy-speed-out-to-left   0.5s ease-in  both; }
.animate-speed-out-to-right  { animation: santy-speed-out-to-right  0.5s ease-in  both; }

/* ════════════════════════════════════════════════════
   SPECIALS
   ════════════════════════════════════════════════════ */
.animate-hinge       { animation: santy-hinge       2s   ease both; transform-origin: top left; }
.animate-jack-in-box { animation: santy-jack-in-box 1s   ease both; transform-origin: center bottom; }
.animate-roll-in     { animation: santy-roll-in     0.6s ease both; }
.animate-roll-out    { animation: santy-roll-out    0.6s ease both; }

/* ── Original utilities (kept for backwards compat) ── */
.animate-spin        { animation: santy-spin  1s linear infinite; }
.animate-ping        { animation: santy-ping  1s cubic-bezier(0,0,.2,1) infinite; }
.animate-pulse       { animation: santy-pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
.animate-bounce      { animation: santy-bounce 1s infinite; }
.animate-slide-up    { animation: santy-slide-in-from-bottom 0.4s ease both; }
.animate-slide-down  { animation: santy-slide-in-from-top    0.4s ease both; }
.animate-zoom-in     { animation: santy-zoom-in  0.3s ease both; }
.animate-zoom-out    { animation: santy-zoom-out 0.3s ease both; }

/* ═══════════════════════════════════════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Core ── */
@keyframes santy-spin    { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes santy-ping    { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes santy-pulse   { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes santy-bounce  { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8,0,1,1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,.2,1); } }
@keyframes santy-skeleton{ 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Attention Seekers ── */
@keyframes santy-flash {
  from, 50%, to { opacity: 1; }
  25%, 75%      { opacity: 0; }
}
@keyframes santy-rubber-band {
  from { transform: scale3d(1, 1, 1); }
  30%  { transform: scale3d(1.25, .75, 1); }
  40%  { transform: scale3d(.75, 1.25, 1); }
  50%  { transform: scale3d(1.15, .85, 1); }
  65%  { transform: scale3d(.95, 1.05, 1); }
  75%  { transform: scale3d(1.05, .95, 1); }
  to   { transform: scale3d(1, 1, 1); }
}
@keyframes santy-shake-x {
  from, to              { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80%    { transform: translate3d(10px, 0, 0); }
}
@keyframes santy-shake-y {
  from, to              { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(0, -10px, 0); }
  20%, 40%, 60%, 80%    { transform: translate3d(0, 10px, 0); }
}
@keyframes santy-shake-head {
  0%    { transform: rotateY(0deg); }
  6.5%  { transform: rotateY(-9deg); }
  18.5% { transform: rotateY(7deg); }
  31.5% { transform: rotateY(-5deg); }
  43.5% { transform: rotateY(3deg); }
  50%   { transform: rotateY(0deg); }
}
@keyframes santy-swing {
  20% { transform: rotate3d(0, 0, 1, 15deg); }
  40% { transform: rotate3d(0, 0, 1, -10deg); }
  60% { transform: rotate3d(0, 0, 1, 5deg); }
  80% { transform: rotate3d(0, 0, 1, -5deg); }
  to  { transform: rotate3d(0, 0, 1, 0deg); }
}
@keyframes santy-tada {
  from       { transform: scale3d(1, 1, 1); }
  10%, 20%   { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80%      { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to  { transform: scale3d(1, 1, 1); }
}
@keyframes santy-wobble {
  from { transform: translate3d(0, 0, 0); }
  15%  { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30%  { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45%  { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60%  { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75%  { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes santy-jelly {
  from, 11.1%, to { transform: translate3d(0, 0, 0); }
  22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% { transform: skewX(6.25deg)  skewY(6.25deg); }
  44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% { transform: skewX(-.78125deg) skewY(-.78125deg); }
  77.7% { transform: skewX(.390625deg) skewY(.390625deg); }
  88.8% { transform: skewX(-.1953125deg) skewY(-.1953125deg); }
}
@keyframes santy-heartbeat {
  from { transform: scale(1);    animation-timing-function: ease-out; }
  10%  { transform: scale(1.12); animation-timing-function: ease-in; }
  17%  { transform: scale(1.08); animation-timing-function: ease-out; }
  33%  { transform: scale(1.18); animation-timing-function: ease-in; }
  45%  { transform: scale(1);    animation-timing-function: ease-out; }
}

/* ── Fade In ── */
@keyframes santy-fade-in              { from { opacity: 0; } to { opacity: 1; } }
@keyframes santy-fade-in-from-top     { from { opacity: 0; transform: translate3d(0, -30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes santy-fade-in-from-bottom  { from { opacity: 0; transform: translate3d(0,  30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes santy-fade-in-from-left    { from { opacity: 0; transform: translate3d(-30px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes santy-fade-in-from-right   { from { opacity: 0; transform: translate3d( 30px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes santy-fade-in-top-left     { from { opacity: 0; transform: translate3d(-30px, -30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes santy-fade-in-top-right    { from { opacity: 0; transform: translate3d( 30px, -30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes santy-fade-in-bottom-left  { from { opacity: 0; transform: translate3d(-30px,  30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes santy-fade-in-bottom-right { from { opacity: 0; transform: translate3d( 30px,  30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

/* ── Fade Out ── */
@keyframes santy-fade-out              { from { opacity: 1; } to { opacity: 0; } }
@keyframes santy-fade-out-to-top       { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(0, -30px, 0); } }
@keyframes santy-fade-out-to-bottom    { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(0,  30px, 0); } }
@keyframes santy-fade-out-to-left      { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(-30px, 0, 0); } }
@keyframes santy-fade-out-to-right     { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d( 30px, 0, 0); } }
@keyframes santy-fade-out-top-left     { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(-30px, -30px, 0); } }
@keyframes santy-fade-out-top-right    { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d( 30px, -30px, 0); } }
@keyframes santy-fade-out-bottom-left  { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(-30px,  30px, 0); } }
@keyframes santy-fade-out-bottom-right { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d( 30px,  30px, 0); } }

/* ── Bounce In ── */
@keyframes santy-bounce-in {
  from,20%,40%,60%,80%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
  0%  { opacity: 0; transform: scale3d(.3, .3, .3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(.9, .9, .9); }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(.97, .97, .97); }
  to  { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes santy-bounce-in-from-top {
  from,60%,75%,90%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
  0%  { opacity: 0; transform: translate3d(0, -3000px, 0) scaleY(3); }
  60% { opacity: 1; transform: translate3d(0, 25px, 0) scaleY(.9); }
  75% { transform: translate3d(0, -10px, 0) scaleY(.95); }
  90% { transform: translate3d(0, 5px, 0) scaleY(.985); }
  to  { transform: translate3d(0, 0, 0); }
}
@keyframes santy-bounce-in-from-bottom {
  from,60%,75%,90%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
  0%  { opacity: 0; transform: translate3d(0, 3000px, 0) scaleY(5); }
  60% { opacity: 1; transform: translate3d(0, -20px, 0) scaleY(.9); }
  75% { transform: translate3d(0, 10px, 0) scaleY(.95); }
  90% { transform: translate3d(0, -5px, 0) scaleY(.985); }
  to  { transform: translate3d(0, 0, 0); }
}
@keyframes santy-bounce-in-from-left {
  from,60%,75%,90%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
  0%  { opacity: 0; transform: translate3d(-3000px, 0, 0) scaleX(3); }
  60% { opacity: 1; transform: translate3d(25px, 0, 0) scaleX(1); }
  75% { transform: translate3d(-10px, 0, 0) scaleX(.98); }
  90% { transform: translate3d(5px, 0, 0) scaleX(.995); }
  to  { transform: translate3d(0, 0, 0); }
}
@keyframes santy-bounce-in-from-right {
  from,60%,75%,90%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
  0%  { opacity: 0; transform: translate3d(3000px, 0, 0) scaleX(3); }
  60% { opacity: 1; transform: translate3d(-25px, 0, 0) scaleX(1); }
  75% { transform: translate3d(10px, 0, 0) scaleX(.98); }
  90% { transform: translate3d(-5px, 0, 0) scaleX(.995); }
  to  { transform: translate3d(0, 0, 0); }
}

/* ── Bounce Out ── */
@keyframes santy-bounce-out {
  20%     { transform: scale3d(.9, .9, .9); }
  50%,55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); }
  to      { opacity: 0; transform: scale3d(.3, .3, .3); }
}
@keyframes santy-bounce-out-to-top {
  20%     { transform: translate3d(0, -10px, 0) scaleY(.985); }
  40%,45% { opacity: 1; transform: translate3d(0, 20px, 0) scaleY(.9); }
  to      { opacity: 0; transform: translate3d(0, -2000px, 0) scaleY(3); }
}
@keyframes santy-bounce-out-to-bottom {
  20%     { transform: translate3d(0, 10px, 0) scaleY(.985); }
  40%,45% { opacity: 1; transform: translate3d(0, -20px, 0) scaleY(.9); }
  to      { opacity: 0; transform: translate3d(0, 2000px, 0) scaleY(5); }
}
@keyframes santy-bounce-out-to-left {
  20% { opacity: 1; transform: translate3d(20px, 0, 0) scaleX(.9); }
  to  { opacity: 0; transform: translate3d(-2000px, 0, 0) scaleX(2); }
}
@keyframes santy-bounce-out-to-right {
  20% { opacity: 1; transform: translate3d(-20px, 0, 0) scaleX(.9); }
  to  { opacity: 0; transform: translate3d(2000px, 0, 0) scaleX(2); }
}

/* ── Slide In ── */
@keyframes santy-slide-in-from-top    { from { visibility: visible; transform: translate3d(0, -100%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes santy-slide-in-from-bottom { from { visibility: visible; transform: translate3d(0,  100%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes santy-slide-in-from-left   { from { visibility: visible; transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes santy-slide-in-from-right  { from { visibility: visible; transform: translate3d( 100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

/* ── Slide Out ── */
@keyframes santy-slide-out-to-top    { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0, -100%, 0); } }
@keyframes santy-slide-out-to-bottom { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0,  100%, 0); } }
@keyframes santy-slide-out-to-left   { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(-100%, 0, 0); } }
@keyframes santy-slide-out-to-right  { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d( 100%, 0, 0); } }

/* ── Zoom In ── */
@keyframes santy-zoom-in { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } }
@keyframes santy-zoom-in-from-top {
  from { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
  60%  { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(0,60px,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
}
@keyframes santy-zoom-in-from-bottom {
  from { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
  60%  { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
}
@keyframes santy-zoom-in-from-left {
  from { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
  60%  { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(10px,0,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
}
@keyframes santy-zoom-in-from-right {
  from { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
  60%  { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
}

/* ── Zoom Out ── */
@keyframes santy-zoom-out { from { opacity: 1; } 50% { opacity: 0; transform: scale3d(.3,.3,.3); } to { opacity: 0; } }
@keyframes santy-zoom-out-to-top {
  40% { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(0,60px,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
  to  { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
}
@keyframes santy-zoom-out-to-bottom {
  40% { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
  to  { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
}
@keyframes santy-zoom-out-to-left {
  40% { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(42px,0,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
  to  { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(-2000px,0,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
}
@keyframes santy-zoom-out-to-right {
  40% { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(-42px,0,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
  to  { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(2000px,0,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
}

/* ── Flip ── */
@keyframes santy-flip {
  from { transform: perspective(400px) scale3d(1,1,1) rotate3d(0,1,0,-360deg); animation-timing-function: ease-out; }
  40%  { transform: perspective(400px) scale3d(1,1,.5) translate3d(0,0,150px) rotate3d(0,1,0,-190deg); animation-timing-function: ease-out; }
  50%  { transform: perspective(400px) scale3d(1,1,.5) translate3d(0,0,150px) rotate3d(0,1,0,-170deg); animation-timing-function: ease-in; }
  80%  { transform: perspective(400px) scale3d(.95,1,1) rotate3d(0,1,0,0deg); animation-timing-function: ease-in; }
  to   { transform: perspective(400px) scale3d(1,1,1) rotate3d(0,1,0,0deg); animation-timing-function: ease-in; }
}
@keyframes santy-flip-in-x {
  from { transform: perspective(400px) rotate3d(1,0,0,90deg); animation-timing-function: ease-in; opacity: 0; }
  40%  { transform: perspective(400px) rotate3d(1,0,0,-20deg); animation-timing-function: ease-in; }
  60%  { transform: perspective(400px) rotate3d(1,0,0,10deg); opacity: 1; }
  80%  { transform: perspective(400px) rotate3d(1,0,0,-5deg); }
  to   { transform: perspective(400px); }
}
@keyframes santy-flip-in-y {
  from { transform: perspective(400px) rotate3d(0,1,0,90deg); animation-timing-function: ease-in; opacity: 0; }
  40%  { transform: perspective(400px) rotate3d(0,1,0,-20deg); animation-timing-function: ease-in; }
  60%  { transform: perspective(400px) rotate3d(0,1,0,10deg); opacity: 1; }
  80%  { transform: perspective(400px) rotate3d(0,1,0,-5deg); }
  to   { transform: perspective(400px); }
}
@keyframes santy-flip-out-x {
  from { transform: perspective(400px); }
  30%  { transform: perspective(400px) rotate3d(1,0,0,-20deg); opacity: 1; }
  to   { transform: perspective(400px) rotate3d(1,0,0,90deg); opacity: 0; }
}
@keyframes santy-flip-out-y {
  from { transform: perspective(400px); }
  30%  { transform: perspective(400px) rotate3d(0,1,0,-15deg); opacity: 1; }
  to   { transform: perspective(400px) rotate3d(0,1,0,90deg); opacity: 0; }
}

/* ── Rotate In ── */
@keyframes santy-rotate-in                   { from { transform: rotate3d(0,0,1,-200deg); opacity: 0; } to { transform: translate3d(0,0,0); opacity: 1; } }
@keyframes santy-rotate-in-from-top-left     { from { transform: rotate3d(0,0,1,-45deg);  opacity: 0; } to { transform: translate3d(0,0,0); opacity: 1; } }
@keyframes santy-rotate-in-from-top-right    { from { transform: rotate3d(0,0,1,45deg);   opacity: 0; } to { transform: translate3d(0,0,0); opacity: 1; } }
@keyframes santy-rotate-in-from-bottom-left  { from { transform: rotate3d(0,0,1,45deg);   opacity: 0; } to { transform: translate3d(0,0,0); opacity: 1; } }
@keyframes santy-rotate-in-from-bottom-right { from { transform: rotate3d(0,0,1,-90deg);  opacity: 0; } to { transform: translate3d(0,0,0); opacity: 1; } }

/* ── Rotate Out ── */
@keyframes santy-rotate-out                   { from { opacity: 1; } to { transform: rotate3d(0,0,1,200deg);  opacity: 0; } }
@keyframes santy-rotate-out-to-top-left       { from { opacity: 1; } to { transform: rotate3d(0,0,1,-45deg); opacity: 0; } }
@keyframes santy-rotate-out-to-top-right      { from { opacity: 1; } to { transform: rotate3d(0,0,1,90deg);  opacity: 0; } }
@keyframes santy-rotate-out-to-bottom-left    { from { opacity: 1; } to { transform: rotate3d(0,0,1,45deg);  opacity: 0; } }
@keyframes santy-rotate-out-to-bottom-right   { from { opacity: 1; } to { transform: rotate3d(0,0,1,-45deg); opacity: 0; } }

/* ── Back Entrances ── */
@keyframes santy-back-in-from-top    { 0% { transform: translateY(-1200px) scale(.7); opacity: .7; } 80% { transform: translateY(0) scale(.7); opacity: .7; } 100% { transform: scale(1); opacity: 1; } }
@keyframes santy-back-in-from-bottom { 0% { transform: translateY( 1200px) scale(.7); opacity: .7; } 80% { transform: translateY(0) scale(.7); opacity: .7; } 100% { transform: scale(1); opacity: 1; } }
@keyframes santy-back-in-from-left   { 0% { transform: translateX(-2000px) scale(.7); opacity: .7; } 80% { transform: translateX(0) scale(.7); opacity: .7; } 100% { transform: scale(1); opacity: 1; } }
@keyframes santy-back-in-from-right  { 0% { transform: translateX( 2000px) scale(.7); opacity: .7; } 80% { transform: translateX(0) scale(.7); opacity: .7; } 100% { transform: scale(1); opacity: 1; } }

/* ── Back Exits ── */
@keyframes santy-back-out-to-top    { 0% { transform: scale(1); opacity: 1; } 20% { transform: translateY(0)     scale(.7); opacity: .7; } 100% { transform: translateY(-700px) scale(.7); opacity: .7; } }
@keyframes santy-back-out-to-bottom { 0% { transform: scale(1); opacity: 1; } 20% { transform: translateY(0)     scale(.7); opacity: .7; } 100% { transform: translateY( 700px) scale(.7); opacity: .7; } }
@keyframes santy-back-out-to-left   { 0% { transform: scale(1); opacity: 1; } 20% { transform: translateX(0)     scale(.7); opacity: .7; } 100% { transform: translateX(-2000px) scale(.7); opacity: .7; } }
@keyframes santy-back-out-to-right  { 0% { transform: scale(1); opacity: 1; } 20% { transform: translateX(0)     scale(.7); opacity: .7; } 100% { transform: translateX( 2000px) scale(.7); opacity: .7; } }

/* ── Light Speed ── */
@keyframes santy-speed-in-from-left  { from { transform: translate3d(-100%,0,0) skewX(30deg); opacity: 0; } 60% { transform: skewX(-20deg); opacity: 1; } 80% { transform: skewX(5deg); } to { transform: translate3d(0,0,0); } }
@keyframes santy-speed-in-from-right { from { transform: translate3d(100%,0,0) skewX(-30deg); opacity: 0; } 60% { transform: skewX(20deg); opacity: 1; } 80% { transform: skewX(-5deg); } to { transform: translate3d(0,0,0); } }
@keyframes santy-speed-out-to-left   { from { opacity: 1; } to { transform: translate3d(-100%,0,0) skewX(-30deg); opacity: 0; } }
@keyframes santy-speed-out-to-right  { from { opacity: 1; } to { transform: translate3d(100%,0,0) skewX(30deg); opacity: 0; } }

/* ── Specials ── */
@keyframes santy-hinge {
  0%     { animation-timing-function: ease-in-out; }
  20%,60% { transform: rotate3d(0,0,1,80deg); animation-timing-function: ease-in-out; }
  40%,80% { transform: rotate3d(0,0,1,60deg); animation-timing-function: ease-in-out; opacity: 1; }
  to     { transform: translate3d(0,700px,0); opacity: 0; }
}
@keyframes santy-jack-in-box {
  from { opacity: 0; transform: scale(.1) rotate(30deg); }
  50%  { transform: rotate(-10deg); }
  70%  { transform: rotate(3deg); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes santy-roll-in  { from { opacity: 0; transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes santy-roll-out { from { opacity: 1; } to { opacity: 0; transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg); } }

/* ═══════════════════════════════════════════════════════════════════════
   SCROLL-TRIGGERED ANIMATIONS
   Uses Intersection Observer via tiny JS snippet OR animation-timeline.
   Add class + JS observer, or use with animate-on-scroll-* pattern.
   Pure CSS fallback: elements start invisible, JS adds .is-visible.
   ═══════════════════════════════════════════════════════════════════════ */

/* Base: elements are hidden until .is-visible is toggled by JS */
.animate-on-scroll-fade-in    { opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-on-scroll-slide-up   { opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-on-scroll-slide-down { opacity: 0; transform: translateY(-40px); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-on-scroll-zoom-in    { opacity: 0; transform: scale(0.85); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-on-scroll-from-left  { opacity: 0; transform: translateX(-60px); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-on-scroll-from-right { opacity: 0; transform: translateX(60px);  transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-on-scroll-flip-up    { opacity: 0; transform: rotateX(30deg); transition: opacity 0.6s ease, transform 0.6s ease; }

/* Triggered state — add .is-visible via IntersectionObserver */
.animate-on-scroll-fade-in.is-visible,
.animate-on-scroll-slide-up.is-visible,
.animate-on-scroll-slide-down.is-visible,
.animate-on-scroll-zoom-in.is-visible,
.animate-on-scroll-from-left.is-visible,
.animate-on-scroll-from-right.is-visible,
.animate-on-scroll-flip-up.is-visible { opacity: 1; transform: none; }

/* scroll-reveal-once / scroll-reveal-repeat — same trigger, different JS behaviour */
.scroll-reveal-once,
.scroll-reveal-repeat { opacity: 0; transform: translateY(30px); transition: opacity 0.55s ease, transform 0.55s ease; }
.scroll-reveal-once.is-visible,
.scroll-reveal-repeat.is-visible      { opacity: 1; transform: none; }

/* Delay modifiers for scroll reveals */
.scroll-reveal-delay-100  { transition-delay: 0.1s; }
.scroll-reveal-delay-200  { transition-delay: 0.2s; }
.scroll-reveal-delay-300  { transition-delay: 0.3s; }
.scroll-reveal-delay-400  { transition-delay: 0.4s; }
.scroll-reveal-delay-500  { transition-delay: 0.5s; }

/* ═══════════════════════════════════════════════════════════════════════
   HOVER-TRIGGERED ANIMATIONS
   These override animation only on :hover so they fire on mouse-over.
   ═══════════════════════════════════════════════════════════════════════ */
.on-hover:animate-bounce:hover        { animation: santy-bounce      0.8s ease both; }
.on-hover:animate-pulse:hover         { animation: santy-pulse        1s   ease both; }
.on-hover:animate-shake-x:hover       { animation: santy-shake-x      0.6s ease both; }
.on-hover:animate-rubber-band:hover   { animation: santy-rubber-band  0.8s ease both; }
.on-hover:animate-tada:hover          { animation: santy-tada         0.8s ease both; }
.on-hover:animate-wobble:hover        { animation: santy-wobble       0.8s ease both; }
.on-hover:animate-swing:hover         { animation: santy-swing        0.8s ease both; transform-origin: top center; }
.on-hover:animate-heartbeat:hover     { animation: santy-heartbeat    1s   ease-in-out both; }
.on-hover:animate-spin-once:hover     { animation: santy-spin         0.5s linear both; }
.on-hover:animate-flip-once:hover     { animation: santy-flip-in-y    0.6s ease both; }
.on-hover:animate-jello:hover         { animation: santy-jelly        0.9s ease both; }
.on-hover:animate-zoom-in:hover       { animation: santy-zoom-in      0.3s ease both; }
.on-hover:animate-fade-in:hover       { animation: santy-fade-in      0.4s ease both; }

/* ═══════════════════════════════════════════════════════════════════════
   TEXT ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════ */

/* Typewriter — pure CSS using steps() */
.animate-typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid currentColor;
  width: 0;
  animation: santy-typewriter 2.5s steps(30,end) forwards, santy-blink-caret 0.75s step-end infinite;
}
/* Blur-in entrance */
.animate-text-blur-in   { animation: santy-text-blur-in  0.8s ease both; }
/* Slide up per-word (apply to the text container) */
.animate-text-slide-up  { animation: santy-slide-up      0.5s ease both; }
/* Gradient flow — animated gradient on text */
.animate-text-gradient-flow {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: santy-gradient-shift 3s linear infinite;
}
/* Letter wave — each letter must be wrapped in a span via JS */
.animate-text-wave span { display: inline-block; animation: santy-text-wave 1s ease infinite; }
.animate-text-wave span:nth-child(1)  { animation-delay: 0s; }
.animate-text-wave span:nth-child(2)  { animation-delay: 0.08s; }
.animate-text-wave span:nth-child(3)  { animation-delay: 0.16s; }
.animate-text-wave span:nth-child(4)  { animation-delay: 0.24s; }
.animate-text-wave span:nth-child(5)  { animation-delay: 0.32s; }
.animate-text-wave span:nth-child(6)  { animation-delay: 0.40s; }
.animate-text-wave span:nth-child(7)  { animation-delay: 0.48s; }
.animate-text-wave span:nth-child(8)  { animation-delay: 0.56s; }
/* Glitch */
.animate-text-glitch { animation: santy-text-glitch 0.5s linear infinite; }
/* Neon pulse */
.animate-text-neon-pulse { animation: santy-neon-pulse 1.5s ease-in-out infinite alternate; }

@keyframes santy-typewriter      { to { width: 100%; } }
@keyframes santy-blink-caret     { 50% { border-color: transparent; } }
@keyframes santy-text-blur-in    { from { filter: blur(12px); opacity: 0; } to { filter: blur(0); opacity: 1; } }
@keyframes santy-text-wave       { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes santy-text-glitch {
  0%,100% { text-shadow: none; transform: none; }
  20%     { text-shadow: -2px 0 #ff00c1, 2px 0 #00fff9; transform: skewX(-2deg); }
  40%     { text-shadow: 2px 0 #ff00c1, -2px 0 #00fff9; transform: skewX(2deg); }
  60%     { text-shadow: -2px 0 #00fff9; transform: skewX(0deg); }
  80%     { text-shadow: 2px 0 #ff00c1; }
}
@keyframes santy-neon-pulse {
  from { text-shadow: 0 0 4px currentColor, 0 0 10px currentColor; }
  to   { text-shadow: 0 0 8px currentColor, 0 0 20px currentColor, 0 0 40px currentColor; }
}

/* ═══════════════════════════════════════════════════════════════════════
   STAGGERED ENTRANCE SEQUENCES
   Apply parent class; children get incremental delays via nth-child.
   ═══════════════════════════════════════════════════════════════════════ */
.animate-stagger-fade-in    > * { animation: santy-fade-in  0.5s ease both; }
.animate-stagger-slide-up   > * { animation: santy-slide-up 0.5s ease both; }
.animate-stagger-zoom-in    > * { animation: santy-zoom-in  0.4s ease both; }
.animate-stagger-from-left  > * { animation: santy-fade-in-from-left  0.5s ease both; }
.animate-stagger-from-right > * { animation: santy-fade-in-from-right 0.5s ease both; }

/* Delay each child — 100ms steps */
.animate-stagger-children-100 > *:nth-child(1)  { animation-delay: 0.0s; }
.animate-stagger-children-100 > *:nth-child(2)  { animation-delay: 0.1s; }
.animate-stagger-children-100 > *:nth-child(3)  { animation-delay: 0.2s; }
.animate-stagger-children-100 > *:nth-child(4)  { animation-delay: 0.3s; }
.animate-stagger-children-100 > *:nth-child(5)  { animation-delay: 0.4s; }
.animate-stagger-children-100 > *:nth-child(6)  { animation-delay: 0.5s; }
.animate-stagger-children-100 > *:nth-child(7)  { animation-delay: 0.6s; }
.animate-stagger-children-100 > *:nth-child(8)  { animation-delay: 0.7s; }
.animate-stagger-children-100 > *:nth-child(9)  { animation-delay: 0.8s; }
.animate-stagger-children-100 > *:nth-child(10) { animation-delay: 0.9s; }
/* 200ms steps */
.animate-stagger-children-200 > *:nth-child(1)  { animation-delay: 0.0s; }
.animate-stagger-children-200 > *:nth-child(2)  { animation-delay: 0.2s; }
.animate-stagger-children-200 > *:nth-child(3)  { animation-delay: 0.4s; }
.animate-stagger-children-200 > *:nth-child(4)  { animation-delay: 0.6s; }
.animate-stagger-children-200 > *:nth-child(5)  { animation-delay: 0.8s; }
.animate-stagger-children-200 > *:nth-child(6)  { animation-delay: 1.0s; }
.animate-stagger-children-200 > *:nth-child(7)  { animation-delay: 1.2s; }
.animate-stagger-children-200 > *:nth-child(8)  { animation-delay: 1.4s; }
/* 300ms steps */
.animate-stagger-children-300 > *:nth-child(1)  { animation-delay: 0.0s; }
.animate-stagger-children-300 > *:nth-child(2)  { animation-delay: 0.3s; }
.animate-stagger-children-300 > *:nth-child(3)  { animation-delay: 0.6s; }
.animate-stagger-children-300 > *:nth-child(4)  { animation-delay: 0.9s; }
.animate-stagger-children-300 > *:nth-child(5)  { animation-delay: 1.2s; }
.animate-stagger-children-300 > *:nth-child(6)  { animation-delay: 1.5s; }

/* ═══════════════════════════════════════════════════════════════════════
   MORPHING & SHAPE ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════ */
.animate-morph-blob       { animation: santy-morph-blob      6s ease-in-out infinite; }
.animate-border-spin      { animation: santy-border-spin     2s linear infinite; background: conic-gradient(from 0deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6); }
.animate-shimmer          { overflow: hidden; position: relative; background: #f0f0f0; }
.animate-shimmer::after   {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.7) 50%, transparent 100%);
  animation: santy-shimmer 1.5s ease-in-out infinite;
}
.animate-gradient-shift   { background-size: 200% 200%; animation: santy-gradient-shift 3s ease infinite; }
.animate-morph-circle-to-square { animation: santy-morph-circle-to-square 1.5s ease-in-out infinite alternate; }
.animate-liquid           { animation: santy-liquid 3s ease-in-out infinite; }

@keyframes santy-morph-blob {
  0%,100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%     { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%     { border-radius: 50% 60% 30% 60% / 40% 50% 60% 50%; }
  75%     { border-radius: 40% 70% 60% 30% / 60% 40% 50% 70%; }
}
@keyframes santy-border-spin   { to { transform: rotate(360deg); } }
@keyframes santy-shimmer       { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes santy-gradient-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes santy-morph-circle-to-square { from { border-radius: 50%; } to { border-radius: 0%; } }
@keyframes santy-liquid {
  0%,100% { border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; transform: rotate(0deg); }
  50%     { border-radius: 60% 40% 30% 70% / 40% 60% 30% 60%; transform: rotate(5deg); }
}

/* ═══════════════════════════════════════════════════════════════════════
   3D ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════ */
.animate-flip-3d-x    { animation: santy-flip-3d-x    0.7s ease both; }
.animate-flip-3d-y    { animation: santy-flip-3d-y    0.7s ease both; }
.animate-rotate-3d    { animation: santy-rotate-3d    1.2s linear infinite; }
.animate-tilt-left    { animation: santy-tilt-left    0.4s ease both; }
.animate-tilt-right   { animation: santy-tilt-right   0.4s ease both; }
.animate-depth-in     { animation: santy-depth-in     0.5s ease both; }
.animate-depth-out    { animation: santy-depth-out    0.5s ease both; }
.animate-swing-3d     { animation: santy-swing-3d     1s ease-in-out infinite; transform-origin: top center; perspective: 400px; }

@keyframes santy-flip-3d-x    { from { transform: perspective(400px) rotateX(90deg); opacity: 0; } to { transform: perspective(400px) rotateX(0deg); opacity: 1; } }
@keyframes santy-flip-3d-y    { from { transform: perspective(400px) rotateY(90deg); opacity: 0; } to { transform: perspective(400px) rotateY(0deg); opacity: 1; } }
@keyframes santy-rotate-3d    { from { transform: perspective(400px) rotate3d(1,1,0,0deg); } to { transform: perspective(400px) rotate3d(1,1,0,360deg); } }
@keyframes santy-tilt-left    { from { transform: rotate(0deg); } to { transform: rotate(-6deg); } }
@keyframes santy-tilt-right   { from { transform: rotate(0deg); } to { transform: rotate(6deg); } }
@keyframes santy-depth-in     { from { transform: perspective(600px) translateZ(-80px); opacity: 0; } to { transform: perspective(600px) translateZ(0); opacity: 1; } }
@keyframes santy-depth-out    { from { transform: perspective(600px) translateZ(0); opacity: 1; } to { transform: perspective(600px) translateZ(-80px); opacity: 0; } }
@keyframes santy-swing-3d {
  0%,100% { transform: perspective(400px) rotateY(0deg); }
  25%     { transform: perspective(400px) rotateY(15deg); }
  75%     { transform: perspective(400px) rotateY(-15deg); }
}

/* ═══════════════════════════════════════════════════════════════════════
   EXIT + PAGE TRANSITION ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════ */
.animate-exit-fade-out    { animation: santy-fade-out    0.4s ease both; }
.animate-exit-slide-left  { animation: santy-exit-slide-left  0.4s ease both; }
.animate-exit-slide-right { animation: santy-exit-slide-right 0.4s ease both; }
.animate-exit-scale-down  { animation: santy-exit-scale-down  0.35s ease both; }
.animate-exit-flip-out    { animation: santy-flip-out    0.5s ease both; }
.animate-page-in-from-right { animation: santy-page-in-right  0.4s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.animate-page-in-from-left  { animation: santy-page-in-left   0.4s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.animate-page-out-to-left   { animation: santy-page-out-left  0.4s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.animate-page-out-to-right  { animation: santy-page-out-right 0.4s cubic-bezier(0.25,0.46,0.45,0.94) both; }

@keyframes santy-exit-slide-left  { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-60px); } }
@keyframes santy-exit-slide-right { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(60px); } }
@keyframes santy-exit-scale-down  { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.85); } }
@keyframes santy-page-in-right    { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes santy-page-in-left     { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes santy-page-out-left    { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-100%); } }
@keyframes santy-page-out-right   { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }

/* View Transitions API */
.view-transition-fade  { view-transition-name: fade-transition; }
.view-transition-slide { view-transition-name: slide-transition; }
@keyframes santy-vt-fade-in  { from { opacity: 0; } }
@keyframes santy-vt-fade-out { to   { opacity: 0; } }
::view-transition-old(fade-transition)  { animation: santy-vt-fade-out 0.3s ease; }
::view-transition-new(fade-transition)  { animation: santy-vt-fade-in  0.3s ease; }
::view-transition-old(slide-transition) { animation: santy-page-out-left  0.35s ease; }
::view-transition-new(slide-transition) { animation: santy-page-in-right  0.35s ease; }

/* ═══════════════════════════════════════════════════════════════════════
   NOTIFICATION & UI FEEDBACK ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════ */
.animate-toast-in         { animation: santy-toast-in        0.4s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.animate-toast-out        { animation: santy-toast-out       0.3s ease both; }
.animate-modal-in         { animation: santy-modal-in        0.3s cubic-bezier(0.34,1.56,0.64,1) both; }
.animate-modal-out        { animation: santy-modal-out       0.25s ease both; }
.animate-drawer-in-right  { animation: santy-drawer-in-right  0.35s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.animate-drawer-out-right { animation: santy-drawer-out-right 0.3s ease both; }
.animate-drawer-in-bottom { animation: santy-drawer-in-bottom 0.35s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.animate-dropdown-in      { animation: santy-dropdown-in     0.2s cubic-bezier(0.34,1.56,0.64,1) both; transform-origin: top center; }
.animate-dropdown-out     { animation: santy-dropdown-out    0.15s ease both; transform-origin: top center; }
.animate-tooltip-in       { animation: santy-zoom-in         0.15s ease both; }
.animate-badge-pop        { animation: santy-badge-pop       0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
.animate-success-checkmark { animation: santy-checkmark      0.6s ease both; stroke-dasharray: 50; stroke-dashoffset: 50; }
.animate-error-shake      { animation: santy-shake-x         0.5s ease both; }

@keyframes santy-toast-in         { from { opacity: 0; transform: translateY(100%) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes santy-toast-out        { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(20px); } }
@keyframes santy-modal-in         { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes santy-modal-out        { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } }
@keyframes santy-drawer-in-right  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes santy-drawer-out-right { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes santy-drawer-in-bottom { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes santy-dropdown-in      { from { opacity: 0; transform: scaleY(0.8); } to { opacity: 1; transform: scaleY(1); } }
@keyframes santy-dropdown-out     { from { opacity: 1; transform: scaleY(1); } to { opacity: 0; transform: scaleY(0.8); } }
@keyframes santy-badge-pop        { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes santy-checkmark        { to { stroke-dashoffset: 0; } }

/* ── Scroll-reveal observer snippet (embed in your HTML) ── */
/* <script>
  new IntersectionObserver((entries) => {
    entries.forEach(e => {
      if(e.isIntersecting) {
        e.target.classList.add('is-visible');
        if(e.target.classList.contains('scroll-reveal-once'))
          observer.unobserve(e.target);
      } else {
        if(e.target.classList.contains('scroll-reveal-repeat'))
          e.target.classList.remove('is-visible');
      }
    });
  }, { threshold: 0.15 }).observe(...document.querySelectorAll('[class*="animate-on-scroll"],[class*="scroll-reveal"]'));
</script> */


/* ═══ SANTY COMPONENTS ═══ */

/* ═══════════════════════════════════════════════════════════════
   COMPONENT SHORTCUTS — Higher-level ready-to-use patterns
   ═══════════════════════════════════════════════════════════════ */

/* ── Container ── */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 640px)  { .container { max-width: 640px; } }
@media (min-width: 768px)  { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1536px; } }

/* ── Card ── */
.card {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: var(--santy-shadow);
  overflow: hidden;
}
.card-body { padding: 24px; }
.card-header { padding: 16px 24px; border-bottom: 1px solid #e5e7eb; }
.card-footer { padding: 16px 24px; border-top: 1px solid #e5e7eb; }

/* ── Badge ── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 9999px;
  line-height: 1.5;
}

/* ── Button Base ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: var(--santy-transition-fast);
  text-decoration: none;
  line-height: 1.5;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 4px 12px; font-size: 12px; border-radius: 6px; }
.btn-lg { padding: 12px 28px; font-size: 16px; border-radius: 10px; }
.btn-xl { padding: 16px 36px; font-size: 18px; border-radius: 12px; }
.btn-primary { background-color: #3b82f6; color: #ffffff; }
.btn-primary:hover { background-color: #2563eb; }
.btn-secondary { background-color: #6b7280; color: #ffffff; }
.btn-secondary:hover { background-color: #4b5563; }
.btn-success { background-color: #22c55e; color: #ffffff; }
.btn-success:hover { background-color: #16a34a; }
.btn-danger { background-color: #ef4444; color: #ffffff; }
.btn-danger:hover { background-color: #dc2626; }
.btn-warning { background-color: #f59e0b; color: #ffffff; }
.btn-warning:hover { background-color: #d97706; }
.btn-outline { background-color: transparent; border: 2px solid currentColor; }
.btn-ghost { background-color: transparent; }
.btn-ghost:hover { background-color: rgba(0,0,0,0.05); }
.btn-full { width: 100%; }

/* ── Alert ── */
.alert {
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid currentColor;
  margin-bottom: 16px;
}
.alert-info    { background-color: #eff6ff; color: #1d4ed8; }
.alert-success { background-color: #f0fdf4; color: #15803d; }
.alert-warning { background-color: #fffbeb; color: #b45309; }
.alert-danger  { background-color: #fef2f2; color: #b91c1c; }

/* ── Input ── */
.input {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background-color: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}
.input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
.input-error  { border-color: #ef4444; }
.input-error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.2); }
.input-lg { padding: 12px 16px; font-size: 16px; border-radius: 8px; }
.input-sm { padding: 4px 8px; font-size: 12px; }

/* ── Divider ── */
.divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 16px 0;
}
.divider-vertical {
  border: none;
  border-left: 1px solid #e5e7eb;
  align-self: stretch;
  margin: 0 16px;
}

/* ── Overlay ── */
.overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 40;
}

/* ── Avatar ── */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar-sm  { width: 32px;  height: 32px; }
.avatar-md  { width: 40px;  height: 40px; }
.avatar-lg  { width: 56px;  height: 56px; }
.avatar-xl  { width: 80px;  height: 80px; }

/* ── Spinner ── */
.spinner {
  border: 3px solid rgba(0,0,0,0.1);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: santy-spin 0.7s linear infinite;
}
.spinner-sm  { width: 16px; height: 16px; }
.spinner-md  { width: 24px; height: 24px; }
.spinner-lg  { width: 40px; height: 40px; }
.spinner-xl  { width: 56px; height: 56px; }

/* ── Skeleton (loading placeholder) ── */
.skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: santy-skeleton 1.5s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes santy-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Progress Bar ── */
.progress {
  width: 100%;
  height: 8px;
  background-color: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background-color: #3b82f6;
  border-radius: 9999px;
  transition: width 0.3s ease;
}


/* ── Table ── */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #e5e7eb; }
.table thead tr { background-color: #f9fafb; }
.table thead th { font-weight: 600; color: #374151; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.table-striped tbody tr:nth-child(even) { background-color: #f9fafb; }
.table-bordered { border: 1px solid #e5e7eb; }
.table-bordered th, .table-bordered td { border: 1px solid #e5e7eb; }
.table-hover tbody tr:hover { background-color: #f3f4f6; cursor: pointer; }
.table-compact th, .table-compact td { padding: 6px 10px; font-size: 13px; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Breadcrumb ── */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.breadcrumb-item { color: #6b7280; }
.breadcrumb-item a { color: #3b82f6; text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item + .breadcrumb-item::before { content: '/'; margin-right: 4px; color: #d1d5db; }
.breadcrumb-item.active { color: #111827; font-weight: 500; }
.breadcrumb-dot .breadcrumb-item + .breadcrumb-item::before { content: '·'; }
.breadcrumb-arrow .breadcrumb-item + .breadcrumb-item::before { content: '›'; font-size: 16px; color: #9ca3af; }

/* ── Pagination ── */
.pagination { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; font-size: 14px; border: 1px solid #e5e7eb; border-radius: 8px; background-color: #fff; color: #374151; text-decoration: none; cursor: pointer; transition: all 0.15s ease; user-select: none; }
.page-link:hover { background-color: #f3f4f6; border-color: #d1d5db; }
.page-item.active .page-link { background-color: #3b82f6; border-color: #3b82f6; color: #fff; }
.page-item.disabled .page-link { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.pagination-sm .page-link { min-width: 28px; height: 28px; font-size: 12px; border-radius: 6px; }
.pagination-lg .page-link { min-width: 44px; height: 44px; font-size: 16px; border-radius: 10px; }

/* ── Chip / Tag ── */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 13px; font-weight: 500; border-radius: 9999px; background-color: #e5e7eb; color: #374151; cursor: default; transition: background-color 0.15s; }
.chip:hover { background-color: #d1d5db; }
.chip-sm { padding: 2px 8px; font-size: 11px; }
.chip-lg { padding: 6px 16px; font-size: 14px; }
.chip-blue   { background-color: #dbeafe; color: #1d4ed8; }
.chip-green  { background-color: #dcfce7; color: #15803d; }
.chip-red    { background-color: #fee2e2; color: #b91c1c; }
.chip-yellow { background-color: #fef9c3; color: #854d0e; }
.chip-purple { background-color: #ede9fe; color: #6d28d9; }
.chip-orange { background-color: #ffedd5; color: #c2410c; }
.chip-outline { background-color: transparent; border: 1px solid currentColor; }

/* ── List Group ── */
.list-group { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; border: 1px solid #e5e7eb; }
.list-group-item { display: flex; align-items: center; padding: 12px 16px; font-size: 14px; border-bottom: 1px solid #e5e7eb; background-color: #fff; color: #374151; text-decoration: none; transition: background-color 0.15s; }
.list-group-item:last-child { border-bottom: none; }
.list-group-item:hover { background-color: #f9fafb; }
.list-group-item.active { background-color: #3b82f6; color: #fff; border-color: #3b82f6; }
.list-group-item.disabled { opacity: 0.5; pointer-events: none; }
.list-group-flush { border: none; border-radius: 0; }
.list-group-flush .list-group-item { border-left: none; border-right: none; }
.list-group-numbered .list-group-item { counter-increment: list-group; }
.list-group-numbered .list-group-item::before { content: counter(list-group) '. '; font-weight: 600; color: #9ca3af; margin-right: 8px; }

/* ── Form ── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-label { font-size: 14px; font-weight: 500; color: #374151; }
.form-label-required::after { content: ' *'; color: #ef4444; }
.form-hint { font-size: 12px; color: #6b7280; line-height: 1.4; }
.form-error-text { font-size: 12px; color: #ef4444; }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ── Select ── */
.select { display: block; width: 100%; padding: 8px 36px 8px 12px; font-size: 14px; border: 1px solid #d1d5db; border-radius: 6px; background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color 0.15s ease; }
.select:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
.select-error { border-color: #ef4444; }
.select-sm { padding: 4px 28px 4px 8px; font-size: 12px; border-radius: 4px; }
.select-lg { padding: 12px 40px 12px 16px; font-size: 16px; border-radius: 8px; }

/* ── Textarea ── */
.textarea { display: block; width: 100%; padding: 8px 12px; font-size: 14px; border: 1px solid #d1d5db; border-radius: 6px; background-color: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; outline: none; resize: vertical; min-height: 80px; font-family: inherit; line-height: 1.5; }
.textarea:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
.textarea-error { border-color: #ef4444; }
.textarea-no-resize { resize: none; }

/* ── Checkbox & Radio ── */
.checkbox, .radio-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: #374151; user-select: none; }
.checkbox input[type="checkbox"], .radio-label input[type="radio"] { width: 16px; height: 16px; accent-color: #3b82f6; cursor: pointer; flex-shrink: 0; }

/* ── Toggle / Switch ── */
.toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: #d1d5db; border-radius: 9999px; transition: background-color 0.2s; }
.toggle-slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 2px; top: 2px; background-color: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.toggle input:checked + .toggle-slider { background-color: #3b82f6; }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }
.toggle input:disabled + .toggle-slider { opacity: 0.5; cursor: not-allowed; }
.toggle-sm { width: 34px; height: 18px; }
.toggle-sm .toggle-slider::before { width: 14px; height: 14px; }
.toggle-sm input:checked + .toggle-slider::before { transform: translateX(16px); }
.toggle-green input:checked + .toggle-slider { background-color: #22c55e; }
.toggle-purple input:checked + .toggle-slider { background-color: #8b5cf6; }

/* ── Range ── */
.range { -webkit-appearance: none; width: 100%; height: 4px; border-radius: 9999px; background: #e5e7eb; outline: none; cursor: pointer; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #3b82f6; cursor: pointer; box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
.range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #3b82f6; cursor: pointer; border: none; }

/* ── Navbar ── */
.navbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background-color: #fff; border-bottom: 1px solid #e5e7eb; gap: 16px; }
.navbar-brand { font-size: 18px; font-weight: 700; color: #111827; text-decoration: none; flex-shrink: 0; }
.navbar-menu { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.navbar-item { padding: 6px 12px; font-size: 14px; color: #6b7280; text-decoration: none; border-radius: 6px; transition: background-color 0.15s, color 0.15s; white-space: nowrap; }
.navbar-item:hover { background-color: #f3f4f6; color: #111827; }
.navbar-item.active { color: #3b82f6; background-color: #eff6ff; font-weight: 500; }
.navbar-dark { background-color: #1e293b; border-bottom-color: #334155; }
.navbar-dark .navbar-brand { color: #f1f5f9; }
.navbar-dark .navbar-item { color: #94a3b8; }
.navbar-dark .navbar-item:hover { background-color: #334155; color: #f1f5f9; }
.navbar-sticky { position: sticky; top: 0; z-index: 50; }
.navbar-glass { background-color: rgba(255,255,255,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.navbar-dark.navbar-glass { background-color: rgba(15,23,42,0.85); }

/* ── Accordion ── */
.accordion { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.accordion-flush { border: none; border-radius: 0; }
.accordion-item { border-bottom: 1px solid #e5e7eb; }
.accordion-item:last-child { border-bottom: none; }
.accordion-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 18px; font-size: 15px; font-weight: 500; color: #111827; background-color: #fff; cursor: pointer; border: none; text-align: left; transition: background-color 0.15s; }
.accordion-header:hover { background-color: #f9fafb; }
.accordion-header[aria-expanded="true"] { background-color: #f9fafb; color: #3b82f6; }
.accordion-icon { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.25s ease; }
.accordion-header[aria-expanded="true"] .accordion-icon { transform: rotate(180deg); }
.accordion-body { padding: 0 18px; font-size: 14px; color: #6b7280; line-height: 1.6; background-color: #fff; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.2s ease; }
.accordion-body.open { max-height: 2000px; padding: 14px 18px; border-top: 1px solid #f3f4f6; }

/* ── Tabs ── */
.tabs { display: flex; border-bottom: 2px solid #e5e7eb; list-style: none; margin: 0; padding: 0; overflow-x: auto; }
.tabs-item { padding: 10px 20px; font-size: 14px; font-weight: 500; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; text-decoration: none; transition: color 0.15s, border-color 0.15s; white-space: nowrap; border: none; background: transparent; }
.tabs-item:hover { color: #374151; }
.tabs-item.active { color: #3b82f6; border-bottom: 2px solid #3b82f6; }
.tabs-pill { border-bottom: none; background-color: #f3f4f6; padding: 4px; border-radius: 10px; gap: 4px; }
.tabs-pill .tabs-item { border-bottom: none; border-radius: 6px; }
.tabs-pill .tabs-item.active { background-color: #fff; color: #111827; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.tabs-underline .tabs-item.active { color: #111827; border-bottom-color: #111827; }
.tab-panel { display: none; padding: 20px 0; }
.tab-panel.active { display: block; }

/* ── Tooltip (CSS-only) ── */
.tooltip { position: relative; display: inline-block; }
.tooltip-content { visibility: hidden; opacity: 0; position: absolute; z-index: 100; background-color: #1f2937; color: #f9fafb; font-size: 12px; padding: 5px 10px; border-radius: 6px; white-space: nowrap; pointer-events: none; transition: opacity 0.15s; line-height: 1.4; }
.tooltip:hover .tooltip-content { visibility: visible; opacity: 1; }
.tooltip-top    .tooltip-content { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
.tooltip-bottom .tooltip-content { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
.tooltip-left   .tooltip-content { right: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
.tooltip-right  .tooltip-content { left: calc(100% + 8px); top: 50%; transform: translateY(-50%); }

/* ── Notification / Toast ── */
.notification { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 10px; font-size: 14px; border: 1px solid transparent; line-height: 1.4; }
.notification-info    { background-color: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.notification-success { background-color: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.notification-warning { background-color: #fffbeb; border-color: #fde68a; color: #b45309; }
.notification-error   { background-color: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.notification-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.notification-title { font-weight: 600; margin-bottom: 2px; }
.notification-desc { opacity: 0.85; font-size: 13px; }

/* ── Steps / Stepper ── */
.steps { display: flex; align-items: flex-start; list-style: none; margin: 0; padding: 0; }
.step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.step:not(:last-child)::after { content: ''; position: absolute; top: 15px; left: calc(50% + 16px); right: calc(-50% + 16px); height: 2px; background-color: #e5e7eb; }
.step.done:not(:last-child)::after { background-color: #22c55e; }
.step-dot { width: 32px; height: 32px; border-radius: 50%; background-color: #e5e7eb; color: #9ca3af; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid #e5e7eb; transition: all 0.2s; z-index: 1; }
.step-label { font-size: 12px; color: #9ca3af; margin-top: 6px; text-align: center; }
.step.active .step-dot { background-color: #3b82f6; color: #fff; border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,0.15); }
.step.active .step-label { color: #1d4ed8; font-weight: 500; }
.step.done .step-dot { background-color: #22c55e; color: #fff; border-color: #22c55e; }
.step.done .step-label { color: #15803d; }

/* ── Modal (CSS-only via :target) ── */
.modal-overlay { position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); z-index: 200; display: none; align-items: center; justify-content: center; padding: 16px; }
.modal-overlay:target { display: flex; }
.modal-box { background-color: #fff; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; animation: santy-zoom-in 0.25s ease; }
.modal-header { padding: 20px 24px; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 18px; font-weight: 600; color: #111827; margin: 0; }
.modal-body { padding: 24px; font-size: 14px; color: #6b7280; line-height: 1.6; }
.modal-footer { padding: 16px 24px; border-top: 1px solid #e5e7eb; display: flex; justify-content: flex-end; gap: 10px; }
.modal-sm .modal-box { max-width: 400px; }
.modal-lg .modal-box { max-width: 768px; }
.modal-xl .modal-box { max-width: 1024px; }
.modal-full .modal-box { max-width: 100%; height: 100vh; border-radius: 0; max-height: 100vh; }
.modal-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; border: none; background-color: transparent; cursor: pointer; color: #9ca3af; transition: background-color 0.15s; font-size: 20px; line-height: 1; padding: 0; text-decoration: none; }
.modal-close:hover { background-color: #f3f4f6; color: #374151; }
.modal-close::before { content: '×'; }

/* ── Drawer / Off-canvas (CSS-only via :target) ── */
.drawer-overlay { position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); z-index: 200; display: none; }
.drawer-overlay:target { display: block; }
.drawer-panel { position: fixed; top: 0; bottom: 0; left: 0; width: 300px; background-color: #fff; z-index: 201; overflow-y: auto; box-shadow: 4px 0 24px rgba(0,0,0,0.12); transform: translateX(-100%); transition: transform 0.3s ease; }
.drawer-overlay:target .drawer-panel { transform: translateX(0); }
.drawer-panel-right { left: auto; right: 0; transform: translateX(100%); box-shadow: -4px 0 24px rgba(0,0,0,0.12); }
.drawer-overlay:target .drawer-panel-right { transform: translateX(0); }
.drawer-header { padding: 20px 24px; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: space-between; }
.drawer-body { padding: 20px 24px; }

/* ── Media Object ── */
.media { display: flex; gap: 16px; align-items: flex-start; }
.media-body { flex: 1; min-width: 0; }
.media-right { order: 2; }
.media-sm { gap: 10px; }
.media-lg { gap: 24px; }

/* ── Stat Card ── */
.stat-card { background-color: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px 24px; }
.stat-label { font-size: 13px; font-weight: 500; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.stat-value { font-size: 32px; font-weight: 700; color: #111827; line-height: 1; margin-bottom: 8px; }
.stat-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; }
.stat-delta-up   { color: #15803d; }
.stat-delta-down { color: #b91c1c; }

/* ── Kbd ── */
.kbd { display: inline-block; padding: 2px 7px; font-family: ui-monospace, monospace; font-size: 12px; color: #374151; background-color: #f3f4f6; border: 1px solid #d1d5db; border-bottom-width: 2px; border-radius: 4px; box-shadow: inset 0 -1px 0 #d1d5db; white-space: nowrap; }

/* ── Close Button ── */
.btn-close { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: 6px; background-color: transparent; cursor: pointer; color: #9ca3af; transition: background-color 0.15s, color 0.15s; font-size: 20px; line-height: 1; padding: 0; }
.btn-close:hover { background-color: #f3f4f6; color: #374151; }
.btn-close::before { content: '×'; }
.btn-close-white { color: rgba(255,255,255,0.7); }
.btn-close-white:hover { background-color: rgba(255,255,255,0.1); color: #fff; }

/* ── Empty State ── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; }
.empty-state-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; line-height: 1; }
.empty-state-title { font-size: 18px; font-weight: 600; color: #111827; margin: 0 0 8px; }
.empty-state-desc { font-size: 14px; color: #6b7280; max-width: 320px; margin: 0 auto 20px; line-height: 1.5; }

/* ── Elevation (Material Design levels) ── */
.elevation-0 { box-shadow: none; }
.elevation-1 { box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); }
.elevation-2 { box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23); }
.elevation-3 { box-shadow: 0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23); }
.elevation-4 { box-shadow: 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22); }
.elevation-5 { box-shadow: 0 19px 38px rgba(0,0,0,.30), 0 15px 12px rgba(0,0,0,.22); }

/* ── Screen Reader / Accessibility ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.not-sr-only { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
.sr-only-focusable:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
.focus-ring:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.focus-ring-inset:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
.focus-none:focus { outline: none; box-shadow: none; }

/* ── Pointer Events ── */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ── User Select ── */
.select-none { user-select: none; -webkit-user-select: none; }
.select-text { user-select: text; }
.select-all  { user-select: all; }
.select-auto { user-select: auto; }

/* ── Will-change ── */
.will-change-auto      { will-change: auto; }
.will-change-scroll    { will-change: scroll-position; }
.will-change-contents  { will-change: contents; }
.will-change-transform { will-change: transform; }
.will-change-opacity   { will-change: opacity; }

/* ── Appearance ── */
.appearance-none { -webkit-appearance: none; appearance: none; }
.appearance-auto { -webkit-appearance: auto; appearance: auto; }

/* ── Caret color ── */
.caret-blue   { caret-color: #3b82f6; }
.caret-green  { caret-color: #22c55e; }
.caret-red    { caret-color: #ef4444; }
.caret-auto   { caret-color: auto; }
.caret-transparent { caret-color: transparent; }

/* ── Touch action ── */
.touch-none        { touch-action: none; }
.touch-pan-x       { touch-action: pan-x; }
.touch-pan-y       { touch-action: pan-y; }
.touch-manipulation{ touch-action: manipulation; }
.touch-auto        { touch-action: auto; }

/* ── Print utilities ── */
@media print {
  .print-hidden  { display: none !important; }
  .print-visible { display: block !important; }
  .print-break-before { page-break-before: always; }
  .print-break-after  { page-break-after: always; }
  .print-no-background { background: white !important; color: black !important; }
  .print-border-none { border: none !important; box-shadow: none !important; }
}

/* ── Message / Hero (Bulma-style) ── */
.message { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; font-size: 14px; }
.message-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; font-weight: 600; }
.message-body { padding: 14px 16px; color: #374151; line-height: 1.5; }
.message-info    .message-header { background-color: #3b82f6; color: #fff; }
.message-info    .message-body   { background-color: #eff6ff; }
.message-success .message-header { background-color: #22c55e; color: #fff; }
.message-success .message-body   { background-color: #f0fdf4; }
.message-warning .message-header { background-color: #f59e0b; color: #fff; }
.message-warning .message-body   { background-color: #fffbeb; }
.message-danger  .message-header { background-color: #ef4444; color: #fff; }
.message-danger  .message-body   { background-color: #fef2f2; }

/* ── Hero section ── */
.hero-section { display: flex; align-items: center; justify-content: center; min-height: 400px; padding: 64px 24px; text-align: center; }
.hero-section-sm { min-height: 200px; padding: 40px 24px; }
.hero-section-lg { min-height: 600px; }
.hero-section-full { min-height: 100vh; }
.hero-content { max-width: 800px; margin: 0 auto; }

/* ── Level (Bulma-style horizontal layout) ── */
.level { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.level-left  { display: flex; align-items: center; gap: 12px; }
.level-right { display: flex; align-items: center; gap: 12px; }
.level-item  { flex: 1; text-align: center; }

/* ── FAB (Material floating action button) ── */
.fab { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background-color: #3b82f6; color: #fff; border: none; cursor: pointer; box-shadow: 0 6px 10px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.15); transition: box-shadow 0.2s, transform 0.2s; }
.fab:hover { box-shadow: 0 8px 16px rgba(0,0,0,.25), 0 4px 6px rgba(0,0,0,.15); transform: translateY(-1px); }
.fab:active { box-shadow: 0 4px 8px rgba(0,0,0,.2); transform: translateY(0); }
.fab-sm { width: 40px; height: 40px; }
.fab-lg { width: 72px; height: 72px; }
.fab-extended { width: auto; border-radius: 9999px; padding: 0 20px; gap: 8px; font-size: 14px; font-weight: 600; }
.fab-bottom-right { position: fixed; bottom: 24px; right: 24px; z-index: 50; }
.fab-bottom-left  { position: fixed; bottom: 24px; left: 24px; z-index: 50; }

/* ── App Bar (Material-style) ── */
.app-bar { display: flex; align-items: center; gap: 16px; padding: 0 16px; height: 56px; background-color: #fff; border-bottom: 1px solid #e5e7eb; position: relative; z-index: 10; }
.app-bar-title { font-size: 18px; font-weight: 600; color: #111827; flex: 1; }
.app-bar-dark { background-color: #1e293b; border-bottom-color: #334155; }
.app-bar-dark .app-bar-title { color: #f1f5f9; }
.app-bar-primary { background-color: #3b82f6; border-bottom-color: #2563eb; }
.app-bar-primary .app-bar-title { color: #fff; }
.app-bar-sticky { position: sticky; top: 0; z-index: 50; }

/* ── Card variants (Bootstrap-style) ── */
.card-flat    { box-shadow: none; border: 1px solid #e5e7eb; }
.card-raised  { box-shadow: 0 10px 25px -5px rgba(0,0,0,.15), 0 4px 10px -4px rgba(0,0,0,.1); }
.card-outline { box-shadow: none; border: 2px solid #e5e7eb; background-color: transparent; }
.card-horizontal { display: flex; flex-direction: row; }
.card-horizontal .card-img { width: 200px; flex-shrink: 0; object-fit: cover; }
.card-img-top    { width: 100%; object-fit: cover; }
.card-img-bottom { width: 100%; object-fit: cover; }

/* ── Button groups ── */
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; border-right-width: 0; }
.btn-group .btn:first-child { border-radius: 8px 0 0 8px; }
.btn-group .btn:last-child  { border-radius: 0 8px 8px 0; border-right-width: 1px; }
.btn-group-vertical { display: inline-flex; flex-direction: column; }
.btn-group-vertical .btn { border-radius: 0; border-bottom-width: 0; }
.btn-group-vertical .btn:first-child { border-radius: 8px 8px 0 0; }
.btn-group-vertical .btn:last-child  { border-radius: 0 0 8px 8px; border-bottom-width: 1px; }

/* ── Input group (Bootstrap-style) ── */
.input-group { display: flex; }
.input-group .input { border-radius: 0; border-right-width: 0; flex: 1; }
.input-group .input:first-child { border-radius: 6px 0 0 6px; }
.input-group .input:last-child  { border-radius: 0 6px 6px 0; border-right-width: 1px; }
.input-addon { display: flex; align-items: center; padding: 0 12px; background-color: #f3f4f6; border: 1px solid #d1d5db; border-right: none; font-size: 14px; color: #6b7280; white-space: nowrap; }
.input-addon:first-child { border-radius: 6px 0 0 6px; }
.input-addon:last-child  { border-radius: 0 6px 6px 0; border-left: none; border-right-width: 1px; }


/* ── Dropdown ── */
.dropdown { position: relative; display: inline-block; }
.dropdown-toggle { cursor: pointer; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: var(--santy-shadow-md);
  z-index: 200;
  padding: 4px;
  animation: santy-zoom-in 0.15s ease;
}
.dropdown-menu-right { left: auto; right: 0; }
.dropdown-menu-top   { top: auto; bottom: calc(100% + 4px); }
.dropdown.open .dropdown-menu,
.dropdown-toggle:focus + .dropdown-menu,
.dropdown-menu:target { display: block; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: #374151;
  text-decoration: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.1s;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.dropdown-item:hover { background-color: #f3f4f6; color: #111827; }
.dropdown-item.active { background-color: #eff6ff; color: #2563eb; }
.dropdown-item.danger { color: #dc2626; }
.dropdown-item.danger:hover { background-color: #fef2f2; }
.dropdown-item:disabled, .dropdown-item.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.dropdown-divider { height: 1px; background-color: #e5e7eb; margin: 4px 0; }
.dropdown-header { padding: 6px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af; }

/* ── Component Variant System ──────────────────────────────────────────── */
/* Usage: make-button style-success size-large shape-pill */

/* make-button */
.make-button {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:9px 20px; font-size:14px; font-weight:600;
  border-radius:8px; border:2px solid transparent; cursor:pointer;
  text-decoration:none; transition:all 0.2s; line-height:1.25; white-space:nowrap;
}
.make-button:disabled { opacity:.5; cursor:not-allowed; }
.make-button.style-primary   { background:#3b82f6; color:#fff; border-color:#3b82f6; }
.make-button.style-primary:hover { background:#2563eb; border-color:#2563eb; }
.make-button.style-secondary { background:#6b7280; color:#fff; border-color:#6b7280; }
.make-button.style-secondary:hover { background:#4b5563; border-color:#4b5563; }
.make-button.style-success   { background:#22c55e; color:#fff; border-color:#22c55e; }
.make-button.style-success:hover { background:#16a34a; border-color:#16a34a; }
.make-button.style-danger    { background:#ef4444; color:#fff; border-color:#ef4444; }
.make-button.style-danger:hover  { background:#dc2626; border-color:#dc2626; }
.make-button.style-warning   { background:#f59e0b; color:#fff; border-color:#f59e0b; }
.make-button.style-warning:hover { background:#d97706; border-color:#d97706; }
.make-button.style-info      { background:#06b6d4; color:#fff; border-color:#06b6d4; }
.make-button.style-info:hover { background:#0891b2; border-color:#0891b2; }
.make-button.style-outline   { background:transparent; border-color:currentColor; }
.make-button.style-outline:hover { background:rgba(0,0,0,.05); }
.make-button.style-ghost     { background:transparent; border-color:transparent; }
.make-button.style-ghost:hover { background:rgba(0,0,0,.05); }
.make-button.style-dark      { background:#1e293b; color:#f1f5f9; border-color:#1e293b; }
.make-button.style-dark:hover { background:#0f172a; border-color:#0f172a; }
.make-button.style-light     { background:#f3f4f6; color:#374151; border-color:#e5e7eb; }
.make-button.style-light:hover { background:#e5e7eb; }
.make-button.size-tiny   { padding:2px 8px;   font-size:11px; border-radius:4px; }
.make-button.size-small  { padding:5px 14px;  font-size:12px; border-radius:6px; }
.make-button.size-large  { padding:12px 28px; font-size:16px; border-radius:10px; }
.make-button.size-xl     { padding:16px 36px; font-size:18px; border-radius:12px; }
.make-button.size-full   { width:100%; justify-content:center; }
.make-button.shape-pill   { border-radius:9999px; }
.make-button.shape-square { border-radius:0; }
.make-button.shape-rounded { border-radius:14px; }

/* make-card */
.make-card { background:#fff; border-radius:12px; box-shadow:var(--santy-shadow); overflow:hidden; }
.make-card.style-bordered  { border:1px solid #e5e7eb; box-shadow:none; }
.make-card.style-elevated  { box-shadow:0 10px 40px -8px rgba(0,0,0,.15); }
.make-card.style-flat      { box-shadow:none; }
.make-card.style-dark      { background:#1e293b; color:#f1f5f9; }
.make-card.shape-pill      { border-radius:9999px; }
.make-card.shape-square    { border-radius:0; }
.make-card.shape-rounded   { border-radius:20px; }
.make-card.size-small      { border-radius:8px; }
.make-card.size-large      { border-radius:20px; }

/* make-badge */
.make-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; font-size:12px; font-weight:600; border-radius:9999px; line-height:1.4; }
.make-badge.style-primary   { background:#dbeafe; color:#1d4ed8; }
.make-badge.style-secondary { background:#f3f4f6; color:#374151; }
.make-badge.style-success   { background:#dcfce7; color:#15803d; }
.make-badge.style-danger    { background:#fee2e2; color:#b91c1c; }
.make-badge.style-warning   { background:#fef3c7; color:#b45309; }
.make-badge.style-info      { background:#cffafe; color:#0e7490; }
.make-badge.style-dark      { background:#1e293b; color:#f1f5f9; }
.make-badge.style-outline   { background:transparent; border:1.5px solid currentColor; }
.make-badge.size-small      { padding:1px 7px; font-size:10px; }
.make-badge.size-large      { padding:5px 14px; font-size:14px; }
.make-badge.shape-square    { border-radius:4px; }
.make-badge.shape-rounded   { border-radius:6px; }

/* make-alert */
.make-alert { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:10px; font-size:14px; border:1px solid transparent; line-height:1.5; }
.make-alert.style-info    { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.make-alert.style-success { background:#f0fdf4; border-color:#bbf7d0; color:#15803d; }
.make-alert.style-warning { background:#fffbeb; border-color:#fde68a; color:#b45309; }
.make-alert.style-danger  { background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
.make-alert.style-dark    { background:#1e293b; border-color:#334155; color:#f1f5f9; }
.make-alert.size-small    { padding:10px 12px; font-size:13px; border-radius:8px; }
.make-alert.size-large    { padding:20px; font-size:16px; border-radius:12px; }
.make-alert.shape-square  { border-radius:0; }
.make-alert.shape-pill    { border-radius:9999px; padding-left:24px; }

/* make-input */
.make-input { display:block; width:100%; padding:9px 12px; font-size:14px; font-family:inherit; color:#111827; background:#fff; border:1.5px solid #d1d5db; border-radius:8px; transition:border-color .15s,box-shadow .15s; outline:none; line-height:1.5; }
.make-input:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.2); }
.make-input.style-error   { border-color:#ef4444; }
.make-input.style-error:focus { box-shadow:0 0 0 3px rgba(239,68,68,.2); }
.make-input.style-success { border-color:#22c55e; }
.make-input.size-small    { padding:4px 8px;   font-size:12px; border-radius:6px; }
.make-input.size-large    { padding:12px 16px; font-size:16px; border-radius:10px; }
.make-input.shape-pill    { border-radius:9999px; padding-left:20px; }
.make-input.shape-square  { border-radius:0; }

/* make-avatar */
.make-avatar { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:#e5e7eb; color:#374151; font-weight:600; font-size:14px; overflow:hidden; flex-shrink:0; }
.make-avatar img { width:100%; height:100%; object-fit:cover; }
.make-avatar.size-tiny   { width:24px;  height:24px;  font-size:10px; }
.make-avatar.size-small  { width:32px;  height:32px;  font-size:12px; }
.make-avatar.size-large  { width:56px;  height:56px;  font-size:18px; }
.make-avatar.size-xl     { width:80px;  height:80px;  font-size:24px; }
.make-avatar.shape-square  { border-radius:8px; }
.make-avatar.shape-rounded { border-radius:12px; }
.make-avatar.style-primary { background:#dbeafe; color:#1d4ed8; }
.make-avatar.style-success { background:#dcfce7; color:#15803d; }
.make-avatar.style-danger  { background:#fee2e2; color:#b91c1c; }
.make-avatar.style-warning { background:#fef3c7; color:#b45309; }
.make-avatar.style-dark    { background:#1e293b; color:#f1f5f9; }

/* make-spinner */
.make-spinner { display:inline-block; width:24px; height:24px; border:3px solid #e5e7eb; border-top-color:#3b82f6; border-radius:50%; animation:santy-spin .75s linear infinite; }
.make-spinner.size-tiny   { width:14px; height:14px; border-width:2px; }
.make-spinner.size-small  { width:18px; height:18px; border-width:2px; }
.make-spinner.size-large  { width:40px; height:40px; border-width:4px; }
.make-spinner.size-xl     { width:56px; height:56px; border-width:5px; }
.make-spinner.style-success { border-top-color:#22c55e; }
.make-spinner.style-danger  { border-top-color:#ef4444; }
.make-spinner.style-warning { border-top-color:#f59e0b; }
.make-spinner.style-dark    { border-color:#334155; border-top-color:#f1f5f9; }

/* make-skeleton */
.make-skeleton { background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); background-size:200% 100%; animation:santy-shimmer 1.5s infinite; border-radius:6px; }
.make-skeleton.shape-circle  { border-radius:50%; }
.make-skeleton.shape-pill    { border-radius:9999px; }
.make-skeleton.shape-square  { border-radius:0; }
.make-skeleton.size-small { height:12px; }
.make-skeleton.size-large { height:24px; }

/* make-progress */
.make-progress { width:100%; background:#e5e7eb; border-radius:9999px; overflow:hidden; }
.make-progress > .bar { height:8px; background:#3b82f6; border-radius:9999px; transition:width .4s ease; }
.make-progress.style-success > .bar { background:#22c55e; }
.make-progress.style-danger  > .bar { background:#ef4444; }
.make-progress.style-warning > .bar { background:#f59e0b; }
.make-progress.style-dark    > .bar { background:#1e293b; }
.make-progress.size-small > .bar    { height:4px; }
.make-progress.size-large > .bar    { height:14px; }
.make-progress.shape-square { border-radius:0; }
.make-progress.shape-square > .bar  { border-radius:0; }

/* make-table */
.make-table { width:100%; border-collapse:collapse; font-size:14px; }
.make-table th,.make-table td { padding:10px 12px; text-align:left; border-bottom:1px solid #e5e7eb; }
.make-table thead tr { background:#f9fafb; }
.make-table thead th { font-weight:600; color:#374151; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.make-table.style-striped tbody tr:nth-child(even) { background:#f9fafb; }
.make-table.style-bordered { border:1px solid #e5e7eb; }
.make-table.style-bordered th,.make-table.style-bordered td { border:1px solid #e5e7eb; }
.make-table.style-hover tbody tr:hover { background:#f3f4f6; cursor:pointer; }
.make-table.style-dark { background:#1e293b; color:#f1f5f9; }
.make-table.style-dark th,.make-table.style-dark td { border-color:#334155; }
.make-table.style-dark thead tr { background:#0f172a; }
.make-table.size-small th,.make-table.size-small td { padding:6px 10px; font-size:13px; }
.make-table.size-large th,.make-table.size-large td { padding:14px 16px; font-size:15px; }

/* make-navbar */
.make-navbar { display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:#fff; border-bottom:1px solid #e5e7eb; gap:16px; }
.make-navbar.style-dark        { background:#1e293b; border-color:#334155; color:#f1f5f9; }
.make-navbar.style-glass       { background:rgba(255,255,255,.8); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.make-navbar.style-transparent { background:transparent; border-color:transparent; }
.make-navbar.style-dark.style-glass { background:rgba(15,23,42,.85); }
.make-navbar.size-small        { padding:8px 16px; }
.make-navbar.size-large        { padding:20px 32px; }
.make-navbar.shape-sticky      { position:sticky; top:0; z-index:50; }

/* make-tooltip */
.make-tooltip { position:relative; display:inline-block; }
.make-tooltip .tip { visibility:hidden; opacity:0; position:absolute; z-index:100; background:#1f2937; color:#f9fafb; font-size:12px; padding:5px 10px; border-radius:6px; white-space:nowrap; pointer-events:none; transition:opacity .15s; line-height:1.4; }
.make-tooltip:hover .tip { visibility:visible; opacity:1; }
.make-tooltip.style-top    .tip { bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); }
.make-tooltip.style-bottom .tip { top:calc(100% + 8px);    left:50%; transform:translateX(-50%); }
.make-tooltip.style-left   .tip { right:calc(100% + 8px);  top:50%;  transform:translateY(-50%); }
.make-tooltip.style-right  .tip { left:calc(100% + 8px);   top:50%;  transform:translateY(-50%); }
.make-tooltip.style-light  .tip { background:#fff; color:#111827; box-shadow:0 4px 12px rgba(0,0,0,.15); }

/* make-notification */
.make-notification { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:10px; font-size:14px; border:1px solid transparent; line-height:1.4; }
.make-notification.style-info    { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.make-notification.style-success { background:#f0fdf4; border-color:#bbf7d0; color:#15803d; }
.make-notification.style-warning { background:#fffbeb; border-color:#fde68a; color:#b45309; }
.make-notification.style-danger  { background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
.make-notification.style-dark    { background:#1e293b; border-color:#334155; color:#f1f5f9; }
.make-notification.size-small    { padding:10px 12px; font-size:13px; }
.make-notification.size-large    { padding:20px; font-size:15px; }

/* make-modal */
.make-modal { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; display:none; align-items:center; justify-content:center; padding:16px; }
.make-modal:target { display:flex; }
.make-modal > .box { background:#fff; border-radius:16px; box-shadow:0 25px 50px -12px rgba(0,0,0,.25); max-width:560px; width:100%; max-height:90vh; overflow-y:auto; animation:santy-zoom-in .25s ease; }
.make-modal.size-small > .box { max-width:400px; }
.make-modal.size-large > .box { max-width:768px; }
.make-modal.size-xl    > .box { max-width:1024px; }
.make-modal.size-full  > .box { max-width:100%; height:100vh; border-radius:0; max-height:100vh; }
.make-modal.shape-square > .box { border-radius:0; }
.make-modal.style-dark > .box { background:#1e293b; color:#f1f5f9; }

/* make-drawer */
.make-drawer { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; display:none; }
.make-drawer:target { display:block; }
.make-drawer > .panel { position:fixed; top:0; bottom:0; left:0; width:300px; background:#fff; z-index:201; overflow-y:auto; box-shadow:4px 0 24px rgba(0,0,0,.12); transform:translateX(-100%); transition:transform .3s ease; }
.make-drawer:target > .panel { transform:translateX(0); }
.make-drawer.style-right > .panel { left:auto; right:0; transform:translateX(100%); box-shadow:-4px 0 24px rgba(0,0,0,.12); }
.make-drawer:target.style-right > .panel { transform:translateX(0); }
.make-drawer.style-dark > .panel { background:#1e293b; color:#f1f5f9; }
.make-drawer.size-small > .panel { width:220px; }
.make-drawer.size-large > .panel { width:420px; }

/* make-accordion */
.make-accordion { border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; }
.make-accordion.style-flush  { border:none; border-radius:0; }
.make-accordion.style-dark   { background:#1e293b; border-color:#334155; color:#f1f5f9; }
.make-accordion.shape-square { border-radius:0; }
.make-accordion.shape-rounded { border-radius:16px; }

/* make-dropdown */
.make-dropdown { position:relative; display:inline-block; }
.make-dropdown > .menu { display:none; position:absolute; top:calc(100% + 4px); left:0; min-width:180px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.1); z-index:100; overflow:hidden; padding:4px; }
.make-dropdown.open > .menu { display:block; }
.make-dropdown.style-right > .menu { left:auto; right:0; }
.make-dropdown.style-top   > .menu { top:auto; bottom:calc(100% + 4px); }
.make-dropdown.style-dark  > .menu { background:#1e293b; border-color:#334155; }
.make-dropdown.size-small  > .menu { min-width:140px; font-size:13px; }
.make-dropdown.size-large  > .menu { min-width:240px; font-size:15px; }

/* ── Dark Mode Component Variants ── */
@media (prefers-color-scheme: dark) {
  .dark-auto .card         { background-color: #1e293b; }
  .dark-auto .card-header  { border-color: #334155; }
  .dark-auto .card-footer  { border-color: #334155; }
  .dark-auto .btn-outline  { border-color: #475569; color: #e2e8f0; }
  .dark-auto .input        { background-color: #1e293b; border-color: #334155; color: #f1f5f9; }
  .dark-auto .input::placeholder { color: #64748b; }
  .dark-auto .select       { background-color: #1e293b; border-color: #334155; color: #f1f5f9; }
}
/* Manual dark mode via .dark class on html/body */
.dark .card         { background-color: #1e293b; color: #f1f5f9; }
.dark .card-header  { border-color: #334155; }
.dark .card-footer  { border-color: #334155; }
.dark .card-body    { color: #cbd5e1; }
.dark .input        { background-color: #1e293b; border-color: #334155; color: #f1f5f9; }
.dark .input:focus  { border-color: #3b82f6; }
.dark .select       { background-color: #1e293b; border-color: #334155; color: #f1f5f9; }
.dark .textarea     { background-color: #1e293b; border-color: #334155; color: #f1f5f9; }
.dark .dropdown-menu { background-color: #1e293b; border-color: #334155; }
.dark .dropdown-item { color: #e2e8f0; }
.dark .dropdown-item:hover { background-color: #334155; color: #f1f5f9; }
.dark .list-group-item { background-color: #1e293b; border-color: #334155; color: #e2e8f0; }
.dark .list-group-item:hover { background-color: #334155; }
.dark .table th, .dark .table td { border-color: #334155; }
.dark .table thead tr { background-color: #0f172a; }
.dark .table thead th { color: #94a3b8; }
.dark .modal-box { background-color: #1e293b; color: #f1f5f9; }
.dark .modal-header { border-color: #334155; }
.dark .modal-footer { border-color: #334155; }
.dark .accordion { border-color: #334155; }
.dark .accordion-item { border-color: #334155; }
.dark .accordion-header { background-color: #1e293b; color: #f1f5f9; }
.dark .accordion-header:hover { background-color: #334155; }
.dark .accordion-body { background-color: #1e293b; color: #94a3b8; }
.dark .tabs { border-color: #334155; }
.dark .tabs-item { color: #94a3b8; }
.dark .tabs-item:hover { color: #e2e8f0; }
.dark .tabs-pill { background-color: #0f172a; }
.dark .tabs-pill .tabs-item.active { background-color: #1e293b; color: #f1f5f9; }
/* Dark buttons */
.dark .btn-outline { border-color: #475569; color: #e2e8f0; }
.dark .btn-outline:hover { background-color: #334155; }
.dark .btn-ghost { color: #cbd5e1; }
.dark .btn-ghost:hover { background-color: #334155; }
.dark .btn-secondary { background-color: #334155; color: #f1f5f9; border-color: #475569; }
.dark .btn-secondary:hover { background-color: #475569; }
/* Dark alerts */
.dark .alert { background-color: #1e293b; border-color: #334155; color: #e2e8f0; }
.dark .alert-info    { background-color: #0c1a2e; border-color: #1e3a5f; color: #93c5fd; }
.dark .alert-success { background-color: #052e16; border-color: #166534; color: #86efac; }
.dark .alert-warning { background-color: #2d1b00; border-color: #92400e; color: #fcd34d; }
.dark .alert-danger  { background-color: #2d0a0a; border-color: #991b1b; color: #fca5a5; }
/* Dark badges */
.dark .badge { background-color: #334155; color: #e2e8f0; }
/* Dark notifications */
.dark .notification { background-color: #1e293b; border-color: #334155; color: #e2e8f0; }
.dark .notification-success { background-color: #052e16; border-color: #166534; }
.dark .notification-error   { background-color: #2d0a0a; border-color: #991b1b; }
.dark .notification-warning { background-color: #2d1b00; border-color: #92400e; }
/* Dark breadcrumb + pagination */
.dark .breadcrumb-item { color: #94a3b8; }
.dark .breadcrumb-item.active { color: #e2e8f0; }
.dark .page-link { background-color: #1e293b; border-color: #334155; color: #e2e8f0; }
.dark .page-item.active .page-link { background-color: #3b82f6; border-color: #3b82f6; color: #fff; }
.dark .page-item.disabled .page-link { opacity: 0.4; }
/* Dark navbar */
.dark .navbar { background-color: #0f172a; border-color: #1e293b; }
.dark .navbar-brand { color: #f1f5f9; }
.dark .navbar-item { color: #94a3b8; }
.dark .navbar-item:hover { background-color: #1e293b; color: #f1f5f9; }
/* Dark drawer */
.dark .drawer-panel { background-color: #1e293b; }
.dark .drawer-header { border-color: #334155; color: #f1f5f9; }
.dark .drawer-body { color: #cbd5e1; }
/* Dark steps */
.dark .step-dot { background-color: #334155; color: #94a3b8; }
.dark .step.active .step-dot { background-color: #3b82f6; color: #fff; }
.dark .step.done .step-dot { background-color: #22c55e; color: #fff; }
.dark .step-label { color: #94a3b8; }
.dark .step.active .step-label { color: #f1f5f9; }

/* ── Container Queries (modern CSS) ── */
@container (min-width: 400px) { .cq-sm\:make-flex { display: flex; } .cq-sm\:grid-cols-2 { grid-template-columns: repeat(2,1fr); } }
@container (min-width: 600px) { .cq-md\:grid-cols-3 { grid-template-columns: repeat(3,1fr); } .cq-md\:make-flex { display: flex; } }
@container (min-width: 800px) { .cq-lg\:grid-cols-4 { grid-template-columns: repeat(4,1fr); } }
.container-query { container-type: inline-size; }
.container-query-size { container-type: size; }