.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}