Update README.md

README.md

@@ -18,40 +18,40 @@ language:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
-     <style>
+      <style>
         body {
             font-family: 'Philosopher', 'Segoe UI', Arial, sans-serif;
             line-height: 1.6;
             margin: 0;
             padding: 0;
-            /* --- Deep Night Sky Background --- */
-            background: #0a0a23; /* Darker base blue */
+            /* --- Deep Teal/Blue Night Sky Background --- */
+            background: #0a1829; /* Dark Navy Blue base */
         }
         .container {
             width: 100%;
             margin: 0;
-            /* --- Night Sky Gradient from Image --- */
-            background: linear-gradient(135deg, #0a0a23 0%, #1c1c3e 50%, #2d2d57 100%); /* Dark Blue to Indigo/Violet */
+            /* --- Night Sky Gradient from Image (Teal/Cyan focus) --- */
+            background: linear-gradient(135deg, #0a1829 0%, #0d2c3b 50%, #0e3d4a 100%); /* Dark Navy -> Dark Teal -> Tealish Blue */
             padding: 30px;
             box-sizing: border-box;
             /* --- Text Color - Light Grey (Pony's Body) --- */
-            color: #d8d8e0; /* Slightly cooler light grey */
-            /* --- Border & Glow - Golden Mane --- */
-            border: 3px solid #FFD700; /* Gold border */
-            box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0.5); /* Gold glow */
+            color: #d8d8e0; /* Kept light grey */
+            /* --- Border & Glow - Softer Gold (Mane Highlight) --- */
+            border: 3px solid #F0E68C; /* Khaki (Softer Gold) */
+            box-shadow: 0 0 15px 5px rgba(240, 230, 140, 0.4); /* Softer gold glow */
         }
         h1, h2 {
-            /* --- Headings - Golden Mane Color --- */
-            color: #FFD700; /* Gold */
-            /* --- Border - Darker Gold/Brown Hue --- */
-            border-bottom: 2px solid #DAA520; /* Goldenrod */
+            /* --- Headings - Softer Gold (Mane Mid-tone) --- */
+            color: #EEE8AA; /* PaleGoldenrod */
+            /* --- Border - Muted Gold/Brown (Mane Shadow) --- */
+            border-bottom: 2px solid #BDB76B; /* DarkKhaki */
             padding-bottom: 5px;
             margin-top: 0;
-            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Stronger shadow for contrast */
+            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Shadow for readability */
         }
-        /* --- Links - Bright Grey (Contrast/Pony Highlights) --- */
+        /* --- Links - Pale Yellow/Gold (Mane Highlight) --- */
         a {
-            color: #d3d3d3; /* LightGray */
+            color: #FFFACD; /* LemonChiffon */
             text-decoration: none;
         }
         a:hover {
@@ -60,7 +60,7 @@ language:
         }
         /* Specific Link */
          p a[href*="WoonaAI"] {
-            color: #d3d3d3; /* LightGray */
+            color: #FFFACD; /* LemonChiffon */
         }
         .model-image {
             text-align: center;
@@ -71,12 +71,12 @@ language:
             width: 100%;
             height: auto;
             border-radius: 10px;
-            /* --- Image Border & Glow - Golden Mane --- */
-            border: 3px solid #FFD700; /* Gold border */
-            box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0.5); /* Gold glow */
+            /* --- Image Border & Glow - Softer Gold --- */
+            border: 3px solid #F0E68C; /* Khaki */
+            box-shadow: 0 0 15px 5px rgba(240, 230, 140, 0.4); /* Softer gold glow */
             display: block;
         }
-        /* --- Table Styles - Night Theme with Gold/Grey --- */
+        /* --- Table Styles - Night Theme with Soft Gold/Grey --- */
         table {
             width: 100%;
             border-collapse: collapse;
@@ -99,40 +99,41 @@ language:
         th {
              background-color: transparent;
              font-weight: bold;
-             /* --- Table Headers - Golden Mane Color --- */
-             color: #FFD700; /* Gold */
+             /* --- Table Headers - Softer Gold --- */
+             color: #EEE8AA; /* PaleGoldenrod */
              text-align: left;
              border-bottom: none;
         }
         tr:hover {
             background: none;
         }
-        /* Emphasized Table Text - Bright Grey */
+        /* Emphasized Table Text - Pale Yellow/Gold */
         td strong, td u {
-             color: #d3d3d3; /* LightGray */
+             color: #FFFACD; /* LemonChiffon */
         }
-        /* --- Highlight/Warning Blocks - Gold/Grey Accents --- */
+        /* --- Highlight/Warning Blocks - Teal/Grey Accents --- */
         .highlight, .warning {
              padding: 15px 20px;
              margin: 20px 0;
              border-radius: 5px;
              border-left-width: 5px;
              border-left-style: solid;
-             color: #f0f0f8; /* Keep slightly lighter text for readability */
+             color: #f0f0f8; /* Keep slightly lighter text */
         }
         .highlight {
-            /* --- Highlight Block - Gold Accent --- */
-            background: rgba(255, 215, 0, 0.1); /* Semi-transparent Gold */
-            border-left-color: #FFD700; /* Gold */
+            /* --- Highlight Block - Teal Accent (Sky) --- */
+            background: rgba(32, 178, 170, 0.15); /* Semi-transparent LightSeaGreen */
+            border-left-color: #20B2AA; /* LightSeaGreen */
         }
         .highlight h3 {
-             color: #FFD700; /* Gold heading */
+             /* --- Highlight Heading - Brighter Teal --- */
+             color: #48D1CC; /* MediumTurquoise */
              margin-top: 0;
         }
         .warning {
-             /* --- Warning Block - Dark Grey Accent (Pony Body) --- */
-            background: rgba(60, 60, 80, 0.3); /* Semi-transparent dark grey-blue */
-            border-left-color: #808080; /* Grey */
+             /* --- Warning Block - Grey Accent (Pony Body) --- */
+            background: rgba(119, 136, 153, 0.2); /* Semi-transparent LightSlateGray */
+            border-left-color: #778899; /* LightSlateGray */
             color: #e8e8f8;
              padding: 15px 20px;
              margin: 20px 0;
@@ -141,18 +142,18 @@ language:
              border-left-style: solid;
         }
          .warning h3 {
-             color: #A9A9A9; /* DarkGray (lighter than border) */
+             color: #A0AEC1; /* Lighter Slate Gray */
              margin-top: 0;
         }
-        /* --- Badges - Dark Grey (Pony Body) & Gold Text --- */
+        /* --- Badges - Dark Grey (Pony Body) & Pale Gold Text --- */
         .badge {
             display: inline-block;
             padding: 6px 12px;
             border-radius: 4px;
             /* --- Badge Background - Dark Grey --- */
-            background: #686868; /* DimGray */
-            /* --- Badge Text - Pale Gold for contrast --- */
-            color: #FFFACD; /* LemonChiffon (pale gold) */
+            background: #696969; /* DimGray */
+            /* --- Badge Text - Pale Yellow/Gold --- */
+            color: #FFFACD; /* LemonChiffon */
             font-weight: bold;
             margin: 5px;
             box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
@@ -161,17 +162,17 @@ language:
             margin-top: 30px;
             text-align: center;
             opacity: 0.85;
-            /* --- Footer Text - Bright Grey --- */
-            color: #d3d3d3; /* LightGray */
+            /* --- Footer Text - Light Grey --- */
+            color: #d8d8e0;
             text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
         }
-      /* Chat Example Styling - Night/Gold Theme */
+      /* Chat Example Styling - Teal/Gold Theme */
         .chat-example {
             border-radius: 12px;
             padding: 20px;
             margin: 25px 0;
-            /* --- Chat Box Border - Dark Grey --- */
-            border: 1px solid #4a4a4a; /* Darker Grey */
+            /* --- Chat Box Border - Dark Teal/Grey --- */
+            border: 1px solid #2F4F4F; /* DarkSlateGray */
         }
         .message {
             margin: 15px 0;
@@ -180,35 +181,35 @@ language:
             max-width: 80%;
         }
         .message.user {
-            background: #283747; /* Keep dark blueish */
+            background: #1A2E38; /* Darker Blue-Teal */
              /* --- User Message Border - Muted Gold --- */
-            border: 1px solid #DAA520; /* Goldenrod */
+            border: 1px solid #BDB76B; /* DarkKhaki */
             margin-left: auto;
         }
         .message.assistant {
-            background: #31213F; /* Keep dark purplish */
+            background: #2A2A3A; /* Dark Grey-Blue */
              /* --- Assistant Message Border - Grey --- */
-            border: 1px solid #A9A9A9; /* DarkGray */
+            border: 1px solid #778899; /* LightSlateGray */
             margin-right: auto;
         }
         .role {
-             /* --- Role Text - Bright Grey --- */
-            color: #d3d3d3; /* LightGray */
+             /* --- Role Text - Pale Yellow/Gold --- */
+            color: #FFFACD; /* LemonChiffon */
             font-weight: bold;
             margin-bottom: 8px;
             font-size: 0.9em;
         }
         pre {
-            /* --- Code Block Background - Very Dark Indigo --- */
-            background: #1a1a2e;
+            /* --- Code Block Background - Very Dark Navy --- */
+            background: #0a1829;
             padding: 12px;
             border-radius: 6px;
             white-space: pre-wrap;
             margin: 10px 0;
-            /* --- Code Text - Pale Gold --- */
-            color: #FAFAD2; /* LightGoldenrodYellow */
-            /* --- Code Border - Semi-Transparent Pale Gold --- */
-            border: 1px solid rgba(250, 250, 210, 0.3);
+            /* --- Code Text - Pale Yellow/Gold --- */
+            color: #FFFACD; /* LemonChiffon */
+            /* --- Code Border - Semi-Transparent Soft Gold --- */
+            border: 1px solid rgba(240, 230, 140, 0.3);
             font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
         }
     </style>