up

Author: jedisct1

www/assets/css/main.css

@@ -1276,7 +1276,7 @@ section h2::after {
 .example-header h3 {
     font-size: 1.125rem;
     font-weight: 700;
-    color: #1f2937;
+    color: #111827;
     font-family: 'Courier New', monospace;
     margin: 0;
 }
@@ -1285,36 +1285,37 @@ section h2::after {
     padding: 0.25rem 0.5rem;
     border-radius: 4px;
     font-size: 0.625rem;
-    font-weight: 600;
+    font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.025em;
 }
 
 .badge-blue {
-    background: #dbeafe;
-    color: #1e40af;
+    background: #1e40af;
+    color: white;
 }
 
 .badge-green {
-    background: #d1fae5;
-    color: #065f46;
+    background: #059669;
+    color: white;
 }
 
 .badge-purple {
-    background: #ede9fe;
-    color: #6b21a8;
+    background: #7c3aed;
+    color: white;
 }
 
 .badge-orange {
-    background: #fed7aa;
-    color: #9a3412;
+    background: #ea580c;
+    color: white;
 }
 
 .example-description {
     font-size: 0.875rem;
-    color: #6b7280;
+    color: #374151;
     margin-bottom: 1rem;
     line-height: 1.4;
+    font-weight: 500;
 }
 
 .example-samples {
@@ -1332,85 +1333,100 @@ section h2::after {
     background: #f9fafb;
     border-radius: 6px;
     font-family: 'Courier New', monospace;
-    font-size: 0.875rem;
+    font-size: 0.9rem;
     position: relative;
-    border: 1px solid transparent;
+    border: 1px solid #e5e7eb;
 }
 
 .sample:hover {
     background: #f3f4f6;
+    border-color: #d1d5db;
 }
 
 .sample .input {
-    color: #1e40af;
-    font-weight: 600;
+    color: #0f172a;
+    font-weight: 700;
     min-width: 110px;
+    background: #e0e7ff;
+    padding: 0.125rem 0.375rem;
+    border-radius: 3px;
 }
 
 .sample .arrow {
-    color: #9ca3af;
+    color: #4b5563;
     font-size: 1rem;
+    font-weight: bold;
 }
 
 .sample .output {
     flex: 1;
-    color: #059669;
+    color: #047857;
     word-break: break-all;
-    font-size: 0.825rem;
+    font-size: 0.875rem;
     margin-right: 0.5rem;
+    font-weight: 600;
 }
 
 .sample .output.hex {
-    color: #7c3aed;
-    font-size: 0.775rem;
+    color: #6d28d9;
+    font-size: 0.825rem;
+    font-weight: 600;
 }
 
 .sample .output em {
     font-style: normal;
-    font-weight: 700;
-    color: #059669;
+    font-weight: 800;
+    color: #047857;
     text-decoration: underline;
-    text-decoration-style: dotted;
-    text-decoration-color: #10b981;
+    text-decoration-style: solid;
+    text-decoration-color: #047857;
+    text-decoration-thickness: 2px;
 }
 
 .indicator {
     position: absolute;
     right: 0.375rem;
     top: 50%;
     transform: translateY(-50%);
-    padding: 0.125rem 0.375rem;
-    border-radius: 3px;
-    font-size: 0.625rem;
-    font-weight: 600;
+    padding: 0.3rem 0.5rem;
+    border-radius: 12px;
+    font-size: 0.8rem;
+    font-weight: normal;
     white-space: nowrap;
+    letter-spacing: -0.025em;
 }
 
 .highlight-same {
     background: #fef3c7;
-    border-color: #fbbf24;
+    border-color: #f59e0b;
 }
 
 .highlight-same .indicator {
-    color: #92400e;
+    color: white;
+    background: #d97706;
+    border: 1px solid #92400e;
 }
 
 .highlight-prefix {
     background: #d1fae5;
-    border-color: #10b981;
+    border-color: #059669;
 }
 
 .highlight-prefix .indicator {
-    color: #065f46;
+    color: white;
+    background: #059669;
+    border: 1px solid #047857;
 }
 
 .highlight-different {
     background: #ede9fe;
-    border-color: #8b5cf6;
+    border-color: #7c3aed;
 }
 
 .highlight-different .indicator {
-    color: #6b21a8;
+    color: white;
+    background: #7c3aed;
+    border: 1px solid #6d28d9;
 }
 
 /* Responsive adjustments */