.piano-player{height:100%;width:100%;color:#8a8a8a;font-size:15px;-webkit-user-select:none;user-select:none}.piano-player-piano{top:13rem!important;position:absolute}.piano-middle-buttons{border:2px solid #525252;width:80%;max-width:800px;text-align:center;padding-top:4px;margin:8px auto 0;border-radius:4px;position:relative;height:64px}.note-display-container{width:60px;height:60px;vertical-align:top;position:absolute;left:0}div.item{display:inline-block;text-align:center;padding:0 14px;cursor:pointer;font-size:14px}.list-decimal___:has(ol) ol{list-style-type:decimal}.list-decimal___:has(ul) ul{list-style-type:disc}@media only screen and (min-device-width:1366px) and (max-device-height:1024px) and (-webkit-min-device-pixel-ratio:2) and (orientation:landscape){div.item{font-size:18px}}@media only screen and (max-width:1023px) and (-webkit-min-device-pixel-ratio:2) and (orientation:landscape){.piano-player{padding-top:.5vmax}.piano-middle-buttons{text-align:right;width:90%!important;margin-top:4%;padding-bottom:0;right:0;left:0;height:auto}.note-display-container{width:auto;height:auto}div.item{font-size:14px;padding:0 1.5vw;height:auto}.last{margin-right:2vmax}}.fill-available{width:-webkit-fill-available}.h-fill-available{height:-webkit-fill-available;height:fill-available}.piano{position:relative}.hide-notes,.hide-notes span,.key .marked span{color:#2a87bb;font-weight:800}.piano-hidden{display:none}.piano--white-keys{text-align:center;display:flex;width:100%;overflow:hidden;height:250px;padding:0 20px;border:#000;border-style:solid}.key .white-key{display:flex;align-items:flex-end;justify-content:center;background:#fff;border-top:1px solid #20202033;border-right:1px solid #2020204d;border-bottom:1px solid #2020204d;border-radius:0 0 5px 5px;box-shadow:0 5px 1px #20202033;width:100%;height:240px}.key .white-key,.key .white-key.active{transition:background-color .05s ease,box-shadow .05s ease}.key .white-key.active{background:#d8d8d8;transform:translateY(4px);box-shadow:0 0 0 #0000}.key *{-webkit-user-select:none;user-select:none}.key{width:100%;cursor:pointer;z-index:1}.key>span i{position:absolute;display:flex;align-items:center;justify-content:center;font-style:normal;font-variant:normal;margin-bottom:12px;width:20px;height:20px;border-radius:50%}.key .note{margin-bottom:11px}.key .marked i{color:#72ac51}.piano--black-keys{height:0;position:absolute;display:flex;justify-content:center;width:100%;padding-left:23px;padding-right:15px}.key>span *{pointer-events:none}.piano--black-keys ul{display:flex;width:95%;padding-bottom:0}.piano--black-keys li{justify-content:center;width:100%;height:0;box-sizing:border-box}.piano--black-keys .key{z-index:2}.piano--black-keys li>span{height:135px;display:flex;justify-content:center;align-items:flex-end;width:80%;background-color:#000;background:linear-gradient(-20deg,#222,#000,#222);box-shadow:0 5px 1px #20202033;transition:background-color .05s ease,box-shadow .05s ease;border-radius:0 0 5px 5px;color:#fff}.piano--black-keys .key-left{justify-content:flex-start}.piano--black-keys .key-right{justify-content:flex-end}.piano--black-keys .key--left{box-sizing:border-box;padding-left:2px;margin-right:-2px}.piano--black-keys .key--right{box-sizing:border-box;padding-right:2px;margin-left:-2px}.piano--black-keys .note{display:flex;flex-direction:column;font-weight:600;color:#fff;font-size:13px;margin-bottom:15px;text-align:center}.piano--black-keys .note>span{display:flex;align-items:baseline;height:11px;margin:1px 0}.piano--black-keys .black-key.active{background:linear-gradient(-20deg,#000,#000,#000);box-shadow:0 2px 2px #2020204d;transition:background-color .05s ease,box-shadow .05s ease;height:140px}.key:first-child .white-key{border-left:none;border-radius:0 0 5px 0}.key:last-child .white-key{border-right:0;border-radius:0 0 0 5px}.key:first-child .white-key.active,.key:last-child .white-key.active{box-shadow:0 0 0 #0000}.accidental{font-size:100%;padding-left:1px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (max-width:767px){.piano{width:100%}.piano::-webkit-scrollbar{width:0;background:0 0;display:none}.piano--white-keys{width:750px;height:185px}.piano--black-keys{width:750px;max-width:750px!important}.key span i{margin-bottom:10px;width:18px;height:18px}.key .black-key{height:100px}.key .black-key.active{top:5px;height:100px}.key .white-key{height:180px}.key .white-key.active{top:5px}}@media (max-width:480px){.key .white-key.active{height:180px;top:5px}}.piano-container{position:relative;margin:10px auto}.piano-key{display:flex;align-items:flex-end;justify-content:center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;touch-action:manipulation;border:1px solid #333;transition:transform 75ms ease,background-color 75ms ease,box-shadow 75ms ease}.piano-key--white{border-right:0}.piano-key--white:last-child{border-right:none}.piano-key--black{border:1px solid #333;background:linear-gradient(180deg,#000,#2a2a2a)!important}.piano-key--black .piano-key__label{color:#fff}.piano-key--white .piano-key__label{color:#374151}.piano-key--white.active{background-color:#f9b44d3b!important;transform:translateY(2px);box-shadow:inset 0 2px 4px #0003}.piano-key--black.active{background:linear-gradient(180deg,#3a2a00,#6b4c1a)!important;transform:translateY(2px);box-shadow:inset 0 2px 4px #0000004d}.piano-key--black.active .piano-key__label{color:#f9b44d!important}.piano-key.marked{background-color:#fbbf24!important}.accidental{font-size:.7em;opacity:.8}.overflow-x-auto{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.overflow-x-auto::-webkit-scrollbar{height:4px}.overflow-x-auto::-webkit-scrollbar-track{background:#f1f1f1;border-radius:2px}.overflow-x-auto::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:2px}.overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width:640px){.piano-key{min-height:44px}}.key .selected{background-color:#2bc91d4f!important;border-color:#2bc91d!important}