/* 
JquanUI.xingzouweb.cn
version:3.0
*/
/* 配置导入 */
@import url("Config.css");
/*初始化*/
/* 字体 */
@font-face {
    font-family: "MiSans Light";
    src: url("../fonts/MiSans/woff2/MiSans-Light.woff2") format("woff2"),
        url("../fonts/MiSans/woff/MiSans-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    font-display: optional
}
@font-face {
    font-family: "MiSans Regular";
    src: url("../fonts/MiSans/woff2/MiSans-Regular.woff2") format("woff2"),
        url("../fonts/MiSans/woff/MiSans-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    font-display: optional
}
@font-face {
    font-family: "MiSans Medium";
    src: url("../fonts/MiSans/woff2/MiSans-Medium.woff2") format("woff2"),
        url("../fonts/MiSans/woff/MiSans-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    font-display: optional
}

@font-face {
    font-family: "MiSans SemiBold";
    src: url("../fonts/MiSans/woff2/MiSans-Semibold.woff2") format("woff2"),
        url("../fonts/MiSans/woff/MiSans-Semibold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "MiSans VF";
    src: url("../fonts/MiSans/MiSansVF.ttf") format("truetype");
    font-variation-settings: "wght" 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "阿里妈妈灵动体 VF Thin";src: url("../fonts/阿里妈妈灵动体/AlimamaAgileVF-Thin.woff2") format("woff2"),
  url("../fonts/阿里妈妈灵动体/AlimamaAgileVF-Thin.woff") format("woff"),url("../fonts/阿里妈妈灵动体/AlimamaAgileVF-Thin.ttf") format("truetype");
  font-variation-settings: "SRIF" 0, "slnt" 0, "wdth" 75, "wght" 100;
  font-display: swap;
}
@font-face{
  font-family: "MonaSans VF";src:url("../fonts/mona-sans/MonaSansVF[wdth\,wght\,opsz\,ital].woff2") format("woff2"),
  url("../fonts/mona-sans/MonaSansVF[wdth\,wght\,opsz\,ital].woff") format("woff");
  font-variation-settings: "opsz" 12, "wdth" 100, "wght" 400, "ital" 0;
  font-display: swap;
}
/* 特殊文字 */
@font-face {
  font-family: "Monoton";
  font-display: optional;
  font-style: normal;
  font-weight: 400;
  src: local("Monoton"), local("Monoton-Regular"),
    url(../fonts/AKI-lyzyNHXByGHeOcds_w.woff) format("woff");
}

@font-face {
  font-family: "Iceland";
  font-display: optional;
  font-style: normal;
  font-weight: 400;
  src: local("Iceland"), local("Iceland-Regular"),
    url(../fonts/F6LYTZLHrG9BNYXRjU7RSw.woff) format("woff");
}

@font-face {
  font-family: "Pacifico";
  font-style: normal;
  font-weight: 400;
  src: local("Pacifico Regular"), local("Pacifico-Regular"),
    url(../fonts/yunJt0R8tCvMyj_V4xSjafesZW2xOQ-xsNqO47m55DA.woff) format("woff");
}

@font-face {
  font-family: "PressStart";
  font-display: optional;
  font-style: normal;
  font-weight: 400;
  src: local("Press Start 2P"), local("PressStart2P-Regular"),
    url(../fonts/8Lg6LX8-ntOHUQnvQ0E7o3dD2UuwsmbX3BOp4SL_VwM.woff) format("woff");
}

@font-face {
  font-family: "Audiowide";
  font-display: optional;
  font-style: normal;
  font-weight: 400;
  src: local("Audiowide"), local("Audiowide-Regular"),
    url(../fonts/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff");
}

@font-face {
  font-family: "Vampiro One";
  font-style: normal;
  font-display: optional;
  font-weight: 400;
  src: local("Vampiro One"), local("VampiroOne-Regular"),
    url(../fonts/Ho2Xld8UbQyBA8XLxF1_NYbN6UDyHWBl620a-IRfuBk.woff) format("woff");
}

/* Box Sizing Reset */
*,
*::before,
*::after {
  border-color: rgb(var(--surface-border));
  border-style: solid;
  border-width: var(--border-width-0);
  box-sizing: border-box;
}

/* 基础样式 */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 现代浏览器：预留滚动条空间，防止页面宽度跳动 */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font);
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Element Reset */
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dd,
ul,
ol,
th,
td,
button,
figure,
figcaption,
input,
textarea,
blockquote,
fieldset,
legend,
hr,
pre,
form {
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

/* Typography Elements */
a,
h1,
h2,
h3,
h4,
h5,
h6,
input,
select,
button,
option,
textarea,
optgroup {
  font-family: inheit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  color: inherit;
  outline: none;
  letter-spacing: 1px;
  /* Anti-aliasing */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  letter-spacing: inherit;
}

input::-webkit-input-placeholder {
  color: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  font-weight: 400;
  font-family: inherit;
  color: rgb(var(--surface-text)) rgb(var(--gray-400));
}

/* 水平线变体 */
hr {
  overflow: visible;
  margin-block: 1.25rem;
  /* 20px in rem equivalent */
  border: 0;
  border-top: 1px solid rgb(var(--gray-300));
  height: 0;
  box-sizing: content-box;
}

hr.theme-hr {
  border-top: 1px solid;
  border-color: rgb(var(--primary-hue-500));
}

.hr-gradient {
  border-image-source: linear-gradient(to right, var(--gradient-stops));
  border-image-slice: 1;
  border-top: 1px solid;
}

.divide-x-0 {
  border-right-width: var(--border-width-0);
  border-left-width: var(--border-width-0);
}

.divide-x-1 {
  border-right-width: var(--border-width-1);
  border-left-width: var(--border-width-1);
}

.divide-x-2 {
  border-right-width: var(--border-width-2);
  border-left-width: var(--border-width-2);
}

.divide-x-4 {
  border-right-width: var(--border-width-4);
  border-left-width: var(--border-width-4);
}

.divide-x-8 {
  border-right-width: var(--border-width-8);
  border-left-width: var(--border-width-8);
}

.divide-y-0 {
  border-top-width: var(--border-width-0);
  border-bottom-width: var(--border-width-0);
}

.divide-y-1 {
  border-top-width: var(--border-width-1);
  border-bottom-width: var(--border-width-1);
}

.divide-y-2 {
  border-top-width: var(--border-width-2);
  border-bottom-width: var(--border-width-2);
}

.divide-y-4 {
  border-top-width: var(--border-width-4);
  border-bottom-width: var(--border-width-4);
}

.divide-y-8 {
  border-top-width: var(--border-width-8);
  border-bottom-width: var(--border-width-8);
}

.divide-x-reverse-0 {
  border-left-width: var(--border-width-0);
  border-right-width: var(--border-width-0);
}

.divide-x-reverse-1 {
  border-left-width: var(--border-width-1);
  border-right-width: var(--border-width-1);
}

.divide-x-reverse-2 {
  border-left-width: var(--border-width-2);
  border-right-width: var(--border-width-2);
}

.divide-x-reverse-4 {
  border-left-width: var(--border-width-4);
  border-right-width: var(--border-width-4);
}

.divide-x-reverse-8 {
  border-left-width: var(--border-width-8);
  border-right-width: var(--border-width-8);
}

.divide-y-reverse-0 {
  border-bottom-width: var(--border-width-0);
  border-top-width: var(--border-width-0);
}

.divide-y-reverse-1 {
  border-bottom-width: var(--border-width-1);
  border-top-width: var(--border-width-1);
}

.divide-y-reverse-2 {
  border-bottom-width: var(--border-width-2);
  border-top-width: var(--border-width-2);
}

.divide-y-reverse-4 {
  border-bottom-width: var(--border-width-4);
  border-top-width: var(--border-width-4);
}

.divide-y-reverse-8 {
  border-bottom-width: var(--border-width-8);
  border-top-width: var(--border-width-8);
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  --font-size: var(--spacing-3);
  font-family: var(--font);
  font-size: var(--font-size);
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

/* Forms*/
button,
input,
optgroup,
select,
textarea {
  --border-width: 1px;
  --border-color: rgb(var(--gray-200));
  --border-radius: 4px;
  --border-style: solid;
  margin: 0;
  /* 清除浏览器默认的外边距 */
  font-family: var(--font);
  /* 继承父级字体 */
  font-size: 14px;
  /* 统一字体大小 */
  line-height: 1.15;
  /* 统一的行高 */
  color: rgb(var(--gray-400));
  /* 继承父级颜色 */
  background: transparent;
  /* 透明背景，不覆盖外部设置 */
  border: var(--border-width) var(--border-style) var(--border-color);
  /* 清除浏览器默认边框 */
  border-radius: var(--border-radius);
  /* 重置圆角 */
  padding: 5px 6px;
  /* 清除内边距 */
  outline: none;
  /* 去掉默认 outline（如需保留可改为 outline-color: transparent） */
  -webkit-appearance: none;
  /* 移除 iOS/Mac 上部分表单元素的系统样式 */
  appearance: none;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

cite {
  border-left: solid 3px;
  border-color: rgb(var(--primary-hue-500));
  color: var(--gray-500);
  border-radius: 0px 4px 4px 0px;
  background-color: #eeeeee;
  padding: 4px 8px;
  font-style: inherit;
}

cite.gradient {
  border-image-source: var(--primary-hue-500);
  border-image-slice: 1;
  border-left: solid 3px;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  /* 3 */
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/*折叠面板*/
details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/* Links */
a {
  color: var(--dark-color);
  text-decoration: none;
  transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1);
  transition-property: color, background, transform, opacity, left, top, right,
    bottom, -webkit-transform, -o-transform;
}

a:hover {
  color: var(--main-color);
}

/* Lists */
ol,
ul {
  margin: 0;
  padding-left: 0;
}

.list-disc,
ul.list-disc,
ol.list-disc,
ul.list-decimal,
ol.list-decimal,
ul.list-square,
ol.list-square {
  padding-left: 1rem;
}

.list-none,
ul.list-none li,
ol.list-none li {
  list-style: none;
}

ul.list-disc li,
ol.list-disc li {
  list-style: disc;
}

ul.list-decimal li,
ol.list-decimal li {
  list-style: decimal;
}

ul.list-square li,
ol.list-square li {
  list-style: square;
}

/* Media Elements */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
  display: table;
}

table .tr {
  display: table-row;
}

table th,
table td {
  display: table-cell;
}

/* ============排版========== */
/* 字号 */
.text-xs {
  --font-size:var(--spacing-3);
  --line-height:var(--spacing-4);
  font-size: var(--font-size);
  line-height: var(--line-height);
  --opsz:12;
}

.text-sm,
h6,
p {
  --font-size:var(--spacing-3-5);
  --line-height:var(--spacing-5);
  font-size: var(--font-size);
  /* 14px */
  line-height: var(--line-height);
  /* 20px */
  --opsz:14;
}

.text-base,
.text-md,
h5 {
  --font-size:var(--spacing-4);
  --line-height:var(--spacing-6);
  font-size: var(--font-size);
  /* 16px */
  line-height: var(--line-height);
  /* 24px */
  --opsz:16;
}

.text-lg,
h4 {
  --font-size:var(--spacing-4-5);
  --line-height:var(--spacing-7);
  font-size: var(--font-size);
  /* 18px */
  line-height: var(--line-height);
  /* 28px */
  --opsz:18;
}

.text-xl,
h3 {
  --font-size:var(--spacing-5);
  --line-height:var(--spacing-7);
  font-size: var(--font-size);
  /* 20px */
  line-height: var(--line-height);
  /* 32px */
  --opsz:20;
}

.text-2xl,
h2 {
  --font-size:var(--spacing-6);
  --line-height:var(--spacing-8);
  font-size: var(--font-size);
  /* 24px */
  line-height: var(--line-height);
  /* 32px */
  --opsz:24;
}

.text-3xl,
h1 {
  --font-size:var(--spacing-7\.5);
  --line-height:var(--spacing-9);
  font-size: var(--font-size);
  /* 30px */
  line-height: var(--line-height);
  /* 36px */
  --opsz:30;
}

.text-4xl {
  --font-size:var(--spacing-8);
  --line-height:var(--spacing-10);
  font-size: var(--font-size);
  /* 36px */
  line-height: var(--line-height);
  /* 40px */
  --opsz:36;
}

.text-5xl {
  --font-size:var(--spacing-12);
  --line-height:1.1;
  font-size: var(--font-size);
  /* 48px */
  line-height: var(--line-height);
  /* 改进自 1 */
  --opsz:48;
}

.text-6xl {
  --font-size:var(--spacing-14\.5);
  --line-height:1.1;
  font-size: var(--font-size);
  /* 60px */
  line-height: var(--line-height);
  /* 改进自 1 */
  --opsz:60;
}

.text-7xl {
  --font-size:var(--spacing-18);
  --line-height:1.1;
  font-size: var(--font-size);
  /* 72px */
  line-height: var(--line-height);
  /* 改进自 1 */
  --opsz:72;
}

.text-8xl {
  --font-size:var(--spacing-24);
  --line-height:1.1;
  font-size: var(--font-size);
  /* 96px */
  line-height: var(--line-height);
  /* 改进自 1 */
  --opsz:96;
}

.text-9xl {
  --font-size:var(--spacing-32);
  --line-height:1.1;
  font-size: var(--font-size);
  /* 128px */
  line-height: var(--line-height);
  /* 改进自 1 */
  --opsz:128;
}

.text-sn {
  font-size: var(--font-size, 1.25rem);
  /* 默认值 */
}

/* 响应式字体大小 */
@media (max-width: 768px) {
  .text-5xl {
    font-size: 2.5rem;
  }

  .text-6xl {
    font-size: 3rem;
  }

  .text-7xl {
    font-size: 3.5rem;
  }

  .text-8xl {
    font-size: 4rem;
  }

  .text-9xl {
    font-size: 5rem;
  }
}
/* 字体样式 */
.font-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

.font-serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.font-sans {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.font-misans-regular{
  font-family: "MiSans Regular";
}
.font-misans-medium{
  font-family: "MiSans Medium";
}
.font-misans-light{
  font-family: "MiSans Light";
}
.font-misans-vf{
  font-family: "MiSans VF";
  --wght:400;
  font-variation-settings: "wght" var(--wght);
}
.font-misans-semibold{
  font-family: "MiSans SemiBold";
}
.font-ali-bold {
  font-family: "阿里妈妈数黑体 Bold";
}
.font-ali-agile {
  font-family: "阿里妈妈灵动体 VF Thin";
  --srif: 0; /*衬线*/
  --slnt: 0;  /*倾斜度*/
  --wdth: 100; /*字宽*/
  --wght: 400; /*字高*/
  font-variation-settings: 
    "SRIF" var(--srif), 
    "slnt" var(--slnt), 
    "wdth" var(--wdth), 
    "wght" var(--wght);
}
.font-mona{
  font-family: "MonaSans VF";
  --opsz:14;
  --wdth:100;
  --wght:400;
  --ital:0;
  font-variation-settings: 
    "opsz" var(--opsz), 
    "wdth" var(--wdth), 
    "wght" var(--wght), 
    "ital" var(--ital);
}
/* 字重 */
.font-thin {
  font-weight: 100;
  --wght:100;
}

.font-extralight {
  font-weight: 200;
  --wght:200;
}

.font-light {
  font-weight: 300;
  --wght:300;
}

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

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

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

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

.font-extrabold {
  font-weight: 800;
  --wght:800;
}

.font-black {
  font-weight: 900;
  --wght:900;
}
/* 衬线 */
.font-serif-1 {
  --srif:1;
}
.font-serif-0{
  --srif:0;
}
/* 倾斜 */
.font-slnt-0{
  --slnt:0;
}
.font-slnt-5{
  --slnt:5;
}
.font-slnt-7{
  --slnt:7;
}
.font-slnt-10{
  --slnt:10;
}
.font-slnt-12{
  --slnt:12;
}
/* 字宽 */
.font-wdth-50{
  --wdth:50;
}
.font-wdth-75{
  --wdth:75;
}
.font-wdth-100{
  --wdth:100;
}
.font-wdth-125{
  --wdth:125;
}
/* 圆角 */
.font-bevl-1{
  --bevl:1;
}
.font-bevl-20{
  --bevl:20;
}
.font-bevl-50{
  --bevl:50;
}
.font-bevl-80{
  --bevl:80;
}
.font-bevl-full{
  --bevl:100;
}
/* 真斜体 */
.font-ital-1{
  --ital:1;
}
.font-ital-0{
  --ital:0;
}
/* 光学 */
.font-opsz-xs{
  --opsz:12;
}
.font-opsz-sm{
  --opsz:14;
}
.font-opsz-md{
  --opsz:16;
}
.font-opsz-lg{
  --opsz:20;
}
.font-opsz-xl{
  --opsz:24;
}
.font-opsz-2xl{
  --opsz:30;
}
.font-opsz-3xl{
  --opsz:36;
}
.font-opsz-4xl{
  --opsz:48;
}
.font-opsz-5xl{
  --opsz:60;
}
.font-opsz-6xl{
  --opsz:72;
}
.font-opsz-7xl{
  --opsz:96;
}
.font-opsz-8xl{
  --opsz:128;
}

/* 字体行高 */
/* 绝对行高 */
.leading-3 {
  --line-height:var(--spacing-3);
  line-height: var(--line-height);
}

.leading-4 {
  --line-height:var(--spacing-4);
  line-height: var(--line-height);
}

.leading-5 {
  --line-height:var(--spacing-5);
  line-height: var(--line-height);
}

.leading-6 {
  --line-height:var(--spacing-6);
  line-height: var(--line-height);
}

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

.leading-8 {
  --line-height:var(--spacing-8);
  line-height: var(--line-height);
}

.leading-9 {
  --line-height:var(--spacing-9);
  line-height: var(--line-height);
}

.leading-10 {
  --line-height:var(--spacing-10);
  line-height: var(--line-height);
}

/* 相对行高 */
.leading-none {
  --line-height:1;
  line-height: var(--line-height);
}

.leading-tight {
  --line-height:1.25;
  line-height: var(--line-height);
}

.leading-snug {
  --line-height:1.375;
  line-height: var(--line-height);
}

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

.leading-relaxed {
  --line-height:1.625;
  line-height: var(--line-height);
}

.leading-loose {
  --line-height:2;
  line-height: var(--line-height);
}

/* 自定义行高 */
.leading-sn {
  line-height: var(--line-height, 1.25);
  /* 默认值 */
}

/* 行数限制 */
.line-clamp-1,
.line-clamp-2,
.line-clamp-3,
.line-clamp-4,
.line-clamp-5,
.line-clamp-6 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.line-clamp-1 {
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  -webkit-line-clamp: 3;
}

.line-clamp-4 {
  -webkit-line-clamp: 4;
}

.line-clamp-5 {
  -webkit-line-clamp: 5;
}

.line-clamp-6 {
  -webkit-line-clamp: 6;
}

.line-clamp-sn {
  -webkit-line-clamp: var(--line-clamp, 1);
}

/*换行*/
.break-normal {
  overflow-wrap: normal;
  word-break: normal;
}

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

.break-all {
  word-break: break-all;
}

/*空白处理*/
.white-space-normal {
  white-space: normal;
}

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

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

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

.white-space-pre-line {
  white-space: pre-line;

}

.white-space-break-spaces {
  white-space: break-spaces;

}

/* 文本换行 */
.text-wrap-wrap {
  text-wrap: wrap;
}

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

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

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

/* 文本左对齐 */
.text-left {
  text-align: left;
}

/* 文本右对齐 */
.text-right {
  text-align: right;
}

/* 文本两端对齐 */
.text-justify {
  text-align: justify;
}

/* 文本水平居中对齐 */
.text-center {
  text-align: center;
}


/* 文本垂直居中对齐 */
.align-middle {
  vertical-align: middle;
}

/* 文本顶部对齐 */
.align-top {
  vertical-align: top;
}

/* 文本底部对齐 */
.align-bottom {
  vertical-align: bottom;
}

/* 文本下标对齐 */
.align-sub {
  vertical-align: sub;
}

/* 文本上标对齐 */
.align-super {
  vertical-align: super;
}

/* 文本基线对齐 */
.align-baseline {
  vertical-align: baseline;
}
/* 文本首行对齐 */
.text-justify-inter-character {
  text-justify: inter-character;
}
/* 文本单词间隔对齐 */
.text-justify-inter-word {
  text-justify: inter-word;
}

/* 文本尾行对齐 */
.text-align-last-auto {
  text-align-last: auto;
}

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

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

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

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

.text-align-last-start {
  text-align-last: start;
}

.text-align-last-end {
  text-align-last: end;
}
/* 文字样式 */
/* 斜体 */
.italic {
  font-style: italic;
}
/* 非斜体 */
.italic-not {
  font-style: normal;
}
/* 抗锯齿 */
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 亚像素抗锯齿 */
.subpixel-antialiased {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
.underline,
.hover-underline:hover,
.focus-underline:focus,
.active-underline:active,
.visited-underline:visited {
  text-decoration: underline;
}

.overline,
.hover-overline:hover,
.focus-overline:focus,
.active-overline:active,
.visited-overline:visited {
  text-decoration: overline;
}

.line-through,
.hover-line-through:hover,
.focus-line-through:focus,
.active-line-through:active,
.visited-line-through:visited {
  text-decoration: line-through;
}

.no-underline,
.hover-no-underline:hover,
.focus-no-underline:focus,
.active-no-underline:active,
.visited-no-underline:visited {
  text-decoration: none;
}
.decoration-auto {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}
.decoration-inherit {
  text-decoration: inherit;
}
.decoration-solid {
  text-decoration-style: solid;
}
.decoration-double {
  text-decoration-style: double;
}
.decoration-dotted {
  text-decoration-style: dotted;
}
.decoration-dashed {
  text-decoration-style: dashed;
}
.decoration-wavy {
  text-decoration-style: wavy;
}
.decoration-0 {
  text-decoration-thickness: 0px;
}
.decoration-1 {
  text-decoration-thickness: 1px;
}
.decoration-2 {
  text-decoration-thickness: 2px;
}
.decoration-4 {
  text-decoration-thickness: 4px;
}
.decoration-8 {
  text-decoration-thickness: 8px;
}
.decoration-from-font {
  text-decoration-thickness: from-font;
}
.underline-offset-auto {
  text-underline-offset: auto;
}
.underline-offset-0 {
  text-underline-offset: 0px;
}
.underline-offset-1 {
  text-underline-offset: 1px;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.underline-offset-8 {
  text-underline-offset: 8px;
}

/* 缩进 */
.text-indent-0 {
  text-indent: 0px;
}
.text-indent-1 {
  text-indent: var(--spacing-1);
}
.text-indent-2 {
  text-indent: var(--spacing-2);
}
.text-indent-3 {
  text-indent: var(--spacing-3);
}
.text-indent-4,
.text-indent{
  text-indent: var(--spacing-4);
}
.text-indent-6 {
  text-indent: var(--spacing-6);
}
.text-indent-8 {
  text-indent: var(--spacing-8);
}
.text-indent-12 {
  text-indent: var(--spacing-12);
}
.text-indent-16 {
  text-indent: var(--spacing-16);
}
/* 连字符 */
.hyphens-none {
  hyphens: none;
}
.hyphens-manual {
  hyphens: manual;

}
.hyphens-auto {
  hyphens: auto;
}


/*排版尺寸*/
/* 尺寸 */

/* 固定值 */
.w-0 {
  width: var(--spacing-0);
}

.w-px {
  width: var(--spacing-px);
}

.w-0\.5 {
  width: var(--spacing-0\.5);
}

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

.w-1\.5 {
  width: var(--spacing-1\.5);
}

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

.w-2\.5 {
  width: var(--spacing-2-5);
}

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

.w-3\.5 {
  width: var(--spacing-3\.5);
}

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

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

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

.w-7 {
  width: var(--spacing-7);
}

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

.w-9 {
  width: var(--spacing-9);
}

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

.w-11 {
  width: var(--spacing-11);
}

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

.w-14 {
  width: var(--spacing-14);
}

.w-16 {
  width: var(--spacing-16);
}

.w-20 {
  width: var(--spacing-20);
}

.w-24 {
  width: var(--spacing-24);
}

.w-28 {
  width: var(--spacing-28);
}

.w-32 {
  width: var(--spacing-32);
}

.w-36 {
  width: var(--spacing-36);
}

.w-40 {
  width: var(--spacing-40);
}

.w-44 {
  width: var(--spacing-44);
}

.w-48 {
  width: var(--spacing-48);
}

.w-52 {
  width: var(--spacing-52);
}

.w-56 {
  width: var(--spacing-56);
}

.w-60 {
  width: var(--spacing-60);
}

.w-64 {
  width: var(--spacing-64);
}

.w-72 {
  width: var(--spacing-72);
}

.w-80 {
  width: var(--spacing-80);
}

.w-96 {
  width: var(--spacing-96);
}

.w-sn {
  width: var(--width, 1rem);
}

/*百分比*/
.w-1\/2,
.w-2\/4,
.w-3\/6 {
  width: var(--spacing-1\/2);
}

.w-1\/3,
.w-2\/6 {
  width: var(--spacing-1\/3);
}

.w-2\/3,
.w-4\/6 {
  width: var(--spacing-2\/3);   
}

.w-1\/4 {
  width: var(--spacing-1\/4);
}

.w-3\/4 {
  width: var(--spacing-3\/4); 
}

.w-1\/5 {
  width: var(--spacing-1\/5);
}

.w-2\/5 {
  width: var(--spacing-2\/5);
}

.w-3\/5 {
  width: var(--spacing-3\/5);
}

.w-4\/5 {
  width: var(--spacing-4\/5); 
}

.w-1\/6 {
  width: var(--spacing-1\/6);
}

.w-5\/6 {
  width: var(--spacing-5\/6);
}

/*特殊宽度*/
.w-auto {
  width: auto;
}

.w-full {
  width: var(--spacing-full);
}

.w-screen {
  width: var(--spacing-screen);
}

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

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

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

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

.min-w-none {
  min-width: none;
}

.min-w-full {
  min-width: var(--spacing-full);
}

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

.min-w-max {
  min-width: -moz-max-content;
  min-width: max-content;
}

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

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

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

.max-w-full {
  max-width: var(--spacing-full);
}

.max-w-min {
  max-width: -moz-min-content;
  max-width: min-content;
}

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

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

/*高度*/
.h-0 {
  height: var(--spacing-0);
}

.h-px {
  height: var(--spacing-px);
}

.h-0\.5 {
  height: var(--spacing-0\.5);
}

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

.h-1\.5 {
  height: var(--spacing-1\.5);
}

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

.h-2\.5 {
  height: var(--spacing-2\.5);
}

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

.h-3\.5 {
  height: var(--spacing-3\.5);
}

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

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

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

.h-7 {
  height: var(--spacing-7);
}

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

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

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

.h-11 {
  height: var(--spacing-11);
}

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

.h-14 {
  height: var(--spacing-14);
}

.h-16 {
  height: var(--spacing-16);
}

.h-20 {
  height: var(--spacing-20);
}

.h-24 {
  height: var(--spacing-24);
}

.h-28 {
  height: var(--spacing-28);
}

.h-32 {
  height: var(--spacing-32);
}

.h-36 {
  height: var(--spacing-36);
}

.h-40 {
  height: var(--spacing-40);
}

.h-44 {
  height: var(--spacing-44);
}

.h-48 {
  height: var(--spacing-48);
}

.h-52 {
  height: var(--spacing-52);
}

.h-56 {
  height: var(--spacing-56);
}

.h-60 {
  height: var(--spacing-60);
}

.h-64 {
  height: var(--spacing-64);
}

.h-72 {
  height: var(--spacing-72);
}

.h-80 {
  height: var(--spacing-80);
}

.h-96 {
  height: var(--spacing-96);
}

.h-sn {
  width: var(--height, 1rem);
}

/*百分比*/
.h-1\/2,
.h-2\/4,
.h-3\/6 {
  height: var(--spacing-1\/2);  
}

.h-1\/3,
.h-2\/6 {
  height: var(--spacing-1\/3);
}

.h-2\/3,
.h-4\/6 {
  height: var(--spacing-2\/3);
}

.h-1\/4 {
  height: var(--spacing-1\/4);
}

.h-3\/4 {
  height: var(--spacing-3\/4);
}

.h-1\/5 {
  height: var(--spacing-1\/5);
}

.h-2\/5 {
  height: var(--spacing-2\/5);
}

.h-3\/5 {
  height: var(--spacing-3\/5);
}

.h-4\/5 {
  height: var(--spacing-4\/5);
}

.h-1\/6 {
  height: var(--spacing-1\/6);
}

.h-5\/6 {
  height: var(--spacing-5\/6);
}

/*特殊高度*/
.h-auto {
  height: auto;
}

.h-full {
  height: var(--spacing-full);
}

.h-screen {
  height: var(--spacing-screen);
}

.h-min {
  height: -moz-min-content;
  height: min-content;
}

.h-max {
  height: -moz-max-content;
  height: max-content;
}

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

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

.min-h-none {
  min-height: none;
}

.min-h-full {
  min-height: var(--spacing-full);
}

.min-h-min {
  min-height: -moz-min-content;
  min-height: min-content;
}

.min-h-max {
  min-height: -moz-max-content;
  min-height: max-content;
}

.min-h-fit {
  min-height: -moz-fit-content;
  min-height: fit-content;
}

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

.max-h-px {
  max-height: var(--spacing-px);
}

.max-h-none {
  max-height: none;
}

.max-h-full {
  max-height: var(--spacing-full);
}

.max-h-min {
  max-height: -moz-min-content;
  max-height: min-content;
}

.max-h-screen {
  max-height: var(--spacing-screen);
}

.max-h-max {
  max-height: -moz-max-content;
  max-height: max-content;
}

.max-h-fit {
  max-height: -moz-fit-content;
  max-height: fit-content;
}

/* 宽高比 */
.aspect-auto {
  aspect-ratio: auto;
}

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

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

/*色彩系统*/
/* 颜色属性 */
/* 基础类 */
.bg-red-50,
.hover-bg-red-50:hover,
.focus-bg-red-50:focus,
.btn-outline.hover-bg-red-50:hover {
  --bg-opacity: 1;
  background-color: rgba(var(--red-50) / var(--bg-opacity));
}

.bg-red-100,
.hover-bg-red-100:hover,
.focus-bg-red-100:focus,
.btn-outline.hover-bg-red-100:hover {
  --bg-opacity: 1;
  background-color: rgba(var(--red-100) / var(--bg-opacity));
}

.bg-red-200,
.hover-bg-red-200:hover,
.focus-bg-red-200:focus,
.btn-outline.hover-bg-red-200:hover {
  --bg-opacity: 1;
  background-color: rgba(var(--red-200) / var(--bg-opacity));
}

.bg-red-300,
.hover-bg-red-300:hover,
.focus-bg-red-300:focus,
.btn-outline.hover-bg-red-300:hover {
  --bg-opacity: 1;
  background-color: rgba(var(--red-300) / var(--bg-opacity));
}

.bg-red-400,
.hover-bg-red-400:hover,
.focus-bg-red-400:focus,
.btn-outline.hover-bg-red-400:hover {
  --bg-opacity: 1;
  background-color: rgba(var(--red-400) / var(--bg-opacity));
}

.bg-red-500,
.red,
.bg-red,
.danger,
.bg-danger,
.hover-bg-red-500:hover,
.focus-bg-red-500:focus{
  --bg-opacity: 1;
  background-color: rgba(var(--red-500) / var(--bg-opacity));
  color: rgb(var(--white));
}

.bg-red-600,
.hover-bg-red-600:hover,
.focus-bg-red-600:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--red-600) / var(--bg-opacity));
}

.bg-red-700,
.hover-bg-red-700:hover,
.focus-bg-red-700:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--red-700) / var(--bg-opacity));
}

.bg-red-800,
.hover-bg-red-800:hover,
.focus-bg-red-800:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--red-800) / var(--bg-opacity));
}

.bg-red-900,
.hover-bg-red-900:hover,
.focus-bg-red-900:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--red-900) / var(--bg-opacity));
}

.bg-orange-50,
.hover-bg-orange-50:hover,
.focus-bg-orange-50:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--orange-50) / var(--bg-opacity));
}

.bg-orange-100,
.hover-bg-orange-100:hover,
.focus-bg-orange-100:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--orange-100) / var(--bg-opacity));
}

.bg-orange-200,
.hover-bg-orange-200:hover,
.focus-bg-orange-200:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--orange-200) / var(--bg-opacity));
}

.bg-orange-300,
.hover-bg-orange-300:hover,
.focus-bg-orange-300:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--orange-300) / var(--bg-opacity));
}

.bg-orange-400,
.hover-bg-orange-400:hover,
.focus-bg-orange-400:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--orange-400) / var(--bg-opacity));
}

.bg-orange-500,
.orange,
.bg-orange,
.hover-bg-orange-500:hover,
.focus-bg-orange-500:focus,
.hover-bg-orange:hover,
.focus-bg-orange:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--orange-500) / var(--bg-opacity));
  color: rgb(var(--white));
}

.bg-orange-600,
.hover-bg-orange-600:hover,
.focus-bg-orange-600:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--orange-600) / var(--bg-opacity));
}

.bg-orange-700,
.hover-bg-orange-700:hover,
.focus-bg-orange-700:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--orange-700) / var(--bg-opacity));
}

.bg-orange-800,
.hover-bg-orange-800:hover,
.focus-bg-orange-800:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--orange-800) / var(--bg-opacity));
}

.bg-orange-900,
.hover-bg-orange-900:hover,
.focus-bg-orange-900:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--orange-900) / var(--bg-opacity));
}

.bg-amber-50,
.hover-bg-amber-50:hover,
.focus-bg-amber-50:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--amber-50) / var(--bg-opacity));
}

.bg-amber-100,
.hover-bg-amber-100:hover,
.focus-bg-amber-100:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--amber-100) / var(--bg-opacity));
}

.bg-amber-200,
.hover-bg-amber-200:hover,
.focus-bg-amber-200:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--amber-200) / var(--bg-opacity));
}

.bg-amber-300,
.hover-bg-amber-300:hover,
.focus-bg-amber-300:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--amber-300) / var(--bg-opacity));
}

.bg-amber-400,
.hover-bg-amber-400:hover,
.focus-bg-amber-400:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--amber-400) / var(--bg-opacity));
}

.bg-amber-500,
.amber,
.bg-amber,
.warning,
.bg-warning,
.hover-bg-amber-500:hover,
.focus-bg-amber-500:focus,
.hover-bg-amber:hover,
.focus-bg-amber:focus,
.hover-bg-warning:hover,
.focus-bg-warning:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--amber-500) / var(--bg-opacity));
  color: rgb(var(--white));
}

.bg-amber-600,
.hover-bg-amber-600:hover,
.focus-bg-amber-600:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--amber-600) / var(--bg-opacity));
}

.bg-amber-700,
.hover-bg-amber-700:hover,
.focus-bg-amber-700:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--amber-700) / var(--bg-opacity));
}

.bg-amber-800,
.hover-bg-amber-800:hover,
.focus-bg-amber-800:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--amber-800) / var(--bg-opacity));
}

.bg-amber-900,
.hover-bg-amber-900:hover,
.focus-bg-amber-900:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--amber-900) / var(--bg-opacity));
}

.bg-yellow-50,
.hover-bg-yellow-50:hover,
.focus-bg-yellow-50:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--yellow-50) / var(--bg-opacity));
}

.bg-yellow-100,
.hover-bg-yellow-100:hover,
.focus-bg-yellow-100:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--yellow-100) / var(--bg-opacity));
}

.bg-yellow-200,
.hover-bg-yellow-200:hover,
.focus-bg-yellow-200:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--yellow-200) / var(--bg-opacity));
}

.bg-yellow-300,
.hover-bg-yellow-300:hover,
.focus-bg-yellow-300:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--yellow-300) / var(--bg-opacity));
}

.bg-yellow-400,
.hover-bg-yellow-400:hover,
.focus-bg-yellow-400:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--yellow-400) / var(--bg-opacity));
}

.bg-yellow-500,
.yellow,
.bg-yellow,
.hover-bg-yellow:hover,
.focus-bg-yellow:focus,
.hover-bg-yellow-500:hover,
.focus-bg-yellow-500:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--yellow-500) / var(--bg-opacity));
  color: rgb(var(--white));
}

.bg-yellow-600,
.hover-bg-yellow-600:hover,
.focus-bg-yellow-600:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--yellow-600) / var(--bg-opacity));
}

.bg-yellow-700,
.hover-bg-yellow-700:hover,
.focus-bg-yellow-700:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--yellow-700) / var(--bg-opacity));
}

.bg-yellow-800,
.hover-bg-yellow-800:hover,
.focus-bg-yellow-800:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--yellow-800) / var(--bg-opacity));
}

.bg-yellow-900,
.hover-bg-yellow-900:hover,
.focus-bg-yellow-900:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--yellow-900) / var(--bg-opacity));
}

.bg-lime-50,
.hover-bg-lime-50:hover,
.focus-bg-lime-50:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--lime-50) / var(--bg-opacity));
}

.bg-lime-100,
.hover-bg-lime-100:hover,
.focus-bg-lime-100:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--lime-100) / var(--bg-opacity));
}

.bg-lime-200,
.hover-bg-lime-200:hover,
.focus-bg-lime-200:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--lime-200) / var(--bg-opacity));
}

.bg-lime-300,
.hover-bg-lime-300:hover,
.focus-bg-lime-300:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--lime-300) / var(--bg-opacity));
}

.bg-lime-400,
.hover-bg-lime-400:hover,
.focus-bg-lime-400:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--lime-400) / var(--bg-opacity));
}

.bg-lime-500,
.lime,
.bg-lime,
.hover-bg-lime:hover,
.focus-bg-lime:focus,
.hover-bg-lime-500:hover,
.focus-bg-lime-500:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--lime-500) / var(--bg-opacity));
  color: rgb(var(--white));
}

.bg-lime-600,
.hover-bg-lime-600:hover,
.focus-bg-lime-600:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--lime-600) / var(--bg-opacity));
}

.bg-lime-700,
.hover-bg-lime-700:hover,
.focus-bg-lime-700:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--lime-700) / var(--bg-opacity));
}

.bg-lime-800,
.hover-bg-lime-800:hover,
.focus-bg-lime-800:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--lime-800) / var(--bg-opacity));
}

.bg-lime-900,
.hover-bg-lime-900:hover,
.focus-bg-lime-900:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--lime-900) / var(--bg-opacity));
}

.bg-green-50,
.hover-bg-green-50:hover,
.focus-bg-green-50:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--green-50) / var(--bg-opacity));
}

.bg-green-100,
.hover-bg-green-100:hover,
.focus-bg-green-100:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--green-100) / var(--bg-opacity));
}

.bg-green-200,
.hover-bg-green-200:hover,
.focus-bg-green-200:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--green-200) / var(--bg-opacity));
}

.bg-green-300,
.hover-bg-green-300:hover,
.focus-bg-green-300:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--green-300) / var(--bg-opacity));
}

.bg-green-400,
.hover-bg-green-400:hover,
.focus-bg-green-400:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--green-400) / var(--bg-opacity));
}

.bg-green-500,
.green,
.bg-green,
.success,
.bg-success,
.hover-bg-green:hover,
.focus-bg-green:focus,
.hover-bg-success:hover,
.focus-bg-success:focus,
.hover-bg-green-500:hover,
.focus-bg-green-500:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--green-500) / var(--bg-opacity));
  color: rgb(var(--white));
}

.bg-green-600,
.hover-bg-green-600:hover,
.focus-bg-green-600:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--green-600) / var(--bg-opacity));
}

.bg-green-700,
.hover-bg-green-700:hover,
.focus-bg-green-700:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--green-700) / var(--bg-opacity));
}

.bg-green-800,
.hover-bg-green-800:hover,
.focus-bg-green-800:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--green-800) / var(--bg-opacity));
}

.bg-green-900,
.hover-bg-green-900:hover,
.focus-bg-green-900:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--green-900) / var(--bg-opacity));
}

.bg-emerald-50,
.hover-bg-emerald-50:hover,
.focus-bg-emerald-50:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--emerald-50) / var(--bg-opacity));
}

.bg-emerald-100,
.hover-bg-emerald-100:hover,
.focus-bg-emerald-100:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--emerald-100) / var(--bg-opacity));
}

.bg-emerald-200,
.hover-bg-emerald-200:hover,
.focus-bg-emerald-200:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--emerald-200) / var(--bg-opacity));
}

.bg-emerald-300,
.hover-bg-emerald-300:hover,
.focus-bg-emerald-300:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--emerald-300) / var(--bg-opacity));
}

.bg-emerald-400,
.hover-bg-emerald-400:hover,
.focus-bg-emerald-400:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--emerald-400) / var(--bg-opacity));
}

.bg-emerald-500,
.emerald,
.bg-emerald,
.hover-bg-emerald:hover,
.focus-bg-emerald:focus,
.hover-bg-emerald-500:hover,
.focus-bg-emerald-500:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--emerald-500) / var(--bg-opacity));
  color: rgb(var(--white));
}

.bg-emerald-600,
.hover-bg-emerald-600:hover,
.focus-bg-emerald-600:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--emerald-600) / var(--bg-opacity));
}

.bg-emerald-700,
.hover-bg-emerald-700:hover,
.focus-bg-emerald-700:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--emerald-700) / var(--bg-opacity));
}

.bg-emerald-800,
.hover-bg-emerald-800:hover,
.focus-bg-emerald-800:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--emerald-800) / var(--bg-opacity));
}

.bg-emerald-900,
.hover-bg-emerald-900:hover,
.focus-bg-emerald-900:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--emerald-900) / var(--bg-opacity));
}

.bg-teal-50,
.hover-bg-teal-50:hover,
.focus-bg-teal-50:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--teal-50) / var(--bg-opacity));
}

.bg-teal-100,
.hover-bg-teal-100:hover,
.focus-bg-teal-100:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--teal-100) / var(--bg-opacity));
}

.bg-teal-200,
.hover-bg-teal-200:hover,
.focus-bg-teal-200:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--teal-200) / var(--bg-opacity));
}

.bg-teal-300,
.hover-bg-teal-300:hover,
.focus-bg-teal-300:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--teal-300) / var(--bg-opacity));
}

.bg-teal-400,
.hover-bg-teal-400:hover,
.focus-bg-teal-400:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--teal-400) / var(--bg-opacity));
}

.bg-teal-500,
.teal,
.bg-teal,
.hover-bg-teal-500:hover,
.focus-bg-teal-500:focus,
.hover-bg-teal:hover,
.focus-bg-teal:hover {
  --bg-opacity: 1;
  background-color: rgba(var(--teal-500) / var(--bg-opacity));
  color: rgb(var(--white));
}

.bg-teal-600,
.hover-bg-teal-600:hover,
.focus-bg-teal-600:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--teal-600) / var(--bg-opacity));
}

.bg-teal-700,
.hover-bg-teal-700:hover,
.focus-bg-teal-700:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--teal-700) / var(--bg-opacity));
}

.bg-teal-800,
.hover-bg-teal-800:hover,
.focus-bg-teal-800:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--teal-800) / var(--bg-opacity));
}

.bg-teal-900,
.hover-bg-teal-900:hover,
.focus-bg-teal-900:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--teal-900) / var(--bg-opacity));
}

.bg-cyan-50,
.hover-bg-cyan-50:hover,
.focus-bg-cyan-50:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--cyan-50) / var(--bg-opacity));
}

.bg-cyan-100,
.hover-bg-cyan-100:hover,
.focus-bg-cyan-100:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--cyan-100) / var(--bg-opacity));
}

.bg-cyan-200,
.hover-bg-cyan-200:hover,
.focus-bg-cyan-200:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--cyan-200) / var(--bg-opacity));
}

.bg-cyan-300,
.hover-bg-cyan-300:hover,
.focus-bg-cyan-300:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--cyan-300) / var(--bg-opacity));
}

.bg-cyan-400,
.hover-bg-cyan-400:hover,
.focus-bg-cyan-400:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--cyan-400) / var(--bg-opacity));
}

.bg-cyan-500,
.cyan,
.bg-cyan,
.hover-bg-cyan-500:hover,
.focus-bg-cyan-500:focus,
.hover-bg-cyan:hover,
.focus-bg-cyan:hover {
  --bg-opacity: 1;
  background-color: rgba(var(--cyan-500) / var(--bg-opacity));
  color: rgb(var(--white));
}

.bg-cyan-600,
.hover-bg-cyan-600:hover,
.focus-bg-cyan-600:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--cyan-600) / var(--bg-opacity));
}

.bg-cyan-700,
.hover-bg-cyan-700:hover,
.focus-bg-cyan-700:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--cyan-700) / var(--bg-opacity));
}

.bg-cyan-800,
.hover-bg-cyan-800:hover,
.focus-bg-cyan-800:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--cyan-800) / var(--bg-opacity));
}

.bg-cyan-900,
.hover-bg-cyan-900:hover,
.focus-bg-cyan-900:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--cyan-900) / var(--bg-opacity));
}

.bg-sky-50,
.hover-bg-sky-50:hover,
.focus-bg-sky-50:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--sky-50) / var(--bg-opacity));
}

.bg-sky-100,
.hover-bg-sky-100:hover,
.focus-bg-sky-100:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--sky-100) / var(--bg-opacity));
}

.bg-sky-200,
.hover-bg-sky-200:hover,
.focus-bg-sky-200:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--sky-200) / var(--bg-opacity));
}

.bg-sky-300,
.hover-bg-sky-300:hover,
.focus-bg-sky-300:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--sky-300) / var(--bg-opacity));
}

.bg-sky-400,
.hover-bg-sky-400:hover,
.focus-bg-sky-400:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--sky-400) / var(--bg-opacity));
}

.bg-sky-500,
.sky,
.bg-sky,
.hover-bg-sky-500:hover,
.focus-bg-sky-500:focus,
.hover-bg-sky:hover,
.focus-bg-sky:hover {
  --bg-opacity: 1;
  background-color: rgba(var(--sky-500) / var(--bg-opacity));
  color: rgb(var(--white));
}

.bg-sky-600,
.hover-bg-sky-600:hover,
.focus-bg-sky-600:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--sky-600) / var(--bg-opacity));
}

.bg-sky-700,
.hover-bg-sky-700:hover,
.focus-bg-sky-700:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--sky-700) / var(--bg-opacity));
}

.bg-sky-800,
.hover-bg-sky-800:hover,
.focus-bg-sky-800:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--sky-800) / var(--bg-opacity));
}

.bg-sky-900,
.hover-bg-sky-900:hover,
.focus-bg-sky-900:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--sky-900) / var(--bg-opacity));
}

.bg-blue-50,
.hover-bg-blue-50:hover,
.focus-bg-blue-50:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--blue-50) / var(--bg-opacity));
}

.bg-blue-100,
.hover-bg-blue-100:hover,
.focus-bg-blue-100:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--blue-100) / var(--bg-opacity));
}

.bg-blue-200,
.hover-bg-blue-200:hover,
.focus-bg-blue-200:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--blue-200) / var(--bg-opacity));
}

.bg-blue-300,
.hover-bg-blue-300:hover,
.focus-bg-blue-300:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--blue-300) / var(--bg-opacity));
}

.bg-blue-400,
.hover-bg-blue-400:hover,
.focus-bg-blue-400:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--blue-400) / var(--bg-opacity));
}

.bg-blue-500,
.blue,
.bg-blue,
.hover-bg-blue-500:hover,
.focus-bg-blue-500:focus,
.hover-bg-blue:hover,
.focus-bg-blue:hover {
  --bg-opacity: 1;
  background-color: rgba(var(--blue-500) / var(--bg-opacity));
  color: rgb(var(--white));
}

.bg-blue-600,
.hover-bg-blue-600:hover,
.focus-bg-blue-600:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--blue-600) / var(--bg-opacity));
}

.bg-blue-700,
.hover-bg-blue-700:hover,
.focus-bg-blue-700:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--blue-700) / var(--bg-opacity));
}

.bg-blue-800,
.hover-bg-blue-800:hover,
.focus-bg-blue-800:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--blue-800) / var(--bg-opacity));
}

.bg-blue-900,
.hover-bg-blue-900:hover,
.focus-bg-blue-900:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--blue-900) / var(--bg-opacity));
}

.bg-indigo-50,
.hover-bg-indigo-50:hover,
.focus-bg-indigo-50:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--indigo-50) / var(--bg-opacity));
}

.bg-indigo-100,
.hover-bg-indigo-100:hover,
.focus-bg-indigo-100:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--indigo-100) / var(--bg-opacity));
}

.bg-indigo-200,
.hover-bg-indigo-200:hover,
.focus-bg-indigo-200:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--indigo-200) / var(--bg-opacity));
}

.bg-indigo-300,
.hover-bg-indigo-300:hover,
.focus-bg-indigo-300:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--indigo-300) / var(--bg-opacity));
}

.bg-indigo-400,
.hover-bg-indigo-400:hover,
.focus-bg-indigo-400:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--indigo-400) / var(--bg-opacity));
}

.bg-indigo-500,
.indigo,
.bg-indigo,
.hover-bg-indigo-500:hover,
.focus-bg-indigo-500:focus,
.hover-bg-indigo:hover,
.focus-bg-indigo:hover{
  --bg-opacity: 1;
  background-color: rgba(var(--indigo-500) / var(--bg-opacity));
  color: rgb(var(--white));
}

.bg-indigo-600,
.hover-bg-indigo-600:hover,
.focus-bg-indigo-600:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--indigo-600) / var(--bg-opacity));
}

.bg-indigo-700,
.hover-bg-indigo-700:hover,
.focus-bg-indigo-700:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--indigo-700) / var(--bg-opacity));
}

.bg-indigo-800,
.hover-bg-indigo-800:hover,
.focus-bg-indigo-800:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--indigo-800) / var(--bg-opacity));
}

.bg-indigo-900,
.hover-bg-indigo-900:hover,
.focus-bg-indigo-900:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--indigo-900) / var(--bg-opacity));
}

.bg-violet-50,
.hover-bg-violet-50:hover,
.focus-bg-violet-50:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--violet-50) / var(--bg-opacity));
}

.bg-violet-100,
.hover-bg-violet-100:hover,
.focus-bg-violet-100:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--violet-100) / var(--bg-opacity));
}

.bg-violet-200,
.hover-bg-violet-200:hover,
.focus-bg-violet-200:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--violet-200) / var(--bg-opacity));
}

.bg-violet-300,
.hover-bg-violet-300:hover,
.focus-bg-violet-300:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--violet-300) / var(--bg-opacity));
}

.bg-violet-400,
.hover-bg-violet-400:hover,
.focus-bg-violet-400:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--violet-400) / var(--bg-opacity));
}

.bg-violet-500,
.violet,
.bg-violet,
.hover-bg-violet-500:hover,
.focus-bg-violet-500:focus,
.hover-bg-violet:hover,
.focus-bg-violet:hover {
  --bg-opacity: 1;
  background-color: rgba(var(--violet-500) / var(--bg-opacity));
  color: rgb(var(--white));
}

.bg-violet-600,
.hover-bg-violet-600:hover,
.focus-bg-violet-600:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--violet-600) / var(--bg-opacity));
}

.bg-violet-700,
.hover-bg-violet-700:hover,
.focus-bg-violet-700:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--violet-700) / var(--bg-opacity));
}

.bg-violet-800,
.hover-bg-violet-800:hover,
.focus-bg-violet-800:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--violet-800) / var(--bg-opacity));
}

.bg-violet-900,
.hover-bg-violet-900:hover,
.focus-bg-violet-900:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--violet-900) / var(--bg-opacity));
}

.bg-purple-50,
.hover-bg-purple-50:hover,
.focus-bg-purple-50:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--purple-50) / var(--bg-opacity));
}

.bg-purple-100,
.hover-bg-purple-100:hover,
.focus-bg-purple-100:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--purple-100) / var(--bg-opacity));
}

.bg-purple-200,
.hover-bg-purple-200:hover,
.focus-bg-purple-200:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--purple-200) / var(--bg-opacity));
}

.bg-purple-300,
.hover-bg-purple-300:hover,
.focus-bg-purple-300:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--purple-300) / var(--bg-opacity));
}

.bg-purple-400,
.hover-bg-purple-400:hover,
.focus-bg-purple-400:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--purple-400) / var(--bg-opacity));
}

.bg-purple-500,
.purple,
.bg-purple,
.special,
.bg-special,
.hover-bg-purple-500:hover,
.focus-bg-purple-500:focus,
.hover-bg-purple:hover,
.focus-bg-purple:hover {
  --bg-opacity: 1;
  background-color: rgba(var(--purple-500) / var(--bg-opacity));
  color: rgb(var(--white));
}

.bg-purple-600,
.hover-bg-purple-600:hover,
.focus-bg-purple-600:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--purple-600) / var(--bg-opacity));
}

.bg-purple-700,
.hover-bg-purple-700:hover,
.focus-bg-purple-700:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--purple-700) / var(--bg-opacity));
}

.bg-purple-800,
.hover-bg-purple-800:hover,
.focus-bg-purple-800:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--purple-800) / var(--bg-opacity));
}

.bg-purple-900,
.hover-bg-purple-900:hover,
.focus-bg-purple-900:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--purple-900) / var(--bg-opacity));
}

.bg-fuchsia-50,
.hover-bg-fuchsia-50:hover,
.focus-bg-fuchsia-50:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--fuchsia-50) / var(--bg-opacity));
}

.bg-fuchsia-100,
.hover-bg-fuchsia-100:hover,
.focus-bg-fuchsia-100:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--fuchsia-100) / var(--bg-opacity));
}

.bg-fuchsia-200,
.hover-bg-fuchsia-200:hover,
.focus-bg-fuchsia-200:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--fuchsia-200) / var(--bg-opacity));
}

.bg-fuchsia-300,
.hover-bg-fuchsia-300:hover,
.focus-bg-fuchsia-300:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--fuchsia-300) / var(--bg-opacity));
}

.bg-fuchsia-400,
.hover-bg-fuchsia-400:hover,
.focus-bg-fuchsia-400:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--fuchsia-400) / var(--bg-opacity));
}

.bg-fuchsia-500,
.fuchsia,
.bg-fuchsia,
.hover-bg-fuchsia-500:hover,
.focus-bg-fuchsia-500:focus,
.hover-bg-fuchsia:hover,
.focus-bg-fuchsia:hover{
  --bg-opacity: 1;
  background-color: rgba(var(--fuchsia-500) / var(--bg-opacity));
  color: rgb(var(--white));
}

.bg-fuchsia-600,
.hover-bg-fuchsia-600:hover,
.focus-bg-fuchsia-600:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--fuchsia-600) / var(--bg-opacity));
}

.bg-fuchsia-700,
.hover-bg-fuchsia-700:hover,
.focus-bg-fuchsia-700:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--fuchsia-700) / var(--bg-opacity));
}

.bg-fuchsia-800,
.hover-bg-fuchsia-800:hover,
.focus-bg-fuchsia-800:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--fuchsia-800) / var(--bg-opacity));
}

.bg-fuchsia-900,
.hover-bg-fuchsia-900:hover,
.focus-bg-fuchsia-900:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--fuchsia-900) / var(--bg-opacity));
}

.bg-pink-50,
.hover-bg-pink-50:hover,
.focus-bg-pink-50:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--pink-50) / var(--bg-opacity));
}

.bg-pink-100,
.hover-bg-pink-100:hover,
.focus-bg-pink-100:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--pink-100) / var(--bg-opacity));
}

.bg-pink-200,
.hover-bg-pink-200:hover,
.focus-bg-pink-200:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--pink-200) / var(--bg-opacity));
}

.bg-pink-300,
.hover-bg-pink-300:hover,
.focus-bg-pink-300:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--pink-300) / var(--bg-opacity));
}

.bg-pink-400,
.hover-bg-pink-400:hover,
.focus-bg-pink-400:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--pink-400) / var(--bg-opacity));
}

.bg-pink-500,
.pink,
.bg-pink,
.important,
.bg-important,
.hover-bg-pink-500:hover,
.focus-bg-pink-500:focus,
.hover-bg-pink:hover,
.focus-bg-pink:hover {
  --bg-opacity: 1;
  background-color: rgba(var(--pink-500) / var(--bg-opacity));
  color: rgb(var(--white));
}

.bg-pink-600,
.hover-bg-pink-600:hover,
.focus-bg-pink-600:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--pink-600) / var(--bg-opacity));
}

.bg-pink-700,
.hover-bg-pink-700:hover,
.focus-bg-pink-700:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--pink-700) / var(--bg-opacity));
}

.bg-pink-800,
.hover-bg-pink-800:hover,
.focus-bg-pink-800:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--pink-800) / var(--bg-opacity));
}

.bg-pink-900,
.hover-bg-pink-900:hover,
.focus-bg-pink-900:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--pink-900) / var(--bg-opacity));
}

.bg-rose-50,
.hover-bg-rose-50:hover,
.focus-bg-rose-50:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--rose-50) / var(--bg-opacity));
}

.bg-rose-100,
.hover-bg-rose-100:hover,
.focus-bg-rose-100:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--rose-100) / var(--bg-opacity));
}

.bg-rose-200,
.hover-bg-rose-200:hover,
.focus-bg-rose-200:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--rose-200) / var(--bg-opacity));
}

.bg-rose-300,
.hover-bg-rose-300:hover,
.focus-bg-rose-300:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--rose-300) / var(--bg-opacity));
}

.bg-rose-400,
.hover-bg-rose-400:hover,
.focus-bg-rose-400:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--rose-400) / var(--bg-opacity));
}

.bg-rose-500,
.rose,
.bg-rose,
.hover-bg-rose-500:hover,
.focus-bg-rose-500:focus,
.hover-bg-rose:hover,
.focus-bg-rose:hover{
  --bg-opacity: 1;
  background-color: rgba(var(--rose-500) / var(--bg-opacity));
  color: rgb(var(--white));
}

.bg-rose-600,
.hover-bg-rose-600:hover,
.focus-bg-rose-600:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--rose-600) / var(--bg-opacity));
}

.bg-rose-700,
.hover-bg-rose-700:hover,
.focus-bg-rose-700:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--rose-700) / var(--bg-opacity));
}

.bg-rose-800,
.hover-bg-rose-800:hover,
.focus-bg-rose-800:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--rose-800) / var(--bg-opacity));
}

.bg-rose-900,
.hover-bg-rose-900:hover,
.focus-bg-rose-900:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--rose-900) / var(--bg-opacity));
}

.bg-slate-50,
.hover-bg-slate-50:hover,
.focus-bg-slate-50:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--slate-50) / var(--bg-opacity));
}

.bg-slate-100,
.hover-bg-slate-100:hover,
.focus-bg-slate-100:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--slate-100) / var(--bg-opacity));
}

.bg-slate-200,
.hover-bg-slate-200:hover,
.focus-bg-slate-200:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--slate-200) / var(--bg-opacity));
}

.bg-slate-300,
.hover-bg-slate-300:hover,
.focus-bg-slate-300:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--slate-300) / var(--bg-opacity));
}

.bg-slate-400,
.hover-bg-slate-400:hover,
.focus-bg-slate-400:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--slate-400) / var(--bg-opacity));
}

.bg-slate-500,
.slate,
.bg-slate,
.hover-bg-slate:hover,
.hover-bg-slate-500:hover,
.focus-bg-slate:focus,
.focus-bg-slate-500:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--slate-500) / var(--bg-opacity));
  color: rgb(var(--white));
}

.bg-slate-600,
.hover-bg-slate-600:hover,
.focus-bg-slate-600:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--slate-600) / var(--bg-opacity));
}

.bg-slate-700,
.hover-bg-slate-700:hover,
.focus-bg-slate-700:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--slate-700) / var(--bg-opacity));
}

.bg-slate-800,
.hover-bg-slate-800:hover,
.focus-bg-slate-800:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--slate-800) / var(--bg-opacity));
}

.bg-slate-900,
.hover-bg-slate-900:hover,
.focus-bg-slate-900:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--slate-900) / var(--bg-opacity));
}

.bg-gray-50,
.hover-bg-gray-50:hover,
.focus-bg-gray-50:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--gray-50) / var(--bg-opacity));
}

.bg-gray-100,
.hover-bg-gray-100:hover,
.focus-bg-gray-100:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--gray-100) / var(--bg-opacity));
}

.bg-gray-200,
.hover-bg-gray-200:hover,
.focus-bg-gray-200:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--gray-200) / var(--bg-opacity));
}

.bg-gray-300,
.btn-info,
.hover-bg-gray-300:hover,
.focus-bg-gray-300:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--gray-300) / var(--bg-opacity));
}

.bg-gray-400,
.hover-bg-gray-400:hover,
.focus-bg-gray-400:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--gray-400) / var(--bg-opacity));
}

.bg-gray-500,
.gray,
.bg-gray,
.hover-bg-gray-500:hover,
.focus-bg-gray-500:focus,
.hover-bg-gray:hover,
.focus-bg-gray:hover {
  --bg-opacity: 1;
  background-color: rgba(var(--gray-500) / var(--bg-opacity));
  color: rgb(var(--white));
}

.bg-gray-600,
.hover-bg-gray-600:hover,
.focus-bg-gray-600:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--gray-600) / var(--bg-opacity));
}

.bg-gray-700,
.hover-bg-gray-700:hover,
.focus-bg-gray-700:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--gray-700) / var(--bg-opacity));
}

.bg-gray-800,
.hover-bg-gray-800:hover,
.focus-bg-gray-800:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--gray-800) / var(--bg-opacity));
}

.bg-gray-900,
.hover-bg-gray-900:hover,
.focus-bg-gray-900:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--gray-900) / var(--bg-opacity));
}

.bg-zinc-50,
.hover-bg-zinc-50:hover,
.focus-bg-zinc-50:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--zinc-50) / var(--bg-opacity));
}

.bg-zinc-100,
.hover-bg-zinc-100:hover,
.focus-bg-zinc-100:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--zinc-100) / var(--bg-opacity));
}

.bg-zinc-200,
.hover-bg-zinc-200:hover,
.focus-bg-zinc-200:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--zinc-200) / var(--bg-opacity));
}

.bg-zinc-300,
.hover-bg-zinc-300:hover,
.focus-bg-zinc-300:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--zinc-300) / var(--bg-opacity));
}

.bg-zinc-400,
.hover-bg-zinc-400:hover,
.focus-bg-zinc-400:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--zinc-400) / var(--bg-opacity));
}

.bg-zinc-500,
.zinc,
.bg-zinc,
.hover-bg-zinc-500:hover,
.focus-bg-zinc-500:focus,
.hover-bg-zinc:hover,
.focus-bg-zinc:hover{
  --bg-opacity: 1;
  background-color: rgba(var(--zinc-500) / var(--bg-opacity));
  color: rgb(var(--white));
}

.bg-zinc-600,
.hover-bg-zinc-600:hover,
.focus-bg-zinc-600:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--zinc-600) / var(--bg-opacity));
}

.bg-zinc-700,
.hover-bg-zinc-700:hover,
.focus-bg-zinc-700:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--zinc-700) / var(--bg-opacity));
}

.bg-zinc-800,
.hover-bg-zinc-800:hover,
.focus-bg-zinc-800:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--zinc-800) / var(--bg-opacity));
}

.bg-zinc-900,
.hover-bg-zinc-900:hover,
.focus-bg-zinc-900:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--zinc-900) / var(--bg-opacity));
}

.bg-black,
.black,
.hover-bg-black:hover,
.focus-bg-black:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--black) / var(--bg-opacity));
}

.bg-white,
.white,
.hover-bg-white:hover,
.focus-bg-white:focus {
  --bg-opacity: 1;
  background-color: rgba(var(--white) / var(--bg-opacity));
}

/* 颜色属性 */
/* 基础类 */
.text-red-50,
.hover-text-red-50:hover,
.focus-text-red-50:focus {
  --text-opacity: 1;
  color: rgba(var(--red-50) / var(--text-opacity));
}

.text-red-100,
.hover-text-red-100:hover,
.focus-text-red-100:focus {
  --text-opacity: 1;
  color: rgba(var(--red-100) / var(--text-opacity));
}

.text-red-200,
.hover-text-red-200:hover,
.focus-text-red-200:focus {
  --text-opacity: 1;
  color: rgba(var(--red-200) / var(--text-opacity));
}

.text-red-300,
.hover-text-red-300:hover,
.focus-text-red-300:focus {
  --text-opacity: 1;
  color: rgba(var(--red-300) / var(--text-opacity));
}

.text-red-400,
.hover-text-red-400:hover,
.focus-text-red-400:focus {
  --text-opacity: 1;
  color: rgba(var(--red-400) / var(--text-opacity));
}

.text-red-500,
.text-red,
.text-danger,
.text-error,
.hover-text-red-500:hover,
.focus-text-red-500:focus,
.hover-text-red:hover,
.focus-text-red:hover,
.hover-text-danger:hover,
.focus-text-danger:hover,
.hover-text-error:hover,
.focus-text-error:hover {
  --text-opacity: 1;
  color: rgba(var(--red-500) / var(--text-opacity));
}

.text-red-600,
.hover-text-red-600:hover,
.focus-text-red-600:focus {
  --text-opacity: 1;
  color: rgba(var(--red-600) / var(--text-opacity));
}

.text-red-700,
.hover-text-red-700:hover,
.focus-text-red-700:focus {
  --text-opacity: 1;
  color: rgba(var(--red-700) / var(--text-opacity));
}

.text-red-800,
.hover-text-red-800:hover,
.focus-text-red-800:focus {
  --text-opacity: 1;
  color: rgba(var(--red-800) / var(--text-opacity));
}

.text-red-900,
.hover-text-red-900:hover,
.focus-text-red-900:focus {
  --text-opacity: 1;
  color: rgba(var(--red-900) / var(--text-opacity));
}

.text-orange-50,
.hover-text-orange-50:hover,
.focus-text-orange-50:focus {
  --text-opacity: 1;
  color: rgba(var(--orange-50) / var(--text-opacity));
}

.text-orange-100,
.hover-text-orange-100:hover,
.focus-text-orange-100:focus {
  --text-opacity: 1;
  color: rgba(var(--orange-100) / var(--text-opacity));
}

.text-orange-200,
.hover-text-orange-200:hover,
.focus-text-orange-200:focus {
  --text-opacity: 1;
  color: rgba(var(--orange-200) / var(--text-opacity));
}

.text-orange-300,
.hover-text-orange-300:hover,
.focus-text-orange-300:focus {
  --text-opacity: 1;
  color: rgba(var(--orange-300) / var(--text-opacity));
}

.text-orange-400,
.hover-text-orange-400:hover,
.focus-text-orange-400:focus {
  --text-opacity: 1;
  color: rgba(var(--orange-400) / var(--text-opacity));
}

.text-orange-500,
.text-orange,
.hover-text-orange-500:hover,
.focus-text-orange-500:focus,
.hover-text-orange:hover,
.focus-text-orange:hover {
  --text-opacity: 1;
  color: rgba(var(--orange-500) / var(--text-opacity));
}

.text-orange-600,
.hover-text-orange-600:hover,
.focus-text-orange-600:focus {
  --text-opacity: 1;
  color: rgba(var(--orange-600) / var(--text-opacity));
}

.text-orange-700,
.hover-text-orange-700:hover,
.focus-text-orange-700:focus {
  --text-opacity: 1;
  color: rgba(var(--orange-700) / var(--text-opacity));
}

.text-orange-800,
.hover-text-orange-800:hover,
.focus-text-orange-800:focus {
  --text-opacity: 1;
  color: rgba(var(--orange-800) / var(--text-opacity));
}

.text-orange-900,
.hover-text-orange-900:hover,
.focus-text-orange-900:focus {
  --text-opacity: 1;
  color: rgba(var(--orange-900) / var(--text-opacity));
}

.text-amber-50,
.hover-text-amber-50:hover,
.focus-text-amber-50:focus {
  --text-opacity: 1;
  color: rgba(var(--amber-50) / var(--text-opacity));
}

.text-amber-100,
.hover-text-amber-100:hover,
.focus-text-amber-100:focus {
  --text-opacity: 1;
  color: rgba(var(--amber-100) / var(--text-opacity));
}

.text-amber-200,
.hover-text-amber-200:hover,
.focus-text-amber-200:focus {
  --text-opacity: 1;
  color: rgba(var(--amber-200) / var(--text-opacity));
}

.text-amber-300,
.hover-text-amber-300:hover,
.focus-text-amber-300:focus {
  --text-opacity: 1;
  color: rgba(var(--amber-300) / var(--text-opacity));
}

.text-amber-400,
.hover-text-amber-400:hover,
.focus-text-amber-400:focus {
  --text-opacity: 1;
  color: rgba(var(--amber-400) / var(--text-opacity));
}

.text-amber-500,
.text-amber,
.text-warning,
.hover-text-amber-500:hover,
.focus-text-amber-500:focus,
.hover-text-warning:hover,
.focus-text-warning:hover {
  --text-opacity: 1;
  color: rgba(var(--amber-500) / var(--text-opacity));
}

.text-amber-600,
.hover-text-amber-600:hover,
.focus-text-amber-600:focus {
  --text-opacity: 1;
  color: rgba(var(--amber-600) / var(--text-opacity));
}

.text-amber-700,
.hover-text-amber-700:hover,
.focus-text-amber-700:focus {
  --text-opacity: 1;
  color: rgba(var(--amber-700) / var(--text-opacity));
}

.text-amber-800,
.hover-text-amber-800:hover,
.focus-text-amber-800:focus {
  --text-opacity: 1;
  color: rgba(var(--amber-800) / var(--text-opacity));
}

.text-amber-900,
.hover-text-amber-900:hover,
.focus-text-amber-900:focus {
  --text-opacity: 1;
  color: rgba(var(--amber-900) / var(--text-opacity));
}

.text-yellow-50,
.hover-text-yellow-50:hover,
.focus-text-yellow-50:focus {
  --text-opacity: 1;
  color: rgba(var(--yellow-50) / var(--text-opacity));
}

.text-yellow-100,
.hover-text-yellow-100:hover,
.focus-text-yellow-100:focus {
  --text-opacity: 1;
  color: rgba(var(--yellow-100) / var(--text-opacity));
}

.text-yellow-200,
.hover-text-yellow-200:hover,
.focus-text-yellow-200:focus {
  --text-opacity: 1;
  color: rgba(var(--yellow-200) / var(--text-opacity));
}

.text-yellow-300,
.hover-text-yellow-300:hover,
.focus-text-yellow-300:focus {
  --text-opacity: 1;
  color: rgba(var(--yellow-300) / var(--text-opacity));
}

.text-yellow-400,
.hover-text-yellow-400:hover,
.focus-text-yellow-400:focus {
  --text-opacity: 1;
  color: rgba(var(--yellow-400) / var(--text-opacity));
}

.text-yellow-500,
.text-yellow,
.hover-text-yellow-500:hover,
.focus-text-yellow-500:focus,
.hover-text-yellow:hover,
.focus-text-yellow:hover {
  --text-opacity: 1;
  color: rgba(var(--yellow-500) / var(--text-opacity));
}

.text-yellow-600,
.hover-text-yellow-600:hover,
.focus-text-yellow-600:focus {
  --text-opacity: 1;
  color: rgba(var(--yellow-600) / var(--text-opacity));
}

.text-yellow-700,
.hover-text-yellow-700:hover,
.focus-text-yellow-700:focus {
  --text-opacity: 1;
  color: rgba(var(--yellow-700) / var(--text-opacity));
}

.text-yellow-800,
.hover-text-yellow-800:hover,
.focus-text-yellow-800:focus {
  --text-opacity: 1;
  color: rgba(var(--yellow-800) / var(--text-opacity));
}

.text-yellow-900,
.hover-text-yellow-900:hover,
.focus-text-yellow-900:focus {
  --text-opacity: 1;
  color: rgba(var(--yellow-900) / var(--text-opacity));
}

.text-lime-50,
.hover-text-lime-50:hover,
.focus-text-lime-50:focus {
  --text-opacity: 1;
  color: rgba(var(--lime-50) / var(--text-opacity));
}

.text-lime-100,
.hover-text-lime-100:hover,
.focus-text-lime-100:focus {
  --text-opacity: 1;
  color: rgba(var(--lime-100) / var(--text-opacity));
}

.text-lime-200,
.hover-text-lime-200:hover,
.focus-text-lime-200:focus {
  --text-opacity: 1;
  color: rgba(var(--lime-200) / var(--text-opacity));
}

.text-lime-300,
.hover-text-lime-300:hover,
.focus-text-lime-300:focus {
  --text-opacity: 1;
  color: rgba(var(--lime-300) / var(--text-opacity));
}

.text-lime-400,
.hover-text-lime-400:hover,
.focus-text-lime-400:focus {
  --text-opacity: 1;
  color: rgba(var(--lime-400) / var(--text-opacity));
}

.text-lime-500,
.text-lime,
.hover-text-lime-500:hover,
.focus-text-lime-500:focus,
.hover-text-lime:hover,
.focus-text-lime:hover {
  --text-opacity: 1;
  color: rgba(var(--lime-500) / var(--text-opacity));
}

.text-lime-600,
.hover-text-lime-600:hover,
.focus-text-lime-600:focus {
  --text-opacity: 1;
  color: rgba(var(--lime-600) / var(--text-opacity));
}

.text-lime-700,
.hover-text-lime-700:hover,
.focus-text-lime-700:focus {
  --text-opacity: 1;
  color: rgba(var(--lime-700) / var(--text-opacity));
}

.text-lime-800,
.hover-text-lime-800:hover,
.focus-text-lime-800:focus {
  --text-opacity: 1;
  color: rgba(var(--lime-800) / var(--text-opacity));
}

.text-lime-900,
.hover-text-lime-900:hover,
.focus-text-lime-900:focus {
  --text-opacity: 1;
  color: rgba(var(--lime-900) / var(--text-opacity));
}

.text-green-50,
.hover-text-green-50:hover,
.focus-text-green-50:focus {
  --text-opacity: 1;
  color: rgba(var(--green-50) / var(--text-opacity));
}

.text-green-100,
.hover-text-green-100:hover,
.focus-text-green-100:focus {
  --text-opacity: 1;
  color: rgba(var(--green-100) / var(--text-opacity));
}

.text-green-200,
.hover-text-green-200:hover,
.focus-text-green-200:focus {
  --text-opacity: 1;
  color: rgba(var(--green-200) / var(--text-opacity));
}

.text-green-300,
.hover-text-green-300:hover,
.focus-text-green-300:focus {
  --text-opacity: 1;
  color: rgba(var(--green-300) / var(--text-opacity));
}

.text-green-400,
.hover-text-green-400:hover,
.focus-text-green-400:focus {
  --text-opacity: 1;
  color: rgba(var(--green-400) / var(--text-opacity));
}

.text-green-500,
.text-green,
.text-success,
.hover-text-green-500:hover,
.focus-text-green-500:focus,
.hover-text-success:hover,
.focus-text-success:hover {
  --text-opacity: 1;
  color: rgba(var(--green-500) / var(--text-opacity));
}

.text-green-600,
.hover-text-green-600:hover,
.focus-text-green-600:focus {
  --text-opacity: 1;
  color: rgba(var(--green-600) / var(--text-opacity));
}

.text-green-700,
.hover-text-green-700:hover,
.focus-text-green-700:focus {
  --text-opacity: 1;
  color: rgba(var(--green-700) / var(--text-opacity));
}

.text-green-800,
.hover-text-green-800:hover,
.focus-text-green-800:focus {
  --text-opacity: 1;
  color: rgba(var(--green-800) / var(--text-opacity));
}

.text-green-900,
.hover-text-green-900:hover,
.focus-text-green-900:focus {
  --text-opacity: 1;
  color: rgba(var(--green-900) / var(--text-opacity));
}

.text-emerald-50,
.hover-text-emerald-50:hover,
.focus-text-emerald-50:focus {
  --text-opacity: 1;
  color: rgba(var(--emerald-50) / var(--text-opacity));
}

.text-emerald-100,
.hover-text-emerald-100:hover,
.focus-text-emerald-100:focus {
  --text-opacity: 1;
  color: rgba(var(--emerald-100) / var(--text-opacity));
}

.text-emerald-200,
.hover-text-emerald-200:hover,
.focus-text-emerald-200:focus {
  --text-opacity: 1;
  color: rgba(var(--emerald-200) / var(--text-opacity));
}

.text-emerald-300,
.hover-text-emerald-300:hover,
.focus-text-emerald-300:focus {
  --text-opacity: 1;
  color: rgba(var(--emerald-300) / var(--text-opacity));
}

.text-emerald-400,
.hover-text-emerald-400:hover,
.focus-text-emerald-400:focus {
  --text-opacity: 1;
  color: rgba(var(--emerald-400) / var(--text-opacity));
}

.text-emerald-500,
.text-emerald,
.hover-text-emerald-500:hover,
.focus-text-emerald-500:focus,
.hover-text-emerald:hover,
.focus-text-emerald:hover {
  --text-opacity: 1;
  color: rgba(var(--emerald-500) / var(--text-opacity));
}

.text-emerald-600,
.hover-text-emerald-600:hover,
.focus-text-emerald-600:focus {
  --text-opacity: 1;
  color: rgba(var(--emerald-600) / var(--text-opacity));
}

.text-emerald-700,
.hover-text-emerald-700:hover,
.focus-text-emerald-700:focus {
  --text-opacity: 1;
  color: rgba(var(--emerald-700) / var(--text-opacity));
}

.text-emerald-800,
.hover-text-emerald-800:hover,
.focus-text-emerald-800:focus {
  --text-opacity: 1;
  color: rgba(var(--emerald-800) / var(--text-opacity));
}

.text-emerald-900,
.hover-text-emerald-900:hover,
.focus-text-emerald-900:focus {
  --text-opacity: 1;
  color: rgba(var(--emerald-900) / var(--text-opacity));
}

.text-teal-50,
.hover-text-teal-50:hover,
.focus-text-teal-50:focus {
  --text-opacity: 1;
  color: rgba(var(--teal-50) / var(--text-opacity));
}

.text-teal-100,
.hover-text-teal-100:hover,
.focus-text-teal-100:focus {
  --text-opacity: 1;
  color: rgba(var(--teal-100) / var(--text-opacity));
}

.text-teal-200,
.hover-text-teal-200:hover,
.focus-text-teal-200:focus {
  --text-opacity: 1;
  color: rgba(var(--teal-200) / var(--text-opacity));
}

.text-teal-300,
.hover-text-teal-300:hover,
.focus-text-teal-300:focus {
  --text-opacity: 1;
  color: rgba(var(--teal-300) / var(--text-opacity));
}

.text-teal-400,
.hover-text-teal-400:hover,
.focus-text-teal-400:focus {
  --text-opacity: 1;
  color: rgba(var(--teal-400) / var(--text-opacity));
}

.text-teal-500,
.text-teal,
.hover-text-teal-500:hover,
.focus-text-teal-500:focus,
.hover-text-teal:hover,
.focus-text-teal:hover {
  --text-opacity: 1;
  color: rgba(var(--teal-500) / var(--text-opacity));
}

.text-teal-600,
.hover-text-teal-600:hover,
.focus-text-teal-600:focus {
  --text-opacity: 1;
  color: rgba(var(--teal-600) / var(--text-opacity));
}

.text-teal-700,
.hover-text-teal-700:hover,
.focus-text-teal-700:focus {
  --text-opacity: 1;
  color: rgba(var(--teal-700) / var(--text-opacity));
}

.text-teal-800,
.hover-text-teal-800:hover,
.focus-text-teal-800:focus {
  --text-opacity: 1;
  color: rgba(var(--teal-800) / var(--text-opacity));
}

.text-teal-900,
.hover-text-teal-900:hover,
.focus-text-teal-900:focus {
  --text-opacity: 1;
  color: rgba(var(--teal-900) / var(--text-opacity));
}

.text-cyan-50,
.hover-text-cyan-50:hover,
.focus-text-cyan-50:focus {
  --text-opacity: 1;
  color: rgba(var(--cyan-50) / var(--text-opacity));
}

.text-cyan-100,
.hover-text-cyan-100:hover,
.focus-text-cyan-100:focus {
  --text-opacity: 1;
  color: rgba(var(--cyan-100) / var(--text-opacity));
}

.text-cyan-200,
.hover-text-cyan-200:hover,
.focus-text-cyan-200:focus {
  --text-opacity: 1;
  color: rgba(var(--cyan-200) / var(--text-opacity));
}

.text-cyan-300,
.hover-text-cyan-300:hover,
.focus-text-cyan-300:focus {
  --text-opacity: 1;
  color: rgba(var(--cyan-300) / var(--text-opacity));
}

.text-cyan-400,
.hover-text-cyan-400:hover,
.focus-text-cyan-400:focus {
  --text-opacity: 1;
  color: rgba(var(--cyan-400) / var(--text-opacity));
}

.text-cyan-500,
.text-cyan,
.hover-text-cyan-500:hover,
.focus-text-cyan-500:focus,
.hover-text-cyan:hover,
.focus-text-cyan:hover {
  --text-opacity: 1;
  color: rgba(var(--cyan-500) / var(--text-opacity));
}

.text-cyan-600,
.hover-text-cyan-600:hover,
.focus-text-cyan-600:focus {
  --text-opacity: 1;
  color: rgba(var(--cyan-600) / var(--text-opacity));
}

.text-cyan-700,
.hover-text-cyan-700:hover,
.focus-text-cyan-700:focus {
  --text-opacity: 1;
  color: rgba(var(--cyan-700) / var(--text-opacity));
}

.text-cyan-800,
.hover-text-cyan-800:hover,
.focus-text-cyan-800:focus {
  --text-opacity: 1;
  color: rgba(var(--cyan-800) / var(--text-opacity));
}

.text-cyan-900,
.hover-text-cyan-900:hover,
.focus-text-cyan-900:focus {
  --text-opacity: 1;
  color: rgba(var(--cyan-900) / var(--text-opacity));
}

.text-sky-50,
.hover-text-sky-50:hover,
.focus-text-sky-50:focus {
  --text-opacity: 1;
  color: rgba(var(--sky-50) / var(--text-opacity));
}

.text-sky-100,
.hover-text-sky-100:hover,
.focus-text-sky-100:focus {
  --text-opacity: 1;
  color: rgba(var(--sky-100) / var(--text-opacity));
}

.text-sky-200,
.hover-text-sky-200:hover,
.focus-text-sky-200:focus {
  --text-opacity: 1;
  color: rgba(var(--sky-200) / var(--text-opacity));
}

.text-sky-300,
.hover-text-sky-300:hover,
.focus-text-sky-300:focus {
  --text-opacity: 1;
  color: rgba(var(--sky-300) / var(--text-opacity));
}

.text-sky-400,
.hover-text-sky-400:hover,
.focus-text-sky-400:focus {
  --text-opacity: 1;
  color: rgba(var(--sky-400) / var(--text-opacity));
}

.text-sky-500,
.text-sky,
.hover-text-sky-500:hover,
.focus-text-sky-500:focus,
.hover-text-sky:hover,
.focus-text-sky:hover {
  --text-opacity: 1;
  color: rgba(var(--sky-500) / var(--text-opacity));
}

.text-sky-600,
.hover-text-sky-600:hover,
.focus-text-sky-600:focus {
  --text-opacity: 1;
  color: rgba(var(--sky-600) / var(--text-opacity));
}

.text-sky-700,
.hover-text-sky-700:hover,
.focus-text-sky-700:focus {
  --text-opacity: 1;
  color: rgba(var(--sky-700) / var(--text-opacity));
}

.text-sky-800,
.hover-text-sky-800:hover,
.focus-text-sky-800:focus {
  --text-opacity: 1;
  color: rgba(var(--sky-800) / var(--text-opacity));
}

.text-sky-900,
.hover-text-sky-900:hover,
.focus-text-sky-900:focus {
  --text-opacity: 1;
  color: rgba(var(--sky-900) / var(--text-opacity));
}

.text-blue-50,
.hover-text-blue-50:hover,
.focus-text-blue-50:focus {
  --text-opacity: 1;
  color: rgba(var(--blue-50) / var(--text-opacity));
}

.text-blue-100,
.hover-text-blue-100:hover,
.focus-text-blue-100:focus {
  --text-opacity: 1;
  color: rgba(var(--blue-100) / var(--text-opacity));
}

.text-blue-200,
.hover-text-blue-200:hover,
.focus-text-blue-200:focus {
  --text-opacity: 1;
  color: rgba(var(--blue-200) / var(--text-opacity));
}

.text-blue-300,
.hover-text-blue-300:hover,
.focus-text-blue-300:focus {
  --text-opacity: 1;
  color: rgba(var(--blue-300) / var(--text-opacity));
}

.text-blue-400,
.hover-text-blue-400:hover,
.focus-text-blue-400:focus {
  --text-opacity: 1;
  color: rgba(var(--blue-400) / var(--text-opacity));
}

.text-blue-500,
.text-blue,
.hover-text-blue-500:hover,
.focus-text-blue-500:focus,
.hover-text-blue:hover,
.focus-text-blue:hover {
  --text-opacity: 1;
  color: rgba(var(--blue-500) / var(--text-opacity));
}

.text-blue-600,
.hover-text-blue-600:hover,
.focus-text-blue-600:focus {
  --text-opacity: 1;
  color: rgba(var(--blue-600) / var(--text-opacity));
}

.text-blue-700,
.hover-text-blue-700:hover,
.focus-text-blue-700:focus {
  --text-opacity: 1;
  color: rgba(var(--blue-700) / var(--text-opacity));
}

.text-blue-800,
.hover-text-blue-800:hover,
.focus-text-blue-800:focus {
  --text-opacity: 1;
  color: rgba(var(--blue-800) / var(--text-opacity));
}

.text-blue-900,
.hover-text-blue-900:hover,
.focus-text-blue-900:focus {
  --text-opacity: 1;
  color: rgba(var(--blue-900) / var(--text-opacity));
}

.text-indigo-50,
.hover-text-indigo-50:hover,
.focus-text-indigo-50:focus {
  --text-opacity: 1;
  color: rgba(var(--indigo-50) / var(--text-opacity));
}

.text-indigo-100,
.hover-text-indigo-100:hover,
.focus-text-indigo-100:focus {
  --text-opacity: 1;
  color: rgba(var(--indigo-100) / var(--text-opacity));
}

.text-indigo-200,
.hover-text-indigo-200:hover,
.focus-text-indigo-200:focus {
  --text-opacity: 1;
  color: rgba(var(--indigo-200) / var(--text-opacity));
}

.text-indigo-300,
.hover-text-indigo-300:hover,
.focus-text-indigo-300:focus {
  --text-opacity: 1;
  color: rgba(var(--indigo-300) / var(--text-opacity));
}

.text-indigo-400,
.hover-text-indigo-400:hover,
.focus-text-indigo-400:focus {
  --text-opacity: 1;
  color: rgba(var(--indigo-400) / var(--text-opacity));
}

.text-indigo-500,
.text-indigo,
.hover-text-indigo-500:hover,
.focus-text-indigo-500:focus,
.hover-text-indigo:hover,
.focus-text-indigo:hover {
  --text-opacity: 1;
  color: rgba(var(--indigo-500) / var(--text-opacity));
}

.text-indigo-600,
.hover-text-indigo-600:hover,
.focus-text-indigo-600:focus {
  --text-opacity: 1;
  color: rgba(var(--indigo-600) / var(--text-opacity));
}

.text-indigo-700,
.hover-text-indigo-700:hover,
.focus-text-indigo-700:focus {
  --text-opacity: 1;
  color: rgba(var(--indigo-700) / var(--text-opacity));
}

.text-indigo-800,
.hover-text-indigo-800:hover,
.focus-text-indigo-800:focus {
  --text-opacity: 1;
  color: rgba(var(--indigo-800) / var(--text-opacity));
}

.text-indigo-900,
.hover-text-indigo-900:hover,
.focus-text-indigo-900:focus {
  --text-opacity: 1;
  color: rgba(var(--indigo-900) / var(--text-opacity));
}

.text-violet-50,
.hover-text-violet-50:hover,
.focus-text-violet-50:focus {
  --text-opacity: 1;
  color: rgba(var(--violet-50) / var(--text-opacity));
}

.text-violet-100,
.hover-text-violet-100:hover,
.focus-text-violet-100:focus {
  --text-opacity: 1;
  color: rgba(var(--violet-100) / var(--text-opacity));
}

.text-violet-200,
.hover-text-violet-200:hover,
.focus-text-violet-200:focus {
  --text-opacity: 1;
  color: rgba(var(--violet-200) / var(--text-opacity));
}

.text-violet-300,
.hover-text-violet-300:hover,
.focus-text-violet-300:focus {
  --text-opacity: 1;
  color: rgba(var(--violet-300) / var(--text-opacity));
}

.text-violet-400,
.hover-text-violet-400:hover,
.focus-text-violet-400:focus {
  --text-opacity: 1;
  color: rgba(var(--violet-400) / var(--text-opacity));
}

.text-violet-500,
.text-violet,
.hover-text-violet-500:hover,
.focus-text-violet-500:focus,
.hover-text-violet:hover,
.focus-text-violet:hover {
  --text-opacity: 1;
  color: rgba(var(--violet-500) / var(--text-opacity));
}

.text-violet-600,
.hover-text-violet-600:hover,
.focus-text-violet-600:focus {
  --text-opacity: 1;
  color: rgba(var(--violet-600) / var(--text-opacity));
}

.text-violet-700,
.hover-text-violet-700:hover,
.focus-text-violet-700:focus {
  --text-opacity: 1;
  color: rgba(var(--violet-700) / var(--text-opacity));
}

.text-violet-800,
.hover-text-violet-800:hover,
.focus-text-violet-800:focus {
  --text-opacity: 1;
  color: rgba(var(--violet-800) / var(--text-opacity));
}

.text-violet-900,
.hover-text-violet-900:hover,
.focus-text-violet-900:focus {
  --text-opacity: 1;
  color: rgba(var(--violet-900) / var(--text-opacity));
}

.text-purple-50,
.hover-text-purple-50:hover,
.focus-text-purple-50:focus {
  --text-opacity: 1;
  color: rgba(var(--purple-50) / var(--text-opacity));
}

.text-purple-100,
.hover-text-purple-100:hover,
.focus-text-purple-100:focus {
  --text-opacity: 1;
  color: rgba(var(--purple-100) / var(--text-opacity));
}

.text-purple-200,
.hover-text-purple-200:hover,
.focus-text-purple-200:focus {
  --text-opacity: 1;
  color: rgba(var(--purple-200) / var(--text-opacity));
}

.text-purple-300,
.hover-text-purple-300:hover,
.focus-text-purple-300:focus {
  --text-opacity: 1;
  color: rgba(var(--purple-300) / var(--text-opacity));
}

.text-purple-400,
.hover-text-purple-400:hover,
.focus-text-purple-400:focus {
  --text-opacity: 1;
  color: rgba(var(--purple-400) / var(--text-opacity));
}

.text-purple-500,
.text-purple,
.hover-text-purple-500:hover,
.focus-text-purple-500:focus,
.hover-text-purple:hover,
.focus-text-purple:hover {
  --text-opacity: 1;
  color: rgba(var(--purple-500) / var(--text-opacity));
}

.text-purple-600,
.hover-text-purple-600:hover,
.focus-text-purple-600:focus {
  --text-opacity: 1;
  color: rgba(var(--purple-600) / var(--text-opacity));
}

.text-purple-700,
.hover-text-purple-700:hover,
.focus-text-purple-700:focus {
  --text-opacity: 1;
  color: rgba(var(--purple-700) / var(--text-opacity));
}

.text-purple-800,
.hover-text-purple-800:hover,
.focus-text-purple-800:focus {
  --text-opacity: 1;
  color: rgba(var(--purple-800) / var(--text-opacity));
}

.text-purple-900,
.hover-text-purple-900:hover,
.focus-text-purple-900:focus {
  --text-opacity: 1;
  color: rgba(var(--purple-900) / var(--text-opacity));
}

.text-fuchsia-50,
.hover-text-fuchsia-50:hover,
.focus-text-fuchsia-50:focus {
  --text-opacity: 1;
  color: rgba(var(--fuchsia-50) / var(--text-opacity));
}

.text-fuchsia-100,
.hover-text-fuchsia-100:hover,
.focus-text-fuchsia-100:focus {
  --text-opacity: 1;
  color: rgba(var(--fuchsia-100) / var(--text-opacity));
}

.text-fuchsia-200,
.hover-text-fuchsia-200:hover,
.focus-text-fuchsia-200:focus {
  --text-opacity: 1;
  color: rgba(var(--fuchsia-200) / var(--text-opacity));
}

.text-fuchsia-300,
.hover-text-fuchsia-300:hover,
.focus-text-fuchsia-300:focus {
  --text-opacity: 1;
  color: rgba(var(--fuchsia-300) / var(--text-opacity));
}

.text-fuchsia-400,
.hover-text-fuchsia-400:hover,
.focus-text-fuchsia-400:focus {
  --text-opacity: 1;
  color: rgba(var(--fuchsia-400) / var(--text-opacity));
}

.text-fuchsia-500,
.text-fuchsia,
.hover-text-fuchsia-500:hover,
.focus-text-fuchsia-500:focus,
.hover-text-fuchsia:hover,
.focus-text-fuchsia:hover {
  --text-opacity: 1;
  color: rgba(var(--fuchsia-500) / var(--text-opacity));
}

.text-fuchsia-600,
.hover-text-fuchsia-600:hover,
.focus-text-fuchsia-600:focus {
  --text-opacity: 1;
  color: rgba(var(--fuchsia-600) / var(--text-opacity));
}

.text-fuchsia-700,
.hover-text-fuchsia-700:hover,
.focus-text-fuchsia-700:focus {
  --text-opacity: 1;
  color: rgba(var(--fuchsia-700) / var(--text-opacity));
}

.text-fuchsia-800,
.hover-text-fuchsia-800:hover,
.focus-text-fuchsia-800:focus {
  --text-opacity: 1;
  color: rgba(var(--fuchsia-800) / var(--text-opacity));
}

.text-fuchsia-900,
.hover-text-fuchsia-900:hover,
.focus-text-fuchsia-900:focus {
  --text-opacity: 1;
  color: rgba(var(--fuchsia-900) / var(--text-opacity));
}

.text-pink-50,
.hover-text-pink-50:hover,
.focus-text-pink-50:focus {
  --text-opacity: 1;
  color: rgba(var(--pink-50) / var(--text-opacity));
}

.text-pink-100,
.hover-text-pink-100:hover,
.focus-text-pink-100:focus {
  --text-opacity: 1;
  color: rgba(var(--pink-100) / var(--text-opacity));
}

.text-pink-200,
.hover-text-pink-200:hover,
.focus-text-pink-200:focus {
  --text-opacity: 1;
  color: rgba(var(--pink-200) / var(--text-opacity));
}

.text-pink-300,
.hover-text-pink-300:hover,
.focus-text-pink-300:focus {
  --text-opacity: 1;
  color: rgba(var(--pink-300) / var(--text-opacity));
}

.text-pink-400,
.hover-text-pink-400:hover,
.focus-text-pink-400:focus {
  --text-opacity: 1;
  color: rgba(var(--pink-400) / var(--text-opacity));
}

.text-pink-500,
.text-pink,
.hover-text-pink-500:hover,
.focus-text-pink-500:focus,
.hover-text-pink:hover,
.focus-text-pink:hover {
  --text-opacity: 1;
  color: rgba(var(--pink-500) / var(--text-opacity));
}

.text-pink-600,
.hover-text-pink-600:hover,
.focus-text-pink-600:focus {
  --text-opacity: 1;
  color: rgba(var(--pink-600) / var(--text-opacity));
}

.text-pink-700,
.hover-text-pink-700:hover,
.focus-text-pink-700:focus {
  --text-opacity: 1;
  color: rgba(var(--pink-700) / var(--text-opacity));
}

.text-pink-800,
.hover-text-pink-800:hover,
.focus-text-pink-800:focus {
  --text-opacity: 1;
  color: rgba(var(--pink-800) / var(--text-opacity));
}

.text-pink-900,
.hover-text-pink-900:hover,
.focus-text-pink-900:focus {
  --text-opacity: 1;
  color: rgba(var(--pink-900) / var(--text-opacity));
}

.text-rose-50,
.hover-text-rose-50:hover,
.focus-text-rose-50:focus {
  --text-opacity: 1;
  color: rgba(var(--rose-50) / var(--text-opacity));
}

.text-rose-100,
.hover-text-rose-100:hover,
.focus-text-rose-100:focus {
  --text-opacity: 1;
  color: rgba(var(--rose-100) / var(--text-opacity));
}

.text-rose-200,
.hover-text-rose-200:hover,
.focus-text-rose-200:focus {
  --text-opacity: 1;
  color: rgba(var(--rose-200) / var(--text-opacity));
}

.text-rose-300,
.hover-text-rose-300:hover,
.focus-text-rose-300:focus {
  --text-opacity: 1;
  color: rgba(var(--rose-300) / var(--text-opacity));
}

.text-rose-400,
.hover-text-rose-400:hover,
.focus-text-rose-400:focus {
  --text-opacity: 1;
  color: rgba(var(--rose-400) / var(--text-opacity));
}

.text-rose-500,
.text-rose,
.hover-text-rose-500:hover,
.focus-text-rose-500:focus,
.hover-text-rose:hover,
.focus-text-rose:hover {
  --text-opacity: 1;
  color: rgba(var(--rose-500) / var(--text-opacity));
}

.text-rose-600,
.hover-text-rose-600:hover,
.focus-text-rose-600:focus {
  --text-opacity: 1;
  color: rgba(var(--rose-600) / var(--text-opacity));
}

.text-rose-700,
.hover-text-rose-700:hover,
.focus-text-rose-700:focus {
  --text-opacity: 1;
  color: rgba(var(--rose-700) / var(--text-opacity));
}

.text-rose-800,
.hover-text-rose-800:hover,
.focus-text-rose-800:focus {
  --text-opacity: 1;
  color: rgba(var(--rose-800) / var(--text-opacity));
}

.text-rose-900,
.hover-text-rose-900:hover,
.focus-text-rose-900:focus {
  --text-opacity: 1;
  color: rgba(var(--rose-900) / var(--text-opacity));
}

.text-slate-50,
.hover-text-slate-50:hover,
.focus-text-slate-50:focus {
  --text-opacity: 1;
  color: rgba(var(--slate-50) / var(--text-opacity));
}

.text-slate-100,
.hover-text-slate-100:hover,
.focus-text-slate-100:focus {
  --text-opacity: 1;
  color: rgba(var(--slate-100) / var(--text-opacity));
}

.text-slate-200,
.hover-text-slate-200:hover,
.focus-text-slate-200:focus {
  --text-opacity: 1;
  color: rgba(var(--slate-200) / var(--text-opacity));
}

.text-slate-300,
.hover-text-slate-300:hover,
.focus-text-slate-300:focus {
  --text-opacity: 1;
  color: rgba(var(--slate-300) / var(--text-opacity));
}

.text-slate-400,
.hover-text-slate-400:hover,
.focus-text-slate-400:focus {
  --text-opacity: 1;
  color: rgba(var(--slate-400) / var(--text-opacity));
}

.text-slate-500,
.text-slate,
.hover-text-slate-500:hover,
.focus-text-slate-500:focus,
.hover-text-slate:hover,
.focus-text-slate:hover {
  --text-opacity: 1;
  color: rgba(var(--slate-500) / var(--text-opacity));
}

.text-slate-600,
.hover-text-slate-600:hover,
.focus-text-slate-600:focus {
  --text-opacity: 1;
  color: rgba(var(--slate-600) / var(--text-opacity));
}

.text-slate-700,
.hover-text-slate-700:hover,
.focus-text-slate-700:focus {
  --text-opacity: 1;
  color: rgba(var(--slate-700) / var(--text-opacity));
}

.text-slate-800,
.hover-text-slate-800:hover,
.focus-text-slate-800:focus {
  --text-opacity: 1;
  color: rgba(var(--slate-800) / var(--text-opacity));
}

.text-slate-900,
.hover-text-slate-900:hover,
.focus-text-slate-900:focus {
  --text-opacity: 1;
  color: rgba(var(--slate-900) / var(--text-opacity));
}

.text-gray-50,
.hover-text-gray-50:hover,
.focus-text-gray-50:focus {
  --text-opacity: 1;
  color: rgba(var(--gray-50) / var(--text-opacity));
}

.text-gray-100,
.hover-text-gray-100:hover,
.focus-text-gray-100:focus {
  --text-opacity: 1;
  color: rgba(var(--gray-100) / var(--text-opacity));
}

.text-gray-200,
.hover-text-gray-200:hover,
.focus-text-gray-200:focus {
  --text-opacity: 1;
  color: rgba(var(--gray-200) / var(--text-opacity));
}

.text-gray-300,
.text-info,
.hover-text-gray-300:hover,
.focus-text-gray-300:focus {
  --text-opacity: 1;
  color: rgba(var(--gray-300) / var(--text-opacity));
}

.text-gray-400,
.hover-text-gray-400:hover,
.focus-text-gray-400:focus {
  --text-opacity: 1;
  color: rgba(var(--gray-400) / var(--text-opacity));
}

.text-gray-500,
.text-gray,
.hover-text-gray-500:hover,
.focus-text-gray-500:focus,
.hover-text-gray:hover,
.focus-text-gray:hover {
  --text-opacity: 1;
  color: rgba(var(--gray-500) / var(--text-opacity));
}

.text-gray-600,
.hover-text-gray-600:hover,
.focus-text-gray-600:focus {
  --text-opacity: 1;
  color: rgba(var(--gray-600) / var(--text-opacity));
}

.text-gray-700,
.hover-text-gray-700:hover,
.focus-text-gray-700:focus {
  --text-opacity: 1;
  color: rgba(var(--gray-700) / var(--text-opacity));
}

.text-gray-800,
.hover-text-gray-800:hover,
.focus-text-gray-800:focus {
  --text-opacity: 1;
  color: rgba(var(--gray-800) / var(--text-opacity));
}

.text-gray-900,
.hover-text-gray-900:hover,
.focus-text-gray-900:focus {
  --text-opacity: 1;
  color: rgba(var(--gray-900) / var(--text-opacity));
}

.text-zinc-50,
.hover-text-zinc-50:hover,
.focus-text-zinc-50:focus {
  --text-opacity: 1;
  color: rgba(var(--zinc-50) / var(--text-opacity));
}

.text-zinc-100,
.hover-text-zinc-100:hover,
.focus-text-zinc-100:focus {
  --text-opacity: 1;
  color: rgba(var(--zinc-100) / var(--text-opacity));
}

.text-zinc-200,
.hover-text-zinc-200:hover,
.focus-text-zinc-200:focus {
  --text-opacity: 1;
  color: rgba(var(--zinc-200) / var(--text-opacity));
}

.text-zinc-300,
.hover-text-zinc-300:hover,
.focus-text-zinc-300:focus {
  --text-opacity: 1;
  color: rgba(var(--zinc-300) / var(--text-opacity));
}

.text-zinc-400,
.hover-text-zinc-400:hover,
.focus-text-zinc-400:focus {
  --text-opacity: 1;
  color: rgba(var(--zinc-400) / var(--text-opacity));
}

.text-zinc-500,
.text-zinc,
.hover-text-zinc-500:hover,
.focus-text-zinc-500:focus,
.hover-text-zinc:hover,
.focus-text-zinc:hover {
  --text-opacity: 1;
  color: rgba(var(--zinc-500) / var(--text-opacity));
}

.text-zinc-600,
.hover-text-zinc-600:hover,
.focus-text-zinc-600:focus {
  --text-opacity: 1;
  color: rgba(var(--zinc-600) / var(--text-opacity));
}

.text-zinc-700,
.hover-text-zinc-700:hover,
.focus-text-zinc-700:focus {
  --text-opacity: 1;
  color: rgba(var(--zinc-700) / var(--text-opacity));
}

.text-zinc-800,
.hover-text-zinc-800:hover,
.focus-text-zinc-800:focus {
  --text-opacity: 1;
  color: rgba(var(--zinc-800) / var(--text-opacity));
}

.text-zinc-900,
.hover-text-zinc-900:hover,
.focus-text-zinc-900:focus {
  --text-opacity: 1;
  color: rgba(var(--zinc-900) / var(--text-opacity));
}

.text-black,
.hover-text-black:hover,
.focus-text-black:focus {
  --text-opacity: 1;
  color: rgba(var(--black) / var(--text-opacity));
}

.text-white,
.hover-text-white:hover,
.focus-text-white:focus {
  --text-opacity: 1;
  color: rgba(var(--white) / var(--text-opacity));
}

/* 颜色属性 */
/* 基础类 */
.border-red-50,
.hover-border-red-50:hover,
.focus-border-red-50:focus {
  --border-opacity: 1;
  border-color: rgba(var(--red-50) / var(--border-opacity));
}

.border-red-100,
.hover-border-red-100:hover,
.focus-border-red-100:focus {
  --border-opacity: 1;
  border-color: rgba(var(--red-100) / var(--border-opacity));
}

.border-red-200,
.hover-border-red-200:hover,
.focus-border-red-200:focus {
  --border-opacity: 1;
  border-color: rgba(var(--red-200) / var(--border-opacity));
}

.border-red-300,
.hover-border-red-300:hover,
.focus-border-red-300:focus {
  --border-opacity: 1;
  border-color: rgba(var(--red-300) / var(--border-opacity));
}

.border-red-400,
.hover-border-red-400:hover,
.focus-border-red-400:focus {
  --border-opacity: 1;
  border-color: rgba(var(--red-400) / var(--border-opacity));
}

.border-red-500,
.border-red,
.border-danger,
.hover-border-red-500:hover,
.hover-border-red-500:focus,
.hover-border-red:hover,
.hover-border-red:focus {
  --border-opacity: 1;
  border-color: rgba(var(--red-500) / var(--border-opacity));
}

.border-red-600,
.hover-border-red-600:hover,
.focus-border-red-600:focus {
  --border-opacity: 1;
  border-color: rgba(var(--red-600) / var(--border-opacity));
}

.border-red-700,
.hover-border-red-700:hover,
.focus-border-red-700:focus {
  --border-opacity: 1;
  border-color: rgba(var(--red-700) / var(--border-opacity));
}

.border-red-800,
.hover-border-red-800:hover,
.focus-border-red-800:focus {
  --border-opacity: 1;
  border-color: rgba(var(--red-800) / var(--border-opacity));
}

.border-red-900,
.hover-border-red-900:hover,
.focus-border-red-900:focus {
  --border-opacity: 1;
  border-color: rgba(var(--red-900) / var(--border-opacity));
}

.border-orange-50,
.hover-border-orange-50:hover,
.focus-border-orange-50:focus {
  --border-opacity: 1;
  border-color: rgba(var(--orange-50) / var(--border-opacity));
}

.border-orange-100,
.hover-border-orange-100:hover,
.focus-border-orange-100:focus {
  --border-opacity: 1;
  border-color: rgba(var(--orange-100) / var(--border-opacity));
}

.border-orange-200,
.hover-border-orange-200:hover,
.focus-border-orange-200:focus {
  --border-opacity: 1;
  border-color: rgba(var(--orange-200) / var(--border-opacity));
}

.border-orange-300,
.hover-border-orange-300:hover,
.focus-border-orange-300:focus {
  --border-opacity: 1;
  border-color: rgba(var(--orange-300) / var(--border-opacity));
}

.border-orange-400,
.hover-border-orange-400:hover,
.focus-border-orange-400:focus {
  --border-opacity: 1;
  border-color: rgba(var(--orange-400) / var(--border-opacity));
}

.border-orange-500,
.border-orange,
.hover-border-orange-500:hover,
.focus-border-orange-500:focus,
.hover-border-orange:hover,
.focus-border-orange:focus {
  --border-opacity: 1;
  border-color: rgba(var(--orange-500) / var(--border-opacity));
}

.border-orange-600,
.hover-border-orange-600:hover,
.focus-border-orange-600:focus {
  --border-opacity: 1;
  border-color: rgba(var(--orange-600) / var(--border-opacity));
}

.border-orange-700,
.hover-border-orange-700:hover,
.focus-border-orange-700:focus {
  --border-opacity: 1;
  border-color: rgba(var(--orange-700) / var(--border-opacity));
}

.border-orange-800,
.hover-border-orange-800:hover,
.focus-border-orange-800:focus {
  --border-opacity: 1;
  border-color: rgba(var(--orange-800) / var(--border-opacity));
}

.border-orange-900,
.hover-border-orange-900:hover,
.focus-border-orange-900:focus {
  --border-opacity: 1;
  border-color: rgba(var(--orange-900) / var(--border-opacity));
}

.border-amber-50,
.hover-border-amber-50:hover,
.focus-border-amber-50:focus {
  --border-opacity: 1;
  border-color: rgba(var(--amber-50) / var(--border-opacity));
}

.border-amber-100,
.hover-border-amber-100:hover,
.focus-border-amber-100:focus {
  --border-opacity: 1;
  border-color: rgba(var(--amber-100) / var(--border-opacity));
}

.border-amber-200,
.hover-border-amber-200:hover,
.focus-border-amber-200:focus {
  --border-opacity: 1;
  border-color: rgba(var(--amber-200) / var(--border-opacity));
}

.border-amber-300,
.hover-border-amber-300:hover,
.focus-border-amber-300:focus {
  --border-opacity: 1;
  border-color: rgba(var(--amber-300) / var(--border-opacity));
}

.border-amber-400,
.hover-border-amber-400:hover,
.focus-border-amber-400:focus {
  --border-opacity: 1;
  border-color: rgba(var(--amber-400) / var(--border-opacity));
}

.border-amber-500,
.border-amber,
.border-warning,
.hover-border-amber-500:hover,
.focus-border-amber-500:focus,
.hover-border-amber:hover,
.focus-border-amber:focus {
  --border-opacity: 1;
  border-color: rgba(var(--amber-500) / var(--border-opacity));
}

.border-amber-600,
.hover-border-amber-600:hover,
.focus-border-amber-600:focus {
  --border-opacity: 1;
  border-color: rgba(var(--amber-600) / var(--border-opacity));
}

.border-amber-700,
.hover-border-amber-700:hover,
.focus-border-amber-700:focus {
  --border-opacity: 1;
  border-color: rgba(var(--amber-700) / var(--border-opacity));
}

.border-amber-800,
.hover-border-amber-800:hover,
.focus-border-amber-800:focus {
  --border-opacity: 1;
  border-color: rgba(var(--amber-800) / var(--border-opacity));
}

.border-amber-900,
.hover-border-amber-900:hover,
.focus-border-amber-900:focus {
  --border-opacity: 1;
  border-color: rgba(var(--amber-900) / var(--border-opacity));
}

.border-yellow-50,
.hover-border-yellow-50:hover,
.focus-border-yellow-50:focus {
  --border-opacity: 1;
  border-color: rgba(var(--yellow-50) / var(--border-opacity));
}

.border-yellow-100,
.hover-border-yellow-100:hover,
.focus-border-yellow-100:focus {
  --border-opacity: 1;
  border-color: rgba(var(--yellow-100) / var(--border-opacity));
}

.border-yellow-200,
.hover-border-yellow-200:hover,
.focus-border-yellow-200:focus {
  --border-opacity: 1;
  border-color: rgba(var(--yellow-200) / var(--border-opacity));
}

.border-yellow-300,
.hover-border-yellow-300:hover,
.focus-border-yellow-300:focus {
  --border-opacity: 1;
  border-color: rgba(var(--yellow-300) / var(--border-opacity));
}

.border-yellow-400,
.hover-border-yellow-400:hover,
.focus-border-yellow-400:focus {
  --border-opacity: 1;
  border-color: rgba(var(--yellow-400) / var(--border-opacity));
}

.border-yellow-500,
.border-yellow,
.hover-border-yellow-500:hover,
.focus-border-yellow-500:focus,
.hover-border-yellow:hover,
.focus-border-yellow:focus {
  --border-opacity: 1;
  border-color: rgba(var(--yellow-500) / var(--border-opacity));
}

.border-yellow-600,
.hover-border-yellow-600:hover,
.focus-border-yellow-600:focus {
  --border-opacity: 1;
  border-color: rgba(var(--yellow-600) / var(--border-opacity));
}

.border-yellow-700,
.hover-border-yellow-700:hover,
.focus-border-yellow-700:focus {
  --border-opacity: 1;
  border-color: rgba(var(--yellow-700) / var(--border-opacity));
}

.border-yellow-800,
.hover-border-yellow-800:hover,
.focus-border-yellow-800:focus {
  --border-opacity: 1;
  border-color: rgba(var(--yellow-800) / var(--border-opacity));
}

.border-yellow-900,
.hover-border-yellow-900:hover,
.focus-border-yellow-900:focus {
  --border-opacity: 1;
  border-color: rgba(var(--yellow-900) / var(--border-opacity));
}

.border-lime-50,
.hover-border-lime-50:hover,
.focus-border-lime-50:focus {
  --border-opacity: 1;
  border-color: rgba(var(--lime-50) / var(--border-opacity));
}

.border-lime-100,
.hover-border-lime-100:hover,
.focus-border-lime-100:focus {
  --border-opacity: 1;
  border-color: rgba(var(--lime-100) / var(--border-opacity));
}

.border-lime-200,
.hover-border-lime-200:hover,
.focus-border-lime-200:focus {
  --border-opacity: 1;
  border-color: rgba(var(--lime-200) / var(--border-opacity));
}

.border-lime-300,
.hover-border-lime-300:hover,
.focus-border-lime-300:focus {
  --border-opacity: 1;
  border-color: rgba(var(--lime-300) / var(--border-opacity));
}

.border-lime-400,
.hover-border-lime-400:hover,
.focus-border-lime-400:focus {
  --border-opacity: 1;
  border-color: rgba(var(--lime-400) / var(--border-opacity));
}

.border-lime-500,
.border-lime,
.border-secondary,
.hover-border-lime-500:hover,
.focus-border-lime-500:focus,
.hover-border-lime:hover,
.focus-border-lime:focus {
  --border-opacity: 1;
  border-color: rgba(var(--lime-500) / var(--border-opacity));
}

.border-lime-600,
.hover-border-lime-600:hover,
.focus-border-lime-600:focus {
  --border-opacity: 1;
  border-color: rgba(var(--lime-600) / var(--border-opacity));
}

.border-lime-700,
.hover-border-lime-700:hover,
.focus-border-lime-700:focus {
  --border-opacity: 1;
  border-color: rgba(var(--lime-700) / var(--border-opacity));
}

.border-lime-800,
.hover-border-lime-800:hover,
.focus-border-lime-800:focus {
  --border-opacity: 1;
  border-color: rgba(var(--lime-800) / var(--border-opacity));
}

.border-lime-900,
.hover-border-lime-900:hover,
.focus-border-lime-900:focus {
  --border-opacity: 1;
  border-color: rgba(var(--lime-900) / var(--border-opacity));
}

.border-green-50,
.hover-border-green-50:hover,
.focus-border-green-50:focus {
  --border-opacity: 1;
  border-color: rgba(var(--green-50) / var(--border-opacity));
}

.border-green-100,
.hover-border-green-100:hover,
.focus-border-green-100:focus {
  --border-opacity: 1;
  border-color: rgba(var(--green-100) / var(--border-opacity));
}

.border-green-200,
.hover-border-green-200:hover,
.focus-border-green-200:focus {
  --border-opacity: 1;
  border-color: rgba(var(--green-200) / var(--border-opacity));
}

.border-green-300,
.hover-border-green-300:hover,
.focus-border-green-300:focus {
  --border-opacity: 1;
  border-color: rgba(var(--green-300) / var(--border-opacity));
}

.border-green-400,
.hover-border-green-400:hover,
.focus-border-green-400:focus {
  --border-opacity: 1;
  border-color: rgba(var(--green-400) / var(--border-opacity));
}

.border-green-500,
.border-green,
.border-success,
.hover-border-green-500:hover,
.focus-border-green-500:focus,
.hover-border-green:hover,
.focus-border-green:hover {
  --border-opacity: 1;
  border-color: rgba(var(--green-500) / var(--border-opacity));
}

.border-green-600,
.hover-border-green-600:hover,
.focus-border-green-600:focus {
  --border-opacity: 1;
  border-color: rgba(var(--green-600) / var(--border-opacity));
}

.border-green-700,
.hover-border-green-700:hover,
.focus-border-green-700:focus {
  --border-opacity: 1;
  border-color: rgba(var(--green-700) / var(--border-opacity));
}

.border-green-800,
.hover-border-green-800:hover,
.focus-border-green-800:focus {
  --border-opacity: 1;
  border-color: rgba(var(--green-800) / var(--border-opacity));
}

.border-green-900,
.hover-border-green-900:hover,
.focus-border-green-900:focus {
  --border-opacity: 1;
  border-color: rgba(var(--green-900) / var(--border-opacity));
}

.border-emerald-50,
.hover-border-emerald-50:hover,
.focus-border-emerald-50:focus {
  --border-opacity: 1;
  border-color: rgba(var(--emerald-50) / var(--border-opacity));
}

.border-emerald-100,
.hover-border-emerald-100:hover,
.focus-border-emerald-100:focus {
  --border-opacity: 1;
  border-color: rgba(var(--emerald-100) / var(--border-opacity));
}

.border-emerald-200,
.hover-border-emerald-200:hover,
.focus-border-emerald-200:focus {
  --border-opacity: 1;
  border-color: rgba(var(--emerald-200) / var(--border-opacity));
}

.border-emerald-300,
.hover-border-emerald-300:hover,
.focus-border-emerald-300:focus {
  --border-opacity: 1;
  border-color: rgba(var(--emerald-300) / var(--border-opacity));
}

.border-emerald-400,
.hover-border-emerald-400:hover,
.focus-border-emerald-400:focus {
  --border-opacity: 1;
  border-color: rgba(var(--emerald-400) / var(--border-opacity));
}

.border-emerald-500,
.border-emerald,
.hover-border-emerald-500:hover,
.focus-border-emerald-500:focus,
.hover-border-emerald:hover,
.focus-border-emerald:hover {
  --border-opacity: 1;
  border-color: rgba(var(--emerald-500) / var(--border-opacity));
}

.border-emerald-600,
.hover-border-emerald-600:hover,
.focus-border-emerald-600:focus {
  --border-opacity: 1;
  border-color: rgba(var(--emerald-600) / var(--border-opacity));
}

.border-emerald-700,
.hover-border-emerald-700:hover,
.focus-border-emerald-700:focus {
  --border-opacity: 1;
  border-color: rgba(var(--emerald-700) / var(--border-opacity));
}

.border-emerald-800,
.hover-border-emerald-800:hover,
.focus-border-emerald-800:focus {
  --border-opacity: 1;
  border-color: rgba(var(--emerald-800) / var(--border-opacity));
}

.border-emerald-900,
.hover-border-emerald-900:hover,
.focus-border-emerald-900:focus {
  --border-opacity: 1;
  border-color: rgba(var(--emerald-900) / var(--border-opacity));
}

.border-teal-50,
.hover-border-teal-50:hover,
.focus-border-teal-50:focus {
  --border-opacity: 1;
  border-color: rgba(var(--teal-50) / var(--border-opacity));
}

.border-teal-100,
.hover-border-teal-100:hover,
.focus-border-teal-100:focus {
  --border-opacity: 1;
  border-color: rgba(var(--teal-100) / var(--border-opacity));
}

.border-teal-200,
.hover-border-teal-200:hover,
.focus-border-teal-200:focus {
  --border-opacity: 1;
  border-color: rgba(var(--teal-200) / var(--border-opacity));
}

.border-teal-300,
.hover-border-teal-300:hover,
.focus-border-teal-300:focus {
  --border-opacity: 1;
  border-color: rgba(var(--teal-300) / var(--border-opacity));
}

.border-teal-400,
.hover-border-teal-400:hover,
.focus-border-teal-400:focus {
  --border-opacity: 1;
  border-color: rgba(var(--teal-400) / var(--border-opacity));
}

.border-teal-500,
.border-teal,
.hover-border-teal-500:hover,
.focus-border-teal-500:focus,
.hover-border-teal:hover,
.focus-border-teal:hover {
  --border-opacity: 1;
  border-color: rgba(var(--teal-500) / var(--border-opacity));
}

.border-teal-600,
.hover-border-teal-600:hover,
.focus-border-teal-600:focus {
  --border-opacity: 1;
  border-color: rgba(var(--teal-600) / var(--border-opacity));
}

.border-teal-700,
.hover-border-teal-700:hover,
.focus-border-teal-700:focus {
  --border-opacity: 1;
  border-color: rgba(var(--teal-700) / var(--border-opacity));
}

.border-teal-800,
.hover-border-teal-800:hover,
.focus-border-teal-800:focus {
  --border-opacity: 1;
  border-color: rgba(var(--teal-800) / var(--border-opacity));
}

.border-teal-900,
.hover-border-teal-900:hover,
.focus-border-teal-900:focus {
  --border-opacity: 1;
  border-color: rgba(var(--teal-900) / var(--border-opacity));
}

.border-cyan-50,
.hover-border-cyan-50:hover,
.focus-border-cyan-50:focus {
  --border-opacity: 1;
  border-color: rgba(var(--cyan-50) / var(--border-opacity));
}

.border-cyan-100,
.hover-border-cyan-100:hover,
.focus-border-cyan-100:focus {
  --border-opacity: 1;
  border-color: rgba(var(--cyan-100) / var(--border-opacity));
}

.border-cyan-200,
.hover-border-cyan-200:hover,
.focus-border-cyan-200:focus {
  --border-opacity: 1;
  border-color: rgba(var(--cyan-200) / var(--border-opacity));
}

.border-cyan-300,
.hover-border-cyan-300:hover,
.focus-border-cyan-300:focus {
  --border-opacity: 1;
  border-color: rgba(var(--cyan-300) / var(--border-opacity));
}

.border-cyan-400,
.hover-border-cyan-400:hover,
.focus-border-cyan-400:focus {
  --border-opacity: 1;
  border-color: rgba(var(--cyan-400) / var(--border-opacity));
}

.border-cyan-500,
.border-cyan,
.hover-border-cyan-500:hover,
.focus-border-cyan-500:focus,
.hover-border-cyan:hover,
.focus-border-cyan:hover {
  --border-opacity: 1;
  border-color: rgba(var(--cyan-500) / var(--border-opacity));
}

.border-cyan-600,
.hover-border-cyan-600:hover,
.focus-border-cyan-600:focus {
  --border-opacity: 1;
  border-color: rgba(var(--cyan-600) / var(--border-opacity));
}

.border-cyan-700,
.hover-border-cyan-700:hover,
.focus-border-cyan-700:focus {
  --border-opacity: 1;
  border-color: rgba(var(--cyan-700) / var(--border-opacity));
}

.border-cyan-800,
.hover-border-cyan-800:hover,
.focus-border-cyan-800:focus {
  --border-opacity: 1;
  border-color: rgba(var(--cyan-800) / var(--border-opacity));
}

.border-cyan-900,
.hover-border-cyan-900:hover,
.focus-border-cyan-900:focus {
  --border-opacity: 1;
  border-color: rgba(var(--cyan-900) / var(--border-opacity));
}

.border-sky-50,
.hover-border-sky-50:hover,
.focus-border-sky-50:focus {
  --border-opacity: 1;
  border-color: rgba(var(--sky-50) / var(--border-opacity));
}

.border-sky-100,
.hover-border-sky-100:hover,
.focus-border-sky-100:focus {
  --border-opacity: 1;
  border-color: rgba(var(--sky-100) / var(--border-opacity));
}

.border-sky-200,
.hover-border-sky-200:hover,
.focus-border-sky-200:focus {
  --border-opacity: 1;
  border-color: rgba(var(--sky-200) / var(--border-opacity));
}

.border-sky-300,
.hover-border-sky-300:hover,
.focus-border-sky-300:focus {
  --border-opacity: 1;
  border-color: rgba(var(--sky-300) / var(--border-opacity));
}

.border-sky-400,
.hover-border-sky-400:hover,
.focus-border-sky-400:focus {
  --border-opacity: 1;
  border-color: rgba(var(--sky-400) / var(--border-opacity));
}

.border-sky-500,
.border-sky,
.hover-border-sky-500:hover,
.focus-border-sky-500:focus,
.hover-border-sky:hover,
.focus-border-sky:hover {
  --border-opacity: 1;
  border-color: rgba(var(--sky-500) / var(--border-opacity));
}

.border-sky-600,
.hover-border-sky-600:hover,
.focus-border-sky-600:focus {
  --border-opacity: 1;
  border-color: rgba(var(--sky-600) / var(--border-opacity));
}

.border-sky-700,
.hover-border-sky-700:hover,
.focus-border-sky-700:focus {
  --border-opacity: 1;
  border-color: rgba(var(--sky-700) / var(--border-opacity));
}

.border-sky-800,
.hover-border-sky-800:hover,
.focus-border-sky-800:focus {
  --border-opacity: 1;
  border-color: rgba(var(--sky-800) / var(--border-opacity));
}

.border-sky-900,
.hover-border-sky-900:hover,
.focus-border-sky-900:focus {
  --border-opacity: 1;
  border-color: rgba(var(--sky-900) / var(--border-opacity));
}

.border-blue-50,
.hover-border-blue-50:hover,
.focus-border-blue-50:focus {
  --border-opacity: 1;
  border-color: rgba(var(--blue-50) / var(--border-opacity));
}

.border-blue-100,
.hover-border-blue-100:hover,
.focus-border-blue-100:focus {
  --border-opacity: 1;
  border-color: rgba(var(--blue-100) / var(--border-opacity));
}

.border-blue-200,
.hover-border-blue-200:hover,
.focus-border-blue-200:focus {
  --border-opacity: 1;
  border-color: rgba(var(--blue-200) / var(--border-opacity));
}

.border-blue-300,
.hover-border-blue-300:hover,
.focus-border-blue-300:focus {
  --border-opacity: 1;
  border-color: rgba(var(--blue-300) / var(--border-opacity));
}

.border-blue-400,
.hover-border-blue-400:hover,
.focus-border-blue-400:focus {
  --border-opacity: 1;
  border-color: rgba(var(--blue-400) / var(--border-opacity));
}

.border-blue-500,
.border-blue,
.border-primary {
  --border-opacity: 1;
  border-color: rgba(var(--blue-500) / var(--border-opacity));
}

.border-blue-600,
.hover-border-blue-600:hover,
.focus-border-blue-600:focus {
  --border-opacity: 1;
  border-color: rgba(var(--blue-600) / var(--border-opacity));
}

.border-blue-700,
.hover-border-blue-700:hover,
.focus-border-blue-700:focus {
  --border-opacity: 1;
  border-color: rgba(var(--blue-700) / var(--border-opacity));
}

.border-blue-800,
.hover-border-blue-800:hover,
.focus-border-blue-800:focus {
  --border-opacity: 1;
  border-color: rgba(var(--blue-800) / var(--border-opacity));
}

.border-blue-900,
.hover-border-blue-900:hover,
.focus-border-blue-900:focus {
  --border-opacity: 1;
  border-color: rgba(var(--blue-900) / var(--border-opacity));
}

.border-indigo-50,
.hover-border-indigo-50:hover,
.focus-border-indigo-50:focus {
  --border-opacity: 1;
  border-color: rgba(var(--indigo-50) / var(--border-opacity));
}

.border-indigo-100,
.hover-border-indigo-100:hover,
.focus-border-indigo-100:focus {
  --border-opacity: 1;
  border-color: rgba(var(--indigo-100) / var(--border-opacity));
}

.border-indigo-200,
.hover-border-indigo-200:hover,
.focus-border-indigo-200:focus {
  --border-opacity: 1;
  border-color: rgba(var(--indigo-200) / var(--border-opacity));
}

.border-indigo-300,
.hover-border-indigo-300:hover,
.focus-border-indigo-300:focus {
  --border-opacity: 1;
  border-color: rgba(var(--indigo-300) / var(--border-opacity));
}

.border-indigo-400,
.hover-border-indigo-400:hover,
.focus-border-indigo-400:focus {
  --border-opacity: 1;
  border-color: rgba(var(--indigo-400) / var(--border-opacity));
}

.border-indigo-500,
.border-indigo,
.hover-border-indigo-500:hover,
.focus-border-indigo-500:focus,
.hover-border-indigo:hover,
.focus-border-indigo:hover {
  --border-opacity: 1;
  border-color: rgba(var(--indigo-500) / var(--border-opacity));
}

.border-indigo-600,
.hover-border-indigo-600:hover,
.focus-border-indigo-600:focus {
  --border-opacity: 1;
  border-color: rgba(var(--indigo-600) / var(--border-opacity));
}

.border-indigo-700,
.hover-border-indigo-700:hover,
.focus-border-indigo-700:focus {
  --border-opacity: 1;
  border-color: rgba(var(--indigo-700) / var(--border-opacity));
}

.border-indigo-800,
.hover-border-indigo-800:hover,
.focus-border-indigo-800:focus {
  --border-opacity: 1;
  border-color: rgba(var(--indigo-800) / var(--border-opacity));
}

.border-indigo-900,
.hover-border-indigo-900:hover,
.focus-border-indigo-900:focus {
  --border-opacity: 1;
  border-color: rgba(var(--indigo-900) / var(--border-opacity));
}

.border-violet-50,
.hover-border-violet-50:hover,
.focus-border-violet-50:focus {
  --border-opacity: 1;
  border-color: rgba(var(--violet-50) / var(--border-opacity));
}

.border-violet-100,
.hover-border-violet-100:hover,
.focus-border-violet-100:focus {
  --border-opacity: 1;
  border-color: rgba(var(--violet-100) / var(--border-opacity));
}

.border-violet-200,
.hover-border-violet-200:hover,
.focus-border-violet-200:focus {
  --border-opacity: 1;
  border-color: rgba(var(--violet-200) / var(--border-opacity));
}

.border-violet-300,
.hover-border-violet-300:hover,
.focus-border-violet-300:focus {
  --border-opacity: 1;
  border-color: rgba(var(--violet-300) / var(--border-opacity));
}

.border-violet-400,
.hover-border-violet-400:hover,
.focus-border-violet-400:focus {
  --border-opacity: 1;
  border-color: rgba(var(--violet-400) / var(--border-opacity));
}

.border-violet-500,
.border-violet,
.hover-border-violet-500:hover,
.focus-border-violet-500:focus,
.hover-border-violet:hover,
.focus-border-violet:hover {
  --border-opacity: 1;
  border-color: rgba(var(--violet-500) / var(--border-opacity));
}

.border-violet-600,
.hover-border-violet-600:hover,
.focus-border-violet-600:focus {
  --border-opacity: 1;
  border-color: rgba(var(--violet-600) / var(--border-opacity));
}

.border-violet-700,
.hover-border-violet-700:hover,
.focus-border-violet-700:focus {
  --border-opacity: 1;
  border-color: rgba(var(--violet-700) / var(--border-opacity));
}

.border-violet-800,
.hover-border-violet-800:hover,
.focus-border-violet-800:focus {
  --border-opacity: 1;
  border-color: rgba(var(--violet-800) / var(--border-opacity));
}

.border-violet-900,
.hover-border-violet-900:hover,
.focus-border-violet-900:focus {
  --border-opacity: 1;
  border-color: rgba(var(--violet-900) / var(--border-opacity));
}

.border-purple-50,
.hover-border-purple-50:hover,
.focus-border-purple-50:focus {
  --border-opacity: 1;
  border-color: rgba(var(--purple-50) / var(--border-opacity));
}

.border-purple-100,
.hover-border-purple-100:hover,
.focus-border-purple-100:focus {
  --border-opacity: 1;
  border-color: rgba(var(--purple-100) / var(--border-opacity));
}

.border-purple-200,
.hover-border-purple-200:hover,
.focus-border-purple-200:focus {
  --border-opacity: 1;
  border-color: rgba(var(--purple-200) / var(--border-opacity));
}

.border-purple-300,
.hover-border-purple-300:hover,
.focus-border-purple-300:focus {
  --border-opacity: 1;
  border-color: rgba(var(--purple-300) / var(--border-opacity));
}

.border-purple-400,
.hover-border-purple-400:hover,
.focus-border-purple-400:focus {
  --border-opacity: 1;
  border-color: rgba(var(--purple-400) / var(--border-opacity));
}

.border-purple-500,
.border-purple,
.border-special,
.hover-border-purple-500:hover,
.focus-border-purple-500:focus,
.hover-border-purple:hover,
.focus-border-purple:hover {
  --border-opacity: 1;
  border-color: rgba(var(--purple-500) / var(--border-opacity));
}

.border-purple-600,
.hover-border-purple-600:hover,
.focus-border-purple-600:focus {
  --border-opacity: 1;
  border-color: rgba(var(--purple-600) / var(--border-opacity));
}

.border-purple-700,
.hover-border-purple-700:hover,
.focus-border-purple-700:focus {
  --border-opacity: 1;
  border-color: rgba(var(--purple-700) / var(--border-opacity));
}

.border-purple-800,
.hover-border-purple-800:hover,
.focus-border-purple-800:focus {
  --border-opacity: 1;
  border-color: rgba(var(--purple-800) / var(--border-opacity));
}

.border-purple-900,
.hover-border-purple-900:hover,
.focus-border-purple-900:focus {
  --border-opacity: 1;
  border-color: rgba(var(--purple-900) / var(--border-opacity));
}

.border-fuchsia-50,
.hover-border-fuchsia-50:hover,
.focus-border-fuchsia-50:focus {
  --border-opacity: 1;
  border-color: rgba(var(--fuchsia-50) / var(--border-opacity));
}

.border-fuchsia-100,
.hover-border-fuchsia-100:hover,
.focus-border-fuchsia-100:focus {
  --border-opacity: 1;
  border-color: rgba(var(--fuchsia-100) / var(--border-opacity));
}

.border-fuchsia-200,
.hover-border-fuchsia-200:hover,
.focus-border-fuchsia-200:focus {
  --border-opacity: 1;
  border-color: rgba(var(--fuchsia-200) / var(--border-opacity));
}

.border-fuchsia-300,
.hover-border-fuchsia-300:hover,
.focus-border-fuchsia-300:focus {
  --border-opacity: 1;
  border-color: rgba(var(--fuchsia-300) / var(--border-opacity));
}

.border-fuchsia-400,
.hover-border-fuchsia-400:hover,
.focus-border-fuchsia-400:focus {
  --border-opacity: 1;
  border-color: rgba(var(--fuchsia-400) / var(--border-opacity));
}

.border-fuchsia-500,
.border-fuchsia,
.hover-border-fuchsia-500:hover,
.focus-border-fuchsia-500:focus,
.hover-border-fuchsia:hover,
.focus-border-fuchsia:hover {
  --border-opacity: 1;
  border-color: rgba(var(--fuchsia-500) / var(--border-opacity));
}

.border-fuchsia-600,
.hover-border-fuchsia-600:hover,
.focus-border-fuchsia-600:focus {
  --border-opacity: 1;
  border-color: rgba(var(--fuchsia-600) / var(--border-opacity));
}

.border-fuchsia-700,
.hover-border-fuchsia-700:hover,
.focus-border-fuchsia-700:focus {
  --border-opacity: 1;
  border-color: rgba(var(--fuchsia-700) / var(--border-opacity));
}

.border-fuchsia-800,
.hover-border-fuchsia-800:hover,
.focus-border-fuchsia-800:focus {
  --border-opacity: 1;
  border-color: rgba(var(--fuchsia-800) / var(--border-opacity));
}

.border-fuchsia-900,
.hover-border-fuchsia-900:hover,
.focus-border-fuchsia-900:focus {
  --border-opacity: 1;
  border-color: rgba(var(--fuchsia-900) / var(--border-opacity));
}

.border-pink-50,
.hover-border-pink-50:hover,
.focus-border-pink-50:focus {
  --border-opacity: 1;
  border-color: rgba(var(--pink-50) / var(--border-opacity));
}

.border-pink-100,
.hover-border-pink-100:hover,
.focus-border-pink-100:focus {
  --border-opacity: 1;
  border-color: rgba(var(--pink-100) / var(--border-opacity));
}

.border-pink-200,
.hover-border-pink-200:hover,
.focus-border-pink-200:focus {
  --border-opacity: 1;
  border-color: rgba(var(--pink-200) / var(--border-opacity));
}

.border-pink-300,
.hover-border-pink-300:hover,
.focus-border-pink-300:focus {
  --border-opacity: 1;
  border-color: rgba(var(--pink-300) / var(--border-opacity));
}

.border-pink-400,
.hover-border-pink-400:hover,
.focus-border-pink-400:focus {
  --border-opacity: 1;
  border-color: rgba(var(--pink-400) / var(--border-opacity));
}

.border-pink-500,
.border-pink,
.border-important,
.hover-border-pink-500:hover,
.focus-border-pink-500:focus,
.hover-border-pink:hover,
.focus-border-pink:hover {
  --border-opacity: 1;
  border-color: rgba(var(--pink-500) / var(--border-opacity));
}

.border-pink-600,
.hover-border-pink-600:hover,
.focus-border-pink-600:focus {
  --border-opacity: 1;
  border-color: rgba(var(--pink-600) / var(--border-opacity));
}

.border-pink-700,
.hover-border-pink-700:hover,
.focus-border-pink-700:focus {
  --border-opacity: 1;
  border-color: rgba(var(--pink-700) / var(--border-opacity));
}

.border-pink-800,
.hover-border-pink-800:hover,
.focus-border-pink-800:focus {
  --border-opacity: 1;
  border-color: rgba(var(--pink-800) / var(--border-opacity));
}

.border-pink-900,
.hover-border-pink-900:hover,
.focus-border-pink-900:focus {
  --border-opacity: 1;
  border-color: rgba(var(--pink-900) / var(--border-opacity));
}

.border-rose-50,
.hover-border-rose-50:hover,
.focus-border-rose-50:focus {
  --border-opacity: 1;
  border-color: rgba(var(--rose-50) / var(--border-opacity));
}

.border-rose-100,
.hover-border-rose-100:hover,
.focus-border-rose-100:focus {
  --border-opacity: 1;
  border-color: rgba(var(--rose-100) / var(--border-opacity));
}

.border-rose-200,
.hover-border-rose-200:hover,
.focus-border-rose-200:focus {
  --border-opacity: 1;
  border-color: rgba(var(--rose-200) / var(--border-opacity));
}

.border-rose-300,
.hover-border-rose-300:hover,
.focus-border-rose-300:focus {
  --border-opacity: 1;
  border-color: rgba(var(--rose-300) / var(--border-opacity));
}

.border-rose-400,
.hover-border-rose-400:hover,
.focus-border-rose-400:focus {
  --border-opacity: 1;
  border-color: rgba(var(--rose-400) / var(--border-opacity));
}

.border-rose-500,
.border-rose,
.hover-border-rose-500:hover,
.focus-border-rose-500:focus,
.hover-border-rose:hover,
.focus-border-rose:hover {
  --border-opacity: 1;
  border-color: rgba(var(--rose-500) / var(--border-opacity));
}

.border-rose-600,
.hover-border-rose-600:hover,
.focus-border-rose-600:focus {
  --border-opacity: 1;
  border-color: rgba(var(--rose-600) / var(--border-opacity));
}

.border-rose-700,
.hover-border-rose-700:hover,
.focus-border-rose-700:focus {
  --border-opacity: 1;
  border-color: rgba(var(--rose-700) / var(--border-opacity));
}

.border-rose-800,
.hover-border-rose-800:hover,
.focus-border-rose-800:focus {
  --border-opacity: 1;
  border-color: rgba(var(--rose-800) / var(--border-opacity));
}

.border-rose-900,
.hover-border-rose-900:hover,
.focus-border-rose-900:focus {
  --border-opacity: 1;
  border-color: rgba(var(--rose-900) / var(--border-opacity));
}

.border-slate-50,
.hover-border-slate-50:hover,
.focus-border-slate-50:focus {
  --border-opacity: 1;
  border-color: rgba(var(--slate-50) / var(--border-opacity));
}

.border-slate-100,
.hover-border-slate-100:hover,
.focus-border-slate-100:focus {
  --border-opacity: 1;
  border-color: rgba(var(--slate-100) / var(--border-opacity));
}

.border-slate-200,
.hover-border-slate-200:hover,
.focus-border-slate-200:focus {
  --border-opacity: 1;
  border-color: rgba(var(--slate-200) / var(--border-opacity));
}

.border-slate-300,
.hover-border-slate-300:hover,
.focus-border-slate-300:focus {
  --border-opacity: 1;
  border-color: rgba(var(--slate-300) / var(--border-opacity));
}

.border-slate-400,
.hover-border-slate-400:hover,
.focus-border-slate-400:focus {
  --border-opacity: 1;
  border-color: rgba(var(--slate-400) / var(--border-opacity));
}

.border-slate-500,
.border-slate,
.hover-border-slate-500:hover,
.focus-border-slate-500:focus,
.hover-border-slate:hover,
.focus-border-slate:hover {
  --border-opacity: 1;
  border-color: rgba(var(--slate-500) / var(--border-opacity));
}

.border-slate-600,
.hover-border-slate-600:hover,
.focus-border-slate-600:focus {
  --border-opacity: 1;
  border-color: rgba(var(--slate-600) / var(--border-opacity));
}

.border-slate-700,
.hover-border-slate-700:hover,
.focus-border-slate-700:focus {
  --border-opacity: 1;
  border-color: rgba(var(--slate-700) / var(--border-opacity));
}

.border-slate-800,
.hover-border-slate-800:hover,
.focus-border-slate-800:focus {
  --border-opacity: 1;
  border-color: rgba(var(--slate-800) / var(--border-opacity));
}

.border-slate-900,
.hover-border-slate-900:hover,
.focus-border-slate-900:focus {
  --border-opacity: 1;
  border-color: rgba(var(--slate-900) / var(--border-opacity));
}

.border-gray-50,
.hover-border-gray-50:hover,
.focus-border-gray-50:focus {
  --border-opacity: 1;
  border-color: rgba(var(--gray-50) / var(--border-opacity));
}

.border-gray-100,
.border-light,
.hover-border-gray-100:hover,
.focus-border-gray-100:focus {
  --border-opacity: 1;
  border-color: rgba(var(--gray-100) / var(--border-opacity));
}

.border-gray-200,
.hover-border-gray-200:hover,
.focus-border-gray-200:focus {
  --border-opacity: 1;
  border-color: rgba(var(--gray-200) / var(--border-opacity));
}

.border-gray-300,
.border-strong,
.border-info,
.hover-border-gray-300:hover,
.focus-border-gray-300:focus {
  --border-opacity: 1;
  border-color: rgba(var(--gray-300) / var(--border-opacity));
}

.border-gray-400,
.hover-border-gray-400:hover,
.focus-border-gray-400:focus {
  --border-opacity: 1;
  border-color: rgba(var(--gray-400) / var(--border-opacity));
}

.border-gray-500,
.hover-border-gray-500:hover,
.focus-border-gray-500:focus,
.hover-border-gray:hover,
.focus-border-gray:hover {
  --border-opacity: 1;
  border-color: rgba(var(--gray-500) / var(--border-opacity));
}

.border-gray-600,
.hover-border-gray-600:hover,
.focus-border-gray-600:focus {
  --border-opacity: 1;
  border-color: rgba(var(--gray-600) / var(--border-opacity));
}

.border-gray-700,
.hover-border-gray-700:hover,
.focus-border-gray-700:focus {
  --border-opacity: 1;
  border-color: rgba(var(--gray-700) / var(--border-opacity));
}

.border-gray-800,
.hover-border-gray-800:hover,
.focus-border-gray-800:focus {
  --border-opacity: 1;
  border-color: rgba(var(--gray-800) / var(--border-opacity));
}

.border-gray-900,
.hover-border-gray-900:hover,
.focus-border-gray-900:focus {
  --border-opacity: 1;
  border-color: rgba(var(--gray-900) / var(--border-opacity));
}

.border-zinc-50,
.hover-border-zinc-50:hover,
.focus-border-zinc-50:focus {
  --border-opacity: 1;
  border-color: rgba(var(--zinc-50) / var(--border-opacity));
}

.border-zinc-100,
.hover-border-zinc-100:hover,
.focus-border-zinc-100:focus {
  --border-opacity: 1;
  border-color: rgba(var(--zinc-100) / var(--border-opacity));
}

.border-zinc-200,
.hover-border-zinc-200:hover,
.focus-border-zinc-200:focus {
  --border-opacity: 1;
  border-color: rgba(var(--zinc-200) / var(--border-opacity));
}

.border-zinc-300,
.hover-border-zinc-300:hover,
.focus-border-zinc-300:focus {
  --border-opacity: 1;
  border-color: rgba(var(--zinc-300) / var(--border-opacity));
}

.border-zinc-400,
.hover-border-zinc-400:hover,
.focus-border-zinc-400:focus {
  --border-opacity: 1;
  border-color: rgba(var(--zinc-400) / var(--border-opacity));
}

.border-zinc-500,
.border-zinc,
.hover-border-zinc-500:hover,
.focus-border-zinc-500:focus,
.hover-border-zinc:hover,
.focus-border-zinc:hover {
  --border-opacity: 1;
  border-color: rgba(var(--zinc-500) / var(--border-opacity));
}

.border-zinc-600,
.hover-border-zinc-600:hover,
.focus-border-zinc-600:focus {
  --border-opacity: 1;
  border-color: rgba(var(--zinc-600) / var(--border-opacity));
}

.border-zinc-700,
.hover-border-zinc-700:hover,
.focus-border-zinc-700:focus {
  --border-opacity: 1;
  border-color: rgba(var(--zinc-700) / var(--border-opacity));
}

.border-zinc-800,
.hover-border-zinc-800:hover,
.focus-border-zinc-800:focus {
  --border-opacity: 1;
  border-color: rgba(var(--zinc-800) / var(--border-opacity));
}

.border-zinc-900,
.hover-border-zinc-900:hover,
.focus-border-zinc-900:focus {
  --border-opacity: 1;
  border-color: rgba(var(--zinc-900) / var(--border-opacity));
}

.border-black,
.hover-border-black:hover,
.focus-border-black:focus {
  --border-opacity: 1;
  border-color: rgba(var(--black) / var(--border-opacity));
}

.border-white,
.hover-border-white:hover,
.focus-border-white:focus {
  --border-opacity: 1;
  border-color: rgba(var(--white) / var(--border-opacity));
}

/* 透明度类 */
.bg-opacity-0 {
  --bg-opacity: 0 !important;
}

.bg-opacity-5 {
  --bg-opacity: 0.05 !important;
}

.bg-opacity-10 {
  --bg-opacity: 0.1 !important;
}

.bg-opacity-20 {
  --bg-opacity: 0.2 !important;
}

.bg-opacity-25 {
  --bg-opacity: 0.25 !important;
}

.bg-opacity-30 {
  --bg-opacity: 0.3 !important;
}

.bg-opacity-40 {
  --bg-opacity: 0.4 !important;
}

.bg-opacity-50 {
  --bg-opacity: 0.5 !important;
}

.bg-opacity-60 {
  --bg-opacity: 0.6 !important;
}

.bg-opacity-70 {
  --bg-opacity: 0.7 !important;
}

.bg-opacity-75 {
  --bg-opacity: 0.75 !important;
}

.bg-opacity-80 {
  --bg-opacity: 0.8 !important;
}

.bg-opacity-90 {
  --bg-opacity: 0.9 !important;
}

.bg-opacity-95 {
  --bg-opacity: 0.95 !important;
}

.bg-opacity-100 {
  --bg-opacity: 1 !important;
}

.text-opacity-0 {
  --text-opacity: 0 !important;
}

.text-opacity-5 {
  --text-opacity: 0.05 !important;
}

.text-opacity-10 {
  --text-opacity: 0.1 !important;
}

.text-opacity-20 {
  --text-opacity: 0.2 !important;
}

.text-opacity-25 {
  --text-opacity: 0.25 !important;
}

.text-opacity-30 {
  --text-opacity: 0.3 !important;
}

.text-opacity-40 {
  --text-opacity: 0.4 !important;
}

.text-opacity-50 {
  --text-opacity: 0.5 !important;
}

.text-opacity-60 {
  --text-opacity: 0.6 !important;
}

.text-opacity-70 {
  --text-opacity: 0.7 !important;
}

.text-opacity-75 {
  --text-opacity: 0.75 !important;
}

.text-opacity-80 {
  --text-opacity: 0.8 !important;
}

.text-opacity-90 {
  --text-opacity: 0.9 !important;
}

.text-opacity-95 {
  --text-opacity: 0.95 !important;
}

.text-opacity-100 {
  --text-opacity: 1 !important;
}

.border-opacity-0 {
  --border-opacity: 0 !important;
}

.border-opacity-5 {
  --border-opacity: 0.05 !important;
}

.border-opacity-10 {
  --border-opacity: 0.1 !important;
}

.border-opacity-20 {
  --border-opacity: 0.2 !important;
}

.border-opacity-25 {
  --border-opacity: 0.25 !important;
}

.border-opacity-30 {
  --border-opacity: 0.3 !important;
}

.border-opacity-40 {
  --border-opacity: 0.4 !important;
}

.border-opacity-50 {
  --border-opacity: 0.5 !important;
}

.border-opacity-60 {
  --border-opacity: 0.6 !important;
}

.border-opacity-70 {
  --border-opacity: 0.7 !important;
}

.border-opacity-75 {
  --border-opacity: 0.75 !important;
}

.border-opacity-80 {
  --border-opacity: 0.8 !important;
}

.border-opacity-90 {
  --border-opacity: 0.9 !important;
}

.border-opacity-95 {
  --border-opacity: 0.95 !important;
}

.border-opacity-100 {
  --border-opacity: 1 !important;
}

/* 环透明度 */
.ring-opacity-0 {
  --ring-opacity: 0 !important;
}

.ring-opacity-5 {
  --ring-opacity: 0.05 !important;
}

.ring-opacity-10 {
  --ring-opacity: 0.1 !important;
}

.ring-opacity-20 {
  --ring-opacity: 0.2 !important;
}

.ring-opacity-25 {
  --ring-opacity: 0.25 !important;
}

.ring-opacity-30 {
  --ring-opacity: 0.3 !important;
}

.ring-opacity-40 {
  --ring-opacity: 0.4 !important;
}

.ring-opacity-50 {
  --ring-opacity: 0.5 !important;
}

.ring-opacity-60 {
  --ring-opacity: 0.6 !important;
}

.ring-opacity-70 {
  --ring-opacity: 0.7 !important;
}

.ring-opacity-75 {
  --ring-opacity: 0.75 !important;
}

.ring-opacity-80 {
  --ring-opacity: 0.8 !important;
}

.ring-opacity-90 {
  --ring-opacity: 0.9 !important;
}

.ring-opacity-95 {
  --ring-opacity: 0.95 !important;
}

.ring-opacity-100 {
  --ring-opacity: 1 !important;
}

/* 环偏移透明度 */
.ring-offset-opacity-0 {
  --ring-offset-opacity: 0 !important;
}

.ring-offset-opacity-5 {
  --ring-offset-opacity: 0.05 !important;
}

.ring-offset-opacity-10 {
  --ring-offset-opacity: 0.1 !important;
}

.ring-offset-opacity-20 {
  --ring-offset-opacity: 0.2 !important;
}

.ring-offset-opacity-25 {
  --ring-offset-opacity: 0.25 !important;
}

.ring-offset-opacity-30 {
  --ring-offset-opacity: 0.3 !important;
}

.ring-offset-opacity-40 {
  --ring-offset-opacity: 0.4 !important;
}

.ring-offset-opacity-50 {
  --ring-offset-opacity: 0.5 !important;
}

.ring-offset-opacity-60 {
  --ring-offset-opacity: 0.6 !important;
}

.ring-offset-opacity-70 {
  --ring-offset-opacity: 0.7 !important;
}

.ring-offset-opacity-75 {
  --ring-offset-opacity: 0.75 !important;
}

.ring-offset-opacity-80 {
  --ring-offset-opacity: 0.8 !important;
}

.ring-offset-opacity-90 {
  --ring-offset-opacity: 0.9 !important;
}

.ring-offset-opacity-95 {
  --ring-offset-opacity: 0.95 !important;
}

.ring-offset-opacity-100 {
  --ring-offset-opacity: 1 !important;
}

/*透明度*/
.opacity-0 {
  opacity: 0;
}

.opacity-5 {
  opacity: 0.05;
}

.opacity-10 {
  opacity: 0.1;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.opacity-95 {
  opacity: 0.95;
}

.opacity-100 {
  opacity: 1;
}

/*Tailwind渐变色*/
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--gradient-stops));
}

.bg-gradient-to-tr {
  background-image: linear-gradient(to top right, var(--gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--gradient-stops));
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--gradient-stops));
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--gradient-stops));
}

.bg-gradient-to-bl {
  background-image: linear-gradient(to bottom left, var(--gradient-stops));
}

.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--gradient-stops));
}

.bg-gradient-to-tl {
  background-image: linear-gradient(to top left, var(--gradient-stops));
}

.border-gradient-to-t {
  border-image-source: linear-gradient(to top, var(--gradient-stops));
  border-image-slice: 1;
}

.border-gradient-to-tr {
  border-image-source: linear-gradient(to top right, var(--gradient-stops));
  border-image-slice: 1;
}

.border-gradient-to-r {
  border-image-source: linear-gradient(to right, var(--gradient-stops));
  border-image-slice: 1;
}

.border-gradient-to-br {
  border-image-source: linear-gradient(to bottom right, var(--gradient-stops));
  border-image-slice: 1;
}

.border-gradient-to-b {
  border-image-source: linear-gradient(to bottom, var(--gradient-stops));
  border-image-slice: 1;
}

.border-gradient-to-bl {
  border-image-source: linear-gradient(to bottom left, var(--gradient-stops));
  border-image-slice: 1;
}

.border-gradient-to-l {
  border-image-source: linear-gradient(to left, var(--gradient-stops));
  border-image-slice: 1;
}

.border-gradient-to-tl {
  border-image-source: linear-gradient(to top left, var(--gradient-stops));
  border-image-slice: 1;
}

.from-slate-50 {
  --gradient-from: #f8fafc;
  --gradient-to: rgb(248 250 252 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-slate-100 {
  --gradient-from: #f1f5f9;
  --gradient-to: rgb(241 245 249 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-slate-200 {
  --gradient-from: #e2e8f0;
  --gradient-to: rgb(226 232 240 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-slate-300 {
  --gradient-from: #cbd5e1;
  --gradient-to: rgb(203 213 225 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-slate-400 {
  --gradient-from: #94a3b8;
  --gradient-to: rgb(148 163 184 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-slate-500 {
  --gradient-from: #64748b;
  --gradient-to: rgb(100 116 139 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-slate-600 {
  --gradient-from: #475569;
  --gradient-to: rgb(71 85 105 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-slate-700 {
  --gradient-from: #334155;
  --gradient-to: rgb(51 65 85 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-slate-800 {
  --gradient-from: #1e293b;
  --gradient-to: rgb(30 41 59 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-slate-900 {
  --gradient-from: #0f172a;
  --gradient-to: rgb(15 23 42 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-gray-50 {
  --gradient-from: #f9fafb;
  --gradient-to: rgb(249 250 251 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-gray-100 {
  --gradient-from: #f3f4f6;
  --gradient-to: rgb(243 244 246 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-gray-200 {
  --gradient-from: #e5e7eb;
  --gradient-to: rgb(229 231 235 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-gray-300 {
  --gradient-from: #d1d5db;
  --gradient-to: rgb(209 213 219 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-gray-400 {
  --gradient-from: #9ca3af;
  --gradient-to: rgb(156 163 175 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-gray-500 {
  --gradient-from: #6b7280;
  --gradient-to: rgb(107 114 128 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-gray-600 {
  --gradient-from: #4b5563;
  --gradient-to: rgb(75 85 99 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-gray-700 {
  --gradient-from: #374151;
  --gradient-to: rgb(55 65 81 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-gray-800 {
  --gradient-from: #1f2937;
  --gradient-to: rgb(31 41 55 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-gray-900 {
  --gradient-from: #111827;
  --gradient-to: rgb(17 24 39 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-zinc-50 {
  --gradient-from: #fafafa;
  --gradient-to: rgb(250 250 250 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-zinc-100 {
  --gradient-from: #f4f4f5;
  --gradient-to: rgb(244 244 245 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-zinc-200 {
  --gradient-from: #e4e4e7;
  --gradient-to: rgb(228 228 231 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-zinc-300 {
  --gradient-from: #d4d4d8;
  --gradient-to: rgb(212 212 216 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-zinc-400 {
  --gradient-from: #a1a1aa;
  --gradient-to: rgb(161 161 170 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-zinc-500 {
  --gradient-from: #71717a;
  --gradient-to: rgb(113 113 122 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-zinc-600 {
  --gradient-from: #52525b;
  --gradient-to: rgb(82 82 91 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-zinc-700 {
  --gradient-from: #3f3f46;
  --gradient-to: rgb(63 63 70 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-zinc-800 {
  --gradient-from: #27272a;
  --gradient-to: rgb(39 39 42 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-zinc-900 {
  --gradient-from: #18181b;
  --gradient-to: rgb(24 24 27 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-neutral-50 {
  --gradient-from: #fafafa;
  --gradient-to: rgb(250 250 250 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-neutral-100 {
  --gradient-from: #f5f5f5;
  --gradient-to: rgb(245 245 245 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-neutral-200 {
  --gradient-from: #e5e5e5;
  --gradient-to: rgb(229 229 229 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-neutral-300 {
  --gradient-from: #d4d4d4;
  --gradient-to: rgb(212 212 212 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-neutral-400 {
  --gradient-from: #a3a3a3;
  --gradient-to: rgb(163 163 163 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-neutral-500 {
  --gradient-from: #737373;
  --gradient-to: rgb(115 115 115 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-neutral-600 {
  --gradient-from: #525252;
  --gradient-to: rgb(82 82 82 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-neutral-700 {
  --gradient-from: #404040;
  --gradient-to: rgb(64 64 64 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-neutral-800 {
  --gradient-from: #262626;
  --gradient-to: rgb(38 38 38 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-neutral-900 {
  --gradient-from: #171717;
  --gradient-to: rgb(23 23 23 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-stone-50 {
  --gradient-from: #fafaf9;
  --gradient-to: rgb(250 250 249 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-stone-100 {
  --gradient-from: #f5f5f4;
  --gradient-to: rgb(245 245 244 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-stone-200 {
  --gradient-from: #e7e5e4;
  --gradient-to: rgb(231 229 228 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-stone-300 {
  --gradient-from: #d6d3d1;
  --gradient-to: rgb(214 211 209 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-stone-400 {
  --gradient-from: #a8a29e;
  --gradient-to: rgb(168 162 158 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-stone-500 {
  --gradient-from: #78716c;
  --gradient-to: rgb(120 113 108 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-stone-600 {
  --gradient-from: #57534e;
  --gradient-to: rgb(87 83 78 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-stone-700 {
  --gradient-from: #44403c;
  --gradient-to: rgb(68 64 60 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-stone-800 {
  --gradient-from: #292524;
  --gradient-to: rgb(41 37 36 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-stone-900 {
  --gradient-from: #1c1917;
  --gradient-to: rgb(28 25 23 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-red-50 {
  --gradient-from: #fef2f2;
  --gradient-to: rgb(254 242 242 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-red-100 {
  --gradient-from: #fee2e2;
  --gradient-to: rgb(254 226 226 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-red-200 {
  --gradient-from: #fecaca;
  --gradient-to: rgb(254 202 202 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-red-300 {
  --gradient-from: #fca5a5;
  --gradient-to: rgb(252 165 165 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-red-400 {
  --gradient-from: #f87171;
  --gradient-to: rgb(248 113 113 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-red-500 {
  --gradient-from: #ef4444;
  --gradient-to: rgb(239 68 68 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-red-600 {
  --gradient-from: #dc2626;
  --gradient-to: rgb(220 38 38 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-red-700 {
  --gradient-from: #b91c1c;
  --gradient-to: rgb(185 28 28 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-red-800 {
  --gradient-from: #991b1b;
  --gradient-to: rgb(153 27 27 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-red-900 {
  --gradient-from: #7f1d1d;
  --gradient-to: rgb(127 29 29 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-orange-50 {
  --gradient-from: #fff7ed;
  --gradient-to: rgb(255 247 237 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-orange-100 {
  --gradient-from: #ffedd5;
  --gradient-to: rgb(255 237 213 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-orange-200 {
  --gradient-from: #fed7aa;
  --gradient-to: rgb(254 215 170 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-orange-300 {
  --gradient-from: #fdba74;
  --gradient-to: rgb(253 186 116 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-orange-400 {
  --gradient-from: #fb923c;
  --gradient-to: rgb(251 146 60 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-orange-500 {
  --gradient-from: #f97316;
  --gradient-to: rgb(249 115 22 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-orange-600 {
  --gradient-from: #ea580c;
  --gradient-to: rgb(234 88 12 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-orange-700 {
  --gradient-from: #c2410c;
  --gradient-to: rgb(194 65 12 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-orange-800 {
  --gradient-from: #9a3412;
  --gradient-to: rgb(154 52 18 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-orange-900 {
  --gradient-from: #7c2d12;
  --gradient-to: rgb(124 45 18 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-amber-50 {
  --gradient-from: #fffbeb;
  --gradient-to: rgb(255 251 235 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-amber-100 {
  --gradient-from: #fef3c7;
  --gradient-to: rgb(254 243 199 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-amber-200 {
  --gradient-from: #fde68a;
  --gradient-to: rgb(253 230 138 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-amber-300 {
  --gradient-from: #fcd34d;
  --gradient-to: rgb(252 211 77 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-amber-400 {
  --gradient-from: #fbbf24;
  --gradient-to: rgb(251 191 36 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-amber-500 {
  --gradient-from: #f59e0b;
  --gradient-to: rgb(245 158 11 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-amber-600 {
  --gradient-from: #d97706;
  --gradient-to: rgb(217 119 6 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-amber-700 {
  --gradient-from: #b45309;
  --gradient-to: rgb(180 83 9 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-amber-800 {
  --gradient-from: #92400e;
  --gradient-to: rgb(146 64 14 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-amber-900 {
  --gradient-from: #78350f;
  --gradient-to: rgb(120 53 15 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-yellow-50 {
  --gradient-from: #fefce8;
  --gradient-to: rgb(254 252 232 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-yellow-100 {
  --gradient-from: #fef9c3;
  --gradient-to: rgb(254 249 195 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-yellow-200 {
  --gradient-from: #fef08a;
  --gradient-to: rgb(254 240 138 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-yellow-300 {
  --gradient-from: #fde047;
  --gradient-to: rgb(253 224 71 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-yellow-400 {
  --gradient-from: #facc15;
  --gradient-to: rgb(250 204 21 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-yellow-500 {
  --gradient-from: #eab308;
  --gradient-to: rgb(234 179 8 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-yellow-600 {
  --gradient-from: #ca8a04;
  --gradient-to: rgb(202 138 4 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-yellow-700 {
  --gradient-from: #a16207;
  --gradient-to: rgb(161 98 7 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-yellow-800 {
  --gradient-from: #854d0e;
  --gradient-to: rgb(133 77 14 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-yellow-900 {
  --gradient-from: #713f12;
  --gradient-to: rgb(113 63 18 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-lime-50 {
  --gradient-from: #f7fee7;
  --gradient-to: rgb(247 254 231 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-lime-100 {
  --gradient-from: #ecfccb;
  --gradient-to: rgb(236 252 203 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-lime-200 {
  --gradient-from: #d9f99d;
  --gradient-to: rgb(217 249 157 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-lime-300 {
  --gradient-from: #bef264;
  --gradient-to: rgb(190 242 100 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-lime-400 {
  --gradient-from: #a3e635;
  --gradient-to: rgb(163 230 53 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-lime-500 {
  --gradient-from: #84cc16;
  --gradient-to: rgb(132 204 22 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-lime-600 {
  --gradient-from: #65a30d;
  --gradient-to: rgb(101 163 13 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-lime-700 {
  --gradient-from: #4d7c0f;
  --gradient-to: rgb(77 124 15 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-lime-800 {
  --gradient-from: #3f6212;
  --gradient-to: rgb(63 98 18 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-lime-900 {
  --gradient-from: #365314;
  --gradient-to: rgb(54 83 20 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-green-50 {
  --gradient-from: #f0fdf4;
  --gradient-to: rgb(240 253 244 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-green-100 {
  --gradient-from: #dcfce7;
  --gradient-to: rgb(220 252 231 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-green-200 {
  --gradient-from: #bbf7d0;
  --gradient-to: rgb(187 247 208 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-green-300 {
  --gradient-from: #86efac;
  --gradient-to: rgb(134 239 172 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-green-400 {
  --gradient-from: #4ade80;
  --gradient-to: rgb(74 222 128 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-green-500 {
  --gradient-from: #22c55e;
  --gradient-to: rgb(34 197 94 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-green-600 {
  --gradient-from: #16a34a;
  --gradient-to: rgb(22 163 74 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-green-700 {
  --gradient-from: #15803d;
  --gradient-to: rgb(21 128 61 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-green-800 {
  --gradient-from: #166534;
  --gradient-to: rgb(22 101 52 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-green-900 {
  --gradient-from: #14532d;
  --gradient-to: rgb(20 83 45 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-emerald-50 {
  --gradient-from: #ecfdf5;
  --gradient-to: rgb(236 253 245 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-emerald-100 {
  --gradient-from: #d1fae5;
  --gradient-to: rgb(209 250 229 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-emerald-200 {
  --gradient-from: #a7f3d0;
  --gradient-to: rgb(167 243 208 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-emerald-300 {
  --gradient-from: #6ee7b7;
  --gradient-to: rgb(110 231 183 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-emerald-400 {
  --gradient-from: #34d399;
  --gradient-to: rgb(52 211 153 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-emerald-500 {
  --gradient-from: #10b981;
  --gradient-to: rgb(16 185 129 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-emerald-600 {
  --gradient-from: #059669;
  --gradient-to: rgb(5 150 105 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-emerald-700 {
  --gradient-from: #047857;
  --gradient-to: rgb(4 120 87 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-emerald-800 {
  --gradient-from: #065f46;
  --gradient-to: rgb(6 95 70 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-emerald-900 {
  --gradient-from: #064e3b;
  --gradient-to: rgb(6 78 59 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-teal-50 {
  --gradient-from: #f0fdfa;
  --gradient-to: rgb(240 253 250 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-teal-100 {
  --gradient-from: #ccfbf1;
  --gradient-to: rgb(204 251 241 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-teal-200 {
  --gradient-from: #99f6e4;
  --gradient-to: rgb(153 246 228 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-teal-300 {
  --gradient-from: #5eead4;
  --gradient-to: rgb(94 234 212 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-teal-400 {
  --gradient-from: #2dd4bf;
  --gradient-to: rgb(45 212 191 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-teal-500 {
  --gradient-from: #14b8a6;
  --gradient-to: rgb(20 184 166 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-teal-600 {
  --gradient-from: #0d9488;
  --gradient-to: rgb(13 148 136 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-teal-700 {
  --gradient-from: #0f766e;
  --gradient-to: rgb(15 118 110 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-teal-800 {
  --gradient-from: #115e59;
  --gradient-to: rgb(17 94 89 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-teal-900 {
  --gradient-from: #134e4a;
  --gradient-to: rgb(19 78 74 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-cyan-50 {
  --gradient-from: #ecfeff;
  --gradient-to: rgb(236 254 255 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-cyan-100 {
  --gradient-from: #cffafe;
  --gradient-to: rgb(207 250 254 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-cyan-200 {
  --gradient-from: #a5f3fc;
  --gradient-to: rgb(165 243 252 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-cyan-300 {
  --gradient-from: #67e8f9;
  --gradient-to: rgb(103 232 249 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-cyan-400 {
  --gradient-from: #22d3ee;
  --gradient-to: rgb(34 211 238 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-cyan-500 {
  --gradient-from: #06b6d4;
  --gradient-to: rgb(6 182 212 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-cyan-600 {
  --gradient-from: #0891b2;
  --gradient-to: rgb(8 145 178 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-cyan-700 {
  --gradient-from: #0e7490;
  --gradient-to: rgb(14 116 144 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-cyan-800 {
  --gradient-from: #155e75;
  --gradient-to: rgb(21 94 117 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-cyan-900 {
  --gradient-from: #164e63;
  --gradient-to: rgb(22 78 99 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-sky-50 {
  --gradient-from: #f0f9ff;
  --gradient-to: rgb(240 249 255 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-sky-100 {
  --gradient-from: #e0f2fe;
  --gradient-to: rgb(224 242 254 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-sky-200 {
  --gradient-from: #bae6fd;
  --gradient-to: rgb(186 230 253 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-sky-300 {
  --gradient-from: #7dd3fc;
  --gradient-to: rgb(125 211 252 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-sky-400 {
  --gradient-from: #38bdf8;
  --gradient-to: rgb(56 189 248 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-sky-500 {
  --gradient-from: #0ea5e9;
  --gradient-to: rgb(14 165 233 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-sky-600 {
  --gradient-from: #0284c7;
  --gradient-to: rgb(2 132 199 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-sky-700 {
  --gradient-from: #0369a1;
  --gradient-to: rgb(3 105 161 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-sky-800 {
  --gradient-from: #075985;
  --gradient-to: rgb(7 89 133 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-sky-900 {
  --gradient-from: #0c4a6e;
  --gradient-to: rgb(12 74 110 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-blue-50 {
  --gradient-from: #eff6ff;
  --gradient-to: rgb(239 246 255 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-blue-100 {
  --gradient-from: #dbeafe;
  --gradient-to: rgb(219 234 254 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-blue-200 {
  --gradient-from: #bfdbfe;
  --gradient-to: rgb(191 219 254 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-blue-300 {
  --gradient-from: #93c5fd;
  --gradient-to: rgb(147 197 253 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-blue-400 {
  --gradient-from: #60a5fa;
  --gradient-to: rgb(96 165 250 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-blue-500 {
  --gradient-from: #3b82f6;
  --gradient-to: rgb(59 130 246 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-blue-600 {
  --gradient-from: #2563eb;
  --gradient-to: rgb(37 99 235 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-blue-700 {
  --gradient-from: #1d4ed8;
  --gradient-to: rgb(29 78 216 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-blue-800 {
  --gradient-from: #1e40af;
  --gradient-to: rgb(30 64 175 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-blue-900 {
  --gradient-from: #1e3a8a;
  --gradient-to: rgb(30 58 138 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-indigo-50 {
  --gradient-from: #eef2ff;
  --gradient-to: rgb(238 242 255 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-indigo-100 {
  --gradient-from: #e0e7ff;
  --gradient-to: rgb(224 231 255 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-indigo-200 {
  --gradient-from: #c7d2fe;
  --gradient-to: rgb(199 210 254 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-indigo-300 {
  --gradient-from: #a5b4fc;
  --gradient-to: rgb(165 180 252 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-indigo-400 {
  --gradient-from: #818cf8;
  --gradient-to: rgb(129 140 248 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-indigo-500 {
  --gradient-from: #6366f1;
  --gradient-to: rgb(99 102 241 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-indigo-600 {
  --gradient-from: #4f46e5;
  --gradient-to: rgb(79 70 229 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-indigo-700 {
  --gradient-from: #4338ca;
  --gradient-to: rgb(67 56 202 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-indigo-800 {
  --gradient-from: #3730a3;
  --gradient-to: rgb(55 48 163 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-indigo-900 {
  --gradient-from: #312e81;
  --gradient-to: rgb(49 46 129 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-violet-50 {
  --gradient-from: #f5f3ff;
  --gradient-to: rgb(245 243 255 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-violet-100 {
  --gradient-from: #ede9fe;
  --gradient-to: rgb(237 233 254 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-violet-200 {
  --gradient-from: #ddd6fe;
  --gradient-to: rgb(221 214 254 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-violet-300 {
  --gradient-from: #c4b5fd;
  --gradient-to: rgb(196 181 253 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-violet-400 {
  --gradient-from: #a78bfa;
  --gradient-to: rgb(167 139 250 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-violet-500 {
  --gradient-from: #8b5cf6;
  --gradient-to: rgb(139 92 246 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-violet-600 {
  --gradient-from: #7c3aed;
  --gradient-to: rgb(124 58 237 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-violet-700 {
  --gradient-from: #6d28d9;
  --gradient-to: rgb(109 40 217 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-violet-800 {
  --gradient-from: #5b21b6;
  --gradient-to: rgb(91 33 182 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-violet-900 {
  --gradient-from: #4c1d95;
  --gradient-to: rgb(76 29 149 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-purple-50 {
  --gradient-from: #faf5ff;
  --gradient-to: rgb(250 245 255 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-purple-100 {
  --gradient-from: #f3e8ff;
  --gradient-to: rgb(243 232 255 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-purple-200 {
  --gradient-from: #e9d5ff;
  --gradient-to: rgb(233 213 255 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-purple-300 {
  --gradient-from: #d8b4fe;
  --gradient-to: rgb(216 180 254 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-purple-400 {
  --gradient-from: #c084fc;
  --gradient-to: rgb(192 132 252 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-purple-500 {
  --gradient-from: #a855f7;
  --gradient-to: rgb(168 85 247 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-purple-600 {
  --gradient-from: #9333ea;
  --gradient-to: rgb(147 51 234 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-purple-700 {
  --gradient-from: #7e22ce;
  --gradient-to: rgb(126 34 206 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-purple-800 {
  --gradient-from: #6b21a8;
  --gradient-to: rgb(107 33 168 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-purple-900 {
  --gradient-from: #581c87;
  --gradient-to: rgb(88 28 135 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-fuchsia-50 {
  --gradient-from: #fdf4ff;
  --gradient-to: rgb(253 244 255 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-fuchsia-100 {
  --gradient-from: #fae8ff;
  --gradient-to: rgb(250 232 255 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-fuchsia-200 {
  --gradient-from: #f5d0fe;
  --gradient-to: rgb(245 208 254 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-fuchsia-300 {
  --gradient-from: #f0abfc;
  --gradient-to: rgb(240 171 252 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-fuchsia-400 {
  --gradient-from: #e879f9;
  --gradient-to: rgb(232 121 249 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-fuchsia-500 {
  --gradient-from: #d946ef;
  --gradient-to: rgb(217 70 239 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-fuchsia-600 {
  --gradient-from: #c026d3;
  --gradient-to: rgb(192 38 211 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-fuchsia-700 {
  --gradient-from: #a21caf;
  --gradient-to: rgb(162 28 175 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-fuchsia-800 {
  --gradient-from: #86198f;
  --gradient-to: rgb(134 25 143 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-fuchsia-900 {
  --gradient-from: #701a75;
  --gradient-to: rgb(112 26 117 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-pink-50 {
  --gradient-from: #fdf2f8;
  --gradient-to: rgb(253 242 248 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-pink-100 {
  --gradient-from: #fce7f3;
  --gradient-to: rgb(252 231 243 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-pink-200 {
  --gradient-from: #fbcfe8;
  --gradient-to: rgb(251 207 232 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-pink-300 {
  --gradient-from: #f9a8d4;
  --gradient-to: rgb(249 168 212 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-pink-400 {
  --gradient-from: #f472b6;
  --gradient-to: rgb(244 114 182 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-pink-500 {
  --gradient-from: #ec4899;
  --gradient-to: rgb(236 72 153 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-pink-600 {
  --gradient-from: #db2777;
  --gradient-to: rgb(219 39 119 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-pink-700 {
  --gradient-from: #be185d;
  --gradient-to: rgb(190 24 93 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-pink-800 {
  --gradient-from: #9d174d;
  --gradient-to: rgb(157 23 77 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-pink-900 {
  --gradient-from: #831843;
  --gradient-to: rgb(131 24 67 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-rose-50 {
  --gradient-from: #fff1f2;
  --gradient-to: rgb(255 241 242 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-rose-100 {
  --gradient-from: #ffe4e6;
  --gradient-to: rgb(255 228 230 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-rose-200 {
  --gradient-from: #fecdd3;
  --gradient-to: rgb(254 205 211 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-rose-300 {
  --gradient-from: #fda4af;
  --gradient-to: rgb(253 164 175 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-rose-400 {
  --gradient-from: #fb7185;
  --gradient-to: rgb(251 113 133 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-rose-500 {
  --gradient-from: #f43f5e;
  --gradient-to: rgb(244 63 94 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-rose-600 {
  --gradient-from: #e11d48;
  --gradient-to: rgb(225 29 72 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-rose-700 {
  --gradient-from: #be123c;
  --gradient-to: rgb(190 18 60 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-rose-800 {
  --gradient-from: #9f1239;
  --gradient-to: rgb(159 18 57 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.from-rose-900 {
  --gradient-from: #881337;
  --gradient-to: rgb(136 19 55 / 0);
  --gradient-stops: var(--gradient-from), var(--gradient-to);
}

.via-slate-50 {
  --gradient-to: rgb(248 250 252 / 0);
  --gradient-stops: var(--gradient-from), #f8fafc, var(--gradient-to);
}

.via-slate-100 {
  --gradient-to: rgb(241 245 249 / 0);
  --gradient-stops: var(--gradient-from), #f1f5f9, var(--gradient-to);
}

.via-slate-200 {
  --gradient-to: rgb(226 232 240 / 0);
  --gradient-stops: var(--gradient-from), #e2e8f0, var(--gradient-to);
}

.via-slate-300 {
  --gradient-to: rgb(203 213 225 / 0);
  --gradient-stops: var(--gradient-from), #cbd5e1, var(--gradient-to);
}

.via-slate-400 {
  --gradient-to: rgb(148 163 184 / 0);
  --gradient-stops: var(--gradient-from), #94a3b8, var(--gradient-to);
}

.via-slate-500 {
  --gradient-to: rgb(100 116 139 / 0);
  --gradient-stops: var(--gradient-from), #64748b, var(--gradient-to);
}

.via-slate-600 {
  --gradient-to: rgb(71 85 105 / 0);
  --gradient-stops: var(--gradient-from), #475569, var(--gradient-to);
}

.via-slate-700 {
  --gradient-to: rgb(51 65 85 / 0);
  --gradient-stops: var(--gradient-from), #334155, var(--gradient-to);
}

.via-slate-800 {
  --gradient-to: rgb(30 41 59 / 0);
  --gradient-stops: var(--gradient-from), #1e293b, var(--gradient-to);
}

.via-slate-900 {
  --gradient-to: rgb(15 23 42 / 0);
  --gradient-stops: var(--gradient-from), #0f172a, var(--gradient-to);
}

.via-gray-50 {
  --gradient-to: rgb(249 250 251 / 0);
  --gradient-stops: var(--gradient-from), #f9fafb, var(--gradient-to);
}

.via-gray-100 {
  --gradient-to: rgb(243 244 246 / 0);
  --gradient-stops: var(--gradient-from), #f3f4f6, var(--gradient-to);
}

.via-gray-200 {
  --gradient-to: rgb(229 231 235 / 0);
  --gradient-stops: var(--gradient-from), #e5e7eb, var(--gradient-to);
}

.via-gray-300 {
  --gradient-to: rgb(209 213 219 / 0);
  --gradient-stops: var(--gradient-from), #d1d5db, var(--gradient-to);
}

.via-gray-400 {
  --gradient-to: rgb(156 163 175 / 0);
  --gradient-stops: var(--gradient-from), #9ca3af, var(--gradient-to);
}

.via-gray-500 {
  --gradient-to: rgb(107 114 128 / 0);
  --gradient-stops: var(--gradient-from), #6b7280, var(--gradient-to);
}

.via-gray-600 {
  --gradient-to: rgb(75 85 99 / 0);
  --gradient-stops: var(--gradient-from), #4b5563, var(--gradient-to);
}

.via-gray-700 {
  --gradient-to: rgb(55 65 81 / 0);
  --gradient-stops: var(--gradient-from), #374151, var(--gradient-to);
}

.via-gray-800 {
  --gradient-to: rgb(31 41 55 / 0);
  --gradient-stops: var(--gradient-from), #1f2937, var(--gradient-to);
}

.via-gray-900 {
  --gradient-to: rgb(17 24 39 / 0);
  --gradient-stops: var(--gradient-from), #111827, var(--gradient-to);
}

.via-zinc-50 {
  --gradient-to: rgb(250 250 250 / 0);
  --gradient-stops: var(--gradient-from), #fafafa, var(--gradient-to);
}

.via-zinc-100 {
  --gradient-to: rgb(244 244 245 / 0);
  --gradient-stops: var(--gradient-from), #f4f4f5, var(--gradient-to);
}

.via-zinc-200 {
  --gradient-to: rgb(228 228 231 / 0);
  --gradient-stops: var(--gradient-from), #e4e4e7, var(--gradient-to);
}

.via-zinc-300 {
  --gradient-to: rgb(212 212 216 / 0);
  --gradient-stops: var(--gradient-from), #d4d4d8, var(--gradient-to);
}

.via-zinc-400 {
  --gradient-to: rgb(161 161 170 / 0);
  --gradient-stops: var(--gradient-from), #a1a1aa, var(--gradient-to);
}

.via-zinc-500 {
  --gradient-to: rgb(113 113 122 / 0);
  --gradient-stops: var(--gradient-from), #71717a, var(--gradient-to);
}

.via-zinc-600 {
  --gradient-to: rgb(82 82 91 / 0);
  --gradient-stops: var(--gradient-from), #52525b, var(--gradient-to);
}

.via-zinc-700 {
  --gradient-to: rgb(63 63 70 / 0);
  --gradient-stops: var(--gradient-from), #3f3f46, var(--gradient-to);
}

.via-zinc-800 {
  --gradient-to: rgb(39 39 42 / 0);
  --gradient-stops: var(--gradient-from), #27272a, var(--gradient-to);
}

.via-zinc-900 {
  --gradient-to: rgb(24 24 27 / 0);
  --gradient-stops: var(--gradient-from), #18181b, var(--gradient-to);
}

.via-neutral-50 {
  --gradient-to: rgb(250 250 250 / 0);
  --gradient-stops: var(--gradient-from), #fafafa, var(--gradient-to);
}

.via-neutral-100 {
  --gradient-to: rgb(245 245 245 / 0);
  --gradient-stops: var(--gradient-from), #f5f5f5, var(--gradient-to);
}

.via-neutral-200 {
  --gradient-to: rgb(229 229 229 / 0);
  --gradient-stops: var(--gradient-from), #e5e5e5, var(--gradient-to);
}

.via-neutral-300 {
  --gradient-to: rgb(212 212 212 / 0);
  --gradient-stops: var(--gradient-from), #d4d4d4, var(--gradient-to);
}

.via-neutral-400 {
  --gradient-to: rgb(163 163 163 / 0);
  --gradient-stops: var(--gradient-from), #a3a3a3, var(--gradient-to);
}

.via-neutral-500 {
  --gradient-to: rgb(115 115 115 / 0);
  --gradient-stops: var(--gradient-from), #737373, var(--gradient-to);
}

.via-neutral-600 {
  --gradient-to: rgb(82 82 82 / 0);
  --gradient-stops: var(--gradient-from), #525252, var(--gradient-to);
}

.via-neutral-700 {
  --gradient-to: rgb(64 64 64 / 0);
  --gradient-stops: var(--gradient-from), #404040, var(--gradient-to);
}

.via-neutral-800 {
  --gradient-to: rgb(38 38 38 / 0);
  --gradient-stops: var(--gradient-from), #262626, var(--gradient-to);
}

.via-neutral-900 {
  --gradient-to: rgb(23 23 23 / 0);
  --gradient-stops: var(--gradient-from), #171717, var(--gradient-to);
}

.via-stone-50 {
  --gradient-to: rgb(250 250 249 / 0);
  --gradient-stops: var(--gradient-from), #fafaf9, var(--gradient-to);
}

.via-stone-100 {
  --gradient-to: rgb(245 245 244 / 0);
  --gradient-stops: var(--gradient-from), #f5f5f4, var(--gradient-to);
}

.via-stone-200 {
  --gradient-to: rgb(231 229 228 / 0);
  --gradient-stops: var(--gradient-from), #e7e5e4, var(--gradient-to);
}

.via-stone-300 {
  --gradient-to: rgb(214 211 209 / 0);
  --gradient-stops: var(--gradient-from), #d6d3d1, var(--gradient-to);
}

.via-stone-400 {
  --gradient-to: rgb(168 162 158 / 0);
  --gradient-stops: var(--gradient-from), #a8a29e, var(--gradient-to);
}

.via-stone-500 {
  --gradient-to: rgb(120 113 108 / 0);
  --gradient-stops: var(--gradient-from), #78716c, var(--gradient-to);
}

.via-stone-600 {
  --gradient-to: rgb(87 83 78 / 0);
  --gradient-stops: var(--gradient-from), #57534e, var(--gradient-to);
}

.via-stone-700 {
  --gradient-to: rgb(68 64 60 / 0);
  --gradient-stops: var(--gradient-from), #44403c, var(--gradient-to);
}

.via-stone-800 {
  --gradient-to: rgb(41 37 36 / 0);
  --gradient-stops: var(--gradient-from), #292524, var(--gradient-to);
}

.via-stone-900 {
  --gradient-to: rgb(28 25 23 / 0);
  --gradient-stops: var(--gradient-from), #1c1917, var(--gradient-to);
}

.via-red-50 {
  --gradient-to: rgb(254 242 242 / 0);
  --gradient-stops: var(--gradient-from), #fef2f2, var(--gradient-to);
}

.via-red-100 {
  --gradient-to: rgb(254 226 226 / 0);
  --gradient-stops: var(--gradient-from), #fee2e2, var(--gradient-to);
}

.via-red-200 {
  --gradient-to: rgb(254 202 202 / 0);
  --gradient-stops: var(--gradient-from), #fecaca, var(--gradient-to);
}

.via-red-300 {
  --gradient-to: rgb(252 165 165 / 0);
  --gradient-stops: var(--gradient-from), #fca5a5, var(--gradient-to);
}

.via-red-400 {
  --gradient-to: rgb(248 113 113 / 0);
  --gradient-stops: var(--gradient-from), #f87171, var(--gradient-to);
}

.via-red-500 {
  --gradient-to: rgb(239 68 68 / 0);
  --gradient-stops: var(--gradient-from), #ef4444, var(--gradient-to);
}

.via-red-600 {
  --gradient-to: rgb(220 38 38 / 0);
  --gradient-stops: var(--gradient-from), #dc2626, var(--gradient-to);
}

.via-red-700 {
  --gradient-to: rgb(185 28 28 / 0);
  --gradient-stops: var(--gradient-from), #b91c1c, var(--gradient-to);
}

.via-red-800 {
  --gradient-to: rgb(153 27 27 / 0);
  --gradient-stops: var(--gradient-from), #991b1b, var(--gradient-to);
}

.via-red-900 {
  --gradient-to: rgb(127 29 29 / 0);
  --gradient-stops: var(--gradient-from), #7f1d1d, var(--gradient-to);
}

.via-orange-50 {
  --gradient-to: rgb(255 247 237 / 0);
  --gradient-stops: var(--gradient-from), #fff7ed, var(--gradient-to);
}

.via-orange-100 {
  --gradient-to: rgb(255 237 213 / 0);
  --gradient-stops: var(--gradient-from), #ffedd5, var(--gradient-to);
}

.via-orange-200 {
  --gradient-to: rgb(254 215 170 / 0);
  --gradient-stops: var(--gradient-from), #fed7aa, var(--gradient-to);
}

.via-orange-300 {
  --gradient-to: rgb(253 186 116 / 0);
  --gradient-stops: var(--gradient-from), #fdba74, var(--gradient-to);
}

.via-orange-400 {
  --gradient-to: rgb(251 146 60 / 0);
  --gradient-stops: var(--gradient-from), #fb923c, var(--gradient-to);
}

.via-orange-500 {
  --gradient-to: rgb(249 115 22 / 0);
  --gradient-stops: var(--gradient-from), #f97316, var(--gradient-to);
}

.via-orange-600 {
  --gradient-to: rgb(234 88 12 / 0);
  --gradient-stops: var(--gradient-from), #ea580c, var(--gradient-to);
}

.via-orange-700 {
  --gradient-to: rgb(194 65 12 / 0);
  --gradient-stops: var(--gradient-from), #c2410c, var(--gradient-to);
}

.via-orange-800 {
  --gradient-to: rgb(154 52 18 / 0);
  --gradient-stops: var(--gradient-from), #9a3412, var(--gradient-to);
}

.via-orange-900 {
  --gradient-to: rgb(124 45 18 / 0);
  --gradient-stops: var(--gradient-from), #7c2d12, var(--gradient-to);
}

.via-amber-50 {
  --gradient-to: rgb(255 251 235 / 0);
  --gradient-stops: var(--gradient-from), #fffbeb, var(--gradient-to);
}

.via-amber-100 {
  --gradient-to: rgb(254 243 199 / 0);
  --gradient-stops: var(--gradient-from), #fef3c7, var(--gradient-to);
}

.via-amber-200 {
  --gradient-to: rgb(253 230 138 / 0);
  --gradient-stops: var(--gradient-from), #fde68a, var(--gradient-to);
}

.via-amber-300 {
  --gradient-to: rgb(252 211 77 / 0);
  --gradient-stops: var(--gradient-from), #fcd34d, var(--gradient-to);
}

.via-amber-400 {
  --gradient-to: rgb(251 191 36 / 0);
  --gradient-stops: var(--gradient-from), #fbbf24, var(--gradient-to);
}

.via-amber-500 {
  --gradient-to: rgb(245 158 11 / 0);
  --gradient-stops: var(--gradient-from), #f59e0b, var(--gradient-to);
}

.via-amber-600 {
  --gradient-to: rgb(217 119 6 / 0);
  --gradient-stops: var(--gradient-from), #d97706, var(--gradient-to);
}

.via-amber-700 {
  --gradient-to: rgb(180 83 9 / 0);
  --gradient-stops: var(--gradient-from), #b45309, var(--gradient-to);
}

.via-amber-800 {
  --gradient-to: rgb(146 64 14 / 0);
  --gradient-stops: var(--gradient-from), #92400e, var(--gradient-to);
}

.via-amber-900 {
  --gradient-to: rgb(120 53 15 / 0);
  --gradient-stops: var(--gradient-from), #78350f, var(--gradient-to);
}

.via-yellow-50 {
  --gradient-to: rgb(254 252 232 / 0);
  --gradient-stops: var(--gradient-from), #fefce8, var(--gradient-to);
}

.via-yellow-100 {
  --gradient-to: rgb(254 249 195 / 0);
  --gradient-stops: var(--gradient-from), #fef9c3, var(--gradient-to);
}

.via-yellow-200 {
  --gradient-to: rgb(254 240 138 / 0);
  --gradient-stops: var(--gradient-from), #fef08a, var(--gradient-to);
}

.via-yellow-300 {
  --gradient-to: rgb(253 224 71 / 0);
  --gradient-stops: var(--gradient-from), #fde047, var(--gradient-to);
}

.via-yellow-400 {
  --gradient-to: rgb(250 204 21 / 0);
  --gradient-stops: var(--gradient-from), #facc15, var(--gradient-to);
}

.via-yellow-500 {
  --gradient-to: rgb(234 179 8 / 0);
  --gradient-stops: var(--gradient-from), #eab308, var(--gradient-to);
}

.via-yellow-600 {
  --gradient-to: rgb(202 138 4 / 0);
  --gradient-stops: var(--gradient-from), #ca8a04, var(--gradient-to);
}

.via-yellow-700 {
  --gradient-to: rgb(161 98 7 / 0);
  --gradient-stops: var(--gradient-from), #a16207, var(--gradient-to);
}

.via-yellow-800 {
  --gradient-to: rgb(133 77 14 / 0);
  --gradient-stops: var(--gradient-from), #854d0e, var(--gradient-to);
}

.via-yellow-900 {
  --gradient-to: rgb(113 63 18 / 0);
  --gradient-stops: var(--gradient-from), #713f12, var(--gradient-to);
}

.via-lime-50 {
  --gradient-to: rgb(247 254 231 / 0);
  --gradient-stops: var(--gradient-from), #f7fee7, var(--gradient-to);
}

.via-lime-100 {
  --gradient-to: rgb(236 252 203 / 0);
  --gradient-stops: var(--gradient-from), #ecfccb, var(--gradient-to);
}

.via-lime-200 {
  --gradient-to: rgb(217 249 157 / 0);
  --gradient-stops: var(--gradient-from), #d9f99d, var(--gradient-to);
}

.via-lime-300 {
  --gradient-to: rgb(190 242 100 / 0);
  --gradient-stops: var(--gradient-from), #bef264, var(--gradient-to);
}

.via-lime-400 {
  --gradient-to: rgb(163 230 53 / 0);
  --gradient-stops: var(--gradient-from), #a3e635, var(--gradient-to);
}

.via-lime-500 {
  --gradient-to: rgb(132 204 22 / 0);
  --gradient-stops: var(--gradient-from), #84cc16, var(--gradient-to);
}

.via-lime-600 {
  --gradient-to: rgb(101 163 13 / 0);
  --gradient-stops: var(--gradient-from), #65a30d, var(--gradient-to);
}

.via-lime-700 {
  --gradient-to: rgb(77 124 15 / 0);
  --gradient-stops: var(--gradient-from), #4d7c0f, var(--gradient-to);
}

.via-lime-800 {
  --gradient-to: rgb(63 98 18 / 0);
  --gradient-stops: var(--gradient-from), #3f6212, var(--gradient-to);
}

.via-lime-900 {
  --gradient-to: rgb(54 83 20 / 0);
  --gradient-stops: var(--gradient-from), #365314, var(--gradient-to);
}

.via-green-50 {
  --gradient-to: rgb(240 253 244 / 0);
  --gradient-stops: var(--gradient-from), #f0fdf4, var(--gradient-to);
}

.via-green-100 {
  --gradient-to: rgb(220 252 231 / 0);
  --gradient-stops: var(--gradient-from), #dcfce7, var(--gradient-to);
}

.via-green-200 {
  --gradient-to: rgb(187 247 208 / 0);
  --gradient-stops: var(--gradient-from), #bbf7d0, var(--gradient-to);
}

.via-green-300 {
  --gradient-to: rgb(134 239 172 / 0);
  --gradient-stops: var(--gradient-from), #86efac, var(--gradient-to);
}

.via-green-400 {
  --gradient-to: rgb(74 222 128 / 0);
  --gradient-stops: var(--gradient-from), #4ade80, var(--gradient-to);
}

.via-green-500 {
  --gradient-to: rgb(34 197 94 / 0);
  --gradient-stops: var(--gradient-from), #22c55e, var(--gradient-to);
}

.via-green-600 {
  --gradient-to: rgb(22 163 74 / 0);
  --gradient-stops: var(--gradient-from), #16a34a, var(--gradient-to);
}

.via-green-700 {
  --gradient-to: rgb(21 128 61 / 0);
  --gradient-stops: var(--gradient-from), #15803d, var(--gradient-to);
}

.via-green-800 {
  --gradient-to: rgb(22 101 52 / 0);
  --gradient-stops: var(--gradient-from), #166534, var(--gradient-to);
}

.via-green-900 {
  --gradient-to: rgb(20 83 45 / 0);
  --gradient-stops: var(--gradient-from), #14532d, var(--gradient-to);
}

.via-emerald-50 {
  --gradient-to: rgb(236 253 245 / 0);
  --gradient-stops: var(--gradient-from), #ecfdf5, var(--gradient-to);
}

.via-emerald-100 {
  --gradient-to: rgb(209 250 229 / 0);
  --gradient-stops: var(--gradient-from), #d1fae5, var(--gradient-to);
}

.via-emerald-200 {
  --gradient-to: rgb(167 243 208 / 0);
  --gradient-stops: var(--gradient-from), #a7f3d0, var(--gradient-to);
}

.via-emerald-300 {
  --gradient-to: rgb(110 231 183 / 0);
  --gradient-stops: var(--gradient-from), #6ee7b7, var(--gradient-to);
}

.via-emerald-400 {
  --gradient-to: rgb(52 211 153 / 0);
  --gradient-stops: var(--gradient-from), #34d399, var(--gradient-to);
}

.via-emerald-500 {
  --gradient-to: rgb(16 185 129 / 0);
  --gradient-stops: var(--gradient-from), #10b981, var(--gradient-to);
}

.via-emerald-600 {
  --gradient-to: rgb(5 150 105 / 0);
  --gradient-stops: var(--gradient-from), #059669, var(--gradient-to);
}

.via-emerald-700 {
  --gradient-to: rgb(4 120 87 / 0);
  --gradient-stops: var(--gradient-from), #047857, var(--gradient-to);
}

.via-emerald-800 {
  --gradient-to: rgb(6 95 70 / 0);
  --gradient-stops: var(--gradient-from), #065f46, var(--gradient-to);
}

.via-emerald-900 {
  --gradient-to: rgb(6 78 59 / 0);
  --gradient-stops: var(--gradient-from), #064e3b, var(--gradient-to);
}

.via-teal-50 {
  --gradient-to: rgb(240 253 250 / 0);
  --gradient-stops: var(--gradient-from), #f0fdfa, var(--gradient-to);
}

.via-teal-100 {
  --gradient-to: rgb(204 251 241 / 0);
  --gradient-stops: var(--gradient-from), #ccfbf1, var(--gradient-to);
}

.via-teal-200 {
  --gradient-to: rgb(153 246 228 / 0);
  --gradient-stops: var(--gradient-from), #99f6e4, var(--gradient-to);
}

.via-teal-300 {
  --gradient-to: rgb(94 234 212 / 0);
  --gradient-stops: var(--gradient-from), #5eead4, var(--gradient-to);
}

.via-teal-400 {
  --gradient-to: rgb(45 212 191 / 0);
  --gradient-stops: var(--gradient-from), #2dd4bf, var(--gradient-to);
}

.via-teal-500 {
  --gradient-to: rgb(20 184 166 / 0);
  --gradient-stops: var(--gradient-from), #14b8a6, var(--gradient-to);
}

.via-teal-600 {
  --gradient-to: rgb(13 148 136 / 0);
  --gradient-stops: var(--gradient-from), #0d9488, var(--gradient-to);
}

.via-teal-700 {
  --gradient-to: rgb(15 118 110 / 0);
  --gradient-stops: var(--gradient-from), #0f766e, var(--gradient-to);
}

.via-teal-800 {
  --gradient-to: rgb(17 94 89 / 0);
  --gradient-stops: var(--gradient-from), #115e59, var(--gradient-to);
}

.via-teal-900 {
  --gradient-to: rgb(19 78 74 / 0);
  --gradient-stops: var(--gradient-from), #134e4a, var(--gradient-to);
}

.via-cyan-50 {
  --gradient-to: rgb(236 254 255 / 0);
  --gradient-stops: var(--gradient-from), #ecfeff, var(--gradient-to);
}

.via-cyan-100 {
  --gradient-to: rgb(207 250 254 / 0);
  --gradient-stops: var(--gradient-from), #cffafe, var(--gradient-to);
}

.via-cyan-200 {
  --gradient-to: rgb(165 243 252 / 0);
  --gradient-stops: var(--gradient-from), #a5f3fc, var(--gradient-to);
}

.via-cyan-300 {
  --gradient-to: rgb(103 232 249 / 0);
  --gradient-stops: var(--gradient-from), #67e8f9, var(--gradient-to);
}

.via-cyan-400 {
  --gradient-to: rgb(34 211 238 / 0);
  --gradient-stops: var(--gradient-from), #22d3ee, var(--gradient-to);
}

.via-cyan-500 {
  --gradient-to: rgb(6 182 212 / 0);
  --gradient-stops: var(--gradient-from), #06b6d4, var(--gradient-to);
}

.via-cyan-600 {
  --gradient-to: rgb(8 145 178 / 0);
  --gradient-stops: var(--gradient-from), #0891b2, var(--gradient-to);
}

.via-cyan-700 {
  --gradient-to: rgb(14 116 144 / 0);
  --gradient-stops: var(--gradient-from), #0e7490, var(--gradient-to);
}

.via-cyan-800 {
  --gradient-to: rgb(21 94 117 / 0);
  --gradient-stops: var(--gradient-from), #155e75, var(--gradient-to);
}

.via-cyan-900 {
  --gradient-to: rgb(22 78 99 / 0);
  --gradient-stops: var(--gradient-from), #164e63, var(--gradient-to);
}

.via-sky-50 {
  --gradient-to: rgb(240 249 255 / 0);
  --gradient-stops: var(--gradient-from), #f0f9ff, var(--gradient-to);
}

.via-sky-100 {
  --gradient-to: rgb(224 242 254 / 0);
  --gradient-stops: var(--gradient-from), #e0f2fe, var(--gradient-to);
}

.via-sky-200 {
  --gradient-to: rgb(186 230 253 / 0);
  --gradient-stops: var(--gradient-from), #bae6fd, var(--gradient-to);
}

.via-sky-300 {
  --gradient-to: rgb(125 211 252 / 0);
  --gradient-stops: var(--gradient-from), #7dd3fc, var(--gradient-to);
}

.via-sky-400 {
  --gradient-to: rgb(56 189 248 / 0);
  --gradient-stops: var(--gradient-from), #38bdf8, var(--gradient-to);
}

.via-sky-500 {
  --gradient-to: rgb(14 165 233 / 0);
  --gradient-stops: var(--gradient-from), #0ea5e9, var(--gradient-to);
}

.via-sky-600 {
  --gradient-to: rgb(2 132 199 / 0);
  --gradient-stops: var(--gradient-from), #0284c7, var(--gradient-to);
}

.via-sky-700 {
  --gradient-to: rgb(3 105 161 / 0);
  --gradient-stops: var(--gradient-from), #0369a1, var(--gradient-to);
}

.via-sky-800 {
  --gradient-to: rgb(7 89 133 / 0);
  --gradient-stops: var(--gradient-from), #075985, var(--gradient-to);
}

.via-sky-900 {
  --gradient-to: rgb(12 74 110 / 0);
  --gradient-stops: var(--gradient-from), #0c4a6e, var(--gradient-to);
}

.via-blue-50 {
  --gradient-to: rgb(239 246 255 / 0);
  --gradient-stops: var(--gradient-from), #eff6ff, var(--gradient-to);
}

.via-blue-100 {
  --gradient-to: rgb(219 234 254 / 0);
  --gradient-stops: var(--gradient-from), #dbeafe, var(--gradient-to);
}

.via-blue-200 {
  --gradient-to: rgb(191 219 254 / 0);
  --gradient-stops: var(--gradient-from), #bfdbfe, var(--gradient-to);
}

.via-blue-300 {
  --gradient-to: rgb(147 197 253 / 0);
  --gradient-stops: var(--gradient-from), #93c5fd, var(--gradient-to);
}

.via-blue-400 {
  --gradient-to: rgb(96 165 250 / 0);
  --gradient-stops: var(--gradient-from), #60a5fa, var(--gradient-to);
}

.via-blue-500 {
  --gradient-to: rgb(59 130 246 / 0);
  --gradient-stops: var(--gradient-from), #3b82f6, var(--gradient-to);
}

.via-blue-600 {
  --gradient-to: rgb(37 99 235 / 0);
  --gradient-stops: var(--gradient-from), #2563eb, var(--gradient-to);
}

.via-blue-700 {
  --gradient-to: rgb(29 78 216 / 0);
  --gradient-stops: var(--gradient-from), #1d4ed8, var(--gradient-to);
}

.via-blue-800 {
  --gradient-to: rgb(30 64 175 / 0);
  --gradient-stops: var(--gradient-from), #1e40af, var(--gradient-to);
}

.via-blue-900 {
  --gradient-to: rgb(30 58 138 / 0);
  --gradient-stops: var(--gradient-from), #1e3a8a, var(--gradient-to);
}

.via-indigo-50 {
  --gradient-to: rgb(238 242 255 / 0);
  --gradient-stops: var(--gradient-from), #eef2ff, var(--gradient-to);
}

.via-indigo-100 {
  --gradient-to: rgb(224 231 255 / 0);
  --gradient-stops: var(--gradient-from), #e0e7ff, var(--gradient-to);
}

.via-indigo-200 {
  --gradient-to: rgb(199 210 254 / 0);
  --gradient-stops: var(--gradient-from), #c7d2fe, var(--gradient-to);
}

.via-indigo-300 {
  --gradient-to: rgb(165 180 252 / 0);
  --gradient-stops: var(--gradient-from), #a5b4fc, var(--gradient-to);
}

.via-indigo-400 {
  --gradient-to: rgb(129 140 248 / 0);
  --gradient-stops: var(--gradient-from), #818cf8, var(--gradient-to);
}

.via-indigo-500 {
  --gradient-to: rgb(99 102 241 / 0);
  --gradient-stops: var(--gradient-from), #6366f1, var(--gradient-to);
}

.via-indigo-600 {
  --gradient-to: rgb(79 70 229 / 0);
  --gradient-stops: var(--gradient-from), #4f46e5, var(--gradient-to);
}

.via-indigo-700 {
  --gradient-to: rgb(67 56 202 / 0);
  --gradient-stops: var(--gradient-from), #4338ca, var(--gradient-to);
}

.via-indigo-800 {
  --gradient-to: rgb(55 48 163 / 0);
  --gradient-stops: var(--gradient-from), #3730a3, var(--gradient-to);
}

.via-indigo-900 {
  --gradient-to: rgb(49 46 129 / 0);
  --gradient-stops: var(--gradient-from), #312e81, var(--gradient-to);
}

.via-violet-50 {
  --gradient-to: rgb(245 243 255 / 0);
  --gradient-stops: var(--gradient-from), #f5f3ff, var(--gradient-to);
}

.via-violet-100 {
  --gradient-to: rgb(237 233 254 / 0);
  --gradient-stops: var(--gradient-from), #ede9fe, var(--gradient-to);
}

.via-violet-200 {
  --gradient-to: rgb(221 214 254 / 0);
  --gradient-stops: var(--gradient-from), #ddd6fe, var(--gradient-to);
}

.via-violet-300 {
  --gradient-to: rgb(196 181 253 / 0);
  --gradient-stops: var(--gradient-from), #c4b5fd, var(--gradient-to);
}

.via-violet-400 {
  --gradient-to: rgb(167 139 250 / 0);
  --gradient-stops: var(--gradient-from), #a78bfa, var(--gradient-to);
}

.via-violet-500 {
  --gradient-to: rgb(139 92 246 / 0);
  --gradient-stops: var(--gradient-from), #8b5cf6, var(--gradient-to);
}

.via-violet-600 {
  --gradient-to: rgb(124 58 237 / 0);
  --gradient-stops: var(--gradient-from), #7c3aed, var(--gradient-to);
}

.via-violet-700 {
  --gradient-to: rgb(109 40 217 / 0);
  --gradient-stops: var(--gradient-from), #6d28d9, var(--gradient-to);
}

.via-violet-800 {
  --gradient-to: rgb(91 33 182 / 0);
  --gradient-stops: var(--gradient-from), #5b21b6, var(--gradient-to);
}

.via-violet-900 {
  --gradient-to: rgb(76 29 149 / 0);
  --gradient-stops: var(--gradient-from), #4c1d95, var(--gradient-to);
}

.via-purple-50 {
  --gradient-to: rgb(250 245 255 / 0);
  --gradient-stops: var(--gradient-from), #faf5ff, var(--gradient-to);
}

.via-purple-100 {
  --gradient-to: rgb(243 232 255 / 0);
  --gradient-stops: var(--gradient-from), #f3e8ff, var(--gradient-to);
}

.via-purple-200 {
  --gradient-to: rgb(233 213 255 / 0);
  --gradient-stops: var(--gradient-from), #e9d5ff, var(--gradient-to);
}

.via-purple-300 {
  --gradient-to: rgb(216 180 254 / 0);
  --gradient-stops: var(--gradient-from), #d8b4fe, var(--gradient-to);
}

.via-purple-400 {
  --gradient-to: rgb(192 132 252 / 0);
  --gradient-stops: var(--gradient-from), #c084fc, var(--gradient-to);
}

.via-purple-500 {
  --gradient-to: rgb(168 85 247 / 0);
  --gradient-stops: var(--gradient-from), #a855f7, var(--gradient-to);
}

.via-purple-600 {
  --gradient-to: rgb(147 51 234 / 0);
  --gradient-stops: var(--gradient-from), #9333ea, var(--gradient-to);
}

.via-purple-700 {
  --gradient-to: rgb(126 34 206 / 0);
  --gradient-stops: var(--gradient-from), #7e22ce, var(--gradient-to);
}

.via-purple-800 {
  --gradient-to: rgb(107 33 168 / 0);
  --gradient-stops: var(--gradient-from), #6b21a8, var(--gradient-to);
}

.via-purple-900 {
  --gradient-to: rgb(88 28 135 / 0);
  --gradient-stops: var(--gradient-from), #581c87, var(--gradient-to);
}

.via-fuchsia-50 {
  --gradient-to: rgb(253 244 255 / 0);
  --gradient-stops: var(--gradient-from), #fdf4ff, var(--gradient-to);
}

.via-fuchsia-100 {
  --gradient-to: rgb(250 232 255 / 0);
  --gradient-stops: var(--gradient-from), #fae8ff, var(--gradient-to);
}

.via-fuchsia-200 {
  --gradient-to: rgb(245 208 254 / 0);
  --gradient-stops: var(--gradient-from), #f5d0fe, var(--gradient-to);
}

.via-fuchsia-300 {
  --gradient-to: rgb(240 171 252 / 0);
  --gradient-stops: var(--gradient-from), #f0abfc, var(--gradient-to);
}

.via-fuchsia-400 {
  --gradient-to: rgb(232 121 249 / 0);
  --gradient-stops: var(--gradient-from), #e879f9, var(--gradient-to);
}

.via-fuchsia-500 {
  --gradient-to: rgb(217 70 239 / 0);
  --gradient-stops: var(--gradient-from), #d946ef, var(--gradient-to);
}

.via-fuchsia-600 {
  --gradient-to: rgb(192 38 211 / 0);
  --gradient-stops: var(--gradient-from), #c026d3, var(--gradient-to);
}

.via-fuchsia-700 {
  --gradient-to: rgb(162 28 175 / 0);
  --gradient-stops: var(--gradient-from), #a21caf, var(--gradient-to);
}

.via-fuchsia-800 {
  --gradient-to: rgb(134 25 143 / 0);
  --gradient-stops: var(--gradient-from), #86198f, var(--gradient-to);
}

.via-fuchsia-900 {
  --gradient-to: rgb(112 26 117 / 0);
  --gradient-stops: var(--gradient-from), #701a75, var(--gradient-to);
}

.via-pink-50 {
  --gradient-to: rgb(253 242 248 / 0);
  --gradient-stops: var(--gradient-from), #fdf2f8, var(--gradient-to);
}

.via-pink-100 {
  --gradient-to: rgb(252 231 243 / 0);
  --gradient-stops: var(--gradient-from), #fce7f3, var(--gradient-to);
}

.via-pink-200 {
  --gradient-to: rgb(251 207 232 / 0);
  --gradient-stops: var(--gradient-from), #fbcfe8, var(--gradient-to);
}

.via-pink-300 {
  --gradient-to: rgb(249 168 212 / 0);
  --gradient-stops: var(--gradient-from), #f9a8d4, var(--gradient-to);
}

.via-pink-400 {
  --gradient-to: rgb(244 114 182 / 0);
  --gradient-stops: var(--gradient-from), #f472b6, var(--gradient-to);
}

.via-pink-500 {
  --gradient-to: rgb(236 72 153 / 0);
  --gradient-stops: var(--gradient-from), #ec4899, var(--gradient-to);
}

.via-pink-600 {
  --gradient-to: rgb(219 39 119 / 0);
  --gradient-stops: var(--gradient-from), #db2777, var(--gradient-to);
}

.via-pink-700 {
  --gradient-to: rgb(190 24 93 / 0);
  --gradient-stops: var(--gradient-from), #be185d, var(--gradient-to);
}

.via-pink-800 {
  --gradient-to: rgb(157 23 77 / 0);
  --gradient-stops: var(--gradient-from), #9d174d, var(--gradient-to);
}

.via-pink-900 {
  --gradient-to: rgb(131 24 67 / 0);
  --gradient-stops: var(--gradient-from), #831843, var(--gradient-to);
}

.via-rose-50 {
  --gradient-to: rgb(255 241 242 / 0);
  --gradient-stops: var(--gradient-from), #fff1f2, var(--gradient-to);
}

.via-rose-100 {
  --gradient-to: rgb(255 228 230 / 0);
  --gradient-stops: var(--gradient-from), #ffe4e6, var(--gradient-to);
}

.via-rose-200 {
  --gradient-to: rgb(254 205 211 / 0);
  --gradient-stops: var(--gradient-from), #fecdd3, var(--gradient-to);
}

.via-rose-300 {
  --gradient-to: rgb(253 164 175 / 0);
  --gradient-stops: var(--gradient-from), #fda4af, var(--gradient-to);
}

.via-rose-400 {
  --gradient-to: rgb(251 113 133 / 0);
  --gradient-stops: var(--gradient-from), #fb7185, var(--gradient-to);
}

.via-rose-500 {
  --gradient-to: rgb(244 63 94 / 0);
  --gradient-stops: var(--gradient-from), #f43f5e, var(--gradient-to);
}

.via-rose-600 {
  --gradient-to: rgb(225 29 72 / 0);
  --gradient-stops: var(--gradient-from), #e11d48, var(--gradient-to);
}

.via-rose-700 {
  --gradient-to: rgb(190 18 60 / 0);
  --gradient-stops: var(--gradient-from), #be123c, var(--gradient-to);
}

.via-rose-800 {
  --gradient-to: rgb(159 18 57 / 0);
  --gradient-stops: var(--gradient-from), #9f1239, var(--gradient-to);
}

.via-rose-900 {
  --gradient-to: rgb(136 19 55 / 0);
  --gradient-stops: var(--gradient-from), #881337, var(--gradient-to);
}
.to-transparent{
  --gradient-to: rgb(0 0 0 / 0);
}
.to-slate-50 {
  --gradient-to: #f8fafc;
}

.to-slate-100 {
  --gradient-to: #f1f5f9;
}

.to-slate-200 {
  --gradient-to: #e2e8f0;
}

.to-slate-300 {
  --gradient-to: #cbd5e1;
}

.to-slate-400 {
  --gradient-to: #94a3b8;
}

.to-slate-500 {
  --gradient-to: #64748b;
}

.to-slate-600 {
  --gradient-to: #475569;
}

.to-slate-700 {
  --gradient-to: #334155;
}

.to-slate-800 {
  --gradient-to: #1e293b;
}

.to-slate-900 {
  --gradient-to: #0f172a;
}

.to-gray-50 {
  --gradient-to: #f9fafb;
}

.to-gray-100 {
  --gradient-to: #f3f4f6;
}

.to-gray-200 {
  --gradient-to: #e5e7eb;
}

.to-gray-300 {
  --gradient-to: #d1d5db;
}

.to-gray-400 {
  --gradient-to: #9ca3af;
}

.to-gray-500 {
  --gradient-to: #6b7280;
}

.to-gray-600 {
  --gradient-to: #4b5563;
}

.to-gray-700 {
  --gradient-to: #374151;
}

.to-gray-800 {
  --gradient-to: #1f2937;
}

.to-gray-900 {
  --gradient-to: #111827;
}

.to-zinc-50 {
  --gradient-to: #fafafa;
}

.to-zinc-100 {
  --gradient-to: #f4f4f5;
}

.to-zinc-200 {
  --gradient-to: #e4e4e7;
}

.to-zinc-300 {
  --gradient-to: #d4d4d8;
}

.to-zinc-400 {
  --gradient-to: #a1a1aa;
}

.to-zinc-500 {
  --gradient-to: #71717a;
}

.to-zinc-600 {
  --gradient-to: #52525b;
}

.to-zinc-700 {
  --gradient-to: #3f3f46;
}

.to-zinc-800 {
  --gradient-to: #27272a;
}

.to-zinc-900 {
  --gradient-to: #18181b;
}

.to-neutral-50 {
  --gradient-to: #fafafa;
}

.to-neutral-100 {
  --gradient-to: #f5f5f5;
}

.to-neutral-200 {
  --gradient-to: #e5e5e5;
}

.to-neutral-300 {
  --gradient-to: #d4d4d4;
}

.to-neutral-400 {
  --gradient-to: #a3a3a3;
}

.to-neutral-500 {
  --gradient-to: #737373;
}

.to-neutral-600 {
  --gradient-to: #525252;
}

.to-neutral-700 {
  --gradient-to: #404040;
}

.to-neutral-800 {
  --gradient-to: #262626;
}

.to-neutral-900 {
  --gradient-to: #171717;
}

.to-stone-50 {
  --gradient-to: #fafaf9;
}

.to-stone-100 {
  --gradient-to: #f5f5f4;
}

.to-stone-200 {
  --gradient-to: #e7e5e4;
}

.to-stone-300 {
  --gradient-to: #d6d3d1;
}

.to-stone-400 {
  --gradient-to: #a8a29e;
}

.to-stone-500 {
  --gradient-to: #78716c;
}

.to-stone-600 {
  --gradient-to: #57534e;
}

.to-stone-700 {
  --gradient-to: #44403c;
}

.to-stone-800 {
  --gradient-to: #292524;
}

.to-stone-900 {
  --gradient-to: #1c1917;
}

.to-red-50 {
  --gradient-to: #fef2f2;
}

.to-red-100 {
  --gradient-to: #fee2e2;
}

.to-red-200 {
  --gradient-to: #fecaca;
}

.to-red-300 {
  --gradient-to: #fca5a5;
}

.to-red-400 {
  --gradient-to: #f87171;
}

.to-red-500 {
  --gradient-to: #ef4444;
}

.to-red-600 {
  --gradient-to: #dc2626;
}

.to-red-700 {
  --gradient-to: #b91c1c;
}

.to-red-800 {
  --gradient-to: #991b1b;
}

.to-red-900 {
  --gradient-to: #7f1d1d;
}

.to-orange-50 {
  --gradient-to: #fff7ed;
}

.to-orange-100 {
  --gradient-to: #ffedd5;
}

.to-orange-200 {
  --gradient-to: #fed7aa;
}

.to-orange-300 {
  --gradient-to: #fdba74;
}

.to-orange-400 {
  --gradient-to: #fb923c;
}

.to-orange-500 {
  --gradient-to: #f97316;
}

.to-orange-600 {
  --gradient-to: #ea580c;
}

.to-orange-700 {
  --gradient-to: #c2410c;
}

.to-orange-800 {
  --gradient-to: #9a3412;
}

.to-orange-900 {
  --gradient-to: #7c2d12;
}

.to-amber-50 {
  --gradient-to: #fffbeb;
}

.to-amber-100 {
  --gradient-to: #fef3c7;
}

.to-amber-200 {
  --gradient-to: #fde68a;
}

.to-amber-300 {
  --gradient-to: #fcd34d;
}

.to-amber-400 {
  --gradient-to: #fbbf24;
}

.to-amber-500 {
  --gradient-to: #f59e0b;
}

.to-amber-600 {
  --gradient-to: #d97706;
}

.to-amber-700 {
  --gradient-to: #b45309;
}

.to-amber-800 {
  --gradient-to: #92400e;
}

.to-amber-900 {
  --gradient-to: #78350f;
}

.to-yellow-50 {
  --gradient-to: #fefce8;
}

.to-yellow-100 {
  --gradient-to: #fef9c3;
}

.to-yellow-200 {
  --gradient-to: #fef08a;
}

.to-yellow-300 {
  --gradient-to: #fde047;
}

.to-yellow-400 {
  --gradient-to: #facc15;
}

.to-yellow-500 {
  --gradient-to: #eab308;
}

.to-yellow-600 {
  --gradient-to: #ca8a04;
}

.to-yellow-700 {
  --gradient-to: #a16207;
}

.to-yellow-800 {
  --gradient-to: #854d0e;
}

.to-yellow-900 {
  --gradient-to: #713f12;
}

.to-lime-50 {
  --gradient-to: #f7fee7;
}

.to-lime-100 {
  --gradient-to: #ecfccb;
}

.to-lime-200 {
  --gradient-to: #d9f99d;
}

.to-lime-300 {
  --gradient-to: #bef264;
}

.to-lime-400 {
  --gradient-to: #a3e635;
}

.to-lime-500 {
  --gradient-to: #84cc16;
}

.to-lime-600 {
  --gradient-to: #65a30d;
}

.to-lime-700 {
  --gradient-to: #4d7c0f;
}

.to-lime-800 {
  --gradient-to: #3f6212;
}

.to-lime-900 {
  --gradient-to: #365314;
}

.to-green-50 {
  --gradient-to: #f0fdf4;
}

.to-green-100 {
  --gradient-to: #dcfce7;
}

.to-green-200 {
  --gradient-to: #bbf7d0;
}

.to-green-300 {
  --gradient-to: #86efac;
}

.to-green-400 {
  --gradient-to: #4ade80;
}

.to-green-500 {
  --gradient-to: #22c55e;
}

.to-green-600 {
  --gradient-to: #16a34a;
}

.to-green-700 {
  --gradient-to: #15803d;
}

.to-green-800 {
  --gradient-to: #166534;
}

.to-green-900 {
  --gradient-to: #14532d;
}

.to-emerald-50 {
  --gradient-to: #ecfdf5;
}

.to-emerald-100 {
  --gradient-to: #d1fae5;
}

.to-emerald-200 {
  --gradient-to: #a7f3d0;
}

.to-emerald-300 {
  --gradient-to: #6ee7b7;
}

.to-emerald-400 {
  --gradient-to: #34d399;
}

.to-emerald-500 {
  --gradient-to: #10b981;
}

.to-emerald-600 {
  --gradient-to: #059669;
}

.to-emerald-700 {
  --gradient-to: #047857;
}

.to-emerald-800 {
  --gradient-to: #065f46;
}

.to-emerald-900 {
  --gradient-to: #064e3b;
}

.to-teal-50 {
  --gradient-to: #f0fdfa;
}

.to-teal-100 {
  --gradient-to: #ccfbf1;
}

.to-teal-200 {
  --gradient-to: #99f6e4;
}

.to-teal-300 {
  --gradient-to: #5eead4;
}

.to-teal-400 {
  --gradient-to: #2dd4bf;
}

.to-teal-500 {
  --gradient-to: #14b8a6;
}

.to-teal-600 {
  --gradient-to: #0d9488;
}

.to-teal-700 {
  --gradient-to: #0f766e;
}

.to-teal-800 {
  --gradient-to: #115e59;
}

.to-teal-900 {
  --gradient-to: #134e4a;
}

.to-cyan-50 {
  --gradient-to: #ecfeff;
}

.to-cyan-100 {
  --gradient-to: #cffafe;
}

.to-cyan-200 {
  --gradient-to: #a5f3fc;
}

.to-cyan-300 {
  --gradient-to: #67e8f9;
}

.to-cyan-400 {
  --gradient-to: #22d3ee;
}

.to-cyan-500 {
  --gradient-to: #06b6d4;
}

.to-cyan-600 {
  --gradient-to: #0891b2;
}

.to-cyan-700 {
  --gradient-to: #0e7490;
}

.to-cyan-800 {
  --gradient-to: #155e75;
}

.to-cyan-900 {
  --gradient-to: #164e63;
}

.to-sky-50 {
  --gradient-to: #f0f9ff;
}

.to-sky-100 {
  --gradient-to: #e0f2fe;
}

.to-sky-200 {
  --gradient-to: #bae6fd;
}

.to-sky-300 {
  --gradient-to: #7dd3fc;
}

.to-sky-400 {
  --gradient-to: #38bdf8;
}

.to-sky-500 {
  --gradient-to: #0ea5e9;
}

.to-sky-600 {
  --gradient-to: #0284c7;
}

.to-sky-700 {
  --gradient-to: #0369a1;
}

.to-sky-800 {
  --gradient-to: #075985;
}

.to-sky-900 {
  --gradient-to: #0c4a6e;
}

.to-blue-50 {
  --gradient-to: #eff6ff;
}

.to-blue-100 {
  --gradient-to: #dbeafe;
}

.to-blue-200 {
  --gradient-to: #bfdbfe;
}

.to-blue-300 {
  --gradient-to: #93c5fd;
}

.to-blue-400 {
  --gradient-to: #60a5fa;
}

.to-blue-500 {
  --gradient-to: #3b82f6;
}

.to-blue-600 {
  --gradient-to: #2563eb;
}

.to-blue-700 {
  --gradient-to: #1d4ed8;
}

.to-blue-800 {
  --gradient-to: #1e40af;
}

.to-blue-900 {
  --gradient-to: #1e3a8a;
}

.to-indigo-50 {
  --gradient-to: #eef2ff;
}

.to-indigo-100 {
  --gradient-to: #e0e7ff;
}

.to-indigo-200 {
  --gradient-to: #c7d2fe;
}

.to-indigo-300 {
  --gradient-to: #a5b4fc;
}

.to-indigo-400 {
  --gradient-to: #818cf8;
}

.to-indigo-500 {
  --gradient-to: #6366f1;
}

.to-indigo-600 {
  --gradient-to: #4f46e5;
}

.to-indigo-700 {
  --gradient-to: #4338ca;
}

.to-indigo-800 {
  --gradient-to: #3730a3;
}

.to-indigo-900 {
  --gradient-to: #312e81;
}

.to-violet-50 {
  --gradient-to: #f5f3ff;
}

.to-violet-100 {
  --gradient-to: #ede9fe;
}

.to-violet-200 {
  --gradient-to: #ddd6fe;
}

.to-violet-300 {
  --gradient-to: #c4b5fd;
}

.to-violet-400 {
  --gradient-to: #a78bfa;
}

.to-violet-500 {
  --gradient-to: #8b5cf6;
}

.to-violet-600 {
  --gradient-to: #7c3aed;
}

.to-violet-700 {
  --gradient-to: #6d28d9;
}

.to-violet-800 {
  --gradient-to: #5b21b6;
}

.to-violet-900 {
  --gradient-to: #4c1d95;
}

.to-purple-50 {
  --gradient-to: #faf5ff;
}

.to-purple-100 {
  --gradient-to: #f3e8ff;
}

.to-purple-200 {
  --gradient-to: #e9d5ff;
}

.to-purple-300 {
  --gradient-to: #d8b4fe;
}

.to-purple-400 {
  --gradient-to: #c084fc;
}

.to-purple-500 {
  --gradient-to: #a855f7;
}

.to-purple-600 {
  --gradient-to: #9333ea;
}

.to-purple-700 {
  --gradient-to: #7e22ce;
}

.to-purple-800 {
  --gradient-to: #6b21a8;
}

.to-purple-900 {
  --gradient-to: #581c87;
}

.to-fuchsia-50 {
  --gradient-to: #fdf4ff;
}

.to-fuchsia-100 {
  --gradient-to: #fae8ff;
}

.to-fuchsia-200 {
  --gradient-to: #f5d0fe;
}

.to-fuchsia-300 {
  --gradient-to: #f0abfc;
}

.to-fuchsia-400 {
  --gradient-to: #e879f9;
}

.to-fuchsia-500 {
  --gradient-to: #d946ef;
}

.to-fuchsia-600 {
  --gradient-to: #c026d3;
}

.to-fuchsia-700 {
  --gradient-to: #a21caf;
}

.to-fuchsia-800 {
  --gradient-to: #86198f;
}

.to-fuchsia-900 {
  --gradient-to: #701a75;
}

.to-pink-50 {
  --gradient-to: #fdf2f8;
}

.to-pink-100 {
  --gradient-to: #fce7f3;
}

.to-pink-200 {
  --gradient-to: #fbcfe8;
}

.to-pink-300 {
  --gradient-to: #f9a8d4;
}

.to-pink-400 {
  --gradient-to: #f472b6;
}

.to-pink-500 {
  --gradient-to: #ec4899;
}

.to-pink-600 {
  --gradient-to: #db2777;
}

.to-pink-700 {
  --gradient-to: #be185d;
}

.to-pink-800 {
  --gradient-to: #9d174d;
}

.to-pink-900 {
  --gradient-to: #831843;
}

.to-rose-50 {
  --gradient-to: #fff1f2;
}

.to-rose-100 {
  --gradient-to: #ffe4e6;
}

.to-rose-200 {
  --gradient-to: #fecdd3;
}

.to-rose-300 {
  --gradient-to: #fda4af;
}

.to-rose-400 {
  --gradient-to: #fb7185;
}

.to-rose-500 {
  --gradient-to: #f43f5e;
}

.to-rose-600 {
  --gradient-to: #e11d48;
}

.to-rose-700 {
  --gradient-to: #be123c;
}

.to-rose-800 {
  --gradient-to: #9f1239;
}

.to-rose-900 {
  --gradient-to: #881337;
}

.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

.fill-current {
  fill: currentColor;
}

/* v1.3渐变定义 */
.bg-gradient.bg-seasalt,
.bg-gradient.hover-bg-seasalt:hover {
  background-image: linear-gradient(to right,
      #25aae1,
      #40e495,
      #30dd8a,
      #2bb673);
}

.bg-gradient.bg-taurine,
.bg-gradient.hover-bg-taurine:hover {
  background-image: linear-gradient(to right,
      #f5ce62,
      #e43603,
      #fa7199,
      #e85a19);
}

.bg-gradient.bg-blueberry,
.bg-gradient.hover-bg-blueberry:hover {
  background-image: linear-gradient(to right,
      #667eea,
      #764ba2,
      #6b8dd6,
      #8e37d7);
}

.bg-gradient.bg-strawberry,
.bg-gradient.hover-bg-strawberry:hover {
  background-image: linear-gradient(to right,
      #fc6076,
      #ff9a44,
      #ef9d43,
      #e75516);
}

.bg-gradient.bg-cranberry,
.bg-gradient.hover-bg-cranberry:hover {
  background-image: linear-gradient(to right,
      #0ba360,
      #3cba92,
      #30dd8a,
      #2bb673);
}

.bg-gradient.bg-lemon,
.bg-gradient.hover-bg-lemon:hover {
  background-image: linear-gradient(to right,
      #009245,
      #fcee21,
      #00a8c5,
      #d9e021);
}

.bg-gradient.bg-violetblue,
.bg-gradient.hover-bg-violetblue:hover {
  background-image: linear-gradient(to right,
      #6253e1,
      #852d91,
      #a3a1ff,
      #f24645);
}

.bg-gradient.bg-basalt,
.bg-gradient.hover-bg-basalt:hover {
  background-image: linear-gradient(to right,
      #29323c,
      #485563,
      #2b5876,
      #4e4376);
}

.bg-gradient.bg-iceblue,
.bg-gradient.hover-bg-iceblue:hover {
  background-image: linear-gradient(to right,
      #25aae1,
      #4481eb,
      #04befe,
      #3f86ed);
}

.bg-gradient.bg-straw,
.bg-gradient.hover-bg-straw:hover {
  background-image: linear-gradient(to right,
      #ed6ea0,
      #ec8c69,
      #f7186a,
      #fbb03b);
}

.bg-gradient.bg-fireunicorn,
.bg-gradient.hover-bg-fireunicorn:hover {  
  background-image: linear-gradient(to right,
      #eb3941,
      #f15e64,
      #e14e53,
      #e2373f);
}

/* 发光效果 */
.bg-gradient.bg-seasalt.glowing {
  box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}

.bg-gradient.bg-taurine.glowing {
  box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}

.bg-gradient.bg-blueberry.glowing {
  box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}

.bg-gradient.bg-strawberry.glowing {
  box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
}

.bg-gradient.bg-cranberry.glowing {
  box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
}

.bg-gradient.bg-lemon.glowing {
  box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
}

.bg-gradient.bg-violetblue.glowing {
  box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
}

.bg-gradient.bg-basalt.glowing {
  box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}

.bg-gradient.bg-iceblue.glowing {
  box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}

.bg-gradient.bg-straw.glowing {
  box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}

.bg-gradient.bg-fireunicorn.glowing {
  box-shadow: 0 4px 15px 0 rgba(242, 97, 103, 0.4);
}

/* 渐变动画效果 */
.bg.bg-gradient,
.btn.bg-gradient,
.tags.bg-gradient {
  background-size: 300% 100%;
  cursor: pointer;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.bg.bg-gradient:hover,
.btn.bg-gradient:hover,
.tags.bg-gradient:hover {
  background-position: 100% 0;
}

.bg-gradient:focus {
  outline: none;
}

.text-gradient,
.hover-text-gradient:hover {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 100%;
}

/* 背景功能 */
/* 基础类 */

.bg-auto {
  --bg-size: auto auto;
  background-size: var(--bg-size) !important;
}
.bg-auto-full {
  --bg-size: auto 100%;
  background-size: var(--bg-size) !important;
}
.bg-full-auto {
  --bg-size: 100% auto;
  background-size: var(--bg-size) !important;
}

.bg-cover {
  --bg-size: cover;
  background-size: var(--bg-size) !important;
}

.bg-contain {
  --bg-size: contain;
  background-size: var(--bg-size) !important;
}

.bg-fixed {
  --bg-attachment: fixed;
  background-attachment: var(--bg-attachment) !important; 
}

.bg-local {
  --bg-attachment: local;
  background-attachment: var(--bg-attachment) !important; 
}

.bg-scroll {
  --bg-attachment: scroll;
  background-attachment: var(--bg-attachment) !important; 
}

/* 背景剪辑 */
.bg-clip-border {
  --bg-clip: border-box;
  background-clip: var(--bg-clip) !important;
}
.bg-clip-content {
  --bg-clip: content-box;
  background-clip: var(--bg-clip) !important;
}
.bg-clip-padding {    
  --bg-clip: padding-box;
  background-clip: var(--bg-clip) !important;
}
/* 背景起源 */
.bg-origin-border {
  --bg-origin: border-box;
  background-origin: var(--bg-origin) !important;
}
.bg-origin-content {
  --bg-origin: content-box;
  background-origin: var(--bg-origin) !important;
}
.bg-origin-padding {
  --bg-origin: padding-box;
  background-origin: var(--bg-origin) !important;
}

/* 透明背景 */
.bg-transparent {
  background-color: transparent !important;
}


/* ---------- Background Position (背景位置) ---------- */
/* 单轴与中心定位 */
.bg-center {
  --bg-position: center;
  background-position: var(--bg-position) !important;
}

.bg-top {
  --bg-position: top;
  background-position: var(--bg-position) !important;
}

.bg-bottom {
  --bg-position: bottom;
  background-position: var(--bg-position) !important;
}

.bg-left {
  --bg-position: left;
  background-position: var(--bg-position) !important;
}

.bg-right {
  --bg-position: right;
  background-position: var(--bg-position) !important;
}

/* 组合定位 */
.bg-top-left {
  --bg-position: top left;
  background-position: var(--bg-position) !important;
}

.bg-top-right {
  --bg-position: top right;
  background-position: var(--bg-position) !important;
}

.bg-bottom-left {
  --bg-position: bottom left;
  background-position: var(--bg-position) !important;
}

.bg-bottom-right {
  --bg-position: bottom right;
  background-position: var(--bg-position) !important;
}
.bg-center-left {
  --bg-position: center left;
  background-position: var(--bg-position) !important;
}
.bg-center-right {
  --bg-position: center right;
  background-position: var(--bg-position) !important;
}

/* ---------- Background Repeat (背景重复) ---------- */
.bg-repeat {
  --bg-repeat: repeat;
  background-repeat: var(--bg-repeat) !important;
}

.bg-no-repeat {
  --bg-repeat: no-repeat;
  background-repeat: var(--bg-repeat) !important;
}

.bg-repeat-x {
  --bg-repeat: repeat-x;
  background-repeat: var(--bg-repeat) !important;
}

.bg-repeat-y {
  --bg-repeat: repeat-y;
  background-repeat: var(--bg-repeat) !important;
}

/*布局*/
/*容器*/
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  max-width: var(--container-sm-clamp);
}

/*自动响应式*/
/* 基础容器 */
.auto-grid {
  display: grid;
  gap: 1rem;
  width: 100%;
}

/* 自动填充 - 根据容器宽度自动确定列数 */
.auto-grid-fill {
  grid-template-columns: repeat(auto-fill,
      minmax(var(--min-column-width, 250px), 1fr));
}

/* 自动适应 - 让现有列拉伸填充空间 */
.auto-grid-fit {
  grid-template-columns: repeat(auto-fit,
      minmax(var(--min-column-width, 250px), 1fr));
}

/* 预设列宽变体 */
.auto-grid-xs {
  --min-column-width: 120px;
}

.auto-grid-sm {
  --min-column-width: 200px;
}

.auto-grid-md {
  --min-column-width: 250px;
}

.auto-grid-lg {
  --min-column-width: 300px;
}

.auto-grid-xl {
  --min-column-width: 380px;
}

.auto-grid-2xl {
  --min-column-width: 480px;
}

/* grid布局 */
.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-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-rows-none {
  grid-template-rows: none;

}

/* 侧边栏专用 */
.grid-sidebar {
  --sidebar-width: var(--spacing-16);/* 64px */
  /* 默认使用展开的宽度 */
  grid-template-columns: var(--sidebar-width) 1fr;
}
.sidebar-w-4{
  --sidebar-width: var(--spacing-4);/* 1rem=>16px */
}
.sidebar-w-8{
  --sidebar-width: var(--spacing-8);/* 2rem=>32px */
}
.sidebar-w-12{
  --sidebar-width: var(--spacing-12);/* 3rem=>48px */
}
.sidebar-w-16{
  --sidebar-width: var(--spacing-16);/* 4=>64px */
}
.sidebar-w-20{
  --sidebar-width: var(--spacing-20);/* 5rem=>80px */
}
.sidebar-w-24{
  --sidebar-width: var(--spacing-24);/* 6rem=>96px */
}
.sidebar-w-28{
  --sidebar-width: var(--spacing-28);/* 7rem=>112px */
}
.sidebar-w-32{
  --sidebar-width: var(--spacing-32);/* 8=>128px */
}
.sidebar-w-36{
  --sidebar-width: var(--spacing-36);/* 9rem=>144px */
}
.sidebar-w-40{
  --sidebar-width: var(--spacing-40);/* 10rem=>160px */
}

.col-auto {
  grid-column: auto;

}

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

}

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

}

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

}

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

}

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

}

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

}

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

}

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

}

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

}

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

}

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

}

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

}

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

}

.row-auto {
  grid-row: auto;

}

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

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

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

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

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

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

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

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

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

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

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

.auto-cols-auto {
  grid-auto-columns: auto;
}

.auto-cols-min {
  grid-auto-columns: min-content;
}

.auto-cols-max {
  grid-auto-columns: max-content;
}

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

.auto-rows-auto {
  grid-auto-rows: auto;
}

.auto-rows-min {
  grid-auto-rows: min-content;
}

.auto-rows-max {
  grid-auto-rows: max-content;
}

.auto-rows-fr {
  grid-auto-rows: minmax(0, 1fr);
}

.place-items-start {
  place-items: start;
}

.place-items-end {
  place-items: end;
}

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

.place-items-stretch {
  place-items: stretch;
}

.place-content-start {
  place-content: start;
}

.place-content-end {
  place-content: end;
}

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

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

.place-content-around {
  place-content: space-around;
}

.place-content-evenly {
  place-content: space-evenly;
}

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

.place-self-auto {
  place-self: auto;
}

.place-self-start {
  place-self: start;
}

.place-self-end {
  place-self: end;
}

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

.place-self-stretch {
  place-self: stretch;
}

/* 响应式容器大小 */
@media (min-width: 640px) {
  .container {
    max-width: var(--container-md-clamp);
    width: clamp(var(--container-sm-min), 90vw, var(--container-sm-max));
  }
}

@media (min-width: 768px) {
  .container {
    max-width: var(--container-lg-clamp);
    width: auto;
    /* 在下一个 clamp 生效前，重置 width */
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: var(--container-xl-clamp);
    width: auto;
    /* 在下一个 clamp 生效前，重置 width */
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xxl-clamp);
    width: auto;
    /* 在下一个 clamp 生效前，重置 width */
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: var(--container-xxxl-clamp);
    width: auto;
    /* 在下一个 clamp 生效前，重置 width */
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: var(--container-xxxxl-clamp);
    width: auto;
    /* 在下一个 clamp 生效前，重置 width */
  }
}

@media (min-width: 2560px) {
  .container {
    max-width: var(--container-xxxxl-final);
    width: auto;
  }
}

/* 始终流体的容器（100%宽度） */
.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/*grid 栅格*/
/* 行 */
.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}

/* 没有内边距的行 */
.row-no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.row-no-gutters>[class^="col-"] {
  padding-right: 0;
  padding-left: 0;
}

/* 基础列样式 */
[class^="col-"] {
  position: relative;
  width: 100%;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

/* 所有断点的列宽度 */
.center,
.col,
.flex-col {
  display: flex;
  flex-direction: column;
}

.col,
.flex-col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

/* 根据断点生成列类 */
/* xs (默认，没有媒体查询) */
.col-1 {
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* 列排序 */
.order-first {
  order: -1;
}

.order-last {
  order: 13;
}

.order-0 {
  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;
}

/* 列偏移 */
.offset-1 {
  margin-left: 8.333333%;
}

.offset-2 {
  margin-left: 16.666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.333333%;
}

.offset-5 {
  margin-left: 41.666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.333333%;
}

.offset-8 {
  margin-left: 66.666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.333333%;
}

.offset-11 {
  margin-left: 91.666667%;
}

/* sm断点（≥640px） */
@media (min-width: 640px) {
  .col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-sm-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .col-sm-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-sm-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-sm-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-sm-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .col-sm-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-sm-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .col-sm-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

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

  .order-sm-last {
    order: 13;
  }

  .order-sm-0 {
    order: 0;
  }

  .order-sm-1 {
    order: 1;
  }

  .order-sm-2 {
    order: 2;
  }

  .order-sm-3 {
    order: 3;
  }

  .order-sm-4 {
    order: 4;
  }

  .order-sm-5 {
    order: 5;
  }

  .order-sm-6 {
    order: 6;
  }

  .order-sm-7 {
    order: 7;
  }

  .order-sm-8 {
    order: 8;
  }

  .order-sm-9 {
    order: 9;
  }

  .order-sm-10 {
    order: 10;
  }

  .order-sm-11 {
    order: 11;
  }

  .order-sm-12 {
    order: 12;
  }

  .offset-sm-0 {
    margin-left: 0;
  }

  .offset-sm-1 {
    margin-left: 8.333333%;
  }

  .offset-sm-2 {
    margin-left: 16.666667%;
  }

  .offset-sm-3 {
    margin-left: 25%;
  }

  .offset-sm-4 {
    margin-left: 33.333333%;
  }

  .offset-sm-5 {
    margin-left: 41.666667%;
  }

  .offset-sm-6 {
    margin-left: 50%;
  }

  .offset-sm-7 {
    margin-left: 58.333333%;
  }

  .offset-sm-8 {
    margin-left: 66.666667%;
  }

  .offset-sm-9 {
    margin-left: 75%;
  }

  .offset-sm-10 {
    margin-left: 83.333333%;
  }

  .offset-sm-11 {
    margin-left: 91.666667%;
  }
}

/* md断点（≥768px） */
@media (min-width: 768px) {
  .col-md {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-md-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .col-md-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-md-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-md-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-md-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .col-md-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

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

  .order-md-last {
    order: 13;
  }

  .order-md-0 {
    order: 0;
  }

  .order-md-1 {
    order: 1;
  }

  .order-md-2 {
    order: 2;
  }

  .order-md-3 {
    order: 3;
  }

  .order-md-4 {
    order: 4;
  }

  .order-md-5 {
    order: 5;
  }

  .order-md-6 {
    order: 6;
  }

  .order-md-7 {
    order: 7;
  }

  .order-md-8 {
    order: 8;
  }

  .order-md-9 {
    order: 9;
  }

  .order-md-10 {
    order: 10;
  }

  .order-md-11 {
    order: 11;
  }

  .order-md-12 {
    order: 12;
  }

  .offset-md-0 {
    margin-left: 0;
  }

  .offset-md-1 {
    margin-left: 8.333333%;
  }

  .offset-md-2 {
    margin-left: 16.666667%;
  }

  .offset-md-3 {
    margin-left: 25%;
  }

  .offset-md-4 {
    margin-left: 33.333333%;
  }

  .offset-md-5 {
    margin-left: 41.666667%;
  }

  .offset-md-6 {
    margin-left: 50%;
  }

  .offset-md-7 {
    margin-left: 58.333333%;
  }

  .offset-md-8 {
    margin-left: 66.666667%;
  }

  .offset-md-9 {
    margin-left: 75%;
  }

  .offset-md-10 {
    margin-left: 83.333333%;
  }

  .offset-md-11 {
    margin-left: 91.666667%;
  }
}

/* lg断点（≥1024px） */
@media (min-width: 1024px) {
  .col-lg {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-lg-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .col-lg-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-lg-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-lg-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .col-lg-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

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

  .order-lg-last {
    order: 13;
  }

  .order-lg-0 {
    order: 0;
  }

  .order-lg-1 {
    order: 1;
  }

  .order-lg-2 {
    order: 2;
  }

  .order-lg-3 {
    order: 3;
  }

  .order-lg-4 {
    order: 4;
  }

  .order-lg-5 {
    order: 5;
  }

  .order-lg-6 {
    order: 6;
  }

  .order-lg-7 {
    order: 7;
  }

  .order-lg-8 {
    order: 8;
  }

  .order-lg-9 {
    order: 9;
  }

  .order-lg-10 {
    order: 10;
  }

  .order-lg-11 {
    order: 11;
  }

  .order-lg-12 {
    order: 12;
  }

  .offset-lg-0 {
    margin-left: 0;
  }

  .offset-lg-1 {
    margin-left: 8.333333%;
  }

  .offset-lg-2 {
    margin-left: 16.666667%;
  }

  .offset-lg-3 {
    margin-left: 25%;
  }

  .offset-lg-4 {
    margin-left: 33.333333%;
  }

  .offset-lg-5 {
    margin-left: 41.666667%;
  }

  .offset-lg-6 {
    margin-left: 50%;
  }

  .offset-lg-7 {
    margin-left: 58.333333%;
  }

  .offset-lg-8 {
    margin-left: 66.666667%;
  }

  .offset-lg-9 {
    margin-left: 75%;
  }

  .offset-lg-10 {
    margin-left: 83.333333%;
  }

  .offset-lg-11 {
    margin-left: 91.666667%;
  }
}

/* xl断点（≥1280px） */
@media (min-width: 1280px) {
  .col-xl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-xl-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .col-xl-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-xl-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-xl-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .col-xl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-xl-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .col-xl-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .col-xl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-xl-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .col-xl-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

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

  .order-xl-last {
    order: 13;
  }

  .order-xl-0 {
    order: 0;
  }

  .order-xl-1 {
    order: 1;
  }

  .order-xl-2 {
    order: 2;
  }

  .order-xl-3 {
    order: 3;
  }

  .order-xl-4 {
    order: 4;
  }

  .order-xl-5 {
    order: 5;
  }

  .order-xl-6 {
    order: 6;
  }

  .order-xl-7 {
    order: 7;
  }

  .order-xl-8 {
    order: 8;
  }

  .order-xl-9 {
    order: 9;
  }

  .order-xl-10 {
    order: 10;
  }

  .order-xl-11 {
    order: 11;
  }

  .order-xl-12 {
    order: 12;
  }

  .offset-xl-0 {
    margin-left: 0;
  }

  .offset-xl-1 {
    margin-left: 8.333333%;
  }

  .offset-xl-2 {
    margin-left: 16.666667%;
  }

  .offset-xl-3 {
    margin-left: 25%;
  }

  .offset-xl-4 {
    margin-left: 33.333333%;
  }

  .offset-xl-5 {
    margin-left: 41.666667%;
  }

  .offset-xl-6 {
    margin-left: 50%;
  }

  .offset-xl-7 {
    margin-left: 58.333333%;
  }

  .offset-xl-8 {
    margin-left: 66.666667%;
  }

  .offset-xl-9 {
    margin-left: 75%;
  }

  .offset-xl-10 {
    margin-left: 83.333333%;
  }

  .offset-xl-11 {
    margin-left: 91.666667%;
  }
}

/* 2xl断点（≥1536px） */
@media (min-width: 1536px) {
  .col-2xl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-2xl-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-2xl-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .col-2xl-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .col-2xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-2xl-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-2xl-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .col-2xl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-2xl-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .col-2xl-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .col-2xl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-2xl-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .col-2xl-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .col-2xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-2xl-first {
    order: -1;
  }

  .order-2xl-last {
    order: 13;
  }

  .order-2xl-0 {
    order: 0;
  }

  .order-2xl-1 {
    order: 1;
  }

  .order-2xl-2 {
    order: 2;
  }

  .order-2xl-3 {
    order: 3;
  }

  .order-2xl-4 {
    order: 4;
  }

  .order-2xl-5 {
    order: 5;
  }

  .order-2xl-6 {
    order: 6;
  }

  .order-2xl-7 {
    order: 7;
  }

  .order-2xl-8 {
    order: 8;
  }

  .order-2xl-9 {
    order: 9;
  }

  .order-2xl-10 {
    order: 10;
  }

  .order-2xl-11 {
    order: 11;
  }

  .order-2xl-12 {
    order: 12;
  }

  .offset-2xl-0 {
    margin-left: 0;
  }

  .offset-2xl-1 {
    margin-left: 8.333333%;
  }

  .offset-2xl-2 {
    margin-left: 16.666667%;
  }

  .offset-2xl-3 {
    margin-left: 25%;
  }

  .offset-2xl-4 {
    margin-left: 33.333333%;
  }

  .offset-2xl-5 {
    margin-left: 41.666667%;
  }

  .offset-2xl-6 {
    margin-left: 50%;
  }

  .offset-2xl-7 {
    margin-left: 58.333333%;
  }

  .offset-2xl-8 {
    margin-left: 66.666667%;
  }

  .offset-2xl-9 {
    margin-left: 75%;
  }

  .offset-2xl-10 {
    margin-left: 83.333333%;
  }

  .offset-2xl-11 {
    margin-left: 91.666667%;
  }
}

/* 网格系统辅助类 */
.g-0 {
  margin-right: 0;
  margin-left: 0;
}

.g-0>[class^="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.g-1 {
  margin-right: -0.25rem;
  margin-left: -0.25rem;
}

.g-1>[class^="col-"] {
  padding-right: 0.25rem;
  padding-left: 0.25rem;
}

.g-2 {
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}

.g-2>[class^="col-"] {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.g-3 {
  margin-right: -1rem;
  margin-left: -1rem;
}

.g-3>[class^="col-"] {
  padding-right: 1rem;
  padding-left: 1rem;
}

.g-4 {
  margin-right: -1.5rem;
  margin-left: -1.5rem;
}

.g-4>[class^="col-"] {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

.g-5 {
  margin-right: -3rem;
  margin-left: -3rem;
}

.g-5>[class^="col-"] {
  padding-right: 3rem;
  padding-left: 3rem;
}

* 嵌套栅格专用类 */ .nested-grid {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}

/* 双飞翼 */
.nested-fix {
  margin-right: 0;
  margin-left: 0;
}

.nested-fix>[class*="col-"] {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

/* 嵌套栅格间距变体 */
.nested-grid-gap-0 {
  margin-right: 0;
  margin-left: 0;
}

.nested-grid-gap-0>[class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.nested-grid-gap-1 {
  margin-right: -0.25rem;
  margin-left: -0.25rem;
}

.nested-grid-gap-1>[class*="col-"] {
  padding-right: 0.25rem;
  padding-left: 0.25rem;
}

.nested-grid-gap-2 {
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}

.nested-grid-gap-2>[class*="col-"] {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.nested-grid-gap-3 {
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}

.nested-grid-gap-3>[class*="col-"] {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

/* 为嵌套栅格的容器提供清除浮动和全宽容器 */
.nested-container {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}

/* 嵌套栅格等高行 */
.nested-grid-equal-height {
  display: flex;
  flex-wrap: wrap;
}

.nested-grid-equal-height>[class*="col-"] {
  display: flex;
  flex-direction: column;
}

/* 嵌套栅格对齐类 */
.nested-grid-align-top {
  align-items: flex-start;
}

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

.nested-grid-align-bottom {
  align-items: flex-end;
}

/* 嵌套栅格内容布局类 */
.nested-content-stretch {
  height: 100%;
}

/* 辅助类：嵌套容器内的全宽元素 */
.nested-full-width {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  width: calc(100% + 1rem);
}

/* 嵌套栅格的响应式工具类 */
@media (min-width: 768px) {
  .md\:nested-reset {
    margin-left: 0;
    margin-right: 0;
  }

  .md\:nested-expand {
    margin-left: -1rem;
    margin-right: -1rem;
  }
}

/* 响应式可见性类 */
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg,
.visible-xl,
.visible-2xl,
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block,
.visible-xl-block,
.visible-xl-inline,
.visible-xl-inline-block,
.visible-2xl-block,
.visible-2xl-inline,
.visible-2xl-inline-block {
  display: none !important;
}

@media (max-width: 640px) {
  .visible-xs {
    display: block !important;
  }

  table.visible-xs {
    display: table;
  }

  tr.visible-xs {
    display: table-row !important;
  }

  th.visible-xs,
  td.visible-xs {
    display: table-cell !important;
  }

  .hidden-xs {
    display: none !important;
  }

  .visible-xs-block {
    display: block !important;
  }

  .visible-xs-inline {
    display: inline !important;
  }

  .visible-xs-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  .visible-sm {
    display: block !important;
  }

  table.visible-sm {
    display: table;
  }

  tr.visible-sm {
    display: table-row !important;
  }

  th.visible-sm,
  td.visible-sm {
    display: table-cell !important;
  }

  .hidden-sm {
    display: none !important;
  }

  .visible-sm-block {
    display: block !important;
  }

  .visible-sm-inline {
    display: inline !important;
  }

  .visible-sm-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .visible-md {
    display: block !important;
  }

  table.visible-md {
    display: table;
  }

  tr.visible-md {
    display: table-row !important;
  }

  th.visible-md,
  td.visible-md {
    display: table-cell !important;
  }

  .hidden-md {
    display: none !important;
  }

  .visible-md-block {
    display: block !important;
  }

  .visible-md-inline {
    display: inline !important;
  }

  .visible-md-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .visible-lg {
    display: block !important;
  }

  table.visible-lg {
    display: table;
  }

  tr.visible-lg {
    display: table-row !important;
  }

  th.visible-lg,
  td.visible-lg {
    display: table-cell !important;
  }

  .hidden-lg {
    display: none !important;
  }

  .visible-lg-block {
    display: block !important;
  }

  .visible-lg-inline {
    display: inline !important;
  }

  .visible-lg-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 1280px) and (max-width: 1535px) {
  .visible-xl {
    display: block !important;
  }

  table.visible-xl {
    display: table;
  }

  tr.visible-xl {
    display: table-row !important;
  }

  th.visible-xl,
  td.visible-xl {
    display: table-cell !important;
  }

  .hidden-xl {
    display: none !important;
  }

  .visible-xl-block {
    display: block !important;
  }

  .visible-xl-inline {
    display: inline !important;
  }

  .visible-xl-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 1536px) {
  .visible-2xl {
    display: block !important;
  }

  table.visible-2xl {
    display: table;
  }

  tr.visible-2xl {
    display: table-row !important;
  }

  th.visible-2xl,
  td.visible-2xl {
    display: table-cell !important;
  }

  .hidden-2xl {
    display: none !important;
  }

  .visible-2xl-block {
    display: block !important;
  }

  .visible-2xl-inline {
    display: inline !important;
  }

  .visible-2xl-inline-block {
    display: inline-block !important;
  }
}

/* 显示类型 */
/* 可见性实用类 */
.none,
.hidden {
  display: none !important;
}

.visible {
  visibility: visible;
}

.inline {
  display: inline !important;
}

.inline-block {
  display: inline-block !important;
}

.block {
  display: block !important;
}

.flex {
  display: flex !important;
}
.flex-shrink-0 { flex-shrink: 0; }
.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.table-cell {
  display: table-cell;
}

.table-row {
  display: table-row;
}

.invisible {
  visibility: hidden;
}

.contents {
  display: contents;
}

.list-item {
  display: list-item;
}

.grid {
  display: grid !important;
}

.inline-grid {
  display: inline-grid !important;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-clip {
  overflow: clip;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

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

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

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

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

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

.overflow-y-clip {
  overflow-y: clip;
}

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

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

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

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

.overflow-overlay {
  overflow: overlay;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  bottom: var(--spacing-0);
  left: var(--spacing-0);
  right: var(--spacing-0);
  top: var(--spacing-0);
}

.inset-auto {
  bottom: auto;
  left: auto;
  right: auto;
  top: auto;
}

.inset-x-0 {
  left: var(--spacing-0);
  right: var(--spacing-0);
}

.inset-y-0 {
  bottom: var(--spacing-0);
  top: var(--spacing-0);
}

.top-0 {
  top: var(--spacing-0);
}

.right-0 {
  right: var(--spacing-0);
}

.bottom-0 {
  bottom: var(--spacing-0);
}

.left-0 {
  left: var(--spacing-0);
}

.top-full {
  top: 100%;
}

.right-full {
  right: 100%;
}

.bottom-full {
  bottom: 100%;
}

.left-full {
  left: 100%;
}

.top-auto {
  top: auto;
}

.right-auto {
  right: auto;
}

.bottom-auto {
  bottom: auto;
}

.left-auto {
  left: auto;
}

.top-px {
  top: var(--spacing-pxpx);
}

.right-px {
  right: var(--spacing-pxpx);
}

.bottom-px {
  bottom: var(--spacing-pxpx);
}

.left-px {
  left: var(--spacing-pxpx);
}

.top-0\.5 {
  top: var(--spacing-0\.5);
}

.right-0\.5 {
  right: var(--spacing-0\.5);
}

.bottom-0\.5 {
  bottom: var(--spacing-0\.5);
}

.left-0\.5 {
  left: var(--spacing-0\.5);
}

.top-1 {
  top: var(--spacing-1);
}

.right-1 {
  right: var(--spacing-1);
}

.bottom-1 {
  bottom: var(--spacing-1);
}

.left-1 {
  left: var(--spacing-1);
}

.top-1\.5 {
  top: var(--spacing-1\.5);
}

.right-1\.5 {
  right: var(--spacing-1\.5);
}

.bottom-1\.5 {
  bottom: var(--spacing-1\.5);
}

.left-1\.5 {
  left: var(--spacing-1\.5);
}

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

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

.bottom-2 {
  bottom: var(--spacing-2);
}

.left-2 {
  left: var(--spacing-2);
}

.top-2\.5 {
  top: var(--spacing-2\.5);
}

.right-2\.5 {
  right: var(--spacing-2\.5);
}

.bottom-2\.5 {
  bottom: var(--spacing-2\.5);
}

.left-2\.5 {
  left: var(--spacing-2\.5);
}

.top-3 {
  top: var(--spacing-3);
}

.right-3 {
  right: var(--spacing-3);
}

.bottom-3 {
  bottom: var(--spacing-3);
}

.left-3 {
  left: var(--spacing-3);
}

.top-3\.5 {
  top: var(--spacing-3\.5);
}

.right-3\.5 {
  right: var(--spacing-3\.5);
}

.bottom-3\.5 {
  bottom: var(--spacing-3\.5);
}

.left-3\.5 {
  left: var(--spacing-3\.5);
}

.top-4 {
  top: var(--spacing-4);
}

.right-4 {
  right: var(--spacing-4);
}

.bottom-4 {
  bottom: var(--spacing-4);
}

.left-4 {
  left: var(--spacing-4);
}

.top-5 {
  top: var(--spacing-5);
}

.right-5 {
  right: var(--spacing-5);
}

.bottom-5 {
  bottom: var(--spacing-5);
}

.left-5 {
  left: var(--spacing-5);
}

.top-6 {
  top: var(--spacing-6);
}

.right-6 {
  right: var(--spacing-6);
}

.bottom-6 {
  bottom: var(--spacing-6);
}

.left-6 {
  left: var(--spacing-6);
}

.top-7 {
  top: var(--spacing-7);
}

.right-7 {
  right: var(--spacing-7);
}

.bottom-7 {
  bottom: var(--spacing-7);
}

.left-7 {
  left: var(--spacing-7);
}

.top-8 {
  top: var(--spacing-8);
}

.right-8 {
  right: var(--spacing-8);
}

.bottom-8 {
  bottom: var(--spacing-8);
}

.left-8 {
  left: var(--spacing-8);
}

.top-9 {
  top: var(--spacing-9);
}

.right-9 {
  right: var(--spacing-9);
}

.bottom-9 {
  bottom: var(--spacing-9);
}

.left-9 {
  left: var(--spacing-9);
}

.top-10 {
  top: var(--spacing-10);
}

.right-10 {
  right: var(--spacing-10);
}

.bottom-10 {
  bottom: var(--spacing-10);
}

.left-10 {
  left: var(--spacing-10);
}

.top-11 {
  top: var(--spacing-11);
}

.right-11 {
  right: var(--spacing-11);
}

.bottom-11 {
  bottom: var(--spacing-11);
}

.left-11 {
  left: var(--spacing-11);
}

.top-12 {
  top: var(--spacing-12);
}

.right-12 {
  right: var(--spacing-12);
}

.bottom-12 {
  bottom: var(--spacing-12);
}

.left-12 {
  left: var(--spacing-12);
}

.left-1\/2 {
  left: 50%;
}

.right-1\/2 {
  right: 50%;
}

.top-1\/2 {
  top: 50%;
}

.bottom-1\/2 {
  bottom: 50%;
}

.translate-x-1\/2 {
  transform: translateX(50%);
}
.-translate-x-1\/2 {
  transform: translateX(-50%);
}
.translate-y-1\/2 {
  transform: translateY(50%);
}
.-translate-y-1\/2 {
  transform: translateY(-50%);
}
.translate-x-1\/3 {
  transform: translateX(33.3333%);
}
.-translate-x-1\/3 {
  transform: translateX(-33.3333%);
}
.translate-y-1\/3{
  transform: translateY(33.3333%);
}
.-translate-y-1\/3 {
  transform: translateY(-33.3333%);
}
.translate-x-1\/4 {
  transform: translateX(25%);
}
.-translate-x-1\/4 {
  transform: translateX(-25%);
}
.translate-y-1\/4 {
  transform: translateY(25%);
}
.-translate-y-1\/4 {
  transform: translateY(-25%);
}
.translate-x-1\/5 {
  transform: translateX(20%);
}
.-translate-x-1\/5 {
  transform: translateX(-20%);
}
.translate-y-1\/5 {
  transform: translateY(20%);
}
.-translate-y-1\/5 {
  transform: translateY(-20%);
}
/* 响应式显示实用类 */
@media (min-width: 640px) {

  .none-sm,
  .hidden-sm {
    display: none !important;
  }

  .inline-sm {
    display: inline !important;
  }

  .inline-block-sm {
    display: inline-block !important;
  }

  .block-sm {
    display: block !important;
  }

  .flex-sm {
    display: flex !important;
  }

  .grid-sm {
    display: grid !important;
  }
}

@media (min-width: 768px) {

  .none-md,
  .hidden-md {
    display: none !important;
  }

  .inline-md {
    display: inline !important;
  }

  .inline-block-md {
    display: inline-block !important;
  }

  .block-md {
    display: block !important;
  }

  .flex-md {
    display: flex !important;
  }

  .grid-md {
    display: grid !important;
  }
}

@media (min-width: 1024px) {

  .none-lg,
  .hidden-lg {
    display: none !important;
  }

  .inline-lg {
    display: inline !important;
  }

  .inline-block-lg {
    display: inline-block !important;
  }

  .block-lg {
    display: block !important;
  }

  .flex-lg {
    display: flex !important;
  }

  .grid-lg {
    display: grid !important;
  }
}

@media (min-width: 1280px) {

  .none-xl,
  .hidden-xl {
    display: none !important;
  }

  .inline-xl {
    display: inline !important;
  }

  .inline-block-xl {
    display: inline-block !important;
  }

  .block-xl {
    display: block !important;
  }

  .flex-xl {
    display: flex !important;
  }

  .grid-xl {
    display: grid !important;
  }
}

@media (min-width: 1536px) {

  .none-2xl,
  .hidden-2xl {
    display: none !important;
  }

  .inline-2xl {
    display: inline !important;
  }

  .inline-block-2xl {
    display: inline-block !important;
  }

  .block-2xl {
    display: block !important;
  }

  .flex-2xl {
    display: flex !important;
  }

  .grid-2xl {
    display: grid !important;
  }
}

/*等分*/
[class*="equal-"] {
  display: flex;
  flex-wrap: wrap;
}

/* 基础样式 - 所有等分组件中的列表项 */
[class*="equal-"]>li {
  flex: 0 0 auto;
  box-sizing: border-box;
}

/* 定义1-12等分 */
.equal-1>li {
  width: 100%;
}

.equal-2>li {
  width: calc(100% / 2);
}

.equal-3>li {
  width: calc(100% / 3);
}

.equal-4>li {
  width: calc(100% / 4);
}

.equal-5>li {
  width: calc(100% / 5);
}

.equal-6>li {
  width: calc(100% / 6);
}

.equal-7>li {
  width: calc(100% / 7);
}

.equal-8>li {
  width: calc(100% / 8);
}

.equal-9>li {
  width: calc(100% / 9);
}

.equal-10>li {
  width: calc(100% / 10);
}

.equal-11>li {
  width: calc(100% / 11);
}

.equal-12>li {
  width: calc(100% / 12);
}

/* 响应式设计 - 中等屏幕 */
@media (max-width: 992px) {

  .equal-4>li,
  .equal-5>li,
  .equal-6>li,
  .equal-7>li,
  .equal-8>li {
    width: calc(100% / 3);
  }

  .equal-9>li,
  .equal-10>li,
  .equal-11>li,
  .equal-12>li {
    width: calc(100% / 4);
  }
}

/* 响应式设计 - 小屏幕 */
@media (max-width: 768px) {

  .equal-3>li,
  .equal-4>li,
  .equal-5>li,
  .equal-6>li {
    width: calc(100% / 2);
  }

  .equal-7>li,
  .equal-8>li,
  .equal-9>li,
  .equal-10>li,
  .equal-11>li,
  .equal-12>li {
    width: calc(100% / 3);
  }
}

/* 响应式设计 - 超小屏幕 */
@media (max-width: 576px) {
  [class^="equal-"]>li {
    width: 100%;
  }
}

/* 浮动 */
.float-right {
  float: right !important;
}

.float-left {
  float: left !important;
}

/* 清理浮动 */
.clearfix::after {
  content: "";
  display: block;
  clear: both !important;
}

.clearfix {
  zoom: 1 !important;
  /* For IE6/7 compatibility */
  clear: both;
}

/* 默认隐藏所有打印相关显示类 */
.visible-print,
.visible-print-block,
.visible-print-inline,
.visible-print-inline-block {
  display: none !important;
}

/* 打印样式 */
@media print {

  .visible-print,
  .visible-print-block {
    display: block !important;
  }

  table.visible-print {
    display: table !important;
  }

  tr.visible-print {
    display: table-row !important;
  }

  th.visible-print,
  td.visible-print {
    display: table-cell !important;
  }

  .visible-print-inline {
    display: inline !important;
  }

  .visible-print-inline-block {
    display: inline-block !important;
  }

  .hidden-print {
    display: none !important;
  }
}

/* 层级 */
.z-0 {
  z-index: 0;
}

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

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

.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-auto {
  z-index: auto;
}

.z-base {
  z-index: 1100;
}

.z-above {
  z-index: 50;
}

.z-below {
  z-index: -50;
}

.z-dropdown {
  z-index: 1200;
}

.z-sticky {
  z-index: 1300;
}

.z-fixed {
  z-index: 1400;
}

.z-modal {
  z-index: 1500;
}

.z-overlay {
  z-index: 1600;
}

.z-popover {
  z-index: 1700;
}

.z-tooltip {
  z-index: 1800;
}

.z-messager {
  z-index: 1900;
}

/*盒子*/

/* 🚀 终极原子CSS生成器 PRO v4.3 - 史上最完整的原子类生成器 */
/* 生成时间: 2025/11/26 09:37:28 */
/* 主题: default | 属性数: 27 | 变体数: 1 | 断点数: 0 */
/* v4.3更新: 修复透明度问题，优化配置选项默认状态，增强功能完整性 */

/* 基础类 */
.p-0 {
  padding: var(--spacing-0);
}

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

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

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

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

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

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

.p-7 {
  padding: var(--spacing-7);
}

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

.p-9 {
  padding: var(--spacing-9);
}

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

.p-11 {
  padding: var(--spacing-11);
}

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

.p-14 {
  padding: var(--spacing-14);
}

.p-16 {
  padding: var(--spacing-16);
}

.p-20 {
  padding: var(--spacing-20);
}

.p-24 {
  padding: var(--spacing-24);
}

.p-28 {
  padding: var(--spacing-28);
}

.p-32 {
  padding: var(--spacing-32);
}

.p-36 {
  padding: var(--spacing-36);
}

.p-40 {
  padding: var(--spacing-40);
}

.p-44 {
  padding: var(--spacing-44);
}

.p-48 {
  padding: var(--spacing-48);
}

.p-52 {
  padding: var(--spacing-52);
}

.p-56 {
  padding: var(--spacing-56);
}

.p-60 {
  padding: var(--spacing-60);
}

.p-64 {
  padding: var(--spacing-64);
}

.p-72 {
  padding: var(--spacing-72);
}

.p-80 {
  padding: var(--spacing-80);
}

.p-96 {
  padding: var(--spacing-96);
}

.p-px {
  padding: var(--spacing-px);
}

.p-0\.5 {
  padding: var(--spacing-0.5);
}

.p-1\.5 {
  padding: var(--spacing-1.5);
}

.p-2\.5 {
  padding: var(--spacing-2.5);
}

.p-3\.5 {
  padding: var(--spacing-3.5);
}

.p-auto {
  padding: var(--spacing-auto);
}

.p-1\/2 {
  padding: var(--spacing-1\/2);
}

.p-1\/3 {
  padding: var(--spacing-1\/3);
}

.p-2\/3 {
  padding: var(--spacing-2\/3);
}

.p-1\/4 {
  padding: var(--spacing-1\/4);
}

.p-2\/4 {
  padding: var(--spacing-2\/4);
}

.p-3\/4 {
  padding: var(--spacing-3\/4);
}

.p-1\/5 {
  padding: var(--spacing-1\/5);
}

.p-2\/5 {
  padding: var(--spacing-2\/5);
}

.p-3\/5 {
  padding: var(--spacing-3\/5);
}

.p-4\/5 {
  padding: var(--spacing-4\/5);
}

.p-1\/6 {
  padding: var(--spacing-1\/6); 
}

.p-2\/6 {
  padding: var(--spacing-2\/6);
}

.p-3\/6 {
  padding: var(--spacing-3\/6);
}

.p-4\/6 {
  padding: var(--spacing-4\/6);
}

.p-5\/6 {
  padding: var(--spacing-5\/6); 
}

.p-full {
  padding: var(--spacing-full);
}

.p-screen {
  padding: var(--spacing-screen);
}

.p-min {
  padding: var(--spacing-min);
}

.p-max {
  padding: var(--spacing-max);
}

.p-fit {
  padding: var(--spacing-fit);
}

.px-0 {
  padding-left: var(--spacing-0);
  padding-right: var(--spacing-0);
}

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

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

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

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

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

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

.px-7 {
  padding-left: var(--spacing-7);
  padding-right: var(--spacing-7);
}

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

.px-9 {
  padding-left: var(--spacing-9);
  padding-right: var(--spacing-9);
}

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

.px-11 {
  padding-left: var(--spacing-11);
  padding-right: var(--spacing-11);
}

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

.px-14 {
  padding-left: var(--spacing-14);
  padding-right: var(--spacing-14);
}

.px-16 {
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
}

.px-20 {
  padding-left: var(--spacing-20);
  padding-right: var(--spacing-20);
}

.px-24 {
  padding-left: var(--spacing-24);
  padding-right: var(--spacing-24);
}

.px-28 {
  padding-left: var(--spacing-28);
  padding-right: var(--spacing-28);
}

.px-32 {
  padding-left: var(--spacing-32);
  padding-right: var(--spacing-32);
}

.px-36 {
  padding-left: var(--spacing-36);
  padding-right: var(--spacing-36);
}

.px-40 {
  padding-left: var(--spacing-40);
  padding-right: var(--spacing-40);
}

.px-44 {
  padding-left: var(--spacing-44);
  padding-right: var(--spacing-44);
}

.px-48 {
  padding-left: var(--spacing-48);
  padding-right: var(--spacing-48);
}

.px-52 {
  padding-left: var(--spacing-52);
  padding-right: var(--spacing-52);
}

.px-56 {
  padding-left: var(--spacing-56);
  padding-right: var(--spacing-56);
}

.px-60 {
  padding-left: var(--spacing-60);
  padding-right: var(--spacing-60);
}

.px-64 {
  padding-left: var(--spacing-64);
  padding-right: var(--spacing-64);
}

.px-72 {
  padding-left: var(--spacing-72);
  padding-right: var(--spacing-72);
}

.px-80 {
  padding-left: var(--spacing-80);
  padding-right: var(--spacing-80);
}

.px-96 {
  padding-left: var(--spacing-96);
  padding-right: var(--spacing-96);
}

.px-px {
  padding-left: var(--spacing-px);
  padding-right: var(--spacing-px);
}

.px-0\.5 {
  padding-left: var(--spacing-0.5);
  padding-right: var(--spacing-0.5);
}

.px-1\.5 {
  padding-left: var(--spacing-1.5);
  padding-right: var(--spacing-1.5);
}

.px-2\.5 {
  padding-left: var(--spacing-2.5);
  padding-right: var(--spacing-2.5);
}

.px-3\.5 {
  padding-left: var(--spacing-3.5);
  padding-right: var(--spacing-3.5);
}

.px-auto {
  padding-left: var(--spacing-auto);
  padding-right: var(--spacing-auto);
}

.px-1\/2 {
  padding-left: var(--spacing-1\/2);
  padding-right: var(--spacing-1\/2);
}

.px-1\/3 {
  padding-left: var(--spacing-1\/3);
  padding-right: var(--spacing-1\/3);   
}

.px-2\/3 {
  padding-left: var(--spacing-2/3);
  padding-right: var(--spacing-2/3);
}

.px-1\/4 {
  padding-left: var(--spacing-1\/4);
  padding-right: var(--spacing-1\/4);
}

.px-2\/4 {
  padding-left: var(--spacing-2\/4);
  padding-right: var(--spacing-2\/4);
}

.px-3\/4 {
  padding-left: var(--spacing-3\/4);
  padding-right: var(--spacing-3\/4);
}

.px-1\/5 {
  padding-left: var(--spacing-1\/5);
  padding-right: var(--spacing-1\/5);
}

.px-2\/5 {
  padding-left: var(--spacing-2\/5);
  padding-right: var(--spacing-2\/5);
}

.px-3\/5 {
  padding-left: var(--spacing-3\/5);
  padding-right: var(--spacing-3\/5);
}

.px-4\/5 {
  padding-left: var(--spacing-4\/5);
  padding-right: var(--spacing-4\/5);
}

.px-1\/6 {
  padding-left: var(--spacing-1\/6);
  padding-right: var(--spacing-1\/6);
}

.px-2\/6 {
  padding-left: var(--spacing-2\/6);
  padding-right: var(--spacing-2\/6);
}

.px-3\/6 {
  padding-left: var(--spacing-3\/6);
  padding-right: var(--spacing-3\/6);
}

.px-4\/6 {
  padding-left: var(--spacing-4\/6);
  padding-right: var(--spacing-4\/6);
}

.px-5\/6 {
  padding-left: var(--spacing-5\/6);
  padding-right: var(--spacing-5\/6);
}

.px-full {
  padding-left: var(--spacing-full);
  padding-right: var(--spacing-full);
}

.px-screen {
  padding-left: var(--spacing-screen);
  padding-right: var(--spacing-screen);
}

.px-min {
  padding-left: var(--spacing-min);
  padding-right: var(--spacing-min);
}

.px-max {
  padding-left: var(--spacing-max);
  padding-right: var(--spacing-max);
}

.px-fit {
  padding-left: var(--spacing-fit);
  padding-right: var(--spacing-fit);
}

.py-0 {
  padding-top: var(--spacing-0);
  padding-bottom: var(--spacing-0);
}

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

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

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

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

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

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

.py-7 {
  padding-top: var(--spacing-7);
  padding-bottom: var(--spacing-7);
}

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

.py-9 {
  padding-top: var(--spacing-9);
  padding-bottom: var(--spacing-9);
}

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

.py-11 {
  padding-top: var(--spacing-11);
  padding-bottom: var(--spacing-11);
}

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

.py-14 {
  padding-top: var(--spacing-14);
  padding-bottom: var(--spacing-14);
}

.py-16 {
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-16);
}

.py-20 {
  padding-top: var(--spacing-20);
  padding-bottom: var(--spacing-20);
}

.py-24 {
  padding-top: var(--spacing-24);
  padding-bottom: var(--spacing-24);
}

.py-28 {
  padding-top: var(--spacing-28);
  padding-bottom: var(--spacing-28);
}

.py-32 {
  padding-top: var(--spacing-32);
  padding-bottom: var(--spacing-32);
}

.py-36 {
  padding-top: var(--spacing-36);
  padding-bottom: var(--spacing-36);
}

.py-40 {
  padding-top: var(--spacing-40);
  padding-bottom: var(--spacing-40);
}

.py-44 {
  padding-top: var(--spacing-44);
  padding-bottom: var(--spacing-44);
}

.py-48 {
  padding-top: var(--spacing-48);
  padding-bottom: var(--spacing-48);
}

.py-52 {
  padding-top: var(--spacing-52);
  padding-bottom: var(--spacing-52);
}

.py-56 {
  padding-top: var(--spacing-56);
  padding-bottom: var(--spacing-56);
}

.py-60 {
  padding-top: var(--spacing-60);
  padding-bottom: var(--spacing-60);
}

.py-64 {
  padding-top: var(--spacing-64);
  padding-bottom: var(--spacing-64);
}

.py-72 {
  padding-top: var(--spacing-72);
  padding-bottom: var(--spacing-72);
}

.py-80 {
  padding-top: var(--spacing-80);
  padding-bottom: var(--spacing-80);
}

.py-96 {
  padding-top: var(--spacing-96);
  padding-bottom: var(--spacing-96);
}

.py-px {
  padding-top: var(--spacing-px);
  padding-bottom: var(--spacing-px);
}

.py-0\.5 {
  padding-top: var(--spacing-0.5);
  padding-bottom: var(--spacing-0.5);
}

.py-1\.5 {
  padding-top: var(--spacing-1.5);
  padding-bottom: var(--spacing-1.5);
}

.py-2\.5 {
  padding-top: var(--spacing-2.5);
  padding-bottom: var(--spacing-2.5);
}

.py-3\.5 {
  padding-top: var(--spacing-3.5);
  padding-bottom: var(--spacing-3.5);
}

.py-auto {
  padding-top: var(--spacing-auto);
  padding-bottom: var(--spacing-auto);
}

.py-1\/2 {
  padding-top: var(--spacing-1\/2);
  padding-bottom: var(--spacing-1\/2);
}

.py-1\/3 {
  padding-top: var(--spacing-1\/3);
  padding-bottom: var(--spacing-1\/3);
}

.py-2\/3 {
  padding-top: var(--spacing-2\/3);
  padding-bottom: var(--spacing-2\/3);
}

.py-1\/4 {
  padding-top: var(--spacing-1\/4);
  padding-bottom: var(--spacing-1\/4);
}

.py-2\/4 {
  padding-top: var(--spacing-2\/4);
  padding-bottom: var(--spacing-2\/4);
}

.py-3\/4 {
  padding-top: var(--spacing-3\/4);
  padding-bottom: var(--spacing-3\/4);
}

.py-1\/5 {
  padding-top: var(--spacing-1\/5);
  padding-bottom: var(--spacing-1\/5);  
}

.py-2\/5 {
  padding-top: var(--spacing-2\/5);
  padding-bottom: var(--spacing-2\/5);
}

.py-3\/5 {
  padding-top: var(--spacing-3\/5);
  padding-bottom: var(--spacing-3\/5);
}

.py-4\/5 {
  padding-top: var(--spacing-4\/5);
  padding-bottom: var(--spacing-4\/5);
}

.py-1\/6 {
  padding-top: var(--spacing-1\/6);
  padding-bottom: var(--spacing-1\/6);
}

.py-2\/6 {
  padding-top: var(--spacing-2\/6);
  padding-bottom: var(--spacing-2\/6);
}

.py-3\/6 {
  padding-top: var(--spacing-3\/6);
  padding-bottom: var(--spacing-3\/6);
}

.py-4\/6 {
  padding-top: var(--spacing-4\/6);
  padding-bottom: var(--spacing-4\/6);
}

.py-5\/6 {
  padding-top: var(--spacing-5\/6);
  padding-bottom: var(--spacing-5\/6);
}

.py-full {
  padding-top: var(--spacing-full);
  padding-bottom: var(--spacing-full);
}

.py-screen {
  padding-top: var(--spacing-screen);
  padding-bottom: var(--spacing-screen);
}

.py-min {
  padding-top: var(--spacing-min);
  padding-bottom: var(--spacing-min);
}

.py-max {
  padding-top: var(--spacing-max);
  padding-bottom: var(--spacing-max);
}

.py-fit {
  padding-top: var(--spacing-fit);
  padding-bottom: var(--spacing-fit);
}

.pt-0 {
  padding-top: var(--spacing-0);
}

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

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

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

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

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

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

.pt-7 {
  padding-top: var(--spacing-7);
}

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

.pt-9 {
  padding-top: var(--spacing-9);
}

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

.pt-11 {
  padding-top: var(--spacing-11);
}

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

.pt-14 {
  padding-top: var(--spacing-14);
}

.pt-16 {
  padding-top: var(--spacing-16);
}

.pt-20 {
  padding-top: var(--spacing-20);
}

.pt-24 {
  padding-top: var(--spacing-24);
}

.pt-28 {
  padding-top: var(--spacing-28);
}

.pt-32 {
  padding-top: var(--spacing-32);
}

.pt-36 {
  padding-top: var(--spacing-36);
}

.pt-40 {
  padding-top: var(--spacing-40);
}

.pt-44 {
  padding-top: var(--spacing-44);
}

.pt-48 {
  padding-top: var(--spacing-48);
}

.pt-52 {
  padding-top: var(--spacing-52);
}

.pt-56 {
  padding-top: var(--spacing-56);
}

.pt-60 {
  padding-top: var(--spacing-60);
}

.pt-64 {
  padding-top: var(--spacing-64);
}

.pt-72 {
  padding-top: var(--spacing-72);
}

.pt-80 {
  padding-top: var(--spacing-80);
}

.pt-96 {
  padding-top: var(--spacing-96);
}

.pt-px {
  padding-top: var(--spacing-px);
}

.pt-0\.5 {
  padding-top: var(--spacing-0.5);
}

.pt-1\.5 {
  padding-top: var(--spacing-1.5);
}

.pt-2\.5 {
  padding-top: var(--spacing-2.5);
}

.pt-3\.5 {
  padding-top: var(--spacing-3.5);
}

.pt-auto {
  padding-top: var(--spacing-auto);
}

.pt-1\/2 {
  padding-top: var(--spacing-1\/2);
}

.pt-1\/3 {
  padding-top: var(--spacing-1\/3);
}

.pt-2\/3 {
  padding-top: var(--spacing-2\/3);
}

.pt-1\/4 {
  padding-top: var(--spacing-1\/4);
}

.pt-2\/4 {
  padding-top: var(--spacing-2\/4);
}

.pt-3\/4 {
  padding-top: var(--spacing-3\/4);
}

.pt-1\/5 {
  padding-top: var(--spacing-1\/5);
}

.pt-2\/5 {
  padding-top: var(--spacing-2\/5);
}

.pt-3\/5 {
  padding-top: var(--spacing-3\/5);
}

.pt-4\/5 {
  padding-top: var(--spacing-4\/5);
}

.pt-1\/6 {
  padding-top: var(--spacing-1\/6);
}

.pt-2\/6 {
  padding-top: var(--spacing-2\/6);
}

.pt-3\/6 {
  padding-top: var(--spacing-3\/6);
}

.pt-4\/6 {
  padding-top: var(--spacing-4\/6);
}

.pt-5\/6 {
  padding-top: var(--spacing-5\/6);
}

.pt-full {
  padding-top: var(--spacing-full);
}

.pt-screen {
  padding-top: var(--spacing-screen);
}

.pt-min {
  padding-top: var(--spacing-min);
}

.pt-max {
  padding-top: var(--spacing-max);
}

.pt-fit {
  padding-top: var(--spacing-fit);
}

.pr-0 {
  padding-right: var(--spacing-0);
}

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

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

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

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

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

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

.pr-7 {
  padding-right: var(--spacing-7);
}

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

.pr-9 {
  padding-right: var(--spacing-9);
}

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

.pr-11 {
  padding-right: var(--spacing-11);
}

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

.pr-14 {
  padding-right: var(--spacing-14);
}

.pr-16 {
  padding-right: var(--spacing-16);
}

.pr-20 {
  padding-right: var(--spacing-20);
}

.pr-24 {
  padding-right: var(--spacing-24);
}

.pr-28 {
  padding-right: var(--spacing-28);
}

.pr-32 {
  padding-right: var(--spacing-32);
}

.pr-36 {
  padding-right: var(--spacing-36);
}

.pr-40 {
  padding-right: var(--spacing-40);
}

.pr-44 {
  padding-right: var(--spacing-44);
}

.pr-48 {
  padding-right: var(--spacing-48);
}

.pr-52 {
  padding-right: var(--spacing-52);
}

.pr-56 {
  padding-right: var(--spacing-56);
}

.pr-60 {
  padding-right: var(--spacing-60);
}

.pr-64 {
  padding-right: var(--spacing-64);
}

.pr-72 {
  padding-right: var(--spacing-72);
}

.pr-80 {
  padding-right: var(--spacing-80);
}

.pr-96 {
  padding-right: var(--spacing-96);
}

.pr-px {
  padding-right: var(--spacing-px);
}

.pr-0\.5 {
  padding-right: var(--spacing-0.5);
}

.pr-1\.5 {
  padding-right: var(--spacing-1.5);
}

.pr-2\.5 {
  padding-right: var(--spacing-2.5);
}

.pr-3\.5 {
  padding-right: var(--spacing-3.5);
}

.pr-auto {
  padding-right: var(--spacing-auto);
}

.pr-1\/2 {
  padding-right: var(--spacing-1\/2);
}

.pr-1\/3 {
  padding-right: var(--spacing-1\/3);
}

.pr-2\/3 {
  padding-right: var(--spacing-2\/3);
}

.pr-1\/4 {
  padding-right: var(--spacing-1\/4);
}

.pr-2\/4 {
  padding-right: var(--spacing-2\/4);
}

.pr-3\/4 {
  padding-right: var(--spacing-3\/4);
}

.pr-1\/5 {
  padding-right: var(--spacing-1\/5);
}

.pr-2\/5 {
  padding-right: var(--spacing-2\/5);
}

.pr-3\/5 {
  padding-right: var(--spacing-3\/5);
}

.pr-4\/5 {
  padding-right: var(--spacing-4\/5);
}

.pr-1\/6 {
  padding-right: var(--spacing-1\/6);
}

.pr-2\/6 {
  padding-right: var(--spacing-2\/6);
}

.pr-3\/6 {
  padding-right: var(--spacing-3\/6);
}

.pr-4\/6 {
  padding-right: var(--spacing-4\/6);
}

.pr-5\/6 {
  padding-right: var(--spacing-5\/6);
}

.pr-full {
  padding-right: var(--spacing-full);
}

.pr-screen {
  padding-right: var(--spacing-screen);
}

.pr-min {
  padding-right: var(--spacing-min);
}

.pr-max {
  padding-right: var(--spacing-max);
}

.pr-fit {
  padding-right: var(--spacing-fit);
}

.pb-0 {
  padding-bottom: var(--spacing-0);
}

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

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

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

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

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

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

.pb-7 {
  padding-bottom: var(--spacing-7);
}

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

.pb-9 {
  padding-bottom: var(--spacing-9);
}

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

.pb-11 {
  padding-bottom: var(--spacing-11);
}

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

.pb-14 {
  padding-bottom: var(--spacing-14);
}

.pb-16 {
  padding-bottom: var(--spacing-16);
}

.pb-20 {
  padding-bottom: var(--spacing-20);
}

.pb-24 {
  padding-bottom: var(--spacing-24);
}

.pb-28 {
  padding-bottom: var(--spacing-28);
}

.pb-32 {
  padding-bottom: var(--spacing-32);
}

.pb-36 {
  padding-bottom: var(--spacing-36);
}

.pb-40 {
  padding-bottom: var(--spacing-40);
}

.pb-44 {
  padding-bottom: var(--spacing-44);
}

.pb-48 {
  padding-bottom: var(--spacing-48);
}

.pb-52 {
  padding-bottom: var(--spacing-52);
}

.pb-56 {
  padding-bottom: var(--spacing-56);
}

.pb-60 {
  padding-bottom: var(--spacing-60);
}

.pb-64 {
  padding-bottom: var(--spacing-64);
}

.pb-72 {
  padding-bottom: var(--spacing-72);
}

.pb-80 {
  padding-bottom: var(--spacing-80);
}

.pb-96 {
  padding-bottom: var(--spacing-96);
}

.pb-px {
  padding-bottom: var(--spacing-px);
}

.pb-0\.5 {
  padding-bottom: var(--spacing-0.5);
}

.pb-1\.5 {
  padding-bottom: var(--spacing-1.5);
}

.pb-2\.5 {
  padding-bottom: var(--spacing-2.5);
}

.pb-3\.5 {
  padding-bottom: var(--spacing-3.5);
}

.pb-auto {
  padding-bottom: var(--spacing-auto);
}

.pb-1\/2 {
  padding-bottom: var(--spacing-1\/2);
}

.pb-1\/3 {
  padding-bottom: var(--spacing-1\/3);
}

.pb-2\/3 {
  padding-bottom: var(--spacing-2\/3);
}

.pb-1\/4 {
  padding-bottom: var(--spacing-1\/4);
}

.pb-2\/4 {
  padding-bottom: var(--spacing-2\/4);
}

.pb-3\/4 {
  padding-bottom: var(--spacing-3\/4);
}

.pb-1\/5 {
  padding-bottom: var(--spacing-1\/5);    
}

.pb-1\/3 {
  padding-bottom: var(--spacing-1\/3);
}

.pb-2\/3 {
  padding-bottom: var(--spacing-2\/3);
}

.pb-1\/4 {
  padding-bottom: var(--spacing-1\/4);
}

.pb-2\/4 {
  padding-bottom: var(--spacing-2\/4);
}

.pb-3\/4 {
  padding-bottom: var(--spacing-3\/4);
}

.pb-1\/5 {
  padding-bottom: var(--spacing-1\/5);
}

.pb-2\/5 {
  padding-bottom: var(--spacing-2\/5);
}

.pb-3\/5 {
  padding-bottom: var(--spacing-3\/5);
}

.pb-4\/5 {
  padding-bottom: var(--spacing-4\/5);
}

.pb-1\/6 {
  padding-bottom: var(--spacing-1\/6);
}

.pb-2\/6 {
  padding-bottom: var(--spacing-2\/6);
}

.pb-3\/6 {
  padding-bottom: var(--spacing-3\/6);
}

.pb-4\/6 {
  padding-bottom: var(--spacing-4\/6);
}

.pb-5\/6 {
  padding-bottom: var(--spacing-5\/6);
}

.pb-full {
  padding-bottom: var(--spacing-full);
}

.pb-screen {
  padding-bottom: var(--spacing-screen);
}

.pb-min {
  padding-bottom: var(--spacing-min);
}

.pb-max {
  padding-bottom: var(--spacing-max);
}

.pb-fit {
  padding-bottom: var(--spacing-fit);
}

.pl-0 {
  padding-left: var(--spacing-0);
}

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

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

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

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

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

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

.pl-7 {
  padding-left: var(--spacing-7);
}

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

.pl-9 {
  padding-left: var(--spacing-9);
}

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

.pl-11 {
  padding-left: var(--spacing-11);
}

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

.pl-14 {
  padding-left: var(--spacing-14);
}

.pl-16 {
  padding-left: var(--spacing-16);
}

.pl-20 {
  padding-left: var(--spacing-20);
}

.pl-24 {
  padding-left: var(--spacing-24);
}

.pl-28 {
  padding-left: var(--spacing-28);
}

.pl-32 {
  padding-left: var(--spacing-32);
}

.pl-36 {
  padding-left: var(--spacing-36);
}

.pl-40 {
  padding-left: var(--spacing-40);
}

.pl-44 {
  padding-left: var(--spacing-44);
}

.pl-48 {
  padding-left: var(--spacing-48);
}

.pl-52 {
  padding-left: var(--spacing-52);
}

.pl-56 {
  padding-left: var(--spacing-56);
}

.pl-60 {
  padding-left: var(--spacing-60);
}

.pl-64 {
  padding-left: var(--spacing-64);
}

.pl-72 {
  padding-left: var(--spacing-72);
}

.pl-80 {
  padding-left: var(--spacing-80);
}

.pl-96 {
  padding-left: var(--spacing-96);
}

.pl-px {
  padding-left: var(--spacing-px);
}

.pl-0\.5 {
  padding-left: var(--spacing-0.5);
}

.pl-1\.5 {
  padding-left: var(--spacing-1.5);
}

.pl-2\.5 {
  padding-left: var(--spacing-2.5);
}

.pl-3\.5 {
  padding-left: var(--spacing-3.5);
}

.pl-auto {
  padding-left: var(--spacing-auto);
}

.pl-1\/2 {
  padding-left: var(--spacing-1\/2);
}

.pl-1\/3 {
  padding-left: var(--spacing-1\/3);
}

.pl-2\/3 {
  padding-left: var(--spacing-2\/3);
}

.pl-1\/4 {
  padding-left: var(--spacing-1\/4);
}

.pl-2\/4 {
  padding-left: var(--spacing-2\/4);
}

.pl-3\/4 {
  padding-left: var(--spacing-3\/4);
}

.pl-1\/5 {
  padding-left: var(--spacing-1\/5);
}

.pl-2\/5 {
  padding-left: var(--spacing-2\/5);
}

.pl-1\/3 {
  padding-left: var(--spacing-1\/3);
}

.pl-2\/3 {
  padding-left: var(--spacing-2\/3);
}

.pl-1\/4 {
  padding-left: var(--spacing-1\/4);
}

.pl-2\/4 {
  padding-left: var(--spacing-2\/4);
}

.pl-3\/4 {
  padding-left: var(--spacing-3\/4);
}

.pl-1\/5 {
  padding-left: var(--spacing-1\/5);
}

.pl-2\/5 {
  padding-left: var(--spacing-2\/5);
}

.pl-3\/5 {
  padding-left: var(--spacing-3\/5);
}

.pl-4\/5 {
  padding-left: var(--spacing-4\/5);
}

.pl-1\/6 {
  padding-left: var(--spacing-1\/6);
}

.pl-2\/6 {
  padding-left: var(--spacing-2\/6);
}

.pl-3\/4 {
  padding-left: var(--spacing-3\/4);
}

.pl-1\/5 {
  padding-left: var(--spacing-1\/5);
}

.pl-2\/5 {
  padding-left: var(--spacing-2\/5);
}

.pl-3\/5 {
  padding-left: var(--spacing-3\/5);
}

.pl-4\/5 {
  padding-left: var(--spacing-4\/5);
}

.pl-1\/6 {
  padding-left: var(--spacing-1\/6);
}

.pl-2\/6 {
  padding-left: var(--spacing-2\/6);
}

.pl-3\/6 {
  padding-left: var(--spacing-3\/6);
}

.pl-4\/6 {
  padding-left: var(--spacing-4\/6);
}

.pl-5\/6 {
  padding-left: var(--spacing-5\/6);
}

.pl-full {
  padding-left: var(--spacing-full);
}

.pl-screen {
  padding-left: var(--spacing-screen);
}

.pl-min {
  padding-left: var(--spacing-min);
}

.pl-max {
  padding-left: var(--spacing-max);
}

.pl-fit {
  padding-left: var(--spacing-fit);
}

.ps-0 {
  padding-inline-start: var(--spacing-0);
}

.ps-1 {
  padding-inline-start: var(--spacing-1);
}

.ps-2 {
  padding-inline-start: var(--spacing-2);
}

.ps-3 {
  padding-inline-start: var(--spacing-3);
}

.ps-4 {
  padding-inline-start: var(--spacing-4);
}

.ps-5 {
  padding-inline-start: var(--spacing-5);
}

.ps-6 {
  padding-inline-start: var(--spacing-6);
}

.ps-7 {
  padding-inline-start: var(--spacing-7);
}

.ps-8 {
  padding-inline-start: var(--spacing-8);
}

.ps-9 {
  padding-inline-start: var(--spacing-9);
}

.ps-10 {
  padding-inline-start: var(--spacing-10);
}

.ps-11 {
  padding-inline-start: var(--spacing-11);
}

.ps-12 {
  padding-inline-start: var(--spacing-12);
}

.ps-14 {
  padding-inline-start: var(--spacing-14);
}

.ps-16 {
  padding-inline-start: var(--spacing-16);
}

.ps-20 {
  padding-inline-start: var(--spacing-20);
}

.ps-24 {
  padding-inline-start: var(--spacing-24);
}

.ps-28 {
  padding-inline-start: var(--spacing-28);
}

.ps-32 {
  padding-inline-start: var(--spacing-32);
}

.ps-36 {
  padding-inline-start: var(--spacing-36);
}

.ps-40 {
  padding-inline-start: var(--spacing-40);
}

.ps-44 {
  padding-inline-start: var(--spacing-44);
}

.ps-48 {
  padding-inline-start: var(--spacing-48);
}

.ps-52 {
  padding-inline-start: var(--spacing-52);
}

.ps-56 {
  padding-inline-start: var(--spacing-56);
}

.ps-60 {
  padding-inline-start: var(--spacing-60);
}

.ps-64 {
  padding-inline-start: var(--spacing-64);
}

.ps-72 {
  padding-inline-start: var(--spacing-72);
}

.ps-80 {
  padding-inline-start: var(--spacing-80);
}

.ps-96 {
  padding-inline-start: var(--spacing-96);
}

.ps-px {
  padding-inline-start: var(--spacing-px);
}

.ps-0\.5 {
  padding-inline-start: var(--spacing-0.5);
}

.ps-1\.5 {
  padding-inline-start: var(--spacing-1.5);
}

.ps-2\.5 {
  padding-inline-start: var(--spacing-2.5);
}

.ps-3\.5 {
  padding-inline-start: var(--spacing-3.5);
}

.ps-auto {
  padding-inline-start: var(--spacing-auto);
}

.ps-1\/2 {
  padding-inline-start: var(--spacing-1\/2);
}

.ps-1\/3 {
  padding-inline-start: var(--spacing-1\/3);
}

.ps-2\/3 {
  padding-inline-start: var(--spacing-2\/3);
}

.ps-1\/4 {
  padding-inline-start: var(--spacing-1\/4);
}

.ps-2\/4 {
  padding-inline-start: var(--spacing-2\/4);
}

.ps-3\/4 {
  padding-inline-start: var(--spacing-3\/4);
}

.ps-1\/5 {
  padding-inline-start: var(--spacing-1\/5);
}

.ps-2\/5 {
  padding-inline-start: var(--spacing-2\/5);
}

.ps-3\/5 {
  padding-inline-start: var(--spacing-3\/5);
}

.ps-4\/5 {
  padding-inline-start: var(--spacing-4\/5);
}

.ps-1\/6 {
  padding-inline-start: var(--spacing-1\/6);
}

.ps-2\/6 {
  padding-inline-start: var(--spacing-2\/6);
}

.ps-3\/6 {
  padding-inline-start: var(--spacing-3\/6);
}

.ps-4\/6 {
  padding-inline-start: var(--spacing-4\/6);
}

.ps-5\/6 {
  padding-inline-start: var(--spacing-5\/6);
}

.ps-full {
  padding-inline-start: var(--spacing-full);
}

.ps-screen {
  padding-inline-start: var(--spacing-screen);
}

.ps-min {
  padding-inline-start: var(--spacing-min);
}

.ps-max {
  padding-inline-start: var(--spacing-max);
}

.ps-fit {
  padding-inline-start: var(--spacing-fit);
}

.pe-0 {
  padding-inline-end: var(--spacing-0);
}

.pe-1 {
  padding-inline-end: var(--spacing-1);
}

.pe-2 {
  padding-inline-end: var(--spacing-2);
}

.pe-3 {
  padding-inline-end: var(--spacing-3);
}

.pe-4 {
  padding-inline-end: var(--spacing-4);
}

.pe-5 {
  padding-inline-end: var(--spacing-5);
}

.pe-6 {
  padding-inline-end: var(--spacing-6);
}

.pe-7 {
  padding-inline-end: var(--spacing-7);
}

.pe-8 {
  padding-inline-end: var(--spacing-8);
}

.pe-9 {
  padding-inline-end: var(--spacing-9);
}

.pe-10 {
  padding-inline-end: var(--spacing-10);
}

.pe-11 {
  padding-inline-end: var(--spacing-11);
}

.pe-12 {
  padding-inline-end: var(--spacing-12);
}

.pe-14 {
  padding-inline-end: var(--spacing-14);
}

.pe-16 {
  padding-inline-end: var(--spacing-16);
}

.pe-20 {
  padding-inline-end: var(--spacing-20);
}

.pe-24 {
  padding-inline-end: var(--spacing-24);
}

.pe-28 {
  padding-inline-end: var(--spacing-28);
}

.pe-32 {
  padding-inline-end: var(--spacing-32);
}

.pe-36 {
  padding-inline-end: var(--spacing-36);
}

.pe-40 {
  padding-inline-end: var(--spacing-40);
}

.pe-44 {
  padding-inline-end: var(--spacing-44);
}

.pe-48 {
  padding-inline-end: var(--spacing-48);
}

.pe-52 {
  padding-inline-end: var(--spacing-52);
}

.pe-56 {
  padding-inline-end: var(--spacing-56);
}

.pe-60 {
  padding-inline-end: var(--spacing-60);
}

.pe-64 {
  padding-inline-end: var(--spacing-64);
}

.pe-72 {
  padding-inline-end: var(--spacing-72);
}

.pe-80 {
  padding-inline-end: var(--spacing-80);
}

.pe-96 {
  padding-inline-end: var(--spacing-96);
}

.pe-px {
  padding-inline-end: var(--spacing-px);
}

.pe-0\.5 {
  padding-inline-end: var(--spacing-0.5);
}

.pe-1\.5 {
  padding-inline-end: var(--spacing-1.5);
}

.pe-2\.5 {
  padding-inline-end: var(--spacing-2.5);
}

.pe-3\.5 {
  padding-inline-end: var(--spacing-3.5);
}

.pe-auto {
  padding-inline-end: var(--spacing-auto);
}

.pe-1\/2 {
  padding-inline-end: var(--spacing-1\/2);
}

.pe-1\/3 {
  padding-inline-end: var(--spacing-1\/3);
}

.pe-2\/3 {
  padding-inline-end: var(--spacing-2\/3);
}

.pe-1\/4 {
  padding-inline-end: var(--spacing-1\/4);
}

.pe-2\/4 {
  padding-inline-end: var(--spacing-2\/4);
}

.pe-3\/4 {
  padding-inline-end: var(--spacing-3\/4);
}

.pe-1\/5 {
  padding-inline-end: var(--spacing-1\/5);
}

.pe-2\/5 {
  padding-inline-end: var(--spacing-2\/5);
}

.pe-3\/5 {
  padding-inline-end: var(--spacing-3\/5);
}

.pe-4\/5 {
  padding-inline-end: var(--spacing-4\/5);
}

.pe-1\/6 {
  padding-inline-end: var(--spacing-1\/6);
}

.pe-2\/6 {
  padding-inline-end: var(--spacing-2\/6);
}

.pe-3\/6 {
  padding-inline-end: var(--spacing-3\/6);
}

.pe-4\/6 {
  padding-inline-end: var(--spacing-4\/6);
}

.pe-5\/6 {
  padding-inline-end: var(--spacing-5\/6);
}

.pe-full {
  padding-inline-end: var(--spacing-full);
}

.pe-screen {
  padding-inline-end: var(--spacing-screen);
}

.pe-min {
  padding-inline-end: var(--spacing-min);
}

.pe-max {
  padding-inline-end: var(--spacing-max);
}

.pe-fit {
  padding-inline-end: var(--spacing-fit);
}

.pt-safe {
  padding-top: safe-area-inset-top;
}

.pb-safe {
  padding-bottom: safe-area-inset-bottom;
}

.pl-safe {
  padding-left: safe-area-inset-left;
}

.m-0 {
  margin: var(--spacing-0);
}

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

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

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

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

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

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

.m-7 {
  margin: var(--spacing-7);
}

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

.m-9 {
  margin: var(--spacing-9);
}

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

.m-11 {
  margin: var(--spacing-11);
}

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

.m-14 {
  margin: var(--spacing-14);
}

.m-16 {
  margin: var(--spacing-16);
}

.m-20 {
  margin: var(--spacing-20);
}

.m-24 {
  margin: var(--spacing-24);
}

.m-28 {
  margin: var(--spacing-28);
}

.m-32 {
  margin: var(--spacing-32);
}

.m-36 {
  margin: var(--spacing-36);
}

.m-40 {
  margin: var(--spacing-40);
}

.m-44 {
  margin: var(--spacing-44);
}

.m-48 {
  margin: var(--spacing-48);
}

.m-52 {
  margin: var(--spacing-52);
}

.m-56 {
  margin: var(--spacing-56);
}

.m-60 {
  margin: var(--spacing-60);
}

.m-64 {
  margin: var(--spacing-64);
}

.m-72 {
  margin: var(--spacing-72);
}

.m-80 {
  margin: var(--spacing-80);
}

.m-96 {
  margin: var(--spacing-96);
}

.m-px {
  margin: var(--spacing-px);
}

.m-0\.5 {
  margin: var(--spacing-0.5);
}

.m-1\.5 {
  margin: var(--spacing-1.5);
}

.m-2\.5 {
  margin: var(--spacing-2.5);
}

.m-3\.5 {
  margin: var(--spacing-3.5);
}

.m-auto {
  margin: var(--spacing-auto);
}

.m-1\/2 {
  margin: var(--spacing-1\/2);
}

.m-1\/3 {
  margin: var(--spacing-1\/3);
}

.m-2\/3 {
  margin: var(--spacing-2\/3);
}

.m-1\/4 {
  margin: var(--spacing-1\/4);
}

.m-2\/4 {
  margin: var(--spacing-2\/4);
}

.m-3\/4 {
  margin: var(--spacing-3\/4);
}

.m-1\/5 {
  margin: var(--spacing-1\/5);
}

.m-2\/5 {
  margin: var(--spacing-2\/5);
}

.m-3\/5 {
  margin: var(--spacing-3\/5);
}

.m-4\/5 {
  margin: var(--spacing-4\/5);
}

.m-1\/6 {
  margin: var(--spacing-1\/6);
}

.m-2\/6 {
  margin: var(--spacing-2\/6);
}

.m-3\/6 {
  margin: var(--spacing-3\/6);
}

.m-4\/6 {
  margin: var(--spacing-4\/6);
}

.m-5\/6 {
  margin: var(--spacing-5\/6);
}

.m-full {
  margin: var(--spacing-full);
}

.m-screen {
  margin: var(--spacing-screen);
}

.m-min {
  margin: var(--spacing-min);
}

.m-max {
  margin: var(--spacing-max);
}

.m-fit {
  margin: var(--spacing-fit);
}

.mx-0 {
  margin-left: var(--spacing-0);
  margin-right: var(--spacing-0);
}

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

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

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

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

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

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

.mx-7 {
  margin-left: var(--spacing-7);
  margin-right: var(--spacing-7);
}

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

.mx-9 {
  margin-left: var(--spacing-9);
  margin-right: var(--spacing-9);
}

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

.mx-11 {
  margin-left: var(--spacing-11);
  margin-right: var(--spacing-11);
}

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

.mx-14 {
  margin-left: var(--spacing-14);
  margin-right: var(--spacing-14);
}

.mx-16 {
  margin-left: var(--spacing-16);
  margin-right: var(--spacing-16);
}

.mx-20 {
  margin-left: var(--spacing-20);
  margin-right: var(--spacing-20);
}

.mx-24 {
  margin-left: var(--spacing-24);
  margin-right: var(--spacing-24);
}

.mx-28 {
  margin-left: var(--spacing-28);
  margin-right: var(--spacing-28);
}

.mx-32 {
  margin-left: var(--spacing-32);
  margin-right: var(--spacing-32);
}

.mx-36 {
  margin-left: var(--spacing-36);
  margin-right: var(--spacing-36);
}

.mx-40 {
  margin-left: var(--spacing-40);
  margin-right: var(--spacing-40);
}

.mx-44 {
  margin-left: var(--spacing-44);
  margin-right: var(--spacing-44);
}

.mx-48 {
  margin-left: var(--spacing-48);
  margin-right: var(--spacing-48);
}

.mx-52 {
  margin-left: var(--spacing-52);
  margin-right: var(--spacing-52);
}

.mx-56 {
  margin-left: var(--spacing-56);
  margin-right: var(--spacing-56);
}

.mx-60 {
  margin-left: var(--spacing-60);
  margin-right: var(--spacing-60);
}

.mx-64 {
  margin-left: var(--spacing-64);
  margin-right: var(--spacing-64);
}

.mx-72 {
  margin-left: var(--spacing-72);
  margin-right: var(--spacing-72);
}

.mx-80 {
  margin-left: var(--spacing-80);
  margin-right: var(--spacing-80);
}

.mx-96 {
  margin-left: var(--spacing-96);
  margin-right: var(--spacing-96);
}

.mx-px {
  margin-left: var(--spacing-px);
  margin-right: var(--spacing-px);
}

.mx-0\.5 {
  margin-left: var(--spacing-0.5);
  margin-right: var(--spacing-0.5);
}

.mx-1\.5 {
  margin-left: var(--spacing-1.5);
  margin-right: var(--spacing-1.5);
}

.mx-2\.5 {
  margin-left: var(--spacing-2.5);
  margin-right: var(--spacing-2.5);
}

.mx-3\.5 {
  margin-left: var(--spacing-3.5);
  margin-right: var(--spacing-3.5);
}

.mx-auto {
  margin-left: var(--spacing-auto);
  margin-right: var(--spacing-auto);
}

.mx-1\/2 {
  margin-left: var(--spacing-1\/2);
  margin-right: var(--spacing-1\/2);
}

.mx-1\/3 {
  margin-left: var(--spacing-1\/3);
  margin-right: var(--spacing-1\/3);
}

.mx-2\/3 {
  margin-left: var(--spacing-2\/3);
  margin-right: var(--spacing-2\/3);
}

.mx-1\/4 {
  margin-left: var(--spacing-1\/4);
  margin-right: var(--spacing-1\/4);
}

.mx-2\/4 {
  margin-left: var(--spacing-2\/4);
  margin-right: var(--spacing-2\/4);
}

.mx-3\/4 {
  margin-left: var(--spacing-3\/4);
  margin-right: var(--spacing-3\/4);
}

.mx-1\/5 {
  margin-left: var(--spacing-1\/5);
  margin-right: var(--spacing-1\/5);
}

.mx-2\/5 {
  margin-left: var(--spacing-2\/5);
  margin-right: var(--spacing-2\/5);
}

.mx-3\/5 {
  margin-left: var(--spacing-3\/5);
  margin-right: var(--spacing-3\/5);
}

.mx-4\/5 {
  margin-left: var(--spacing-4\/5);
  margin-right: var(--spacing-4\/5);
}

.mx-1\/6 {
  margin-left: var(--spacing-1\/6);
  margin-right: var(--spacing-1\/6);
}

.mx-2\/6 {
  margin-left: var(--spacing-2\/6);
  margin-right: var(--spacing-2\/6);
}

.mx-3\/6 {
  margin-left: var(--spacing-3\/6);
  margin-right: var(--spacing-3\/6);
}

.mx-4\/6 {
  margin-left: var(--spacing-4\/6);
  margin-right: var(--spacing-4\/6);
}

.mx-5\/6 {
  margin-left: var(--spacing-5\/6);
  margin-right: var(--spacing-5\/6);  
}

.mx-full {
  margin-left: var(--spacing-full);
  margin-right: var(--spacing-full);
}

.mx-screen {
  margin-left: var(--spacing-screen);
  margin-right: var(--spacing-screen);
}

.mx-min {
  margin-left: var(--spacing-min);
  margin-right: var(--spacing-min);
}

.mx-max {
  margin-left: var(--spacing-max);
  margin-right: var(--spacing-max);
}

.mx-fit {
  margin-left: var(--spacing-fit);
  margin-right: var(--spacing-fit);
}

.my-0 {
  margin-top: var(--spacing-0);
  margin-bottom: var(--spacing-0);
}

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

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

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

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

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

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

.my-7 {
  margin-top: var(--spacing-7);
  margin-bottom: var(--spacing-7);
}

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

.my-9 {
  margin-top: var(--spacing-9);
  margin-bottom: var(--spacing-9);
}

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

.my-11 {
  margin-top: var(--spacing-11);
  margin-bottom: var(--spacing-11);
}

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

.my-14 {
  margin-top: var(--spacing-14);
  margin-bottom: var(--spacing-14);
}

.my-16 {
  margin-top: var(--spacing-16);
  margin-bottom: var(--spacing-16);
}

.my-20 {
  margin-top: var(--spacing-20);
  margin-bottom: var(--spacing-20);
}

.my-24 {
  margin-top: var(--spacing-24);
  margin-bottom: var(--spacing-24);
}

.my-28 {
  margin-top: var(--spacing-28);
  margin-bottom: var(--spacing-28);
}

.my-32 {
  margin-top: var(--spacing-32);
  margin-bottom: var(--spacing-32);
}

.my-36 {
  margin-top: var(--spacing-36);
  margin-bottom: var(--spacing-36);
}

.my-40 {
  margin-top: var(--spacing-40);
  margin-bottom: var(--spacing-40);
}

.my-44 {
  margin-top: var(--spacing-44);
  margin-bottom: var(--spacing-44);
}

.my-48 {
  margin-top: var(--spacing-48);
  margin-bottom: var(--spacing-48);
}

.my-52 {
  margin-top: var(--spacing-52);
  margin-bottom: var(--spacing-52);
}

.my-56 {
  margin-top: var(--spacing-56);
  margin-bottom: var(--spacing-56);
}

.my-60 {
  margin-top: var(--spacing-60);
  margin-bottom: var(--spacing-60);
}

.my-64 {
  margin-top: var(--spacing-64);
  margin-bottom: var(--spacing-64);
}

.my-72 {
  margin-top: var(--spacing-72);
  margin-bottom: var(--spacing-72);
}

.my-80 {
  margin-top: var(--spacing-80);
  margin-bottom: var(--spacing-80);
}

.my-96 {
  margin-top: var(--spacing-96);
  margin-bottom: var(--spacing-96);
}

.my-px {
  margin-top: var(--spacing-px);
  margin-bottom: var(--spacing-px);
}

.my-0\.5 {
  margin-top: var(--spacing-0.5);
  margin-bottom: var(--spacing-0.5);
}

.my-1\.5 {
  margin-top: var(--spacing-1.5);
  margin-bottom: var(--spacing-1.5);
}

.my-2\.5 {
  margin-top: var(--spacing-2.5);
  margin-bottom: var(--spacing-2.5);
}

.my-3\.5 {
  margin-top: var(--spacing-3.5);
  margin-bottom: var(--spacing-3.5);
}

.my-auto {
  margin-top: var(--spacing-auto);
  margin-bottom: var(--spacing-auto);
}

.my-1\/2 {
  margin-top: var(--spacing-1\/2);
  margin-bottom: var(--spacing-1\/2);
}

.my-1\/3 {
  margin-top: var(--spacing-1\/3);
  margin-bottom: var(--spacing-1\/3);
}

.my-2\/3 {
  margin-top: var(--spacing-2\/3);
  margin-bottom: var(--spacing-2\/3);
}

.my-1\/4 {
  margin-top: var(--spacing-1\/4);
  margin-bottom: var(--spacing-1\/4);
}

.my-2\/4 {
  margin-top: var(--spacing-2\/4);
  margin-bottom: var(--spacing-2\/4);
}

.my-3\/4 {
  margin-top: var(--spacing-3\/4);
  margin-bottom: var(--spacing-3\/4);
}

.my-1\/5 {
  margin-top: var(--spacing-1\/5);
  margin-bottom: var(--spacing-1\/5);
}

.my-2\/5 {
  margin-top: var(--spacing-2\/5);
  margin-bottom: var(--spacing-2\/5);
}

.my-3\/5 {
  margin-top: var(--spacing-3\/5);
  margin-bottom: var(--spacing-3\/5);
}

.my-4\/5 {
  margin-top: var(--spacing-4\/5);
  margin-bottom: var(--spacing-4\/5);
}

.my-1\/6 {
  margin-top: var(--spacing-1\/6);
  margin-bottom: var(--spacing-1\/6);
}

.my-2\/6 {
  margin-top: var(--spacing-2\/6);
  margin-bottom: var(--spacing-2\/6);
}

.my-3\/6 {
  margin-top: var(--spacing-3\/6);
  margin-bottom: var(--spacing-3\/6);
}

.my-4\/6 {
  margin-top: var(--spacing-4\/6);
  margin-bottom: var(--spacing-4\/6);
}

.my-5\/6 {
  margin-top: var(--spacing-5\/6);
  margin-bottom: var(--spacing-5\/6);
}

.my-full {
  margin-top: var(--spacing-full);
  margin-bottom: var(--spacing-full);
}

.my-screen {
  margin-top: var(--spacing-screen);
  margin-bottom: var(--spacing-screen);
}

.my-min {
  margin-top: var(--spacing-min);
  margin-bottom: var(--spacing-min);
}

.my-max {
  margin-top: var(--spacing-max);
  margin-bottom: var(--spacing-max);
}

.my-fit {
  margin-top: var(--spacing-fit);
  margin-bottom: var(--spacing-fit);
}

.mt-0 {
  margin-top: var(--spacing-0);
}

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

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

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

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

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

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

.mt-7 {
  margin-top: var(--spacing-7);
}

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

.mt-9 {
  margin-top: var(--spacing-9);
}

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

.mt-11 {
  margin-top: var(--spacing-11);
}

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

.mt-14 {
  margin-top: var(--spacing-14);
}

.mt-16 {
  margin-top: var(--spacing-16);
}

.mt-20 {
  margin-top: var(--spacing-20);
}

.mt-24 {
  margin-top: var(--spacing-24);
}

.mt-28 {
  margin-top: var(--spacing-28);
}

.mt-32 {
  margin-top: var(--spacing-32);
}

.mt-36 {
  margin-top: var(--spacing-36);
}

.mt-40 {
  margin-top: var(--spacing-40);
}

.mt-44 {
  margin-top: var(--spacing-44);
}

.mt-48 {
  margin-top: var(--spacing-48);
}

.mt-52 {
  margin-top: var(--spacing-52);
}

.mt-56 {
  margin-top: var(--spacing-56);
}

.mt-60 {
  margin-top: var(--spacing-60);
}

.mt-64 {
  margin-top: var(--spacing-64);
}

.mt-72 {
  margin-top: var(--spacing-72);
}

.mt-80 {
  margin-top: var(--spacing-80);
}

.mt-96 {
  margin-top: var(--spacing-96);
}

.mt-px {
  margin-top: var(--spacing-px);
}

.mt-0\.5 {
  margin-top: var(--spacing-0.5);
}

.mt-1\.5 {
  margin-top: var(--spacing-1.5);
}

.mt-2\.5 {
  margin-top: var(--spacing-2.5);
}

.mt-3\.5 {
  margin-top: var(--spacing-3.5);
}

.mt-auto {
  margin-top: var(--spacing-auto);
}

.mt-1\/2 {
  margin-top: var(--spacing-1\/2);
}

.mt-1\/3 {
  margin-top: var(--spacing-1\/3);
}

.mt-2\/3 {
  margin-top: var(--spacing-2\/3);
}

.mt-1\/4 {
  margin-top: var(--spacing-1\/4);
}

.mt-2\/4 {
  margin-top: var(--spacing-2\/4);
}

.mt-3\/4 {
  margin-top: var(--spacing-3\/4);
}

.mt-1\/5 {
  margin-top: var(--spacing-1\/5);
}

.mt-2\/5 {
  margin-top: var(--spacing-2\/5);
}

.mt-3\/5 {
  margin-top: var(--spacing-3\/5);
}

.mt-4\/5 {
  margin-top: var(--spacing-4\/5);
}

.mt-1\/6 {
  margin-top: var(--spacing-1\/6);
}

.mt-2\/6 {
  margin-top: var(--spacing-2\/6);
}

.mt-3\/6 {
  margin-top: var(--spacing-3\/6);
}

.mt-4\/6 {
  margin-top: var(--spacing-4\/6);
}

.mt-5\/6 {
  margin-top: var(--spacing-5\/6);
}

.mt-full {
  margin-top: var(--spacing-full);
}

.mt-screen {
  margin-top: var(--spacing-screen);
}

.mt-min {
  margin-top: var(--spacing-min);
}

.mt-max {
  margin-top: var(--spacing-max);
}

.mt-fit {
  margin-top: var(--spacing-fit);
}

.mr-0 {
  margin-right: var(--spacing-0);
}

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

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

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

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

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

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

.mr-7 {
  margin-right: var(--spacing-7);
}

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

.mr-9 {
  margin-right: var(--spacing-9);
}

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

.mr-11 {
  margin-right: var(--spacing-11);
}

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

.mr-14 {
  margin-right: var(--spacing-14);
}

.mr-16 {
  margin-right: var(--spacing-16);
}

.mr-20 {
  margin-right: var(--spacing-20);
}

.mr-24 {
  margin-right: var(--spacing-24);
}

.mr-28 {
  margin-right: var(--spacing-28);
}

.mr-32 {
  margin-right: var(--spacing-32);
}

.mr-36 {
  margin-right: var(--spacing-36);
}

.mr-40 {
  margin-right: var(--spacing-40);
}

.mr-44 {
  margin-right: var(--spacing-44);
}

.mr-48 {
  margin-right: var(--spacing-48);
}

.mr-52 {
  margin-right: var(--spacing-52);
}

.mr-56 {
  margin-right: var(--spacing-56);
}

.mr-60 {
  margin-right: var(--spacing-60);
}

.mr-64 {
  margin-right: var(--spacing-64);
}

.mr-72 {
  margin-right: var(--spacing-72);
}

.mr-80 {
  margin-right: var(--spacing-80);
}

.mr-96 {
  margin-right: var(--spacing-96);
}

.mr-px {
  margin-right: var(--spacing-px);
}

.mr-0\.5 {
  margin-right: var(--spacing-0.5);
}

.mr-1\.5 {
  margin-right: var(--spacing-1.5);
}

.mr-2\.5 {
  margin-right: var(--spacing-2.5);
}

.mr-3\.5 {
  margin-right: var(--spacing-3.5);
}

.mr-auto {
  margin-right: var(--spacing-auto);
}

.mr-1\/2 {
  margin-right: var(--spacing-1\/2);
}

.mr-1\/3 {
  margin-right: var(--spacing-1\/3);
}

.mr-2\/3 {
  margin-right: var(--spacing-2\/3);
}

.mr-1\/4 {
  margin-right: var(--spacing-1\/4);
}

.mr-2\/4 {
  margin-right: var(--spacing-2\/4);
}

.mr-3\/4 {
  margin-right: var(--spacing-3\/4);
}

.mr-1\/5 {
  margin-right: var(--spacing-1\/5);
}

.mr-2\/5 {
  margin-right: var(--spacing-2\/5);
}

.mr-3\/5 {
  margin-right: var(--spacing-3\/5);
}

.mr-4\/5 {
  margin-right: var(--spacing-4\/5);
}

.mr-1\/6 {
  margin-right: var(--spacing-1\/6);
}

.mr-2\/6 {
  margin-right: var(--spacing-2\/6);
}

.mr-3\/6 {
  margin-right: var(--spacing-3\/6);
}

.mr-4\/6 {
  margin-right: var(--spacing-4\/6);
}

.mr-5\/6 {
  margin-right: var(--spacing-5\/6);
}

.mr-full {
  margin-right: var(--spacing-full);
}

.mr-screen {
  margin-right: var(--spacing-screen);
}

.mr-min {
  margin-right: var(--spacing-min);
}

.mr-max {
  margin-right: var(--spacing-max);
}

.mr-fit {
  margin-right: var(--spacing-fit);
}

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

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

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

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

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

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

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

.mb-7 {
  margin-bottom: var(--spacing-7);
}

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

.mb-9 {
  margin-bottom: var(--spacing-9);
}

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

.mb-11 {
  margin-bottom: var(--spacing-11);
}

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

.mb-14 {
  margin-bottom: var(--spacing-14);
}

.mb-16 {
  margin-bottom: var(--spacing-16);
}

.mb-20 {
  margin-bottom: var(--spacing-20);
}

.mb-24 {
  margin-bottom: var(--spacing-24);
}

.mb-28 {
  margin-bottom: var(--spacing-28);
}

.mb-32 {
  margin-bottom: var(--spacing-32);
}

.mb-36 {
  margin-bottom: var(--spacing-36);
}

.mb-40 {
  margin-bottom: var(--spacing-40);
}

.mb-44 {
  margin-bottom: var(--spacing-44);
}

.mb-48 {
  margin-bottom: var(--spacing-48);
}

.mb-52 {
  margin-bottom: var(--spacing-52);
}

.mb-56 {
  margin-bottom: var(--spacing-56);
}

.mb-60 {
  margin-bottom: var(--spacing-60);
}

.mb-64 {
  margin-bottom: var(--spacing-64);
}

.mb-72 {
  margin-bottom: var(--spacing-72);
}

.mb-80 {
  margin-bottom: var(--spacing-80);
}

.mb-96 {
  margin-bottom: var(--spacing-96);
}

.mb-px {
  margin-bottom: var(--spacing-px);
}

.mb-0\.5 {
  margin-bottom: var(--spacing-0.5);
}

.mb-1\.5 {
  margin-bottom: var(--spacing-1.5);
}

.mb-2\.5 {
  margin-bottom: var(--spacing-2.5);
}

.mb-3\.5 {
  margin-bottom: var(--spacing-3.5);
}

.mb-auto {
  margin-bottom: var(--spacing-auto);
}

.mb-1\/2 {
  margin-bottom: var(--spacing-1\/2);
}

.mb-1\/3 {
  margin-bottom: var(--spacing-1\/3);
}

.mb-2\/3 {
  margin-bottom: var(--spacing-2\/3);
}

.mb-1\/4 {
  margin-bottom: var(--spacing-1\/4);
}

.mb-2\/4 {
  margin-bottom: var(--spacing-2\/4);
}

.mb-3\/4 {
  margin-bottom: var(--spacing-3\/4);
}

.mb-1\/5 {
  margin-bottom: var(--spacing-1\/5);
}

.mb-2\/5 {
  margin-bottom: var(--spacing-2\/5);
}

.mb-3\/5 {
  margin-bottom: var(--spacing-3\/5);
}

.mb-4\/5 {
  margin-bottom: var(--spacing-4\/5);
}

.mb-1\/6 {
  margin-bottom: var(--spacing-1\/6);
}

.mb-2\/6 {
  margin-bottom: var(--spacing-2\/6);
}

.mb-3\/6 {
  margin-bottom: var(--spacing-3\/6);
}

.mb-4\/6 {
  margin-bottom: var(--spacing-4\/6);
}

.mb-5\/6 {
  margin-bottom: var(--spacing-5\/6);
}

.mb-full {
  margin-bottom: var(--spacing-full);
}

.mb-screen {
  margin-bottom: var(--spacing-screen);
}

.mb-min {
  margin-bottom: var(--spacing-min);
}

.mb-max {
  margin-bottom: var(--spacing-max);
}

.mb-fit {
  margin-bottom: var(--spacing-fit);
}

.ml-0 {
  margin-left: var(--spacing-0);
}

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

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

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

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

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

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

.ml-7 {
  margin-left: var(--spacing-7);
}

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

.ml-9 {
  margin-left: var(--spacing-9);
}

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

.ml-11 {
  margin-left: var(--spacing-11);
}

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

.ml-14 {
  margin-left: var(--spacing-14);
}

.ml-16 {
  margin-left: var(--spacing-16);
}

.ml-20 {
  margin-left: var(--spacing-20);
}

.ml-24 {
  margin-left: var(--spacing-24);
}

.ml-28 {
  margin-left: var(--spacing-28);
}

.ml-32 {
  margin-left: var(--spacing-32);
}

.ml-36 {
  margin-left: var(--spacing-36);
}

.ml-40 {
  margin-left: var(--spacing-40);
}

.ml-44 {
  margin-left: var(--spacing-44);
}

.ml-48 {
  margin-left: var(--spacing-48);
}

.ml-52 {
  margin-left: var(--spacing-52);
}

.ml-56 {
  margin-left: var(--spacing-56);
}

.ml-60 {
  margin-left: var(--spacing-60);
}

.ml-64 {
  margin-left: var(--spacing-64);
}

.ml-72 {
  margin-left: var(--spacing-72);
}

.ml-80 {
  margin-left: var(--spacing-80);
}

.ml-96 {
  margin-left: var(--spacing-96);
}

.ml-px {
  margin-left: var(--spacing-px);
}

.ml-0\.5 {
  margin-left: var(--spacing-0.5);
}

.ml-1\.5 {
  margin-left: var(--spacing-1.5);
}

.ml-2\.5 {
  margin-left: var(--spacing-2.5);
}

.ml-3\.5 {
  margin-left: var(--spacing-3.5);
}

.ml-auto {
  margin-left: var(--spacing-auto);
}

.ml-1\/2 {
  margin-left: var(--spacing-1\/2);
}

.ml-1\/3 {
  margin-left: var(--spacing-1\/3);
}

.ml-2\/3 {
  margin-left: var(--spacing-2\/3);
}

.ml-1\/4 {
  margin-left: var(--spacing-1\/4);
}

.ml-2\/4 {
  margin-left: var(--spacing-2\/4);
}

.ml-3\/4 {
  margin-left: var(--spacing-3\/4);
}

.ml-1\/5 {
  margin-left: var(--spacing-1\/5);
}

.ml-2\/5 {
  margin-left: var(--spacing-2\/5);
}

.ml-3\/5 {
  margin-left: var(--spacing-3\/5);
}

.ml-4\/5 {
  margin-left: var(--spacing-4\/5);
}

.ml-1\/6 {
  margin-left: var(--spacing-1\/6);
}

.ml-2\/6 {
  margin-left: var(--spacing-2\/6);
}

.ml-3\/6 {
  margin-left: var(--spacing-3\/6);
}

.ml-4\/6 {
  margin-left: var(--spacing-4\/6);
}

.ml-5\/6 {
  margin-left: var(--spacing-5\/6);
}

.ml-full {
  margin-left: var(--spacing-full);
}

.ml-screen {
  margin-left: var(--spacing-screen);
}

.ml-min {
  margin-left: var(--spacing-min);
}

.ml-max {
  margin-left: var(--spacing-max);
}

.ml-fit {
  margin-left: var(--spacing-fit);
}

.ms-0 {
  margin-inline-start: var(--spacing-0);
}

.ms-1 {
  margin-inline-start: var(--spacing-1);
}

.ms-2 {
  margin-inline-start: var(--spacing-2);
}

.ms-3 {
  margin-inline-start: var(--spacing-3);
}

.ms-4 {
  margin-inline-start: var(--spacing-4);
}

.ms-5 {
  margin-inline-start: var(--spacing-5);
}

.ms-6 {
  margin-inline-start: var(--spacing-6);
}

.ms-7 {
  margin-inline-start: var(--spacing-7);
}

.ms-8 {
  margin-inline-start: var(--spacing-8);
}

.ms-9 {
  margin-inline-start: var(--spacing-9);
}

.ms-10 {
  margin-inline-start: var(--spacing-10);
}

.ms-11 {
  margin-inline-start: var(--spacing-11);
}

.ms-12 {
  margin-inline-start: var(--spacing-12);
}

.ms-14 {
  margin-inline-start: var(--spacing-14);
}

.ms-16 {
  margin-inline-start: var(--spacing-16);
}

.ms-20 {
  margin-inline-start: var(--spacing-20);
}

.ms-24 {
  margin-inline-start: var(--spacing-24);
}

.ms-28 {
  margin-inline-start: var(--spacing-28);
}

.ms-32 {
  margin-inline-start: var(--spacing-32);
}

.ms-36 {
  margin-inline-start: var(--spacing-36);
}

.ms-40 {
  margin-inline-start: var(--spacing-40);
}

.ms-44 {
  margin-inline-start: var(--spacing-44);
}

.ms-48 {
  margin-inline-start: var(--spacing-48);
}

.ms-52 {
  margin-inline-start: var(--spacing-52);
}

.ms-56 {
  margin-inline-start: var(--spacing-56);
}

.ms-60 {
  margin-inline-start: var(--spacing-60);
}

.ms-64 {
  margin-inline-start: var(--spacing-64);
}

.ms-72 {
  margin-inline-start: var(--spacing-72);
}

.ms-80 {
  margin-inline-start: var(--spacing-80);
}

.ms-96 {
  margin-inline-start: var(--spacing-96);
}

.ms-px {
  margin-inline-start: var(--spacing-px);
}

.ms-0\.5 {
  margin-inline-start: var(--spacing-0.5);
}

.ms-1\.5 {
  margin-inline-start: var(--spacing-1.5);
}

.ms-2\.5 {
  margin-inline-start: var(--spacing-2.5);
}

.ms-3\.5 {
  margin-inline-start: var(--spacing-3.5);
}

.ms-auto {
  margin-inline-start: var(--spacing-auto);
}

.ms-1\/2 {
  margin-inline-start: var(--spacing-1\/2);
}

.ms-1\/3 {
  margin-inline-start: var(--spacing-1\/3);
}

.ms-2\/3 {
  margin-inline-start: var(--spacing-2\/3);
}

.ms-1\/4 {
  margin-inline-start: var(--spacing-1\/4);
}

.ms-2\/4 {
  margin-inline-start: var(--spacing-2\/4);
}

.ms-3\/4 {
  margin-inline-start: var(--spacing-3\/4);
}

.ms-1\/5 {
  margin-inline-start: var(--spacing-1\/5);
}

.ms-2\/5 {
  margin-inline-start: var(--spacing-2\/5);
}

.ms-3\/5 {
  margin-inline-start: var(--spacing-3\/5);
}

.ms-4\/5 {
  margin-inline-start: var(--spacing-4\/5);
}

.ms-1\/6 {
  margin-inline-start: var(--spacing-1\/6);
}

.ms-2\/6 {
  margin-inline-start: var(--spacing-2\/6);
}

.ms-3\/6 {
  margin-inline-start: var(--spacing-3\/6);
}

.ms-4\/6 {
  margin-inline-start: var(--spacing-4\/6);
}

.ms-5\/6 {
  margin-inline-start: var(--spacing-5\/6);
}

.ms-full {
  margin-inline-start: var(--spacing-full);
}

.ms-screen {
  margin-inline-start: var(--spacing-screen);
}

.ms-min {
  margin-inline-start: var(--spacing-min);
}

.ms-max {
  margin-inline-start: var(--spacing-max);
}

.ms-fit {
  margin-inline-start: var(--spacing-fit);
}

.me-0 {
  margin-inline-end: var(--spacing-0);
}

.me-1 {
  margin-inline-end: var(--spacing-1);
}

.me-2 {
  margin-inline-end: var(--spacing-2);
}

.me-3 {
  margin-inline-end: var(--spacing-3);
}

.me-4 {
  margin-inline-end: var(--spacing-4);
}

.me-5 {
  margin-inline-end: var(--spacing-5);
}

.me-6 {
  margin-inline-end: var(--spacing-6);
}

.me-7 {
  margin-inline-end: var(--spacing-7);
}

.me-8 {
  margin-inline-end: var(--spacing-8);
}

.me-9 {
  margin-inline-end: var(--spacing-9);
}

.me-10 {
  margin-inline-end: var(--spacing-10);
}

.me-11 {
  margin-inline-end: var(--spacing-11);
}

.me-12 {
  margin-inline-end: var(--spacing-12);
}

.me-14 {
  margin-inline-end: var(--spacing-14);
}

.me-16 {
  margin-inline-end: var(--spacing-16);
}

.me-20 {
  margin-inline-end: var(--spacing-20);
}

.me-24 {
  margin-inline-end: var(--spacing-24);
}

.me-28 {
  margin-inline-end: var(--spacing-28);
}

.me-32 {
  margin-inline-end: var(--spacing-32);
}

.me-36 {
  margin-inline-end: var(--spacing-36);
}

.me-40 {
  margin-inline-end: var(--spacing-40);
}

.me-44 {
  margin-inline-end: var(--spacing-44);
}

.me-48 {
  margin-inline-end: var(--spacing-48);
}

.me-52 {
  margin-inline-end: var(--spacing-52);
}

.me-56 {
  margin-inline-end: var(--spacing-56);
}

.me-60 {
  margin-inline-end: var(--spacing-60);
}

.me-64 {
  margin-inline-end: var(--spacing-64);
}

.me-72 {
  margin-inline-end: var(--spacing-72);
}

.me-80 {
  margin-inline-end: var(--spacing-80);
}

.me-96 {
  margin-inline-end: var(--spacing-96);
}

.me-px {
  margin-inline-end: var(--spacing-px);
}

.me-0\.5 {
  margin-inline-end: var(--spacing-0.5);
}

.me-1\.5 {
  margin-inline-end: var(--spacing-1.5);
}

.me-2\.5 {
  margin-inline-end: var(--spacing-2.5);
}

.me-3\.5 {
  margin-inline-end: var(--spacing-3.5);
}

.me-auto {
  margin-inline-end: var(--spacing-auto);
}

.me-1\/2 {
  margin-inline-end: var(--spacing-1\/2);
}

.me-1\/3 {
  margin-inline-end: var(--spacing-1\/3);
}

.me-2\/3 {
  margin-inline-end: var(--spacing-2\/3);
}

.me-1\/4 {
  margin-inline-end: var(--spacing-1\/4);
}

.me-2\/4 {
  margin-inline-end: var(--spacing-2\/4);
}

.me-3\/4 {
  margin-inline-end: var(--spacing-3\/4);
}

.me-1\/5 {
  margin-inline-end: var(--spacing-1\/5);
}

.me-2\/5 {
  margin-inline-end: var(--spacing-2\/5);
}

.me-3\/5 {
  margin-inline-end: var(--spacing-3\/5);
}

.me-4\/5 {
  margin-inline-end: var(--spacing-4\/5);
}

.me-1\/6 {
  margin-inline-end: var(--spacing-1\/6);
}

.me-2\/6 {
  margin-inline-end: var(--spacing-2\/6);
}

.me-3\/6 {
  margin-inline-end: var(--spacing-3\/6);
}

.me-4\/6 {
  margin-inline-end: var(--spacing-4\/6);
}

.me-5\/6 {
  margin-inline-end: var(--spacing-5\/6);
}

.me-full {
  margin-inline-end: var(--spacing-full);
}

.me-screen {
  margin-inline-end: var(--spacing-screen);
}

.me-min {
  margin-inline-end: var(--spacing-min);
}

.me-max {
  margin-inline-end: var(--spacing-max);
}

.me-fit {
  margin-inline-end: var(--spacing-fit);
}

.m-auto {
  margin: auto;
}

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

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

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

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

.ml-auto {
  margin-left: auto;
}
/*子元素*/
.space-x-0> :not([hidden])~ :not([hidden]) {
  --space-x-reverse: 0;
  margin-left: calc(0px * (1 - var(--space-x-reverse)));
  margin-right: calc(0px * var(--space-x-reverse));
}

.space-y-0> :not([hidden])~ :not([hidden]) {
  --space-y-reverse: 0;
  margin-bottom: calc(0px * var(--space-y-reverse));
  margin-top: calc(0px * (1 - var(--space-y-reverse)));
}

.space-x-0\.5> :not([hidden])~ :not([hidden]) {
  --space-x-reverse: 0;
  margin-left: calc(0.125rem * (1 - var(--space-x-reverse)));
  margin-right: calc(0.125rem * var(--space-x-reverse));
}

.space-y-0\.5> :not([hidden])~ :not([hidden]) {
  --space-y-reverse: 0;
  margin-bottom: calc(0.125rem * var(--space-y-reverse));
  margin-top: calc(0.125rem * (1 - var(--space-y-reverse)));
}

.space-x-1> :not([hidden])~ :not([hidden]) {
  --space-x-reverse: 0;
  margin-left: calc(0.25rem * (1 - var(--space-x-reverse)));
  margin-right: calc(0.25rem * var(--space-x-reverse));
}

.space-y-1> :not([hidden])~ :not([hidden]) {
  --space-y-reverse: 0;
  margin-bottom: calc(0.25rem * var(--space-y-reverse));
  margin-top: calc(0.25rem * (1 - var(--space-y-reverse)));
}

.space-x-1\.5> :not([hidden])~ :not([hidden]) {
  --space-x-reverse: 0;
  margin-left: calc(0.375rem * (1 - var(--space-x-reverse)));
  margin-right: calc(0.375rem * var(--space-x-reverse));
}

.space-y-1\.5> :not([hidden])~ :not([hidden]) {
  --space-y-reverse: 0;
  margin-bottom: calc(0.375rem * var(--space-y-reverse));
  margin-top: calc(0.375rem * (1 - var(--space-y-reverse)));
}

.space-x-2> :not([hidden])~ :not([hidden]) {
  --space-x-reverse: 0;
  margin-left: calc(0.5rem * (1 - var(--space-x-reverse)));
  margin-right: calc(0.5rem * var(--space-x-reverse));
}

.space-y-2> :not([hidden])~ :not([hidden]) {
  --space-y-reverse: 0;
  margin-bottom: calc(0.5rem * var(--space-y-reverse));
  margin-top: calc(0.5rem * (1 - var(--space-y-reverse)));
}

.space-x-2\.5> :not([hidden])~ :not([hidden]) {
  --space-x-reverse: 0;
  margin-left: calc(0.625rem * (1 - var(--space-x-reverse)));
  margin-right: calc(0.625rem * var(--space-x-reverse));
}

.space-y-2\.5> :not([hidden])~ :not([hidden]) {
  --space-y-reverse: 0;
  margin-bottom: calc(0.625rem * var(--space-y-reverse));
  margin-top: calc(0.625rem * (1 - var(--space-y-reverse)));
}

.space-x-3> :not([hidden])~ :not([hidden]) {
  --space-x-reverse: 0;
  margin-left: calc(0.75rem * (1 - var(--space-x-reverse)));
  margin-right: calc(0.75rem * var(--space-x-reverse));
}

.space-y-3> :not([hidden])~ :not([hidden]) {
  --space-y-reverse: 0;
  margin-bottom: calc(0.75rem * var(--space-y-reverse));
  margin-top: calc(0.75rem * (1 - var(--space-y-reverse)));
}

.space-x-3\.5> :not([hidden])~ :not([hidden]) {
  --space-x-reverse: 0;
  margin-left: calc(0.875rem * (1 - var(--space-x-reverse)));
  margin-right: calc(0.875rem * var(--space-x-reverse));
}

.space-y-3\.5> :not([hidden])~ :not([hidden]) {
  --space-y-reverse: 0;
  margin-bottom: calc(0.875rem * var(--space-y-reverse));
  margin-top: calc(0.875rem * (1 - var(--space-y-reverse)));
}

.space-x-4> :not([hidden])~ :not([hidden]) {
  --space-x-reverse: 0;
  margin-left: calc(1rem * (1 - var(--space-x-reverse)));
  margin-right: calc(1rem * var(--space-x-reverse));
}

.space-y-4> :not([hidden])~ :not([hidden]) {
  --space-y-reverse: 0;
  margin-bottom: calc(1rem * var(--space-y-reverse));
  margin-top: calc(1rem * (1 - var(--space-y-reverse)));
}

.space-x-5> :not([hidden])~ :not([hidden]) {
  --space-x-reverse: 0;
  margin-left: calc(1.25rem * (1 - var(--space-x-reverse)));
  margin-right: calc(1.25rem * var(--space-x-reverse));
}

.space-y-5> :not([hidden])~ :not([hidden]) {
  --space-y-reverse: 0;
  margin-bottom: calc(1.25rem * var(--space-y-reverse));
  margin-top: calc(1.25rem * (1 - var(--space-y-reverse)));
}

.space-x-6> :not([hidden])~ :not([hidden]) {
  --space-x-reverse: 0;
  margin-left: calc(1.5rem * (1 - var(--space-x-reverse)));
  margin-right: calc(1.5rem * var(--space-x-reverse));
}

.space-y-6> :not([hidden])~ :not([hidden]) {
  --space-y-reverse: 0;
  margin-bottom: calc(1.5rem * var(--space-y-reverse));
  margin-top: calc(1.5rem * (1 - var(--space-y-reverse)));
}

.space-x-7> :not([hidden])~ :not([hidden]) {
  --space-x-reverse: 0;
  margin-left: calc(1.75rem * (1 - var(--space-x-reverse)));
  margin-right: calc(1.75rem * var(--space-x-reverse));
}

.space-y-7> :not([hidden])~ :not([hidden]) {
  --space-y-reverse: 0;
  margin-bottom: calc(1.75rem * var(--space-y-reverse));
  margin-top: calc(1.75rem * (1 - var(--space-y-reverse)));
}

.space-x-8> :not([hidden])~ :not([hidden]) {
  --space-x-reverse: 0;
  margin-left: calc(2rem * (1 - var(--space-x-reverse)));
  margin-right: calc(2rem * var(--space-x-reverse));
}

.space-y-8> :not([hidden])~ :not([hidden]) {
  --space-y-reverse: 0;
  margin-bottom: calc(2rem * var(--space-y-reverse));
  margin-top: calc(2rem * (1 - var(--space-y-reverse)));
}

.space-x-9> :not([hidden])~ :not([hidden]) {
  --space-x-reverse: 0;
  margin-left: calc(2.25rem * (1 - var(--space-x-reverse)));
  margin-right: calc(2.25rem * var(--space-x-reverse));
}

.space-y-9> :not([hidden])~ :not([hidden]) {
  --space-y-reverse: 0;
  margin-bottom: calc(2.25rem * var(--space-y-reverse));
  margin-top: calc(2.25rem * (1 - var(--space-y-reverse)));
}

.space-x-10> :not([hidden])~ :not([hidden]) {
  --space-x-reverse: 0;
  margin-left: calc(2.5rem * (1 - var(--space-x-reverse)));
  margin-right: calc(2.5rem * var(--space-x-reverse));
}

.space-y-10> :not([hidden])~ :not([hidden]) {
  --space-y-reverse: 0;
  margin-bottom: calc(2.5rem * var(--space-y-reverse));
  margin-top: calc(2.5rem * (1 - var(--space-y-reverse)));
}

.space-x-px> :not([hidden])~ :not([hidden]) {
  --space-x-reverse: 0;
  margin-left: calc(1px * (1 - var(--space-x-reverse)));
  margin-right: calc(1px * var(--space-x-reverse));
}

.space-y-px> :not([hidden])~ :not([hidden]) {
  --space-y-reverse: 0;
  margin-bottom: calc(1px * var(--space-y-reverse));
  margin-top: calc(1px * (1 - var(--space-y-reverse)));
}

/*内容适配*/
.object-contain {
  object-fit: contain;
}

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

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

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

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

/* flex */
/*align-content*/
.content-center {
  align-content: center;
}

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

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

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

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

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

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

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

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

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

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

/*align-self*/
.self-center {
  align-self: center;
}

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

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

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

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

.self-auto {
  align-self: auto;
}

/*basis*/
.basis-0 {
  flex-basis: 0px;
}

.basis-1 {
  flex-basis: 0.25rem;
}

.basis-2 {
  flex-basis: 0.5rem;
}

.basis-3 {
  flex-basis: 0.75rem;
}

.basis-4 {
  flex-basis: 1rem;
}

.basis-5 {
  flex-basis: 1.25rem;
}

.basis-6 {
  flex-basis: 1.5rem;
}

.basis-7 {
  flex-basis: 1.75rem;
}

.basis-8 {
  flex-basis: 2rem;
}

.basis-9 {
  flex-basis: 2.25rem;
}

.basis-10 {
  flex-basis: 2.5rem;
}

.basis-11 {
  flex-basis: 2.75rem;
}

.basis-12 {
  flex-basis: 3rem;
}

.basis-14 {
  flex-basis: 3.5rem;
}

.basis-16 {
  flex-basis: 4rem;
}

.basis-20 {
  flex-basis: 5rem;
}

.basis-24 {
  flex-basis: 6rem;
}

.basis-28 {
  flex-basis: 7rem;
}

.basis-32 {
  flex-basis: 8rem;
}

.basis-36 {
  flex-basis: 9rem;
}

.basis-40 {
  flex-basis: 10rem;
}

.basis-44 {
  flex-basis: 11rem;
}

.basis-48 {
  flex-basis: 12rem;
}

.basis-52 {
  flex-basis: 13rem;
}

.basis-56 {
  flex-basis: 14rem;
}

.basis-60 {
  flex-basis: 15rem;
}

.basis-64 {
  flex-basis: 16rem;
}

.basis-72 {
  flex-basis: 18rem;
}

.basis-80 {
  flex-basis: 20rem;
}

.basis-96 {
  flex-basis: 24rem;
}

.basis-auto {
  flex-basis: auto;
}

.basis-px {
  flex-basis: 1px;
}

.basis-0\.5 {
  flex-basis: 0.125rem;
}

.basis-1\.5 {
  flex-basis: 0.375rem;
}

.basis-2\.5 {
  flex-basis: 0.625rem;
}

.basis-3\.5 {
  flex-basis: 0.875rem;
}

.basis-1\/2 {
  flex-basis: 50%;
}

.basis-1\/3 {
  flex-basis: 33.333333%;
}

.basis-2\/3 {
  flex-basis: 66.666667%;
}

.basis-1\/4 {
  flex-basis: 25%;
}

.basis-2\/4 {
  flex-basis: 50%;
}

.basis-3\/4 {
  flex-basis: 75%;
}

.basis-1\/5 {
  flex-basis: 20%;
}

.basis-2\/5 {
  flex-basis: 40%;
}

.basis-3\/5 {
  flex-basis: 60%;
}

.basis-4\/5 {
  flex-basis: 80%;
}

.basis-1\/6 {
  flex-basis: 16.666667%;
}

.basis-2\/6 {
  flex-basis: 33.333333%;
}

.basis-3\/6 {
  flex-basis: 50%;
}

.basis-4\/6 {
  flex-basis: 66.666667%;
}

.basis-5\/6 {
  flex-basis: 83.333333%;
}

.basis-1\/12 {
  flex-basis: 8.333333%;
}

.basis-2\/12 {
  flex-basis: 16.666667%;
}

.basis-3\/12 {
  flex-basis: 25%;
}

.basis-4\/12 {
  flex-basis: 33.333333%;
}

.basis-5\/12 {
  flex-basis: 41.666667%;
}

.basis-6\/12 {
  flex-basis: 50%;
}

.basis-7\/12 {
  flex-basis: 58.333333%;
}

.basis-8\/12 {
  flex-basis: 66.666667%;
}

.basis-9\/12 {
  flex-basis: 75%;
}

.basis-10\/12 {
  flex-basis: 83.333333%;
}

.basis-11\/12 {
  flex-basis: 91.666667%;
}

.basis-full {
  flex-basis: 100%;
}

/*direction*/
.center,
.center-row {
  align-items: center;
  justify-content: center;
}

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

.center-x,
.center-y {
  align-items: center;
  display: flex;
}

.center-y {
  flex-direction: column;
}

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

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

/* flex */

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

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

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

.flex-none {
  flex: none;
}

/* gap */
.gap-0 {
  gap: 0;
}

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

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

.gap-px {
  gap: 1px;
}

.gap-x-px {
  -moz-column-gap: 1px;
  column-gap: 1px;
}

.gap-y-px {
  row-gap: 1px;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-x-0\.5 {
  -moz-column-gap: 0.125rem;
  column-gap: 0.125rem;
}

.gap-y-0\.5 {
  row-gap: 0.125rem;
}

.gap-3px {
  gap: 3px;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-x-1 {
  -moz-column-gap: 0.25rem;
  column-gap: 0.25rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-x-1\.5 {
  -moz-column-gap: 0.375rem;
  column-gap: 0.375rem;
}

.gap-y-1\.5 {
  row-gap: 0.375rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-x-2 {
  -moz-column-gap: 0.5rem;
  column-gap: 0.5rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-x-2\.5 {
  -moz-column-gap: 0.625rem;
  column-gap: 0.625rem;
}

.gap-y-2\.5 {
  row-gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
  column-gap: 0.75rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.gap-3\.5 {
  gap: 0.875rem;
}

.gap-x-3\.5 {
  -moz-column-gap: 0.875rem;
  column-gap: 0.875rem;
}

.gap-y-3\.5 {
  row-gap: 0.875rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
  column-gap: 1rem;
}

.gap-y-4 {
  row-gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-x-5 {
  -moz-column-gap: 1.25rem;
  column-gap: 1.25rem;
}

.gap-y-5 {
  row-gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
  column-gap: 1.5rem;
}

.gap-y-6 {
  row-gap: 1.5rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-x-7 {
  -moz-column-gap: 1.75rem;
  column-gap: 1.75rem;
}

.gap-y-7 {
  row-gap: 1.75rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-x-8 {
  -moz-column-gap: 2rem;
  column-gap: 2rem;
}

.gap-y-8 {
  row-gap: 2rem;
}

/* grow */
.grow {
  flex-grow: 1 !important;
}

.grow-0 {
  flex-grow: 0 !important;
}

/* 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;
}

/* order */
.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;
}

.order-first {
  order: -9999;
}

.order-last {
  order: 9999;
}

.order-none {
  order: 0;
}

/* shrink */
.shrink {
  flex-shrink: 1;
}

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

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

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

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

/*按钮*/

/* 边框 */
.border {
  --border-width:var(--border-width-1);
  border-width: var(--border-width);
}

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

.border-2 {
  --border-width:var(--border-width-2);
}

.border-4 {
  --border-width:var(--border-width-4);
}

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

.border-l {
  border-left-width: var(--border-width-1);
}

.border-r {
  border-right-width: var(--border-width-1);
}

.border-b {
  border-bottom-width: var(--border-width-1);
}

.border-t-0 {
  border-top-width: var(--border-width-0);
}

.border-r-0 {
  border-right-width: var(--border-width-0);
}

.border-b-0 {
  border-bottom-width: var(--border-width-0);
}

.border-l-0 {
  border-left-width: var(--border-width-0);
}

.border-t-2 {
  border-top-width: var(--border-width-2);
}

.border-l-2 {
  border-left-width: var(--border-width-2);
}

.border-r-2 {
  border-right-width: var(--border-width-2);
}

.border-b-2 {
  border-bottom-width: var(--border-width-2);
}

.border-t-4{
  border-top-width: var(--border-width-4);
}

.border-l-4 {
  border-left-width: var(--border-width-4);
}

.border-r-4 {
  border-right-width: var(--border-width-4);
}

.border-b-4 {
  border-bottom-width: var(--border-width-4);
}
.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;
}

/* 轮廓 */
/* 🚀 终极原子CSS生成器 PRO v4.3 - 史上最完整的原子类生成器 */
/* 生成时间: 2025/12/7 16:45:30 */
/* 主题: default | 属性数: 14 | 变体数: 4 | 断点数: 0 */
/* v4.3更新: 优化代码生成算法，提高生成速度和代码质量 */

/* 基础类 */
.outline-0,
.hover-outline-0:hover,
.focus-outline-0:focus,
.focus-visible-outline-0:focus-visible {
  outline-width: 0px !important;
}

.outline-1,
.hover-outline-1:hover,
.focus-outline-1:focus,
.focus-visible-outline-1:focus-visible {
  outline-width: 1px !important;
}

.outline-2,
.hover-outline-2:hover,
.focus-outline-2:focus,
.focus-visible-outline-2:focus-visible {
  outline-width: 2px !important;
}

.outline-4,
.hover-outline-4:hover,
.focus-outline-4:focus,
.focus-visible-outline-4:focus-visible {
  outline-width: 4px !important;
}

.outline-8,
.hover-outline-8:hover,
.focus-outline-8:focus,
.focus-visible-outline-8:focus-visible {
  outline-width: 8px !important;
}

.outline-transparent,
.hover-outline-transparent:hover,
.focus-outline-transparent:focus,
.focus-visible-outline-transparent:focus-visible {
  outline: 1px solid transparent !important;
}

.outline-none,
.hover-outline-none:hover,
.focus-outline-none:focus {
  outline: none !important;
}

.outline-solid,
.hover-outline-solid:hover,
.focus-outline-solid:focus,
.focus-visible-outline-solid:focus-visible {
  --outline-style: solid !important;
}

.outline-dashed,
.hover-outline-dashed:hover,
.focus-outline-dashed:focus,
.focus-visible-outline-dashed:focus-visible {
  --outline-style: dashed !important;
}

.outline-dotted,
.hover-outline-dotted:hover,
.focus-outline-dotted:focus,
.focus-visible-outline-dotted:focus-visible {
  --outline-style: dotted !important;
}

.outline-double,
.hover-outline-double:hover,
.focus-outline-double:focus,
.focus-visible-outline-double:focus-visible {
  --outline-style: double !important;
}

.outline-hidden,
.hover-outline-hidden:hover,
.focus-outline-hidden:focus,
.focus-visible-outline-hidden:focus-visible {
  --outline-style: hidden !important;
}

.outline-offset-0,
.hover-outline-offset-0:hover,
.focus-outline-offset-0:focus,
.focus-visible-outline-offset-0:focus-visible {
  --outline-offset-width: var(--spacing-0);
}

.outline-offset-1,
.hover-outline-offset-1:hover,
.focus-outline-offset-1:focus,
.focus-visible-outline-offset-1:focus-visible {
  --outline-offset-width: var(--spacing-1);
}

.outline-offset-2,
.hover-outline-offset-2:hover,
.focus-outline-offset-2:focus,
.focus-visible-outline-offset-2:focus-visible {
  --outline-offset-width: var(--spacing-2);
}

.outline-offset-3,
.hover-outline-offset-3:hover,
.focus-outline-offset-3:focus,
.focus-visible-outline-offset-3:focus-visible {
  --outline-offset-width: var(--spacing-3);
}

.outline-offset-4,
.hover-outline-offset-4:hover,
.focus-outline-offset-4:focus,
.focus-visible-outline-offset-4:focus-visible {
  --outline-offset-width: var(--spacing-4);
}

.outline-offset-5,
.hover-outline-offset-5:hover,
.focus-outline-offset-5:focus,
.focus-visible-outline-offset-5:focus-visible {
  --outline-offset-width: var(--spacing-5);
}

.outline-offset-6,
.hover-outline-offset-6:hover,
.focus-outline-offset-6:focus,
.focus-visible-outline-offset-6:focus-visible {
  --outline-offset-width: var(--spacing-6);
}

.outline-offset-7,
.hover-outline-offset-7:hover,
.focus-outline-offset-7:focus,
.focus-visible-outline-offset-7:focus-visible {
  --outline-offset-width: var(--spacing-7);
}

.outline-offset-8,
.hover-outline-offset-8:hover,
.focus-outline-offset-8:focus,
.focus-visible-outline-offset-8:focus-visible {
  --outline-offset-width: var(--spacing-8);
}

.outline-offset-9,
.hover-outline-offset-9:hover,
.focus-outline-offset-9:focus,
.focus-visible-outline-offset-9:focus-visible {
  --outline-offset-width: var(--spacing-9);
}

.outline-offset-10,
.hover-outline-offset-10:hover,
.focus-outline-offset-10:focus,
.focus-visible-outline-offset-10:focus-visible {
  --outline-offset-width: var(--spacing-10);
}

.outline-offset-11,
.hover-outline-offset-11:hover,
.focus-outline-offset-11:focus,
.focus-visible-outline-offset-11:focus-visible {
  --outline-offset-width: var(--spacing-11);
}

.outline-offset-12,
.hover-outline-offset-12:hover,
.focus-outline-offset-12:focus,
.focus-visible-outline-offset-12:focus-visible {
  --outline-offset-width: var(--spacing-12);
}

.outline-offset-14,
.hover-outline-offset-14:hover,
.focus-outline-offset-14:focus,
.focus-visible-outline-offset-14:focus-visible {
  --outline-offset-width: var(--spacing-14);
}

.outline-offset-16,
.hover-outline-offset-16:hover,
.focus-outline-offset-16:focus,
.focus-visible-outline-offset-16:focus-visible {
  --outline-offset-width: var(--spacing-16);
}

.outline-offset-20,
.hover-outline-offset-20:hover,
.focus-outline-offset-20:focus,
.focus-visible-outline-offset-20:focus-visible {
  --outline-offset-width: var(--spacing-20);
}

.outline-offset-24,
.hover-outline-offset-24:hover,
.focus-outline-offset-24:focus,
.focus-visible-outline-offset-24:focus-visible {
  --outline-offset-width: var(--spacing-24);
}

.outline-offset-px,
.hover-outline-offset-px:hover,
.focus-outline-offset-px:focus,
.focus-visible-outline-offset-px:focus-visible {
  --outline-offset-width: var(--spacing-px);
}

.outline-offset-0\.5,
.hover-outline-offset-0\.5:hover,
.focus-outline-offset-0\.5:focus,
.focus-visible-outline-offset-0\.5:focus-visible {
  --outline-offset-width: var(--spacing-0.5);
}

.outline-offset-1\.5,
.hover-outline-offset-1\.5:hover,
.focus-outline-offset-1\.5:focus,
.focus-visible-outline-offset-1\.5:focus-visible {
  --outline-offset-width: var(--spacing-1.5);
}

.outline-offset-2\.5,
.hover-outline-offset-2\.5:hover,
.focus-outline-offset-2\.5:focus,
.focus-visible-outline-offset-2\.5:focus-visible {
  --outline-offset-width: var(--spacing-2.5);
}

.outline-offset-3\.5,
.hover-outline-offset-3\.5:hover,
.focus-outline-offset-3\.5:focus,
.focus-visible-outline-offset-3\.5:focus-visible {
  --outline-offset-width: var(--spacing-3.5);
}

.outline-offset-auto,
.hover-outline-offset-auto:hover,
.focus-outline-offset-auto:focus,
.focus-visible-outline-offset-auto:focus-visible {
  --outline-offset-width: var(--spacing-auto);
}

.outline-offset-1\/2,
.hover-outline-offset-1\/2:hover,
.focus-outline-offset-1\/2:focus,
.focus-visible-outline-offset-1\/2:focus-visible {
  --outline-offset-width: var(--spacing-1\/2);
}

.outline-offset-1\/3,
.hover-outline-offset-1\/3:hover,
.focus-outline-offset-1\/3:focus,
.focus-visible-outline-offset-1\/3:focus-visible {
  --outline-offset-width: var(--spacing-1\/3);
}

.outline-offset-2\/3,
.hover-outline-offset-2\/3:hover,
.focus-outline-offset-2\/3:focus,
.focus-visible-outline-offset-2\/3:focus-visible {
  --outline-offset-width: var(--spacing-2\/3);
}

.outline-offset-1\/4,
.hover-outline-offset-1\/4:hover,
.focus-outline-offset-1\/4:focus,
.focus-visible-outline-offset-1\/4:focus-visible {
  --outline-offset-width: var(--spacing-1\/4);
}

.outline-offset-2\/4,
.hover-outline-offset-2\/4:hover,
.focus-outline-offset-2\/4:focus,
.focus-visible-outline-offset-2\/4:focus-visible {
  --outline-offset-width: var(--spacing-2\/4);
}

.outline-offset-3\/4,
.hover-outline-offset-3\/4:hover,
.focus-outline-offset-3\/4:focus,
.focus-visible-outline-offset-3\/4:focus-visible {
  --outline-offset-width: var(--spacing-3\/4);
}

.outline-offset-1\/5,
.hover-outline-offset-1\/5:hover,
.focus-outline-offset-1\/5:focus,
.focus-visible-outline-offset-1\/5:focus-visible {
  --outline-offset-width: var(--spacing-1\/5);
}

.outline-offset-2\/5,
.hover-outline-offset-2\/5:hover,
.focus-outline-offset-2\/5:focus,
.focus-visible-outline-offset-2\/5:focus-visible {
  --outline-offset-width: var(--spacing-2\/5);
}

.outline-offset-3\/5,
.hover-outline-offset-3\/5:hover,
.focus-outline-offset-3\/5:focus,
.focus-visible-outline-offset-3\/5:focus-visible {
  --outline-offset-width: var(--spacing-3\/5);
}

.outline-offset-4\/5,
.hover-outline-offset-4\/5:hover,
.focus-outline-offset-4\/5:focus,
.focus-visible-outline-offset-4\/5:focus-visible {
  --outline-offset-width: var(--spacing-4\/5);
}

.outline-offset-1\/6,
.hover-outline-offset-1\/6:hover,
.focus-outline-offset-1\/6:focus,
.focus-visible-outline-offset-1\/6:focus-visible {
  --outline-offset-width: var(--spacing-1\/6);
}

.outline-offset-2\/6,
.hover-outline-offset-2\/6:hover,
.focus-outline-offset-2\/6:focus,
.focus-visible-outline-offset-2\/6:focus-visible {
  --outline-offset-width: var(--spacing-2\/6);
}

.outline-offset-3\/6,
.hover-outline-offset-3\/6:hover,
.focus-outline-offset-3\/6:focus,
.focus-visible-outline-offset-3\/6:focus-visible {
  --outline-offset-width: var(--spacing-3\/6);
}

.outline-offset-4\/6,
.hover-outline-offset-4\/6:hover,
.focus-outline-offset-4\/6:focus,
.focus-visible-outline-offset-4\/6:focus-visible {
  --outline-offset-width: var(--spacing-4\/6);
}

.outline-offset-5\/6,
.hover-outline-offset-5\/6:hover,
.focus-outline-offset-5\/6:focus,
.focus-visible-outline-offset-5\/6:focus-visible {
  --outline-offset-width: var(--spacing-5\/6);
}

.outline-offset-full,
.hover-outline-offset-full:hover,
.focus-outline-offset-full:focus,
.focus-visible-outline-offset-full:focus-visible {
  --outline-offset-width: var(--spacing-full);
}

.outline-offset-screen,
.hover-outline-offset-screen:hover,
.focus-outline-offset-screen:focus,
.focus-visible-outline-offset-screen:focus-visible {
  --outline-offset-width: var(--spacing-screen);
}

.outline-offset-min,
.hover-outline-offset-min:hover,
.focus-outline-offset-min:focus,
.focus-visible-outline-offset-min:focus-visible {
  --outline-offset-width: var(--spacing-min);
}

.outline-offset-max,
.hover-outline-offset-max:hover,
.focus-outline-offset-max:focus,
.focus-visible-outline-offset-max:focus-visible {
  --outline-offset-width: var(--spacing-max);
}

.outline-offset-fit,
.hover-outline-offset-fit:hover,
.focus-outline-offset-fit:focus,
.focus-visible-outline-offset-fit:focus-visible {
  --outline-offset-width: var(--spacing-fit);
}

.outline-ring,
.hover-outline-ring:hover,
.focus-outline-ring:focus,
.focus-visible-outline-ring:focus-visible {
  --outline-style: solid;
}

.outline-inset,
.hover-outline-inset:hover,
.focus-outline-inset:focus,
.focus-visible-outline-inset:focus-visible {
  --outline-style: inset;
}

.outline-outset,
.hover-outline-outset:hover,
.focus-outline-outset:focus,
.focus-visible-outline-outset:focus-visible {
  --outline-style: outset;
}

.outline-ring,
.outline-outset,
.outline-inset,
.hover-outline-ring:hover,
.hover-outline-outset:hover,
.hover-outline-inset:hover,
.focus-outline-ring:focus,
.focus-outline-outset:focus,
.focus-outline-inset:focus,
.focus-visible-outline-ring:focus-visible,
.focus-visible-outline-outset:focus-visible,
.focus-visible-outline-inset:focus-visible {
  --ring-width: 1px;
  --ring-color: var(--black);
  outline: var(--outline-style) var(--ring-width) var(--ring-color);
  box-shadow: 0 0 0 var(--outline-offset-width) var(--ring-offset-color);
}

.ring-red-50,
.hover-ring-red:hover,
.focus-ring-red:focus,
.focus-visible-ring-red:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--red-50) / var(--ring-opacity));
}

.ring-red-100,
.hover-ring-red-100:hover,
.focus-ring-red-100:focus,
.focus-visible-ring-red-100:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--red-100) / var(--ring-opacity));
}

.ring-red-200,
.hover-ring-red-200:hover,
.focus-ring-red-200:focus,
.focus-visible-ring-red-200:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--red-200) / var(--ring-opacity));
}

.ring-red-300,
.hover-ring-red-300:hover,
.focus-ring-red-300:focus,
.focus-visible-ring-red-300:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--red-300) / var(--ring-opacity));
}

.ring-red-400,
.hover-ring-red-400:hover,
.focus-ring-red-400:focus,
.focus-visible-ring-red-400:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--red-400) / var(--ring-opacity));
}

.ring-red-500,
.ring-red,
.ring-danger,
input[data-verify="danger"],
.hover-ring-red:hover,
.focus-ring-red:focus,
.focus-visible-ring-red:focus-visible,
.focus-visible-ring-red-500:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--red-500) / var(--ring-opacity)) !important;
}

.ring-red-600,
.hover-ring-red-600:hover,
.focus-ring-red-600:focus,
.focus-visible-ring-red-600:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--red-600) / var(--ring-opacity));
}

.ring-red-700,
.hover-ring-red-700:hover,
.focus-ring-red-700:focus,
.focus-visible-ring-red-700:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--red-700) / var(--ring-opacity));
}

.ring-red-800,
.hover-ring-red-800:hover,
.focus-ring-red-800:focus,
.focus-visible-ring-red-800:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--red-800) / var(--ring-opacity));
}

.ring-red-900,
.hover-ring-red-900:hover,
.focus-ring-red-900:focus,
.focus-visible-ring-red-900:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--red-900) / var(--ring-opacity));
}

.ring-orange-50,
.hover-ring-orange-50:hover,
.focus-ring-orange-50:focus,
.focus-visible-ring-orange-50:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--orange-50) / var(--ring-opacity));
}

.ring-orange-100,
.hover-ring-orange-100:hover,
.focus-ring-orange-100:focus,
.focus-visible-ring-orange-100:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--orange-100) / var(--ring-opacity));
}

.ring-orange-200,
.hover-ring-orange-200:hover,
.focus-ring-orange-200:focus,
.focus-visible-ring-orange-200:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--orange-200) / var(--ring-opacity));
}

.ring-orange-300,
.hover-ring-orange-300:hover,
.focus-ring-orange-300:focus,
.focus-visible-ring-orange-300:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--orange-300) / var(--ring-opacity));
}

.ring-orange-400,
.hover-ring-orange-400:hover,
.focus-ring-orange-400:focus,
.focus-visible-ring-orange-400:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--orange-400) / var(--ring-opacity));
}

.ring-orange-500,
.ring-orange,
.hover-ring-orange-500:hover,
.focus-ring-orange-500:focus,
.focus-visible-ring-orange-500:focus-visible,
.focus-visible-ring-orange:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--orange-500) / var(--ring-opacity));
}

.ring-orange-600,
.hover-ring-orange-600:hover,
.focus-ring-orange-600:focus,
.focus-visible-ring-orange-600:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--orange-600) / var(--ring-opacity));
}

.ring-orange-700,
.hover-ring-orange-700:hover,
.focus-ring-orange-700:focus,
.focus-visible-ring-orange-700:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--orange-700) / var(--ring-opacity));
}

.ring-orange-800,
.hover-ring-orange-800:hover,
.focus-ring-orange-800:focus,
.focus-visible-ring-orange-800:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--orange-800) / var(--ring-opacity));
}

.ring-orange-900,
.hover-ring-orange-900:hover,
.focus-ring-orange-900:focus,
.focus-visible-ring-orange-900:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--orange-900) / var(--ring-opacity));
}

.ring-amber-50,
.hover-ring-amber-50:hover,
.focus-ring-amber-50:focus,
.focus-visible-ring-amber-50:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--amber-50) / var(--ring-opacity));
}

.ring-amber-100,
.hover-ring-amber-100:hover,
.focus-ring-amber-100:focus,
.focus-visible-ring-amber-100:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--amber-100) / var(--ring-opacity));
}

.ring-amber-200,
.hover-ring-amber-200:hover,
.focus-ring-amber-200:focus,
.focus-visible-ring-amber-200:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--amber-200) / var(--ring-opacity));
}

.ring-amber-300,
.hover-ring-amber-300:hover,
.focus-ring-amber-300:focus,
.focus-visible-ring-amber-300:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--amber-300) / var(--ring-opacity));
}

.ring-amber-400,
.hover-ring-amber-400:hover,
.focus-ring-amber-400:focus,
.focus-visible-ring-amber-400:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--amber-400) / var(--ring-opacity));
}

.ring-amber-500,
.ring-amber,
.ring-warning,
.hover-ring-amber-500:hover,
.focus-ring-amber-500:focus,
.focus-visible-ring-amber-500:focus-visible,
.focus-visible-ring-amber:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--amber-500) / var(--ring-opacity));
}

.ring-amber-600,
.hover-ring-amber-600:hover,
.focus-ring-amber-600:focus,
.focus-visible-ring-amber-600:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--amber-600) / var(--ring-opacity));
}

.ring-amber-700,
.hover-ring-amber-700:hover,
.focus-ring-amber-700:focus,
.focus-visible-ring-amber-700:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--amber-700) / var(--ring-opacity));
}

.ring-amber-800,
.hover-ring-amber-800:hover,
.focus-ring-amber-800:focus,
.focus-visible-ring-amber-800:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--amber-800) / var(--ring-opacity));
}

.ring-amber-900,
.hover-ring-amber-900:hover,
.focus-ring-amber-900:focus,
.focus-visible-ring-amber-900:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--amber-900) / var(--ring-opacity));
}

.ring-yellow-50,
.hover-ring-yellow-50:hover,
.focus-ring-yellow-50:focus,
.focus-visible-ring-yellow-50:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--yellow-50) / var(--ring-opacity));
}

.ring-yellow-100,
.hover-ring-yellow-100:hover,
.focus-ring-yellow-100:focus,
.focus-visible-ring-yellow-100:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--yellow-100) / var(--ring-opacity));
}

.ring-yellow-200,
.hover-ring-yellow-200:hover,
.focus-ring-yellow-200:focus,
.focus-visible-ring-yellow-200:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--yellow-200) / var(--ring-opacity));
}

.ring-yellow-300,
.hover-ring-yellow-300:hover,
.focus-ring-yellow-300:focus,
.focus-visible-ring-yellow-300:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--yellow-300) / var(--ring-opacity));
}

.ring-yellow-400,
.hover-ring-yellow-400:hover,
.focus-ring-yellow-400:focus,
.focus-ring-yellow-400:focus,
.focus-visible-ring-yellow-400:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--yellow-400) / var(--ring-opacity));
}

.ring-yellow-500,
.ring-yellow,
.hover-ring-yellow-500:hover,
.focus-ring-yellow-500:focus,
.focus-visible-ring-yellow-500:focus-visible,
.focus-visible-ring-yellow:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--yellow-500) / var(--ring-opacity));
}

.ring-yellow-600,
.hover-ring-yellow-600:hover,
.focus-ring-yellow-600:focus,
.focus-visible-ring-yellow-600:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--yellow-600) / var(--ring-opacity));
}

.ring-yellow-700,
.hover-ring-yellow-700:hover,
.focus-ring-yellow-700:focus,
.focus-visible-ring-yellow-700:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--yellow-700) / var(--ring-opacity));
}

.ring-yellow-800,
.hover-ring-yellow-800:hover,
.focus-ring-yellow-800:focus,
.focus-visible-ring-yellow-800:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--yellow-800) / var(--ring-opacity));
}

.ring-yellow-900,
.hover-ring-yellow-900:hover,
.focus-ring-yellow-900:focus,
.focus-visible-ring-yellow-900:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--yellow-900) / var(--ring-opacity));
}

.ring-lime-50,
.hover-ring-lime-50:hover,
.focus-ring-lime-50:focus,
.focus-visible-ring-lime-50:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--lime-50) / var(--ring-opacity));
}

.ring-lime-100,
.hover-ring-lime-100:hover,
.focus-ring-lime-100:focus,
.focus-visible-ring-lime-100:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--lime-100) / var(--ring-opacity));
}

.ring-lime-200,
.hover-ring-lime-200:hover,
.focus-ring-lime-200:focus,
.focus-visible-ring-lime-200:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--lime-200) / var(--ring-opacity));
}

.ring-lime-300,
.hover-ring-lime-300:hover,
.focus-ring-lime-300:focus,
.focus-visible-ring-lime-300:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--lime-300) / var(--ring-opacity));
}

.ring-lime-400,
.hover-ring-lime-400:hover,
.focus-ring-lime-400:focus,
.focus-visible-ring-lime-400:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--lime-400) / var(--ring-opacity));
}

.ring-lime-500,
.ring-lime,
.hover-ring-lime-500:hover,
.focus-ring-lime-500:focus,
.focus-visible-ring-lime-500:focus-visible,
.focus-visible-ring-lime:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--lime-500) / var(--ring-opacity));
}

.ring-lime-600,
.hover-ring-lime-600:hover,
.focus-ring-lime-600:focus,
.focus-visible-ring-lime-600:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--lime-600) / var(--ring-opacity));
}

.ring-lime-700,
.hover-ring-lime-700:hover,
.focus-ring-lime-700:focus,
.focus-visible-ring-lime-700:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--lime-700) / var(--ring-opacity));
}

.ring-lime-800,
.hover-ring-lime-800:hover,
.focus-ring-lime-800:focus,
.focus-visible-ring-lime-800:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--lime-800) / var(--ring-opacity));
}

.ring-lime-900,
.hover-ring-lime-900:hover,
.focus-ring-lime-900:focus,
.focus-visible-ring-lime-900:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--lime-900) / var(--ring-opacity));
}

.ring-green-50,
.hover-ring-green-50:hover,
.focus-ring-green-50:focus,
.focus-visible-ring-green-50:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--green-50) / var(--ring-opacity));
}

.ring-green-100,
.hover-ring-green-100:hover,
.focus-ring-green-100:focus,
.focus-visible-ring-green-100:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--green-100) / var(--ring-opacity));
}

.ring-green-200,
.hover-ring-green-200:hover,
.focus-ring-green-200:focus,
.focus-visible-ring-green-200:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--green-200) / var(--ring-opacity));
}

.ring-green-300,
.hover-ring-green-300:hover,
.focus-ring-green-300:focus,
.focus-visible-ring-green-300:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--green-300) / var(--ring-opacity));
}

.ring-green-400,
.hover-ring-green-400:hover,
.focus-ring-green-400:focus,
.focus-visible-ring-green-400:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--green-400) / var(--ring-opacity));
}

.ring-green-500,
.ring-green,
.ring-success,
input[data-verify="success"],
.hover-ring-green-500:hover,
.focus-ring-green-500:focus,
.hover-ring-green,
.focus-ring-green,
.focus-visible-ring-green-500:focus-visible,
.focus-visible-ring-green:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--green-500) / var(--ring-opacity)) !important;
}

.ring-green-600,
.hover-ring-green-600:hover,
.focus-ring-green-600:focus,
.focus-visible-ring-green-600:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--green-600) / var(--ring-opacity));
}

.ring-green-700,
.hover-ring-green-700:hover,
.focus-ring-green-700:focus,
.focus-visible-ring-green-700:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--green-700) / var(--ring-opacity));
}

.ring-green-800,
.hover-ring-green-800:hover,
.focus-ring-green-800:focus,
.focus-visible-ring-green-800:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--green-800) / var(--ring-opacity));
}

.ring-green-900,
.hover-ring-green-900:hover,
.focus-ring-green-900:focus,
.focus-visible-ring-green-900:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--green-900) / var(--ring-opacity));
}

.ring-emerald-50,
.hover-ring-emerald-50:hover,
.focus-ring-emerald-50:focus,
.focus-visible-ring-emerald-50:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--emerald-50) / var(--ring-opacity));
}

.ring-emerald-100,
.hover-ring-emerald-100:hover,
.focus-ring-emerald-100:focus,
.focus-visible-ring-emerald-100:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--emerald-100) / var(--ring-opacity));
}

.ring-emerald-200,
.hover-ring-emerald-200:hover,
.focus-ring-emerald-200:focus,
.focus-visible-ring-emerald-200:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--emerald-200) / var(--ring-opacity));
}

.ring-emerald-300,
.hover-ring-emerald-300:hover,
.focus-ring-emerald-300:focus,
.focus-visible-ring-emerald-300:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--emerald-300) / var(--ring-opacity));
}

.ring-emerald-400,
.hover-ring-emerald-400:hover,
.focus-ring-emerald-400:focus,
.focus-visible-ring-emerald-400:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--emerald-400) / var(--ring-opacity));
}

.ring-emerald-500,
.ring-emerald,
.hover-ring-emerald-500:hover,
.focus-ring-emerald-500:focus,
.focus-visible-ring-emerald-500:focus-visible,
.focus-visible-ring-emerald:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--emerald-500) / var(--ring-opacity));
}

.ring-emerald-600,
.hover-ring-emerald-600:hover,
.focus-ring-emerald-600:focus,
.focus-visible-ring-emerald-600:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--emerald-600) / var(--ring-opacity));
}

.ring-emerald-700,
.hover-ring-emerald-700:hover,
.focus-ring-emerald-700:focus,
.focus-visible-ring-emerald-700:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--emerald-700) / var(--ring-opacity));
}

.ring-emerald-800,
.hover-ring-emerald-800:hover,
.focus-ring-emerald-800:focus,
.focus-visible-ring-emerald-800:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--emerald-800) / var(--ring-opacity));
}

.ring-emerald-900,
.hover-ring-emerald-900:hover,
.focus-ring-emerald-900:focus,
.focus-visible-ring-emerald-900:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--emerald-900) / var(--ring-opacity));
}

.ring-teal-50,
.hover-ring-teal-50:hover,
.focus-ring-teal-50:focus,
.focus-visible-ring-teal-50:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--teal-50) / var(--ring-opacity));
}

.ring-teal-100,
.hover-ring-teal-100:hover,
.focus-ring-teal-100:focus,
.focus-visible-ring-teal-100:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--teal-100) / var(--ring-opacity));
}

.ring-teal-200,
.hover-ring-teal-200:hover,
.focus-ring-teal-200:focus,
.focus-visible-ring-teal-200:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--teal-200) / var(--ring-opacity));
}

.ring-teal-300,
.hover-ring-teal-300:hover,
.focus-ring-teal-300:focus,
.focus-visible-ring-teal-300:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--teal-300) / var(--ring-opacity));
}

.ring-teal-400,
.hover-ring-teal-400:hover,
.focus-ring-teal-400:focus,
.focus-visible-ring-teal-400:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--teal-400) / var(--ring-opacity));
}

.ring-teal-500,
.ring-teal,
.hover-ring-teal-500:hover,
.focus-ring-teal-500:focus,
.focus-visible-ring-teal-500:focus-visible,
.focus-visible-ring-teal:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--teal-500) / var(--ring-opacity));
}

.ring-teal-600,
.hover-ring-teal-600:hover,
.focus-ring-teal-600:focus,
.focus-visible-ring-teal-600:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--teal-600) / var(--ring-opacity));
}

.ring-teal-700,
.hover-ring-teal-700:hover,
.focus-ring-teal-700:focus,
.focus-visible-ring-teal-700:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--teal-700) / var(--ring-opacity));
}

.ring-teal-800,
.hover-ring-teal-800:hover,
.focus-ring-teal-800:focus,
.focus-visible-ring-teal-800:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--teal-800) / var(--ring-opacity));
}

.ring-teal-900,
.hover-ring-teal-900:hover,
.focus-ring-teal-900:focus,
.focus-visible-ring-teal-900:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--teal-900) / var(--ring-opacity));
}

.ring-cyan-50,
.hover-ring-cyan-50:hover,
.focus-ring-cyan-50:focus,
.focus-visible-ring-cyan-50:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--cyan-50) / var(--ring-opacity));
}

.ring-cyan-100,
.hover-ring-cyan-100:hover,
.focus-ring-cyan-100:focus,
.focus-visible-ring-cyan-100:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--cyan-100) / var(--ring-opacity));
}

.ring-cyan-200,
.hover-ring-cyan-200:hover,
.focus-ring-cyan-200:focus,
.focus-visible-ring-cyan-200:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--cyan-200) / var(--ring-opacity));
}

.ring-cyan-300,
.hover-ring-cyan-300:hover,
.focus-ring-cyan-300:focus,
.focus-visible-ring-cyan-300:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--cyan-300) / var(--ring-opacity));
}

.ring-cyan-400,
.hover-ring-cyan-400:hover,
.focus-ring-cyan-400:focus,
.focus-visible-ring-cyan-400:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--cyan-400) / var(--ring-opacity));
}

.ring-cyan-500,
.ring-cyan,
.hover-ring-cyan-500:hover,
.focus-ring-cyan-500:focus,
.focus-visible-ring-cyan-500:focus-visible,
.focus-visible-ring-cyan:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--cyan-500) / var(--ring-opacity));
}

.ring-cyan-600,
.hover-ring-cyan-600:hover,
.focus-ring-cyan-600:focus,
.focus-visible-ring-cyan-600:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--cyan-600) / var(--ring-opacity));
}

.ring-cyan-700,
.hover-ring-cyan-700:hover,
.focus-ring-cyan-700:focus,
.focus-visible-ring-cyan-700:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--cyan-700) / var(--ring-opacity));
}

.ring-cyan-800,
.hover-ring-cyan-800:hover,
.focus-ring-cyan-800:focus,
.focus-visible-ring-cyan-800:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--cyan-800) / var(--ring-opacity));
}

.ring-cyan-900,
.hover-ring-cyan-900:hover,
.focus-ring-cyan-900:focus,
.focus-visible-ring-cyan-900:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--cyan-900) / var(--ring-opacity));
}

.ring-sky-50,
.hover-ring-sky-50:hover,
.focus-ring-sky-50:focus,
.focus-visible-ring-sky-50:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--sky-50) / var(--ring-opacity));
}

.ring-sky-100,
.hover-ring-sky-100:hover,
.focus-ring-sky-100:focus,
.focus-visible-ring-sky-100:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--sky-100) / var(--ring-opacity));
}

.ring-sky-200,
.hover-ring-sky-200:hover,
.focus-ring-sky-200:focus,
.focus-visible-ring-sky-200:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--sky-200) / var(--ring-opacity));
}

.ring-sky-300,
.hover-ring-sky-300:hover,
.focus-ring-sky-300:focus,
.focus-visible-ring-sky-300:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--sky-300) / var(--ring-opacity));
}

.ring-sky-400,
.hover-ring-sky-400:hover,
.focus-ring-sky-400:focus,
.focus-visible-ring-sky-400:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--sky-400) / var(--ring-opacity));
}

.ring-sky-500,
.ring-sky,
.hover-ring-sky-500:hover,
.focus-ring-sky-500:focus,
.focus-visible-ring-sky-500:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--sky-500) / var(--ring-opacity));
}

.ring-sky-600,
.hover-ring-sky-600:hover,
.focus-ring-sky-600:focus,
.focus-visible-ring-sky-600:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--sky-600) / var(--ring-opacity));
}

.ring-sky-700,
.hover-ring-sky-700:hover,
.focus-ring-sky-700:focus,
.focus-visible-ring-sky-700:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--sky-700) / var(--ring-opacity));
}

.ring-sky-800,
.hover-ring-sky-800:hover,
.focus-ring-sky-800:focus,
.focus-visible-ring-sky-800:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--sky-800) / var(--ring-opacity));
}

.ring-sky-900,
.hover-ring-sky-900:hover,
.focus-ring-sky-900:focus,
.focus-visible-ring-sky-900:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--sky-900) / var(--ring-opacity));
}

.ring-blue-50,
.hover-ring-blue-50:hover,
.focus-ring-blue-50:focus,
.focus-visible-ring-blue-50:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--blue-50) / var(--ring-opacity));
}

.ring-blue-100,
.hover-ring-blue-100:hover,
.focus-ring-blue-100:focus,
.focus-visible-ring-blue-100:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--blue-100) / var(--ring-opacity));
}

.ring-blue-200,
.hover-ring-blue-200:hover,
.focus-ring-blue-200:focus,
.focus-visible-ring-blue-200:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--blue-200) / var(--ring-opacity));
}

.ring-blue-300,
.hover-ring-blue-300:hover,
.focus-ring-blue-300:focus,
.focus-visible-ring-blue-300:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--blue-300) / var(--ring-opacity));
}

.ring-blue-400,
.hover-ring-blue-400:hover,
.focus-ring-blue-400:focus,
.focus-visible-ring-blue-400:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--blue-400) / var(--ring-opacity));
}

.ring-blue-500,
.ring-blue,
.hover-ring-blue-500:hover,
.focus-ring-blue-500:focus,
.focus-ring-blue:hover,
.focus-ring-blue:focus,
.focus-visible-ring-blue:focus-visible,
.focus-visible-ring-blue-500:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--blue-500) / var(--ring-opacity));
}

.ring-blue-600,
.hover-ring-blue-600:hover,
.focus-ring-blue-600:focus,
.focus-visible-ring-blue-600:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--blue-600) / var(--ring-opacity));
}

.ring-blue-700,
.hover-ring-blue-700:hover,
.focus-ring-blue-700:focus,
.focus-visible-ring-blue-700:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--blue-700) / var(--ring-opacity));
}

.ring-blue-800,
.hover-ring-blue-800:hover,
.focus-ring-blue-800:focus,
.focus-visible-ring-blue-800:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--blue-800) / var(--ring-opacity));
}

.ring-blue-900,
.hover-ring-blue-900:hover,
.focus-ring-blue-900:focus,
.focus-visible-ring-blue-900:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--blue-900) / var(--ring-opacity));
}

.ring-indigo-50,
.hover-ring-indigo-50:hover,
.focus-ring-indigo-50:focus,
.focus-visible-ring-indigo-50:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--indigo-50) / var(--ring-opacity));
}

.ring-indigo-100,
.hover-ring-indigo-100:hover,
.focus-ring-indigo-100:focus,
.focus-visible-ring-indigo-100:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--indigo-100) / var(--ring-opacity));
}

.ring-indigo-200,
.hover-ring-indigo-200:hover,
.focus-ring-indigo-200:focus,
.focus-visible-ring-indigo-200:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--indigo-200) / var(--ring-opacity));
}

.ring-indigo-300,
.hover-ring-indigo-300:hover,
.focus-ring-indigo-300:focus,
.focus-visible-ring-indigo-300:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--indigo-300) / var(--ring-opacity));
}

.ring-indigo-400,
.hover-ring-indigo-400:hover,
.focus-ring-indigo-400:focus,
.focus-visible-ring-indigo-400:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--indigo-400) / var(--ring-opacity));
}

.ring-indigo-500,
.ring-indigo,
.hover-ring-indigo-500:hover,
.focus-ring-indigo-500:focus,
.focus-visible-ring-indigo-500:focus-visible,
.focus-visible-ring-indigo:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--indigo-500) / var(--ring-opacity));
}

.ring-indigo-600,
.hover-ring-indigo-600:hover,
.focus-ring-indigo-600:focus,
.focus-visible-ring-indigo-600:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--indigo-600) / var(--ring-opacity));
}

.ring-indigo-700,
.hover-ring-indigo-700:hover,
.focus-ring-indigo-700:focus,
.focus-visible-ring-indigo-700:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--indigo-700) / var(--ring-opacity));
}

.ring-indigo-800,
.hover-ring-indigo-800:hover,
.focus-ring-indigo-800:focus,
.focus-visible-ring-indigo-800:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--indigo-800) / var(--ring-opacity));
}

.ring-indigo-900,
.hover-ring-indigo-900:hover,
.focus-ring-indigo-900:focus,
.focus-visible-ring-indigo-900:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--indigo-900) / var(--ring-opacity));
}

.ring-violet-50,
.hover-ring-violet-50:hover,
.focus-ring-violet-50:focus,
.focus-visible-ring-violet-50:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--violet-50) / var(--ring-opacity));
}

.ring-violet-100,
.hover-ring-violet-100:hover,
.focus-ring-violet-100:focus,
.focus-visible-ring-violet-100:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--violet-100) / var(--ring-opacity));
}

.ring-violet-200,
.hover-ring-violet-200:hover,
.focus-ring-violet-200:focus,
.focus-visible-ring-violet-200:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--violet-200) / var(--ring-opacity));
}

.ring-violet-300,
.hover-ring-violet-300:hover,
.focus-ring-violet-300:focus,
.focus-visible-ring-violet-300:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--violet-300) / var(--ring-opacity));
}

.ring-violet-400,
.hover-ring-violet-400:hover,
.focus-ring-violet-400:focus,
.focus-visible-ring-violet-400:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--violet-400) / var(--ring-opacity));
}

.ring-violet-500,
.ring-violet,
.hover-ring-violet-500:hover,
.focus-ring-violet-500:focus,
.focus-visible-ring-violet-500:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--violet-500) / var(--ring-opacity));
}

.ring-violet-600,
.hover-ring-violet-600:hover,
.focus-ring-violet-600:focus,
.focus-visible-ring-violet-600:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--violet-600) / var(--ring-opacity));
}

.ring-violet-700,
.hover-ring-violet-700:hover,
.focus-ring-violet-700:focus,
.focus-visible-ring-violet-700:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--violet-700) / var(--ring-opacity));
}

.ring-violet-800,
.hover-ring-violet-800:hover,
.focus-ring-violet-800:focus,
.focus-visible-ring-violet-800:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--violet-800) / var(--ring-opacity));
}

.ring-violet-900,
.hover-ring-violet-900:hover,
.focus-ring-violet-900:focus,
.focus-visible-ring-violet-900:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--violet-900) / var(--ring-opacity));
}

.ring-purple-50,
.hover-ring-purple-50:hover,
.focus-ring-purple-50:focus,
.focus-visible-ring-purple-50:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--purple-50) / var(--ring-opacity));
}

.ring-purple-100,
.hover-ring-purple-100:hover,
.focus-ring-purple-100:focus,
.focus-visible-ring-purple-100:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--purple-100) / var(--ring-opacity));
}

.ring-purple-200,
.hover-ring-purple-200:hover,
.focus-ring-purple-200:focus,
.focus-visible-ring-purple-200:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--purple-200) / var(--ring-opacity));
}

.ring-purple-300,
.hover-ring-purple-300:hover,
.focus-ring-purple-300:focus,
.focus-visible-ring-purple-300:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--purple-300) / var(--ring-opacity));
}

.ring-purple-400,
.hover-ring-purple-400:hover,
.focus-ring-purple-400:focus,
.focus-visible-ring-purple-400:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--purple-400) / var(--ring-opacity));
}

.ring-purple-500,
.ring-purple,
.ring-special,
.hover-ring-purple-500:hover,
.focus-ring-purple-500:focus,
.focus-visible-ring-purple-500:focus-visible,
.focus-visible-ring-purple:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--purple-500) / var(--ring-opacity));
}

.ring-purple-600,
.hover-ring-purple-600:hover,
.focus-ring-purple-600:focus,
.focus-visible-ring-purple-600:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--purple-600) / var(--ring-opacity));
}

.ring-purple-700,
.hover-ring-purple-700:hover,
.focus-ring-purple-700:focus,
.focus-visible-ring-purple-700:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--purple-700) / var(--ring-opacity));
}

.ring-purple-800,
.hover-ring-purple-800:hover,
.focus-ring-purple-800:focus,
.focus-visible-ring-purple-800:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--purple-800) / var(--ring-opacity));
}

.ring-purple-900,
.hover-ring-purple-900:hover,
.focus-ring-purple-900:focus,
.focus-visible-ring-purple-900:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--purple-900) / var(--ring-opacity));
}

.ring-fuchsia-50,
.hover-ring-fuchsia-50:hover,
.focus-ring-fuchsia-50:focus,
.focus-visible-ring-fuchsia-50:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--fuchsia-50) / var(--ring-opacity));
}

.ring-fuchsia-100,
.hover-ring-fuchsia-100:hover,
.focus-ring-fuchsia-100:focus,
.focus-visible-ring-fuchsia-100:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--fuchsia-100) / var(--ring-opacity));
}

.ring-fuchsia-200,
.hover-ring-fuchsia-200:hover,
.focus-ring-fuchsia-200:focus,
.focus-visible-ring-fuchsia-200:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--fuchsia-200) / var(--ring-opacity));
}

.ring-fuchsia-300,
.hover-ring-fuchsia-300:hover,
.focus-ring-fuchsia-300:focus,
.focus-visible-ring-fuchsia-300:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--fuchsia-300) / var(--ring-opacity));
}

.ring-fuchsia-400,
.hover-ring-fuchsia-400:hover,
.focus-ring-fuchsia-400:focus,
.focus-visible-ring-fuchsia-400:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--fuchsia-400) / var(--ring-opacity));
}

.ring-fuchsia-500,
.ring-fuchsia,
.hover-ring-fuchsia-500:hover,
.focus-ring-fuchsia-500:focus,
.hover-ring-fuchsia:hover,
.focus-ring-fuchsia:focus,
.focus-visible-ring-fuchsia:focus-visible,
.focus-visible-ring-fuchsia-500:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--fuchsia-500) / var(--ring-opacity));
}

.ring-fuchsia-600,
.hover-ring-fuchsia-600:hover,
.focus-ring-fuchsia-600:focus,
.focus-visible-ring-fuchsia-600:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--fuchsia-600) / var(--ring-opacity));
}

.ring-fuchsia-700,
.hover-ring-fuchsia-700:hover,
.focus-ring-fuchsia-700:focus,
.focus-visible-ring-fuchsia-700:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--fuchsia-700) / var(--ring-opacity));
}

.ring-fuchsia-800,
.hover-ring-fuchsia-800:hover,
.focus-ring-fuchsia-800:focus,
.focus-visible-ring-fuchsia-800:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--fuchsia-800) / var(--ring-opacity));
}

.ring-fuchsia-900,
.hover-ring-fuchsia-900:hover,
.focus-ring-fuchsia-900:focus,
.focus-visible-ring-fuchsia-900:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--fuchsia-900) / var(--ring-opacity));
}

.ring-pink-50,
.hover-ring-pink-50:hover,
.focus-ring-pink-50:focus,
.focus-visible-ring-pink-50:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--pink-50) / var(--ring-opacity));
}

.ring-pink-100,
.hover-ring-pink-100:hover,
.focus-ring-pink-100:focus,
.focus-visible-ring-pink-100:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--pink-100) / var(--ring-opacity));
}

.ring-pink-200,
.hover-ring-pink-200:hover,
.focus-ring-pink-200:focus,
.focus-visible-ring-pink-200:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--pink-200) / var(--ring-opacity));
}

.ring-pink-300,
.hover-ring-pink-300:hover,
.focus-ring-pink-300:focus,
.focus-visible-ring-pink-300:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--pink-300) / var(--ring-opacity));
}

.ring-pink-400,
.hover-ring-pink-400:hover,
.focus-ring-pink-400:focus,
.focus-visible-ring-pink-400:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--pink-400) / var(--ring-opacity));
}

.ring-pink-500,
.ring-pink,
.ring-important,
.hover-ring-pink-500:hover,
.focus-ring-pink-500:focus,
.hover-ring-pink:hover,
.focus-ring-pink:focus,
.focus-visible-ring-pink:focus-visible,
.focus-visible-ring-pink-500:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--pink-500) / var(--ring-opacity));
}

.ring-pink-600,
.hover-ring-pink-600:hover,
.focus-ring-pink-600:focus,
.focus-visible-ring-pink-600:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--pink-600) / var(--ring-opacity));
}

.ring-pink-700,
.hover-ring-pink-700:hover,
.focus-ring-pink-700:focus,
.focus-visible-ring-pink-700:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--pink-700) / var(--ring-opacity));
}

.ring-pink-800,
.hover-ring-pink-800:hover,
.focus-ring-pink-800:focus,
.focus-visible-ring-pink-800:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--pink-800) / var(--ring-opacity));
}

.ring-pink-900,
.hover-ring-pink-900:hover,
.focus-ring-pink-900:focus,
.focus-visible-ring-pink-900:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--pink-900) / var(--ring-opacity));
}

.ring-rose-50,
.hover-ring-rose-50:hover,
.focus-ring-rose-50:focus,
.focus-visible-ring-rose-50:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--rose-50) / var(--ring-opacity));
}

.ring-rose-100,
.hover-ring-rose-100:hover,
.focus-ring-rose-100:focus,
.focus-visible-ring-rose-100:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--rose-100) / var(--ring-opacity));
}

.ring-rose-200,
.hover-ring-rose-200:hover,
.focus-ring-rose-200:focus,
.focus-visible-ring-rose-200:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--rose-200) / var(--ring-opacity));
}

.ring-rose-300,
.hover-ring-rose-300:hover,
.focus-ring-rose-300:focus,
.focus-visible-ring-rose-300:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--rose-300) / var(--ring-opacity));
}

.ring-rose-400,
.hover-ring-rose-400:hover,
.focus-ring-rose-400:focus,
.focus-visible-ring-rose-400:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--rose-400) / var(--ring-opacity));
}

.ring-rose-500,
.ring-rose,
.hover-ring-rose-500:hover,
.focus-ring-rose-500:focus,
.hover-ring-rose:hover,
.focus-ring-rose:focus,
.focus-visible-ring-rose:focus-visible,
.focus-visible-ring-rose-500:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--rose-500) / var(--ring-opacity));
}

.ring-rose-600,
.hover-ring-rose-600:hover,
.focus-ring-rose-600:focus,
.focus-visible-ring-rose-600:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--rose-600) / var(--ring-opacity));
}

.ring-rose-700,
.hover-ring-rose-700:hover,
.focus-ring-rose-700:focus,
.focus-visible-ring-rose-700:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--rose-700) / var(--ring-opacity));
}

.ring-rose-800,
.hover-ring-rose-800:hover,
.focus-ring-rose-800:focus,
.focus-visible-ring-rose-800:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--rose-800) / var(--ring-opacity));
}

.ring-rose-900,
.hover-ring-rose-900:hover,
.focus-ring-rose-900:focus,
.focus-visible-ring-rose-900:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--rose-900) / var(--ring-opacity));
}

.ring-slate-50,
.hover-ring-slate-50:hover,
.focus-ring-slate-50:focus,
.focus-visible-ring-slate-50:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--slate-50) / var(--ring-opacity));
}

.ring-slate-100,
.hover-ring-slate-100:hover,
.focus-ring-slate-100:focus,
.focus-visible-ring-slate-100:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--slate-100) / var(--ring-opacity));
}

.ring-slate-200,
.hover-ring-slate-200:hover,
.focus-ring-slate-200:focus,
.focus-visible-ring-slate-200:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--slate-200) / var(--ring-opacity));
}

.ring-slate-300,
.hover-ring-slate-300:hover,
.focus-ring-slate-300:focus,
.focus-visible-ring-slate-300:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--slate-300) / var(--ring-opacity));
}

.ring-slate-400,
.hover-ring-slate-400:hover,
.focus-ring-slate-400:focus,
.focus-visible-ring-slate-400:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--slate-400) / var(--ring-opacity));
}

.ring-slate-500,
.ring-slate,
.hover-ring-slate-500:hover,
.focus-ring-slate-500:focus,
.hover-ring-slate:hover,
.focus-ring-slate:focus,
.focus-visible-ring-slate:focus-visible,
.focus-visible-ring-slate-500:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--slate-500) / var(--ring-opacity));
}

.ring-slate-600,
.hover-ring-slate-600:hover,
.focus-ring-slate-600:focus,
.focus-visible-ring-slate-600:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--slate-600) / var(--ring-opacity));
}

.ring-slate-700,
.hover-ring-slate-700:hover,
.focus-ring-slate-700:focus,
.focus-visible-ring-slate-700:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--slate-700) / var(--ring-opacity));
}

.ring-slate-800,
.hover-ring-slate-800:hover,
.focus-ring-slate-800:focus,
.focus-visible-ring-slate-800:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--slate-800) / var(--ring-opacity));
}

.ring-slate-900,
.hover-ring-slate-900:hover,
.focus-ring-slate-900:focus,
.focus-visible-ring-slate-900:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--slate-900) / var(--ring-opacity));
}

.ring-gray-50,
.hover-ring-gray-50:hover,
.focus-ring-gray-50:focus,
.focus-visible-ring-gray-50:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--gray-50) / var(--ring-opacity));
}

.ring-gray-100,
.hover-ring-gray-100:hover,
.focus-ring-gray-100:focus,
.focus-visible-ring-gray-100:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--gray-100) / var(--ring-opacity));
}

.ring-gray-200,
.hover-ring-gray-200:hover,
.focus-ring-gray-200:focus,
.focus-visible-ring-gray-200:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--gray-200) / var(--ring-opacity));
}

.ring-gray-300,
.hover-ring-gray-300:hover,
.focus-ring-gray-300:focus,
.focus-visible-ring-gray-300:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--gray-300) / var(--ring-opacity));
}

.ring-gray-400,
.hover-ring-gray-400:hover,
.focus-ring-gray-400:focus,
.focus-visible-ring-gray-400:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--gray-400) / var(--ring-opacity));
}

.ring-gray-500,
.ring-gray,
.hover-ring-gray-500:hover,
.focus-ring-gray-500:focus,
.hover-ring-gray:hover,
.focus-ring-gray:focus,
.focus-visible-ring-gray:focus-visible,
.focus-visible-ring-gray-500:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--gray-500) / var(--ring-opacity));
}

.ring-gray-600,
.hover-ring-gray-600:hover,
.focus-ring-gray-600:focus,
.focus-visible-ring-gray-600:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--gray-600) / var(--ring-opacity));
}

.ring-gray-700,
.hover-ring-gray-700:hover,
.focus-ring-gray-700:focus,
.focus-visible-ring-gray-700:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--gray-700) / var(--ring-opacity));
}

.ring-gray-800,
.hover-ring-gray-800:hover,
.focus-ring-gray-800:focus,
.focus-visible-ring-gray-800:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--gray-800) / var(--ring-opacity));
}

.ring-gray-900,
.hover-ring-gray-900:hover,
.focus-ring-gray-900:focus,
.focus-visible-ring-gray-900:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--gray-900) / var(--ring-opacity));
}

.ring-zinc-50,
.hover-ring-zinc-50:hover,
.focus-ring-zinc-50:focus,
.focus-visible-ring-zinc-50:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--zinc-50) / var(--ring-opacity));
}

.ring-zinc-100,
.hover-ring-zinc-100:hover,
.focus-ring-zinc-100:focus,
.focus-visible-ring-zinc-100:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--zinc-100) / var(--ring-opacity));
}

.ring-zinc-200,
.hover-ring-zinc-200:hover,
.focus-ring-zinc-200:focus,
.focus-visible-ring-zinc-200:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--zinc-200) / var(--ring-opacity));
}

.ring-zinc-300,
.hover-ring-zinc-300:hover,
.focus-ring-zinc-300:focus,
.focus-visible-ring-zinc-300:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--zinc-300) / var(--ring-opacity));
}

.ring-zinc-400,
.hover-ring-zinc-400:hover,
.focus-ring-zinc-400:focus,
.focus-visible-ring-zinc-400:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--zinc-400) / var(--ring-opacity));
}

.ring-zinc-500,
.ring-zinc,
.hover-ring-zinc-500:hover,
.focus-ring-zinc-500:focus,
.hover-ring-zinc:hover,
.focus-ring-zinc:focus,
.focus-visible-ring-zinc:focus-visible,
.focus-visible-ring-zinc-500:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--zinc-500) / var(--ring-opacity));
}

.ring-zinc-600,
.hover-ring-zinc-600:hover,
.focus-ring-zinc-600:focus,
.focus-visible-ring-zinc-600:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--zinc-600) / var(--ring-opacity));
}

.ring-zinc-700,
.hover-ring-zinc-700:hover,
.focus-ring-zinc-700:focus,
.focus-visible-ring-zinc-700:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--zinc-700) / var(--ring-opacity));
}

.ring-zinc-800,
.hover-ring-zinc-800:hover,
.focus-ring-zinc-800:focus,
.focus-visible-ring-zinc-800:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--zinc-800) / var(--ring-opacity));
}

.ring-zinc-900,
.hover-ring-zinc-900:hover,
.focus-ring-zinc-900:focus,
.focus-visible-ring-zinc-900:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--zinc-900) / var(--ring-opacity));
}

.ring-black,
.hover-ring-black:hover,
.focus-ring-black:focus,
.focus-visible-ring-black:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--black) / var(--ring-opacity));
}

.ring-white,
.hover-ring-white:hover,
.focus-ring-white:focus,
.focus-visible-ring-white:focus-visible {
  --ring-opacity: 1;
  --ring-color: rgba(var(--white) / var(--ring-opacity));
}

.ring-inset,
.hover-ring-inset:hover,
.focus-ring-inset:focus,
.focus-visible-ring-inset:focus-visible {
  --ring-inset: inset;
}

.ring-offset-red-50,
.hover-ring-offset-red-50:hover,
.focus-ring-offset-red-50:focus,
.focus-visible-ring-offset-red-50:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--red-50) / var(--ring-offset-opacity));
}

.ring-offset-red-100,
.hover-ring-offset-red-100:hover,
.focus-ring-offset-red-100:focus,
.focus-visible-ring-offset-red-100:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--red-100) / var(--ring-offset-opacity));
}

.ring-offset-red-200,
.hover-ring-offset-red-200:hover,
.focus-ring-offset-red-200:focus,
.focus-visible-ring-offset-red-200:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--red-200) / var(--ring-offset-opacity));
}

.ring-offset-red-300,
.hover-ring-offset-red-300:hover,
.focus-ring-offset-red-300:focus,
.focus-visible-ring-offset-red-300:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--red-300) / var(--ring-offset-opacity));
}

.ring-offset-red-400,
.hover-ring-offset-red-400:hover,
.focus-ring-offset-red-400:focus,
.focus-visible-ring-offset-red-400:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--red-400) / var(--ring-offset-opacity));
}

.ring-offset-red-500,
.hover-ring-offset-red-500:hover,
.focus-ring-offset-red-500:focus,
.focus-visible-ring-offset-red-500:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--red-500) / var(--ring-offset-opacity));
}

.ring-offset-red-600,
.hover-ring-offset-red-600:hover,
.focus-ring-offset-red-600:focus,
.focus-visible-ring-offset-red-600:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--red-600) / var(--ring-offset-opacity));
}

.ring-offset-red-700,
.hover-ring-offset-red-700:hover,
.focus-ring-offset-red-700:focus,
.focus-visible-ring-offset-red-700:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--red-700) / var(--ring-offset-opacity));
}

.ring-offset-red-800,
.hover-ring-offset-red-800:hover,
.focus-ring-offset-red-800:focus,
.focus-visible-ring-offset-red-800:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--red-800) / var(--ring-offset-opacity));
}

.ring-offset-red-900,
.hover-ring-offset-red-900:hover,
.focus-ring-offset-red-900:focus,
.focus-visible-ring-offset-red-900:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--red-900) / var(--ring-offset-opacity));
}

.ring-offset-orange-50,
.hover-ring-offset-orange-50:hover,
.focus-ring-offset-orange-50:focus,
.focus-visible-ring-offset-orange-50:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--orange-50) / var(--ring-offset-opacity));
}

.ring-offset-orange-100,
.hover-ring-offset-orange-100:hover,
.focus-ring-offset-orange-100:focus,
.focus-visible-ring-offset-orange-100:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--orange-100) / var(--ring-offset-opacity));
}

.ring-offset-orange-200,
.hover-ring-offset-orange-200:hover,
.focus-ring-offset-orange-200:focus,
.focus-visible-ring-offset-orange-200:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--orange-200) / var(--ring-offset-opacity));
}

.ring-offset-orange-300,
.hover-ring-offset-orange-300:hover,
.focus-ring-offset-orange-300:focus,
.focus-visible-ring-offset-orange-300:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--orange-300) / var(--ring-offset-opacity));
}

.ring-offset-orange-400,
.hover-ring-offset-orange-400:hover,
.focus-ring-offset-orange-400:focus,
.focus-visible-ring-offset-orange-400:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--orange-400) / var(--ring-offset-opacity));
}

.ring-offset-orange-500,
.hover-ring-offset-orange-500:hover,
.focus-ring-offset-orange-500:focus,
.focus-visible-ring-offset-orange-500:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--orange-500) / var(--ring-offset-opacity));
}

.ring-offset-orange-600,
.hover-ring-offset-orange-600:hover,
.focus-ring-offset-orange-600:focus,
.focus-visible-ring-offset-orange-600:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--orange-600) / var(--ring-offset-opacity));
}

.ring-offset-orange-700,
.hover-ring-offset-orange-700:hover,
.focus-ring-offset-orange-700:focus,
.focus-visible-ring-offset-orange-700:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--orange-700) / var(--ring-offset-opacity));
}

.ring-offset-orange-800,
.hover-ring-offset-orange-800:hover,
.focus-ring-offset-orange-800:focus,
.focus-visible-ring-offset-orange-800:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--orange-800) / var(--ring-offset-opacity));
}

.ring-offset-orange-900,
.hover-ring-offset-orange-900:hover,
.focus-ring-offset-orange-900:focus,
.focus-visible-ring-offset-orange-900:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--orange-900) / var(--ring-offset-opacity));
}

.ring-offset-amber-50,
.hover-ring-offset-amber-50:hover,
.focus-ring-offset-amber-50:focus,
.focus-visible-ring-offset-amber-50:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--amber-50) / var(--ring-offset-opacity));
}

.ring-offset-amber-100,
.hover-ring-offset-amber-100:hover,
.focus-ring-offset-amber-100:focus,
.focus-visible-ring-offset-amber-100:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--amber-100) / var(--ring-offset-opacity));
}

.ring-offset-amber-200,
.hover-ring-offset-amber-200:hover,
.focus-ring-offset-amber-200:focus,
.focus-visible-ring-offset-amber-200:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--amber-200) / var(--ring-offset-opacity));
}

.ring-offset-amber-300,
.hover-ring-offset-amber-300:hover,
.focus-ring-offset-amber-300:focus,
.focus-visible-ring-offset-amber-300:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--amber-300) / var(--ring-offset-opacity));
}

.ring-offset-amber-400,
.hover-ring-offset-amber-400:hover,
.focus-ring-offset-amber-400:focus,
.focus-visible-ring-offset-amber-400:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--amber-400) / var(--ring-offset-opacity));
}

.ring-offset-amber-500,
.hover-ring-offset-amber-500:hover,
.focus-ring-offset-amber-500:focus,
.focus-visible-ring-offset-amber-500:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--amber-500) / var(--ring-offset-opacity));
}

.ring-offset-amber-600,
.hover-ring-offset-amber-600:hover,
.focus-ring-offset-amber-600:focus,
.focus-visible-ring-offset-amber-600:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--amber-600) / var(--ring-offset-opacity));
}

.ring-offset-amber-700,
.hover-ring-offset-amber-700:hover,
.focus-ring-offset-amber-700:focus,
.focus-visible-ring-offset-amber-700:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--amber-700) / var(--ring-offset-opacity));
}

.ring-offset-amber-800,
.hover-ring-offset-amber-800:hover,
.focus-ring-offset-amber-800:focus,
.focus-visible-ring-offset-amber-800:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--amber-800) / var(--ring-offset-opacity));
}

.ring-offset-amber-900,
.hover-ring-offset-amber-900:hover,
.focus-ring-offset-amber-900:focus,
.focus-visible-ring-offset-amber-900:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--amber-900) / var(--ring-offset-opacity));
}

.ring-offset-yellow-50,
.hover-ring-offset-yellow-50:hover,
.focus-ring-offset-yellow-50:focus,
.focus-visible-ring-offset-yellow-50:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--yellow-50) / var(--ring-offset-opacity));
}

.ring-offset-yellow-100,
.hover-ring-offset-yellow-100:hover,
.focus-ring-offset-yellow-100:focus,
.focus-visible-ring-offset-yellow-100:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--yellow-100) / var(--ring-offset-opacity));
}

.ring-offset-yellow-200,
.hover-ring-offset-yellow-200:hover,
.focus-ring-offset-yellow-200:focus,
.focus-visible-ring-offset-yellow-200:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--yellow-200) / var(--ring-offset-opacity));
}

.ring-offset-yellow-300,
.hover-ring-offset-yellow-300:hover,
.focus-ring-offset-yellow-300:focus,
.focus-visible-ring-offset-yellow-300:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--yellow-300) / var(--ring-offset-opacity));
}

.ring-offset-yellow-400,
.hover-ring-offset-yellow-400:hover,
.focus-ring-offset-yellow-400:focus,
.focus-visible-ring-offset-yellow-400:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--yellow-400) / var(--ring-offset-opacity));
}

.ring-offset-yellow-500,
.hover-ring-offset-yellow-500:hover,
.focus-ring-offset-yellow-500:focus,
.focus-visible-ring-offset-yellow-500:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--yellow-500) / var(--ring-offset-opacity));
}

.ring-offset-yellow-600,
.hover-ring-offset-yellow-600:hover,
.focus-ring-offset-yellow-600:focus,
.focus-visible-ring-offset-yellow-600:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--yellow-600) / var(--ring-offset-opacity));
}

.ring-offset-yellow-700,
.hover-ring-offset-yellow-700:hover,
.focus-ring-offset-yellow-700:focus,
.focus-visible-ring-offset-yellow-700:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--yellow-700) / var(--ring-offset-opacity));
}

.ring-offset-yellow-800,
.hover-ring-offset-yellow-800:hover,
.focus-ring-offset-yellow-800:focus,
.focus-visible-ring-offset-yellow-800:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--yellow-800) / var(--ring-offset-opacity));
}

.ring-offset-yellow-900,
.hover-ring-offset-yellow-900:hover,
.focus-ring-offset-yellow-900:focus,
.focus-visible-ring-offset-yellow-900:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--yellow-900) / var(--ring-offset-opacity));
}

.ring-offset-lime-50,
.hover-ring-offset-lime-50:hover,
.focus-ring-offset-lime-50:focus,
.focus-visible-ring-offset-lime-50:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--lime-50) / var(--ring-offset-opacity));
}

.ring-offset-lime-100,
.hover-ring-offset-lime-100:hover,
.focus-ring-offset-lime-100:focus,
.focus-visible-ring-offset-lime-100:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--lime-100) / var(--ring-offset-opacity));
}

.ring-offset-lime-200,
.hover-ring-offset-lime-200:hover,
.focus-ring-offset-lime-200:focus,
.focus-visible-ring-offset-lime-200:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--lime-200) / var(--ring-offset-opacity));
}

.ring-offset-lime-300,
.hover-ring-offset-lime-300:hover,
.focus-ring-offset-lime-300:focus,
.focus-visible-ring-offset-lime-300:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--lime-300) / var(--ring-offset-opacity));
}

.ring-offset-lime-400,
.hover-ring-offset-lime-400:hover,
.focus-ring-offset-lime-400:focus,
.focus-visible-ring-offset-lime-400:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--lime-400) / var(--ring-offset-opacity));
}

.ring-offset-lime-500,
.hover-ring-offset-lime-500:hover,
.focus-ring-offset-lime-500:focus,
.focus-visible-ring-offset-lime-500:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--lime-500) / var(--ring-offset-opacity));
}

.ring-offset-lime-600,
.hover-ring-offset-lime-600:hover,
.focus-ring-offset-lime-600:focus,
.focus-visible-ring-offset-lime-600:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--lime-600) / var(--ring-offset-opacity));
}

.ring-offset-lime-700,
.hover-ring-offset-lime-700:hover,
.focus-ring-offset-lime-700:focus,
.focus-visible-ring-offset-lime-700:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--lime-700) / var(--ring-offset-opacity));
}

.ring-offset-lime-800,
.hover-ring-offset-lime-800:hover,
.focus-ring-offset-lime-800:focus,
.focus-visible-ring-offset-lime-800:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--lime-800) / var(--ring-offset-opacity));
}

.ring-offset-lime-900,
.hover-ring-offset-lime-900:hover,
.focus-ring-offset-lime-900:focus,
.focus-visible-ring-offset-lime-900:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--lime-900) / var(--ring-offset-opacity));
}

.ring-offset-green-50,
.hover-ring-offset-green-50:hover,
.focus-ring-offset-green-50:focus,
.focus-visible-ring-offset-green-50:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--green-50) / var(--ring-offset-opacity));
}

.ring-offset-green-100,
.hover-ring-offset-green-100:hover,
.focus-ring-offset-green-100:focus,
.focus-visible-ring-offset-green-100:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--green-100) / var(--ring-offset-opacity));
}

.ring-offset-green-200,
.hover-ring-offset-green-200:hover,
.focus-ring-offset-green-200:focus,
.focus-visible-ring-offset-green-200:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--green-200) / var(--ring-offset-opacity));
}

.ring-offset-green-300,
.hover-ring-offset-green-300:hover,
.focus-ring-offset-green-300:focus,
.focus-visible-ring-offset-green-300:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--green-300) / var(--ring-offset-opacity));
}

.ring-offset-green-400,
.hover-ring-offset-green-400:hover,
.focus-ring-offset-green-400:focus,
.focus-visible-ring-offset-green-400:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--green-400) / var(--ring-offset-opacity));
}

.ring-offset-green-500,
.hover-ring-offset-green-500:hover,
.focus-ring-offset-green-500:focus,
.focus-visible-ring-offset-green-500:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--green-500) / var(--ring-offset-opacity));
}

.ring-offset-green-600,
.hover-ring-offset-green-600:hover,
.focus-ring-offset-green-600:focus,
.focus-visible-ring-offset-green-600:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--green-600) / var(--ring-offset-opacity));
}

.ring-offset-green-700,
.hover-ring-offset-green-700:hover,
.focus-ring-offset-green-700:focus,
.focus-visible-ring-offset-green-700:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--green-700) / var(--ring-offset-opacity));
}

.ring-offset-green-800,
.hover-ring-offset-green-800:hover,
.focus-ring-offset-green-800:focus,
.focus-visible-ring-offset-green-800:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--green-800) / var(--ring-offset-opacity));
}

.ring-offset-green-900,
.hover-ring-offset-green-900:hover,
.focus-ring-offset-green-900:focus,
.focus-visible-ring-offset-green-900:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--green-900) / var(--ring-offset-opacity));
}

.ring-offset-emerald-50,
.hover-ring-offset-emerald-50:hover,
.focus-ring-offset-emerald-50:focus,
.focus-visible-ring-offset-emerald-50:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--emerald-50) / var(--ring-offset-opacity));
}

.ring-offset-emerald-100,
.hover-ring-offset-emerald-100:hover,
.focus-ring-offset-emerald-100:focus,
.focus-visible-ring-offset-emerald-100:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--emerald-100) / var(--ring-offset-opacity));
}

.ring-offset-emerald-200,
.hover-ring-offset-emerald-200:hover,
.focus-ring-offset-emerald-200:focus,
.focus-visible-ring-offset-emerald-200:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--emerald-200) / var(--ring-offset-opacity));
}

.ring-offset-emerald-300,
.hover-ring-offset-emerald-300:hover,
.focus-ring-offset-emerald-300:focus,
.focus-visible-ring-offset-emerald-300:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--emerald-300) / var(--ring-offset-opacity));
}

.ring-offset-emerald-400,
.hover-ring-offset-emerald-400:hover,
.focus-ring-offset-emerald-400:focus,
.focus-visible-ring-offset-emerald-400:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--emerald-400) / var(--ring-offset-opacity));
}

.ring-offset-emerald-500,
.hover-ring-offset-emerald-500:hover,
.focus-ring-offset-emerald-500:focus,
.focus-visible-ring-offset-emerald-500:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--emerald-500) / var(--ring-offset-opacity));
}

.ring-offset-emerald-600,
.hover-ring-offset-emerald-600:hover,
.focus-ring-offset-emerald-600:focus,
.focus-visible-ring-offset-emerald-600:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--emerald-600) / var(--ring-offset-opacity));
}

.ring-offset-emerald-700,
.hover-ring-offset-emerald-700:hover,
.focus-ring-offset-emerald-700:focus,
.focus-visible-ring-offset-emerald-700:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--emerald-700) / var(--ring-offset-opacity));
}

.ring-offset-emerald-800,
.hover-ring-offset-emerald-800:hover,
.focus-ring-offset-emerald-800:focus,
.focus-visible-ring-offset-emerald-800:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--emerald-800) / var(--ring-offset-opacity));
}

.ring-offset-emerald-900,
.hover-ring-offset-emerald-900:hover,
.focus-ring-offset-emerald-900:focus,
.focus-visible-ring-offset-emerald-900:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--emerald-900) / var(--ring-offset-opacity));
}

.ring-offset-teal-50,
.hover-ring-offset-teal-50:hover,
.focus-ring-offset-teal-50:focus,
.focus-visible-ring-offset-teal-50:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--teal-50) / var(--ring-offset-opacity));
}

.ring-offset-teal-100,
.hover-ring-offset-teal-100:hover,
.focus-ring-offset-teal-100:focus,
.focus-visible-ring-offset-teal-100:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--teal-100) / var(--ring-offset-opacity));
}

.ring-offset-teal-200,
.hover-ring-offset-teal-200:hover,
.focus-ring-offset-teal-200:focus,
.focus-visible-ring-offset-teal-200:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--teal-200) / var(--ring-offset-opacity));
}

.ring-offset-teal-300,
.hover-ring-offset-teal-300:hover,
.focus-ring-offset-teal-300:focus,
.focus-visible-ring-offset-teal-300:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--teal-300) / var(--ring-offset-opacity));
}

.ring-offset-teal-400,
.hover-ring-offset-teal-400:hover,
.focus-ring-offset-teal-400:focus,
.focus-visible-ring-offset-teal-400:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--teal-400) / var(--ring-offset-opacity));
}

.ring-offset-teal-500,
.hover-ring-offset-teal-500:hover,
.focus-ring-offset-teal-500:focus,
.focus-visible-ring-offset-teal-500:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--teal-500) / var(--ring-offset-opacity));
}

.ring-offset-teal-600,
.hover-ring-offset-teal-600:hover,
.focus-ring-offset-teal-600:focus,
.focus-visible-ring-offset-teal-600:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--teal-600) / var(--ring-offset-opacity));
}

.ring-offset-teal-700,
.hover-ring-offset-teal-700:hover,
.focus-ring-offset-teal-700:focus,
.focus-visible-ring-offset-teal-700:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--teal-700) / var(--ring-offset-opacity));
}

.ring-offset-teal-800,
.hover-ring-offset-teal-800:hover,
.focus-ring-offset-teal-800:focus,
.focus-visible-ring-offset-teal-800:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--teal-800) / var(--ring-offset-opacity));
}

.ring-offset-teal-900,
.hover-ring-offset-teal-900:hover,
.focus-ring-offset-teal-900:focus,
.focus-visible-ring-offset-teal-900:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--teal-900) / var(--ring-offset-opacity));
}

.ring-offset-cyan-50,
.hover-ring-offset-cyan-50:hover,
.focus-ring-offset-cyan-50:focus,
.focus-visible-ring-offset-cyan-50:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--cyan-50) / var(--ring-offset-opacity));
}

.ring-offset-cyan-100,
.hover-ring-offset-cyan-100:hover,
.focus-ring-offset-cyan-100:focus,
.focus-visible-ring-offset-cyan-100:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--cyan-100) / var(--ring-offset-opacity));
}

.ring-offset-cyan-200,
.hover-ring-offset-cyan-200:hover,
.focus-ring-offset-cyan-200:focus,
.focus-visible-ring-offset-cyan-200:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--cyan-200) / var(--ring-offset-opacity));
}

.ring-offset-cyan-300,
.hover-ring-offset-cyan-300:hover,
.focus-ring-offset-cyan-300:focus,
.focus-visible-ring-offset-cyan-300:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--cyan-300) / var(--ring-offset-opacity));
}

.ring-offset-cyan-400,
.hover-ring-offset-cyan-400:hover,
.focus-ring-offset-cyan-400:focus,
.focus-visible-ring-offset-cyan-400:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--cyan-400) / var(--ring-offset-opacity));
}

.ring-offset-cyan-500,
.hover-ring-offset-cyan-500:hover,
.focus-ring-offset-cyan-500:focus,
.focus-visible-ring-offset-cyan-500:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--cyan-500) / var(--ring-offset-opacity));
}

.ring-offset-cyan-600,
.hover-ring-offset-cyan-600:hover,
.focus-ring-offset-cyan-600:focus,
.focus-visible-ring-offset-cyan-600:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--cyan-600) / var(--ring-offset-opacity));
}

.ring-offset-cyan-700,
.hover-ring-offset-cyan-700:hover,
.focus-ring-offset-cyan-700:focus,
.focus-visible-ring-offset-cyan-700:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--cyan-700) / var(--ring-offset-opacity));
}

.ring-offset-cyan-800,
.hover-ring-offset-cyan-800:hover,
.focus-ring-offset-cyan-800:focus,
.focus-visible-ring-offset-cyan-800:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--cyan-800) / var(--ring-offset-opacity));
}

.ring-offset-cyan-900,
.hover-ring-offset-cyan-900:hover,
.focus-ring-offset-cyan-900:focus,
.focus-visible-ring-offset-cyan-900:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--cyan-900) / var(--ring-offset-opacity));
}

.ring-offset-sky-50,
.hover-ring-offset-sky-50:hover,
.focus-ring-offset-sky-50:focus,
.focus-visible-ring-offset-sky-50:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--sky-50) / var(--ring-offset-opacity));
}

.ring-offset-sky-100,
.hover-ring-offset-sky-100:hover,
.focus-ring-offset-sky-100:focus,
.focus-visible-ring-offset-sky-100:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--sky-100) / var(--ring-offset-opacity));
}

.ring-offset-sky-200,
.hover-ring-offset-sky-200:hover,
.focus-ring-offset-sky-200:focus,
.focus-visible-ring-offset-sky-200:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--sky-200) / var(--ring-offset-opacity));
}

.ring-offset-sky-300,
.hover-ring-offset-sky-300:hover,
.focus-ring-offset-sky-300:focus,
.focus-visible-ring-offset-sky-300:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--sky-300) / var(--ring-offset-opacity));
}

.ring-offset-sky-400,
.hover-ring-offset-sky-400:hover,
.focus-ring-offset-sky-400:focus,
.focus-visible-ring-offset-sky-400:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--sky-400) / var(--ring-offset-opacity));
}

.ring-offset-sky-500,
.hover-ring-offset-sky-500:hover,
.focus-ring-offset-sky-500:focus,
.focus-visible-ring-offset-sky-500:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--sky-500) / var(--ring-offset-opacity));
}

.ring-offset-sky-600,
.hover-ring-offset-sky-600:hover,
.focus-ring-offset-sky-600:focus,
.focus-visible-ring-offset-sky-600:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--sky-600) / var(--ring-offset-opacity));
}

.ring-offset-sky-700,
.hover-ring-offset-sky-700:hover,
.focus-ring-offset-sky-700:focus,
.focus-visible-ring-offset-sky-700:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--sky-700) / var(--ring-offset-opacity));
}

.ring-offset-sky-800,
.hover-ring-offset-sky-800:hover,
.focus-ring-offset-sky-800:focus,
.focus-visible-ring-offset-sky-800:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--sky-800) / var(--ring-offset-opacity));
}

.ring-offset-sky-900,
.hover-ring-offset-sky-900:hover,
.focus-ring-offset-sky-900:focus,
.focus-visible-ring-offset-sky-900:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--sky-900) / var(--ring-offset-opacity));
}

.ring-offset-blue-50,
.hover-ring-offset-blue-50:hover,
.focus-ring-offset-blue-50:focus,
.focus-visible-ring-offset-blue-50:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--blue-50) / var(--ring-offset-opacity));
}

.ring-offset-blue-100,
.hover-ring-offset-blue-100:hover,
.focus-ring-offset-blue-100:focus,
.focus-visible-ring-offset-blue-100:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--blue-100) / var(--ring-offset-opacity));
}

.ring-offset-blue-200,
.hover-ring-offset-blue-200:hover,
.focus-ring-offset-blue-200:focus,
.focus-visible-ring-offset-blue-200:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--blue-200) / var(--ring-offset-opacity));
}

.ring-offset-blue-300,
.hover-ring-offset-blue-300:hover,
.focus-ring-offset-blue-300:focus,
.focus-visible-ring-offset-blue-300:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--blue-300) / var(--ring-offset-opacity));
}

.ring-offset-blue-400,
.hover-ring-offset-blue-400:hover,
.focus-ring-offset-blue-400:focus,
.focus-visible-ring-offset-blue-400:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--blue-400) / var(--ring-offset-opacity));
}

.ring-offset-blue-500,
.hover-ring-offset-blue-500:hover,
.focus-ring-offset-blue-500:focus,
.focus-visible-ring-offset-blue-500:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--blue-500) / var(--ring-offset-opacity));
}

.ring-offset-blue-600,
.hover-ring-offset-blue-600:hover,
.focus-ring-offset-blue-600:focus,
.focus-visible-ring-offset-blue-600:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--blue-600) / var(--ring-offset-opacity));
}

.ring-offset-blue-700,
.hover-ring-offset-blue-700:hover,
.focus-ring-offset-blue-700:focus,
.focus-visible-ring-offset-blue-700:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--blue-700) / var(--ring-offset-opacity));
}

.ring-offset-blue-800,
.hover-ring-offset-blue-800:hover,
.focus-ring-offset-blue-800:focus,
.focus-visible-ring-offset-blue-800:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--blue-800) / var(--ring-offset-opacity));
}

.ring-offset-blue-900,
.hover-ring-offset-blue-900:hover,
.focus-ring-offset-blue-900:focus,
.focus-visible-ring-offset-blue-900:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--blue-900) / var(--ring-offset-opacity));
}

.ring-offset-indigo-50,
.hover-ring-offset-indigo-50:hover,
.focus-ring-offset-indigo-50:focus,
.focus-visible-ring-offset-indigo-50:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--indigo-50) / var(--ring-offset-opacity));
}

.ring-offset-indigo-100,
.hover-ring-offset-indigo-100:hover,
.focus-ring-offset-indigo-100:focus,
.focus-visible-ring-offset-indigo-100:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--indigo-100) / var(--ring-offset-opacity));
}

.ring-offset-indigo-200,
.hover-ring-offset-indigo-200:hover,
.focus-ring-offset-indigo-200:focus,
.focus-visible-ring-offset-indigo-200:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--indigo-200) / var(--ring-offset-opacity));
}

.ring-offset-indigo-300,
.hover-ring-offset-indigo-300:hover,
.focus-ring-offset-indigo-300:focus,
.focus-visible-ring-offset-indigo-300:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--indigo-300) / var(--ring-offset-opacity));
}

.ring-offset-indigo-400,
.hover-ring-offset-indigo-400:hover,
.focus-ring-offset-indigo-400:focus,
.focus-visible-ring-offset-indigo-400:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--indigo-400) / var(--ring-offset-opacity));
}

.ring-offset-indigo-500,
.hover-ring-offset-indigo-500:hover,
.focus-ring-offset-indigo-500:focus,
.focus-visible-ring-offset-indigo-500:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--indigo-500) / var(--ring-offset-opacity));
}

.ring-offset-indigo-600,
.hover-ring-offset-indigo-600:hover,
.focus-ring-offset-indigo-600:focus,
.focus-visible-ring-offset-indigo-600:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--indigo-600) / var(--ring-offset-opacity));
}

.ring-offset-indigo-700,
.hover-ring-offset-indigo-700:hover,
.focus-ring-offset-indigo-700:focus,
.focus-visible-ring-offset-indigo-700:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--indigo-700) / var(--ring-offset-opacity));
}

.ring-offset-indigo-800,
.hover-ring-offset-indigo-800:hover,
.focus-ring-offset-indigo-800:focus,
.focus-visible-ring-offset-indigo-800:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--indigo-800) / var(--ring-offset-opacity));
}

.ring-offset-indigo-900,
.hover-ring-offset-indigo-900:hover,
.focus-ring-offset-indigo-900:focus,
.focus-visible-ring-offset-indigo-900:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--indigo-900) / var(--ring-offset-opacity));
}

.ring-offset-violet-50,
.hover-ring-offset-violet-50:hover,
.focus-ring-offset-violet-50:focus,
.focus-visible-ring-offset-violet-50:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--violet-50) / var(--ring-offset-opacity));
}

.ring-offset-violet-100,
.hover-ring-offset-violet-100:hover,
.focus-ring-offset-violet-100:focus,
.focus-visible-ring-offset-violet-100:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--violet-100) / var(--ring-offset-opacity));
}

.ring-offset-violet-200,
.hover-ring-offset-violet-200:hover,
.focus-ring-offset-violet-200:focus,
.focus-visible-ring-offset-violet-200:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--violet-200) / var(--ring-offset-opacity));
}

.ring-offset-violet-300,
.hover-ring-offset-violet-300:hover,
.focus-ring-offset-violet-300:focus,
.focus-visible-ring-offset-violet-300:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--violet-300) / var(--ring-offset-opacity));
}

.ring-offset-violet-400,
.hover-ring-offset-violet-400:hover,
.focus-ring-offset-violet-400:focus,
.focus-visible-ring-offset-violet-400:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--violet-400) / var(--ring-offset-opacity));
}

.ring-offset-violet-500,
.hover-ring-offset-violet-500:hover,
.focus-ring-offset-violet-500:focus,
.focus-visible-ring-offset-violet-500:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--violet-500) / var(--ring-offset-opacity));
}

.ring-offset-violet-600,
.hover-ring-offset-violet-600:hover,
.focus-ring-offset-violet-600:focus,
.focus-visible-ring-offset-violet-600:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--violet-600) / var(--ring-offset-opacity));
}

.ring-offset-violet-700,
.hover-ring-offset-violet-700:hover,
.focus-ring-offset-violet-700:focus,
.focus-visible-ring-offset-violet-700:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--violet-700) / var(--ring-offset-opacity));
}

.ring-offset-violet-800,
.hover-ring-offset-violet-800:hover,
.focus-ring-offset-violet-800:focus,
.focus-visible-ring-offset-violet-800:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--violet-800) / var(--ring-offset-opacity));
}

.ring-offset-violet-900,
.hover-ring-offset-violet-900:hover,
.focus-ring-offset-violet-900:focus,
.focus-visible-ring-offset-violet-900:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--violet-900) / var(--ring-offset-opacity));
}

.ring-offset-purple-50,
.hover-ring-offset-purple-50:hover,
.focus-ring-offset-purple-50:focus,
.focus-visible-ring-offset-purple-50:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--purple-50) / var(--ring-offset-opacity));
}

.ring-offset-purple-100,
.hover-ring-offset-purple-100:hover,
.focus-ring-offset-purple-100:focus,
.focus-visible-ring-offset-purple-100:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--purple-100) / var(--ring-offset-opacity));
}

.ring-offset-purple-200,
.hover-ring-offset-purple-200:hover,
.focus-ring-offset-purple-200:focus,
.focus-visible-ring-offset-purple-200:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--purple-200) / var(--ring-offset-opacity));
}

.ring-offset-purple-300,
.hover-ring-offset-purple-300:hover,
.focus-ring-offset-purple-300:focus,
.focus-visible-ring-offset-purple-300:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--purple-300) / var(--ring-offset-opacity));
}

.ring-offset-purple-400,
.hover-ring-offset-purple-400:hover,
.focus-ring-offset-purple-400:focus,
.focus-visible-ring-offset-purple-400:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--purple-400) / var(--ring-offset-opacity));
}

.ring-offset-purple-500,
.hover-ring-offset-purple-500:hover,
.focus-ring-offset-purple-500:focus,
.focus-visible-ring-offset-purple-500:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--purple-500) / var(--ring-offset-opacity));
}

.ring-offset-purple-600,
.hover-ring-offset-purple-600:hover,
.focus-ring-offset-purple-600:focus,
.focus-visible-ring-offset-purple-600:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--purple-600) / var(--ring-offset-opacity));
}

.ring-offset-purple-700,
.hover-ring-offset-purple-700:hover,
.focus-ring-offset-purple-700:focus,
.focus-visible-ring-offset-purple-700:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--purple-700) / var(--ring-offset-opacity));
}

.ring-offset-purple-800,
.hover-ring-offset-purple-800:hover,
.focus-ring-offset-purple-800:focus,
.focus-visible-ring-offset-purple-800:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--purple-800) / var(--ring-offset-opacity));
}

.ring-offset-purple-900,
.hover-ring-offset-purple-900:hover,
.focus-ring-offset-purple-900:focus,
.focus-visible-ring-offset-purple-900:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--purple-900) / var(--ring-offset-opacity));
}

.ring-offset-fuchsia-50,
.hover-ring-offset-fuchsia-50:hover,
.focus-ring-offset-fuchsia-50:focus,
.focus-visible-ring-offset-fuchsia-50:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--fuchsia-50) / var(--ring-offset-opacity));
}

.ring-offset-fuchsia-100,
.hover-ring-offset-fuchsia-100:hover,
.focus-ring-offset-fuchsia-100:focus,
.focus-visible-ring-offset-fuchsia-100:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--fuchsia-100) / var(--ring-offset-opacity));
}

.ring-offset-fuchsia-200,
.hover-ring-offset-fuchsia-200:hover,
.focus-ring-offset-fuchsia-200:focus,
.focus-visible-ring-offset-fuchsia-200:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--fuchsia-200) / var(--ring-offset-opacity));
}

.ring-offset-fuchsia-300,
.hover-ring-offset-fuchsia-300:hover,
.focus-ring-offset-fuchsia-300:focus,
.focus-visible-ring-offset-fuchsia-300:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--fuchsia-300) / var(--ring-offset-opacity));
}

.ring-offset-fuchsia-400,
.hover-ring-offset-fuchsia-400:hover,
.focus-ring-offset-fuchsia-400:focus,
.focus-visible-ring-offset-fuchsia-400:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--fuchsia-400) / var(--ring-offset-opacity));
}

.ring-offset-fuchsia-500,
.hover-ring-offset-fuchsia-500:hover,
.focus-ring-offset-fuchsia-500:focus,
.focus-visible-ring-offset-fuchsia-500:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--fuchsia-500) / var(--ring-offset-opacity));
}

.ring-offset-fuchsia-600,
.hover-ring-offset-fuchsia-600:hover,
.focus-ring-offset-fuchsia-600:focus,
.focus-visible-ring-offset-fuchsia-600:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--fuchsia-600) / var(--ring-offset-opacity));
}

.ring-offset-fuchsia-700,
.hover-ring-offset-fuchsia-700:hover,
.focus-ring-offset-fuchsia-700:focus,
.focus-visible-ring-offset-fuchsia-700:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--fuchsia-700) / var(--ring-offset-opacity));
}

.ring-offset-fuchsia-800,
.hover-ring-offset-fuchsia-800:hover,
.focus-ring-offset-fuchsia-800:focus,
.focus-visible-ring-offset-fuchsia-800:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--fuchsia-800) / var(--ring-offset-opacity));
}

.ring-offset-fuchsia-900,
.hover-ring-offset-fuchsia-900:hover,
.focus-ring-offset-fuchsia-900:focus,
.focus-visible-ring-offset-fuchsia-900:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--fuchsia-900) / var(--ring-offset-opacity));
}

.ring-offset-pink-50,
.hover-ring-offset-pink-50:hover,
.focus-ring-offset-pink-50:focus,
.focus-visible-ring-offset-pink-50:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--pink-50) / var(--ring-offset-opacity));
}

.ring-offset-pink-100,
.hover-ring-offset-pink-100:hover,
.focus-ring-offset-pink-100:focus,
.focus-visible-ring-offset-pink-100:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--pink-100) / var(--ring-offset-opacity));
}

.ring-offset-pink-200,
.hover-ring-offset-pink-200:hover,
.focus-ring-offset-pink-200:focus,
.focus-visible-ring-offset-pink-200:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--pink-200) / var(--ring-offset-opacity));
}

.ring-offset-pink-300,
.hover-ring-offset-pink-300:hover,
.focus-ring-offset-pink-300:focus,
.focus-visible-ring-offset-pink-300:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--pink-300) / var(--ring-offset-opacity));
}

.ring-offset-pink-400,
.hover-ring-offset-pink-400:hover,
.focus-ring-offset-pink-400:focus,
.focus-visible-ring-offset-pink-400:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--pink-400) / var(--ring-offset-opacity));
}

.ring-offset-pink-500,
.hover-ring-offset-pink-500:hover,
.focus-ring-offset-pink-500:focus,
.focus-visible-ring-offset-pink-500:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--pink-500) / var(--ring-offset-opacity));
}

.ring-offset-pink-600,
.hover-ring-offset-pink-600:hover,
.focus-ring-offset-pink-600:focus,
.focus-visible-ring-offset-pink-600:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--pink-600) / var(--ring-offset-opacity));
}

.ring-offset-pink-700,
.hover-ring-offset-pink-700:hover,
.focus-ring-offset-pink-700:focus,
.focus-visible-ring-offset-pink-700:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--pink-700) / var(--ring-offset-opacity));
}

.ring-offset-pink-800,
.hover-ring-offset-pink-800:hover,
.focus-ring-offset-pink-800:focus,
.focus-visible-ring-offset-pink-800:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--pink-800) / var(--ring-offset-opacity));
}

.ring-offset-pink-900,
.hover-ring-offset-pink-900:hover,
.focus-ring-offset-pink-900:focus,
.focus-visible-ring-offset-pink-900:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--pink-900) / var(--ring-offset-opacity));
}

.ring-offset-rose-50,
.hover-ring-offset-rose-50:hover,
.focus-ring-offset-rose-50:focus,
.focus-visible-ring-offset-rose-50:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--rose-50) / var(--ring-offset-opacity));
}

.ring-offset-rose-100,
.hover-ring-offset-rose-100:hover,
.focus-ring-offset-rose-100:focus,
.focus-visible-ring-offset-rose-100:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--rose-100) / var(--ring-offset-opacity));
}

.ring-offset-rose-200,
.hover-ring-offset-rose-200:hover,
.focus-ring-offset-rose-200:focus,
.focus-visible-ring-offset-rose-200:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--rose-200) / var(--ring-offset-opacity));
}

.ring-offset-rose-300,
.hover-ring-offset-rose-300:hover,
.focus-ring-offset-rose-300:focus,
.focus-visible-ring-offset-rose-300:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--rose-300) / var(--ring-offset-opacity));
}

.ring-offset-rose-400,
.hover-ring-offset-rose-400:hover,
.focus-ring-offset-rose-400:focus,
.focus-visible-ring-offset-rose-400:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--rose-400) / var(--ring-offset-opacity));
}

.ring-offset-rose-500,
.hover-ring-offset-rose-500:hover,
.focus-ring-offset-rose-500:focus,
.focus-visible-ring-offset-rose-500:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--rose-500) / var(--ring-offset-opacity));
}

.ring-offset-rose-600,
.hover-ring-offset-rose-600:hover,
.focus-ring-offset-rose-600:focus,
.focus-visible-ring-offset-rose-600:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--rose-600) / var(--ring-offset-opacity));
}

.ring-offset-rose-700,
.hover-ring-offset-rose-700:hover,
.focus-ring-offset-rose-700:focus,
.focus-visible-ring-offset-rose-700:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--rose-700) / var(--ring-offset-opacity));
}

.ring-offset-rose-800,
.hover-ring-offset-rose-800:hover,
.focus-ring-offset-rose-800:focus,
.focus-visible-ring-offset-rose-800:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--rose-800) / var(--ring-offset-opacity));
}

.ring-offset-rose-900,
.hover-ring-offset-rose-900:hover,
.focus-ring-offset-rose-900:focus,
.focus-visible-ring-offset-rose-900:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--rose-900) / var(--ring-offset-opacity));
}

.ring-offset-slate-50,
.hover-ring-offset-slate-50:hover,
.focus-ring-offset-slate-50:focus,
.focus-visible-ring-offset-slate-50:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--slate-50) / var(--ring-offset-opacity));
}

.ring-offset-slate-100,
.hover-ring-offset-slate-100:hover,
.focus-ring-offset-slate-100:focus,
.focus-visible-ring-offset-slate-100:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--slate-100) / var(--ring-offset-opacity));
}

.ring-offset-slate-200,
.hover-ring-offset-slate-200:hover,
.focus-ring-offset-slate-200:focus,
.focus-visible-ring-offset-slate-200:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--slate-200) / var(--ring-offset-opacity));
}

.ring-offset-slate-300,
.hover-ring-offset-slate-300:hover,
.focus-ring-offset-slate-300:focus,
.focus-visible-ring-offset-slate-300:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--slate-300) / var(--ring-offset-opacity));
}

.ring-offset-slate-400,
.hover-ring-offset-slate-400:hover,
.focus-ring-offset-slate-400:focus,
.focus-visible-ring-offset-slate-400:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--slate-400) / var(--ring-offset-opacity));
}

.ring-offset-slate-500,
.hover-ring-offset-slate-500:hover,
.focus-ring-offset-slate-500:focus,
.focus-visible-ring-offset-slate-500:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--slate-500) / var(--ring-offset-opacity));
}

.ring-offset-slate-600,
.hover-ring-offset-slate-600:hover,
.focus-ring-offset-slate-600:focus,
.focus-visible-ring-offset-slate-600:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--slate-600) / var(--ring-offset-opacity));
}

.ring-offset-slate-700,
.hover-ring-offset-slate-700:hover,
.focus-ring-offset-slate-700:focus,
.focus-visible-ring-offset-slate-700:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--slate-700) / var(--ring-offset-opacity));
}

.ring-offset-slate-800,
.hover-ring-offset-slate-800:hover,
.focus-ring-offset-slate-800:focus,
.focus-visible-ring-offset-slate-800:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--slate-800) / var(--ring-offset-opacity));
}

.ring-offset-slate-900,
.hover-ring-offset-slate-900:hover,
.focus-ring-offset-slate-900:focus,
.focus-visible-ring-offset-slate-900:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--slate-900) / var(--ring-offset-opacity));
}

.ring-offset-gray-50,
.hover-ring-offset-gray-50:hover,
.focus-ring-offset-gray-50:focus,
.focus-visible-ring-offset-gray-50:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--gray-50) / var(--ring-offset-opacity));
}

.ring-offset-gray-100,
.hover-ring-offset-gray-100:hover,
.focus-ring-offset-gray-100:focus,
.focus-visible-ring-offset-gray-100:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--gray-100) / var(--ring-offset-opacity));
}

.ring-offset-gray-200,
.hover-ring-offset-gray-200:hover,
.focus-ring-offset-gray-200:focus,
.focus-visible-ring-offset-gray-200:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--gray-200) / var(--ring-offset-opacity));
}

.ring-offset-gray-300,
.hover-ring-offset-gray-300:hover,
.focus-ring-offset-gray-300:focus,
.focus-visible-ring-offset-gray-300:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--gray-300) / var(--ring-offset-opacity));
}

.ring-offset-gray-400,
.hover-ring-offset-gray-400:hover,
.focus-ring-offset-gray-400:focus,
.focus-visible-ring-offset-gray-400:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--gray-400) / var(--ring-offset-opacity));
}

.ring-offset-gray-500,
.hover-ring-offset-gray-500:hover,
.focus-ring-offset-gray-500:focus,
.focus-visible-ring-offset-gray-500:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--gray-500) / var(--ring-offset-opacity));
}

.ring-offset-gray-600,
.hover-ring-offset-gray-600:hover,
.focus-ring-offset-gray-600:focus,
.focus-visible-ring-offset-gray-600:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--gray-600) / var(--ring-offset-opacity));
}

.ring-offset-gray-700,
.hover-ring-offset-gray-700:hover,
.focus-ring-offset-gray-700:focus,
.focus-visible-ring-offset-gray-700:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--gray-700) / var(--ring-offset-opacity));
}

.ring-offset-gray-800,
.hover-ring-offset-gray-800:hover,
.focus-ring-offset-gray-800:focus,
.focus-visible-ring-offset-gray-800:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--gray-800) / var(--ring-offset-opacity));
}

.ring-offset-gray-900,
.hover-ring-offset-gray-900:hover,
.focus-ring-offset-gray-900:focus,
.focus-visible-ring-offset-gray-900:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--gray-900) / var(--ring-offset-opacity));
}

.ring-offset-zinc-50,
.hover-ring-offset-zinc-50:hover,
.focus-ring-offset-zinc-50:focus,
.focus-visible-ring-offset-zinc-50:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--zinc-50) / var(--ring-offset-opacity));
}

.ring-offset-zinc-100,
.hover-ring-offset-zinc-100:hover,
.focus-ring-offset-zinc-100:focus,
.focus-visible-ring-offset-zinc-100:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--zinc-100) / var(--ring-offset-opacity));
}

.ring-offset-zinc-200,
.hover-ring-offset-zinc-200:hover,
.focus-ring-offset-zinc-200:focus,
.focus-visible-ring-offset-zinc-200:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--zinc-200) / var(--ring-offset-opacity));
}

.ring-offset-zinc-300,
.hover-ring-offset-zinc-300:hover,
.focus-ring-offset-zinc-300:focus,
.focus-visible-ring-offset-zinc-300:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--zinc-300) / var(--ring-offset-opacity));
}

.ring-offset-zinc-400,
.hover-ring-offset-zinc-400:hover,
.focus-ring-offset-zinc-400:focus,
.focus-visible-ring-offset-zinc-400:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--zinc-400) / var(--ring-offset-opacity));
}

.ring-offset-zinc-500,
.hover-ring-offset-zinc-500:hover,
.focus-ring-offset-zinc-500:focus,
.focus-visible-ring-offset-zinc-500:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--zinc-500) / var(--ring-offset-opacity));
}

.ring-offset-zinc-600,
.hover-ring-offset-zinc-600:hover,
.focus-ring-offset-zinc-600:focus,
.focus-visible-ring-offset-zinc-600:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--zinc-600) / var(--ring-offset-opacity));
}

.ring-offset-zinc-700,
.hover-ring-offset-zinc-700:hover,
.focus-ring-offset-zinc-700:focus,
.focus-visible-ring-offset-zinc-700:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--zinc-700) / var(--ring-offset-opacity));
}

.ring-offset-zinc-800,
.hover-ring-offset-zinc-800:hover,
.focus-ring-offset-zinc-800:focus,
.focus-visible-ring-offset-zinc-800:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--zinc-800) / var(--ring-offset-opacity));
}

.ring-offset-zinc-900,
.hover-ring-offset-zinc-900:hover,
.focus-ring-offset-zinc-900:focus,
.focus-visible-ring-offset-zinc-900:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--zinc-900) / var(--ring-offset-opacity));
}

.ring-offset-black,
.hover-ring-offset-black:hover,
.focus-ring-offset-black:focus,
.focus-visible-ring-offset-black:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--black) / var(--ring-offset-opacity));
}

.ring-offset-white,
.hover-ring-offset-white:hover,
.focus-ring-offset-white:focus,
.focus-visible-ring-offset-white:focus-visible {
  --ring-offset-opacity: 1;
  --ring-offset-color: rgba(var(--white) / var(--ring-offset-opacity));
}

/* 圆角 */
.rounded-none {
  border-radius: 0px;
}

.rounded-sm {
  border-radius: 0.125rem;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.circle,
.rounded-full {
  border-radius: 9999px;
}

input.rounded-full {
  border-radius: 9999px;
  box-sizing: border-box !important;
  border-radius: 9999px !important;
}

.rounded-l-none {
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
}

.rounded-t-none {
  border-top-left-radius: 0px;
}

.rounded-r-none,
.rounded-t-none {
  border-top-right-radius: 0px;
}

.rounded-b-none,
.rounded-r-none {
  border-bottom-right-radius: 0px;
}

.rounded-b-none {
  border-bottom-left-radius: 0px;
}

.rounded-br-none {
  border-bottom-right-radius: 0px;
}

.rounded-bl-none {
  border-bottom-left-radius: 0px;
}

.rounded-tr-none {
  border-top-right-radius: 0px;
}

.rounded-tl-none {
  border-top-left-radius: 0px;
}

/*主题按钮*/
.btn.bg-theme-primary,
.btn.bg-theme-secondary {
  color: #fff;
}

/*互动*/
/* 光标 */
.cursor-auto {
  cursor: auto;
}

.cursor {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-wait {
  cursor: wait;
}

.cursor-text {
  cursor: text;
}

.cursor-move {
  cursor: move;
}

.cursor-help {
  cursor: help;
}

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

/*效果*/
/* 阴影 */

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 0 2px -1px rgba(0, 0, 0, 0.05);
}

.shadow {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.shadow-md {
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.2),
    0 1px 4px -2px rgba(0, 0, 0, 0.15);
}

.shadow-lg {
  box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.2),
    0 2px 6px -4px rgba(0, 0, 0, 0.15);
}

.shadow-xl {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2),
    0 4px 10px -6px rgba(0, 0, 0, 0.15);
}

.shadow-2xl {
  box-shadow: 0 10px 50px -10px rgba(0, 0, 0, 0.4),
    0 8px 20px -10px rgba(0, 0, 0, 0.3);
}

.shadow-inner {
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

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

/*过渡效果*/
.transition {
  transition-duration: 0.15s;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    -webkit-backdrop-filter;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-all {
  transition-duration: 0.15s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-colors {
  transition-duration: 0.15s;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-opacity {
  transition-duration: 0.15s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-shadow {
  transition-duration: 0.15s;
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-transform {
  transition-duration: 0.15s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

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


/* 动画 */
/* 过渡 */
/* 无过渡 */
.transition-none {
  transition: none;
}

/* 全部过渡 */
.transition-all {
  transition: all 150ms ease-in-out;
}

/* 颜色过渡 */
.transition-colors {
  transition: color 150ms ease-in-out, background-color 150ms ease-in-out,
    border-color 150ms ease-in-out;
}

/* 透明度过渡 */
.transition-opacity {
  transition: opacity 150ms ease-in-out;
}

/* 阴影过渡 */
.transition-shadow {
  transition: box-shadow 150ms ease-in-out;
}

/* 变换过渡 */
.transition-transform {
  transition: transform 150ms ease-in-out;
}

/* hover 变体 */
.hover-transition-none:hover {
  transition: none;
}

.hover-transition-all:hover {
  transition: all 150ms ease-in-out;
}

.hover-transition-colors:hover {
  transition: color 150ms ease-in-out, background-color 150ms ease-in-out,
    border-color 150ms ease-in-out;
}

.hover-transition-opacity:hover {
  transition: opacity 150ms ease-in-out;
}

.hover-transition-shadow:hover {
  transition: box-shadow 150ms ease-in-out;
}

.hover-transition-transform:hover {
  transition: transform 150ms ease-in-out;
}

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

.hover-transition-all:hover {
  transition: all 150ms ease-in-out;
}

.hover-transition-colors:hover {
  transition: color 150ms ease-in-out, background-color 150ms ease-in-out,
    border-color 150ms ease-in-out;
}

.hover-transition-opacity:hover {
  transition: opacity 150ms ease-in-out;
}

.hover-transition-shadow:hover {
  transition: box-shadow 150ms ease-in-out;
}

.hover-transition-transform:hover {
  transition: transform 150ms ease-in-out;
}

/* 持续时间 */
.duration-75,
.hover-duration-75:hover {
  transition-duration: 75ms;
}

.duration-100,
.hover-duration-100:hover {
  transition-duration: 100ms;
}

.duration-150,
.hover-duration-150:hover {
  transition-duration: 150ms;
}

.duration-200,
.hover-duration-200:hover {
  transition-duration: 200ms;
}

.duration-300,
.hover-duration-300:hover {
  transition-duration: 300ms;
}

.duration-500,
.hover-duration-500:hover {
  transition-duration: 500ms;
}

.duration-700,
.hover-duration-700:hover {
  transition-duration: 700ms;
}

.duration-1000,
.hover-duration-1000:hover {
  transition-duration: 1000ms;
}

/* 线性过渡 */
.ease-linear,
.hover-ease-linear:hover {
  transition-timing-function: linear;
}

/* 缓入过渡 */
.ease-in,
.hover-ease-in:hover {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

/* 缓出过渡 */
.ease-out,
.hover-ease-out:hover {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* 缓入缓出 */
.ease-in-out,
.hover-ease-in-out:hover {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 延迟 */
.delay-75 {
  transition-delay: 75ms;
}

.delay-100 {
  transition-delay: 100ms;
}

.delay-150 {
  transition-delay: 150ms;
}

.delay-200 {
  transition-delay: 200ms;
}

.delay-300 {
  transition-delay: 300ms;
}

.delay-500 {
  transition-delay: 500ms;
}

.delay-700 {
  transition-delay: 700ms;
}

.delay-1000 {
  transition-delay: 1000ms;
}

/* hover 变体 */
.hover-delay-75:hover {
  transition-delay: 75ms;
}

.hover-delay-100:hover {
  transition-delay: 100ms;
}

.hover-delay-150:hover {
  transition-delay: 150ms;
}

.hover-delay-200:hover {
  transition-delay: 200ms;
}

.hover-delay-300:hover {
  transition-delay: 300ms;
}

.hover-delay-500:hover {
  transition-delay: 500ms;
}

.hover-delay-700:hover {
  transition-delay: 700ms;
}

.hover-delay-1000:hover {
  transition-delay: 1000ms;
}

/* 变换与动画 */
/* 基础类 */
/* 缩放 */
.scale-0 {
  transform: scale(0);
}

.scale-50 {
  transform: scale(0.5);
}

.scale-75 {
  transform: scale(0.75);
}

.scale-90 {
  transform: scale(0.9);
}

.scale-95 {
  transform: scale(0.95);
}

.scale-100 {
  transform: scale(1);
}

.scale-105 {
  transform: scale(1.05);
}

.scale-110 {
  transform: scale(1.1);
}

.scale-125 {
  transform: scale(1.25);
}

.scale-150 {
  transform: scale(1.5);
}

/* 水平缩放 */
.scale-x-0 {
  transform: scaleX(0);
}

.scale-x-50 {
  transform: scaleX(0.5);
}

.scale-x-75 {
  transform: scaleX(0.75);
}

.scale-x-90 {
  transform: scaleX(0.9);
}

.scale-x-95 {
  transform: scaleX(0.95);
}

.scale-x-100 {
  transform: scaleX(1);
}

.scale-x-105 {
  transform: scaleX(1.05);
}

.scale-x-110 {
  transform: scaleX(1.1);
}

.scale-x-125 {
  transform: scaleX(1.25);
}

.scale-x-150 {
  transform: scaleX(1.5);
}

/* 垂直缩放 */
.scale-y-0 {
  transform: scaleY(0);
}

.scale-y-50 {
  transform: scaleY(0.5);
}

.scale-y-75 {
  transform: scaleY(0.75);
}

.scale-y-90 {
  transform: scaleY(0.9);
}

.scale-y-95 {
  transform: scaleY(0.95);
}

.scale-y-100 {
  transform: scaleY(1);
}

.scale-y-105 {
  transform: scaleY(1.05);
}

.scale-y-110 {
  transform: scaleY(1.1);
}

.scale-y-125 {
  transform: scaleY(1.25);
}

.scale-y-150 {
  transform: scaleY(1.5);
}

/* 旋转 */
.rotate-0 {
  transform: rotate(0deg);
}

.rotate-1 {
  transform: rotate(1deg);
}

.rotate-2 {
  transform: rotate(2deg);
}

.rotate-3 {
  transform: rotate(3deg);
}

.rotate-6 {
  transform: rotate(6deg);
}

.rotate-12 {
  transform: rotate(12deg);
}

.rotate-45 {
  transform: rotate(45deg);
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

/* 水平平移 */
.translate-x-0 {
  transform: var(--spacing-0);
}

.translate-x-1 {
  transform: var(--spacing-1);
}

.translate-x-2 {
  transform: var(--spacing-2);
}

.translate-x-3 {
  transform: var(--spacing-3);
}

.translate-x-4 {
  transform: var(--spacing-4);
}

.translate-x-5 {
  transform: var(--spacing-5);
}

.translate-x-6 {
  transform: var(--spacing-6);
}

.translate-x-7 {
  transform: var(--spacing-7);
}

.translate-x-8 {
  transform: var(--spacing-8);
}

.translate-x-9 {
  transform: var(--spacing-9);
}

.translate-x-10 {
  transform: var(--spacing-10);
}

.translate-x-11 {
  transform: var(--spacing-11);
}

.translate-x-12 {
  transform: var(--spacing-12);
}

.translate-x-14 {
  transform: var(--spacing-14);
}

.translate-x-16 {
  transform: var(--spacing-16);
}

.translate-x-20 {
  transform: var(--spacing-20);
}

.translate-x-24 {
  transform: var(--spacing-24);
}

.translate-x-28 {
  transform: var(--spacing-28);
}

.translate-x-32 {
  transform: var(--spacing-32);
}

.translate-x-36 {
  transform: var(--spacing-36);
}

.translate-x-40 {
  transform: var(--spacing-40);
}

.translate-x-44 {
  transform: var(--spacing-44);
}

.translate-x-48 {
  transform: var(--spacing-48);
}

.translate-x-52 {
  transform: var(--spacing-52);
}

.translate-x-56 {
  transform: var(--spacing-56);
}

.translate-x-60 {
  transform: var(--spacing-60);
}

.translate-x-64 {
  transform: var(--spacing-64);
}

.translate-x-72 {
  transform: var(--spacing-72);
}

.translate-x-80 {
  transform: var(--spacing-80);
}

.translate-x-96 {
  transform: var(--spacing-96);
}

.translate-x-px {
  transform: var(--spacing-px);
}

.translate-x-0\.5 {
  transform: var(--spacing-0.5);
}

.translate-x-1\.5 {
  transform: var(--spacing-1.5);
}

.translate-x-2\.5 {
  transform: var(--spacing-2.5);
}

.translate-x-3\.5 {
  transform: var(--spacing-3.5);
}

.translate-x-auto {
  transform: var(--spacing-auto);
}

.translate-x-1\/2 {
  transform: var(--spacing-1\/2);
}

.translate-x-1\/3 {
  transform: var(--spacing-1\/3);
}

.translate-x-2\/3 {
  transform: var(--spacing-2\/3);
}

.translate-x-1\/4 {
  transform: var(--spacing-1\/4);
}

.translate-x-2\/4 {
  transform: var(--spacing-2\/4);
}

.translate-x-3\/4 {
  transform: var(--spacing-3\/4);
}

.translate-x-1\/5 {
  transform: var(--spacing-1\/5);
}

.translate-x-2\/5 {
  transform: var(--spacing-2\/5);
}

.translate-x-3\/5 {
  transform: var(--spacing-3\/5);
}

.translate-x-4\/5 {
  transform: var(--spacing-4\/5);
}

.translate-x-1\/6 {
  transform: var(--spacing-1\/6);
}

.translate-x-2\/6 {
  transform: var(--spacing-2\/6);
}

.translate-x-3\/6 {
  transform: var(--spacing-3\/6);
}

.translate-x-4\/6 {
  transform: var(--spacing-4\/6);
}

.translate-x-5\/6 {
  transform: var(--spacing-5\/6);
}

.translate-x-full {
  transform: var(--spacing-full);
}

.translate-x-screen {
  transform: var(--spacing-screen);
}

.translate-x-min {
  transform: var(--spacing-min);
}

.translate-x-max {
  transform: var(--spacing-max);
}

.translate-x-fit {
  transform: var(--spacing-fit);
}
.-translate-y-1\/4 {
  transform: -25%;
}

/* 垂直平移 */
.translate-y-0 {
  transform: var(--spacing-0);
}

.translate-y-1 {
  transform: var(--spacing-1);
}

.translate-y-2 {
  transform: var(--spacing-2);
}

.translate-y-3 {
  transform: var(--spacing-3);
}

.translate-y-4 {
  transform: var(--spacing-4);
}

.translate-y-5 {
  transform: var(--spacing-5);
}

.translate-y-6 {
  transform: var(--spacing-6);
}

.translate-y-7 {
  transform: var(--spacing-7);
}

.translate-y-8 {
  transform: var(--spacing-8);
}

.translate-y-9 {
  transform: var(--spacing-9);
}

.translate-y-10 {
  transform: var(--spacing-10);
}

.translate-y-11 {
  transform: var(--spacing-11);
}

.translate-y-12 {
  transform: var(--spacing-12);
}

.translate-y-14 {
  transform: var(--spacing-14);
}

.translate-y-16 {
  transform: var(--spacing-16);
}

.translate-y-20 {
  transform: var(--spacing-20);
}

.translate-y-24 {
  transform: var(--spacing-24);
}

.translate-y-28 {
  transform: var(--spacing-28);
}

.translate-y-32 {
  transform: var(--spacing-32);
}

.translate-y-36 {
  transform: var(--spacing-36);
}

.translate-y-40 {
  transform: var(--spacing-40);
}

.translate-y-44 {
  transform: var(--spacing-44);
}

.translate-y-48 {
  transform: var(--spacing-48);
}

.translate-y-52 {
  transform: var(--spacing-52);
}

.translate-y-56 {
  transform: var(--spacing-56);
}

.translate-y-60 {
  transform: var(--spacing-60);
}

.translate-y-64 {
  transform: var(--spacing-64);
}

.translate-y-72 {
  transform: var(--spacing-72);
}

.translate-y-80 {
  transform: var(--spacing-80);
}

.translate-y-96 {
  transform: var(--spacing-96);
}

.translate-y-px {
  transform: var(--spacing-px);
}

.translate-y-0\.5 {
  transform: var(--spacing-0.5);
}

.translate-y-1\.5 {
  transform: var(--spacing-1.5);
}

.translate-y-2\.5 {
  transform: var(--spacing-2.5);
}

.translate-y-3\.5 {
  transform: var(--spacing-3.5);
}

.translate-y-auto {
  transform: var(--spacing-auto);
}

.translate-y-1\/2 {
  transform: var(--spacing-1\/2);
}

.translate-y-1\/3 {
  transform: var(--spacing-1\/3);
}

.translate-y-2\/3 {
  transform: var(--spacing-2\/3);
}

.translate-y-1\/4 {
  transform: var(--spacing-1\/4);
}

.translate-y-2\/4 {
  transform: var(--spacing-2\/4);
}

.translate-y-3\/4 {
  transform: var(--spacing-3\/4);
}

.translate-y-1\/5 {
  transform: var(--spacing-1\/5);
}

.translate-y-2\/5 {
  transform: var(--spacing-2\/5);
}

.translate-y-3\/5 {
  transform: var(--spacing-3\/5);
}

.translate-y-4\/5 {
  transform: var(--spacing-4\/5);
}

.translate-y-1\/6 {
  transform: var(--spacing-1\/6);
}

.translate-y-2\/6 {
  transform: var(--spacing-2\/6);
}

.translate-y-3\/6 {
  transform: var(--spacing-3\/6);
}

.translate-y-4\/6 {
  transform: var(--spacing-4\/6);
}

.translate-y-5\/6 {
  transform: var(--spacing-5\/6);
}

.translate-y-full {
  transform: var(--spacing-full);
}

.translate-y-screen {
  transform: var(--spacing-screen);
}

.translate-y-min {
  transform: var(--spacing-min);
}

.translate-y-max {
  transform: var(--spacing-max);
}

.translate-y-fit {
  transform: var(--spacing-fit);
}

/* 水平倾斜 */
.skew-x-0 {
  transform: skewX(0deg);
}

.skew-x-1 {
  transform: skewX(1deg);
}

.skew-x-2 {
  transform: skewX(2deg);
}

.skew-x-3 {
  transform: skewX(3deg);
}

.skew-x-6 {
  transform: skewX(6deg);
}

.skew-x-12 {
  transform: skewX(12deg);
}

/* 垂直倾斜 */
.skew-y-0 {
  transform: skewY(0deg);
}

.skew-y-1 {
  transform: skewY(1deg);
}

.skew-y-2 {
  transform: skewY(2deg);
}

.skew-y-3 {
  transform: skewY(3deg);
}

.skew-y-6 {
  transform: skewY(6deg);
}

.skew-y-12 {
  transform: skewY(12deg);
}

/* 变换 */
/* 无变换 */
.transform-none {
  transform: none;
}

.transform-none-gpu {
  transform: translateZ(0);
}

/* 保持3D */
.preserve-3d-preserve-3d {
  transform-style: preserve-3d;
}

.preserve-3d-flat {
  transform-style: flat;
}

/* GPU变换 */
.transform-gpu {
  transform: translate3d(0, 0, 0);
}

/* 🚀 终极原子CSS生成器 PRO v4.3 - 史上最完整的原子类生成器 */
/* 生成时间: 2025/11/26 10:36:07 */
/* 主题: default | 属性数: 11 | 变体数: 1 | 断点数: 0 */
/* v4.3更新: 修复透明度问题，优化配置选项默认状态，增强功能完整性 */

/* hover 变体 */
.hover-scale-0:hover {
  transform: scale(0);
}

.hover-scale-50:hover {
  transform: scale(0.5);
}

.hover-scale-75:hover {
  transform: scale(0.75);
}

.hover-scale-90:hover {
  transform: scale(0.9);
}

.hover-scale-95:hover {
  transform: scale(0.95);
}

.hover-scale-100:hover {
  transform: scale(1);
}

.hover-scale-105:hover {
  transform: scale(1.05);
}

.hover-scale-110:hover {
  transform: scale(1.1);
}

.hover-scale-125:hover {
  transform: scale(1.25);
}

.hover-scale-150:hover {
  transform: scale(1.5);
}

.hover-scale-x-0:hover {
  transform: scaleX(0);
}

.hover-scale-x-50:hover {
  transform: scaleX(0.5);
}

.hover-scale-x-75:hover {
  transform: scaleX(0.75);
}

.hover-scale-x-90:hover {
  transform: scaleX(0.9);
}

.hover-scale-x-95:hover {
  transform: scaleX(0.95);
}

.hover-scale-x-100:hover {
  transform: scaleX(1);
}

.hover-scale-x-105:hover {
  transform: scaleX(1.05);
}

.hover-scale-x-110:hover {
  transform: scaleX(1.1);
}

.hover-scale-x-125:hover {
  transform: scaleX(1.25);
}

.hover-scale-x-150:hover {
  transform: scaleX(1.5);
}

.hover-scale-y-0:hover {
  transform: scaleY(0);
}

.hover-scale-y-50:hover {
  transform: scaleY(0.5);
}

.hover-scale-y-75:hover {
  transform: scaleY(0.75);
}

.hover-scale-y-90:hover {
  transform: scaleY(0.9);
}

.hover-scale-y-95:hover {
  transform: scaleY(0.95);
}

.hover-scale-y-100:hover {
  transform: scaleY(1);
}

.hover-scale-y-105:hover {
  transform: scaleY(1.05);
}

.hover-scale-y-110:hover {
  transform: scaleY(1.1);
}

.hover-scale-y-125:hover {
  transform: scaleY(1.25);
}

.hover-scale-y-150:hover {
  transform: scaleY(1.5);
}

.hover-rotate-0:hover {
  transform: rotate(0deg);
}

.hover-rotate-1:hover {
  transform: rotate(1deg);
}

.hover-rotate-2:hover {
  transform: rotate(2deg);
}

.hover-rotate-3:hover {
  transform: rotate(3deg);
}

.hover-rotate-6:hover {
  transform: rotate(6deg);
}

.hover-rotate-12:hover {
  transform: rotate(12deg);
}

.hover-rotate-45:hover {
  transform: rotate(45deg);
}

.hover-rotate-90:hover {
  transform: rotate(90deg);
}

.hover-rotate-180:hover {
  transform: rotate(180deg);
}

.hover-translate-x-0:hover {
  transform: var(--spacing-0);
}

.hover-translate-x-1:hover {
  transform: var(--spacing-1);
}

.hover-translate-x-2:hover {
  transform: var(--spacing-2);
}

.hover-translate-x-3:hover {
  transform: var(--spacing-3);
}

.hover-translate-x-4:hover {
  transform: var(--spacing-4);
}

.hover-translate-x-5:hover {
  transform: var(--spacing-5);
}

.hover-translate-x-6:hover {
  transform: var(--spacing-6);
}

.hover-translate-x-7:hover {
  transform: var(--spacing-7);
}

.hover-translate-x-8:hover {
  transform: var(--spacing-8);
}

.hover-translate-x-9:hover {
  transform: var(--spacing-9);
}

.hover-translate-x-10:hover {
  transform: var(--spacing-10);
}

.hover-translate-x-11:hover {
  transform: var(--spacing-11);
}

.hover-translate-x-12:hover {
  transform: var(--spacing-12);
}

.hover-translate-x-14:hover {
  transform: var(--spacing-14);
}

.hover-translate-x-16:hover {
  transform: var(--spacing-16);
}

.hover-translate-x-20:hover {
  transform: var(--spacing-20);
}

.hover-translate-x-24:hover {
  transform: var(--spacing-24);
}

.hover-translate-x-28:hover {
  transform: var(--spacing-28);
}

.hover-translate-x-32:hover {
  transform: var(--spacing-32);
}

.hover-translate-x-36:hover {
  transform: var(--spacing-36);
}

.hover-translate-x-40:hover {
  transform: var(--spacing-40);
}

.hover-translate-x-44:hover {
  transform: var(--spacing-44);
}

.hover-translate-x-48:hover {
  transform: var(--spacing-48);
}

.hover-translate-x-52:hover {
  transform: var(--spacing-52);
}

.hover-translate-x-56:hover {
  transform: var(--spacing-56);
}

.hover-translate-x-60:hover {
  transform: var(--spacing-60);
}

.hover-translate-x-64:hover {
  transform: var(--spacing-64);
}

.hover-translate-x-72:hover {
  transform: var(--spacing-72);
}

.hover-translate-x-80:hover {
  transform: var(--spacing-80);
}

.hover-translate-x-96:hover {
  transform: var(--spacing-96);
}

.hover-translate-x-px:hover {
  transform: var(--spacing-px);
}

.hover-translate-x-0\.5:hover {
  transform: var(--spacing-0.5);
}

.hover-translate-x-1\.5:hover {
  transform: var(--spacing-1.5);
}

.hover-translate-x-2\.5:hover {
  transform: var(--spacing-2.5);
}

.hover-translate-x-3\.5:hover {
  transform: var(--spacing-3.5);
}

.hover-translate-x-auto:hover {
  transform: var(--spacing-auto);
}

.hover-translate-x-1\/2:hover {
  transform: var(--spacing-1\/2);
}

.hover-translate-x-1\/3:hover {
  transform: var(--spacing-1\/3);
}

.hover-translate-x-2\/3:hover {
  transform: var(--spacing-2\/3);
}

.hover-translate-x-1\/4:hover {
  transform: var(--spacing-1\/4);
}

.hover-translate-x-2\/4:hover {
  transform: var(--spacing-2\/4);
}

.hover-translate-x-3\/4:hover {
  transform: var(--spacing-3\/4);
}

.hover-translate-x-1\/5:hover {
  transform: var(--spacing-1\/5);
}

.hover-translate-x-2\/5:hover {
  transform: var(--spacing-2\/5);
}

.hover-translate-x-3\/5:hover {
  transform: var(--spacing-3\/5);
}

.hover-translate-x-4\/5:hover {
  transform: var(--spacing-4\/5);
}

.hover-translate-x-1\/6:hover {
  transform: var(--spacing-1\/6);
}

.hover-translate-x-2\/6:hover {
  transform: var(--spacing-2\/6);
}

.hover-translate-x-3\/6:hover {
  transform: var(--spacing-3\/6);
}

.hover-translate-x-4\/6:hover {
  transform: var(--spacing-4\/6);
}

.hover-translate-x-5\/6:hover {
  transform: var(--spacing-5\/6);
}

.hover-translate-x-full:hover {
  transform: var(--spacing-full);
}

.hover-translate-x-screen:hover {
  transform: var(--spacing-screen);
}

.hover-translate-x-min:hover {
  transform: var(--spacing-min);
}

.hover-translate-x-max:hover {
  transform: var(--spacing-max);
}

.hover-translate-x-fit:hover {
  transform: var(--spacing-fit);
}

.hover-translate-y-0:hover {
  transform: var(--spacing-0);
}

.hover-translate-y-1:hover {
  transform: var(--spacing-1);
}

.hover-translate-y-2:hover {
  transform: var(--spacing-2);
}

.hover-translate-y-3:hover {
  transform: var(--spacing-3);
}

.hover-translate-y-4:hover {
  transform: var(--spacing-4);
}

.hover-translate-y-5:hover {
  transform: var(--spacing-5);
}

.hover-translate-y-6:hover {
  transform: var(--spacing-6);
}

.hover-translate-y-7:hover {
  transform: var(--spacing-7);
}

.hover-translate-y-8:hover {
  transform: var(--spacing-8);
}

.hover-translate-y-9:hover {
  transform: var(--spacing-9);
}

.hover-translate-y-10:hover {
  transform: var(--spacing-10);
}

.hover-translate-y-11:hover {
  transform: var(--spacing-11);
}

.hover-translate-y-12:hover {
  transform: var(--spacing-12);
}

.hover-translate-y-14:hover {
  transform: var(--spacing-14);
}

.hover-translate-y-16:hover {
  transform: var(--spacing-16);
}

.hover-translate-y-20:hover {
  transform: var(--spacing-20);
}

.hover-translate-y-24:hover {
  transform: var(--spacing-24);
}

.hover-translate-y-28:hover {
  transform: var(--spacing-28);
}

.hover-translate-y-32:hover {
  transform: var(--spacing-32);
}

.hover-translate-y-36:hover {
  transform: var(--spacing-36);
}

.hover-translate-y-40:hover {
  transform: var(--spacing-40);
}

.hover-translate-y-44:hover {
  transform: var(--spacing-44);
}

.hover-translate-y-48:hover {
  transform: var(--spacing-48);
}

.hover-translate-y-52:hover {
  transform: var(--spacing-52);
}

.hover-translate-y-56:hover {
  transform: var(--spacing-56);
}

.hover-translate-y-60:hover {
  transform: var(--spacing-60);
}

.hover-translate-y-64:hover {
  transform: var(--spacing-64);
}

.hover-translate-y-72:hover {
  transform: var(--spacing-72);
}

.hover-translate-y-80:hover {
  transform: var(--spacing-80);
}

.hover-translate-y-96:hover {
  transform: var(--spacing-96);
}

.hover-translate-y-px:hover {
  transform: var(--spacing-px);
}

.hover-translate-y-0\.5:hover {
  transform: var(--spacing-0.5);
}

.hover-translate-y-1\.5:hover {
  transform: var(--spacing-1.5);
}

.hover-translate-y-2\.5:hover {
  transform: var(--spacing-2.5);
}

.hover-translate-y-3\.5:hover {
  transform: var(--spacing-3.5);
}

.hover-translate-y-auto:hover {
  transform: var(--spacing-auto);
}

.hover-translate-y-1\/2:hover {
  transform: var(--spacing-1\/2);
}

.hover-translate-y-1\/3:hover {
  transform: var(--spacing-1\/3);
}

.hover-translate-y-2\/3:hover {
  transform: var(--spacing-2\/3);
}

.hover-translate-y-1\/4:hover {
  transform: var(--spacing-1\/4);
}

.hover-translate-y-2\/4:hover {
  transform: var(--spacing-2\/4);
}

.hover-translate-y-3\/4:hover {
  transform: var(--spacing-3\/4);
}

.hover-translate-y-1\/5:hover {
  transform: var(--spacing-1\/5);
}

.hover-translate-y-2\/5:hover {
  transform: var(--spacing-2\/5);
}

.hover-translate-y-3\/5:hover {
  transform: var(--spacing-3\/5);
}

.hover-translate-y-4\/5:hover {
  transform: var(--spacing-4\/5);
}

.hover-translate-y-1\/6:hover {
  transform: var(--spacing-1\/6);
}

.hover-translate-y-2\/6:hover {
  transform: var(--spacing-2\/6);
}

.hover-translate-y-3\/6:hover {
  transform: var(--spacing-3\/6);
}

.hover-translate-y-4\/6:hover {
  transform: var(--spacing-4\/6);
}

.hover-translate-y-5\/6:hover {
  transform: var(--spacing-5\/6);
}

.hover-translate-y-full:hover {
  transform: var(--spacing-full);
}

.hover-translate-y-screen:hover {
  transform: var(--spacing-screen);
}

.hover-translate-y-min:hover {
  transform: var(--spacing-min);
}

.hover-translate-y-max:hover {
  transform: var(--spacing-max);
}

.hover-translate-y-fit:hover {
  transform: var(--spacing-fit);
}

.hover-skew-x-0:hover {
  transform: skewX(0deg);
}

.hover-skew-x-1:hover {
  transform: skewX(1deg);
}

.hover-skew-x-2:hover {
  transform: skewX(2deg);
}

.hover-skew-x-3:hover {
  transform: skewX(3deg);
}

.hover-skew-x-6:hover {
  transform: skewX(6deg);
}

.hover-skew-x-12:hover {
  transform: skewX(12deg);
}

.hover-skew-y-0:hover {
  transform: skewY(0deg);
}

.hover-skew-y-1:hover {
  transform: skewY(1deg);
}

.hover-skew-y-2:hover {
  transform: skewY(2deg);
}

.hover-skew-y-3:hover {
  transform: skewY(3deg);
}

.hover-skew-y-6:hover {
  transform: skewY(6deg);
}

.hover-skew-y-12:hover {
  transform: skewY(12deg);
}

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

.hover-transform-gpu:hover {
  transform: translateZ(0);
}

.hover-transform-cpu:hover {
  transform: none;
}

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

.hover-preserve-3d-preserve-3d:hover {
  transform-style: preserve-3d;
}

.hover-preserve-3d-flat:hover {
  transform-style: flat;
}

.hover-transform-gpu:hover {
  transform: translate3d(0, 0, 0);
}

/* 动画 */
/* 无动画 */
.animate-none {
  animation: none;
}

/* 旋转动画 */
.animate-spin {
  animation: spin 1s linear infinite;
}

/* 脉冲动画 */
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* 心跳动画 */
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 弹跳动画 */
.animate-bounce {
  animation: bounce 1s infinite;
}

/* hover 变体 */
.hover-animate-none:hover {
  animation: none;
}

.hover-animate-spin:hover {
  animation: spin 1s linear infinite;
}

.hover-animate-ping:hover {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.hover-animate-pulse:hover {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.hover-animate-bounce:hover {
  animation: bounce 1s infinite;
}

/* 关键帧 */
/* 基础类 */
/* 旋转关键帧 */
.keyframes-spin {
  @keyframes: spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
}

/* 脉冲关键帧 */
.keyframes-ping {
  @keyframes: ping {

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

/* 心跳关键帧 */
.keyframes-pulse {
  @keyframes: pulse {

    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.5;
    }
  }
}

/* 弹跳关键帧 */
.keyframes-bounce {
  @keyframes: bounce {

    0%,
    100% {
      transform: translateY(-25%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
      transform: none;
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }
}

/* hover 变体 */
.hover-keyframes-spin:hover {
  @keyframes: spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
}

.hover-keyframes-ping:hover {
  @keyframes: ping {

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

.hover-keyframes-pulse:hover {
  @keyframes: pulse {

    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.5;
    }
  }
}

.hover-keyframes-bounce:hover {
  @keyframes: bounce {

    0%,
    100% {
      transform: translateY(-25%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
      transform: none;
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }
}