fixed css contrast, overflow, focus rings

src/index.css

@@ -32,14 +32,14 @@
 
 @layer base {
   :root {
-    font-size: 16px;
+    font-size: 100%;
   }
   
   body {
     font-family: 'Inter', sans-serif;
     background-color: #09090b;
     color: #e4e4e7;
-    overflow: hidden;
+    overflow-x: hidden;
     margin: 0;
     padding: 0;
   }
@@ -47,7 +47,7 @@
   #root {
     width: 100vw;
     height: 100vh;
-    overflow: hidden;
+    overflow-x: hidden;
   }
 }
 
@@ -104,7 +104,37 @@ body ::-webkit-scrollbar-thumb:hover,
 }
 
 .focus-ring-spacing:focus-within {
-  outline: 2px solid rgba(99, 102, 241, 0.3);
+  outline: 2px solid rgba(99, 102, 241, 0.8);
   outline-offset: -2px;
   border-radius: 8px;
 }
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Forced colors / high contrast mode */
+@media (forced-colors: active) {
+  .focus-ring-spacing:focus-within {
+    outline: 2px solid LinkText;
+  }
+}
+
+/* Screen reader only utility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}