.piano-diagram[data-v-24f7ee86]{background-color:#fff;border:1px solid #000;border-radius:5px;box-shadow:0 2px 5px #0003;display:flex;height:100px;overflow:hidden;position:relative;transform-origin:top right;width:330px;z-index:1}.key[data-v-24f7ee86]{background:#fff;box-sizing:border-box;height:100%;transition:all .3s ease-in 0s;width:22px;z-index:1}.key .note[data-v-24f7ee86]{align-items:flex-end;display:flex;font-size:9px;font-weight:700;height:100%;justify-content:center;padding-bottom:5px}.key[data-v-24f7ee86]:not(:first-child){border-left:1px solid #ccc}.black[data-v-24f7ee86]{border-radius:0 0 5px 5px}.black .note[data-v-24f7ee86]{color:#fff}.key.black[data-v-24f7ee86]{background:#000;border-left:none;height:60%;position:absolute;width:18px;z-index:2}.key.active[data-v-24f7ee86]{background-color:#ffce00}.key.black.active .note[data-v-24f7ee86]{color:#000}.note-label[data-v-24f7ee86]{bottom:5px;color:#000;font-size:.8em;left:50%;position:absolute;transform:translate(-50%)}.grid-container{display:grid}.grid-row{display:flex}.bar-group{display:grid;grid-template-columns:repeat(4,1fr)}.bar-group:not(:first-child){border-left:2px solid #333}.grid-bar{align-items:center;background-color:#fff;border:1px solid #ddd;color:#333;cursor:pointer;display:flex;font-family:monospace;font-size:16px;height:45px;justify-content:center;text-align:center;width:45px}.grid-bar:hover{background-color:#efefef}.hidden-text[data-v-8f187bcd]{left:-9999px;position:absolute}@media print{.song-content[data-v-8f187bcd]{background:#fff;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;min-height:297mm;padding:20mm;width:210mm}.page-break[data-v-8f187bcd]{page-break-before:always}.hidden-text[data-v-8f187bcd]{display:none}}