Switch to light theme for better readability

index.html

@@ -6,22 +6,23 @@
 <title>Audio Understanding Experiment</title>
 <style>
 * { margin: 0; padding: 0; box-sizing: border-box; }
-body { font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif; background: #111318; color: #d4d4d8; }
+body { font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif; background: #f8f9fa; color: #1a1a2e; }
 
 /* Top audio bar — persistent */
 .audio-bar {
   position: fixed; top: 0; left: 0; right: 0; z-index: 100;
-  background: #18191f; border-bottom: 1px solid #2a2d3a;
+  background: #fff; border-bottom: 1px solid #e2e4e9;
   padding: 0.5rem 1.5rem;
   display: flex; align-items: center; gap: 1rem;
   height: 56px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
 }
 .audio-bar .bar-label {
   font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
-  letter-spacing: 0.06em; color: #71717a; white-space: nowrap;
+  letter-spacing: 0.06em; color: #6b7280; white-space: nowrap;
 }
 .audio-bar .bar-date {
-  font-size: 0.68rem; color: #52525b; white-space: nowrap;
+  font-size: 0.68rem; color: #9ca3af; white-space: nowrap;
 }
 .audio-bar audio { flex: 1; height: 32px; min-width: 0; }
 
@@ -30,57 +31,58 @@ body { font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-
 
 /* Sidebar */
 .sidebar {
-  width: 260px; min-width: 260px; background: #15161c;
-  border-right: 1px solid #27272a; display: flex; flex-direction: column; overflow: hidden;
+  width: 260px; min-width: 260px; background: #fff;
+  border-right: 1px solid #e2e4e9; display: flex; flex-direction: column; overflow: hidden;
 }
 .sidebar-header {
-  padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid #27272a;
+  padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid #e2e4e9;
 }
-.sidebar-header h1 { font-size: 1.05rem; font-weight: 700; color: #fafafa; margin-bottom: 0.15rem; }
-.sidebar-header p { font-size: 0.72rem; color: #71717a; }
+.sidebar-header h1 { font-size: 1.05rem; font-weight: 700; color: #111827; margin-bottom: 0.15rem; }
+.sidebar-header p { font-size: 0.72rem; color: #6b7280; }
 .category-list { overflow-y: auto; flex: 1; padding: 0.4rem 0; }
 .category-btn {
   display: flex; justify-content: space-between; align-items: center;
   width: 100%; padding: 0.55rem 1.25rem; background: none; border: none;
-  color: #a1a1aa; font-size: 0.8rem; cursor: pointer; text-align: left;
+  color: #4b5563; font-size: 0.8rem; cursor: pointer; text-align: left;
   transition: all 0.12s;
 }
-.category-btn:hover { background: #1c1d25; color: #d4d4d8; }
+.category-btn:hover { background: #f3f4f6; color: #111827; }
 .category-btn.active {
-  background: #1c1d25; color: #818cf8;
-  border-left: 3px solid #818cf8; padding-left: calc(1.25rem - 3px);
+  background: #eef2ff; color: #4338ca;
+  border-left: 3px solid #4338ca; padding-left: calc(1.25rem - 3px);
 }
 .category-btn .count {
-  background: #27272a; color: #71717a; font-size: 0.68rem;
+  background: #f3f4f6; color: #6b7280; font-size: 0.68rem;
   padding: 0.1rem 0.45rem; border-radius: 8px; font-weight: 600;
 }
-.category-btn.active .count { background: #312e81; color: #a5b4fc; }
-.cat-all { font-weight: 600; color: #d4d4d8; }
+.category-btn.active .count { background: #e0e7ff; color: #4338ca; }
+.cat-all { font-weight: 600; color: #111827; }
 
 /* Main content */
-.main { flex: 1; overflow-y: auto; padding: 2rem 2.5rem; }
+.main { flex: 1; overflow-y: auto; padding: 2rem 2.5rem; background: #f8f9fa; }
 .results-header { margin-bottom: 1.5rem; }
-.results-header h2 { font-size: 1.3rem; font-weight: 700; color: #fafafa; }
-.results-header .subtitle { font-size: 0.8rem; color: #71717a; margin-top: 0.3rem; }
+.results-header h2 { font-size: 1.3rem; font-weight: 700; color: #111827; }
+.results-header .subtitle { font-size: 0.8rem; color: #6b7280; margin-top: 0.3rem; }
 
 /* Cards */
 .card {
-  background: #18191f; border: 1px solid #27272a;
+  background: #fff; border: 1px solid #e2e4e9;
   border-radius: 8px; margin-bottom: 0.75rem; overflow: hidden;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
 }
 .card-header {
   padding: 0.85rem 1.15rem; display: flex; justify-content: space-between;
   align-items: center; cursor: pointer; transition: background 0.12s;
 }
-.card-header:hover { background: #1c1d25; }
-.card-title { font-size: 0.88rem; font-weight: 600; color: #e4e4e7; }
+.card-header:hover { background: #f9fafb; }
+.card-title { font-size: 0.88rem; font-weight: 600; color: #111827; }
 .card-meta { display: flex; gap: 0.5rem; align-items: center; }
 .badge {
   font-size: 0.65rem; padding: 0.2rem 0.55rem; border-radius: 5px;
-  background: #27272a; color: #a1a1aa; white-space: nowrap; font-weight: 500;
+  background: #f3f4f6; color: #6b7280; white-space: nowrap; font-weight: 500;
 }
-.badge-cat { background: #1e1b4b; color: #a5b4fc; }
-.chevron { color: #52525b; font-size: 0.75rem; transition: transform 0.2s; margin-left: 0.25rem; }
+.badge-cat { background: #eef2ff; color: #4338ca; }
+.chevron { color: #9ca3af; font-size: 0.75rem; transition: transform 0.2s; margin-left: 0.25rem; }
 .card.open .chevron { transform: rotate(90deg); }
 .card-body { display: none; padding: 0 1.15rem 1.15rem; }
 .card.open .card-body { display: block; }
@@ -88,26 +90,26 @@ body { font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-
 /* Prompt box — distinctive */
 .prompt-label {
   font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em;
-  color: #6d9ecf; margin-bottom: 0.3rem; font-weight: 600;
+  color: #2563eb; margin-bottom: 0.3rem; font-weight: 600;
 }
 .prompt-box {
-  background: #0f1d2d; border: 1px solid #1e3a5f;
+  background: #eff6ff; border: 1px solid #bfdbfe;
   border-left: 3px solid #3b82f6; border-radius: 6px;
   padding: 0.85rem 1rem; margin-bottom: 1rem;
-  font-size: 0.82rem; line-height: 1.65; color: #93c5fd;
+  font-size: 0.84rem; line-height: 1.65; color: #1e40af;
   white-space: pre-wrap;
 }
 
 /* Output */
 .output-label {
   font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em;
-  color: #52525b; margin-bottom: 0.4rem; font-weight: 600;
+  color: #9ca3af; margin-bottom: 0.4rem; font-weight: 600;
 }
 .output-text {
-  font-size: 0.84rem; line-height: 1.75; color: #d4d4d8;
+  font-size: 0.86rem; line-height: 1.8; color: #374151;
   padding: 0.5rem 0;
 }
-.output-text h1, .output-text h2, .output-text h3 { color: #fafafa; margin: 1.2rem 0 0.5rem; font-weight: 600; }
+.output-text h1, .output-text h2, .output-text h3 { color: #111827; margin: 1.2rem 0 0.5rem; font-weight: 600; }
 .output-text h1 { font-size: 1.05rem; }
 .output-text h2 { font-size: 0.95rem; }
 .output-text h3 { font-size: 0.88rem; }
@@ -118,25 +120,25 @@ body { font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-
   border-collapse: collapse; margin: 0.75rem 0; width: 100%; font-size: 0.8rem;
 }
 .output-text th, .output-text td {
-  border: 1px solid #27272a; padding: 0.45rem 0.7rem; text-align: left;
+  border: 1px solid #e5e7eb; padding: 0.45rem 0.7rem; text-align: left;
 }
-.output-text th { background: #1c1d25; color: #a1a1aa; font-weight: 600; font-size: 0.75rem; }
-.output-text td { color: #d4d4d8; }
+.output-text th { background: #f9fafb; color: #4b5563; font-weight: 600; font-size: 0.75rem; }
+.output-text td { color: #374151; }
 .output-text code {
-  background: #1c1d25; padding: 0.15rem 0.4rem; border-radius: 4px;
-  font-size: 0.78rem; color: #a5b4fc; font-family: 'SF Mono', 'Fira Code', monospace;
+  background: #f3f4f6; padding: 0.15rem 0.4rem; border-radius: 4px;
+  font-size: 0.78rem; color: #4338ca; font-family: 'SF Mono', 'Fira Code', monospace;
 }
 .output-text blockquote {
-  border-left: 3px solid #3f3f46; padding-left: 0.85rem;
-  color: #a1a1aa; margin: 0.7rem 0; font-style: italic;
+  border-left: 3px solid #d1d5db; padding-left: 0.85rem;
+  color: #6b7280; margin: 0.7rem 0; font-style: italic;
 }
-.output-text strong { color: #fafafa; }
-.output-text em { color: #c4b5fd; }
-.output-text hr { border: none; border-top: 1px solid #27272a; margin: 1.2rem 0; }
+.output-text strong { color: #111827; }
+.output-text em { color: #6d28d9; }
+.output-text hr { border: none; border-top: 1px solid #e5e7eb; margin: 1.2rem 0; }
 
 .model-tag {
-  font-size: 0.68rem; color: #52525b; margin-top: 0.75rem;
-  padding-top: 0.5rem; border-top: 1px solid #27272a; text-align: right;
+  font-size: 0.68rem; color: #9ca3af; margin-top: 0.75rem;
+  padding-top: 0.5rem; border-top: 1px solid #f3f4f6; text-align: right;
 }
 
 /* Mobile */
@@ -144,7 +146,7 @@ body { font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-
   .audio-bar { padding: 0.4rem 0.75rem; gap: 0.5rem; }
   .audio-bar .bar-label { display: none; }
   .app { flex-direction: column; height: auto; }
-  .sidebar { width: 100%; min-width: auto; max-height: 45vh; border-right: none; border-bottom: 1px solid #27272a; }
+  .sidebar { width: 100%; min-width: auto; max-height: 45vh; border-right: none; border-bottom: 1px solid #e2e4e9; }
   .main { padding: 1.25rem; }
 }
 </style>