.piano-wrapper{width:100%;overflow:hidden}.piano-keyboard{-webkit-user-select:none;user-select:none;background-color:#111;border-radius:8px;justify-content:flex-start;width:max-content;height:180px;padding:10px 0;display:flex;position:relative;box-shadow:0 5px 15px #00000080}.piano-octave{height:100%;margin-right:1px;display:flex;position:relative}.piano-octave:last-child{margin-right:0}.piano-key{box-sizing:border-box;border:1px solid #555;border-radius:0 0 4px 4px;justify-content:center;align-items:flex-end;margin:0;padding:0;display:flex;position:relative}.white-key{color:#333;z-index:1;background-color:#fff;border-right-width:1px;width:32px;height:100%}.black-key{z-index:2;color:#fff;background-color:#222;width:18px;height:65%;margin-left:-9px;margin-right:-9px;box-shadow:0 0 3px #000c}.piano-key.pressed{color:#222;background-color:#90caf9;box-shadow:inset 0 2px 5px #0000004d}.black-key.pressed{background-color:#64b5f6}.key-label{pointer-events:none;padding-bottom:.4rem;font-size:.65rem;font-weight:700}.black-key .key-label{padding-bottom:.25rem}
.staff-notation-layout{flex-direction:column;align-items:center;gap:4px;display:flex}.staff-notation,.staff-notation svg{background-color:#fff;border-radius:4px;box-shadow:0 4px 8px #0003}
.circle-container{justify-content:center;align-items:center;width:220px;height:220px;display:flex;position:relative}.circle-section{cursor:pointer;transform-origin:50%;background-color:#2a2a2a;border:2px solid #444;border-radius:4px;justify-content:center;align-items:center;transition:all .2s;display:flex;position:absolute}.major-key{z-index:2;width:40px;height:40px}.minor-key{z-index:1;background-color:#333;border-color:#555;width:30px;height:30px}.circle-section:hover{z-index:3;background-color:#3a3a3a;border-color:#666;transform:scale(1.1)}.circle-section.selected{z-index:4;background-color:#4a4a4a;border-color:#888;transform:scale(1.1);box-shadow:0 0 10px #ffffff4d}.minor-key:hover{background-color:#444}.minor-key.selected{background-color:#555}.section-content{color:#fff;text-align:center;-webkit-user-select:none;user-select:none;font-weight:700}.major-key .section-content{font-size:1rem}.minor-key .section-content{font-size:.8rem}@media (prefers-color-scheme:light){.circle-section{background-color:#e0e0e0;border-color:#ccc}.minor-key{background-color:#d0d0d0;border-color:#bbb}.circle-section:hover{background-color:#f0f0f0;border-color:#999}.circle-section.selected{background-color:#d0d0f0;border-color:#666;box-shadow:0 0 10px #0003}.minor-key:hover{background-color:#e0e0e0}.minor-key.selected{background-color:#c0c0e0}.section-content{color:#333}}@media (max-width:768px){.circle-container{width:210px;height:210px}.major-key{width:38px;height:38px}.minor-key{width:28px;height:28px}}@media (max-width:480px){.circle-container{width:180px;height:180px}.major-key{width:32px;height:32px}.minor-key{width:24px;height:24px}.major-key .section-content{font-size:.9rem}.minor-key .section-content{font-size:.7rem}}