tailwind v4 switch (#45)

* tw4 switch

* active selector

index.html

···
     <link rel="preconnect" href="https://fonts.bunny.net" />
     <link href="https://fonts.bunny.net/css?family=roboto-mono:400" rel="stylesheet" />
     <script>
-      if (
+      document.documentElement.classList.toggle(
+        "dark",
         localStorage.theme === "dark" ||
-        (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
-      )
-        document.documentElement.classList.add("dark");
-      else document.documentElement.classList.remove("dark");
+          (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),
+      );
     </script>
     <script src="/src/index.tsx" type="module"></script>
   </head>

package.json

···
     "serve": "vite preview"
   },
   "devDependencies": {
+    "@iconify/tailwind4": "^1.0.6",
     "@iconify-json/lucide": "^1.2.65",
+    "@tailwindcss/vite": "^4.1.12",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
+    "tailwindcss": "^4.1.12",
     "typescript": "^5.9.2",
-    "unocss": "66.4.2",
     "vite": "^7.1.3",
     "vite-plugin-solid": "^2.11.8"
   },

pnpm-lock.yaml

···
       '@iconify-json/lucide':
         specifier: ^1.2.65
         version: 1.2.65
+      '@iconify/tailwind4':
+        specifier: ^1.0.6
+        version: 1.0.6(tailwindcss@4.1.12)
+      '@tailwindcss/vite':
+        specifier: ^4.1.12
+        version: 4.1.12(vite@7.1.3(@types/node@22.13.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.19.2))
       prettier:
         specifier: ^3.6.2
         version: 3.6.2
       prettier-plugin-tailwindcss:
         specifier: ^0.6.14
         version: 0.6.14(prettier@3.6.2)
+      tailwindcss:
+        specifier: ^4.1.12
+        version: 4.1.12
       typescript:
         specifier: ^5.9.2
         version: 5.9.2
-      unocss:
-        specifier: 66.4.2
-        version: 66.4.2(postcss@8.5.6)(vite@7.1.3(@types/node@22.13.1)(jiti@2.5.1)(tsx@4.19.2))
       vite:
         specifier: ^7.1.3
-        version: 7.1.3(@types/node@22.13.1)(jiti@2.5.1)(tsx@4.19.2)
+        version: 7.1.3(@types/node@22.13.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.19.2)
       vite-plugin-solid:
         specifier: ^2.11.8
-        version: 2.11.8(solid-js@1.9.9)(vite@7.1.3(@types/node@22.13.1)(jiti@2.5.1)(tsx@4.19.2))
+        version: 2.11.8(solid-js@1.9.9)(vite@7.1.3(@types/node@22.13.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.19.2))
 
 packages:
 
···
   '@antfu/install-pkg@1.1.0':
     resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
 
-  '@antfu/utils@9.2.0':
-    resolution: {integrity: sha512-Oq1d9BGZakE/FyoEtcNeSwM7MpDO2vUBi11RWBZXf75zPsbUVWmUs03EqkRFrcgbXyKTas0BdZWC1wcuSoqSAw==}
+  '@antfu/utils@8.1.1':
+    resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==}
 
   '@atcute/atproto@3.1.2':
     resolution: {integrity: sha512-m6OWoGTeL8Wlw7cm8Nrf+NU24rlx5A0DzxEQQPPu1wqYNHw6S33nOU90W+U09vVN0aZGZUrLFfWWhAaSWTp1ZQ==}
···
   '@iconify-json/lucide@1.2.65':
     resolution: {integrity: sha512-Ur5I3dZyLW8bZLTEtsMKQ9lkl8u5HIiwO79pYxlvAzKQ0Mc4milB+G04CxnFqlB15x/lRq2rTPSi7ep1utDXrg==}
 
+  '@iconify/tailwind4@1.0.6':
+    resolution: {integrity: sha512-43ZXe+bC7CuE2LCgROdqbQeFYJi/J7L/k1UpSy8KDQlWVsWxPzLSWbWhlJx4uRYLOh1NRyw02YlDOgzBOFNd+A==}
+    peerDependencies:
+      tailwindcss: '>= 4'
+
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
-  '@iconify/utils@3.0.1':
-    resolution: {integrity: sha512-A78CUEnFGX8I/WlILxJCuIJXloL0j/OJ9PSchPAfCargEIKmUBWvvEMmKWB5oONwiUqlNt+5eRufdkLxeHIWYw==}
+  '@iconify/utils@2.3.0':
+    resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
+
+  '@isaacs/fs-minipass@4.0.1':
+    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
+    engines: {node: '>=18.0.0'}
 
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
 
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
···
 
   '@noble/secp256k1@2.3.0':
     resolution: {integrity: sha512-0TQed2gcBbIrh7Ccyw+y/uZQvbJwm7Ao4scBUxqpBCcsOlZG0O4KGfjtNAy/li4W8n1xt3dxrwJ0beZ2h2G6Kw==}
-
-  '@polka/url@1.0.0-next.29':
-    resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
-
-  '@quansync/fs@0.1.5':
-    resolution: {integrity: sha512-lNS9hL2aS2NZgNW7BBj+6EBl4rOf8l+tQ0eRY6JWCI8jI2kc53gSoqbjojU0OnAWhzoXiOjFyGsHcDGePB3lhA==}
 
   '@rollup/rollup-android-arm-eabi@4.49.0':
     resolution: {integrity: sha512-rlKIeL854Ed0e09QGYFlmDNbka6I3EQFw7iZuugQjMb11KMpJCLPFL4ZPbMfaEhLADEL1yx0oujGkBQ7+qW3eA==}
···
     peerDependencies:
       solid-js: ^1.8.6
 
-  '@types/babel__core@7.20.5':
-    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+  '@tailwindcss/node@4.1.12':
+    resolution: {integrity: sha512-3hm9brwvQkZFe++SBt+oLjo4OLDtkvlE8q2WalaD/7QWaeM7KEJbAiY/LJZUaCs7Xa8aUu4xy3uoyX4q54UVdQ==}
 
-  '@types/babel__generator@7.27.0':
-    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
-
-  '@types/babel__template@7.4.4':
-    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
-
-  '@types/babel__traverse@7.28.0':
-    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
-
-  '@types/estree@1.0.8':
-    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
-
-  '@types/node@22.13.1':
-    resolution: {integrity: sha512-jK8uzQlrvXqEU91UxiK5J7pKHyzgnI1Qnl0QDHIgVGuolJhRb9EEl28Cj9b3rGR8B2lhFCtvIm5os8lFnO/1Ew==}
-
-  '@unocss/astro@66.4.2':
-    resolution: {integrity: sha512-En3AKHwkiPxtZT95vkVrNiRYrB+DFVCikew6/dMMCWDWVKK0+5tEVUTzR1ak3+YnzAXl0NpWj8D4zHb0PxOs/A==}
-    peerDependencies:
-      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0
-    peerDependenciesMeta:
-      vite:
-        optional: true
-
-  '@unocss/cli@66.4.2':
-    resolution: {integrity: sha512-WsXzrB0SHbSt2nOHtD5QM91VN8j38+wObqyGcoIhtBSugqzsc+t7AdPkxV/ZaYgtPAz87bR0WFEVKcbiBRnmJw==}
-    engines: {node: '>=14'}
-    hasBin: true
-
-  '@unocss/config@66.4.2':
-    resolution: {integrity: sha512-plji1gNGSzlWjuV2Uh0q6Dt5ZlNkOKCHpgxekW9J458WghGAMBeXgB9uNpWg6flilqP1g0GJQv+XvJcSkYRGpQ==}
-    engines: {node: '>=14'}
-
-  '@unocss/core@66.4.2':
-    resolution: {integrity: sha512-cYgMQrLhB9nRekv5c+yPDDa+5dzlMkA2UMQRil0s5D9Lb5n7NsCMcr6+nfxkcSYVLy92SbwDV45c6T7vIxFTOA==}
-
-  '@unocss/extractor-arbitrary-variants@66.4.2':
-    resolution: {integrity: sha512-T/eSeodfAp7HaWnQGqVLOsW4PbKUAvuybNRyvFWThMneM2qo+dOo3kFnA5my9ULAmRSFsAlyB1DnupD3qv5Klg==}
+  '@tailwindcss/oxide-android-arm64@4.1.12':
+    resolution: {integrity: sha512-oNY5pq+1gc4T6QVTsZKwZaGpBb2N1H1fsc1GD4o7yinFySqIuRZ2E4NvGasWc6PhYJwGK2+5YT1f9Tp80zUQZQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
 
-  '@unocss/inspector@66.4.2':
-    resolution: {integrity: sha512-ugcJK8r2ypM4eIdgetVn8RhfKrbA3AF3OQ/RohK5PPk2UPDAScqabzYpfdNW4eYQsBOZOgoiqWtnfc8weqo8LQ==}
+  '@tailwindcss/oxide-darwin-arm64@4.1.12':
+    resolution: {integrity: sha512-cq1qmq2HEtDV9HvZlTtrj671mCdGB93bVY6J29mwCyaMYCP/JaUBXxrQQQm7Qn33AXXASPUb2HFZlWiiHWFytw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
 
-  '@unocss/postcss@66.4.2':
-    resolution: {integrity: sha512-tu4lnh6K27pIAuaQHlFlhXin8korwC0r1kQl00YMmF3THiX7orXkTP6xWGcQwnkbx4uQz1dw+tBimYxeaAMrhA==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      postcss: ^8.4.21
+  '@tailwindcss/oxide-darwin-x64@4.1.12':
+    resolution: {integrity: sha512-6UCsIeFUcBfpangqlXay9Ffty9XhFH1QuUFn0WV83W8lGdX8cD5/+2ONLluALJD5+yJ7k8mVtwy3zMZmzEfbLg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
 
-  '@unocss/preset-attributify@66.4.2':
-    resolution: {integrity: sha512-DwFJJkkawmHpjo3pGQE8FyoPsvhbxh+QMvvaAdYpo+iZ5HRkeDml9SOj7u6SGTcmbNyI+QR61s0KM8fxx6HcVQ==}
+  '@tailwindcss/oxide-freebsd-x64@4.1.12':
+    resolution: {integrity: sha512-JOH/f7j6+nYXIrHobRYCtoArJdMJh5zy5lr0FV0Qu47MID/vqJAY3r/OElPzx1C/wdT1uS7cPq+xdYYelny1ww==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
 
-  '@unocss/preset-icons@66.4.2':
-    resolution: {integrity: sha512-qJx9gmesrvrmoTe9Mqoidihad8hm2MSD4QAezhfDSAyllioJOgyT0Bev/IEWAbehe9jtqYIh8v1oCerBPbGn6Q==}
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.12':
+    resolution: {integrity: sha512-v4Ghvi9AU1SYgGr3/j38PD8PEe6bRfTnNSUE3YCMIRrrNigCFtHZ2TCm8142X8fcSqHBZBceDx+JlFJEfNg5zQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
 
-  '@unocss/preset-mini@66.4.2':
-    resolution: {integrity: sha512-Ry+5hM+XLmT8HrEb182mUfcZuyrZ8xR+TBe72DBcliJ1DhOV3K67TCxwQucfb0zHbGV71HNWdPmHsLKxPDgweQ==}
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.12':
+    resolution: {integrity: sha512-YP5s1LmetL9UsvVAKusHSyPlzSRqYyRB0f+Kl/xcYQSPLEw/BvGfxzbH+ihUciePDjiXwHh+p+qbSP3SlJw+6g==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
 
-  '@unocss/preset-tagify@66.4.2':
-    resolution: {integrity: sha512-dECS09LqWJY4sYpgPUH2OAUftWU/tiZPR2XDRoTngeGU37GxSN+1sWtSmB7vwDm3C7opsdVUN20he8F1LUNubw==}
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.12':
+    resolution: {integrity: sha512-V8pAM3s8gsrXcCv6kCHSuwyb/gPsd863iT+v1PGXC4fSL/OJqsKhfK//v8P+w9ThKIoqNbEnsZqNy+WDnwQqCA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
 
-  '@unocss/preset-typography@66.4.2':
-    resolution: {integrity: sha512-ZOKRuR5+V0r30QTVq04/6ZoIw75me3V25v2dU2YWJXIzwpMKmQ9TUN/M1yeiEUFfXjOaruWX6Ad6CvAw2MlCew==}
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.12':
+    resolution: {integrity: sha512-xYfqYLjvm2UQ3TZggTGrwxjYaLB62b1Wiysw/YE3Yqbh86sOMoTn0feF98PonP7LtjsWOWcXEbGqDL7zv0uW8Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
 
-  '@unocss/preset-uno@66.4.2':
-    resolution: {integrity: sha512-1MFtPivGcpqRQFWdjtP40Enop1y3XDb3tlZXoMQUX0IGLG8HJOT+lfQx/Xl9t73ShJ8aAJ/l6qTxC43ZGNACzA==}
+  '@tailwindcss/oxide-linux-x64-musl@4.1.12':
+    resolution: {integrity: sha512-ha0pHPamN+fWZY7GCzz5rKunlv9L5R8kdh+YNvP5awe3LtuXb5nRi/H27GeL2U+TdhDOptU7T6Is7mdwh5Ar3A==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
 
-  '@unocss/preset-web-fonts@66.4.2':
-    resolution: {integrity: sha512-4FYmleeRoM8r2DqGl6dfIjnX57tepcfZCvVfeCqYnk7475Yddmv1OYkoMjkWMnkK9MzdSxsFwHMU6CIUTmFTzQ==}
+  '@tailwindcss/oxide-wasm32-wasi@4.1.12':
+    resolution: {integrity: sha512-4tSyu3dW+ktzdEpuk6g49KdEangu3eCYoqPhWNsZgUhyegEda3M9rG0/j1GV/JjVVsj+lG7jWAyrTlLzd/WEBg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
 
-  '@unocss/preset-wind3@66.4.2':
-    resolution: {integrity: sha512-0Aye/PaT08M/cQhPnGKn93iEVoRJbym0/1eomMvXoL+8oc7DVry35ws06r5CLu5h1sXI6UmS6sejoePFlSkLJQ==}
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.12':
+    resolution: {integrity: sha512-iGLyD/cVP724+FGtMWslhcFyg4xyYyM+5F4hGvKA7eifPkXHRAUDFaimu53fpNg9X8dfP75pXx/zFt/jlNF+lg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
 
-  '@unocss/preset-wind4@66.4.2':
-    resolution: {integrity: sha512-F4RZsDqIpnSevD9hY353+Tw5gxpJuHA5HwdKjLnC/TnT9VKKVmV7qUEZ6M0jEuAk1kz2x3/ngnQ9Ftw+C2L84A==}
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.12':
+    resolution: {integrity: sha512-NKIh5rzw6CpEodv/++r0hGLlfgT/gFN+5WNdZtvh6wpU2BpGNgdjvj6H2oFc8nCM839QM1YOhjpgbAONUb4IxA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
 
-  '@unocss/preset-wind@66.4.2':
-    resolution: {integrity: sha512-z/rFYFINNqmBtl3Dh+7UCKpPnPkxM7IIUGszMnvdntky9uhLauJ11dt/Puir73sM2cAfywfgvnHyZ00m0pg7rA==}
+  '@tailwindcss/oxide@4.1.12':
+    resolution: {integrity: sha512-gM5EoKHW/ukmlEtphNwaGx45fGoEmP10v51t9unv55voWh6WrOL19hfuIdo2FjxIaZzw776/BUQg7Pck++cIVw==}
+    engines: {node: '>= 10'}
 
-  '@unocss/reset@66.4.2':
-    resolution: {integrity: sha512-s3Kq4Q6a/d3/jYe6HTCfXUx7zYAYufetId5n66DZHzQxpeu6CoBS83+b37STTKsw27SOgV28cPJlJtZ6/D6Bhw==}
+  '@tailwindcss/vite@4.1.12':
+    resolution: {integrity: sha512-4pt0AMFDx7gzIrAOIYgYP0KCBuKWqyW8ayrdiLEjoJTT4pKTjrzG/e4uzWtTLDziC+66R9wbUqZBccJalSE5vQ==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7
 
-  '@unocss/rule-utils@66.4.2':
-    resolution: {integrity: sha512-7z3IuajwXhy2cx3E0IGOFXIiuKC79/jzm4Tt56TC68nXLh/etlH0fKhxVwkZ/HbcQRpVwWyDRNcbh29pmA3DwQ==}
-    engines: {node: '>=14'}
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
-  '@unocss/transformer-attributify-jsx@66.4.2':
-    resolution: {integrity: sha512-de6LzoyW1tkdOftlCrj6z8wEb4j6l1sqmOU1nYKkYHw7luLFGxRUELC7iujlI9KmylbM02bcKfLETAfJy/je2w==}
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
 
-  '@unocss/transformer-compile-class@66.4.2':
-    resolution: {integrity: sha512-+oiIrV8c3T7qiJdICr6YsEWik5sjbWirXF0mlpcBvZu2HyV559hvHjzuWKr/fl7xYYZKDL9FvddbqWo3DOXh3Q==}
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
 
-  '@unocss/transformer-directives@66.4.2':
-    resolution: {integrity: sha512-7m/dTrCUkBkZeSRKPxPEo65Rav239orQSLq6sztwZhoA4x/6H8r58xCkAK0qC9VEalyerpCpyarU3sKN4+ehNg==}
+  '@types/babel__traverse@7.28.0':
+    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
 
-  '@unocss/transformer-variant-group@66.4.2':
-    resolution: {integrity: sha512-SbPDbZUrhQyL4CpvnpvUfrr1DFq8AKf8ofPGbMJDm5S2TInQ34vFaIrhNroGR0szntMZRH5Zlkq6LtVUKDRs5g==}
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
-  '@unocss/vite@66.4.2':
-    resolution: {integrity: sha512-7eON9iPF3qWzuI+M6u0kq7K3y9nEbimZlLj01nGoqrgSGxEsyJpP01QQQsmT7FPRiZzRMJv7BiKMEyDQSuRRCA==}
-    peerDependencies:
-      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0
+  '@types/node@22.13.1':
+    resolution: {integrity: sha512-jK8uzQlrvXqEU91UxiK5J7pKHyzgnI1Qnl0QDHIgVGuolJhRb9EEl28Cj9b3rGR8B2lhFCtvIm5os8lFnO/1Ew==}
 
   acorn@8.15.0:
     resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
-    engines: {node: '>= 8'}
-
   babel-plugin-jsx-dom-expressions@0.40.1:
     resolution: {integrity: sha512-b4iHuirqK7RgaMzB2Lsl7MqrlDgQtVRSSazyrmx7wB3T759ggGjod5Rkok5MfHjQXhR7tRPmdwoeGPqBnW2KfA==}
     peerDependencies:
···
       solid-js:
         optional: true
 
-  binary-extensions@2.3.0:
-    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
-    engines: {node: '>=8'}
-
-  braces@3.0.3:
-    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
-    engines: {node: '>=8'}
-
   browserslist@4.25.3:
     resolution: {integrity: sha512-cDGv1kkDI4/0e5yON9yM5G/0A5u8sf5TnmdX5C9qHzI9PPu++sQ9zjm1k9NiOrf3riY4OkK0zSGqfvJyJsgCBQ==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
-
-  cac@6.7.14:
-    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
-    engines: {node: '>=8'}
 
   caniuse-lite@1.0.30001737:
     resolution: {integrity: sha512-BiloLiXtQNrY5UyF0+1nSJLXUENuhka2pzy2Fx5pGxqavdrxSCW4U6Pn/PoG3Efspi2frRbHpBV2XsrPE6EDlw==}
 
-  chokidar@3.6.0:
-    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
-    engines: {node: '>= 8.10.0'}
-
-  colorette@2.0.20:
-    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+  chownr@3.0.0:
+    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
+    engines: {node: '>=18'}
 
   confbox@0.1.8:
     resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
···
   confbox@0.2.2:
     resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
 
-  consola@3.4.2:
-    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
-    engines: {node: ^14.18.0 || >=16.10.0}
-
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
-  css-tree@3.1.0:
-    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
-
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
···
       supports-color:
         optional: true
 
-  defu@6.1.4:
-    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
-
-  destr@2.0.5:
-    resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
-
-  duplexer@0.1.2:
-    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
+  detect-libc@2.0.4:
+    resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
+    engines: {node: '>=8'}
 
   electron-to-chromium@1.5.211:
     resolution: {integrity: sha512-IGBvimJkotaLzFnwIVgW9/UD/AOJ2tByUmeOrtqBfACSbAw5b1G0XpvdaieKyc7ULmbwXVx+4e4Be8pOPBrYkw==}
 
+  enhanced-resolve@5.18.3:
+    resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
+    engines: {node: '>=10.13.0'}
+
   entities@6.0.1:
     resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
     engines: {node: '>=0.12'}
···
       picomatch:
         optional: true
 
-  fill-range@7.1.1:
-    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
-    engines: {node: '>=8'}
-
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
···
   get-tsconfig@4.10.1:
     resolution: {integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==}
 
-  glob-parent@5.1.2:
-    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
-    engines: {node: '>= 6'}
-
   globals@15.15.0:
     resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
     engines: {node: '>=18'}
 
-  gzip-size@6.0.0:
-    resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
-    engines: {node: '>=10'}
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
   hls.js@1.6.11:
     resolution: {integrity: sha512-tdDwOAgPGXohSiNE4oxGr3CI9Hx9lsGLFe6TULUvRk2TfHS+w1tSAJntrvxsHaxvjtr6BXsDZM7NOqJFhU4mmg==}
···
   html-entities@2.3.3:
     resolution: {integrity: sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==}
 
-  is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
-    engines: {node: '>=8'}
-
-  is-extglob@2.1.1:
-    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
-    engines: {node: '>=0.10.0'}
-
-  is-glob@4.0.3:
-    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
-    engines: {node: '>=0.10.0'}
-
-  is-number@7.0.0:
-    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
-    engines: {node: '>=0.12.0'}
-
   is-what@4.1.16:
     resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
     engines: {node: '>=12.13'}
···
   kolorist@1.8.0:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
 
+  lightningcss-darwin-arm64@1.30.1:
+    resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.30.1:
+    resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.30.1:
+    resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    resolution: {integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.30.1:
+    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    resolution: {integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.30.1:
+    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
+    engines: {node: '>= 12.0.0'}
+
   local-pkg@1.1.2:
     resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
     engines: {node: '>=14'}
···
   magic-string@0.30.18:
     resolution: {integrity: sha512-yi8swmWbO17qHhwIBNeeZxTceJMeBvWJaId6dyvTSOwTipqeHhMhOrz6513r1sOKnpvQ7zkhlG8tPrpilwTxHQ==}
 
-  mdn-data@2.12.2:
-    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
-
   merge-anything@5.1.7:
     resolution: {integrity: sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ==}
     engines: {node: '>=12.13'}
 
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minizlib@3.0.2:
+    resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
+    engines: {node: '>= 18'}
+
+  mkdirp@3.0.1:
+    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   mlly@1.8.0:
     resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
 
   monaco-editor@0.52.2:
     resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==}
-
-  mrmime@2.0.1:
-    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
-    engines: {node: '>=10'}
 
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
···
     engines: {node: ^18 || >=20}
     hasBin: true
 
-  node-fetch-native@1.6.7:
-    resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
-
   node-releases@2.0.19:
     resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
 
-  normalize-path@3.0.0:
-    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
-    engines: {node: '>=0.10.0'}
-
-  ofetch@1.4.1:
-    resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==}
-
   package-manager-detector@1.3.0:
     resolution: {integrity: sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==}
 
···
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
-  perfect-debounce@1.0.0:
-    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
-
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
-
-  picomatch@2.3.1:
-    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
-    engines: {node: '>=8.6'}
 
   picomatch@4.0.3:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
···
 
   quansync@0.2.11:
     resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
-
-  readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>=8.10.0'}
 
   resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
···
     resolution: {integrity: sha512-RbcPH1n5cfwKrru7v7+zrZvjLurgHhGyso3HTyGtRivGWgYjbOmGuivCQaORNELjNONoK35nj28EoWul9sb1zQ==}
     engines: {node: '>=10'}
 
-  sirv@3.0.1:
-    resolution: {integrity: sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A==}
-    engines: {node: '>=18'}
-
   solid-js@1.9.9:
     resolution: {integrity: sha512-A0ZBPJQldAeGCTW0YRYJmt7RCeh5rbFfPZ2aOttgYnctHE7HgKeHCBB/PVc2P7eOfmNXqMFFFoYYdm3S4dcbkA==}
 
···
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  tailwindcss@4.1.12:
+    resolution: {integrity: sha512-DzFtxOi+7NsFf7DBtI3BJsynR+0Yp6etH+nRPTbpWnS2pZBaSksv/JGctNwSWzbFjp0vxSqknaUylseZqMDGrA==}
+
+  tapable@2.2.3:
+    resolution: {integrity: sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==}
+    engines: {node: '>=6'}
+
+  tar@7.4.3:
+    resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
+    engines: {node: '>=18'}
+
   tinyexec@1.0.1:
     resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
 
···
     resolution: {integrity: sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==}
     engines: {node: '>=12.0.0'}
 
-  to-regex-range@5.0.1:
-    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
-    engines: {node: '>=8.0'}
-
-  totalist@3.0.1:
-    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
-    engines: {node: '>=6'}
-
   tsx@4.19.2:
     resolution: {integrity: sha512-pOUl6Vo2LUq/bSa8S5q7b91cgNSjctn9ugq/+Mvow99qW6x/UZYwzxy/3NmqoT66eHYfCVvFvACC58UBPFf28g==}
     engines: {node: '>=18.0.0'}
···
 
   ufo@1.6.1:
     resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
-
-  unconfig@7.3.3:
-    resolution: {integrity: sha512-QCkQoOnJF8L107gxfHL0uavn7WD9b3dpBcFX6HtfQYmjw2YzWxGuFQ0N0J6tE9oguCBJn9KOvfqYDCMPHIZrBA==}
 
   undici-types@6.20.0:
     resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==}
 
-  unocss@66.4.2:
-    resolution: {integrity: sha512-PsZ+4XF/ekiParR7PZEM7AchvHJ78EIfOXlqTPflTOXCYgZ77kG9NaIaIf4lHRevY+rRTyrHrjxdg1Ern2j8qw==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@unocss/webpack': 66.4.2
-      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0
-    peerDependenciesMeta:
-      '@unocss/webpack':
-        optional: true
-      vite:
-        optional: true
-
-  unplugin-utils@0.2.5:
-    resolution: {integrity: sha512-gwXJnPRewT4rT7sBi/IvxKTjsms7jX7QIDLOClApuZwR49SXbrB1z2NLUZ+vDHyqCj/n58OzRRqaW+B8OZi8vg==}
-    engines: {node: '>=18.12.0'}
-
   update-browserslist-db@1.1.3:
     resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
     hasBin: true
···
       vite:
         optional: true
 
-  vue-flow-layout@0.2.0:
-    resolution: {integrity: sha512-zKgsWWkXq0xrus7H4Mc+uFs1ESrmdTXlO0YNbR6wMdPaFvosL3fMB8N7uTV308UhGy9UvTrGhIY7mVz9eN+L0Q==}
-
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
+  yallist@5.0.0:
+    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
+    engines: {node: '>=18'}
 
   yocto-queue@1.2.1:
     resolution: {integrity: sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==}
···
       package-manager-detector: 1.3.0
       tinyexec: 1.0.1
 
-  '@antfu/utils@9.2.0': {}
+  '@antfu/utils@8.1.1': {}
 
   '@atcute/atproto@3.1.2':
     dependencies:
···
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify/tailwind4@1.0.6(tailwindcss@4.1.12)':
+    dependencies:
+      '@iconify/types': 2.0.0
+      '@iconify/utils': 2.3.0
+      tailwindcss: 4.1.12
+    transitivePeerDependencies:
+      - supports-color
+
   '@iconify/types@2.0.0': {}
 
-  '@iconify/utils@3.0.1':
+  '@iconify/utils@2.3.0':
     dependencies:
       '@antfu/install-pkg': 1.1.0
-      '@antfu/utils': 9.2.0
+      '@antfu/utils': 8.1.1
       '@iconify/types': 2.0.0
       debug: 4.4.1
       globals: 15.15.0
···
     transitivePeerDependencies:
       - supports-color
 
+  '@isaacs/fs-minipass@4.0.1':
+    dependencies:
+      minipass: 7.1.2
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
       '@jridgewell/trace-mapping': 0.3.30
 
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.30
+
   '@jridgewell/resolve-uri@3.1.2': {}
 
   '@jridgewell/sourcemap-codec@1.5.5': {}
···
   '@jsr/mary__exif-rm@0.2.2': {}
 
   '@noble/secp256k1@2.3.0': {}
-
-  '@polka/url@1.0.0-next.29': {}
-
-  '@quansync/fs@0.1.5':
-    dependencies:
-      quansync: 0.2.11
 
   '@rollup/rollup-android-arm-eabi@4.49.0':
     optional: true
···
     dependencies:
       solid-js: 1.9.9
 
-  '@types/babel__core@7.20.5':
+  '@tailwindcss/node@4.1.12':
     dependencies:
-      '@babel/parser': 7.28.3
-      '@babel/types': 7.28.2
-      '@types/babel__generator': 7.27.0
-      '@types/babel__template': 7.4.4
-      '@types/babel__traverse': 7.28.0
-
-  '@types/babel__generator@7.27.0':
-    dependencies:
-      '@babel/types': 7.28.2
-
-  '@types/babel__template@7.4.4':
-    dependencies:
-      '@babel/parser': 7.28.3
-      '@babel/types': 7.28.2
-
-  '@types/babel__traverse@7.28.0':
-    dependencies:
-      '@babel/types': 7.28.2
-
-  '@types/estree@1.0.8': {}
-
-  '@types/node@22.13.1':
-    dependencies:
-      undici-types: 6.20.0
-    optional: true
-
-  '@unocss/astro@66.4.2(vite@7.1.3(@types/node@22.13.1)(jiti@2.5.1)(tsx@4.19.2))':
-    dependencies:
-      '@unocss/core': 66.4.2
-      '@unocss/reset': 66.4.2
-      '@unocss/vite': 66.4.2(vite@7.1.3(@types/node@22.13.1)(jiti@2.5.1)(tsx@4.19.2))
-    optionalDependencies:
-      vite: 7.1.3(@types/node@22.13.1)(jiti@2.5.1)(tsx@4.19.2)
-
-  '@unocss/cli@66.4.2':
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@unocss/config': 66.4.2
-      '@unocss/core': 66.4.2
-      '@unocss/preset-uno': 66.4.2
-      cac: 6.7.14
-      chokidar: 3.6.0
-      colorette: 2.0.20
-      consola: 3.4.2
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.18.3
+      jiti: 2.5.1
+      lightningcss: 1.30.1
       magic-string: 0.30.18
-      pathe: 2.0.3
-      perfect-debounce: 1.0.0
-      tinyglobby: 0.2.14
-      unplugin-utils: 0.2.5
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.12
 
-  '@unocss/config@66.4.2':
-    dependencies:
-      '@unocss/core': 66.4.2
-      unconfig: 7.3.3
+  '@tailwindcss/oxide-android-arm64@4.1.12':
+    optional: true
 
-  '@unocss/core@66.4.2': {}
+  '@tailwindcss/oxide-darwin-arm64@4.1.12':
+    optional: true
 
-  '@unocss/extractor-arbitrary-variants@66.4.2':
-    dependencies:
-      '@unocss/core': 66.4.2
+  '@tailwindcss/oxide-darwin-x64@4.1.12':
+    optional: true
 
-  '@unocss/inspector@66.4.2':
-    dependencies:
-      '@unocss/core': 66.4.2
-      '@unocss/rule-utils': 66.4.2
-      colorette: 2.0.20
-      gzip-size: 6.0.0
-      sirv: 3.0.1
-      vue-flow-layout: 0.2.0
+  '@tailwindcss/oxide-freebsd-x64@4.1.12':
+    optional: true
 
-  '@unocss/postcss@66.4.2(postcss@8.5.6)':
-    dependencies:
-      '@unocss/config': 66.4.2
-      '@unocss/core': 66.4.2
-      '@unocss/rule-utils': 66.4.2
-      css-tree: 3.1.0
-      postcss: 8.5.6
-      tinyglobby: 0.2.14
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.12':
+    optional: true
 
-  '@unocss/preset-attributify@66.4.2':
-    dependencies:
-      '@unocss/core': 66.4.2
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.12':
+    optional: true
 
-  '@unocss/preset-icons@66.4.2':
-    dependencies:
-      '@iconify/utils': 3.0.1
-      '@unocss/core': 66.4.2
-      ofetch: 1.4.1
-    transitivePeerDependencies:
-      - supports-color
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.12':
+    optional: true
 
-  '@unocss/preset-mini@66.4.2':
-    dependencies:
-      '@unocss/core': 66.4.2
-      '@unocss/extractor-arbitrary-variants': 66.4.2
-      '@unocss/rule-utils': 66.4.2
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.12':
+    optional: true
 
-  '@unocss/preset-tagify@66.4.2':
-    dependencies:
-      '@unocss/core': 66.4.2
+  '@tailwindcss/oxide-linux-x64-musl@4.1.12':
+    optional: true
 
-  '@unocss/preset-typography@66.4.2':
-    dependencies:
-      '@unocss/core': 66.4.2
-      '@unocss/preset-mini': 66.4.2
-      '@unocss/rule-utils': 66.4.2
+  '@tailwindcss/oxide-wasm32-wasi@4.1.12':
+    optional: true
 
-  '@unocss/preset-uno@66.4.2':
-    dependencies:
-      '@unocss/core': 66.4.2
-      '@unocss/preset-wind3': 66.4.2
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.12':
+    optional: true
 
-  '@unocss/preset-web-fonts@66.4.2':
-    dependencies:
-      '@unocss/core': 66.4.2
-      ofetch: 1.4.1
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.12':
+    optional: true
 
-  '@unocss/preset-wind3@66.4.2':
+  '@tailwindcss/oxide@4.1.12':
     dependencies:
-      '@unocss/core': 66.4.2
-      '@unocss/preset-mini': 66.4.2
-      '@unocss/rule-utils': 66.4.2
+      detect-libc: 2.0.4
+      tar: 7.4.3
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.12
+      '@tailwindcss/oxide-darwin-arm64': 4.1.12
+      '@tailwindcss/oxide-darwin-x64': 4.1.12
+      '@tailwindcss/oxide-freebsd-x64': 4.1.12
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.12
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.12
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.12
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.12
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.12
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.12
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.12
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.12
 
-  '@unocss/preset-wind4@66.4.2':
+  '@tailwindcss/vite@4.1.12(vite@7.1.3(@types/node@22.13.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.19.2))':
     dependencies:
-      '@unocss/core': 66.4.2
-      '@unocss/extractor-arbitrary-variants': 66.4.2
-      '@unocss/rule-utils': 66.4.2
+      '@tailwindcss/node': 4.1.12
+      '@tailwindcss/oxide': 4.1.12
+      tailwindcss: 4.1.12
+      vite: 7.1.3(@types/node@22.13.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.19.2)
 
-  '@unocss/preset-wind@66.4.2':
+  '@types/babel__core@7.20.5':
     dependencies:
-      '@unocss/core': 66.4.2
-      '@unocss/preset-wind3': 66.4.2
+      '@babel/parser': 7.28.3
+      '@babel/types': 7.28.2
+      '@types/babel__generator': 7.27.0
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.28.0
 
-  '@unocss/reset@66.4.2': {}
-
-  '@unocss/rule-utils@66.4.2':
+  '@types/babel__generator@7.27.0':
     dependencies:
-      '@unocss/core': 66.4.2
-      magic-string: 0.30.18
+      '@babel/types': 7.28.2
 
-  '@unocss/transformer-attributify-jsx@66.4.2':
+  '@types/babel__template@7.4.4':
     dependencies:
       '@babel/parser': 7.28.3
-      '@babel/traverse': 7.28.3
-      '@unocss/core': 66.4.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@unocss/transformer-compile-class@66.4.2':
-    dependencies:
-      '@unocss/core': 66.4.2
+      '@babel/types': 7.28.2
 
-  '@unocss/transformer-directives@66.4.2':
+  '@types/babel__traverse@7.28.0':
     dependencies:
-      '@unocss/core': 66.4.2
-      '@unocss/rule-utils': 66.4.2
-      css-tree: 3.1.0
+      '@babel/types': 7.28.2
 
-  '@unocss/transformer-variant-group@66.4.2':
-    dependencies:
-      '@unocss/core': 66.4.2
+  '@types/estree@1.0.8': {}
 
-  '@unocss/vite@66.4.2(vite@7.1.3(@types/node@22.13.1)(jiti@2.5.1)(tsx@4.19.2))':
+  '@types/node@22.13.1':
     dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@unocss/config': 66.4.2
-      '@unocss/core': 66.4.2
-      '@unocss/inspector': 66.4.2
-      chokidar: 3.6.0
-      magic-string: 0.30.18
-      pathe: 2.0.3
-      tinyglobby: 0.2.14
-      unplugin-utils: 0.2.5
-      vite: 7.1.3(@types/node@22.13.1)(jiti@2.5.1)(tsx@4.19.2)
+      undici-types: 6.20.0
+    optional: true
 
   acorn@8.15.0: {}
-
-  anymatch@3.1.3:
-    dependencies:
-      normalize-path: 3.0.0
-      picomatch: 2.3.1
 
   babel-plugin-jsx-dom-expressions@0.40.1(@babel/core@7.28.3):
     dependencies:
···
     optionalDependencies:
       solid-js: 1.9.9
 
-  binary-extensions@2.3.0: {}
-
-  braces@3.0.3:
-    dependencies:
-      fill-range: 7.1.1
-
   browserslist@4.25.3:
     dependencies:
       caniuse-lite: 1.0.30001737
···
       node-releases: 2.0.19
       update-browserslist-db: 1.1.3(browserslist@4.25.3)
 
-  cac@6.7.14: {}
-
   caniuse-lite@1.0.30001737: {}
 
-  chokidar@3.6.0:
-    dependencies:
-      anymatch: 3.1.3
-      braces: 3.0.3
-      glob-parent: 5.1.2
-      is-binary-path: 2.1.0
-      is-glob: 4.0.3
-      normalize-path: 3.0.0
-      readdirp: 3.6.0
-    optionalDependencies:
-      fsevents: 2.3.3
-
-  colorette@2.0.20: {}
+  chownr@3.0.0: {}
 
   confbox@0.1.8: {}
 
   confbox@0.2.2: {}
-
-  consola@3.4.2: {}
 
   convert-source-map@2.0.0: {}
 
-  css-tree@3.1.0:
-    dependencies:
-      mdn-data: 2.12.2
-      source-map-js: 1.2.1
-
   csstype@3.1.3: {}
 
   debug@4.4.1:
     dependencies:
       ms: 2.1.3
 
-  defu@6.1.4: {}
+  detect-libc@2.0.4: {}
 
-  destr@2.0.5: {}
+  electron-to-chromium@1.5.211: {}
 
-  duplexer@0.1.2: {}
-
-  electron-to-chromium@1.5.211: {}
+  enhanced-resolve@5.18.3:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.3
 
   entities@6.0.1: {}
 
···
     optionalDependencies:
       picomatch: 4.0.3
 
-  fill-range@7.1.1:
-    dependencies:
-      to-regex-range: 5.0.1
-
   fsevents@2.3.3:
     optional: true
 
···
       resolve-pkg-maps: 1.0.0
     optional: true
 
-  glob-parent@5.1.2:
-    dependencies:
-      is-glob: 4.0.3
-
   globals@15.15.0: {}
 
-  gzip-size@6.0.0:
-    dependencies:
-      duplexer: 0.1.2
+  graceful-fs@4.2.11: {}
 
   hls.js@1.6.11: {}
 
   html-entities@2.3.3: {}
-
-  is-binary-path@2.1.0:
-    dependencies:
-      binary-extensions: 2.3.0
-
-  is-extglob@2.1.1: {}
-
-  is-glob@4.0.3:
-    dependencies:
-      is-extglob: 2.1.1
-
-  is-number@7.0.0: {}
 
   is-what@4.1.16: {}
 
···
 
   kolorist@1.8.0: {}
 
+  lightningcss-darwin-arm64@1.30.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.30.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.30.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    optional: true
+
+  lightningcss@1.30.1:
+    dependencies:
+      detect-libc: 2.0.4
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.30.1
+      lightningcss-darwin-x64: 1.30.1
+      lightningcss-freebsd-x64: 1.30.1
+      lightningcss-linux-arm-gnueabihf: 1.30.1
+      lightningcss-linux-arm64-gnu: 1.30.1
+      lightningcss-linux-arm64-musl: 1.30.1
+      lightningcss-linux-x64-gnu: 1.30.1
+      lightningcss-linux-x64-musl: 1.30.1
+      lightningcss-win32-arm64-msvc: 1.30.1
+      lightningcss-win32-x64-msvc: 1.30.1
+
   local-pkg@1.1.2:
     dependencies:
       mlly: 1.8.0
···
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  mdn-data@2.12.2: {}
-
   merge-anything@5.1.7:
     dependencies:
       is-what: 4.1.16
 
+  minipass@7.1.2: {}
+
+  minizlib@3.0.2:
+    dependencies:
+      minipass: 7.1.2
+
+  mkdirp@3.0.1: {}
+
   mlly@1.8.0:
     dependencies:
       acorn: 8.15.0
···
       ufo: 1.6.1
 
   monaco-editor@0.52.2: {}
-
-  mrmime@2.0.1: {}
 
   ms@2.1.3: {}
 
···
 
   nanoid@5.1.5: {}
 
-  node-fetch-native@1.6.7: {}
-
   node-releases@2.0.19: {}
 
-  normalize-path@3.0.0: {}
-
-  ofetch@1.4.1:
-    dependencies:
-      destr: 2.0.5
-      node-fetch-native: 1.6.7
-      ufo: 1.6.1
-
   package-manager-detector@1.3.0: {}
 
   parse5@7.3.0:
···
 
   pathe@2.0.3: {}
 
-  perfect-debounce@1.0.0: {}
-
   picocolors@1.1.1: {}
-
-  picomatch@2.3.1: {}
 
   picomatch@4.0.3: {}
 
···
 
   quansync@0.2.11: {}
 
-  readdirp@3.6.0:
-    dependencies:
-      picomatch: 2.3.1
-
   resolve-pkg-maps@1.0.0:
     optional: true
 
···
 
   seroval@1.3.2: {}
 
-  sirv@3.0.1:
-    dependencies:
-      '@polka/url': 1.0.0-next.29
-      mrmime: 2.0.1
-      totalist: 3.0.1
-
   solid-js@1.9.9:
     dependencies:
       csstype: 3.1.3
···
 
   source-map-js@1.2.1: {}
 
+  tailwindcss@4.1.12: {}
+
+  tapable@2.2.3: {}
+
+  tar@7.4.3:
+    dependencies:
+      '@isaacs/fs-minipass': 4.0.1
+      chownr: 3.0.0
+      minipass: 7.1.2
+      minizlib: 3.0.2
+      mkdirp: 3.0.1
+      yallist: 5.0.0
+
   tinyexec@1.0.1: {}
 
   tinyglobby@0.2.14:
···
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
 
-  to-regex-range@5.0.1:
-    dependencies:
-      is-number: 7.0.0
-
-  totalist@3.0.1: {}
-
   tsx@4.19.2:
     dependencies:
       esbuild: 0.23.1
···
   typescript@5.9.2: {}
 
   ufo@1.6.1: {}
-
-  unconfig@7.3.3:
-    dependencies:
-      '@quansync/fs': 0.1.5
-      defu: 6.1.4
-      jiti: 2.5.1
-      quansync: 0.2.11
 
   undici-types@6.20.0:
     optional: true
 
-  unocss@66.4.2(postcss@8.5.6)(vite@7.1.3(@types/node@22.13.1)(jiti@2.5.1)(tsx@4.19.2)):
-    dependencies:
-      '@unocss/astro': 66.4.2(vite@7.1.3(@types/node@22.13.1)(jiti@2.5.1)(tsx@4.19.2))
-      '@unocss/cli': 66.4.2
-      '@unocss/core': 66.4.2
-      '@unocss/postcss': 66.4.2(postcss@8.5.6)
-      '@unocss/preset-attributify': 66.4.2
-      '@unocss/preset-icons': 66.4.2
-      '@unocss/preset-mini': 66.4.2
-      '@unocss/preset-tagify': 66.4.2
-      '@unocss/preset-typography': 66.4.2
-      '@unocss/preset-uno': 66.4.2
-      '@unocss/preset-web-fonts': 66.4.2
-      '@unocss/preset-wind': 66.4.2
-      '@unocss/preset-wind3': 66.4.2
-      '@unocss/preset-wind4': 66.4.2
-      '@unocss/transformer-attributify-jsx': 66.4.2
-      '@unocss/transformer-compile-class': 66.4.2
-      '@unocss/transformer-directives': 66.4.2
-      '@unocss/transformer-variant-group': 66.4.2
-      '@unocss/vite': 66.4.2(vite@7.1.3(@types/node@22.13.1)(jiti@2.5.1)(tsx@4.19.2))
-    optionalDependencies:
-      vite: 7.1.3(@types/node@22.13.1)(jiti@2.5.1)(tsx@4.19.2)
-    transitivePeerDependencies:
-      - postcss
-      - supports-color
-
-  unplugin-utils@0.2.5:
-    dependencies:
-      pathe: 2.0.3
-      picomatch: 4.0.3
-
   update-browserslist-db@1.1.3(browserslist@4.25.3):
     dependencies:
       browserslist: 4.25.3
···
 
   validate-html-nesting@1.2.3: {}
 
-  vite-plugin-solid@2.11.8(solid-js@1.9.9)(vite@7.1.3(@types/node@22.13.1)(jiti@2.5.1)(tsx@4.19.2)):
+  vite-plugin-solid@2.11.8(solid-js@1.9.9)(vite@7.1.3(@types/node@22.13.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.19.2)):
     dependencies:
       '@babel/core': 7.28.3
       '@types/babel__core': 7.20.5
···
       merge-anything: 5.1.7
       solid-js: 1.9.9
       solid-refresh: 0.6.3(solid-js@1.9.9)
-      vite: 7.1.3(@types/node@22.13.1)(jiti@2.5.1)(tsx@4.19.2)
-      vitefu: 1.1.1(vite@7.1.3(@types/node@22.13.1)(jiti@2.5.1)(tsx@4.19.2))
+      vite: 7.1.3(@types/node@22.13.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.19.2)
+      vitefu: 1.1.1(vite@7.1.3(@types/node@22.13.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.19.2))
     transitivePeerDependencies:
       - supports-color
 
-  vite@7.1.3(@types/node@22.13.1)(jiti@2.5.1)(tsx@4.19.2):
+  vite@7.1.3(@types/node@22.13.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.19.2):
     dependencies:
       esbuild: 0.25.9
       fdir: 6.5.0(picomatch@4.0.3)
···
       '@types/node': 22.13.1
       fsevents: 2.3.3
       jiti: 2.5.1
+      lightningcss: 1.30.1
       tsx: 4.19.2
 
-  vitefu@1.1.1(vite@7.1.3(@types/node@22.13.1)(jiti@2.5.1)(tsx@4.19.2)):
+  vitefu@1.1.1(vite@7.1.3(@types/node@22.13.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.19.2)):
     optionalDependencies:
-      vite: 7.1.3(@types/node@22.13.1)(jiti@2.5.1)(tsx@4.19.2)
+      vite: 7.1.3(@types/node@22.13.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.19.2)
 
-  vue-flow-layout@0.2.0: {}
+  yallist@3.1.1: {}
 
-  yallist@3.1.1: {}
+  yallist@5.0.0: {}
 
   yocto-queue@1.2.1: {}

src/components/account.tsx

···
   return (
     <>
       <Modal open={openManager()} onClose={() => setOpenManager(false)}>
-        <div class="starting:opacity-0 dark:bg-dark-800/70 border-0.5 w-22rem dark:shadow-dark-900/80 backdrop-blur-xs left-50% absolute top-12 -translate-x-1/2 rounded-lg border-neutral-300 bg-neutral-200/70 p-4 text-neutral-900 shadow-md transition-opacity duration-300 dark:border-neutral-700 dark:text-neutral-200">
+        <div class="dark:bg-dark-800/70 dark:shadow-dark-900/80 absolute top-12 left-[50%] w-[22rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-200/70 p-4 text-neutral-900 shadow-md backdrop-blur-xs transition-opacity duration-300 dark:border-neutral-700 dark:text-neutral-200 starting:opacity-0">
           <div class="mb-2 flex items-center gap-1 font-bold">
-            <div class="i-lucide-user-round" />
+            <span class="iconify lucide--user-round"></span>
             <span>Manage accounts</span>
           </div>
           <div class="mb-3 max-h-[20rem] overflow-y-auto md:max-h-[25rem]">
             <For each={Object.keys(sessions)}>
               {(did) => (
-                <div class="flex w-full items-center justify-between gap-x-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-600">
+                <div class="flex w-full items-center justify-between gap-x-2 rounded-lg hover:bg-neutral-100 active:bg-neutral-100 dark:hover:bg-neutral-600 dark:active:bg-neutral-600">
                   <button
                     class="flex basis-full items-center justify-between gap-1 truncate p-1"
                     onclick={() => resumeSession(did as Did)}
                   >
                     <span class="truncate">{sessions[did]?.length ? sessions[did] : did}</span>
                     <Show when={did === agent()?.sub}>
-                      <div class="i-lucide-check shrink-0" />
+                      <span class="iconify lucide--check shrink-0"></span>
                     </Show>
                   </button>
                   <button
                     onclick={() => removeSession(did as Did)}
-                    class="p-1.5 hover:text-red-500 hover:dark:text-red-400"
+                    class="flex items-center p-1.5 hover:text-red-500 hover:dark:text-red-400"
                   >
-                    <div class="i-lucide-user-round-x text-lg" />
+                    <span class="iconify lucide--user-round-x text-lg"></span>
                   </button>
                 </div>
               )}
···
         <Tooltip text="Accounts">
           {agent() && avatar() ?
             <img src={avatar()} class="dark:shadow-dark-900/80 size-5 rounded-full shadow-sm" />
-          : <div class="i-lucide-circle-user-round text-xl" />}
+          : <span class="iconify lucide--circle-user-round text-xl"></span>}
         </Tooltip>
       </button>
     </>

src/components/backlinks.tsx

···
 
   return (
     <Show when={response()}>
-      <div class="break-anywhere flex w-full flex-col gap-1 text-sm">
+      <div class="flex w-full flex-col gap-1 text-sm wrap-anywhere">
         <For each={backlinks()}>
           {({ collection, path, counts }) => (
             <div>
               <div>
                 <div title="Collection containing linking records" class="flex items-center gap-1">
-                  <div class="i-lucide-book-text shrink-0" />
+                  <span class="iconify lucide--book-text shrink-0"></span>
                   {collection}
                 </div>
                 <div title="Record path where the link is found" class="flex items-center gap-1">
-                  <div class="i-lucide-route shrink-0" />
+                  <span class="iconify lucide--route shrink-0"></span>
                   {path.slice(1)}
                 </div>
               </div>
               <div class="ml-4.5">
                 <p>
                   <a
-                    class="text-blue-400 hover:underline"
+                    class="text-blue-400 hover:underline active:underline"
                     href="#"
                     title="Show linking records"
                     onclick={() =>
···
                   </a>
                   {" from "}
                   <a
-                    class="text-blue-400 hover:underline"
+                    class="text-blue-400 hover:underline active:underline"
                     href="#"
                     title="Show linking DIDs"
                     onclick={() =>
···
           {(did) => (
             <a
               href={`/at://${did}`}
-              class="relative flex w-full font-mono text-blue-400 hover:underline"
+              class="relative flex w-full font-mono text-blue-400 hover:underline active:underline"
             >
               {did}
             </a>
···
         <For each={links().linking_records}>
           {({ did, collection, rkey }) => (
             <p class="relative flex w-full items-center gap-1 font-mono">
-              <a href={`/at://${did}/${collection}/${rkey}`} class="text-blue-400 hover:underline">
+              <a href={`/at://${did}/${collection}/${rkey}`} class="text-blue-400 hover:underline active:underline">
                 {rkey}
               </a>
               <span class="text-xs text-neutral-500 dark:text-neutral-400">

src/components/button.tsx

···
       type="button"
       class={
         props.class ??
-        "dark:hover:bg-dark-100 dark:bg-dark-300 dark:shadow-dark-900/80 flex items-center gap-1 rounded-lg bg-white px-2 py-1.5 text-xs font-semibold shadow-sm hover:bg-neutral-50"
+        "dark:hover:bg-dark-100 dark:bg-dark-300 dark:shadow-dark-900/80 dark:active:bg-dark-100 flex items-center gap-1 rounded-lg bg-white px-2 py-1.5 text-xs font-semibold shadow-sm hover:bg-neutral-50 active:bg-neutral-50"
       }
       onClick={props.onClick}
     >

src/components/create.tsx

···
   return (
     <>
       <Modal open={openDialog()} onClose={() => setOpenDialog(false)}>
-        <div class="w-22rem sm:w-xl lg:w-48rem starting:opacity-0 dark:bg-dark-800/70 left-50% backdrop-blur-xs border-0.5 dark:shadow-dark-900/80 absolute top-12 -translate-x-1/2 rounded-lg border-neutral-300 bg-neutral-200/70 p-2 text-neutral-900 shadow-md transition-opacity duration-300 sm:p-4 dark:border-neutral-700 dark:text-neutral-200">
+        <div class="dark:bg-dark-800/70 dark:shadow-dark-900/80 absolute top-12 left-[50%] w-[22rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-200/70 p-2 text-neutral-900 shadow-md backdrop-blur-xs transition-opacity duration-300 sm:w-xl sm:p-4 lg:w-[48rem] dark:border-neutral-700 dark:text-neutral-200 starting:opacity-0">
           <div class="mb-2 flex w-full justify-between">
             <div class="flex items-center gap-1 font-bold">
-              <div class="i-lucide-square-pen" />
+              <span class="iconify lucide--square-pen"></span>
               <span>{props.create ? "Creating" : "Editing"} record</span>
             </div>
-            <button onclick={() => setOpenDialog(false)}>
-              <div class="i-lucide-x text-lg hover:text-neutral-500 dark:hover:text-neutral-400" />
+            <button onclick={() => setOpenDialog(false)} class="flex items-center">
+              <span class="iconify lucide--x text-lg hover:text-neutral-500 dark:hover:text-neutral-400"></span>
             </button>
           </div>
           <form ref={formRef} class="flex flex-col gap-y-2">
···
                     id="collection"
                     name="collection"
                     placeholder="Optional (default: record type)"
-                    class="w-14rem"
+                    class="w-[14rem]"
                   />
                 </div>
                 <div class="flex items-center gap-x-2">
                   <label for="rkey" class="min-w-20 select-none">
                     Record key
                   </label>
-                  <TextInput id="rkey" name="rkey" placeholder="Optional" class="w-14rem" />
+                  <TextInput id="rkey" name="rkey" placeholder="Optional" class="w-[14rem]" />
                 </div>
               </Show>
               <div class="flex items-center gap-x-2">
···
               </div>
               <div class="flex items-center gap-2">
                 <Show when={!uploading()}>
-                  <div class="dark:hover:bg-dark-100 dark:bg-dark-300 dark:shadow-dark-900/80 flex rounded-lg bg-white text-xs font-semibold shadow-sm hover:bg-neutral-50">
+                  <div class="dark:hover:bg-dark-100 dark:bg-dark-300 dark:shadow-dark-900/80 dark:active:bg-dark-100 flex rounded-lg bg-white text-xs font-semibold shadow-sm hover:bg-neutral-50 active:bg-neutral-50">
                     <input type="file" id="blob" hidden onChange={() => uploadBlob()} />
                     <label class="flex items-center gap-1 px-2 py-1.5" for="blob">
-                      <div class="i-lucide-upload text-sm" />
+                      <span class="iconify lucide--upload text-sm"></span>
                       Upload
                     </label>
                   </div>
                   <p class="text-xs">Metadata will be pasted after the cursor</p>
                 </Show>
                 <Show when={uploading()}>
-                  <div class="i-lucide-loader-circle animate-spin text-xl" />
+                  <span class="iconify lucide--loader-circle animate-spin text-xl"></span>
                   <p>Uploading...</p>
                 </Show>
               </div>
···
                   <label for="mimetype" class="min-w-20 select-none">
                     MIME type
                   </label>
-                  <TextInput id="mimetype" placeholder="Optional" class="w-14rem" />
+                  <TextInput id="mimetype" placeholder="Optional" class="w-[14rem]" />
                 </div>
                 <div class="flex items-center gap-1">
                   <input id="exif-rm" class="size-4" type="checkbox" checked />
···
                 <Show when={!props.create}>
                   <div class="flex items-center gap-1">
                     <input id="recreate" class="size-4" name="recreate" type="checkbox" />
-                    <label for="recreate" class="select-none text-sm">
+                    <label for="recreate" class="text-sm select-none">
                       Recreate record
                     </label>
                   </div>
···
       </Modal>
       <Tooltip text={`${props.create ? "Create" : "Edit"} record`}>
         <button
-          class={
-            props.create ? "" : "rounded-sm p-1 hover:bg-neutral-100 dark:hover:bg-neutral-600"
-          }
+          class={`flex items-center ${props.create ? "" : "rounded-sm p-1 hover:bg-neutral-100 active:bg-neutral-100 dark:hover:bg-neutral-600 dark:active:bg-neutral-600"}`}
           onclick={() => {
             createModel();
             setOpenDialog(true);
           }}
         >
-          <div class={props.create ? "i-lucide-square-pen text-xl" : "i-lucide-pencil"} />
+          <div
+            class={props.create ? "iconify lucide--square-pen text-xl" : "iconify lucide--pencil"}
+          />
         </button>
       </Tooltip>
     </>

src/components/editor.tsx

···
     });
   });
 
-  return <div ref={editorDiv} class="h-20rem sm:h-24rem dark:shadow-dark-900/80 shadow-sm"></div>;
+  return (
+    <div ref={editorDiv} class="dark:shadow-dark-900/80 h-[20rem] shadow-sm sm:h-[24rem]"></div>
+  );
 };
 
 export { Editor, editor };

src/components/json.tsx

···
         {(part) => (
           <>
             {ATURI_RE.test(part) ?
-              <A class="text-blue-400 hover:underline" href={`/${part}`}>
+              <A class="text-blue-400 hover:underline active:underline" href={`/${part}`}>
                 {part}
               </A>
             : DID_RE.test(part) ?
-              <A class="text-blue-400 hover:underline" href={`/at://${part}`}>
+              <A class="text-blue-400 hover:underline active:underline" href={`/at://${part}`}>
                 {part}
               </A>
             : (
···
               part.split("\n").length === 1
             ) ?
               <a
-                class="text-blue-400 hover:underline"
+                class="text-blue-400 hover:underline active:underline"
                 href={part}
                 target="_blank"
                 rel="noopener noreferrer"
···
         }}
       >
         <button
-          class="max-w-40% sm:max-w-50% break-anywhere group/clip relative flex size-fit shrink-0 items-center text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300"
+          class="max-w-40% sm:max-w-50% group/clip relative flex size-fit shrink-0 items-center wrap-anywhere text-neutral-500 hover:text-neutral-700 active:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300 dark:active:text-neutral-300"
           onclick={() => setShow(!show())}
         >
           <span
             classList={{
-              "dark:bg-dark-500 absolute w-5 -left-5 bg-neutral-100 text-sm": true,
-              "hidden group-hover/clip:block": show(),
+              "dark:bg-dark-500 absolute w-5 flex items-center -left-5 bg-neutral-100 text-sm": true,
+              "hidden group-hover/clip:flex": show(),
             }}
           >
             {show() ?
-              <div class="i-lucide-chevron-down" />
-            : <div class="i-lucide-chevron-right" />}
+              <span class="iconify lucide--chevron-down"></span>
+            : <span class="iconify lucide--chevron-right"></span>}
           </span>
           {key}:
         </button>
         <span
           classList={{
             "self-center": value !== Object(value),
-            "pl-[calc(2ch-1px)] border-l-0.5 border-neutral-500/50 dark:border-neutral-400/50 has-hover:group-hover/indent:border-neutral-700 dark:has-hover:group-hover/indent:border-neutral-300":
+            "pl-[calc(2ch-1px)] border-l-[0.5px] border-neutral-500/50 dark:border-neutral-400/50 has-hover:group-hover/indent:border-neutral-700 dark:has-hover:group-hover/indent:border-neutral-300":
               value === Object(value),
             "invisible h-0": !show(),
           }}
···
           >
             <Show when={blob.mimeType.startsWith("image/") || blob.mimeType === "video/mp4"}>
               <Tooltip text={hide() ? "Show" : "Hide"}>
-                <button onclick={() => setHide(!hide())}>
-                  <div class={`text-base ${hide() ? "i-lucide-eye-off" : "i-lucide-eye"}`} />
+                <button onclick={() => setHide(!hide())} class="flex items-center">
+                  <span
+                    class={`iconify text-base ${hide() ? "lucide--eye-off" : "lucide--eye"}`}
+                  ></span>
                 </button>
               </Tooltip>
             </Show>
···
                 class="size-fit"
               >
                 <Tooltip text="Blob link">
-                  <div class="i-lucide-external-link text-base" />
+                  <span class="iconify lucide--external-link text-base"></span>
                 </Tooltip>
               </a>
             </Show>

src/components/login.tsx

···
   return (
     <form class="flex flex-col gap-y-2" onsubmit={(e) => e.preventDefault()}>
       <div class="flex items-center gap-2">
-        <label for="handle">
-          <div class="i-lucide-user-round-plus text-lg" />
+        <label for="handle" class="flex items-center">
+          <span class="iconify lucide--user-round-plus text-lg"></span>
         </label>
         <TextInput
           id="handle"
···
           onInput={(e) => setLoginInput(e.currentTarget.value)}
           class="grow"
         />
-        <button onclick={() => login(loginInput())}>
-          <div class="i-lucide-log-in text-lg" />
-        </button>
+        <button onclick={() => login(loginInput())} class="iconify lucide--log-in text-lg"></button>
       </div>
       <div>{notice()}</div>
     </form>

src/components/navbar.tsx

···
 export const [validSchema, setValidSchema] = createSignal<boolean | undefined>(undefined);
 
 const swapIcons: Record<string, string> = {
-  "did:plc:vwzwgnygau7ed7b7wt5ux7y2": "i-lucide-microchip",
-  "did:plc:oisofpd7lj26yvgiivf3lxsi": "i-lucide-bone",
-  "did:plc:uu5axsmbm2or2dngy4gwchec": "i-lucide-train-track",
-  "did:plc:7x6rtuenkuvxq3zsvffp2ide": "i-lucide-rabbit",
-  "did:plc:ia76kvnndjutgedggx2ibrem": "i-lucide-rabbit",
-  "did:plc:hvakvedv6byxhufjl23mfmsd": "i-lucide-rat",
-  "did:plc:ezhjhbzqt32bqprrn6qjlkri": "i-lucide-film",
-  "did:plc:6v6jqsy7swpzuu53rmzaybjy": "i-lucide-fish",
-  "did:plc:hx53snho72xoj7zqt5uice4u": "i-lucide-rose",
-  "did:plc:wzsilnxf24ehtmmc3gssy5bu": "i-lucide-music-2",
-  "did:plc:bnqkww7bjxaacajzvu5gswdf": "i-lucide-gem",
-  "did:plc:hdhoaan3xa3jiuq4fg4mefid": "i-lucide-sparkles",
+  "did:plc:vwzwgnygau7ed7b7wt5ux7y2": "iconify lucide--microchip",
+  "did:plc:oisofpd7lj26yvgiivf3lxsi": "iconify lucide--bone",
+  "did:plc:uu5axsmbm2or2dngy4gwchec": "iconify lucide--train-track",
+  "did:plc:7x6rtuenkuvxq3zsvffp2ide": "iconify lucide--rabbit",
+  "did:plc:ia76kvnndjutgedggx2ibrem": "iconify lucide--rabbit",
+  "did:plc:hvakvedv6byxhufjl23mfmsd": "iconify lucide--rat",
+  "did:plc:ezhjhbzqt32bqprrn6qjlkri": "iconify lucide--film",
+  "did:plc:6v6jqsy7swpzuu53rmzaybjy": "iconify lucide--fish",
+  "did:plc:hx53snho72xoj7zqt5uice4u": "iconify lucide--rose",
+  "did:plc:wzsilnxf24ehtmmc3gssy5bu": "iconify lucide--music-2",
+  "did:plc:bnqkww7bjxaacajzvu5gswdf": "iconify lucide--gem",
+  "did:plc:hdhoaan3xa3jiuq4fg4mefid": "iconify lucide--sparkles",
 };
 
 const NavBar = (props: { params: Params }) => {
···
   });
 
   return (
-    <div class="break-anywhere mt-4 flex w-[22rem] flex-col text-sm sm:w-[24rem]">
+    <nav class="mt-4 flex w-[22rem] flex-col text-sm wrap-anywhere sm:w-[24rem]">
       <div class="relative flex items-center justify-between gap-1">
-        <div class="min-h-1.25rem flex basis-full items-center gap-2">
+        <div class="flex min-h-[1.25rem] basis-full items-center gap-2">
           <Tooltip text="PDS">
-            <button onclick={() => addToClipboard(pds()!)}>
-              <div class="i-lucide-server shrink-0 text-lg" />
-            </button>
+            <button
+              class="iconify lucide--server shrink-0 text-lg"
+              onclick={() => addToClipboard(pds()!)}
+            ></button>
           </Tooltip>
           <Show when={pds()}>
             <Show when={props.params.repo}>
-              <A end href={pds()!} inactiveClass="text-blue-400 w-full hover:underline">
+              <A end href={pds()!} inactiveClass="text-blue-400 w-full hover:underline active:underline">
                 {pds()}
               </A>
             </Show>
···
           }`}
         >
           <button
+            class="iconify lucide--copy shrink-0 text-lg"
             onclick={() =>
               addToClipboard(
                 props.params.collection ?
···
                 : pds()!,
               )
             }
-          >
-            <div class="i-lucide-copy shrink-0 text-lg" />
-          </button>
+          ></button>
         </Tooltip>
       </div>
       <div class="flex flex-col flex-wrap">
···
           <div class="relative mt-1 flex items-center justify-between gap-1">
             <div class="flex basis-full items-center gap-2">
               <Tooltip text="Repository">
-                <button onclick={() => addToClipboard(props.params.repo)}>
-                  <div class="i-lucide-at-sign text-lg" />
-                </button>
+                <button
+                  class="iconify lucide--at-sign text-lg"
+                  onclick={() => addToClipboard(props.params.repo)}
+                ></button>
               </Tooltip>
               <div class="flex w-full gap-1">
                 {props.params.collection || location.pathname.includes("/labels") ?
                   <A
                     end
                     href={`/at://${props.params.repo}`}
-                    inactiveClass={`text-blue-400 hover:underline ${!showHandle() ? "w-full" : ""}`}
+                    inactiveClass={`text-blue-400 hover:underline active:underline ${!showHandle() ? "w-full" : ""}`}
                   >
                     {showHandle() ? handle() : props.params.repo}
                   </A>
···
                       : "Invalid handle"
                     }
                   >
-                    <div
+                    <span
                       classList={{
-                        "i-lucide-circle-check": validHandle() === true,
-                        "i-lucide-circle-x text-red-500 dark:text-red-400": validHandle() === false,
-                        "i-lucide-loader-circle animate-spin": validHandle() === undefined,
+                        "iconify lucide--circle-check": validHandle() === true,
+                        "iconify lucide--circle-x text-red-500 dark:text-red-400":
+                          validHandle() === false,
+                        "iconify lucide--loader-circle animate-spin": validHandle() === undefined,
                       }}
-                    />
+                    ></span>
                   </Tooltip>
                 </Show>
               </div>
···
                   localStorage.showHandle = !showHandle();
                   setShowHandle(!showHandle());
                 }}
-              >
-                <div
-                  class={
-                    `duration-400 shrink-0 text-lg transition-transform ${showHandle() ? "rotate-y-180" : ""} ` +
-                    (swapIcons[props.params.repo] ?? "i-lucide-arrow-left-right")
-                  }
-                />
-              </button>
+                class={
+                  `shrink-0 text-lg transition-transform duration-400 ${showHandle() ? "rotate-y-180" : ""} ` +
+                  (swapIcons[props.params.repo] ?? "iconify lucide--arrow-left-right")
+                }
+              ></button>
             </Tooltip>
           </div>
         </Show>
         <Show when={props.params.repo in labelerCache && !props.params.collection}>
           <div class="mt-1 flex items-center gap-2">
-            <div class="i-lucide-tag text-lg" />
+            <span class="iconify lucide--tag text-lg"></span>
             <A
               end
               href={`/at://${props.params.repo}/labels`}
-              inactiveClass="text-blue-400 grow hover:underline"
+              inactiveClass="text-blue-400 grow hover:underline active:underline"
             >
               labels
             </A>
···
         <Show when={props.params.collection}>
           <div class="mt-1 flex items-center gap-2">
             <Tooltip text="Collection">
-              <button onclick={() => addToClipboard(props.params.collection)}>
-                <div class="i-lucide-folder-open text-lg" />
-              </button>
+              <button
+                onclick={() => addToClipboard(props.params.collection)}
+                class="iconify lucide--folder-open text-lg"
+              ></button>
             </Tooltip>
             <Show when={props.params.rkey}>
               <A
                 end
                 href={`/at://${props.params.repo}/${props.params.collection}`}
-                inactiveClass="text-blue-400 w-full hover:underline"
+                inactiveClass="text-blue-400 w-full hover:underline active:underline"
               >
                 {props.params.collection}
               </A>
···
         <Show when={props.params.rkey}>
           <div class="mt-1 flex items-center gap-2">
             <Tooltip text="Record">
-              <button onclick={() => addToClipboard(props.params.rkey)}>
-                <div class="i-lucide-file-json text-lg" />
-              </button>
+              <button
+                onclick={() => addToClipboard(props.params.rkey)}
+                class="iconify lucide--file-json text-lg"
+              ></button>
             </Tooltip>
             <div class="flex gap-1">
               <span>{props.params.rkey}</span>
               <Show when={validRecord()}>
                 <Tooltip text="Valid record">
-                  <div class="i-lucide-lock-keyhole" />
+                  <span class="iconify lucide--lock-keyhole"></span>
                 </Tooltip>
               </Show>
               <Show when={validRecord() === false}>
                 <Tooltip text="Invalid record">
-                  <div class="i-lucide-lock-keyhole-open text-red-500 dark:text-red-400" />
+                  <span class="iconify lucide--lock-keyhole-open text-red-500 dark:text-red-400"></span>
                 </Tooltip>
               </Show>
               <Show when={validRecord() === undefined}>
                 <Tooltip text="Validating">
-                  <div class="i-lucide-loader-circle animate-spin" />
+                  <span class="iconify lucide--loader-circle animate-spin"></span>
                 </Tooltip>
               </Show>
               <Show when={validSchema()}>
                 <Tooltip text="Valid schema">
-                  <div class="i-lucide-file-check" />
+                  <span class="iconify lucide--file-check"></span>
                 </Tooltip>
               </Show>
               <Show when={validSchema() === false}>
                 <Tooltip text="Invalid schema">
-                  <div class="i-lucide-file-x text-red-500 dark:text-red-400" />
+                  <span class="iconify lucide--file-x text-red-500 dark:text-red-400"></span>
                 </Tooltip>
               </Show>
             </div>
···
         {(cid) => (
           <div class="mt-1 flex gap-2">
             <Tooltip text="CID">
-              <button onclick={() => addToClipboard(cid())}>
-                <div class="i-lucide-box text-lg" />
-              </button>
+              <button
+                onclick={() => addToClipboard(cid())}
+                class="iconify lucide--box text-lg"
+              ></button>
             </Tooltip>
             <button
               dir="rtl"
···
           </div>
         )}
       </Show>
-    </div>
+    </nav>
   );
 };
 

src/components/search.tsx

···
         </label>
       </div>
       <div class="flex w-full items-center gap-2">
-        <div class="dark:bg-dark-100 focus-within:outline-1.5 dark:shadow-dark-900/80 flex grow items-center gap-2 rounded-lg bg-white px-2 py-1 shadow-sm focus-within:outline-neutral-900 dark:focus-within:outline-neutral-200">
+        <div class="dark:bg-dark-100 dark:shadow-dark-900/80 flex grow items-center gap-2 rounded-lg bg-white px-2 py-1 shadow-sm focus-within:outline-[1.5px] focus-within:outline-neutral-900 dark:focus-within:outline-neutral-200">
           <input
             type="text"
             spellcheck={false}
···
             class="grow focus:outline-none"
           />
           <Show when={loading()}>
-            <div class="i-lucide-loader-circle animate-spin text-lg" />
+            <span class="iconify lucide--loader-circle animate-spin text-lg"></span>
           </Show>
           <Show when={!loading()}>
-            <button type="submit" onclick={() => processInput(searchInput.value)}>
-              <div class="i-lucide-arrow-right text-lg text-neutral-500 dark:text-neutral-400" />
-            </button>
+            <button
+              type="submit"
+              class="iconify lucide--arrow-right text-lg text-neutral-500 dark:text-neutral-400"
+              onclick={() => processInput(searchInput.value)}
+            ></button>
           </Show>
         </div>
         <Show when={agent()}>
           <Tooltip
             text="Repository"
             children={
-              <A href={`/at://${agent()?.sub}`}>
-                <div class="i-lucide-book-user text-lg" />
-              </A>
+              <A href={`/at://${agent()?.sub}`} class="iconify lucide--book-user text-lg"></A>
             }
           />
         </Show>

src/components/settings.tsx

···
   return (
     <>
       <Modal open={openSettings()} onClose={() => setOpenSettings(false)}>
-        <div class="starting:opacity-0 w-22rem dark:bg-dark-800/70 border-0.5 dark:shadow-dark-900/80 backdrop-blur-xs left-50% absolute top-12 -translate-x-1/2 rounded-lg border-neutral-300 bg-neutral-200/70 p-4 text-neutral-900 shadow-md transition-opacity duration-300 dark:border-neutral-700 dark:text-neutral-200">
+        <div class="dark:bg-dark-800/70 dark:shadow-dark-900/80 absolute top-12 left-[50%] w-[22rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-200/70 p-4 text-neutral-900 shadow-md backdrop-blur-xs transition-opacity duration-300 dark:border-neutral-700 dark:text-neutral-200 starting:opacity-0">
           <div class="mb-2 flex items-center gap-1 font-bold">
-            <div class="i-lucide-settings" />
+            <span class="iconify lucide--settings"></span>
             <span>Settings</span>
           </div>
           <div class="flex flex-col gap-2">
···
                   Hide media embeds
                 </label>
               </div>
-              <div class="dark:shadow-dark-900/80 dark:bg-dark-100 flex w-fit items-center gap-1 rounded-full bg-white p-0.5 text-lg shadow-sm">
-                <Tooltip text="System Theme">
-                  <button
-                    classList={{
-                      "p-1.5 rounded-full": true,
-                      "bg-neutral-200 dark:bg-dark-400": theme().system,
-                    }}
-                    onclick={() =>
-                      updateTheme({
-                        color:
-                          window.matchMedia("(prefers-color-scheme: dark)").matches ?
-                            "dark"
-                          : "light",
-                        system: true,
-                      })
-                    }
-                  >
-                    <div class="i-lucide-monitor" />
-                  </button>
-                </Tooltip>
-                <Tooltip text="Light Theme">
-                  <button
-                    classList={{
-                      "p-1.5 rounded-full": true,
-                      "bg-neutral-200": theme().color === "light" && !theme().system,
-                    }}
-                    onclick={() => updateTheme({ color: "light", system: false })}
-                  >
-                    <div class="i-lucide-sun" />
-                  </button>
-                </Tooltip>
-                <Tooltip text="Dark Theme">
-                  <button
-                    classList={{
-                      "p-1.5 rounded-full": true,
-                      "bg-dark-400": theme().color === "dark" && !theme().system,
-                    }}
-                    onclick={() => updateTheme({ color: "dark", system: false })}
-                  >
-                    <div class="i-lucide-moon" />
-                  </button>
-                </Tooltip>
+              <div class="dark:shadow-dark-900/80 dark:bg-dark-100 flex items-center gap-1 rounded-full bg-white p-0.5 text-lg shadow-sm">
+                <button
+                  name="System Theme"
+                  classList={{
+                    "p-1.5 flex items-center rounded-full": true,
+                    "bg-neutral-200 dark:bg-dark-400": theme().system,
+                  }}
+                  onclick={() =>
+                    updateTheme({
+                      color:
+                        window.matchMedia("(prefers-color-scheme: dark)").matches ?
+                          "dark"
+                        : "light",
+                      system: true,
+                    })
+                  }
+                >
+                  <span class="iconify lucide--monitor"></span>
+                </button>
+                <button
+                  name="Light Theme"
+                  classList={{
+                    "p-1.5 flex items-center rounded-full": true,
+                    "bg-neutral-200": theme().color === "light" && !theme().system,
+                  }}
+                  onclick={() => updateTheme({ color: "light", system: false })}
+                >
+                  <span class="iconify lucide--sun"></span>
+                </button>
+                <button
+                  name="Dark Theme"
+                  classList={{
+                    "p-1.5 flex items-center rounded-full": true,
+                    "bg-dark-400": theme().color === "dark" && !theme().system,
+                  }}
+                  onclick={() => updateTheme({ color: "dark", system: false })}
+                >
+                  <span class="iconify lucide--moon"></span>
+                </button>
               </div>
             </div>
           </div>
         </div>
       </Modal>
       <button onclick={() => setOpenSettings(true)}>
-        <Tooltip text="Settings" children={<div class="i-lucide-settings text-xl" />} />
+        <Tooltip
+          text="Settings"
+          children={<span class="iconify lucide--settings text-xl"></span>}
+        />
       </button>
     </>
   );

src/components/text-input.tsx

···
       disabled={props.disabled}
       required={props.required}
       class={
-        "dark:bg-dark-100 focus:outline-1.5 dark:shadow-dark-900/80 rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-neutral-900 dark:focus:outline-neutral-200 " +
+        "dark:bg-dark-100 dark:shadow-dark-900/80 rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-[1.5px] focus:outline-neutral-900 dark:focus:outline-neutral-200 " +
         props.class
       }
       onInput={props.onInput}

src/components/tooltip.tsx

···
     <Show when={!isTouchDevice}>
       <span
         style={`transform: translate(-50%, 28px)`}
-        class={`left-50% border-0.5 dark:shadow-dark-900/80 pointer-events-none absolute z-10 hidden min-w-fit select-none whitespace-nowrap rounded border-neutral-300 bg-white p-1 text-center font-sans text-xs text-neutral-900 shadow-md group-hover/tooltip:inline dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200`}
+        class={`dark:shadow-dark-900/80 pointer-events-none absolute left-[50%] z-10 hidden min-w-fit rounded border-[0.5px] border-neutral-300 bg-white p-1 text-center font-sans text-xs whitespace-nowrap text-neutral-900 shadow-md select-none group-hover/tooltip:inline dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200`}
       >
         {props.text}
       </span>

src/index.tsx

···
 /* @refresh reload */
 import { render } from "solid-js/web";
-import "virtual:uno.css";
 import "./styles/index.css";
 import { Route, Router } from "@solidjs/router";
 import { Layout } from "./layout.tsx";

src/layout.tsx

···
       </MetaProvider>
       <div class="mb-2 flex w-[22rem] items-center sm:w-[24rem]">
         <div class="flex basis-1/3 gap-x-2">
-          <A href="/jetstream">
-            <Tooltip text="Relay">
-              <div class="i-lucide-radio-tower text-xl" />
-            </Tooltip>
-          </A>
+          <Tooltip text="Relay">
+            <A href="/jetstream" class="iconify lucide--radio-tower text-xl"></A>
+          </Tooltip>
           <AccountManager />
         </div>
         <div class="flex basis-1/3 items-center justify-center text-center">
-          <A href="/" style='font-feature-settings: "cv05"' class="font-bold hover:underline">
+          <A href="/" style='font-feature-settings: "cv05"' class="font-bold hover:underline active:underline">
             PDSls
           </A>
         </div>
-        <div class="justify-right flex basis-1/3 items-center gap-x-2">
+        <div class="flex basis-1/3 items-center justify-end gap-x-2">
           <Show when={agent()}>
             <RecordEditor create={true} />
           </Show>
           <Settings />
         </div>
       </div>
-      <div class="min-w-22rem sm:min-w-24rem z-1 dark:bg-dark-500 mb-4 flex max-w-full flex-col items-center text-pretty bg-neutral-100 md:max-w-screen-md">
+      <div class="dark:bg-dark-500 z-1 mb-4 flex max-w-full min-w-[22rem] flex-col items-center bg-neutral-100 text-pretty sm:min-w-[24rem] md:max-w-[48rem]">
         <Show when={location.pathname !== "/jetstream" && location.pathname !== "/firehose"}>
           <Search />
         </Show>
···
           <ErrorBoundary
             fallback={(err) => <div class="mt-3 break-words">Error: {err.message}</div>}
           >
-            <Suspense fallback={<div class="i-lucide-loader-circle mt-3 animate-spin text-xl" />}>
+            <Suspense
+              fallback={
+                <span class="iconify lucide--loader-circle mt-3 animate-spin text-xl"></span>
+              }
+            >
               {props.children}
             </Suspense>
           </ErrorBoundary>
         </Show>
       </div>
       <Show when={copyNotice()}>
-        <div class="backdrop-blur-xs border-0.5 dark:shadow-dark-900/80 dark:bg-dark-100/70 fixed bottom-10 z-50 flex items-center rounded-lg border-neutral-300 bg-neutral-100/70 p-2 shadow-md dark:border-neutral-700">
-          <div class="i-lucide-clipboard-check mr-1" />
+        <div class="dark:shadow-dark-900/80 dark:bg-dark-100/70 fixed bottom-10 z-50 flex items-center rounded-lg border-[0.5px] border-neutral-300 bg-neutral-100/70 p-2 shadow-md backdrop-blur-xs dark:border-neutral-700">
+          <span class="iconify lucide--clipboard-check mr-1"></span>
           Copied to clipboard
         </div>
       </Show>

src/styles/index.css

···
+@import "tailwindcss";
+
+@plugin "@iconify/tailwind4" {
+  prefixes: lucide;
+}
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-sans: "Inter", sans-serif;
+  --font-mono: "Roboto Mono", monospace;
+
+  --color-dark-50: oklch(40.91% 0 0);
+  --color-dark-100: oklch(35.62% 0 0);
+  --color-dark-200: oklch(31.71% 0 0);
+  --color-dark-300: oklch(29.72% 0 0);
+  --color-dark-400: oklch(25.2% 0 0);
+  --color-dark-500: oklch(23.93% 0 0);
+  --color-dark-600: oklch(22.73% 0.0038 286.09);
+  --color-dark-700: oklch(22.21% 0 0);
+  --color-dark-800: oklch(20.9% 0 0);
+  --color-dark-900: oklch(16.84% 0 0);
+  --color-dark-950: oklch(13.44% 0 0);
+}
+
 html {
   scrollbar-gutter: stable both-edges;
 }

src/views/blob.tsx

···
         <p>
           {blobs()?.length} blob{(blobs()?.length ?? 0 > 1) ? "s" : ""}
         </p>
-        <div class="break-anywhere flex flex-col gap-0.5 font-mono text-sm lg:break-normal">
+        <div class="flex flex-col gap-0.5 font-mono text-sm wrap-anywhere lg:break-normal">
           <For each={blobs()}>
             {(cid) => (
               <a
                 href={`${props.pds}/xrpc/com.atproto.sync.getBlob?did=${props.repo}&cid=${cid}`}
                 target="_blank"
-                class="rounded px-0.5 hover:bg-neutral-200 dark:hover:bg-neutral-700"
+                class="rounded px-0.5 hover:bg-neutral-200 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-700"
               >
                 <span class="text-blue-400">{cid}</span>
               </a>
···
         <Button onClick={() => refetch()}>Load More</Button>
       </Show>
       <Show when={response.loading}>
-        <div class="i-lucide-loader-circle mt-2 animate-spin text-xl" />
+        <span class="iconify lucide--loader-circle mt-2 animate-spin text-xl"></span>
       </Show>
     </div>
   );

src/views/collection.tsx

···
 
   return (
     <span
-      class="relative flex items-baseline rounded px-0.5 hover:bg-neutral-200 dark:hover:bg-neutral-700"
+      class="relative flex items-baseline rounded px-0.5 hover:bg-neutral-200 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-700"
       ref={rkeyRef}
       onmouseover={() => setHover(true)}
       onmouseleave={() => setHover(false)}
···
       <Show when={hover()}>
         <span
           ref={previewRef}
-          class={`dark:bg-dark-500/70 left-50% max-h-xs sm:max-h-md z-25 backdrop-blur-xs border-0.5 dark:shadow-dark-900/80 pointer-events-none absolute block w-max max-w-sm -translate-x-1/2 overflow-hidden whitespace-pre-wrap rounded-lg border-neutral-300 bg-neutral-100/70 p-2 text-xs shadow-md lg:max-w-lg dark:border-neutral-700 ${isOverflowing(previewHeight()) ? "bottom-7" : "top-7"}`}
+          class={`dark:bg-dark-500/70 max-h-xs sm:max-h-md dark:shadow-dark-900/80 pointer-events-none absolute left-[50%] z-25 block w-max max-w-sm -translate-x-1/2 overflow-hidden rounded-lg border-[0.5px] border-neutral-300 bg-neutral-100/70 p-2 text-xs whitespace-pre-wrap shadow-md backdrop-blur-xs lg:max-w-lg dark:border-neutral-700 ${isOverflowing(previewHeight()) ? "bottom-7" : "top-7"}`}
         >
           <JSONValue
             data={props.record.record.value as JSONType}
···
 
   return (
     <Show when={records.length || response()}>
-      <div class="z-5 dark:bg-dark-500/70 backdrop-blur-xs sticky top-0 flex w-screen flex-col items-center justify-center gap-2 bg-neutral-100/70 py-3">
-        <div class="w-22rem sm:w-24rem flex items-center gap-2">
+      <div class="dark:bg-dark-500/70 sticky top-0 z-5 flex w-screen flex-col items-center justify-center gap-2 bg-neutral-100/70 py-3 backdrop-blur-xs">
+        <div class="flex w-[22rem] items-center gap-2 sm:w-[24rem]">
           <Show when={agent() && agent()?.sub === did}>
             <div class="flex items-center gap-x-2">
               <Tooltip
···
                       setLastSelected(undefined);
                       setBatchDelete(!batchDelete());
                     }}
+                    class="flex items-center"
                   >
-                    <div
-                      class={`text-lg ${batchDelete() ? "i-lucide-circle-x" : "i-lucide-trash-2"} `}
-                    />
+                    <span
+                      class={`iconify text-lg ${batchDelete() ? "lucide--circle-x" : "lucide--trash-2"} `}
+                    ></span>
                   </button>
                 }
               />
···
                 <Tooltip
                   text="Select All"
                   children={
-                    <button onclick={() => selectAll()}>
-                      <div class="i-lucide-copy-check text-lg" />
+                    <button onclick={() => selectAll()} class="flex items-center">
+                      <span class="iconify lucide--copy-check text-lg"></span>
                     </button>
                   }
                 />
                 <Tooltip
                   text="Confirm"
                   children={
-                    <button onclick={() => deleteRecords()}>
-                      <div class="i-lucide-trash-2 text-lg text-red-500 dark:text-red-400" />
+                    <button onclick={() => deleteRecords()} class="flex items-center">
+                      <span class="iconify lucide--trash-2 text-lg text-red-500 dark:text-red-400"></span>
                     </button>
                   }
                 />
···
           />
         </div>
         <Show when={records.length > 1}>
-          <div class="w-22rem sm:w-24rem flex items-center justify-between gap-x-2">
+          <div class="flex w-[22rem] items-center justify-between gap-x-2 sm:w-[24rem]">
             <Button
               onClick={() => {
                 setReverse(!reverse());
···
                 refetch();
               }}
             >
-              <div class={`${reverse() ? "i-lucide-rotate-ccw" : "i-lucide-rotate-cw"} text-sm`} />
+              <span
+                class={`iconify ${reverse() ? "lucide--rotate-ccw" : "lucide--rotate-cw"} text-sm`}
+              ></span>
               Reverse
             </Button>
             <div>
···
               </Show>
               <span>{records.length} records</span>
             </div>
-            <div class="w-5rem flex items-center justify-end">
+            <div class="flex w-[5rem] items-center justify-end">
               <Show when={cursor()}>
                 <Show when={!response.loading}>
                   <Button onClick={() => refetch()}>Load More</Button>
                 </Show>
                 <Show when={response.loading}>
-                  <div class="i-lucide-loader-circle w-5rem animate-spin text-xl" />
+                  <div class="iconify lucide--loader-circle w-[5rem] animate-spin text-xl" />
                 </Show>
               </Show>
             </div>
···
             <>
               <Show when={batchDelete()}>
                 <label
-                  class="flex select-none items-center gap-1"
+                  class="flex items-center gap-1 select-none"
                   onclick={(e) => handleSelectionClick(e, index())}
                 >
                   <input

src/views/home.tsx

···
 
 const Home = () => {
   return (
-    <div class="w-22rem sm:w-24rem mt-4 flex flex-col gap-2 break-words">
+    <div class="mt-4 flex w-[22rem] flex-col gap-2 break-words sm:w-[24rem]">
       <div>
         <div>
           <span class="font-semibold">AT Protocol Explorer</span>
         </div>
         <div class="flex items-center gap-1">
-          <div class="i-lucide-search" />
+          <div class="iconify lucide--search" />
           <span>
             Browse the public data on{" "}
-            <a class="text-blue-400 hover:underline" href="https://atproto.com" target="_blank">
+            <a class="text-blue-400 hover:underline active:underline" href="https://atproto.com" target="_blank">
               atproto
             </a>
             .
           </span>
         </div>
         <div class="flex items-center gap-1">
-          <div class="i-lucide-user-round" />
+          <div class="iconify lucide--user-round" />
           <span>Login to manage records in your repo.</span>
         </div>
         <div class="flex items-center gap-1">
-          <div class="i-lucide-radio-tower" />
+          <div class="iconify lucide--radio-tower" />
           <div>
-            <A href="/jetstream" class="text-blue-400 hover:underline">
+            <A href="/jetstream" class="text-blue-400 hover:underline active:underline">
               Jetstream
             </A>{" "}
             and{" "}
-            <A href="/firehose" class="text-blue-400 hover:underline">
+            <A href="/firehose" class="text-blue-400 hover:underline active:underline">
               firehose
             </A>{" "}
             streaming.
           </div>
         </div>
         <div class="flex items-center gap-1">
-          <div class="i-lucide-send-to-back" />
+          <div class="iconify lucide--send-to-back" />
           <span>
             Backlinks support with{" "}
             <A
               href="https://constellation.microcosm.blue"
-              class="text-blue-400 hover:underline"
+              class="text-blue-400 hover:underline active:underline"
               target="_blank"
             >
               constellation
···
       <div>
         <span class="font-semibold">Examples</span>
         <div class="flex items-center gap-1">
-          <div class="i-lucide-server" />
-          <A href="/pds.kelinci.net" class="text-blue-400 hover:underline">
+          <div class="iconify lucide--server" />
+          <A href="/pds.kelinci.net" class="text-blue-400 hover:underline active:underline">
             https://pds.kelinci.net
           </A>
         </div>
         <div class="flex items-center gap-1">
-          <div class="i-lucide-at-sign" />
-          <A href="/at://did:plc:vwzwgnygau7ed7b7wt5ux7y2" class="text-blue-400 hover:underline">
+          <div class="iconify lucide--at-sign" />
+          <A href="/at://did:plc:vwzwgnygau7ed7b7wt5ux7y2" class="text-blue-400 hover:underline active:underline">
             at://did:plc:vwzwgnygau7ed7b7wt5ux7y2
           </A>
         </div>
         <div class="flex items-center gap-1">
-          <div class="i-lucide-file-json shrink-0" />
+          <div class="iconify lucide--file-json shrink-0" />
           <A
             href="/at://did:plc:oisofpd7lj26yvgiivf3lxsi/app.bsky.actor.profile/self"
-            class="text-blue-400 hover:underline"
+            class="text-blue-400 hover:underline active:underline"
           >
             at://hailey.at/app.bsky.actor.profile/self
           </A>
         </div>
         <div class="flex items-center gap-1">
-          <div class="i-lucide-tag" />
+          <div class="iconify lucide--tag" />
           <A
             href="/at://did:plc:wkoofae5uytcm7bjncmev6n6/labels"
-            class="text-blue-400 hover:underline"
+            class="text-blue-400 hover:underline active:underline"
           >
             at://pronouns.diy/labels
           </A>

src/views/labels.tsx

···
             URI Patterns (comma-separated)
           </label>
         </div>
-        <div class="w-22rem sm:w-24rem flex items-center gap-x-2">
+        <div class="flex w-[22rem] items-center gap-x-2 sm:w-[24rem]">
           <textarea
             id="patterns"
             name="patterns"
···
           />
           <div class="flex justify-center">
             <Show when={!response.loading}>
-              <button onclick={() => initQuery()} type="submit">
-                <div class="i-lucide-search text-xl" />
-              </button>
+              <button
+                onclick={() => initQuery()}
+                type="submit"
+                class="iconify lucide--search text-xl"
+              ></button>
             </Show>
             <Show when={response.loading}>
-              <div class="i-lucide-loader-circle animate-spin text-xl" />
+              <div class="iconify lucide--loader-circle animate-spin text-xl" />
             </Show>
           </div>
         </div>
       </form>
-      <div class="z-5 dark:bg-dark-500/70 backdrop-blur-xs sticky top-0 flex w-screen flex-col items-center justify-center gap-3 bg-neutral-100/70 py-3">
+      <div class="dark:bg-dark-500/70 sticky top-0 z-5 flex w-screen flex-col items-center justify-center gap-3 bg-neutral-100/70 py-3 backdrop-blur-xs">
         <TextInput
           placeholder="Filter by label"
           onInput={(e) => setFilter(e.currentTarget.value)}
-          class="w-22rem sm:w-24rem"
+          class="w-[22rem] sm:w-[24rem]"
         />
         <div class="flex items-center gap-x-2">
           <Show when={labelCount() && labels().length}>
···
                 <Button onClick={() => refetch()}>Load More</Button>
               </Show>
               <Show when={response.loading}>
-                <div class="i-lucide-loader-circle animate-spin text-xl" />
+                <div class="iconify lucide--loader-circle animate-spin text-xl" />
               </Show>
             </div>
           </Show>
         </div>
       </div>
       <Show when={labels().length}>
-        <div class="break-anywhere min-w-22rem sm:min-w-24rem divide-y-0.5 flex flex-col gap-2 divide-neutral-400 whitespace-pre-wrap text-sm dark:divide-neutral-600">
+        <div class="flex min-w-[22rem] flex-col gap-2 divide-y-[0.5px] divide-neutral-400 text-sm wrap-anywhere whitespace-pre-wrap sm:min-w-[24rem] dark:divide-neutral-600">
           <For each={filterLabels()}>
             {(label) => (
               <div class="flex items-center justify-between gap-2 pb-2">
···
                     <A
                       href={`/at://${label.uri.replace("at://", "")}`}
                       target="_blank"
-                      class="text-blue-400 hover:underline"
+                      class="text-blue-400 hover:underline active:underline"
                     >
                       {label.uri}
                     </A>
···
                   </Show>
                 </div>
                 <Show when={label.neg}>
-                  <div class="i-lucide-minus shrink-0 text-lg text-red-500 dark:text-red-400" />
+                  <div class="iconify lucide--minus shrink-0 text-lg text-red-500 dark:text-red-400" />
                 </Show>
               </div>
             )}

src/views/pds.tsx

···
                 <div class="flex flex-col">
                   <span class="font-semibold">Available User Domains</span>
                   <For each={server().availableUserDomains}>
-                    {(domain) => <span class="break-anywhere text-sm">{domain}</span>}
+                    {(domain) => <span class="text-sm wrap-anywhere">{domain}</span>}
                   </For>
                 </div>
               </Show>
···
             <A
               href={`/at://${repo.did}`}
               classList={{
-                "rounded items-center text-sm gap-1 flex justify-between font-mono relative hover:bg-neutral-200 dark:hover:bg-neutral-700": true,
+                "rounded items-center text-sm gap-1 flex justify-between font-mono relative hover:bg-neutral-200 dark:hover:bg-neutral-700 active:bg-neutral-200 dark:active:bg-neutral-700": true,
                 "text-blue-400": repo.active,
                 "text-neutral-400 dark:text-neutral-500": !repo.active,
               }}
···
               <Show when={!repo.active}>
                 <div class="absolute -left-4">
                   <Tooltip text={repo.status ?? "???"}>
-                    <div class="i-lucide-skull" />
+                    <span class="iconify lucide--skull"></span>
                   </Tooltip>
                 </div>
               </Show>
···
             <Button onClick={() => refetch()}>Load More</Button>
           </Show>
           <Show when={response.loading}>
-            <div class="i-lucide-loader-circle animate-spin text-xl" />
+            <span class="iconify lucide--loader-circle animate-spin text-xl"></span>
           </Show>
         </div>
       </div>

src/views/record.tsx

···
   return (
     <div class="flex w-full flex-col items-center">
       <Show when={record() === undefined && validRecord() !== false}>
-        <div class="i-lucide-loader-circle mt-3 animate-spin text-xl" />
+        <div class="iconify lucide--loader-circle mt-3 animate-spin text-xl" />
       </Show>
       <Show when={validRecord() === false}>
         <div class="mt-3 break-words text-red-500 dark:text-red-400">{notice()}</div>
       </Show>
       <Show when={record()}>
-        <div class="w-22rem sm:w-24rem dark:shadow-dark-900/80 dark:bg-dark-300 my-3 flex justify-between rounded-lg bg-white px-2 py-1.5 shadow-sm">
+        <div class="dark:shadow-dark-900/80 dark:bg-dark-300 my-3 flex w-[22rem] justify-between rounded-lg bg-white px-2 py-1.5 shadow-sm sm:w-[24rem]">
           <div class="flex gap-3 text-sm">
             <button
               classList={{
···
               }}
               onclick={() => setShowBacklinks(!showBacklinks())}
             >
-              <div class="i-lucide-file-json" />
+              <div class="iconify lucide--file-json" />
               Record
             </button>
             <button
···
               }}
               onclick={() => setShowBacklinks(!showBacklinks())}
             >
-              <div class="i-lucide-send-to-back" />
+              <div class="iconify lucide--send-to-back" />
               Backlinks
             </button>
           </div>
···
               <RecordEditor create={false} record={record()?.value} />
               <Tooltip text="Delete">
                 <button
-                  class="rounded-sm p-1 hover:bg-neutral-100 dark:hover:bg-neutral-600"
+                  class="flex items-center rounded-sm p-1 hover:bg-neutral-100 active:bg-neutral-100 dark:hover:bg-neutral-600 dark:active:bg-neutral-600"
                   onclick={() => setOpenDelete(true)}
                 >
-                  <div class="i-lucide-trash-2" />
+                  <span class="iconify lucide--trash-2"></span>
                 </button>
               </Tooltip>
               <Modal open={openDelete()} onClose={() => setOpenDelete(false)}>
-                <div class="starting:opacity-0 dark:bg-dark-800/70 border-0.5 dark:shadow-dark-900/80 backdrop-blur-xs left-50% top-70 absolute -translate-x-1/2 rounded-lg border-neutral-300 bg-neutral-200/70 p-4 text-neutral-900 shadow-md transition-opacity duration-300 dark:border-neutral-700 dark:text-neutral-200">
+                <div class="dark:bg-dark-800/70 border-0.5 dark:shadow-dark-900/80 left-50% absolute top-70 -translate-x-1/2 rounded-lg border-neutral-300 bg-neutral-200/70 p-4 text-neutral-900 shadow-md backdrop-blur-xs transition-opacity duration-300 dark:border-neutral-700 dark:text-neutral-200 starting:opacity-0">
                   <h2 class="mb-2 font-bold">Delete this record?</h2>
                   <div class="flex justify-end gap-2">
                     <Button onClick={() => setOpenDelete(false)}>Cancel</Button>
                     <Button
                       onClick={deleteRecord}
-                      class="dark:shadow-dark-900/80 rounded-lg bg-red-500 px-2 py-1.5 text-xs font-semibold text-neutral-200 shadow-sm hover:bg-red-400"
+                      class="dark:shadow-dark-900/80 rounded-lg bg-red-500 px-2 py-1.5 text-xs font-semibold text-neutral-200 shadow-sm hover:bg-red-400 active:bg-red-400"
                     >
                       Delete
                     </Button>
···
             </Show>
             <Tooltip text="Copy record">
               <button
-                class="rounded-sm p-1 hover:bg-neutral-100 dark:hover:bg-neutral-600"
+                class="flex items-center rounded-sm p-1 hover:bg-neutral-100 active:bg-neutral-100 dark:hover:bg-neutral-600 dark:active:bg-neutral-600"
                 onclick={() => addToClipboard(JSON.stringify(record()?.value, null, 2))}
               >
-                <div class="i-lucide-copy" />
+                <span class="iconify lucide--copy"></span>
               </button>
             </Tooltip>
             <Show when={externalLink()}>
               {(externalLink) => (
                 <Tooltip text={`Open on ${externalLink().label}`}>
                   <a
-                    class="rounded-sm p-1 hover:bg-neutral-100 dark:hover:bg-neutral-600"
+                    class="flex items-center rounded-sm p-1 hover:bg-neutral-100 active:bg-neutral-100 dark:hover:bg-neutral-600 dark:active:bg-neutral-600"
                     target="_blank"
                     href={externalLink()?.link}
                   >
-                    <div class={`${externalLink().icon ?? "i-lucide-app-window"}`} />
+                    <span class={`iconify ${externalLink().icon ?? "lucide--app-window"}`}></span>
                   </a>
                 </Tooltip>
               )}
             </Show>
             <Tooltip text="Record on PDS">
               <a
-                class="rounded-sm p-1 hover:bg-neutral-100 dark:hover:bg-neutral-600"
+                class="flex items-center rounded-sm p-1 hover:bg-neutral-100 active:bg-neutral-100 dark:hover:bg-neutral-600 dark:active:bg-neutral-600"
                 href={`https://${pds()}/xrpc/com.atproto.repo.getRecord?repo=${params.repo}&collection=${params.collection}&rkey=${params.rkey}`}
                 target="_blank"
               >
-                <div class="i-lucide-external-link" />
+                <span class="iconify lucide--external-link"></span>
               </a>
             </Tooltip>
           </div>
         </div>
         <Show when={!showBacklinks()}>
-          <div class="break-anywhere w-full whitespace-pre-wrap font-mono text-xs sm:text-sm">
+          <div class="w-full font-mono text-xs wrap-anywhere whitespace-pre-wrap sm:text-sm">
             <JSONValue data={record()?.value as any} repo={record()!.uri.split("/")[2]} />
           </div>
         </Show>
         <Show when={showBacklinks()}>
           <ErrorBoundary fallback={(err) => <div class="break-words">Error: {err.message}</div>}>
             <Suspense
-              fallback={<div class="i-lucide-loader-circle animate-spin self-center text-xl" />}
+              fallback={
+                <div class="iconify lucide--loader-circle animate-spin self-center text-xl" />
+              }
             >
               <Backlinks target={`at://${did}/${params.collection}/${params.rkey}`} />
             </Suspense>

src/views/repo.tsx

···
   const FilterButton = (props: { icon: string; event: PlcEvent }) => (
     <button
       classList={{
-        "rounded-full p-1.5": true,
+        "flex items-center rounded-full p-1.5": true,
         "bg-neutral-700 dark:bg-neutral-200": activePlcEvent() === props.event,
       }}
       onclick={() => setActivePlcEvent(activePlcEvent() === props.event ? undefined : props.event)}
     >
-      <div
+      <span
         class={`${props.icon} ${activePlcEvent() === props.event ? "text-neutral-200 dark:text-neutral-900" : ""}`}
-      />
+      ></span>
     </button>
   );
 
   const DiffItem = (props: { diff: DiffEntry }) => {
     const diff = props.diff;
     let title = "Unknown log entry";
-    let icon = "i-lucide-circle-help";
+    let icon = "lucide--circle-help";
     let value = "";
 
     if (diff.type === "identity_created") {
-      icon = "i-lucide-bell";
+      icon = "lucide--bell";
       title = `Identity created`;
     } else if (diff.type === "identity_tombstoned") {
-      icon = "i-lucide-skull";
+      icon = "lucide--skull";
       title = `Identity tombstoned`;
     } else if (diff.type === "handle_added" || diff.type === "handle_removed") {
-      icon = "i-lucide-at-sign";
+      icon = "lucide--at-sign";
       title = diff.type === "handle_added" ? "Alias added" : "Alias removed";
       value = diff.handle;
     } else if (diff.type === "handle_changed") {
-      icon = "i-lucide-at-sign";
+      icon = "lucide--at-sign";
       title = "Alias updated";
       value = `${diff.prev_handle} → ${diff.next_handle}`;
     } else if (diff.type === "rotation_key_added" || diff.type === "rotation_key_removed") {
-      icon = "i-lucide-key-round";
+      icon = "lucide--key-round";
       title = diff.type === "rotation_key_added" ? "Rotation key added" : "Rotation key removed";
       value = diff.rotation_key;
     } else if (diff.type === "service_added" || diff.type === "service_removed") {
-      icon = "i-lucide-server";
+      icon = "lucide--server";
       title = `Service ${diff.service_id} ${diff.type === "service_added" ? "added" : "removed"}`;
       value = `${diff.service_endpoint}`;
     } else if (diff.type === "service_changed") {
-      icon = "i-lucide-server";
+      icon = "lucide--server";
       title = `Service ${diff.service_id} updated`;
       value = `${diff.prev_service_endpoint} → ${diff.next_service_endpoint}`;
     } else if (
       diff.type === "verification_method_added" ||
       diff.type === "verification_method_removed"
     ) {
-      icon = "i-lucide-shield-check";
+      icon = "lucide--shield-check";
       title = `Verification method ${diff.method_id} ${diff.type === "verification_method_added" ? "added" : "removed"}`;
       value = `${diff.method_key}`;
     } else if (diff.type === "verification_method_changed") {
-      icon = "i-lucide-shield-check";
+      icon = "lucide--shield-check";
       title = `Verification method ${diff.method_id} updated`;
       value = `${diff.prev_method_key} → ${diff.next_method_key}`;
     }
 
     return (
       <div class="grid grid-cols-[min-content_1fr] items-center gap-x-1">
-        <div class={icon + ` shrink-0`} />
+        <div class={icon + ` iconify shrink-0`} />
         <p
           classList={{
             "font-semibold": true,
···
       <div class="flex items-center justify-between">
         <div class="flex items-center gap-1">
           <Tooltip text="Filter operations">
-            <div class="i-lucide-filter" />
+            <div class="iconify lucide--filter" />
           </Tooltip>
           <div class="dark:shadow-dark-900/80 dark:bg-dark-300 flex w-fit items-center rounded-full bg-white shadow-sm">
-            <FilterButton icon="i-lucide-at-sign" event="handle" />
-            <FilterButton icon="i-lucide-key-round" event="rotation_key" />
-            <FilterButton icon="i-lucide-server" event="service" />
-            <FilterButton icon="i-lucide-shield-check" event="verification_method" />
+            <FilterButton icon="iconify lucide--at-sign" event="handle" />
+            <FilterButton icon="iconify lucide--key-round" event="rotation_key" />
+            <FilterButton icon="iconify lucide--server" event="service" />
+            <FilterButton icon="iconify lucide--shield-check" event="verification_method" />
           </div>
         </div>
         <Tooltip text="Audit log">
           <a
             href={`${localStorage.plcDirectory ?? "https://plc.directory"}/${props.did}/log/audit`}
             target="_blank"
+            class="flex items-center"
           >
-            <div class="i-lucide-external-link" />
+            <span class="iconify lucide--external-link"></span>
           </a>
         </Tooltip>
       </div>
···
       }}
       onclick={() => setTab(props.tab)}
     >
-      <div class={props.icon} />
+      <div class={"iconify " + props.icon} />
       {props.label}
     </button>
   );
···
         </Show>
         <div class="flex justify-between text-sm">
           <Show when={!error()}>
-            <RepoTab tab="collections" label="Collections" icon="i-lucide-folder-open" />
+            <RepoTab tab="collections" label="Collections" icon="lucide--folder-open" />
           </Show>
-          <RepoTab tab="doc" label="Identity" icon="i-lucide-id-card" />
+          <RepoTab tab="doc" label="Identity" icon="lucide--id-card" />
           <Show when={!error()}>
-            <RepoTab tab="blobs" label="Blobs" icon="i-lucide-file-digit" />
+            <RepoTab tab="blobs" label="Blobs" icon="lucide--file-digit" />
           </Show>
-          <RepoTab tab="backlinks" label="Backlinks" icon="i-lucide-send-to-back" />
+          <RepoTab tab="backlinks" label="Backlinks" icon="lucide--send-to-back" />
         </div>
         <Show when={tab() === "backlinks"}>
           <ErrorBoundary fallback={(err) => <div class="break-words">Error: {err.message}</div>}>
             <Suspense
-              fallback={<div class="i-lucide-loader-circle animate-spin self-center text-xl" />}
+              fallback={
+                <div class="iconify lucide--loader-circle animate-spin self-center text-xl" />
+              }
             >
               <Backlinks target={did} />
             </Suspense>
···
         <Show when={tab() === "blobs"}>
           <ErrorBoundary fallback={(err) => <div class="break-words">Error: {err.message}</div>}>
             <Suspense
-              fallback={<div class="i-lucide-loader-circle animate-spin self-center text-xl" />}
+              fallback={
+                <div class="iconify lucide--loader-circle animate-spin self-center text-xl" />
+              }
             >
               <BlobView pds={pds!} repo={did} />
             </Suspense>
···
               >
                 {(authority) => (
                   <>
-                    <button onclick={() => toggleCollection(authority)}>
-                      <div
+                    <button onclick={() => toggleCollection(authority)} class="flex items-center">
+                      <span
                         classList={{
-                          "i-lucide-chevron-down text-lg transition-transform": true,
+                          "iconify lucide--chevron-down text-lg transition-transform": true,
                           "-rotate-90": nsids()?.[authority].hidden,
                         }}
-                      />
+                      ></span>
                     </button>
                     <button
-                      class="break-anywhere bg-transparent text-left"
+                      class="bg-transparent text-left wrap-anywhere"
                       onclick={() => toggleCollection(authority)}
                     >
                       {authority}
···
                           {(nsid) => (
                             <A
                               href={`/at://${did}/${authority}.${nsid}`}
-                              class="text-blue-400 hover:underline"
+                              class="text-blue-400 hover:underline active:underline"
                             >
                               {authority}.{nsid}
                             </A>
···
         <Show when={tab() === "doc"}>
           <Show when={didDoc()}>
             {(didDocument) => (
-              <div class="break-anywhere flex flex-col gap-y-2">
+              <div class="flex flex-col gap-y-2 wrap-anywhere">
                 <div class="flex flex-col gap-y-1">
                   <div class="flex items-baseline justify-between gap-2">
                     <div>
                       <div class="flex items-center gap-1">
-                        <div class="i-lucide-id-card" />
+                        <div class="iconify lucide--id-card" />
                         <p class="font-semibold">ID</p>
                       </div>
                       <div class="text-sm">{didDocument().id}</div>
···
                           : `https://${did.split("did:web:")[1]}/.well-known/did.json`
                         }
                         target="_blank"
+                        class="flex items-center"
                       >
-                        <div class="i-lucide-external-link" />
+                        <span class="iconify lucide--external-link"></span>
                       </a>
                     </Tooltip>
                   </div>
                   <div>
                     <div class="flex items-center gap-1">
-                      <div class="i-lucide-at-sign" />
+                      <div class="iconify lucide--at-sign" />
                       <p class="font-semibold">Aliases</p>
                     </div>
                     <ul>
···
                   </div>
                   <div>
                     <div class="flex items-center gap-1">
-                      <div class="i-lucide-server" />
+                      <div class="iconify lucide--server" />
                       <p class="font-semibold">Services</p>
                     </div>
                     <ul>
···
                           <li class="flex flex-col text-sm">
                             <span>#{service.id.split("#")[1]}</span>
                             <a
-                              class="w-fit text-blue-400 hover:underline"
+                              class="w-fit text-blue-400 hover:underline active:underline"
                               href={service.serviceEndpoint.toString()}
                               target="_blank"
                             >
···
                   </div>
                   <div>
                     <div class="flex items-center gap-1">
-                      <div class="i-lucide-shield-check" />
+                      <div class="iconify lucide--shield-check" />
                       <p class="font-semibold">Verification methods</p>
                     </div>
                     <ul>
···
                                 <span class="flex justify-between gap-1">
                                   <span>#{verif.id.split("#")[1]}</span>
                                   <span class="flex items-center gap-0.5">
-                                    <div class="i-lucide-key-round" />
+                                    <div class="iconify lucide--key-round" />
                                     <ErrorBoundary fallback={<>unknown</>}>
                                       {parsePublicMultikey(key()).type}
                                     </ErrorBoundary>
···
                           setShowPlcLogs(!showPlcLogs());
                         }}
                       >
-                        <div class="i-lucide-logs text-sm" />
+                        <span class="iconify lucide--logs text-sm"></span>
                         {showPlcLogs() ? "Hide" : "Show"} PLC Logs
                       </Button>
                       <Show when={loading()}>
-                        <div class="i-lucide-loader-circle animate-spin text-xl" />
+                        <div class="iconify lucide--loader-circle animate-spin text-xl" />
                       </Show>
                     </div>
                   </Show>
···
                       }}
                     >
                       <Show when={downloading()}>
-                        <div class="i-lucide-loader-circle animate-spin text-xl" />
+                        <div class="iconify lucide--loader-circle animate-spin text-xl" />
                       </Show>
                       <Button onClick={() => downloadRepo()}>
-                        <div class="i-lucide-download text-sm" />
+                        <span class="iconify lucide--download text-sm"></span>
                         Export Repo
                       </Button>
                     </div>

src/views/stream.tsx

···
           inactiveClass="border-transparent hover:border-neutral-400 dark:hover:border-neutral-600"
           href="/jetstream"
         >
-          <div class="i-lucide-wind" />
+          <span class="iconify lucide--wind"></span>
           Jetstream
         </A>
         <A
···
           inactiveClass="border-transparent hover:border-neutral-400 dark:hover:border-neutral-600"
           href="/firehose"
         >
-          <div class="i-lucide-fire-extinguisher" />
+          <span class="iconify lucide--fire-extinguisher"></span>
           Firehose
         </A>
       </div>
       <form
         ref={formRef}
-        class="z-5 dark:bg-dark-500/70 backdrop-blur-xs sticky top-0 flex w-screen flex-col items-center bg-neutral-100/70 px-4 text-sm"
+        class="dark:bg-dark-500/70 sticky top-0 z-5 flex w-screen flex-col items-center bg-neutral-100/70 px-4 text-sm backdrop-blur-xs"
       >
         <div class="flex flex-col gap-2 py-3">
           <Show when={!connected()}>
···
                     "wss://jetstream1.us-east.bsky.network/subscribe"
                   : "wss://bsky.network")
                 }
-                class="w-16rem"
+                class="w-[16rem]"
               />
             </label>
             <Show when={streamType === StreamType.JETSTREAM}>
···
                   spellcheck={false}
                   placeholder="Comma-separated list of collections"
                   value={searchParams.collections ?? ""}
-                  class="w-16rem dark:bg-dark-100 focus:outline-1.5 dark:shadow-dark-900/80 rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-neutral-900 dark:focus:outline-neutral-200"
+                  class="dark:bg-dark-100 focus:outline-1.5 dark:shadow-dark-900/80 w-[16rem] rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-neutral-900 dark:focus:outline-neutral-200"
                 />
               </label>
             </Show>
···
                   spellcheck={false}
                   placeholder="Comma-separated list of DIDs"
                   value={searchParams.dids ?? ""}
-                  class="w-16rem dark:bg-dark-100 focus:outline-1.5 dark:shadow-dark-900/80 rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-neutral-900 dark:focus:outline-neutral-200"
+                  class="dark:bg-dark-100 focus:outline-1.5 dark:shadow-dark-900/80 w-[16rem] rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-neutral-900 dark:focus:outline-neutral-200"
                 />
               </label>
             </Show>
···
                 name="cursor"
                 placeholder="Leave empty for live-tail"
                 value={searchParams.cursor ?? ""}
-                class="w-16rem"
+                class="w-[16rem]"
               />
             </label>
             <Show when={streamType === StreamType.JETSTREAM}>
···
             </Show>
           </Show>
           <Show when={connected()}>
-            <div class="break-anywhere flex flex-col gap-1">
+            <div class="flex flex-col gap-1 wrap-anywhere">
               <For each={parameters()}>
                 {(param) => (
                   <Show when={param.param}>
                     <div class="flex">
-                      <div class="min-w-6rem font-semibold">{param.name}</div>
+                      <div class="min-w-[6rem] font-semibold">{param.name}</div>
                       {param.param}
                     </div>
                   </Show>
···
       <Show when={notice().length}>
         <div class="text-red-500 dark:text-red-400">{notice()}</div>
       </Show>
-      <div class="break-anywhere md:w-screen-md divide-y-0.5 flex w-full flex-col gap-2 divide-neutral-500 whitespace-pre-wrap px-4 font-mono text-sm">
+      <div class="flex w-full flex-col gap-2 divide-y-[0.5px] divide-neutral-500 px-4 font-mono text-sm wrap-anywhere whitespace-pre-wrap md:w-[48rem]">
         <For each={records().toReversed()}>
           {(rec) => (
             <div class="pb-2">

uno.config.ts

···
-import { defineConfig, presetIcons, presetWebFonts, presetWind4 } from "unocss";
-
-export default defineConfig({
-  presets: [
-    presetIcons(),
-    presetWind4(),
-    presetWebFonts({
-      provider: "none",
-      fonts: {
-        sans: "Inter:400,600,700",
-        mono: "Roboto Mono:400",
-      },
-    }),
-  ],
-});

vite.config.ts

···
 import { defineConfig } from "vite";
 import solidPlugin from "vite-plugin-solid";
-import UnoCSS from "unocss/vite";
 import metadata from "./public/oauth-client-metadata.json";
+import tailwindcss from "@tailwindcss/vite";
 
 const SERVER_HOST = "127.0.0.1";
 const SERVER_PORT = 13213;
 
 export default defineConfig({
   plugins: [
-    UnoCSS(),
+    tailwindcss(),
     solidPlugin(),
     // Injects OAuth-related variables
     {