Update index.html

index.html

@@ -54,52 +54,52 @@ tailwind.config = {
   }
 }
 </script>
-<link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,700;1,9..144,300&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Syne:wght@400;700;800&display=swap" rel="stylesheet">
 <style>
   * { box-sizing: border-box; }
-  body { font-family: 'DM Mono', monospace; }
+  body { font-family: 'Inter', sans-serif; }
 
   body {
-    --bg:        #0d0d0f;
-    --surface:   #1a1a1f;
-    --border:    #2a2a32;
-    --mist:      #3d3d48;
-    --fog:       #6b6b7a;
-    --ghost:     #9898a8;
-    --pearl:     #c8c8d8;
-    --cream:     #e8e4dc;
-    --accent:    #d4a853;
-    --accent2:   #c47c3a;
-    --ink:       #0d0d0f;
-    --user-bg:   #d4a853;
-    --user-text: #0d0d0f;
-    --danger:    #b85c5c;
-    --safe:      #6b8f71;
-    --prose:     #c8c8d8;
-    --code-bg:   rgba(255,255,255,0.08);
-    --code-col:  #d4a853;
-    --pre-bg:    #111116;
+    --bg:        #080e1a;
+    --surface:   #0d1526;
+    --border:    #1a2a45;
+    --mist:      #152035;
+    --fog:       #3a5580;
+    --ghost:     #6a90c0;
+    --pearl:     #a0c0e8;
+    --cream:     #d0e4f8;
+    --accent:    #4a9eff;
+    --accent2:   #2a7ee0;
+    --ink:       #080e1a;
+    --user-bg:   #1a4a8a;
+    --user-text: #d0e4f8;
+    --danger:    #e05050;
+    --safe:      #40a880;
+    --prose:     #a0c0e8;
+    --code-bg:   rgba(74,158,255,0.08);
+    --code-col:  #60c0ff;
+    --pre-bg:    #060c18;
   }
   body.light {
-    --bg:        #f5f0e8;
-    --surface:   #ede8df;
-    --border:    #d8d0c4;
-    --mist:      #cfc7b8;
-    --fog:       #8a8070;
-    --ghost:     #6a6058;
-    --pearl:     #3a3028;
-    --cream:     #1a1208;
-    --accent:    #9a6010;
-    --accent2:   #7a4a08;
-    --ink:       #f5f0e8;
-    --user-bg:   #9a6010;
-    --user-text: #f5f0e8;
-    --danger:    #993030;
-    --safe:      #3a6a3a;
-    --prose:     #3a3028;
-    --code-bg:   rgba(0,0,0,0.07);
-    --code-col:  #7a4a08;
-    --pre-bg:    #e4ddd0;
+    --bg:        #eaf2ff;
+    --surface:   #ddeaf8;
+    --border:    #b8d0f0;
+    --mist:      #ccdff5;
+    --fog:       #6090c0;
+    --ghost:     #3a6090;
+    --pearl:     #1a3a6a;
+    --cream:     #0a1a3a;
+    --accent:    #1a60d0;
+    --accent2:   #0a48b0;
+    --ink:       #eaf2ff;
+    --user-bg:   #1a60d0;
+    --user-text: #eaf2ff;
+    --danger:    #c03030;
+    --safe:      #208860;
+    --prose:     #1a3a6a;
+    --code-bg:   rgba(26,96,208,0.07);
+    --code-col:  #0a48b0;
+    --pre-bg:    #d8eaf8;
   }
 
   body                { background: var(--bg); color: var(--pearl); }
@@ -128,31 +128,54 @@ tailwind.config = {
   .from-amber         { --tw-gradient-from: var(--accent) !important; }
   .to-ember           { --tw-gradient-to: var(--accent2) !important; }
   .bg-rose            { background: var(--danger) !important; }
-  .hover\:text-rose:hover { color: var(--danger) !important; }
-  .hover\:text-sage:hover { color: var(--safe) !important; }
+  .hover\:text-rose:hover  { color: var(--danger) !important; }
+  .hover\:text-sage:hover  { color: var(--safe) !important; }
   .hover\:text-pearl:hover { color: var(--pearl) !important; }
   textarea, input, select { background: var(--mist); color: var(--cream); }
 
-  .prose-msg { line-height: 1.65; color: var(--prose); }
+  /* Subtle starfield in dark mode */
+  body:not(.light) {
+    background-image:
+      radial-gradient(1px 1px at 20% 30%, rgba(160,200,255,0.4) 0%, transparent 100%),
+      radial-gradient(1px 1px at 75% 15%, rgba(160,200,255,0.3) 0%, transparent 100%),
+      radial-gradient(1px 1px at 55% 70%, rgba(160,200,255,0.25) 0%, transparent 100%),
+      radial-gradient(1px 1px at 90% 55%, rgba(160,200,255,0.2) 0%, transparent 100%),
+      radial-gradient(1px 1px at 10% 85%, rgba(160,200,255,0.2) 0%, transparent 100%);
+  }
+
+  /* Glowing accent on sidebar top */
+  body:not(.light) #sidebar::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--accent), transparent);
+    opacity: 0.5;
+  }
+  #sidebar { position: relative; }
+
+  .font-display { font-family: 'Syne', sans-serif !important; }
+
+  .prose-msg { line-height: 1.7; color: var(--prose); }
   .prose-msg p { margin: 0 0 0.6em; } .prose-msg p:last-child { margin-bottom: 0; }
-  .prose-msg code { font-family: 'DM Mono', monospace; background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.875em; color: var(--code-col); }
-  .prose-msg pre { background: var(--pre-bg); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; overflow-x: auto; margin: 0.6em 0; }
-  .prose-msg pre code { background: transparent; padding: 0; color: var(--prose); font-size: 0.82em; }
-  .prose-msg h1,.prose-msg h2,.prose-msg h3 { font-family: 'Fraunces', serif; color: var(--cream); margin: 0.8em 0 0.3em; font-weight: 700; }
+  .prose-msg code { font-family: 'Intel One Mono', 'Fira Code', monospace; background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.875em; color: var(--code-col); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); }
+  .prose-msg pre { background: var(--pre-bg); border: 1px solid var(--border); border-left: 2px solid var(--accent); border-radius: 6px; padding: 12px 14px; overflow-x: auto; margin: 0.6em 0; }
+  .prose-msg pre code { background: transparent; border: none; padding: 0; color: var(--prose); font-size: 0.82em; }
+  .prose-msg h1,.prose-msg h2,.prose-msg h3 { font-family: 'Syne', sans-serif; color: var(--cream); margin: 0.8em 0 0.3em; font-weight: 700; }
   .prose-msg h1 { font-size: 1.25em; } .prose-msg h2 { font-size: 1.1em; } .prose-msg h3 { font-size: 1em; }
   .prose-msg ul, .prose-msg ol { padding-left: 1.25em; margin: 0.4em 0 0.6em; }
+  .prose-msg li::marker { color: var(--accent); }
   .prose-msg li { margin: 0.2em 0; }
   .prose-msg blockquote { border-left: 2px solid var(--accent); padding-left: 0.75em; color: var(--ghost); margin: 0.5em 0; font-style: italic; }
   .prose-msg a { color: var(--accent); text-decoration: underline; }
   .prose-msg strong { color: var(--cream); font-weight: 500; }
   .prose-msg table { border-collapse: collapse; width: 100%; margin: 0.5em 0; font-size: 0.85em; }
-  .prose-msg th { background: var(--mist); color: var(--cream); padding: 5px 8px; text-align: left; }
+  .prose-msg th { background: var(--mist); color: var(--cream); padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--accent); }
   .prose-msg td { border-top: 1px solid var(--border); padding: 5px 8px; }
 
   .prose-user { line-height: 1.65; color: var(--user-text); }
   .prose-user p { margin: 0 0 0.5em; } .prose-user p:last-child { margin-bottom: 0; }
-  .prose-user code { background: rgba(0,0,0,0.12); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.875em; }
-  .prose-user pre { background: rgba(0,0,0,0.15); border-radius: 5px; padding: 10px 12px; overflow-x: auto; margin: 0.5em 0; }
+  .prose-user code { background: rgba(255,255,255,0.1); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.875em; }
   .prose-user strong { font-weight: 500; }
 
   textarea { resize: none; overflow: hidden; }
@@ -162,8 +185,7 @@ tailwind.config = {
   .dot-2 { animation: blink 1.2s 0.2s infinite; }
   .dot-3 { animation: blink 1.2s 0.4s infinite; }
   select { -webkit-appearance: none; appearance: none; }
-  textarea:focus, input:focus, select:focus { outline: none; box-shadow: 0 0 0 1.5px var(--accent); }
-  #input-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
+  textarea:focus, input:focus, select:focus { outline: none; box-shadow: 0 0 0 1.5px var(--accent), 0 0 12px color-mix(in srgb, var(--accent) 20%, transparent); }
   @media (max-width: 768px) { main { padding-bottom: 5vh; } }
 </style>
 </head>