.piano-container{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:1em 0;position:relative}.piano-svg{display:block;min-width:100%}.piano-key{cursor:pointer;transition:opacity .15s ease}.piano-key:hover{opacity:.85}.piano-key:focus-visible{outline:2px solid #7dd3e0;outline-offset:-2px}.piano-key--active.piano-key--tonic{fill:#4caf50}.piano-key--active.piano-key--scale{fill:#ffdd01}.piano-key--active.piano-key--tension{fill:#f44336}.piano-preview-dot{animation:preview-pulse 1s ease-in-out infinite alternate}@keyframes preview-pulse{0%{opacity:.5}to{opacity:1}}.fretboard-fullscreen-content .piano-container{width:100%;height:100%;overflow:hidden;padding:0;display:flex;align-items:center;justify-content:center}.fretboard-fullscreen-content .piano-svg{min-width:auto;width:100%;height:auto;max-height:100%}.grand-staff-container{width:100%;padding:1em 0}.grand-staff-svg{width:100%}.grand-staff-svg svg{display:block;width:100%;height:auto}.grand-staff-loading{text-align:center;padding:2em;color:#6b6b6b;font-size:.9em}