Update favicon and enhance UI components for improved user experience

- Replaced PNG favicon with SVG for better scalability and visual quality across devices.
- Updated Vite configuration to include the new SVG favicon and adjusted asset paths.
- Enhanced various UI components with improved focus management and accessibility features.
- Introduced new styles to hide scrollbars while maintaining scroll functionality for a cleaner interface.

neode-ui/src/components/Screensaver.vue

@@ -19,8 +19,8 @@
             />
           </div>
           <!-- Logo in center -->
-          <div class="screensaver-logo-wrapper relative z-10">
-            <AnimatedLogo size="xl" />
+          <div class="screensaver-logo-wrapper">
+            <ScreensaverLogo />
           </div>
         </div>
       </div>
@@ -30,7 +30,7 @@
 
 <script setup lang="ts">
 import { onMounted, onBeforeUnmount } from 'vue'
-import AnimatedLogo from '@/components/AnimatedLogo.vue'
+import ScreensaverLogo from '@/components/ScreensaverLogo.vue'
 import { useScreensaverStore } from '@/stores/screensaver'
 
 const store = useScreensaverStore()
@@ -100,12 +100,14 @@ onBeforeUnmount(() => {
   }
 }
 
-/* Ring of segments around the logo - audio viz style */
+/* Ring of segments around the logo - audio viz style (behind logo) */
 .screensaver-viz-ring {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
+  z-index: 0;
+  pointer-events: none;
   --viz-radius: 140px;
 }
 
@@ -175,6 +177,7 @@ onBeforeUnmount(() => {
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
+  z-index: 10;
   filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.15));
 }
 </style>