样式修改

src/styles/index.css

@@ -13,8 +13,7 @@ html, body {
   background: rgb(255 255 255 / 6%);
 
   /* 核心模糊 */
-  backdrop-filter: blur(36px);
-  -webkit-backdrop-filter: blur(36px);
+  @apply backdrop-blur-[36px];
 
   /* 圆角：由于你有 border-image，建议使用这种方式保留圆角 */
   border-radius: 999px;
@@ -43,34 +42,7 @@ html, body {
 
 @import "tailwindcss";
 @import "tw-animate-css";
-@layer utilities {
-  .lucid-capsule {
-    /* 1. 圆角与模糊 */
-    border-radius: 90px;
-    backdrop-filter: blur(18px);
-    -webkit-backdrop-filter: blur(18px);
 
-    /* 2. 边框：仅顶部和左侧，模拟光线从左上方射入 */
-    border-top: 1px solid #FFFFFF;
-    border-left: 1px solid #FFFFFF;
-
-    /* 3. 多层背景与混合模式 (核心：注意叠加顺序) */
-    background:
-      linear-gradient(0deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.10)), /* 顶层：提亮 */
-      linear-gradient(0deg, #1D1D1D, #1D1D1D),                                    /* 中层：底色 */
-      rgba(29, 29, 29, 0.10);                                                     /* 底层：深度 */
-
-    background-blend-mode: normal, plus-lighter, color-burn;
-
-    /* 4. 五层复合内阴影 */
-    box-shadow:
-      -4.5px -4.5px 1.5px -5.25px rgba(255, 255, 255, 0.50) inset,
-      4.5px 4.5px 1.5px -5.25px rgba(255, 255, 255, 0.50) inset,
-      3px 4.5px 1.5px -3px rgba(179, 179, 179, 0.20) inset,
-      -3px -4.5px 1.5px -3px #B3B3B3 inset,
-      0 0 33px 0 rgba(242, 242, 242, 0.50) inset;
-  }
-}
 @layer components {
   .container {
     width: 100%;