.mini-piano-container{display:flex;flex-direction:column;align-items:center;background:#fafafa;border-radius:12px;padding:12px;margin:16px;border:1px solid rgba(0,0,0,.15);box-shadow:8px 8px 15px #4949181f;width:400px;height:220px;transition:all .2s ease}.mini-piano-container.highlighted{border-color:#007bff;box-shadow:0 0 5px #007bff80}.mini-piano-container .mini-piano-title{font-size:1.3em;font-weight:700;margin-bottom:10px;color:#333;text-align:center}.mini-piano{width:380px;height:150px;display:flex;flex-direction:row;align-items:center;justify-content:center;position:relative;background:#fafafa;border-radius:4px;padding:4px;overflow:hidden}.mini-piano .mini-piano-octave{position:relative;height:100%;display:flex;flex-direction:row;flex:1}.mini-piano .mini-piano-key{position:relative;box-sizing:border-box}.mini-piano .mini-white-key{width:27px;height:140px;background:#fff;border:1px solid #bbb;border-radius:0 0 5px 5px;z-index:1}.mini-piano .mini-white-key.selected{background:#f0f0f0}.mini-piano .mini-black-keys-container{position:absolute;top:0;left:0;height:80px;width:100%;z-index:2}.mini-piano .mini-black-key{position:absolute;left:var(--black-key-left);width:18px;height:80px;top:0;background:#222;border-radius:0 0 4px 4px;z-index:3}.mini-piano .mini-black-key.selected{background:#555}.mini-piano .mini-note-circle{position:absolute;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;z-index:4;box-shadow:0 2px 6px #0000001f;bottom:5px;background:var(--note-color)}.mini-white-key .mini-piano .mini-note-circle{bottom:15px;left:50%;transform:translate(-50%)}.mini-black-key .mini-piano .mini-note-circle{bottom:10px;left:50%;transform:translate(-50%)}.mini-piano .note-C{background:#e74c3c}.mini-piano .note-C\#{background:#8e44ad}.mini-piano .note-D{background:#f7ca18;color:#222}.mini-piano .note-D\#{background:#16a085}.mini-piano .note-E{background:#3498db}.mini-piano .note-F{background:#27ae60}.mini-piano .note-F\#{background:#e67e22}.mini-piano .note-G{background:#2ecc71}.mini-piano .note-G\#{background:#d35400}.mini-piano .note-A{background:#9b59b6}.mini-piano .note-A\#{background:#34495e}.mini-piano .note-B{background:#1abc9c}.mini-piano .mini-note-circle.root{border:2px solid white;box-shadow:0 0 5px 2px #ffffffb3}.mini-piano .octave-label{position:absolute;bottom:2px;left:50%;transform:translate(-50%);font-size:10px;color:#666;font-weight:700}