@anker-in/headless-ui 0.0.26 → 0.0.27-alpha.1

package/style.css

@@ -1,10 +1,114 @@
-/*
-! tailwindcss v3.4.6 | MIT License | https://tailwindcss.com
-*//*
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+} /*
+! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
+*/ /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 */
-
 *,
 ::before,
 ::after {
@@ -13,13 +117,10 @@
   border-style: solid; /* 2 */
   border-color: #e5e7eb; /* 2 */
 }
-
 ::before,
 ::after {
   --tw-content: '';
-}
-
-/*
+} /*
 1. Use a consistent sensible line-height in all browsers.
 2. Prevent adjustments of font size after orientation changes in iOS.
 3. Use a more readable tab size.
@@ -28,7 +129,6 @@
 6. Use the user's configured `sans` font-variation-settings by default.
 7. Disable tap highlights on iOS
 */
-
 html,
 :host {
   line-height: 1.5; /* 1 */
@@ -40,43 +140,31 @@ html,
   font-feature-settings: normal; /* 5 */
   font-variation-settings: normal; /* 6 */
   -webkit-tap-highlight-color: transparent; /* 7 */
-}
-
-/*
+} /*
 1. Remove the margin in all browsers.
 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
 */
-
 body {
   margin: 0; /* 1 */
   line-height: inherit; /* 2 */
-}
-
-/*
+} /*
 1. Add the correct height in Firefox.
 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
 3. Ensure horizontal rules are visible by default.
 */
-
 hr {
   height: 0; /* 1 */
   color: inherit; /* 2 */
   border-top-width: 1px; /* 3 */
-}
-
-/*
+} /*
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
-
 abbr:where([title]) {
   -webkit-text-decoration: underline dotted;
           text-decoration: underline dotted;
-}
-
-/*
+} /*
 Remove the default font size and weight for headings.
 */
-
 h1,
 h2,
 h3,
@@ -85,33 +173,24 @@ h5,
 h6 {
   font-size: inherit;
   font-weight: inherit;
-}
-
-/*
+} /*
 Reset links to optimize for opt-in styling instead of opt-out.
 */
-
 a {
   color: inherit;
   text-decoration: inherit;
-}
-
-/*
+} /*
 Add the correct font weight in Edge and Safari.
 */
-
 b,
 strong {
   font-weight: bolder;
-}
-
-/*
+} /*
 1. Use the user's configured `mono` font-family by default.
 2. Use the user's configured `mono` font-feature-settings by default.
 3. Use the user's configured `mono` font-variation-settings by default.
 4. Correct the odd `em` font sizing in all browsers.
 */
-
 code,
 kbd,
 samp,
@@ -120,20 +199,14 @@ pre {
   font-feature-settings: normal; /* 2 */
   font-variation-settings: normal; /* 3 */
   font-size: 1em; /* 4 */
-}
-
-/*
+} /*
 Add the correct font size in all browsers.
 */
-
 small {
   font-size: 80%;
-}
-
-/*
+} /*
 Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 */
-
 sub,
 sup {
   font-size: 75%;
@@ -141,33 +214,25 @@ sup {
   position: relative;
   vertical-align: baseline;
 }
-
 sub {
   bottom: -0.25em;
 }
-
 sup {
   top: -0.5em;
-}
-
-/*
+} /*
 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
 3. Remove gaps between table borders by default.
 */
-
 table {
   text-indent: 0; /* 1 */
   border-color: inherit; /* 2 */
   border-collapse: collapse; /* 3 */
-}
-
-/*
+} /*
 1. Change the font styles in all browsers.
 2. Remove the margin in Firefox and Safari.
 3. Remove default padding in all browsers.
 */
-
 button,
 input,
 optgroup,
@@ -183,22 +248,16 @@ textarea {
   color: inherit; /* 1 */
   margin: 0; /* 2 */
   padding: 0; /* 3 */
-}
-
-/*
+} /*
 Remove the inheritance of text transform in Edge and Firefox.
 */
-
 button,
 select {
   text-transform: none;
-}
-
-/*
+} /*
 1. Correct the inability to style clickable types in iOS and Safari.
 2. Remove default button styles.
 */
-
 button,
 input:where([type='button']),
 input:where([type='reset']),
@@ -206,81 +265,54 @@ input:where([type='submit']) {
   -webkit-appearance: button; /* 1 */
   background-color: transparent; /* 2 */
   background-image: none; /* 2 */
-}
-
-/*
+} /*
 Use the modern Firefox focus style for all focusable elements.
 */
-
 :-moz-focusring {
   outline: auto;
-}
-
-/*
+} /*
 Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
 */
-
 :-moz-ui-invalid {
   box-shadow: none;
-}
-
-/*
+} /*
 Add the correct vertical alignment in Chrome and Firefox.
 */
-
 progress {
   vertical-align: baseline;
-}
-
-/*
+} /*
 Correct the cursor style of increment and decrement buttons in Safari.
 */
-
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
   height: auto;
-}
-
-/*
+} /*
 1. Correct the odd appearance in Chrome and Safari.
 2. Correct the outline style in Safari.
 */
-
 [type='search'] {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
-}
-
-/*
+} /*
 Remove the inner padding in Chrome and Safari on macOS.
 */
-
 ::-webkit-search-decoration {
   -webkit-appearance: none;
-}
-
-/*
+} /*
 1. Correct the inability to style clickable types in iOS and Safari.
 2. Change font properties to `inherit` in Safari.
 */
-
 ::-webkit-file-upload-button {
   -webkit-appearance: button; /* 1 */
   font: inherit; /* 2 */
-}
-
-/*
+} /*
 Add the correct display in Chrome and Safari.
 */
-
 summary {
   display: list-item;
-}
-
-/*
+} /*
 Removes the default spacing and border for appropriate elements.
 */
-
 blockquote,
 dl,
 dd,
@@ -296,77 +328,57 @@ p,
 pre {
   margin: 0;
 }
-
 fieldset {
   margin: 0;
   padding: 0;
 }
-
 legend {
   padding: 0;
 }
-
 ol,
 ul,
 menu {
   list-style: none;
   margin: 0;
   padding: 0;
-}
-
-/*
+} /*
 Reset default styling for dialogs.
 */
 dialog {
   padding: 0;
-}
-
-/*
+} /*
 Prevent resizing textareas horizontally by default.
 */
-
 textarea {
   resize: vertical;
-}
-
-/*
+} /*
 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
-
 input::-moz-placeholder, textarea::-moz-placeholder {
   opacity: 1; /* 1 */
   color: #9ca3af; /* 2 */
 }
-
 input::placeholder,
 textarea::placeholder {
   opacity: 1; /* 1 */
   color: #9ca3af; /* 2 */
-}
-
-/*
+} /*
 Set the default cursor for buttons.
 */
-
 button,
 [role="button"] {
   cursor: pointer;
-}
-
-/*
+} /*
 Make sure disabled buttons don't get the pointer cursor.
 */
 :disabled {
   cursor: default;
-}
-
-/*
+} /*
 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
    This can trigger a poorly considered lint error in some tools but is included by design.
 */
-
 img,
 svg,
 video,
@@ -377,131 +389,41 @@ embed,
 object {
   display: block; /* 1 */
   vertical-align: middle; /* 2 */
-}
-
-/*
+} /*
 Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 */
-
 img,
 video {
   max-width: 100%;
   height: auto;
-}
-
-/* Make elements with the HTML hidden attribute stay hidden by default */
-[hidden] {
+} /* Make elements with the HTML hidden attribute stay hidden by default */
+[hidden]:where(:not([hidden="until-found"])) {
   display: none;
 }
-
-*, ::before, ::after {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
+.container {
+  width: 100%;
 }
-
-::backdrop {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
+@media (min-width: var(--breakpoint-sm)) {
+  .container {
+    max-width: var(--breakpoint-sm);
+  }
+}
+@media (min-width: var(--breakpoint-md)) {
+  .container {
+    max-width: var(--breakpoint-md);
+  }
+}
+@media (min-width: var(--breakpoint-lg)) {
+  .container {
+    max-width: var(--breakpoint-lg);
+  }
 }
-.ai-sr-only {
+@media (min-width: var(--breakpoint-xl)) {
+  .container {
+    max-width: var(--breakpoint-xl);
+  }
+}
+.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -512,843 +434,1292 @@ video {
   white-space: nowrap;
   border-width: 0;
 }
-.\!ai-pointer-events-none {
+.\!pointer-events-none {
   pointer-events: none !important;
 }
-.ai-fixed {
+.fixed {
   position: fixed;
 }
-.ai-absolute {
+.absolute {
   position: absolute;
 }
-.ai-relative {
+.relative {
   position: relative;
 }
-.ai-inset-0 {
+.inset-0 {
   inset: 0px;
 }
-.ai-left-1\/2 {
+.-bottom-12 {
+  bottom: -3rem;
+}
+.-bottom-4 {
+  bottom: -1rem;
+}
+.-bottom-\[24px\] {
+  bottom: -24px;
+}
+.-left-12 {
+  left: -3rem;
+}
+.-right-12 {
+  right: -3rem;
+}
+.-top-12 {
+  top: -3rem;
+}
+.bottom-\[24px\] {
+  bottom: 24px;
+}
+.left-0 {
+  left: 0px;
+}
+.left-1\/2 {
   left: 50%;
 }
-.ai-right-4 {
+.left-2 {
+  left: 0.5rem;
+}
+.right-4 {
   right: 1rem;
 }
-.ai-top-1\/2 {
+.top-1\/2 {
   top: 50%;
 }
-.ai-top-4 {
+.top-2 {
+  top: 0.5rem;
+}
+.top-4 {
   top: 1rem;
 }
-.ai-z-50 {
+.z-50 {
   z-index: 50;
 }
-.ai-z-\[1\] {
+.z-\[1\] {
   z-index: 1;
 }
-.-ai-order-1 {
+.-order-1 {
   order: -1;
 }
-.ai-order-2 {
+.order-2 {
   order: 2;
 }
-.ai-block {
+.col-span-1 {
+  grid-column: span 1 / span 1;
+}
+.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-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-start-1 {
+  grid-column-start: 1;
+}
+.col-start-10 {
+  grid-column-start: 10;
+}
+.col-start-11 {
+  grid-column-start: 11;
+}
+.col-start-12 {
+  grid-column-start: 12;
+}
+.col-start-2 {
+  grid-column-start: 2;
+}
+.col-start-3 {
+  grid-column-start: 3;
+}
+.col-start-4 {
+  grid-column-start: 4;
+}
+.col-start-5 {
+  grid-column-start: 5;
+}
+.col-start-6 {
+  grid-column-start: 6;
+}
+.col-start-7 {
+  grid-column-start: 7;
+}
+.col-start-8 {
+  grid-column-start: 8;
+}
+.col-start-9 {
+  grid-column-start: 9;
+}
+.col-end-10 {
+  grid-column-end: 10;
+}
+.col-end-11 {
+  grid-column-end: 11;
+}
+.col-end-12 {
+  grid-column-end: 12;
+}
+.col-end-13 {
+  grid-column-end: 13;
+}
+.col-end-2 {
+  grid-column-end: 2;
+}
+.col-end-3 {
+  grid-column-end: 3;
+}
+.col-end-4 {
+  grid-column-end: 4;
+}
+.col-end-5 {
+  grid-column-end: 5;
+}
+.col-end-6 {
+  grid-column-end: 6;
+}
+.col-end-7 {
+  grid-column-end: 7;
+}
+.col-end-8 {
+  grid-column-end: 8;
+}
+.col-end-9 {
+  grid-column-end: 9;
+}
+.-mx-1 {
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+}
+.mx-1\.5 {
+  margin-left: 0.375rem;
+  margin-right: 0.375rem;
+}
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.-ml-4 {
+  margin-left: -1rem;
+}
+.-mt-4 {
+  margin-top: -1rem;
+}
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+.ml-auto {
+  margin-left: auto;
+}
+.box-border {
+  box-sizing: border-box;
+}
+.block {
   display: block;
 }
-.ai-flex {
+.flex {
   display: flex;
 }
-.ai-inline-flex {
+.inline-flex {
   display: inline-flex;
 }
-.ai-grid {
+.grid {
   display: grid;
 }
-.ai-aspect-square {
+.contents {
+  display: contents;
+}
+.hidden {
+  display: none;
+}
+.aspect-square {
   aspect-ratio: 1 / 1;
 }
-.ai-size-10 {
+.size-10 {
   width: 2.5rem;
   height: 2.5rem;
 }
-.ai-size-4 {
+.size-12 {
+  width: 3rem;
+  height: 3rem;
+}
+.size-4 {
   width: 1rem;
   height: 1rem;
 }
-.ai-size-5 {
+.size-5 {
   width: 1.25rem;
   height: 1.25rem;
 }
-.ai-size-\[14px\] {
+.size-6 {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.size-8 {
+  width: 2rem;
+  height: 2rem;
+}
+.size-\[14px\] {
   width: 14px;
   height: 14px;
 }
-.ai-size-full {
+.size-\[72px\] {
+  width: 72px;
+  height: 72px;
+}
+.size-full {
   width: 100%;
   height: 100%;
 }
-.ai-h-10 {
+.h-10 {
   height: 2.5rem;
 }
-.ai-h-11 {
-  height: 2.75rem;
-}
-.ai-h-12 {
+.h-12 {
   height: 3rem;
 }
-.ai-h-8 {
+.h-2 {
+  height: 0.5rem;
+}
+.h-3\.5 {
+  height: 0.875rem;
+}
+.h-4 {
+  height: 1rem;
+}
+.h-8 {
   height: 2rem;
 }
-.ai-h-full {
+.h-\[3px\] {
+  height: 3px;
+}
+.h-\[52px\] {
+  height: 52px;
+}
+.h-full {
   height: 100%;
 }
-.ai-w-72 {
-  width: 18rem;
+.h-px {
+  height: 1px;
+}
+.max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
+  max-height: var(--radix-dropdown-menu-content-available-height);
+}
+.w-0 {
+  width: 0px;
+}
+.w-2 {
+  width: 0.5rem;
+}
+.w-3\.5 {
+  width: 0.875rem;
+}
+.w-4 {
+  width: 1rem;
+}
+.w-72 {
+  width: 18rem;
+}
+.w-\[105px\] {
+  width: 105px;
+}
+.w-\[16px\] {
+  width: 16px;
+}
+.w-full {
+  width: 100%;
+}
+.min-w-\[8rem\] {
+  min-width: 8rem;
+}
+.max-w-\[1664px\] {
+  max-width: 1664px;
+}
+.max-w-lg {
+  max-width: 32rem;
+}
+.shrink-0 {
+  flex-shrink: 0;
+}
+.grow-0 {
+  flex-grow: 0;
+}
+.basis-full {
+  flex-basis: 100%;
+}
+.origin-\[--radix-dropdown-menu-content-transform-origin\] {
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+}
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.rotate-90 {
+  --tw-rotate: 90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+.\!cursor-default {
+  cursor: default !important;
+}
+.cursor-default {
+  cursor: default;
+}
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+.cursor-pointer {
+  cursor: pointer;
+}
+.\!select-none {
+  -webkit-user-select: none !important;
+     -moz-user-select: none !important;
+          user-select: none !important;
+}
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.grid-cols-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+.flex-row {
+  flex-direction: row;
+}
+.flex-col {
+  flex-direction: column;
+}
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+.items-center {
+  align-items: center;
+}
+.justify-end {
+  justify-content: flex-end;
+}
+.justify-center {
+  justify-content: center;
+}
+.gap-1 {
+  gap: 0.25rem;
+}
+.gap-1\.5 {
+  gap: 0.375rem;
+}
+.gap-2 {
+  gap: 0.5rem;
+}
+.gap-3 {
+  gap: 0.75rem;
+}
+.gap-4 {
+  gap: 1rem;
+}
+.gap-\[24px\] {
+  gap: 24px;
+}
+.gap-\[8px\] {
+  gap: 8px;
+}
+.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
+}
+.overflow-hidden {
+  overflow: hidden;
+}
+.overflow-x-auto {
+  overflow-x: auto;
+}
+.overflow-y-auto {
+  overflow-y: auto;
+}
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rounded-\[20px\] {
+  border-radius: 20px;
+}
+.rounded-btn {
+  border-radius: var(--btn-radius);
+}
+.rounded-full {
+  border-radius: 9999px;
+}
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+.rounded-md {
+  border-radius: 0.375rem;
+}
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+.border {
+  border-width: 1px;
+}
+.border-b {
+  border-bottom-width: 1px;
+}
+.border-solid {
+  border-style: solid;
+}
+.\!border-none {
+  border-style: none !important;
+}
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
+}
+.border-btn-primary {
+  border-color: var(--btn-bg-color);
+}
+.border-lines-1 {
+  border-color: var(--line-color-1);
+}
+.border-lines-3 {
+  border-color: var(--dark-success-color-0);
+}
+.border-lines-4 {
+  border-color: var(--dark-warning-color-0);
+}
+.border-lines-5 {
+  border-color: var(--dark-error-color-0);
+}
+.border-primary {
+  border-color: var(--brand-color-1);
+}
+.border-b-brand-0 {
+  border-bottom-color: var(--brand-color-0);
+}
+.border-b-lines {
+  border-bottom-color: var(--lines-color);
+}
+.bg-\[\#1D1D1F\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 29 31 / var(--tw-bg-opacity, 1));
+}
+.bg-\[\#86868C\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(134 134 140 / var(--tw-bg-opacity, 1));
+}
+.bg-background {
+  background-color: var(--container-primary-color);
+}
+.bg-bg-0 {
+  background-color: var(--bg-color-0);
+}
+.bg-bg-1 {
+  background-color: var(--bg-color-1);
+}
+.bg-bg-2 {
+  background-color: var(--bg-color-2);
+}
+.bg-black\/80 {
+  background-color: rgb(0 0 0 / 0.8);
+}
+.bg-brand-0 {
+  background-color: var(--brand-color-0);
+}
+.bg-brand-1 {
+  background-color: var(--brand-color-1);
+}
+.bg-btn-primary {
+  background-color: var(--btn-bg-color);
+}
+.bg-btn-secondary {
+  background-color: var(--btn-bg-secondary-color);
+}
+.bg-container-primary {
+  background-color: var(--container-primary-color);
+}
+.bg-container-secondary-0 {
+  background-color: var(--container-secondary-color-0);
 }
-.ai-w-full {
-  width: 100%;
+.bg-container-secondary-1 {
+  background-color: var(--container-secondary-color-1);
 }
-.ai-max-w-lg {
-  max-width: 32rem;
+.bg-error-0 {
+  background-color: var(--error-color-0);
 }
-.ai-shrink-0 {
-  flex-shrink: 0;
+.bg-error-1 {
+  background-color: var(--error-color-1);
 }
-.-ai-translate-x-1\/2 {
-  --tw-translate-x: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+.bg-error-2 {
+  background-color: var(--error-color-2);
 }
-.-ai-translate-y-1\/2 {
-  --tw-translate-y: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+.bg-error-3 {
+  background-color: var(--error-color-3);
 }
-@keyframes ai-pulse {
-
-  50% {
-    opacity: .5;
-  }
+.bg-error-4 {
+  background-color: var(--error-color-4);
 }
-.ai-animate-pulse {
-  animation: ai-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+.bg-info-primary {
+  background-color: var(--info-primary-color);
 }
-@keyframes ai-spin {
-
-  to {
-    transform: rotate(360deg);
-  }
+.bg-info-quaternary {
+  background-color: var(--info-quaternary-color);
 }
-.ai-animate-spin {
-  animation: ai-spin 1s linear infinite;
+.bg-info-secondary {
+  background-color: var(--info-secondary-color);
 }
-.\!ai-cursor-default {
-  cursor: default !important;
+.bg-info-tertiary {
+  background-color: var(--info-tertiary-color);
 }
-.\!ai-select-none {
-  -webkit-user-select: none !important;
-     -moz-user-select: none !important;
-          user-select: none !important;
+.bg-info-white {
+  background-color: var(--info-white-color);
 }
-.ai-flex-row {
-  flex-direction: row;
+.bg-lines {
+  background-color: var(--lines-color);
 }
-.ai-flex-col {
-  flex-direction: column;
+.bg-masks-0 {
+  background-color: var(--masks-color-0);
 }
-.ai-flex-col-reverse {
-  flex-direction: column-reverse;
+.bg-masks-1 {
+  background-color: var(--masks-color-1);
 }
-.ai-items-center {
-  align-items: center;
+.bg-primary-foreground {
+  background-color: var(--btn-text-color);
 }
-.ai-justify-center {
-  justify-content: center;
+.bg-skeleton {
+  background-color: var(--tertiary-color);
 }
-.ai-gap-1 {
-  gap: 0.25rem;
+.bg-success-0 {
+  background-color: var(--success-color-0);
 }
-.ai-gap-4 {
-  gap: 1rem;
+.bg-success-1 {
+  background-color: var(--success-color-1);
 }
-.ai-space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
+.bg-success-2 {
+  background-color: var(--success-color-2);
 }
-.ai-overflow-hidden {
-  overflow: hidden;
+.bg-success-3 {
+  background-color: var(--success-color-3);
 }
-.ai-rounded-\[20px\] {
-  border-radius: 20px;
+.bg-success-4 {
+  background-color: var(--success-color-4);
 }
-.ai-rounded-btn {
-  border-radius: var(--btn-radius);
+.bg-tab-fill-0 {
+  background-color: var(--tab-fill-color-0);
 }
-.ai-rounded-full {
-  border-radius: 9999px;
+.bg-tab-fill-1 {
+  background-color: var(--tab-fill-color-1);
 }
-.ai-rounded-md {
-  border-radius: 0.375rem;
+.bg-tab-fill-2 {
+  background-color: var(--tab-fill-color-2);
 }
-.ai-rounded-sm {
-  border-radius: 0.125rem;
+.bg-tab-stroke-0 {
+  background-color: var(--tab-stroke-color-0);
 }
-.ai-border {
-  border-width: 1px;
+.bg-tab-stroke-1 {
+  background-color: var(--tab-stroke-color-1);
 }
-.ai-border-solid {
-  border-style: solid;
+.bg-tab-stroke-2 {
+  background-color: var(--tab-stroke-color-2);
 }
-.\!ai-border-none {
-  border-style: none !important;
+.bg-tab-word-0 {
+  background-color: var(--tab-word-color-0);
 }
-.ai-border-primary {
-  border-color: var(--brand-color-1);
+.bg-tab-word-1 {
+  background-color: var(--tab-word-color-1);
 }
-.ai-border-transparent {
-  border-color: transparent;
+.bg-tab-word-2 {
+  background-color: var(--tab-word-color-2);
 }
-.ai-bg-background {
-  background-color: var(--container-primary-color);
+.bg-transparent {
+  background-color: transparent;
 }
-.ai-bg-badge {
-  background-color: var(--secondary-brand-color-2);
+.bg-warning-0 {
+  background-color: var(--warning-color-0);
 }
-.ai-bg-black\/80 {
-  background-color: rgb(0 0 0 / 0.8);
+.bg-warning-1 {
+  background-color: var(--warning-color-1);
 }
-.ai-bg-btn-primary {
-  background-color: var(--btn-bg-color);
+.bg-warning-2 {
+  background-color: var(--warning-color-2);
 }
-.ai-bg-btn-secondary {
-  background-color: var(--btn-bg-secondary-color);
+.bg-warning-3 {
+  background-color: var(--warning-color-3);
 }
-.ai-bg-skeleton {
-  background-color: var(--tertiary-color);
+.bg-warning-4 {
+  background-color: var(--warning-color-4);
 }
-.\!ai-bg-none {
+.\!bg-none {
   background-image: none !important;
 }
-.\!ai-decoration-clone {
+.\!decoration-clone {
   -webkit-box-decoration-break: clone !important;
           box-decoration-break: clone !important;
 }
-.\!ai-bg-clip-border {
+.\!bg-clip-border {
   background-clip: border-box !important;
 }
-.ai-stroke-btn-primary-foreground {
+.fill-current {
+  fill: currentColor;
+}
+.stroke-btn-primary-foreground {
   stroke: var(--btn-text-color);
 }
-.ai-stroke-btn-secondary-foreground {
+.stroke-btn-secondary-foreground {
   stroke: var(--btn-text-secondary-color);
 }
-.ai-stroke-primary {
+.stroke-primary {
   stroke: var(--brand-color-1);
 }
-.ai-p-4 {
+.p-1 {
+  padding: 0.25rem;
+}
+.p-4 {
   padding: 1rem;
 }
-.ai-p-6 {
+.p-6 {
   padding: 1.5rem;
 }
-.ai-px-3 {
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
-.ai-px-4 {
+.px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.ai-px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
 }
-.ai-px-\[10px\] {
+.px-7 {
+  padding-left: 1.75rem;
+  padding-right: 1.75rem;
+}
+.px-\[10px\] {
   padding-left: 10px;
   padding-right: 10px;
 }
-.ai-py-1 {
+.py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
-.ai-py-2 {
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+.py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.ai-text-left {
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+.\!pl-0 {
+  padding-left: 0px !important;
+}
+.pb-6 {
+  padding-bottom: 1.5rem;
+}
+.pb-\[10px\] {
+  padding-bottom: 10px;
+}
+.pb-\[14px\] {
+  padding-bottom: 14px;
+}
+.pl-4 {
+  padding-left: 1rem;
+}
+.pl-8 {
+  padding-left: 2rem;
+}
+.pr-2 {
+  padding-right: 0.5rem;
+}
+.pt-0 {
+  padding-top: 0px;
+}
+.pt-4 {
+  padding-top: 1rem;
+}
+.pt-6 {
+  padding-top: 1.5rem;
+}
+.pt-\[11px\] {
+  padding-top: 11px;
+}
+.pt-\[15px\] {
+  padding-top: 15px;
+}
+.text-left {
   text-align: left;
 }
-.ai-text-center {
+.text-center {
   text-align: center;
 }
-.ai-text-right {
+.text-right {
   text-align: right;
 }
-.ai-text-2xl {
+.font-body {
+  font-family: Inter, PingFang SC, sans-serif;
+}
+.text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
 }
-.ai-text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-.ai-text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-.ai-text-5xl {
-  font-size: 3rem;
-  line-height: 1;
-}
-.ai-text-\[12px\] {
+.text-\[12px\] {
   font-size: 12px;
 }
-.ai-text-\[14px\] {
+.text-\[14px\] {
   font-size: 14px;
 }
-.ai-text-\[16px\] {
+.text-\[16px\] {
   font-size: 16px;
 }
-.ai-text-base {
+.text-base {
   font-size: 1rem;
   line-height: 1.5rem;
 }
-.ai-text-lg {
+.text-heading-1 {
+  font-size: 24px;
+  line-height: 120%;
+  letter-spacing: -0.48px;
+}
+.text-heading-2 {
+  font-size: 32px;
+  line-height: 120%;
+  letter-spacing: -0.64px;
+}
+.text-heading-3 {
+  font-size: 40px;
+  line-height: 120%;
+  letter-spacing: -0.8px;
+}
+.text-heading-5 {
+  font-size: 56px;
+  line-height: 120%;
+  letter-spacing: -1.12px;
+}
+.text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
-.ai-text-sm {
+.text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
-.ai-text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
+.text-text-1 {
+  font-size: var(--size-text-1);
+  line-height: var(--line-height-text-base);
+  letter-spacing: var(--letter-spacing-text-1);
+}
+.text-text-2 {
+  font-size: var(--size-text-2);
+  line-height: var(--line-height-text-base);
+  letter-spacing: var(--letter-spacing-text-3);
 }
-.ai-text-xs {
+.text-text-3 {
+  font-size: var(--size-text-3);
+  line-height: var(--line-height-text-base);
+  letter-spacing: var(--letter-spacing-text-3);
+}
+.text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
 }
-.ai-font-bold {
+.font-black {
+  font-weight: 900;
+}
+.font-bold {
   font-weight: 700;
 }
-.ai-font-light {
+.font-extrabold {
+  font-weight: 800;
+}
+.font-light {
   font-weight: 300;
 }
-.ai-font-medium {
+.font-medium {
   font-weight: 500;
 }
-.ai-font-normal {
+.font-normal {
   font-weight: 400;
 }
-.ai-font-semibold {
+.font-semibold {
   font-weight: 600;
 }
-.ai-leading-loose {
-  line-height: var(--line-height-loose);
-}
-.ai-leading-none {
+.leading-none {
   line-height: 1;
 }
-.ai-leading-normal {
-  line-height: var(--line-height-normal);
-}
-.ai-leading-tight {
+.leading-tight {
   line-height: var(--line-height-tight);
 }
-.ai-tracking {
+.tracking {
   letter-spacing: var(--letter-spacing-normal);
 }
-.ai-tracking-tight {
+.tracking-tight {
   letter-spacing: -0.025em;
 }
-.\!ai-text-transparent {
+.tracking-widest {
+  letter-spacing: 0.1em;
+}
+.\!text-transparent {
   color: transparent !important;
 }
-.ai-text-badge-foreground {
-  color: var(--brand-color-1);
+.text-\[\#86868C\] {
+  --tw-text-opacity: 1;
+  color: rgb(134 134 140 / var(--tw-text-opacity, 1));
+}
+.text-btn-primary {
+  color: var(--btn-bg-color);
 }
-.ai-text-btn-primary-foreground {
+.text-btn-primary-foreground {
   color: var(--btn-text-color);
 }
-.ai-text-btn-secondary-foreground {
+.text-btn-secondary-foreground {
   color: var(--btn-text-secondary-color);
 }
-.ai-text-current {
+.text-current {
   color: currentColor;
 }
-.ai-text-primary {
+.text-info-primary {
+  color: var(--info-primary-color);
+}
+.text-info-quaternary {
+  color: var(--info-quaternary-color);
+}
+.text-info-white {
+  color: var(--info-white-color);
+}
+.text-lines-1 {
+  color: var(--line-color-1);
+}
+.text-lines-3 {
+  color: var(--dark-success-color-0);
+}
+.text-lines-4 {
+  color: var(--dark-warning-color-0);
+}
+.text-lines-5 {
+  color: var(--dark-error-color-0);
+}
+.text-primary {
   color: var(--brand-color-1);
 }
-.ai-underline-offset-4 {
+.underline {
+  text-decoration-line: underline;
+}
+.no-underline {
+  text-decoration-line: none;
+}
+.underline-offset-4 {
   text-underline-offset: 4px;
 }
-.ai-opacity-70 {
+.opacity-60 {
+  opacity: 0.6;
+}
+.opacity-70 {
   opacity: 0.7;
 }
-.\!ai-shadow-none {
+.\!shadow-none {
   --tw-shadow: 0 0 #0000 !important;
   --tw-shadow-colored: 0 0 #0000 !important;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
 }
-.ai-shadow-lg {
+.shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.ai-shadow-md {
+.shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.\!ai-outline-none {
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.\!outline-none {
   outline: 2px solid transparent !important;
   outline-offset: 2px !important;
 }
-.ai-outline-none {
+.outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.ai-ring-offset-background {
+.ring-offset-background {
   --tw-ring-offset-color: var(--container-primary-color);
 }
-.ai-transition-colors {
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+.transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.ai-transition-opacity {
+.transition-opacity {
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.ai-duration-200 {
+.duration-200 {
   transition-duration: 200ms;
 }
-
-:root {
-  --btn-bg-color: #00a7e1;
-  --btn-text-color: #ffffff;
-  --btn-bg-active-color: #00a7e1;
-  --btn-bg-disabled-color: #ccdfe850;
-
-  --btn-bg-secondary-color: #ffffff;
-  --btn-text-secondary-color: #333333;
-  --btn-bg-secondary-active-color: #555555;
-  --btn-bg-secondary-disabled-color: #f5f5f550;
-
-  --btn-radius: 0;
-
-  --radius: 3em;
-
-  --brand-color-1: #005d8e;
-  --brand-color-2: ##337da5;
-  --brand-color-3: ##669ebb;
-  --brand-color-4: #99bed2;
-  --brand-color-5: #ccdfe8;
-
-  --secondary-brand-color-1: #042637;
-  --secondary-brand-color-2: #b3ecfb;
-  --secondary-brand-color-3: #f8f7f6;
-
-  --success-color-1: #34c759;
-  --success-color-2: #5dd27a;
-  --success-color-3: #85dd9b;
-  --success-color-4: #aee9bd;
-  --success-color-5: #d6f4de;
-
-  --warning-color-1: #ffc24d;
-  --warning-color-2: #fdcc6e;
-  --warning-color-3: #fbd68f;
-  --warning-color-4: #f8e0af;
-  --warning-color-5: #f6ead0;
-
-  --error-color-1: #ff4d4d;
-  --error-color-2: #fd6e6e;
-  --error-color-3: #fb908f;
-  --error-color-4: #f8b1af;
-  --error-color-5: #f6d3d0;
-
-  --primary-color: #333333;
-  --secondary-color: #666666;
-  --tertiary-color: #999999;
-  --quaternary-color: #cccccc;
-  --white-color: #ffffff;
-  --white-disable-color: hsla(0, 0%, 96%, 0.5);
-
-  --container-primary-color: #ffffff;
-  --container-secondary-color: #f4f4f1;
-
-  --bg-color-1: #f4f4f1;
-  --bg-color-2: #efefec;
-
-  --line-color: #e9e9e9;
-
-  --masks-color-1: hsla(0, 0%, 0%, 0.5);
-  --masks-color-2: hsla(0, 0%, 0%, 0.85);
-}
-
-:root[data-brand-theme='anker'] {
-  --btn-bg-color: #00befa;
-  --btn-text-color: #ffffff;
-  --btn-bg-active-color: #00aaff;
-  --btn-bg-disabled-color: rgba(29, 62, 79, 0.7);
-
-  --btn-bg-secondary-color: #ffffff;
-  --btn-text-secondary-color: #1d1d1f;
-  --btn-bg-secondary-active-color: #6e6e73;
-  --btn-bg-secondary-disabled-color: rgba(221, 221, 221, 0.7);
-  --btn-border-secondary-border-color: #acacac;
-
-  --btn-radius: 0;
-
-  --radius: 0em;
-
-  --letter-spacing-normal: -0.02em;
-  --line-height-tight: 1.2;
-  --line-height-normal: 1.4;
-  --line-height-loose: 1.6;
-}
-
-:root[data-brand-theme='eufy'] {
-  --btn-bg-color: #005d8e;
-  --btn-text-color: #ffffff;
-  --btn-bg-active-color: #669ebb;
-  --btn-bg-disabled-color: #ccdfe850;
-
-  --btn-bg-secondary-color: #ffffff;
-  --btn-text-secondary-color: #333333;
-  --btn-bg-secondary-active-color: #555555;
-  --btn-bg-secondary-disabled-color: #f5f5f550;
-
-  --btn-radius: 40px;
-
-  --radius: 40px;
-
-  --brand-color-1: #005d8e;
-  --brand-color-2: ##337da5;
-  --brand-color-3: ##669ebb;
-  --brand-color-4: #99bed2;
-  --brand-color-5: #ccdfe8;
-
-  --secondary-brand-color-1: #042637;
-  --secondary-brand-color-2: #b3ecfb;
-  --secondary-brand-color-3: #f8f7f6;
-
-  --success-color-1: #34c759;
-  --success-color-2: #5dd27a;
-  --success-color-3: #85dd9b;
-  --success-color-4: #aee9bd;
-  --success-color-5: #d6f4de;
-
-  --warning-color-1: #ffc24d;
-  --warning-color-2: #fdcc6e;
-  --warning-color-3: #fbd68f;
-  --warning-color-4: #f8e0af;
-  --warning-color-5: #f6ead0;
-
-  --error-color-1: #ff4d4d;
-  --error-color-2: #fd6e6e;
-  --error-color-3: #fb908f;
-  --error-color-4: #f8b1af;
-  --error-color-5: #f6d3d0;
-
-  --primary-color: #333333;
-  --secondary-color: #666666;
-  --tertiary-color: #999999;
-  --quaternary-color: #cccccc;
-  --white-color: #ffffff;
-  --white-disable-color: hsla(0, 0%, 96%, 0.5);
-
-  --container-primary-color: #ffffff;
-  --container-secondary-color: #f4f4f1;
-
-  --bg-color-1: #f4f4f1;
-  --bg-color-2: #efefec;
-
-  --line-color: #e9e9e9;
-
-  --masks-color-1: hsla(0, 0%, 0%, 0.5);
-  --masks-color-2: hsla(0, 0%, 0%, 0.85);
-}
-
-:root[data-brand-theme='nebula'] {
-  --btn-bg-color: #e42d46;
-  --btn-text-color: #ffffff;
-  --btn-bg-active-color: #ff3d5a;
-
-  --btn-radius: 0;
-
-  --radius: 0em;
-
-  --brand-color-1: #e42d46;
-}
-
-:root[data-brand-theme='soundcore'] {
-  --btn-bg-color: #17bbef;
-  --btn-text-color: #ffffff;
-  --btn-bg-color-active: #48cffa;
-  --btn-bg-disabled-color: #ccdfe850;
-
-  --btn-bg-secondary-color: #ffffff;
-  --btn-text-secondary-color: #17bbef;
-  --btn-bg-secondary-active-color: #17bbef;
-  --btn-bg-secondary-disabled-color: #f5f5f550;
-
-  --btn-radius: 30px;
-
-  --radius: 0em;
-
-  --brand-color-1: #17bbef;
-}
-
-:root[data-brand-theme='ankerWork'] {
-  --btn-bg-color: #00a7e1;
-  --btn-text-color: #fff;
-  --btn-bg-active-color: #606060;
-
-  --btn-radius: 0px;
-  --radius: 0em;
-
-  --brand-color-1: #00a7e1;
-}
-
-:root[data-brand-theme='ankerMake'] {
-  --btn-bg-color: #88f387;
-  --btn-text-color: #333333;
-  --btn-bg-active-color: #88f387;
-
-  --btn-radius: 9999px;
-  --radius: 0em;
-
-  --brand-color-1: #88f387;
-}
-
-.file\:ai-border-0::file-selector-button {
+.file\:border-0::file-selector-button {
   border-width: 0px;
 }
-
-.file\:ai-bg-transparent::file-selector-button {
+.file\:bg-transparent::file-selector-button {
   background-color: transparent;
 }
-
-.file\:ai-font-medium::file-selector-button {
+.file\:font-medium::file-selector-button {
   font-weight: 500;
 }
-
-.before\:\!ai-invisible::before {
+.before\:\!invisible::before {
   content: var(--tw-content);
   visibility: hidden !important;
 }
-
-.before\:ai-absolute::before {
+.before\:absolute::before {
   content: var(--tw-content);
   position: absolute;
 }
-
-.before\:ai-inset-y-0::before {
+.before\:inset-y-0::before {
   content: var(--tw-content);
   top: 0px;
   bottom: 0px;
 }
-
-.before\:-ai-z-\[1\]::before {
+.before\:-z-\[1\]::before {
   content: var(--tw-content);
   z-index: -1;
 }
-
-.before\:ai-w-full::before {
+.before\:w-full::before {
   content: var(--tw-content);
   width: 100%;
 }
-
-.before\:-ai-translate-x-full::before {
+.before\:-translate-x-full::before {
   content: var(--tw-content);
   --tw-translate-x: -100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-
-.before\:ai-rounded-btn::before {
+.before\:rounded-btn::before {
   content: var(--tw-content);
   border-radius: var(--btn-radius);
 }
-
-.before\:ai-bg-btn-primary-active::before {
+.before\:bg-btn-primary-active::before {
   content: var(--tw-content);
   background-color: var(--btn-bg-active-color);
 }
-
-.before\:ai-bg-btn-secondary-active::before {
+.before\:bg-btn-secondary-active::before {
   content: var(--tw-content);
   background-color: var(--btn-bg-secondary-active-color);
 }
-
-.before\:ai-transition-transform::before {
+.before\:transition-transform::before {
   content: var(--tw-content);
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-
-.before\:ai-duration-300::before {
+.before\:duration-300::before {
   content: var(--tw-content);
   transition-duration: 300ms;
 }
-
-.before\:ai-ease-in-out::before {
+.before\:ease-in-out::before {
   content: var(--tw-content);
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-
-.before\:ai-content-\[\"\"\]::before {
+.before\:content-\[\"\"\]::before {
   --tw-content: "";
   content: var(--tw-content);
 }
-
-.after\:\!ai-invisible::after {
+.after\:\!invisible::after {
   content: var(--tw-content);
   visibility: hidden !important;
 }
-
-.empty\:ai-block:empty {
+.empty\:block:empty {
   display: block;
 }
-
-.hover\:\!ai-bg-btn-primary:hover {
+.hover\:\!bg-btn-primary:hover {
   background-color: var(--btn-bg-color) !important;
 }
-
-.hover\:\!ai-bg-btn-secondary:hover {
+.hover\:\!bg-btn-secondary:hover {
   background-color: var(--btn-bg-secondary-color) !important;
 }
-
-.hover\:ai-bg-btn-primary:hover {
+.hover\:bg-btn-primary:hover {
   background-color: var(--btn-bg-color);
 }
-
-.hover\:ai-bg-btn-primary-active:hover {
+.hover\:bg-btn-primary-active:hover {
   background-color: var(--btn-bg-active-color);
 }
-
-.hover\:ai-bg-btn-secondary-active:hover {
+.hover\:bg-btn-secondary-active:hover {
   background-color: var(--btn-bg-secondary-active-color);
 }
-
-.hover\:ai-text-btn-primary-foreground:hover {
+.hover\:text-brand-0:hover {
+  color: var(--brand-color-0);
+}
+.hover\:text-btn-primary-foreground:hover {
   color: var(--btn-text-color);
 }
-
-.hover\:ai-text-btn-secondary:hover {
+.hover\:text-btn-secondary:hover {
   color: var(--btn-bg-secondary-color);
 }
-
-.hover\:ai-underline:hover {
+.hover\:underline:hover {
   text-decoration-line: underline;
 }
-
-.hover\:ai-opacity-100:hover {
+.hover\:opacity-100:hover {
   opacity: 1;
 }
-
-.hover\:before\:ai-translate-x-0:hover::before {
+.hover\:before\:translate-x-0:hover::before {
   content: var(--tw-content);
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-
-.focus\:ai-outline-none:focus {
+.focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-
-.focus\:ai-ring-2:focus {
+.focus\:ring-2:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
-.focus\:ai-ring-offset-2:focus {
+.focus\:ring-offset-2:focus {
   --tw-ring-offset-width: 2px;
 }
-
-.focus-visible\:ai-outline-none:focus-visible {
+.focus-visible\:outline-none:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-
-.focus-visible\:ai-ring-2:focus-visible {
+.focus-visible\:ring-2:focus-visible {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
-.focus-visible\:ai-ring-offset-2:focus-visible {
+.focus-visible\:ring-offset-2:focus-visible {
   --tw-ring-offset-width: 2px;
 }
-
-.disabled\:ai-pointer-events-none:disabled {
+.disabled\:pointer-events-none:disabled {
   pointer-events: none;
 }
-
-.disabled\:ai-cursor-not-allowed:disabled {
+.disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
-
-.disabled\:ai-bg-btn-primary-disabled:disabled {
+.disabled\:bg-btn-primary-disabled:disabled {
   background-color: var(--btn-bg-disabled-color);
 }
-
-.disabled\:ai-bg-btn-secondary-disabled:disabled {
+.disabled\:bg-btn-secondary-disabled:disabled {
   background-color: var(--btn-bg-secondary-disabled-color);
 }
-
-.disabled\:ai-text-btn-primary-disabled-foreground:disabled {
+.disabled\:text-btn-primary-disabled-foreground:disabled {
   color: var(--quaternary-color);
 }
-
-.disabled\:ai-text-btn-secondary-disabled-foreground:disabled {
+.disabled\:text-btn-secondary-disabled:disabled {
+  color: var(--btn-bg-secondary-disabled-color);
+}
+.disabled\:text-btn-secondary-disabled-foreground:disabled {
   color: var(--btn-border-secondary-border-color);
 }
-
-.disabled\:ai-opacity-50:disabled {
+.disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
-
-.data-\[state\=checked\]\:ai-bg-primary[data-state=checked] {
+.group:hover .group-hover\:border-lines-1 {
+  border-color: var(--line-color-1);
+}
+.group:hover .group-hover\:border-lines-2 {
+  border-color: var(--line-color-2);
+}
+.group:hover .group-hover\:border-lines-3 {
+  border-color: var(--dark-success-color-0);
+}
+.group:hover .group-hover\:border-lines-4 {
+  border-color: var(--dark-warning-color-0);
+}
+.group:hover .group-hover\:border-lines-5 {
+  border-color: var(--dark-error-color-0);
+}
+.data-\[disabled\]\:pointer-events-none[data-disabled] {
+  pointer-events: none;
+}
+.data-\[state\=active\]\:border-b-\[3px\][data-state="active"] {
+  border-bottom-width: 3px;
+}
+.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
   background-color: var(--brand-color-1);
 }
-
-.data-\[inline-skeleton\=true\]\:ai-leading-\[0\][data-inline-skeleton=true] {
+.data-\[inline-skeleton\=true\]\:leading-\[0\][data-inline-skeleton="true"] {
   line-height: 0;
 }
-
-.data-\[state\=checked\]\:ai-text-primary-foreground[data-state=checked] {
+.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
   color: var(--btn-text-color);
 }
-
-@media (min-width: 640px) {
-
-  .sm\:ai-flex-row {
+.data-\[disabled\]\:opacity-50[data-disabled] {
+  opacity: 0.5;
+}
+@media (min-width: var(--breakpoint-sm)) {
+  .tablet\:mx-8 {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+  .tablet\:flex-row {
     flex-direction: row;
   }
-
-  .sm\:ai-justify-end {
+  .tablet\:justify-end {
     justify-content: flex-end;
   }
-
-  .sm\:ai-space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  .tablet\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(0.5rem * var(--tw-space-x-reverse));
     margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
-
-  .sm\:ai-rounded-lg {
+  .tablet\:rounded-lg {
     border-radius: 0.5rem;
   }
-
-  .sm\:ai-text-left {
+  .tablet\:text-left {
     text-align: left;
   }
 }
-
-.\[\&\>\*\]\:\!ai-invisible>* {
+@media (min-width: var(--breakpoint-md)) {
+  .laptop\:-bottom-\[40px\] {
+    bottom: -40px;
+  }
+  .laptop\:bottom-\[40px\] {
+    bottom: 40px;
+  }
+  .laptop\:mx-16 {
+    margin-left: 4rem;
+    margin-right: 4rem;
+  }
+  .laptop\:w-\[30px\] {
+    width: 30px;
+  }
+  .laptop\:gap-4 {
+    gap: 1rem;
+  }
+}
+@media (min-width: var(--breakpoint-lg)) {
+  .desktop\:mx-16 {
+    margin-left: 4rem;
+    margin-right: 4rem;
+  }
+}
+@media (min-width: var(--breakpoint-xl)) {
+  .lg-desktop\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .lg-desktop\:p-6 {
+    padding: 1.5rem;
+  }
+  .lg-desktop\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+  .lg-desktop\:pb-\[32px\] {
+    padding-bottom: 32px;
+  }
+  .lg-desktop\:pt-\[32px\] {
+    padding-top: 32px;
+  }
+}
+.\[\&\>\*\]\:\!invisible>* {
   visibility: hidden !important;
 }
+.\[\&\>\:first-child\]\:absolute>:first-child {
+  position: absolute;
+}
+.\[\&\>svg\:first-child\+div\]\:translate-y-\[-3px\]>svg:first-child+div {
+  --tw-translate-y: -3px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.\[\&\>svg\:first-child\]\:left-4>svg:first-child {
+  left: 1rem;
+}
+.\[\&\>svg\:first-child\]\:top-2>svg:first-child {
+  top: 0.5rem;
+}
+.\[\&\>svg\:first-child\~\*\]\:pl-7>svg:first-child~* {
+  padding-left: 1.75rem;
+}
+.\[\&\>svg\]\:size-4>svg {
+  width: 1rem;
+  height: 1rem;
+}
+.\[\&\>svg\]\:shrink-0>svg {
+  flex-shrink: 0;
+}
+.\[\&_p\]\:leading-relaxed p {
+  line-height: 1.625;
+}
+.\[\&_svg\]\:pointer-events-none svg {
+  pointer-events: none;
+}
+.\[\&_svg\]\:size-4 svg {
+  width: 1rem;
+  height: 1rem;
+}
+.\[\&_svg\]\:shrink-0 svg {
+  flex-shrink: 0;
+}
+