diff --git a/index.html b/index.html
index 5267257..a8865e5 100644
--- a/index.html
+++ b/index.html
@@ -19,14 +19,14 @@
             max-width: 800px;
             margin: 0 auto;
             padding: 20px;
-            background-color: #f5f5f7;
+            background-color: #f8f9fa;
             color: #333;
         }
 
         h1 {
             text-align: center;
             margin-bottom: 30px;
-            color: #1d1d1f;
+            color: #1e3a8a;
             cursor: default;
             user-select: none;
         }
@@ -35,8 +35,9 @@
             background-color: white;
             border-radius: 10px;
             padding: 30px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 4px 20px rgba(30, 58, 138, 0.1);
             position: relative;
+            border: 1px solid #e5e7eb;
         }
 
         .input-section {
@@ -47,16 +48,24 @@
             display: block;
             margin-bottom: 5px;
             font-weight: 500;
+            color: #374151;
         }
 
         input, select {
             width: 100%;
             padding: 10px;
             margin-bottom: 15px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
+            border: 1px solid #d1d5db;
+            border-radius: 6px;
             box-sizing: border-box;
             font-size: 16px;
+            transition: border-color 0.2s ease;
+        }
+
+        input:focus, select:focus {
+            outline: none;
+            border-color: #1e3a8a;
+            box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
         }
 
         .text-input-wrapper {
@@ -77,15 +86,16 @@
             width: 40px;
             background: none;
             border: none;
-            color: #666;
+            color: #6b7280;
             font-size: 18px;
             cursor: pointer;
             display: none;
             padding: 0;
+            transition: color 0.2s ease;
         }
 
         .clear-button:hover {
-            color: #333;
+            color: #1e3a8a;
             background: none;
         }
 
@@ -106,8 +116,8 @@
             width: 100%;
             height: 40px;
             padding: 0;
-            border: 1px solid #ccc;
-            border-radius: 4px;
+            border: 1px solid #d1d5db;
+            border-radius: 6px;
             background-color: transparent;
             cursor: pointer;
         }
@@ -118,7 +128,7 @@
 
         input[type="color"]::-webkit-color-swatch {
             border: none;
-            border-radius: 3px;
+            border-radius: 5px;
         }
 
         .output-section {
@@ -134,27 +144,29 @@
             margin: 0 auto;
             padding: 15px;
             background-color: white;
-            border-radius: 4px;
+            border-radius: 8px;
             display: block;
+            border: 1px solid #e5e7eb;
         }
 
         .download-btn {
-            background-color: #ff9500;
+            background-color: #1e3a8a;
             margin-top: 15px;
             display: none;
+            transition: background-color 0.2s ease;
         }
 
         .download-btn:hover {
-            background-color: #e68600;
+            background-color: #1e40af;
         }
 
         .error {
-            color: #e74c3c;
+            color: #dc2626;
             margin-top: 5px;
         }
 
         button {
-            background-color: #0071e3;
+            background-color: #1e3a8a;
             color: white;
             border: none;
             padding: 12px 20px;
@@ -162,12 +174,12 @@
             cursor: pointer;
             font-size: 16px;
             font-weight: 500;
-            transition: background-color 0.2s;
+            transition: background-color 0.2s ease;
             width: 100%;
         }
 
         button:hover {
-            background-color: #0058b9;
+            background-color: #1e40af;
         }
 
         .info-button {
@@ -184,13 +196,13 @@
             justify-content: center;
             cursor: pointer;
             font-size: 18px;
-            color: #999;
+            color: #6b7280;
             transition: color 0.2s ease;
             z-index: 10;
         }
 
         .info-button:hover {
-            color: #333;
+            color: #1e3a8a;
             background: none;
         }
 
@@ -201,12 +213,13 @@
             width: 330px;
             height: 100%;
             background-color: white;
-            box-shadow: -2px 0 10px rgba(0,0,0,0.1);
+            box-shadow: -2px 0 10px rgba(30, 58, 138, 0.1);
             transition: right 0.3s ease;
             z-index: 100;
             overflow-y: auto;
             padding: 20px;
             box-sizing: border-box;
+            border-left: 1px solid #e5e7eb;
         }
 
         .info-panel.open {
@@ -219,26 +232,27 @@
             align-items: center;
             margin-bottom: 20px;
             padding-bottom: 10px;
-            border-bottom: 1px solid #eee;
+            border-bottom: 1px solid #e5e7eb;
         }
 
         .info-panel-header h2 {
             margin: 0;
-            color: #333;
+            color: #1e3a8a;
         }
 
         .info-close {
             background: none;
             border: none;
             font-size: 22px;
-            color: #666;
+            color: #6b7280;
             cursor: pointer;
             width: auto;
             padding: 5px;
+            transition: color 0.2s ease;
         }
 
         .info-close:hover {
-            color: #333;
+            color: #1e3a8a;
             background: none;
         }
 
@@ -246,12 +260,13 @@
             font-size: 16px;
             margin-top: 20px;
             margin-bottom: 10px;
+            color: #1e3a8a;
         }
 
         .info-content p {
             font-size: 14px;
             line-height: 1.6;
-            color: #555;
+            color: #374151;
             margin-bottom: 20px;
         }
 
@@ -259,21 +274,24 @@
             margin-top: 30px;
             text-align: center;
             font-size: 14px;
-            color: #666;
+            color: #6b7280;
         }
 
         .credit {
             margin-top: 5px;
             font-size: 12px;
-            color: #888;
+            color: #9ca3af;
         }
 
         .credit a {
             text-decoration: none;
+            color: #1e3a8a;
+            transition: color 0.2s ease;
         }
 
         .credit a:hover {
             text-decoration: underline;
+            color: #1e40af;
         }
     </style>
 </head>