Upload 4 files

index.html

@@ -71,23 +71,7 @@
             </div>
           </div>
 
-          <div class="info-card">
-            <h5>Playback Instrument</h5>
-            <div class="select-group">
-              <select id="instrumentSelect">
-                <option value="piano" selected>Piano (Default)</option>
-                <option value="xylophone">Xylophone</option>
-                <option value="violin">Violin</option>
-                <option value="trumpet">Trumpet</option>
-                <option value="saxophone">Saxophone</option>
-                <option value="organ">Organ</option>
-                <option value="harp">Harp</option>
-                <option value="guitar-acoustic">Acoustic Guitar</option>
-                <option value="guitar-electric">Electric Guitar</option>
-                <option value="bass-electric">Electric Bass</option>
-              </select>
-            </div>
-          </div>
+
           
           <div class="info-card">
             <h5>Bored with the song?</h5>
@@ -276,6 +260,24 @@
                   </div>
                 </div>
               </div>
+          </div>
+
+          <!-- Playback Instrument Box -->
+          <div class="playing-style-panel settings-column" style="margin-top: 15px;">
+            <h5>Playback Instrument</h5>
+            <div class="custom-select-container">
+              <select id="instrumentSelect">
+                <option value="piano" selected>Piano (Default)</option>
+                <option value="xylophone">Xylophone</option>
+                <option value="violin">Violin (Recommended)</option>
+                <option value="trumpet">Trumpet (Recommended)</option>
+                <option value="saxophone">Saxophone</option>
+                <option value="organ">Organ (Recommended)</option>
+                <option value="harp">Harp</option>
+                <option value="guitar-acoustic">Acoustic Guitar</option>
+                <option value="guitar-electric">Electric Guitar</option>
+                <option value="bass-electric">Electric Bass</option>
+              </select>
             </div>
           </div>
         </aside>

styles.css

@@ -823,6 +823,61 @@ select:focus {
   border-color: var(--color-border-active);
 }
 
+/* Custom Pretty Select Dropdown styles */
+.custom-select-container {
+  position: relative;
+  width: 100%;
+}
+
+.custom-select-container select {
+  width: 100%;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-color: rgba(255, 255, 255, 0.02);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  color: var(--color-text-primary);
+  font-size: 0.85rem;
+  font-weight: 500;
+  padding: 0 36px 0 14px;
+  height: 42px;
+  outline: none;
+  cursor: pointer;
+  transition: all var(--transition-normal);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+.custom-select-container select:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-color: var(--color-border-active);
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08);
+}
+
+.custom-select-container select:focus {
+  border-color: var(--color-emerald-accent);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
+}
+
+/* Custom Chevron Indicator */
+.custom-select-container::after {
+  content: "";
+  position: absolute;
+  right: 15px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+  height: 5px;
+  background-color: var(--color-text-muted);
+  clip-path: polygon(100% 0, 0 0, 50% 100%);
+  pointer-events: none;
+  transition: background-color var(--transition-fast);
+}
+
+.custom-select-container:hover::after {
+  background-color: var(--color-emerald-accent);
+}
+
 .midi-seed-controls {
   display: flex;
   flex-direction: column;