body{font-family:sans-serif;margin:2em;background-color:#f4f4f4;color:#333}h1,h2{text-align:center}.controls{max-width:600px;margin:2em auto;padding:1.5em;background-color:#fff;border-radius:8px;box-shadow:0 2px 5px #0000001a;display:flex;flex-direction:column;gap:1em}.control-group{display:flex;flex-direction:column}label{margin-bottom:.5em;font-weight:700}input[type=text],input[type=number],select{padding:.5em;border:1px solid #ccc;border-radius:4px;font-size:1em}.chord-name-controls{display:flex;gap:.5em}.chord-name-controls input{flex-grow:1}.chord-name-controls button{padding:0 1em;background-color:#6c757d;flex-shrink:0}.chord-presets-buttons{display:flex;flex-wrap:wrap;gap:.5em;margin-bottom:.5em}.chord-presets-buttons button{flex-grow:1;padding:.5em .8em;font-size:.9em;background-color:#6c757d;color:#fff;border:none;font-weight:400;border-radius:4px}.chord-presets-buttons button:hover{background-color:#5a6268}.chord-notes-controls{display:flex;gap:.5em}.chord-notes-controls input{flex-grow:1}.chord-notes-controls button{padding:0 1em;background-color:#6c757d;flex-shrink:0}.root-note-controls{display:flex;gap:.5em}.root-note-controls input{width:60px}.root-note-controls button{padding:.3em .6em;font-size:.9em;background-color:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer}.root-note-controls button:hover{background-color:#5a6268}.keyboard-wrapper{width:100%;overflow-x:auto;margin-top:.8em}.control-group table{width:100%;margin-top:.8em;border-collapse:collapse;font-size:.9em}.control-group table th,.control-group table td{border:1px solid #ddd;padding:.4em;text-align:center}.control-group table th{background-color:#f8f9fa;font-weight:400}.transpose-buttons{display:flex;gap:.5em;margin-top:.5em}.transpose-buttons button{padding:.3em .6em;font-size:.9em;background-color:#6c757d;border:none;border-radius:4px}.radio-group{display:flex;gap:1em;flex-wrap:wrap;align-items:center}.radio-group label{display:flex;align-items:center;gap:.3em}button,.button{padding:.8em 1.5em;font-size:1em;font-weight:700;color:#fff;background-color:#007bff;border:none;border-radius:4px;cursor:pointer;text-align:center;text-decoration:none;display:inline-block}button:hover,.button:hover{background-color:#0056b3}#results-area{margin-top:2em;text-align:center}#fingering-svg-container{background-color:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #0000001a;margin-top:1em;display:block;margin-left:auto;margin-right:auto}.download-container{margin-top:1.5rem;display:flex;gap:1rem;justify-content:center;align-items:center}.download-container .button{padding:.5em 1em;height:2.5em;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}.note-preview{font-size:.9em;color:#555;margin-top:5px;min-height:1.2em}.midi-notes-edit-buttons{display:flex;flex-direction:column;gap:.5em;margin-top:.8em}.midi-notes-edit-buttons .button-group{display:flex;flex-wrap:wrap;gap:.5em}.midi-notes-edit-buttons button{padding:.3em .6em;font-size:.9em;background-color:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer}.midi-notes-edit-buttons button:hover{background-color:#5a6268}.scale-notes-edit-buttons{display:flex;flex-direction:column;gap:.5em;margin-top:.8em}.scale-notes-edit-buttons .button-group{display:flex;flex-wrap:wrap;gap:.5em}.scale-notes-edit-buttons button{padding:.3em .6em;font-size:.9em;background-color:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer}.scale-notes-edit-buttons button:hover{background-color:#5a6268}.note-names-edit-buttons{display:flex;flex-direction:column;gap:.5em;margin-top:.8em}.note-names-edit-buttons .button-group{display:flex;flex-wrap:wrap;gap:.5em}.note-names-edit-buttons button{padding:.3em .6em;font-size:.9em;background-color:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer}.note-names-edit-buttons button:hover{background-color:#5a6268}.keyboard-wrapper table{border-collapse:collapse;font-size:.8em;min-width:600px}.keyboard-wrapper td{min-width:20px;max-width:20px;width:20px;overflow:hidden;text-overflow:clip;border:0;margin:0;padding:0}.black-key{background-color:#bfbfbf}.focus-area-controls{display:flex;flex-direction:column;gap:.5em;margin-top:.8em}.focus-area-controls .button-group{display:flex;flex-wrap:wrap;gap:.5em}.focus-area-controls button{padding:.3em .6em;font-size:.9em;background-color:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer}.focus-area-controls button:hover{background-color:#5a6268}