.piano-container{padding:7px;border-radius:10px}.controls-container{margin:20px 0;font-size:1.2rem;display:flex;align-items:center}.root-note-label{margin-right:10px;font-weight:700}.note-selector{padding:8px;font-size:1.1rem;border-radius:8px;border:1px solid #ccc}.toggle-inversions-button{padding:8px 12px;font-size:1rem;border-radius:8px;border:1px solid #ccc;cursor:pointer;margin-left:15px;transition:background-color .2s ease}.toggle-inversions-button[data-inversions-shown=true]{background-color:#f0f0f0}.toggle-inversions-button[data-inversions-shown=false]{background-color:#d0eada}.chord-button{background:var(--chord-bg, #eee);transform:scale(1);transition:transform .2s ease;border:1px solid grey;font-weight:400;padding:8px 16px;margin:4px;border-radius:8px;cursor:pointer}.chord-button.selected{transform:scale(1.2);border:2px solid black;font-weight:700}.unassigned-note{color:red;text-decoration:line-through}.piano-base{background-color:#444;padding:5px;border-radius:10px}.piano{width:100%;height:200px;position:relative}.white-keys{display:flex;width:100%;height:100%}.white-key{flex:1;background:#fff;border:1px solid #000;box-sizing:border-box;position:relative;z-index:1;border-radius:0 0 6px 6px}.black-keys{position:absolute;top:0;left:0;width:100%;height:60%;pointer-events:none}.black-key{position:absolute;background:#000;width:2%;height:100%;z-index:2;border-radius:0 0 4px 4px;box-shadow:0 2px 8px #0000004d;transform:translate(-50%)}.active-key{background:#ffe082!important;box-shadow:0 0 10px #ffd54f}@media (max-width: 600px){.piano{height:120px}}.note-name{position:absolute;bottom:10px;left:50%;transform:translate(-50%);font-size:12px;color:#333;font-family:Arial,sans-serif;font-weight:600;z-index:3;white-space:nowrap;background-color:#fffc;padding:2px 4px;border-radius:3px}@media (max-width: 600px){.note-name{font-size:10px;bottom:5px}}.white-key.active-key,.black-key.active-key{background-color:#ffc107;border-color:#e0a800}.white-key.highlight-group-1,.black-key.highlight-group-1{background-color:#a2d9ce!important;border-color:#7fbbaf!important;color:#333!important}.white-key.highlight-group-1 .note-name,.black-key.highlight-group-1 .note-name{color:#fff!important;background-color:#0009!important}.white-key.highlight-group-2,.black-key.highlight-group-2{background-color:#d8bfd8!important;border-color:#b49cc1!important;color:#333!important}.white-key.highlight-group-2 .note-name,.black-key.highlight-group-2 .note-name{color:#fff!important;background-color:#0009!important}.key .note-name{font-family:Arial,sans-serif;font-size:.8em;padding:2px 4px;border-radius:3px;font-weight:700}.note-name{position:absolute;bottom:5px;left:50%;transform:translate(-50%);font-size:10px;padding:2px 4px;border-radius:3px}.white-key .note-name{color:#000;background-color:#ffffffb3}.black-key .note-name{color:#fff;background-color:#000c;display:flex;flex-direction:column;align-items:center;line-height:1.1;padding-top:3px;padding-bottom:3px}.error-highlight{background-color:#f88!important}.note-name{display:flex;flex-direction:column}.chord-columns{display:flex;gap:20px;padding:20px;justify-content:space-between}.chord-column{flex:1;display:flex;flex-direction:column}.chord-column h2{text-align:center;margin-bottom:15px}.chord-button{width:100%;padding:10px 0;border:none;border-radius:4px;cursor:pointer;transition:transform .1s;margin-bottom:5px;text-align:left}.chord-button.inverted{transform:scale(.7)}.chord-button:hover{transform:scale(1.05)}.chord-button.selected{background-color:#fff8e1;outline:3px solid #ffab00;box-shadow:0 0 0 4px #ffeb3b80,0 0 18px 8px #ffd54fe6,inset 0 0 8px #ffc10799;color:#000;font-weight:700;transform:scale(1.03);z-index:10;position:relative;transition:all .2s ease-in-out}.chord-name{font-weight:700;font-size:15px;margin-left:10px;margin-right:10px;margin-bottom:4px;opacity:.7;background:linear-gradient(to right,#000 0%,transparent 45%);padding-left:3px;color:#fff}.chord-notes{font-size:18px;opacity:.8}.chord-notes-row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;width:100%;margin-top:4px}.chord-note-band{flex:1 1 0;display:flex;justify-content:center;align-items:center;font-size:1.1em;font-weight:700;margin:0;padding:0;min-width:0;color:#fff}.search-container{padding:20px;display:flex;justify-content:center}.chord-search{width:300px;padding:10px 15px;font-size:16px;border:2px solid #ddd;border-radius:8px;outline:none;transition:border-color .2s}.chord-search:focus{border-color:#666}.palette-controls{display:flex;justify-content:center;padding:10px}.control-button{padding:10px 20px;font-size:16px;border:2px solid #ddd;border-radius:8px;background-color:#f0f0f0;cursor:pointer;transition:all .2s}.control-button:hover{background-color:#e0e0e0;border-color:#ccc}.piano-container,.play-mode-buttons{padding:10px}.play-mode-buttons button{padding:.6rem 1.2rem;font-size:1rem;background-color:#e9ecef;color:#495057;border:1px solid #ced4da;border-radius:6px;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}.play-mode-buttons button:hover{background-color:#dee2e6}.play-mode-buttons button.active{background-color:#4c6ef5;color:#fff;border:none}.play-mode-buttons button.active:hover{background-color:#3b5bdb}