diff --git a/packages/core/src/generator/index.ts b/packages/core/src/generator/index.ts
index 2cc1a40dd2..2d9ccd613e 100644
--- a/packages/core/src/generator/index.ts
+++ b/packages/core/src/generator/index.ts
@@ -564,9 +564,15 @@ export class UnoGenerator<Theme extends {} = {}> {
       return
 
     return [
-      (await Promise.all(result.map(
-        async r => (isString(r) ? (await this.expandShortcut(r, context, depth - 1))?.[0] : undefined) || [r],
-      ))).flat(1).filter(Boolean),
+      (await Promise.all(result.map(async r =>
+        (
+          isString(r)
+            ? (await this.expandShortcut(r, context, depth - 1))?.[0]
+            : undefined
+        ) || [r],
+      )))
+        .flat(1)
+        .filter(Boolean),
       meta,
     ]
   }
@@ -658,6 +664,7 @@ function applyScope(css: string, scope?: string) {
 }
 
 const attributifyRe = /^\[(.+?)(~?=)"(.*)"\]$/
+
 export function toEscapedSelector(raw: string) {
   if (attributifyRe.test(raw))
     return raw.replace(attributifyRe, (_, n, s, i) => `[${e(n)}${s}"${e(i)}"]`)
diff --git a/packages/preset-mini/src/_variants/default.ts b/packages/preset-mini/src/_variants/default.ts
index 34fa3f4b86..73a440b6d5 100644
--- a/packages/preset-mini/src/_variants/default.ts
+++ b/packages/preset-mini/src/_variants/default.ts
@@ -10,7 +10,7 @@ import { variantNegative } from './negative'
 import { variantImportant } from './important'
 import { variantCustomMedia, variantPrint } from './media'
 import { variantSupports } from './supports'
-import { partClasses, variantPseudoClassFunctions, variantPseudoClassesAndElements, variantTaggedPseudoClasses } from './pseudo'
+import { variantPartClasses, variantPseudoClassFunctions, variantPseudoClassesAndElements, variantTaggedPseudoClasses } from './pseudo'
 import { variantAria } from './aria'
 import { variantDataAttribute } from './data'
 import { variantContainerQuery } from './container'
@@ -35,7 +35,7 @@ export function variants(options: PresetMiniOptions): Variant<Theme>[] {
     variantPseudoClassFunctions(),
     ...variantTaggedPseudoClasses(options),
 
-    partClasses,
+    variantPartClasses,
     ...variantColorsMediaOrClass(options),
     ...variantLanguageDirections,
     variantScope,
diff --git a/packages/preset-mini/src/_variants/pseudo.test.ts b/packages/preset-mini/src/_variants/pseudo.test.ts
new file mode 100644
index 0000000000..c7af8a8489
--- /dev/null
+++ b/packages/preset-mini/src/_variants/pseudo.test.ts
@@ -0,0 +1,50 @@
+import { expect, test } from 'vitest'
+import { createGenerator } from '@unocss/core'
+import { variantPseudoClassesAndElements } from './pseudo'
+
+// https://github.com/unocss/unocss/issues/2713
+test('pseudo variant order', async () => {
+  const uno = createGenerator({
+    variants: [
+      variantPseudoClassesAndElements(),
+    ],
+    rules: [
+      [/^foo-(\d)$/, ([_, a]) => ({ text: `foo-${a}` })],
+    ],
+  })
+
+  const css = await uno.generate([
+    'foo-1',
+    'hover:foo-2',
+    'focus:foo-3',
+    'disabled:foo-4',
+  ]).then(r => r.css)
+
+  expect(css.indexOf('foo-1')).toBeLessThan(css.indexOf('foo-2'))
+  expect(css.indexOf('foo-2')).toBeLessThan(css.indexOf('foo-3'))
+  expect(css.indexOf('foo-3')).toBeLessThan(css.indexOf('foo-4'))
+  expect(css)
+    .toMatchInlineSnapshot(`
+      "/* layer: default */
+      .foo-1{text:foo-1;}
+      .hover\\\\:foo-2:hover{text:foo-2;}
+      .focus\\\\:foo-3:focus{text:foo-3;}
+      .disabled\\\\:foo-4:disabled{text:foo-4;}"
+    `)
+
+  const css2 = await uno.generate([
+    'foo-1',
+    'hover:foo-1',
+    'focus:foo-1',
+    'disabled:foo-1',
+  ]).then(r => r.css)
+
+  expect(css2)
+    .toMatchInlineSnapshot(`
+      "/* layer: default */
+      .foo-1{text:foo-1;}
+      .hover\\\\:foo-1:hover{text:foo-1;}
+      .focus\\\\:foo-1:focus{text:foo-1;}
+      .disabled\\\\:foo-1:disabled{text:foo-1;}"
+    `)
+})
diff --git a/packages/preset-mini/src/_variants/pseudo.ts b/packages/preset-mini/src/_variants/pseudo.ts
index afdeffcbfe..e425e23452 100644
--- a/packages/preset-mini/src/_variants/pseudo.ts
+++ b/packages/preset-mini/src/_variants/pseudo.ts
@@ -3,6 +3,11 @@ import { escapeRegExp, escapeSelector, warnOnce } from '@unocss/core'
 import type { PresetMiniOptions } from '..'
 import { handler as h, variantGetBracket } from '../_utils'
 
+/**
+ * Note: the order of following pseudo classes will affect the order of generated css.
+ *
+ * Reference: https://github.com/tailwindlabs/tailwindcss/blob/main/src/corePlugins.js#L83
+ */
 const PseudoClasses: Record<string, string> = Object.fromEntries([
   // pseudo elements part 1
   ['first-letter', '::first-letter'],
@@ -15,29 +20,32 @@ const PseudoClasses: Record<string, string> = Object.fromEntries([
   'target',
   ['open', '[open]'],
 
-  // user action
-  'hover',
-  'active',
-  'focus-visible',
-  'focus-within',
-  'focus',
-
-  // input
-  'autofill',
-  'enabled',
-  'disabled',
-  'read-only',
-  'read-write',
-  'placeholder-shown',
+  // forms
   'default',
   'checked',
   'indeterminate',
+  'placeholder-shown',
+  'autofill',
+  'optional',
+  'required',
   'valid',
   'invalid',
   'in-range',
   'out-of-range',
-  'required',
-  'optional',
+  'read-only',
+  'read-write',
+
+  // content
+  'empty',
+
+  // interactions
+  'focus-within',
+  'hover',
+  'focus',
+  'focus-visible',
+  'active',
+  'enabled',
+  'disabled',
 
   // tree-structural
   'root',
@@ -63,10 +71,14 @@ const PseudoClasses: Record<string, string> = Object.fromEntries([
   ['file', '::file-selector-button'],
 ].map(key => Array.isArray(key) ? key : [key, `:${key}`]))
 
+const PseudoClassesKeys = Object.keys(PseudoClasses)
+
 const PseudoClassesColon: Record<string, string> = Object.fromEntries([
   ['backdrop', '::backdrop'],
 ].map(key => Array.isArray(key) ? key : [key, `:${key}`]))
 
+const PseudoClassesColonKeys = Object.keys(PseudoClassesColon)
+
 const PseudoClassFunctions = [
   'not',
   'is',
@@ -78,22 +90,6 @@ const PseudoClassesStr = Object.entries(PseudoClasses).filter(([, pseudo]) => !p
 const PseudoClassesColonStr = Object.entries(PseudoClassesColon).filter(([, pseudo]) => !pseudo.startsWith('::')).map(([key]) => key).join('|')
 const PseudoClassFunctionsStr = PseudoClassFunctions.join('|')
 
-function pseudoModifier(pseudo: string) {
-  if (pseudo === 'focus') {
-    return {
-      sort: 10,
-      noMerge: true,
-    }
-  }
-
-  if (pseudo === 'active') {
-    return {
-      sort: 20,
-      noMerge: true,
-    }
-  }
-}
-
 function taggedPseudoClassMatcher(tag: string, parent: string, combinator: string): VariantObject {
   const rawRE = new RegExp(`^(${escapeRegExp(parent)}:)(\\S+)${escapeRegExp(combinator)}\\1`)
   let splitRE: RegExp
@@ -163,7 +159,7 @@ function taggedPseudoClassMatcher(tag: string, parent: string, combinator: strin
         handle: (input, next) => next({
           ...input,
           prefix: `${prefix}${combinator}${input.prefix}`.replace(rawRE, '$1$2:'),
-          ...pseudoModifier(pseudoName),
+          sort: PseudoClassesKeys.indexOf(pseudoName) ?? PseudoClassesColonKeys.indexOf(pseudoName),
         }),
       }
     },
@@ -183,6 +179,7 @@ const excludedPseudo = [
 ]
 const PseudoClassesAndElementsStr = Object.entries(PseudoClasses).map(([key]) => key).join('|')
 const PseudoClassesAndElementsColonStr = Object.entries(PseudoClassesColon).map(([key]) => key).join('|')
+
 export function variantPseudoClassesAndElements(): VariantObject {
   let PseudoClassesAndElementsRE: RegExp
   let PseudoClassesAndElementsColonRE: RegExp
@@ -197,6 +194,14 @@ export function variantPseudoClassesAndElements(): VariantObject {
       const match = input.match(PseudoClassesAndElementsRE) || input.match(PseudoClassesAndElementsColonRE)
       if (match) {
         const pseudo = PseudoClasses[match[1]] || PseudoClassesColon[match[1]] || `:${match[1]}`
+
+        // order of pseudo classes
+        let index: number | undefined = PseudoClassesKeys.indexOf(match[1])
+        if (index === -1)
+          index = PseudoClassesColonKeys.indexOf(match[1])
+        if (index === -1)
+          index = undefined
+
         return {
           matcher: input.slice(match[0].length),
           handle: (input, next) => {
@@ -211,7 +216,8 @@ export function variantPseudoClassesAndElements(): VariantObject {
             return next({
               ...input,
               ...selectors,
-              ...pseudoModifier(match[1]),
+              sort: index,
+              noMerge: true,
             })
           },
         }
@@ -259,7 +265,8 @@ export function variantTaggedPseudoClasses(options: PresetMiniOptions = {}): Var
 }
 
 const PartClassesRE = /(part-\[(.+)]:)(.+)/
-export const partClasses: VariantObject = {
+
+export const variantPartClasses: VariantObject = {
   match(input) {
     const match = input.match(PartClassesRE)
     if (match) {
diff --git a/packages/svelte-scoped/src/_preprocess/transformApply/getUtils.test.ts b/packages/svelte-scoped/src/_preprocess/transformApply/getUtils.test.ts
index 179a3037ae..ae94a3e6b8 100644
--- a/packages/svelte-scoped/src/_preprocess/transformApply/getUtils.test.ts
+++ b/packages/svelte-scoped/src/_preprocess/transformApply/getUtils.test.ts
@@ -47,10 +47,10 @@ describe('getUtils', async () => {
           undefined,
           {
             "layer": undefined,
-            "sort": undefined,
+            "sort": 22,
           },
           undefined,
-          undefined,
+          true,
         ],
       ]
     `)
@@ -70,10 +70,10 @@ describe('getUtils', async () => {
           undefined,
           {
             "layer": undefined,
-            "sort": undefined,
+            "sort": 22,
           },
           undefined,
-          undefined,
+          true,
         ],
       ]
     `)
diff --git a/packages/svelte-scoped/src/_preprocess/transformClasses/index.test.ts b/packages/svelte-scoped/src/_preprocess/transformClasses/index.test.ts
index e69983f6a0..697cc957a2 100644
--- a/packages/svelte-scoped/src/_preprocess/transformClasses/index.test.ts
+++ b/packages/svelte-scoped/src/_preprocess/transformClasses/index.test.ts
@@ -383,8 +383,8 @@ describe('transform', () => {
   <Button class="hover:text-red text-sm" />
 </div>
     `.trim()
-    expect(await transform(code)).toMatchFileSnapshot('./test-outputs/EverythingProd.svelte')
-    expect(await transform(code, { combine: false })).toMatchFileSnapshot('./test-outputs/EverythingDev.svelte')
+    await expect(await transform(code)).toMatchFileSnapshot('./test-outputs/EverythingProd.svelte')
+    await expect(await transform(code, { combine: false })).toMatchFileSnapshot('./test-outputs/EverythingDev.svelte')
   })
 
   // BUG: When this plugin is run on a component library first, and then in a project second, make sure to use different hashing prefixes because when `uno.parseToken()` checks a previously hashed class like `.uno-ssrvwc` it will add it to uno's cache of non-matches, then when `uno.generate()` runs it will not output the result of that shortcut. I don't know the proper solution to this and I don't think clearing uno's cache of non-matches is right. To see this bug run the following test:
diff --git a/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingDev.svelte b/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingDev.svelte
index 8a2dcb512f..46ecf47d7f 100644
--- a/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingDev.svelte
+++ b/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingDev.svelte
@@ -72,14 +72,14 @@
     font-size: 0.875rem;
     line-height: 1.25rem;
   }
-  :global(._hover\:text-red_7dkb0w:hover) {
-    --un-text-opacity: 1;
-    color: rgba(248, 113, 113, var(--un-text-opacity));
-  }
   :global(._text-orange-400_7dkb0w) {
     --un-text-opacity: 1;
     color: rgba(251, 146, 60, var(--un-text-opacity));
   }
+  :global(._hover\:text-red_7dkb0w:hover) {
+    --un-text-opacity: 1;
+    color: rgba(248, 113, 113, var(--un-text-opacity));
+  }
   @media (min-width: 640px) {
     :global(._sm\:text-left_7dkb0w) {
       text-align: left;
diff --git a/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingProd.svelte b/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingProd.svelte
index 4462debd5c..ea3188979b 100644
--- a/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingProd.svelte
+++ b/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingProd.svelte
@@ -53,13 +53,17 @@
     font-size: 0.875rem;
     line-height: 1.25rem;
   }
-  :global(.uno-deus5r:hover, .uno-wt89uz:hover) {
+  :global(.uno-y37ej3) {
+    --un-text-opacity: 1;
+    color: rgba(251, 146, 60, var(--un-text-opacity));
+  }
+  :global(.uno-deus5r:hover) {
     --un-text-opacity: 1;
     color: rgba(248, 113, 113, var(--un-text-opacity));
   }
-  :global(.uno-y37ej3) {
+  :global(.uno-wt89uz:hover) {
     --un-text-opacity: 1;
-    color: rgba(251, 146, 60, var(--un-text-opacity));
+    color: rgba(248, 113, 113, var(--un-text-opacity));
   }
   @media (min-width: 640px) {
     :global(.uno-rdvmaz) {
diff --git a/test/__snapshots__/order.test.ts.snap b/test/__snapshots__/order.test.ts.snap
index 3dc25390c6..d0dc46b274 100644
--- a/test/__snapshots__/order.test.ts.snap
+++ b/test/__snapshots__/order.test.ts.snap
@@ -20,8 +20,8 @@ exports[`order > multiple variant sorting 1`] = `
 
 exports[`order > pseudo-elements sorting 1`] = `
 "/* layer: default */
-.dark .dark\\\\:file\\\\:marker\\\\:hover\\\\:bg-red-600:hover::file-selector-button::marker,
-.dark .dark\\\\:hover\\\\:file\\\\:marker\\\\:bg-red-600::file-selector-button:hover::marker{--un-bg-opacity:1;background-color:rgba(220,38,38,var(--un-bg-opacity));}"
+.dark .dark\\\\:hover\\\\:file\\\\:marker\\\\:bg-red-600::file-selector-button:hover::marker{--un-bg-opacity:1;background-color:rgba(220,38,38,var(--un-bg-opacity));}
+.dark .dark\\\\:file\\\\:marker\\\\:hover\\\\:bg-red-600:hover::file-selector-button::marker{--un-bg-opacity:1;background-color:rgba(220,38,38,var(--un-bg-opacity));}"
 `;
 
 exports[`order > variant ordering 1`] = `
diff --git a/test/__snapshots__/prefix.test.ts.snap b/test/__snapshots__/prefix.test.ts.snap
index a4a57b28e2..97476fbacf 100644
--- a/test/__snapshots__/prefix.test.ts.snap
+++ b/test/__snapshots__/prefix.test.ts.snap
@@ -49,7 +49,7 @@ exports[`prefix > multiple preset prefix 1`] = `
 exports[`prefix > preset prefix 1`] = `
 "/* layer: default */
 .h-container{width:100%;}
-.dark .dark\\\\:children\\\\:hover\\\\:h-space-x-4:hover>*>:not([hidden])~:not([hidden]),
+.dark .dark\\\\:children\\\\:hover\\\\:h-space-x-4:hover>*>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(1rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(1rem * var(--un-space-x-reverse));}
 .dark .dark\\\\:hover\\\\:children\\\\:h-space-x-4>*:hover>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(1rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(1rem * var(--un-space-x-reverse));}
 .dark .dark\\\\:hover\\\\:children\\\\:h-divide-x>*:hover>:not([hidden])~:not([hidden]){--un-divide-x-reverse:0;border-left-width:calc(1px * calc(1 - var(--un-divide-x-reverse)));border-right-width:calc(1px * var(--un-divide-x-reverse));}
 .hover\\\\:h-p4:hover{padding:1rem;}
diff --git a/test/__snapshots__/scope.test.ts.snap b/test/__snapshots__/scope.test.ts.snap
index 87018cec36..8dff79a544 100644
--- a/test/__snapshots__/scope.test.ts.snap
+++ b/test/__snapshots__/scope.test.ts.snap
@@ -8,8 +8,8 @@ exports[`scope 1`] = `
 .foo-scope .hover\\\\:p-4:hover{padding:1rem;}
 .foo-scope .\\\\!hover\\\\:px-10:hover{padding-left:2.5rem !important;padding-right:2.5rem !important;}
 .foo-scope .pl-10px{padding-left:10px;}
-.dark .foo-scope .dark\\\\:hover\\\\:text-xl:hover,
 .dark .foo-scope .dark\\\\:text-xl{font-size:1.25rem;line-height:1.75rem;}
+.dark .foo-scope .dark\\\\:hover\\\\:text-xl:hover{font-size:1.25rem;line-height:1.75rem;}
 .variant .foo-scope .scope-\\\\[\\\\.variant\\\\]\\\\:c-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
 @media (min-width: 640px){
 .foo-scope .sm\\\\:text-red-100{--un-text-opacity:1;color:rgba(254,226,226,var(--un-text-opacity));}
diff --git a/test/assets/output/preset-mini-targets.css b/test/assets/output/preset-mini-targets.css
index 50da17a977..5664a19ca5 100644
--- a/test/assets/output/preset-mini-targets.css
+++ b/test/assets/output/preset-mini-targets.css
@@ -24,13 +24,10 @@
 .sibling-\[div\:hover\]-\[combinator\:test-4\]+div:hover{combinator:test-4;}
 .-p-px{padding:-1px;}
 .\!p-5px{padding:5px !important;}
-.first\:p-2:first-child,
 .has-hover\:p-2:has(:hover),
 .p-2,
 .p2,
 .where-hover\:p-2:where(:hover){padding:0.5rem;}
-.hover\:\!p-1:hover{padding:0.25rem !important;}
-.hover\:p-5:hover{padding:1.25rem;}
 .important\:p-3,
 .p3\!{padding:0.75rem !important;}
 .is-hover\:p-4px:is(:hover),
@@ -39,13 +36,16 @@
 .p-none{padding:0;}
 .p-unset{padding:unset;}
 .pa{padding:auto;}
-.group:focus .group-focus\:p-4{padding:1rem;}
+.hover\:\!p-1:hover{padding:0.25rem !important;}
+.hover\:p-5:hover{padding:1.25rem;}
 .p-xy,
-.pxy{padding:1rem;}
-.\!hover\:px-10:hover{padding-left:2.5rem !important;padding-right:2.5rem !important;}
+.pxy,
+.group:focus .group-focus\:p-4{padding:1rem;}
+.first\:p-2:first-child{padding:0.5rem;}
 .p-x,
 .px{padding-left:1rem;padding-right:1rem;}
 .px-1{padding-left:0.25rem;padding-right:0.25rem;}
+.\!hover\:px-10:hover{padding-left:2.5rem !important;padding-right:2.5rem !important;}
 .p-t-2,
 .pt-2,
 .pt2{padding-top:0.5rem;}
@@ -113,10 +113,10 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .contents{display:contents;}
 .display-\$var{display:var(--var);}
 .display-inherit{display:inherit;}
-.disabled\:op50:disabled{opacity:0.5;}
 .op-10{opacity:0.1;}
 .opacity-\$opa{opacity:var(--opa);}
 .opacity-0{opacity:0;}
+.disabled\:op50:disabled{opacity:0.5;}
 .placeholder-opacity-60::placeholder{opacity:0.6;}
 .\[\&\[data-active\=\"true\"\]\]\:bg-red[data-active="true"]{--un-bg-opacity:1;background-color:rgba(248,113,113,var(--un-bg-opacity));}
 .bg-\[--test-variable\],
@@ -133,18 +133,18 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .bg-teal-300\:\[\.55\]{background-color:rgba(94,234,212,.55);}
 .bg-teal-400\/\[\.55\]{background-color:rgba(45,212,191,.55);}
 .bg-teal-500\/\[55\%\]{background-color:rgba(20,184,166,55%);}
-.file\:bg-violet-50::file-selector-button{--un-bg-opacity:1;background-color:rgba(245,243,255,var(--un-bg-opacity));}
-.first-letter\:bg-green-400::first-letter,
+.first-letter\:bg-green-400::first-letter{--un-bg-opacity:1;background-color:rgba(74,222,128,var(--un-bg-opacity));}
 .first-line\:bg-green-400::first-line{--un-bg-opacity:1;background-color:rgba(74,222,128,var(--un-bg-opacity));}
-.focus-within\:has-first\:checked\:bg-gray\/20:checked:has(:first-child):focus-within,
+.peer:checked~.peer-checked\:bg-blue-500{--un-bg-opacity:1;background-color:rgba(59,130,246,var(--un-bg-opacity));}
+.previous\/label:checked+.previous-checked\/label\:bg-red-500{--un-bg-opacity:1;background-color:rgba(239,68,68,var(--un-bg-opacity));}
+.focus-within\:has-first\:checked\:bg-gray\/20:checked:has(:first-child):focus-within{background-color:rgba(156,163,175,0.2);}
 .focus-within\:where-first\:checked\:bg-gray\/20:checked:where(:first-child):focus-within{background-color:rgba(156,163,175,0.2);}
 .hover\:file\:bg-violet-100::file-selector-button:hover{--un-bg-opacity:1;background-color:rgba(237,233,254,var(--un-bg-opacity));}
-.hover\:is-first\:checked\:bg-true-gray\/10:checked:is(:first-child):hover,
-.hover\:not-first\:checked\:bg-true-gray\/10:checked:not(:first-child):hover{background-color:rgba(163,163,163,0.1);}
+.hover\:is-first\:checked\:bg-true-gray\/10:checked:is(:first-child):hover{background-color:rgba(163,163,163,0.1);}
 .hover\:not-first\:checked\:bg-red\/10:checked:not(:first-child):hover{background-color:rgba(248,113,113,0.1);}
+.hover\:not-first\:checked\:bg-true-gray\/10:checked:not(:first-child):hover{background-color:rgba(163,163,163,0.1);}
 .marker\:bg-violet-200::marker{--un-bg-opacity:1;background-color:rgba(221,214,254,var(--un-bg-opacity));}
-.peer:checked~.peer-checked\:bg-blue-500{--un-bg-opacity:1;background-color:rgba(59,130,246,var(--un-bg-opacity));}
-.previous\/label:checked+.previous-checked\/label\:bg-red-500{--un-bg-opacity:1;background-color:rgba(239,68,68,var(--un-bg-opacity));}
+.file\:bg-violet-50::file-selector-button{--un-bg-opacity:1;background-color:rgba(245,243,255,var(--un-bg-opacity));}
 .bg-opacity-\[--opacity-variable\],
 .bg-opacity-\$opacity-variable{--un-bg-opacity:var(--opacity-variable);}
 .bg-opacity-45{--un-bg-opacity:0.45;}
@@ -291,28 +291,22 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .content-visibility-hidden{content-visibility:hidden;}
 .content-visibility-auto{content-visibility:auto;}
 .content-visibility-unset{content-visibility:unset;}
-.after\:content-\[quoted\:unocss\]::after,
-.content-\[quoted\:unocss\]{content:"unocss";}
-.before\:\[\&\[data-active\=\'true\'\]\]\:content-\[\'test\'\][data-active='true']::before{content:'test';}
 .content-\[\'quoted_with_space\'\]{content:'quoted with space';}
 .content-\[\'quoted1\'\]{content:'quoted1';}
 .content-\[\"quoted2\"\]{content:"quoted2";}
 .content-\[normal\]{content:normal;}
 .content-\[quoted\:\!\]{content:"!";}
+.content-\[quoted\:unocss\]{content:"unocss";}
 .content-\[string\:attr\(dashed-attr\)\]{content:attr(dashed-attr);}
 .content-\[string\:attr\(underlined\\_attr\)\]{content:attr(underlined_attr);}
 .content-\$unocss-var{content:var(--unocss-var);}
+.before\:\[\&\[data-active\=\'true\'\]\]\:content-\[\'test\'\][data-active='true']::before{content:'test';}
+.after\:content-\[quoted\:unocss\]::after{content:"unocss";}
 .content-empty{content:"";}
 .content-none{content:none;}
 .font-\[system-ui\]{font-family:system-ui;}
 .font-\$font-name{font-family:var(--font-name);}
 .font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
-.group:has(:placeholder-shown) .group-has-placeholder-shown\:text-4xl,
-.group:where(:placeholder-shown) .group-where-placeholder-shown\:text-4xl,
-.text-4xl{font-size:2.25rem;line-height:2.5rem;}
-.peer:is(:placeholder-shown)~.peer-is-placeholder-shown\:text-3xl,
-.peer:not(:placeholder-shown)~.peer-not-placeholder-shown\:text-3xl{font-size:1.875rem;line-height:2.25rem;}
-.peer:not(:placeholder-shown)~.peer-not-placeholder-shown\:text-2xl{font-size:1.5rem;line-height:2rem;}
 .text-\[100px\]{font-size:100px;}
 .text-\[11px\]\/4{font-size:11px;line-height:1rem;}
 .text-\[12px\]\/\[13px\]{font-size:12px;line-height:13px;}
@@ -325,13 +319,25 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .text-\[length\:calc\(1em-1px\)\]{font-size:calc(1em - 1px);}
 .text-\[length\:var\(--size\)\]{font-size:var(--size);}
 .text-\[length\:var\(--size\)\]\:\$leading{font-size:var(--size);line-height:var(--leading);}
+.text-4xl,
+.group:has(:placeholder-shown) .group-has-placeholder-shown\:text-4xl,
+.group:where(:placeholder-shown) .group-where-placeholder-shown\:text-4xl{font-size:2.25rem;line-height:2.5rem;}
 .text-base{font-size:1rem;line-height:1.5rem;}
 .text-lg{font-size:1.125rem;line-height:1.75rem;}
 .text-sm\/\[10px\]{font-size:0.875rem;line-height:10px;}
 .text-sm\/3{font-size:0.875rem;line-height:0.75rem;}
+.peer:is(:placeholder-shown)~.peer-is-placeholder-shown\:text-3xl,
+.peer:not(:placeholder-shown)~.peer-not-placeholder-shown\:text-3xl{font-size:1.875rem;line-height:2.25rem;}
+.peer:not(:placeholder-shown)~.peer-not-placeholder-shown\:text-2xl{font-size:1.5rem;line-height:2rem;}
 .text-size-unset{font-size:unset;}
 .as-parent .group .group-\[\.as-parent_\&\]\:font-13{font-weight:13;}
 .as-parent .group\/label .group-\[\.as-parent_\&\]\/label\:font-18{font-weight:18;}
+.group:hover .group-\[\:hover\]\:font-11{font-weight:11;}
+.group.not-parent .group-\[\.not-parent\]\:font-14{font-weight:14;}
+.group[data-attr] .group-\[\[data-attr\]\]\:font-12{font-weight:12;}
+.group\/label:hover .group-\[\:hover\]\/label\:font-16{font-weight:16;}
+.group\/label.not-parent .group-\[\.not-parent\]\/label\:font-19{font-weight:19;}
+.group\/label[data-attr] .group-\[\[data-attr\]\]\/label\:font-17{font-weight:17;}
 .font-\[550\]{font-weight:550;}
 .font-050,
 .font-50,
@@ -341,14 +347,8 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .fw-900{font-weight:900;}
 .font-inherit{font-weight:inherit;}
 .font-thin{font-weight:100;}
-.group:hover .group-\[\:hover\]\:font-11{font-weight:11;}
 .group:hover .group-hover\:font-10{font-weight:10;}
-.group.not-parent .group-\[\.not-parent\]\:font-14{font-weight:14;}
-.group[data-attr] .group-\[\[data-attr\]\]\:font-12{font-weight:12;}
-.group\/label:hover .group-\[\:hover\]\/label\:font-16{font-weight:16;}
 .group\/label:hover .group-hover\/label\:font-15{font-weight:15;}
-.group\/label.not-parent .group-\[\.not-parent\]\/label\:font-19{font-weight:19;}
-.group\/label[data-attr] .group-\[\[data-attr\]\]\/label\:font-17{font-weight:17;}
 .font-leading-2,
 .leading-2{line-height:0.5rem;}
 .leading-\$variable,
@@ -419,8 +419,8 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .case-upper{text-transform:uppercase;}
 .case-normal{text-transform:none;}
 .case-inherit{text-transform:inherit;}
+.group:hover:focus .group-hover\:group-focus\:text-center,
 .parent:hover>.parent-hover\:text-center{text-align:center;}
-.group:hover:focus .group-hover\:group-focus\:text-center{text-align:center;}
 .text-left,
 [dir="ltr"] .ltr\:text-left{text-align:left;}
 [dir="rtl"] .rtl\:text-right{text-align:right;}
@@ -468,19 +468,13 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .color-blue-gray\/10,
 .color-bluegray-400\/10,
 .color-bluegray\/10{color:rgba(148,163,184,0.1);}
-.in-range\:color-pink-100:in-range,
-.open\:color-pink-100[open],
+.open\:color-pink-100[open]{--un-text-opacity:1;color:rgba(252,231,243,var(--un-text-opacity));}
+.placeholder-shown-color-transparent:placeholder-shown{color:transparent;}
+.in-range\:color-pink-100:in-range{--un-text-opacity:1;color:rgba(252,231,243,var(--un-text-opacity));}
 .out-of-range\:color-pink-100:out-of-range{--un-text-opacity:1;color:rgba(252,231,243,var(--un-text-opacity));}
-.placeholder-color-red-1::placeholder,
-.text-red-100,
-.text-red100{--un-text-opacity:1;color:rgba(254,226,226,var(--un-text-opacity));}
-.placeholder-shown-color-transparent:placeholder-shown,
+.placeholder-color-red-1::placeholder{--un-text-opacity:1;color:rgba(254,226,226,var(--un-text-opacity));}
 .placeholder\:color-transparent::placeholder{color:transparent;}
 .selection\:color-\[var\(--select-color\)\]::selection{color:var(--select-color);}
-.checked\:next\:hover\:text-slate-500:hover+*:checked{--un-text-opacity:1;color:rgba(100,116,139,var(--un-text-opacity));}
-.checked\:next\:text-slate-100+*:checked{--un-text-opacity:1;color:rgba(241,245,249,var(--un-text-opacity));}
-.next\:checked\:children\:text-slate-600>*:checked+*{--un-text-opacity:1;color:rgba(71,85,105,var(--un-text-opacity));}
-.next\:checked\:text-slate-200:checked+*{--un-text-opacity:1;color:rgba(226,232,240,var(--un-text-opacity));}
 .text-\[--variable\],
 .text-\[color\:--variable\],
 .text-\$variable{color:var(--variable);}
@@ -490,25 +484,30 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .text-\[color\:var\(--color\)\],
 .text-\[var\(--color\)\]{color:var(--color);}
 .text-black\/10{color:rgba(0,0,0,0.1);}
+.text-red-100,
+.text-red100{--un-text-opacity:1;color:rgba(254,226,226,var(--un-text-opacity));}
 .text-red-200\/10{color:rgba(254,202,202,0.1);}
 .text-red-300\:20,
 .text-red-300\/20{color:rgba(252,165,165,0.2);}
 .text-red\:20{color:rgba(248,113,113,0.2);}
 .text-red2{--un-text-opacity:1;color:rgba(254,202,202,var(--un-text-opacity));}
 .text-rose{--un-text-opacity:1;color:rgba(251,113,133,var(--un-text-opacity));}
+.checked\:next\:hover\:text-slate-500:hover+*:checked{--un-text-opacity:1;color:rgba(100,116,139,var(--un-text-opacity));}
+.checked\:next\:text-slate-100+*:checked{--un-text-opacity:1;color:rgba(241,245,249,var(--un-text-opacity));}
+.next\:checked\:children\:text-slate-600>*:checked+*{--un-text-opacity:1;color:rgba(71,85,105,var(--un-text-opacity));}
+.next\:checked\:text-slate-200:checked+*{--un-text-opacity:1;color:rgba(226,232,240,var(--un-text-opacity));}
 .color-inherit,
 .text-inherit{color:inherit;}
 .color-initial{color:initial;}
 .text-revert{color:revert;}
-.placeholder-color-opacity-60::placeholder{--un-text-opacity:0.6;}
 .text-opacity-\[13\.3333333\%\]{--un-text-opacity:13.3333333%;}
 .text-opacity-\$opacity-variable{--un-text-opacity:var(--opacity-variable);}
+.placeholder-color-opacity-60::placeholder{--un-text-opacity:0.6;}
 .font-italic,
 .italic{font-style:italic;}
 .font-oblique,
 .oblique{font-style:oblique;}
 .antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale;}
-.backdrop-element\:shadow-green-100::backdrop{--un-shadow-opacity:1;--un-shadow-color:rgba(220,252,231,var(--un-shadow-opacity));}
 .backdrop\:shadow-green::backdrop{--un-shadow-opacity:1;--un-shadow-color:rgba(74,222,128,var(--un-shadow-opacity));}
 .shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgba(0,0,0,0.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgba(0,0,0,0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
 .shadow-\[\#fff\]{--un-shadow-opacity:1;--un-shadow-color:rgba(255,255,255,var(--un-shadow-opacity));}
@@ -520,6 +519,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .shadow-none{--un-shadow:0 0 var(--un-shadow-color, rgba(0,0,0,0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
 .shadow-transparent{--un-shadow-color:transparent;}
 .shadow-xl{--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgba(0,0,0,0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgba(0,0,0,0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.backdrop-element\:shadow-green-100::backdrop{--un-shadow-opacity:1;--un-shadow-color:rgba(220,252,231,var(--un-shadow-opacity));}
 .shadow-op-\$opacity-variable{--un-shadow-opacity:var(--opacity-variable);}
 .shadow-op-50{--un-shadow-opacity:0.5;}
 .shadow-inset{--un-shadow-inset:inset;}
@@ -900,13 +900,13 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .translate-full{--un-translate-x:100%;--un-translate-y:100%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .-translate-x-full{--un-translate-x:-100%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .-translate-y-1\/2{--un-translate-y:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
-.before\:translate-y-full::before{--un-translate-y:100%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
-.hover\:translate-x-3:hover{--un-translate-x:0.75rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
-.peer:checked~.peer-checked\:translate-x-\[var\(--reveal\)\]{--un-translate-x:var(--reveal);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .translate-x-\$variable{--un-translate-x:var(--variable);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .translate-x-full{--un-translate-x:100%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .translate-y-1\/4{--un-translate-y:25%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .translate-y-px{--un-translate-y:1px;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+.peer:checked~.peer-checked\:translate-x-\[var\(--reveal\)\]{--un-translate-x:var(--reveal);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+.hover\:translate-x-3:hover{--un-translate-x:0.75rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+.before\:translate-y-full::before{--un-translate-y:100%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .-rotate-2{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:-2deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .rotate-\[var\(--spin\)\]{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:var(--spin);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .rotate-\$variable{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:var(--variable);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
@@ -932,8 +932,8 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .skew-y-10deg{--un-skew-y:10deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .skew-y-2grad{--un-skew-y:2grad;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .skew-y-3\.14rad{--un-skew-y:3.14rad;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
-.hover\:scale-4:hover{--un-scale-x:0.04;--un-scale-y:0.04;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .scale-\$variable{--un-scale-x:var(--variable);--un-scale-y:var(--variable);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+.hover\:scale-4:hover{--un-scale-x:0.04;--un-scale-y:0.04;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .active\:scale-4:active{--un-scale-x:0.04;--un-scale-y:0.04;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .-scale-x-full{--un-scale-x:-100%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .scale-x-\$variable{--un-scale-x:var(--variable);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
diff --git a/test/assets/output/preset-uno-targets.css b/test/assets/output/preset-uno-targets.css
index 43a45cb332..8e99462427 100644
--- a/test/assets/output/preset-uno-targets.css
+++ b/test/assets/output/preset-uno-targets.css
@@ -20,10 +20,10 @@
 .mix-shift-50-c-red-600{--un-text-opacity:1;color:rgba(calc(220 + (0 - 220) * 50 / 100),calc(38 + (0 - 38) * 50 / 100),calc(38 + (0 - 38) * 50 / 100),calc(var(--un-text-opacity) + (1 - var(--un-text-opacity)) * 50 / 100));}
 .mix-tint-50-c-red-400{--un-text-opacity:1;color:rgba(calc(248 + (255 - 248) * 50 / 100),calc(113 + (255 - 113) * 50 / 100),calc(113 + (255 - 113) * 50 / 100),calc(var(--un-text-opacity) + (1 - var(--un-text-opacity)) * 50 / 100));}
 .text-custom-a{color:var(--custom);}
+.focus\:placeholder-red-300:focus::placeholder{--un-placeholder-opacity:1;color:rgba(252,165,165,var(--un-placeholder-opacity));}
 .placeholder-inherit::placeholder{color:inherit;}
 .placeholder-red-400::placeholder{--un-placeholder-opacity:1;color:rgba(248,113,113,var(--un-placeholder-opacity));}
-.focus\:placeholder-red-300:focus::placeholder{--un-placeholder-opacity:1;color:rgba(252,165,165,var(--un-placeholder-opacity));}
-.hover\:placeholder-op90:hover::placeholder,
+.hover\:placeholder-op90:hover::placeholder{--un-placeholder-opacity:0.9;}
 .placeholder-op90::placeholder{--un-placeholder-opacity:0.9;}
 .placeholder-opacity-10::placeholder{--un-placeholder-opacity:0.1;}
 @media (hover: none) and (pointer: coarse){
diff --git a/test/assets/output/runtime-preset-tagify.css b/test/assets/output/runtime-preset-tagify.css
index adf5455f43..8f1b484bbf 100644
--- a/test/assets/output/runtime-preset-tagify.css
+++ b/test/assets/output/runtime-preset-tagify.css
@@ -3,7 +3,7 @@ m-1{margin:0.25rem;}
 flex{display:flex;}
 scale-2{--un-scale-x:0.02;--un-scale-y:0.02;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .p2{padding:0.5rem;}
-hover\:color-red:hover,
-text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
+hover\:color-red:hover{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
 text-green5\:10{color:rgba(34,197,94,0.1);}
+text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
 shadow-xl{--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgba(0,0,0,0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgba(0,0,0,0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
\ No newline at end of file
diff --git a/test/assets/output/shortcuts-nested-pseudo.css b/test/assets/output/shortcuts-nested-pseudo.css
index 65018653a5..f78bc8afe7 100644
--- a/test/assets/output/shortcuts-nested-pseudo.css
+++ b/test/assets/output/shortcuts-nested-pseudo.css
@@ -1,11 +1,11 @@
 /* layer: shortcuts */
+.hover\:btn3:focus:hover{border-width:1px;}
 .btn3:focus{border-width:1px;}
 .focus\:btn3:focus:focus{border-width:1px;}
 .focus\:hover\:btn3:focus:hover:focus{border-width:1px;}
-.hover\:btn3:focus:hover{border-width:1px;}
-.btn3,
+.btn3{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(154,52,18,var(--un-text-opacity));}
+.btn3:hover{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(21,94,117,var(--un-text-opacity));text-decoration-line:underline;}
 .hover\:btn3:hover{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(154,52,18,var(--un-text-opacity));}
-.btn3:hover,
 .hover\:btn3:hover:hover{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(21,94,117,var(--un-text-opacity));text-decoration-line:underline;}
 .focus\:btn3:focus{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(154,52,18,var(--un-text-opacity));}
 .focus\:btn3:hover:focus{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(21,94,117,var(--un-text-opacity));text-decoration-line:underline;}
diff --git a/test/cases/preset-attributify/case-1/output.css b/test/cases/preset-attributify/case-1/output.css
index d033927353..004c7db701 100644
--- a/test/cases/preset-attributify/case-1/output.css
+++ b/test/cases/preset-attributify/case-1/output.css
@@ -29,10 +29,10 @@
 [rounded-sm=""]{border-radius:0.125rem;}
 [border~="x-style-dashed"]{border-left-style:dashed;border-right-style:dashed;}
 .dark [bg~="dark\:\!blue-500"]{--un-bg-opacity:1 !important;background-color:rgba(59,130,246,var(--un-bg-opacity)) !important;}
-.dark [bg~="dark\:hover\:blue-600"]:hover{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));}
 [bg~="blue-400"]{--un-bg-opacity:1;background-color:rgba(96,165,250,var(--un-bg-opacity));}
-[bg~="hover\:blue-500"]:hover{--un-bg-opacity:1;background-color:rgba(59,130,246,var(--un-bg-opacity));}
 [important~="bg-red"]{--un-bg-opacity:1 !important;background-color:rgba(248,113,113,var(--un-bg-opacity)) !important;}
+.dark [bg~="dark\:hover\:blue-600"]:hover{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));}
+[bg~="hover\:blue-500"]:hover{--un-bg-opacity:1;background-color:rgba(59,130,246,var(--un-bg-opacity));}
 [p~="x-4"]{padding-left:1rem;padding-right:1rem;}
 [p~="y-2"]{padding-top:0.5rem;padding-bottom:0.5rem;}
 [p~="t-2"],
diff --git a/test/cases/preset-attributify/case-2/output.css b/test/cases/preset-attributify/case-2/output.css
index 345b9d67fc..388d3db246 100644
--- a/test/cases/preset-attributify/case-2/output.css
+++ b/test/cases/preset-attributify/case-2/output.css
@@ -15,11 +15,11 @@
 [flex=""]{display:flex;}
 [inline-flex=""]{display:inline-flex;}
 [flex-col=""]{flex-direction:column;}
-[peer=""]:not(:placeholder-shown)~[peer-not-placeholder-shown~="origin-top-left"]{transform-origin:top left;}
+[peer=""]:not(:placeholder-shown)~[peer-not-placeholder-shown~="origin-top-left"],
 [peer=""]:focus~[peer-focus~="origin-top-left"]{transform-origin:top left;}
-[peer=""]:not(:placeholder-shown)~[peer-not-placeholder-shown~="-translate-y-4"]{--un-translate-y:-1rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+[peer=""]:not(:placeholder-shown)~[peer-not-placeholder-shown~="-translate-y-4"],
 [peer=""]:focus~[peer-focus~="-translate-y-4"]{--un-translate-y:-1rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
-[peer=""]:not(:placeholder-shown)~[peer-not-placeholder-shown~="scale-75"]{--un-scale-x:0.75;--un-scale-y:0.75;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+[peer=""]:not(:placeholder-shown)~[peer-not-placeholder-shown~="scale-75"],
 [peer=""]:focus~[peer-focus~="scale-75"]{--un-scale-x:0.75;--un-scale-y:0.75;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 [select-none=""]{-webkit-user-select:none;user-select:none;}
 [bg-gradient~="from-yellow-400"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(250,204,21,var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(250,204,21,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
@@ -30,26 +30,26 @@
 [px-4=""]{padding-left:1rem;padding-right:1rem;}
 [pt-4=""]{padding-top:1rem;}
 [text-center=""]{text-align:center;}
-[peer=""]:checked~[peer-checked~="text-4xl"],
-[text-4xl=""]{font-size:2.25rem;line-height:2.5rem;}
+[text-4xl=""],
+[peer=""]:checked~[peer-checked~="text-4xl"]{font-size:2.25rem;line-height:2.5rem;}
 [text-5xl=""]{font-size:3rem;line-height:1;}
 [font-100=""]{font-weight:100;}
 [font-200=""]{font-weight:200;}
 [leading-1rem=""]{line-height:1rem;}
 [tracking-wider=""]{letter-spacing:0.05em;}
-[group=""]:hover [group-hover~="text-teal-400"]{--un-text-opacity:1;color:rgba(45,212,191,var(--un-text-opacity));}
-[peer=""]:not(:placeholder-shown)~[peer-not-placeholder-shown~="text-green-500"]{--un-text-opacity:1;color:rgba(34,197,94,var(--un-text-opacity));}
 [text-gray-7=""]{--un-text-opacity:1;color:rgba(55,65,81,var(--un-text-opacity));}
 [text-true-gray-800=""]{--un-text-opacity:1;color:rgba(38,38,38,var(--un-text-opacity));}
-[un-placeholder~="text-red"]::placeholder{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
+[peer=""]:not(:placeholder-shown)~[peer-not-placeholder-shown~="text-green-500"],
 [peer=""]:focus~[peer-focus~="text-green-500"]{--un-text-opacity:1;color:rgba(34,197,94,var(--un-text-opacity));}
-[group=""]:hover [group-hover~="op-50"]{opacity:0.5;}
+[group=""]:hover [group-hover~="text-teal-400"]{--un-text-opacity:1;color:rgba(45,212,191,var(--un-text-opacity));}
+[un-placeholder~="text-red"]::placeholder{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
 [op-20=""]{opacity:0.2;}
+[group=""]:hover [group-hover~="op-50"]{opacity:0.5;}
 [backdrop-element~="filter"]::backdrop{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}
 [all\:transition-400=""] *{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:400ms;}
 [transition~="\32 00"]{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;}
-[after~="content-\[string\:\!\]"]::after{content:!;}
 [before-content~="\[quoted\:\!\]"]::before{content:"!";}
+[after~="content-\[string\:\!\]"]::after{content:!;}
 @media (max-width: 767.9px){
 .\<md\:color-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
 }
diff --git a/test/cases/preset-attributify/case-4/output.css b/test/cases/preset-attributify/case-4/output.css
index 5df5006f37..8d8a8ade93 100644
--- a/test/cases/preset-attributify/case-4/output.css
+++ b/test/cases/preset-attributify/case-4/output.css
@@ -25,13 +25,13 @@
 [rounded-sm=""]{border-radius:0.125rem;}
 [border~="x-style-dashed"]{border-left-style:dashed;border-right-style:dashed;}
 .dark [bg~="dark\:\!blue-500"]{--un-bg-opacity:1 !important;background-color:rgba(59,130,246,var(--un-bg-opacity)) !important;}
-.dark [bg~="dark\:hover\:blue-600"]:hover{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));}
 [bg~="blue-400"]{--un-bg-opacity:1;background-color:rgba(96,165,250,var(--un-bg-opacity));}
-[bg~="hover\:blue-500"]:hover{--un-bg-opacity:1;background-color:rgba(59,130,246,var(--un-bg-opacity));}
-[bg~="hover\:sky-500"]:hover{--un-bg-opacity:1;background-color:rgba(14,165,233,var(--un-bg-opacity));}
 [bg~="sky-400"]{--un-bg-opacity:1;background-color:rgba(56,189,248,var(--un-bg-opacity));}
 [bg~="transparent"]{background-color:transparent;}
 [important~="bg-red"]{--un-bg-opacity:1 !important;background-color:rgba(248,113,113,var(--un-bg-opacity)) !important;}
+.dark [bg~="dark\:hover\:blue-600"]:hover{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));}
+[bg~="hover\:blue-500"]:hover{--un-bg-opacity:1;background-color:rgba(59,130,246,var(--un-bg-opacity));}
+[bg~="hover\:sky-500"]:hover{--un-bg-opacity:1;background-color:rgba(14,165,233,var(--un-bg-opacity));}
 [p~="t-2"],
 [pt~="\32 "],
 [pt2=""]{padding-top:0.5rem;}
diff --git a/test/preset-tagify.test.ts b/test/preset-tagify.test.ts
index ab2c9d8afa..72b41f14d2 100644
--- a/test/preset-tagify.test.ts
+++ b/test/preset-tagify.test.ts
@@ -58,9 +58,9 @@ describe('tagify', () => {
       /* layer: default */
       .p2{padding:0.5rem;}
       m-1{margin:0.25rem;}
-      hover\\\\:color-red:hover,
-      text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
+      hover\\\\:color-red:hover{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
       text-green5\\\\:10{color:rgba(34,197,94,0.1);}
+      text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
       flex{display:flex;}
       .h2{height:0.5rem;}
       custom-rule{background-color:pink;}"
diff --git a/test/shortcuts.test.ts b/test/shortcuts.test.ts
index 0d61953417..09f2ad7c7b 100644
--- a/test/shortcuts.test.ts
+++ b/test/shortcuts.test.ts
@@ -114,8 +114,8 @@ describe('shortcuts', () => {
     const { css } = await uno.generate('shortcut-hover-active-2 uno-layer-shortcuts:bg-red-300', { preflights: false })
     expect(css).toMatchInlineSnapshot(`
       "/* layer: shortcuts */
-      .shortcut-hover-active-2:hover{--un-bg-opacity:1;background-color:rgba(253,224,71,var(--un-bg-opacity));}
       .uno-layer-shortcuts\\\\:bg-red-300{--un-bg-opacity:1;background-color:rgba(252,165,165,var(--un-bg-opacity));}
+      .shortcut-hover-active-2:hover{--un-bg-opacity:1;background-color:rgba(253,224,71,var(--un-bg-opacity));}
       .shortcut-hover-active-2:focus{--un-bg-opacity:1;background-color:rgba(252,165,165,var(--un-bg-opacity));}
       .shortcut-hover-active-2:active{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));}"
     `)
@@ -125,8 +125,8 @@ describe('shortcuts', () => {
     const { css } = await uno.generate('shortcut-hover-active-2 uno-layer-shortcuts:bg-yellow-300', { preflights: false })
     expect(css).toMatchInlineSnapshot(`
       "/* layer: shortcuts */
-      .shortcut-hover-active-2:hover,
       .uno-layer-shortcuts\\\\:bg-yellow-300{--un-bg-opacity:1;background-color:rgba(253,224,71,var(--un-bg-opacity));}
+      .shortcut-hover-active-2:hover{--un-bg-opacity:1;background-color:rgba(253,224,71,var(--un-bg-opacity));}
       .shortcut-hover-active-2:focus{--un-bg-opacity:1;background-color:rgba(252,165,165,var(--un-bg-opacity));}
       .shortcut-hover-active-2:active{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));}"
     `)
@@ -136,8 +136,8 @@ describe('shortcuts', () => {
     const { css } = await uno.generate('shortcut-hover-active-2 uno-layer-shortcuts:bg-blue-300', { preflights: false })
     expect(css).toMatchInlineSnapshot(`
       "/* layer: shortcuts */
-      .shortcut-hover-active-2:hover{--un-bg-opacity:1;background-color:rgba(253,224,71,var(--un-bg-opacity));}
       .uno-layer-shortcuts\\\\:bg-blue-300{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));}
+      .shortcut-hover-active-2:hover{--un-bg-opacity:1;background-color:rgba(253,224,71,var(--un-bg-opacity));}
       .shortcut-hover-active-2:focus{--un-bg-opacity:1;background-color:rgba(252,165,165,var(--un-bg-opacity));}
       .shortcut-hover-active-2:active{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));}"
     `)
@@ -167,10 +167,10 @@ describe('shortcuts', () => {
     `, { preflights: false })
     expect(css).toMatchInlineSnapshot(`
       "/* layer: shortcuts */
-      .hover\\\\:shortcut-inline-body:hover,
       .shortcut-inline-body{padding:0.5rem;margin:3px;}
       .shortcut-inline-dynamic-1{padding:0.25rem;margin:1px;}
-      .shortcut-inline-dynamic-2{padding:0.5rem;margin:2px;}"
+      .shortcut-inline-dynamic-2{padding:0.5rem;margin:2px;}
+      .hover\\\\:shortcut-inline-body:hover{padding:0.5rem;margin:3px;}"
     `)
   })