chore: add gif and audio preview to examples

examples/App.css

@@ -140,6 +140,55 @@ body {
   accent-color: #ef4444;
 }
 
+.media-test-section {
+  max-width: 1200px;
+  margin: 2rem auto 0;
+}
+
+.media-test-section h2 {
+  font-size: 1.8rem;
+  color: #ef4444;
+  margin-bottom: 0.35rem;
+}
+
+.media-test-subtitle {
+  color: #94a3b8;
+  margin-bottom: 1.3rem;
+}
+
+.media-test-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 1.25rem;
+}
+
+.media-test-card {
+  background-color: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 12px;
+  padding: 1rem;
+}
+
+.media-test-card h3 {
+  color: #f1f5f9;
+  margin-bottom: 0.45rem;
+}
+
+.media-test-card p {
+  color: #cbd5e1;
+  font-size: 0.95rem;
+  margin-bottom: 0.85rem;
+}
+
+.media-test-player {
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.media-test-player-gif {
+  max-width: 320px;
+}
+
 .features-section {
   margin-top: 4rem;
 }
@@ -217,6 +266,14 @@ kbd {
     flex-direction: column;
   }
 
+  .media-test-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .media-test-player-gif {
+    max-width: 100%;
+  }
+
   .features-grid {
     grid-template-columns: 1fr;
   }