.note-labels-control[data-astro-cid-7lolhfve]{display:flex;align-items:center;background:#ffffff0f;padding:.375rem .625rem;border-radius:.5rem;width:100%;transition:background .15s ease}.note-labels-control[data-astro-cid-7lolhfve]:hover{background:#ffffff1a}.toggle-btn[data-astro-cid-7lolhfve]{display:flex;align-items:center;gap:.75rem;background:none;border:none;padding:.25rem;cursor:pointer;color:#fff;font-size:.875rem;transition:all .2s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:36px}.toggle-slider[data-astro-cid-7lolhfve]{position:relative;display:inline-block;width:36px;height:20px;background:#4a4a4a;border-radius:10px;transition:background .2s ease}.toggle-slider[data-astro-cid-7lolhfve]:before{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;background:#fff;border-radius:50%;transition:transform .2s ease;box-shadow:0 1px 3px #0003}.toggle-btn[data-astro-cid-7lolhfve][aria-checked=true] .toggle-slider[data-astro-cid-7lolhfve]{background:#4caf50}.toggle-btn[data-astro-cid-7lolhfve][aria-checked=true] .toggle-slider[data-astro-cid-7lolhfve]:before{transform:translate(16px)}.toggle-text[data-astro-cid-7lolhfve]{-moz-user-select:none;user-select:none;-webkit-user-select:none}.toggle-btn[data-astro-cid-7lolhfve]:hover{color:#a8a8a8}.toggle-btn[data-astro-cid-7lolhfve]:hover .toggle-slider[data-astro-cid-7lolhfve]{opacity:.9}.toggle-btn[data-astro-cid-7lolhfve]:active .toggle-slider[data-astro-cid-7lolhfve]:before{transform:scale(.95) translate(var(--translate-x, 0))}.toggle-btn[data-astro-cid-7lolhfve][aria-checked=true]:active .toggle-slider[data-astro-cid-7lolhfve]:before{--translate-x: 16px}.toggle-btn[data-astro-cid-7lolhfve]:focus{outline:none}.toggle-btn[data-astro-cid-7lolhfve]:focus-visible{outline:2px solid #fff;outline-offset:2px}@media (max-width: 768px){.note-labels-control[data-astro-cid-7lolhfve]{padding:.5rem .75rem}.toggle-btn[data-astro-cid-7lolhfve]{padding:.25rem;width:100%;justify-content:space-between}}.key-labels-control[data-astro-cid-rahtmlrx]{display:flex;align-items:center;background:#ffffff0f;padding:.375rem .625rem;border-radius:.5rem;width:100%;transition:background .15s ease}.key-labels-control[data-astro-cid-rahtmlrx]:hover{background:#ffffff1a}.toggle-btn[data-astro-cid-rahtmlrx]{display:flex;align-items:center;gap:.75rem;background:none;border:none;padding:.25rem;cursor:pointer;color:#fff;font-size:.875rem;transition:all .2s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:36px}.toggle-slider[data-astro-cid-rahtmlrx]{position:relative;display:inline-block;width:36px;height:20px;background:#4a4a4a;border-radius:10px;transition:background .2s ease}.toggle-slider[data-astro-cid-rahtmlrx]:before{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;background:#fff;border-radius:50%;transition:transform .2s ease;box-shadow:0 1px 3px #0003}.toggle-btn[data-astro-cid-rahtmlrx][aria-checked=true] .toggle-slider[data-astro-cid-rahtmlrx]{background:#4caf50}.toggle-btn[data-astro-cid-rahtmlrx][aria-checked=true] .toggle-slider[data-astro-cid-rahtmlrx]:before{transform:translate(16px)}.toggle-text[data-astro-cid-rahtmlrx]{-moz-user-select:none;user-select:none;-webkit-user-select:none}.toggle-btn[data-astro-cid-rahtmlrx]:hover{color:#a8a8a8}.toggle-btn[data-astro-cid-rahtmlrx]:hover .toggle-slider[data-astro-cid-rahtmlrx]{opacity:.9}.toggle-btn[data-astro-cid-rahtmlrx]:active .toggle-slider[data-astro-cid-rahtmlrx]:before{transform:scale(.95) translate(var(--translate-x, 0))}.toggle-btn[data-astro-cid-rahtmlrx][aria-checked=true]:active .toggle-slider[data-astro-cid-rahtmlrx]:before{--translate-x: 16px}.toggle-btn[data-astro-cid-rahtmlrx]:focus{outline:none}.toggle-btn[data-astro-cid-rahtmlrx]:focus-visible{outline:2px solid #fff;outline-offset:2px}@media (max-width: 768px){.key-labels-control[data-astro-cid-rahtmlrx]{padding:.5rem .75rem}.toggle-btn[data-astro-cid-rahtmlrx]{padding:.25rem;width:100%;justify-content:space-between}}.recording-control[data-astro-cid-n6gmqr4i]{display:flex;align-items:center;gap:.625rem;background:#ffffff0f;padding:.375rem .625rem;border-radius:.5rem;width:100%;transition:background .15s ease}.recording-control[data-astro-cid-n6gmqr4i]:hover{background:#ffffff1a}.control-btn[data-astro-cid-n6gmqr4i]{background:none;border:none;padding:.25rem;cursor:pointer;color:#fff;transition:all .2s ease;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.control-btn[data-astro-cid-n6gmqr4i]:hover:not(:disabled){background:#ffffff1f}.record-btn[data-astro-cid-n6gmqr4i]:hover:not(:disabled){color:#f44}.play-btn[data-astro-cid-n6gmqr4i]:hover:not(:disabled){color:#4f4}.record-btn[data-astro-cid-n6gmqr4i][data-recording=true]{color:#f44;animation:pulse 2s infinite}.control-btn[data-astro-cid-n6gmqr4i]:active:not(:disabled){transform:scale(.95)}.control-btn[data-astro-cid-n6gmqr4i]:disabled{opacity:.5;cursor:not-allowed;animation:none}.icon-container[data-astro-cid-n6gmqr4i]{position:relative;width:20px;height:20px}.play-icon[data-astro-cid-n6gmqr4i],.pause-icon[data-astro-cid-n6gmqr4i]{position:absolute;top:0;left:0;opacity:1;transition:opacity .2s ease}.pause-icon[data-astro-cid-n6gmqr4i],.play-btn[data-astro-cid-n6gmqr4i][data-playing=true] .play-icon[data-astro-cid-n6gmqr4i]{opacity:0}.play-btn[data-astro-cid-n6gmqr4i][data-playing=true] .pause-icon[data-astro-cid-n6gmqr4i]{opacity:1}.recording-status[data-astro-cid-n6gmqr4i]{display:flex;align-items:center;gap:.5rem;color:#fff;font-size:.875rem;padding:.25rem 0}.status-dot[data-astro-cid-n6gmqr4i]{width:8px;height:8px;border-radius:50%;background:#666}[data-astro-cid-n6gmqr4i][data-recording=true]~.recording-status[data-astro-cid-n6gmqr4i] .status-dot[data-astro-cid-n6gmqr4i]{background:#f44;animation:pulse 2s infinite}[data-astro-cid-n6gmqr4i][data-playing=true]~.recording-status[data-astro-cid-n6gmqr4i] .status-dot[data-astro-cid-n6gmqr4i]{background:#4f4}.recording-time[data-astro-cid-n6gmqr4i]{color:#888;min-width:3.5rem}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.control-btn[data-astro-cid-n6gmqr4i]:focus{outline:none}.control-btn[data-astro-cid-n6gmqr4i]:focus-visible{outline:2px solid #fff;outline-offset:2px}@media (max-width: 768px){.recording-control[data-astro-cid-n6gmqr4i]{padding:.375rem .5rem}.control-btn[data-astro-cid-n6gmqr4i]{width:36px;height:36px}.recording-status[data-astro-cid-n6gmqr4i]{font-size:.8125rem}}.fullscreen-control[data-astro-cid-tfa4zfzg]{display:flex;align-items:center}.fullscreen-btn[data-astro-cid-tfa4zfzg]{display:flex;align-items:center;gap:.625rem;background:#ffffff0f;border:none;padding:.375rem .625rem;border-radius:.5rem;cursor:pointer;color:#fff;transition:all .15s ease;width:100%;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:36px}.fullscreen-btn[data-astro-cid-tfa4zfzg]:hover{background:#ffffff1a;color:#a8a8a8}.fullscreen-btn[data-astro-cid-tfa4zfzg]:active{transform:scale(.98)}.fullscreen-btn[data-astro-cid-tfa4zfzg] svg[data-astro-cid-tfa4zfzg]{width:20px;height:20px;flex-shrink:0}.compress-icon[data-astro-cid-tfa4zfzg]{display:none}.btn-text[data-astro-cid-tfa4zfzg]{font-size:.9rem;font-weight:500;white-space:nowrap;-moz-user-select:none;user-select:none;-webkit-user-select:none}.compress-text[data-astro-cid-tfa4zfzg],.fullscreen-btn[data-astro-cid-tfa4zfzg][data-fullscreen=true] .expand-icon[data-astro-cid-tfa4zfzg]{display:none}.fullscreen-btn[data-astro-cid-tfa4zfzg][data-fullscreen=true] .compress-icon[data-astro-cid-tfa4zfzg]{display:block}.fullscreen-btn[data-astro-cid-tfa4zfzg][data-fullscreen=true] .expand-text[data-astro-cid-tfa4zfzg]{display:none}.fullscreen-btn[data-astro-cid-tfa4zfzg][data-fullscreen=true] .compress-text[data-astro-cid-tfa4zfzg]{display:block}.piano-wrapper-tool.fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:9999;margin:0;padding:0;background:#1a1a1a;border:none;border-radius:0;box-shadow:none;display:flex;flex-direction:column}.piano-wrapper-tool.fullscreen .piano-container-tool{flex:1;display:flex;align-items:center;padding:2rem;min-height:0;overflow:auto;background:#1a1a1a}.piano-wrapper-tool.fullscreen .piano-keys-tool{margin:auto;height:100%;max-height:280px}.piano-wrapper-tool.fullscreen .controls-panel{margin-top:auto;margin-bottom:0}@media (max-width: 800px){.piano-wrapper-tool.fullscreen{padding:.5rem;justify-content:space-between}.piano-wrapper-tool.fullscreen .piano-container-tool{padding:.5rem 0;flex:0 1 auto;min-height:160px}.piano-wrapper-tool.fullscreen .piano-keys-tool{max-height:none;height:160px}.piano-wrapper-tool.fullscreen .controls-panel{padding:.5rem;margin-top:.5rem}.fullscreen-btn[data-astro-cid-tfa4zfzg]{padding:.75rem 1.25rem}.btn-text[data-astro-cid-tfa4zfzg]{font-size:1rem}.fullscreen-btn[data-astro-cid-tfa4zfzg] svg[data-astro-cid-tfa4zfzg]{width:24px;height:24px}}@media (max-width: 600px) and (orientation: portrait){.piano-wrapper-tool.fullscreen{height:100dvh}.piano-wrapper-tool.fullscreen .piano-container-tool{min-height:120px}.piano-wrapper-tool.fullscreen .piano-keys-tool{height:120px}}@media (max-width: 900px) and (orientation: landscape){.piano-wrapper-tool.fullscreen{padding:.25rem}.piano-wrapper-tool.fullscreen .piano-container-tool{min-height:100px}.piano-wrapper-tool.fullscreen .piano-keys-tool{height:100px}.piano-wrapper-tool.fullscreen .controls-panel{padding:.25rem;margin-top:.25rem}}.midi-support[data-astro-cid-v3da5rb7]{display:flex;align-items:center;gap:.75rem;background:#ffffff0f;padding:.375rem .625rem;border-radius:.5rem;width:100%;transition:background .15s ease}.midi-support[data-astro-cid-v3da5rb7]:hover{background:#ffffff1a}.midi-btn[data-astro-cid-v3da5rb7]{display:flex;align-items:center;gap:.75rem;background:none;border:none;padding:.5rem;cursor:pointer;color:#fff;font-size:.875rem;transition:all .2s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:44px}.midi-btn[data-astro-cid-v3da5rb7]:hover{color:#a8a8a8}.midi-btn[data-astro-cid-v3da5rb7]:active{transform:scale(.98)}.midi-btn[data-astro-cid-v3da5rb7][aria-checked=true],.midi-btn[data-astro-cid-v3da5rb7][aria-checked=true] .midi-status[data-astro-cid-v3da5rb7]{color:#4caf50}.midi-message[data-astro-cid-v3da5rb7]{font-size:.75rem;color:#666;padding:.25rem 0}.midi-btn[data-astro-cid-v3da5rb7]:focus{outline:none}.midi-btn[data-astro-cid-v3da5rb7]:focus-visible{outline:2px solid #fff;outline-offset:2px}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.midi-btn[data-astro-cid-v3da5rb7][data-connecting=true]{animation:pulse 1s infinite}@media (max-width: 768px){.midi-support[data-astro-cid-v3da5rb7]{flex-direction:column;align-items:flex-start;gap:.5rem}.midi-btn[data-astro-cid-v3da5rb7]{width:100%;justify-content:center}}.key-marking-control[data-astro-cid-gl6aikek]{display:flex;align-items:center;background:#ffffff0f;padding:.375rem .625rem;border-radius:.5rem;width:100%;transition:background .15s ease}.key-marking-control[data-astro-cid-gl6aikek]:hover{background:#ffffff1a}.marking-btn[data-astro-cid-gl6aikek]{display:flex;align-items:center;gap:.75rem;background:none;border:none;padding:0;cursor:pointer;color:#fff;font-size:.875rem;transition:all .2s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.marking-btn[data-astro-cid-gl6aikek]:hover{color:#a8a8a8}.marking-btn[data-astro-cid-gl6aikek][aria-checked=true],.marking-btn[data-astro-cid-gl6aikek][aria-checked=true] .marking-text[data-astro-cid-gl6aikek]{color:#f44}.marking-btn[data-astro-cid-gl6aikek]:focus{outline:none}.marking-btn[data-astro-cid-gl6aikek]:focus-visible{outline:2px solid #fff;outline-offset:2px}.key-mark-dot{position:absolute;width:8px;height:8px;background:#f44;border-radius:50%;top:40px;left:50%;transform:translate(-50%);display:none}.white-key-tool[data-marked=true] .key-mark-dot,.black-key-tool[data-marked=true] .key-mark-dot{display:block}.black-key-tool .key-mark-dot{background:#f66;top:30px}.sustain-control[data-astro-cid-clwazddy]{display:flex;align-items:center;gap:.625rem;background:#ffffff0f;padding:.375rem .625rem;border-radius:.5rem;width:100%;min-height:36px;transition:background .15s ease}.sustain-control[data-astro-cid-clwazddy]:hover{background:#ffffff1a}.toggle-btn[data-astro-cid-clwazddy]{display:flex;align-items:center;gap:.5rem;background:none;border:none;padding:.25rem;cursor:pointer;color:#fff;font-size:.875rem;transition:all .2s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation;white-space:nowrap}.toggle-slider[data-astro-cid-clwazddy]{position:relative;display:inline-block;width:32px;height:18px;background:#4a4a4a;border-radius:9px;transition:background .2s ease}.toggle-slider[data-astro-cid-clwazddy]:before{content:"";position:absolute;width:14px;height:14px;left:2px;top:2px;background:#fff;border-radius:50%;transition:transform .2s ease;box-shadow:0 1px 3px #0003}.toggle-btn[data-astro-cid-clwazddy][aria-checked=true] .toggle-slider[data-astro-cid-clwazddy]{background:#4caf50}.toggle-btn[data-astro-cid-clwazddy][aria-checked=true] .toggle-slider[data-astro-cid-clwazddy]:before{transform:translate(14px)}.toggle-text[data-astro-cid-clwazddy]{-moz-user-select:none;user-select:none;-webkit-user-select:none}.toggle-btn[data-astro-cid-clwazddy]:hover{color:#a8a8a8}.toggle-btn[data-astro-cid-clwazddy]:hover .toggle-slider[data-astro-cid-clwazddy]{opacity:.9}.toggle-btn[data-astro-cid-clwazddy]:active .toggle-slider[data-astro-cid-clwazddy]:before{transform:scale(.95) translate(var(--translate-x, 0))}.toggle-btn[data-astro-cid-clwazddy][aria-checked=true]:active .toggle-slider[data-astro-cid-clwazddy]:before{--translate-x: 14px}.toggle-btn[data-astro-cid-clwazddy]:focus{outline:none}.toggle-btn[data-astro-cid-clwazddy]:focus-visible{outline:2px solid #fff;outline-offset:2px}.sustain-slider-container[data-astro-cid-clwazddy]{display:flex;align-items:center;gap:.5rem;flex:1;min-width:100px;max-width:160px}.sustain-slider[data-astro-cid-clwazddy]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:#4a4a4a;border-radius:2px;outline:none;transition:background .2s ease;touch-action:none}.sustain-slider[data-astro-cid-clwazddy]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:#fff;border-radius:50%;cursor:pointer;-webkit-transition:transform .1s ease;transition:transform .1s ease;box-shadow:0 1px 3px #0003}.sustain-slider[data-astro-cid-clwazddy]::-moz-range-thumb{width:14px;height:14px;background:#fff;border:none;border-radius:50%;cursor:pointer;-moz-transition:transform .1s ease;transition:transform .1s ease;box-shadow:0 1px 3px #0003}.sustain-slider[data-astro-cid-clwazddy]::-webkit-slider-thumb:hover,.sustain-slider[data-astro-cid-clwazddy]::-webkit-slider-thumb:active{transform:scale(1.1)}.sustain-slider[data-astro-cid-clwazddy]::-moz-range-thumb:hover,.sustain-slider[data-astro-cid-clwazddy]::-moz-range-thumb:active{transform:scale(1.1)}.sustain-value[data-astro-cid-clwazddy]{min-width:3em;color:#fff;font-size:.75rem;text-align:right}@media (max-width: 768px){.sustain-control[data-astro-cid-clwazddy]{padding:.375rem .5rem;gap:.5rem;flex-wrap:nowrap}.toggle-btn[data-astro-cid-clwazddy]{flex-shrink:0}.sustain-slider-container[data-astro-cid-clwazddy]{min-width:80px;max-width:120px}.sustain-slider[data-astro-cid-clwazddy]::-webkit-slider-thumb{width:16px;height:16px}.sustain-slider[data-astro-cid-clwazddy]::-moz-range-thumb{width:16px;height:16px}}.metronome-control[data-astro-cid-i52fwgjc]{display:flex;align-items:center;gap:.625rem;background:#ffffff0f;padding:.375rem .625rem;border-radius:.5rem;width:100%;transition:background .15s ease}.metronome-control[data-astro-cid-i52fwgjc]:hover{background:#ffffff1a}.metronome-btn[data-astro-cid-i52fwgjc]{display:flex;align-items:center;gap:.5rem;background:none;border:none;padding:.25rem;cursor:pointer;color:#fff;font-size:.875rem;transition:all .2s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:36px}.metronome-btn[data-astro-cid-i52fwgjc]:hover{color:#a8a8a8}.metronome-btn[data-astro-cid-i52fwgjc][aria-checked=true],.metronome-btn[data-astro-cid-i52fwgjc][aria-checked=true] .metronome-text[data-astro-cid-i52fwgjc]{color:#4caf50}.metronome-icon[data-astro-cid-i52fwgjc]{transition:transform .2s ease}.metronome-btn[data-astro-cid-i52fwgjc][aria-checked=true] .metronome-icon[data-astro-cid-i52fwgjc]{animation:metronome-swing .5s infinite alternate}@keyframes metronome-swing{0%{transform:rotate(-15deg)}to{transform:rotate(15deg)}}.tempo-controls[data-astro-cid-i52fwgjc]{display:flex;align-items:center;gap:.5rem}.tempo-btn[data-astro-cid-i52fwgjc]{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:#ffffff1f;border:none;border-radius:50%;cursor:pointer;color:#fff;transition:all .15s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.tempo-btn[data-astro-cid-i52fwgjc]:hover{background:#fff3}.tempo-btn[data-astro-cid-i52fwgjc]:active{transform:scale(.95)}.tempo-display[data-astro-cid-i52fwgjc]{display:flex;align-items:baseline;gap:.25rem;min-width:3.5rem;color:#fff;font-size:.875rem;font-weight:700}.tempo-unit[data-astro-cid-i52fwgjc]{font-size:.75rem;color:#888}.metronome-btn[data-astro-cid-i52fwgjc]:focus,.tempo-btn[data-astro-cid-i52fwgjc]:focus{outline:none}.metronome-btn[data-astro-cid-i52fwgjc]:focus-visible,.tempo-btn[data-astro-cid-i52fwgjc]:focus-visible{outline:2px solid #fff;outline-offset:2px}@media (max-width: 768px){.metronome-control[data-astro-cid-i52fwgjc]{padding:.5rem .75rem}.tempo-btn[data-astro-cid-i52fwgjc]{width:36px;height:36px}.tempo-display[data-astro-cid-i52fwgjc]{min-width:3.75rem}}:root{--white-key-count: 35;--keys-spacing: .2%;--white-key-width: calc((100% - (var(--keys-spacing) * (var(--white-key-count) - 1))) / var(--white-key-count));--white-key-height: 280px;--black-key-width: calc(var(--white-key-width) * .6);--black-key-height: calc(var(--white-key-height) * .57);--black-key-adjust: calc(var(--black-key-width) * .4);--key-label-size: 1.5em;--note-label-size: 1.2em;--white-key-typing-label-display: block;--black-key-typing-label-display: flex}.piano-instrument-panel[data-astro-cid-a4mrgrxv]{width:100%;display:flex;flex-direction:column;align-items:center;padding:0 20px;box-sizing:border-box}.piano-wrapper-tool[data-astro-cid-a4mrgrxv]{width:100%;max-width:1400px;display:flex;flex-direction:column;background:var(--color-surface-elevated, #ffffff);border:1px solid var(--color-border, rgb(223, 223, 219));border-radius:.75rem;box-shadow:var(--shadow-card, 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04));overflow:hidden}.piano-container-tool[data-astro-cid-a4mrgrxv]{width:100%;padding:20px 16px;position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(180deg,#f0f1f3,#e8e9eb)}.piano-keys-tool[data-astro-cid-a4mrgrxv]{position:relative;display:flex;margin:0 auto;gap:var(--keys-spacing);width:calc(var(--white-key-width) * var(--white-key-count) + var(--keys-spacing) * (var(--white-key-count) - 1));max-width:100%;height:var(--white-key-height)}.white-key-tool[data-astro-cid-a4mrgrxv]{position:relative;width:var(--white-key-width);height:var(--white-key-height);background:#fff;border:1px solid var(--color-border);border-radius:0 0 4px 4px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;color:#666;font-size:var(--key-label-size);transition:all .1s ease;touch-action:manipulation;-moz-user-select:none;user-select:none;-webkit-user-select:none}.white-key-tool[data-astro-cid-a4mrgrxv]:active,.white-key-tool[data-astro-cid-a4mrgrxv]._active{background:#7a94ff;transform:translateY(2px)}.black-key-tool[data-astro-cid-a4mrgrxv]{position:absolute;width:var(--black-key-width);height:var(--black-key-height);background:#000;border-radius:0 0 4px 4px;cursor:pointer;z-index:2;transition:all .1s ease;touch-action:manipulation;-moz-user-select:none;user-select:none;-webkit-user-select:none;box-shadow:0 4px 8px #0000004d;transform:translate(-50%)}.black-key-tool[data-astro-cid-a4mrgrxv]:active,.black-key-tool[data-astro-cid-a4mrgrxv]._active{background:#7a94ff;transform:translate(-50%) translateY(2px)}.key-label[data-astro-cid-a4mrgrxv]{position:absolute;text-align:center;font-size:var(--key-label-size);font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;width:100%}.note-label[data-astro-cid-a4mrgrxv]{display:var(--note-labels-visibility);bottom:10px;color:#666;font-size:var(--note-label-size);font-weight:700}.typing-label[data-astro-cid-a4mrgrxv]{display:var(--white-key-typing-label-display);position:absolute;text-align:center;font-size:var(--key-label-size);font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;width:100%;top:10px;color:#444}.black-key-tool[data-astro-cid-a4mrgrxv] .key-label[data-astro-cid-a4mrgrxv]{color:#fff;left:50%;transform:translate(-50%);width:-moz-max-content;width:max-content}.black-key-tool[data-astro-cid-a4mrgrxv] .note-label[data-astro-cid-a4mrgrxv]{bottom:20px;font-size:calc(var(--note-label-size) * .85)}.black-key-tool[data-astro-cid-a4mrgrxv] .typing-label[data-astro-cid-a4mrgrxv]{display:var(--black-key-typing-label-display);flex-direction:column;align-items:center;justify-content:center;top:5px;font-size:.7em;gap:2px;color:#fff;left:50%;transform:translate(-50%);width:-moz-max-content;width:max-content}.controls-panel[data-astro-cid-a4mrgrxv]{width:100%;padding:.75rem 1rem;background:var(--color-accent, rgb(11, 31, 49));border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:flex-start;gap:0;flex-wrap:wrap}.controls-divider[data-astro-cid-a4mrgrxv]{width:1px;align-self:stretch;background:#ffffff1f;margin:0 .25rem;flex-shrink:0}.controls-section[data-astro-cid-a4mrgrxv]{padding:.5rem .75rem;min-width:0;flex:1;min-width:160px}.controls-heading[data-astro-cid-a4mrgrxv]{color:#ffffff80;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem}.controls-group[data-astro-cid-a4mrgrxv]{display:flex;flex-direction:column;gap:.375rem}.piano-controls[data-astro-cid-a4mrgrxv]{display:flex;gap:1rem;justify-content:center;align-items:center;margin-top:2rem;flex-wrap:wrap;width:100%;max-width:800px}.key-mark-dot[data-astro-cid-a4mrgrxv]{position:absolute;width:8px;height:8px;background:#f44;border-radius:50%;top:40px;left:50%;transform:translate(-50%);display:none;z-index:3}.white-key-tool[data-astro-cid-a4mrgrxv][data-marked=true] .key-mark-dot[data-astro-cid-a4mrgrxv],.black-key-tool[data-astro-cid-a4mrgrxv][data-marked=true] .key-mark-dot[data-astro-cid-a4mrgrxv]{display:block}.black-key-tool[data-astro-cid-a4mrgrxv] .key-mark-dot[data-astro-cid-a4mrgrxv]{background:#e12b2b;top:30px}.db2[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 1 + var(--keys-spacing) * 1 - var(--black-key-width) / 2 + var(--black-key-adjust))}.eb2[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 2 + var(--keys-spacing) * 2 - var(--black-key-width) / 2 + var(--black-key-adjust))}.gb2[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 4 + var(--keys-spacing) * 4 - var(--black-key-width) / 2 + var(--black-key-adjust))}.ab2[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 5 + var(--keys-spacing) * 5 - var(--black-key-width) / 2 + var(--black-key-adjust))}.bb2[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 6 + var(--keys-spacing) * 6 - var(--black-key-width) / 2 + var(--black-key-adjust))}.db3[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 8 + var(--keys-spacing) * 8 - var(--black-key-width) / 2 + var(--black-key-adjust))}.eb3[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 9 + var(--keys-spacing) * 9 - var(--black-key-width) / 2 + var(--black-key-adjust))}.gb3[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 11 + var(--keys-spacing) * 11 - var(--black-key-width) / 2 + var(--black-key-adjust))}.ab3[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 12 + var(--keys-spacing) * 12 - var(--black-key-width) / 2 + var(--black-key-adjust))}.bb3[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 13 + var(--keys-spacing) * 13 - var(--black-key-width) / 2 + var(--black-key-adjust))}.db4[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 15 + var(--keys-spacing) * 15 - var(--black-key-width) / 2 + var(--black-key-adjust))}.eb4[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 16 + var(--keys-spacing) * 16 - var(--black-key-width) / 2 + var(--black-key-adjust))}.gb4[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 18 + var(--keys-spacing) * 18 - var(--black-key-width) / 2 + var(--black-key-adjust))}.ab4[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 19 + var(--keys-spacing) * 19 - var(--black-key-width) / 2 + var(--black-key-adjust))}.bb4[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 20 + var(--keys-spacing) * 20 - var(--black-key-width) / 2 + var(--black-key-adjust))}.db5[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 22 + var(--keys-spacing) * 22 - var(--black-key-width) / 2 + var(--black-key-adjust))}.eb5[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 23 + var(--keys-spacing) * 23 - var(--black-key-width) / 2 + var(--black-key-adjust))}.gb5[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 25 + var(--keys-spacing) * 25 - var(--black-key-width) / 2 + var(--black-key-adjust))}.ab5[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 26 + var(--keys-spacing) * 26 - var(--black-key-width) / 2 + var(--black-key-adjust))}.bb5[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 27 + var(--keys-spacing) * 27 - var(--black-key-width) / 2 + var(--black-key-adjust))}.db6[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 29 + var(--keys-spacing) * 29 - var(--black-key-width) / 2 + var(--black-key-adjust))}.eb6[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 30 + var(--keys-spacing) * 30 - var(--black-key-width) / 2 + var(--black-key-adjust))}.gb6[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 32 + var(--keys-spacing) * 32 - var(--black-key-width) / 2 + var(--black-key-adjust))}.ab6[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 33 + var(--keys-spacing) * 33 - var(--black-key-width) / 2 + var(--black-key-adjust))}.bb6[data-astro-cid-a4mrgrxv]{left:calc(var(--white-key-width) * 34 + var(--keys-spacing) * 34 - var(--black-key-width) / 2 + var(--black-key-adjust))}@media (max-width: 1200px){.piano-keys-tool[data-astro-cid-a4mrgrxv]{min-width:1200px}:root{--white-key-height: 160px;--black-key-height: calc(var(--white-key-height) * .57);--black-key-adjust: calc(var(--black-key-width) * .37);--key-label-size: .9em;--note-label-size: .7em;--keys-spacing: .1%}.black-key-tool[data-astro-cid-a4mrgrxv] .typing-label[data-astro-cid-a4mrgrxv]{font-size:.7em}}@media (min-width: 1201px){.white-key-tool[data-astro-cid-a4mrgrxv]{--key-label-size: 1.2em;--note-label-size: 1em}}@media (max-width: 800px){.piano-controls[data-astro-cid-a4mrgrxv]{flex-direction:column;gap:.75rem}.controls-panel[data-astro-cid-a4mrgrxv]{flex-direction:column;padding:.75rem;gap:0}.controls-divider[data-astro-cid-a4mrgrxv]{width:100%;height:1px;margin:.25rem 0}.controls-section[data-astro-cid-a4mrgrxv]{padding:.5rem}.controls-heading[data-astro-cid-a4mrgrxv]{font-size:.625rem;margin-bottom:.375rem}.controls-group[data-astro-cid-a4mrgrxv]{gap:.375rem}.black-key-tool[data-astro-cid-a4mrgrxv] .typing-label[data-astro-cid-a4mrgrxv]{font-size:.6em}}@media (max-width: 600px){:root{--white-key-height: 100px;--black-key-height: calc(var(--white-key-height) * .57);--black-key-adjust: calc(var(--black-key-width) * .37);--key-label-size: .6em;--note-label-size: .55em}.piano-instrument-panel[data-astro-cid-a4mrgrxv]{padding:0 12px}.controls-panel[data-astro-cid-a4mrgrxv]{padding:.5rem}.controls-section[data-astro-cid-a4mrgrxv]{padding:.375rem}}@media (max-width: 400px){:root{--white-key-height: 80px;--black-key-height: calc(var(--white-key-height) * .57);--black-key-adjust: calc(var(--black-key-width) * .37);--key-label-size: .5em;--note-label-size: .45em}}.ad-label[data-astro-cid-qfgzkobv]{font-size:.6rem;color:#6666667a;text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px;text-align:right}.mpu-ad-container[data-astro-cid-qfgzkobv]{width:100%;max-width:100%;margin:1px auto 0;overflow:hidden}.mpu-ad-wrapper[data-astro-cid-qfgzkobv]{position:relative;padding-top:min(90px,calc(100vw * .0938));min-height:280px;background-color:var(--color-surface);background-image:repeating-linear-gradient(-45deg,transparent,transparent 2px,var(--color-border-subtle) 2px,var(--color-border-subtle) 7px);font-size:.875rem;text-transform:uppercase;letter-spacing:.05em}@media (min-width: 728px){.mpu-ad-container[data-astro-cid-qfgzkobv]{max-width:930px}.mpu-ad-wrapper[data-astro-cid-qfgzkobv]{padding-top:280px}}.mpu-ad-wrapper[data-astro-cid-qfgzkobv] .adsbygoogle{position:absolute;top:0;left:0;width:100%;height:100%}