#piano-container{box-sizing:border-box;width:100%;max-height:none;padding:18px;margin:0;background:#fff;border-radius:12px;overflow:visible}.piano-heading{width:100%;color:#243e4c}.piano-heading h2{font-size:16px;margin:0 0 5px}.piano-heading p{font-size:13px;color:#60717c;margin:0 0 14px}#piano-container .piano-wrapper{width:100%;overflow-x:auto;padding:0 0 6px}#piano-keyboard{position:relative;width:100%;min-width:700px;height:144px;margin:0;box-sizing:border-box;border:1px solid #344957;border-top:5px solid #344957;border-radius:0 0 5px 5px}#piano-keyboard .piano-key{position:absolute;top:0;box-sizing:border-box;cursor:default;transform:none;transition:background-color .12s}#piano-keyboard .white-key{width:calc(100% / var(--white-keys));height:100%;background:linear-gradient(#f6f8f8,#fff 70%);border-right:1px solid #8999a2;border-bottom:3px solid #bdc8ce;border-radius:0 0 4px 4px}#piano-keyboard .black-key{width:calc(62% / var(--white-keys));height:62%;z-index:2;background:linear-gradient(#344550,#172630);border:1px solid #15232b;border-bottom:4px solid #0c171d;border-radius:0 0 3px 3px}#piano-keyboard .piano-key.active{background:#087e8b!important;color:#fff}#piano-keyboard .piano-key.bass{box-shadow:inset 0 -6px #d2a441}#piano-keyboard .piano-key-label{position:absolute;bottom:11px;left:50%;transform:translate(-50%);font-size:10px;color:#667983;white-space:nowrap}#piano-keyboard .active .piano-key-label{color:#fff;font-weight:650}#piano-container #staff-notation{width:min(100%,360px);min-height:0;margin:8px auto 0;padding:0;color:#253640}#staff-notation svg{display:block;width:100%;height:auto}#piano-container #staff-notation{display:block!important;max-width:360px;height:auto!important;padding:0!important;margin:8px auto 0!important}#piano-container #staff-notation svg{position:static!important;display:block!important}#piano-container .piano-heading{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}#piano-container .piano-heading p{flex-basis:100%;margin:0 0 10px}.piano-cycle-control{display:flex;gap:8px;align-items:center;font-size:13px;margin-left:auto}#piano-cycle-octaves{width:auto;min-height:34px}#piano-keyboard .piano-key{cursor:pointer}#piano-keyboard .piano-key:focus-visible{outline:3px solid #d88920;outline-offset:-3px;z-index:3}#piano-keyboard .piano-parent:before{content:"";position:absolute;bottom:34px;left:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#879ab0}#piano-keyboard .piano-parent-root:before{background:#ae7622}#piano-keyboard .ghost:after{content:"\25c7";position:absolute;top:66%;left:50%;transform:translate(-50%);font-size:17px;color:#287b74;line-height:1}#piano-keyboard .black-key.ghost:after,#piano-keyboard .active.ghost:after{color:#fff}#piano-keyboard .piano-key.piano-borrowed{background:#875caf!important}#piano-keyboard .piano-resolution{outline:2px dashed #a97324;outline-offset:-4px}.piano-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;margin:8px 0;color:#087e8b}.piano-legend span:nth-child(3){color:#697f96}.piano-legend span:nth-child(4){color:#875caf}.piano-legend span:nth-child(5){color:#a97324}.piano-shortcuts,#piano-borrowing-summary{font-size:12px;color:#60717c;margin:6px 0}#piano-borrowing-summary:empty{display:none}.app-container.piano-layout>.mobile-visualizer-stage{order:3}#piano-keyboard{min-width:max(700px,calc(var(--white-keys) * 22px))}