.note-labels-control[data-astro-cid-l66aah3b]{display:flex;align-items:center;background:var(--color-hover-brand);padding:.5rem .75rem;border-radius:9999px;width:-moz-fit-content;width:fit-content}.toggle-btn[data-astro-cid-l66aah3b]{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-l66aah3b]{position:relative;display:inline-block;width:36px;height:20px;background:#4a4a4a;border-radius:10px;transition:background .2s ease}.toggle-slider[data-astro-cid-l66aah3b]: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-l66aah3b][aria-checked=true] .toggle-slider[data-astro-cid-l66aah3b]{background:#4caf50}.toggle-btn[data-astro-cid-l66aah3b][aria-checked=true] .toggle-slider[data-astro-cid-l66aah3b]:before{transform:translate(16px)}.toggle-text[data-astro-cid-l66aah3b]{-moz-user-select:none;user-select:none;-webkit-user-select:none}.toggle-btn[data-astro-cid-l66aah3b]:hover{color:#a8a8a8}.toggle-btn[data-astro-cid-l66aah3b]:hover .toggle-slider[data-astro-cid-l66aah3b]{opacity:.9}.toggle-btn[data-astro-cid-l66aah3b]:active .toggle-slider[data-astro-cid-l66aah3b]:before{transform:scale(.95) translate(var(--translate-x, 0))}.toggle-btn[data-astro-cid-l66aah3b][aria-checked=true]:active .toggle-slider[data-astro-cid-l66aah3b]:before{--translate-x: 16px}.toggle-btn[data-astro-cid-l66aah3b]:focus{outline:none}.toggle-btn[data-astro-cid-l66aah3b]:focus-visible{outline:2px solid #fff;outline-offset:2px}@media (max-width: 768px){.note-labels-control[data-astro-cid-l66aah3b]{padding:.5rem .75rem}.toggle-btn[data-astro-cid-l66aah3b]{padding:.25rem;width:100%;justify-content:space-between}}.key-labels-control[data-astro-cid-fwkuw6v3]{display:flex;align-items:center;background:var(--color-hover-brand);padding:.5rem .75rem;border-radius:9999px;width:-moz-fit-content;width:fit-content}.toggle-btn[data-astro-cid-fwkuw6v3]{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-fwkuw6v3]{position:relative;display:inline-block;width:36px;height:20px;background:#4a4a4a;border-radius:10px;transition:background .2s ease}.toggle-slider[data-astro-cid-fwkuw6v3]: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-fwkuw6v3][aria-checked=true] .toggle-slider[data-astro-cid-fwkuw6v3]{background:#4caf50}.toggle-btn[data-astro-cid-fwkuw6v3][aria-checked=true] .toggle-slider[data-astro-cid-fwkuw6v3]:before{transform:translate(16px)}.toggle-text[data-astro-cid-fwkuw6v3]{-moz-user-select:none;user-select:none;-webkit-user-select:none}.toggle-btn[data-astro-cid-fwkuw6v3]:hover{color:#a8a8a8}.toggle-btn[data-astro-cid-fwkuw6v3]:hover .toggle-slider[data-astro-cid-fwkuw6v3]{opacity:.9}.toggle-btn[data-astro-cid-fwkuw6v3]:active .toggle-slider[data-astro-cid-fwkuw6v3]:before{transform:scale(.95) translate(var(--translate-x, 0))}.toggle-btn[data-astro-cid-fwkuw6v3][aria-checked=true]:active .toggle-slider[data-astro-cid-fwkuw6v3]:before{--translate-x: 16px}.toggle-btn[data-astro-cid-fwkuw6v3]:focus{outline:none}.toggle-btn[data-astro-cid-fwkuw6v3]:focus-visible{outline:2px solid #fff;outline-offset:2px}@media (max-width: 768px){.key-labels-control[data-astro-cid-fwkuw6v3]{padding:.5rem .75rem}.toggle-btn[data-astro-cid-fwkuw6v3]{padding:.25rem;width:100%;justify-content:space-between}}.recording-control[data-astro-cid-7fzryxv3]{display:flex;align-items:center;gap:.75rem;background:var(--color-hover-brand);padding:.5rem .75rem;border-radius:9999px;width:-moz-fit-content;width:fit-content}.control-btn[data-astro-cid-7fzryxv3]{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-7fzryxv3]:hover:not(:disabled){background:#3a3a3a}.record-btn[data-astro-cid-7fzryxv3]:hover:not(:disabled){color:#f44}.play-btn[data-astro-cid-7fzryxv3]:hover:not(:disabled){color:#4f4}.record-btn[data-astro-cid-7fzryxv3][data-recording=true]{color:#f44;animation:pulse 2s infinite}.control-btn[data-astro-cid-7fzryxv3]:active:not(:disabled){transform:scale(.95)}.control-btn[data-astro-cid-7fzryxv3]:disabled{opacity:.5;cursor:not-allowed;animation:none}.icon-container[data-astro-cid-7fzryxv3]{position:relative;width:20px;height:20px}.play-icon[data-astro-cid-7fzryxv3],.pause-icon[data-astro-cid-7fzryxv3]{position:absolute;top:0;left:0;opacity:1;transition:opacity .2s ease}.pause-icon[data-astro-cid-7fzryxv3],.play-btn[data-astro-cid-7fzryxv3][data-playing=true] .play-icon[data-astro-cid-7fzryxv3]{opacity:0}.play-btn[data-astro-cid-7fzryxv3][data-playing=true] .pause-icon[data-astro-cid-7fzryxv3]{opacity:1}.recording-status[data-astro-cid-7fzryxv3]{display:flex;align-items:center;gap:.5rem;color:#fff;font-size:.875rem;padding:.25rem 0}.status-dot[data-astro-cid-7fzryxv3]{width:8px;height:8px;border-radius:50%;background:#666}[data-astro-cid-7fzryxv3][data-recording=true]~.recording-status[data-astro-cid-7fzryxv3] .status-dot[data-astro-cid-7fzryxv3]{background:#f44;animation:pulse 2s infinite}[data-astro-cid-7fzryxv3][data-playing=true]~.recording-status[data-astro-cid-7fzryxv3] .status-dot[data-astro-cid-7fzryxv3]{background:#4f4}.recording-time[data-astro-cid-7fzryxv3]{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-7fzryxv3]:focus{outline:none}.control-btn[data-astro-cid-7fzryxv3]:focus-visible{outline:2px solid #fff;outline-offset:2px}@media (max-width: 768px){.recording-control[data-astro-cid-7fzryxv3]{padding:.5rem}.control-btn[data-astro-cid-7fzryxv3]{width:44px;height:44px}.recording-status[data-astro-cid-7fzryxv3]{font-size:.8125rem}}.fullscreen-control[data-astro-cid-5v3vyekv]{display:flex;align-items:center}.fullscreen-btn[data-astro-cid-5v3vyekv]{display:flex;align-items:center;gap:.75rem;background:var(--color-hover-brand);border:none;padding:.5rem 1rem;border-radius:9999px;cursor:pointer;color:#fff;transition:all .2s ease;width:100%;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:44px}.fullscreen-btn[data-astro-cid-5v3vyekv]:hover{color:#a8a8a8}.fullscreen-btn[data-astro-cid-5v3vyekv]:active{transform:scale(.98)}.fullscreen-btn[data-astro-cid-5v3vyekv] svg[data-astro-cid-5v3vyekv]{width:20px;height:20px;flex-shrink:0}.compress-icon[data-astro-cid-5v3vyekv]{display:none}.btn-text[data-astro-cid-5v3vyekv]{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-5v3vyekv],.fullscreen-btn[data-astro-cid-5v3vyekv][data-fullscreen=true] .expand-icon[data-astro-cid-5v3vyekv]{display:none}.fullscreen-btn[data-astro-cid-5v3vyekv][data-fullscreen=true] .compress-icon[data-astro-cid-5v3vyekv]{display:block}.fullscreen-btn[data-astro-cid-5v3vyekv][data-fullscreen=true] .expand-text[data-astro-cid-5v3vyekv]{display:none}.fullscreen-btn[data-astro-cid-5v3vyekv][data-fullscreen=true] .compress-text[data-astro-cid-5v3vyekv]{display:block}.piano-wrapper-tool.fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:9999;margin:0;padding:2rem;background:#1a1a1a;display:flex;flex-direction:column}.piano-wrapper-tool.fullscreen .piano-container-tool{flex:1;display:flex;align-items:center;padding:2rem 0;min-height:0;overflow:auto}.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-5v3vyekv]{padding:.75rem 1.25rem}.btn-text[data-astro-cid-5v3vyekv]{font-size:1rem}.fullscreen-btn[data-astro-cid-5v3vyekv] svg[data-astro-cid-5v3vyekv]{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-omgx2e25]{display:flex;align-items:center;gap:1rem;background:var(--color-hover-brand);padding:.5rem 1rem;border-radius:9999px;width:-moz-fit-content;width:fit-content}.midi-btn[data-astro-cid-omgx2e25]{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-omgx2e25]:hover{color:#a8a8a8}.midi-btn[data-astro-cid-omgx2e25]:active{transform:scale(.98)}.midi-btn[data-astro-cid-omgx2e25][aria-checked=true],.midi-btn[data-astro-cid-omgx2e25][aria-checked=true] .midi-status[data-astro-cid-omgx2e25]{color:#4caf50}.midi-message[data-astro-cid-omgx2e25]{font-size:.75rem;color:#666;padding:.25rem 0}.midi-btn[data-astro-cid-omgx2e25]:focus{outline:none}.midi-btn[data-astro-cid-omgx2e25]: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-omgx2e25][data-connecting=true]{animation:pulse 1s infinite}@media (max-width: 768px){.midi-support[data-astro-cid-omgx2e25]{flex-direction:column;align-items:flex-start;gap:.5rem}.midi-btn[data-astro-cid-omgx2e25]{width:100%;justify-content:center}}.key-marking-control[data-astro-cid-dauuaiyn]{display:flex;align-items:center;background:var(--color-hover-brand);padding:.5rem 1rem;border-radius:9999px;width:-moz-fit-content;width:fit-content}.marking-btn[data-astro-cid-dauuaiyn]{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-dauuaiyn]:hover{color:#a8a8a8}.marking-btn[data-astro-cid-dauuaiyn][aria-checked=true],.marking-btn[data-astro-cid-dauuaiyn][aria-checked=true] .marking-text[data-astro-cid-dauuaiyn]{color:#f44}.marking-btn[data-astro-cid-dauuaiyn]:focus{outline:none}.marking-btn[data-astro-cid-dauuaiyn]: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-avknvgim]{display:flex;align-items:center;gap:.75rem;background:var(--color-hover-brand);padding:.5rem .75rem;border-radius:9999px;width:-moz-fit-content;width:fit-content;min-height:36px}.toggle-btn[data-astro-cid-avknvgim]{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-avknvgim]{position:relative;display:inline-block;width:32px;height:18px;background:#4a4a4a;border-radius:9px;transition:background .2s ease}.toggle-slider[data-astro-cid-avknvgim]: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-avknvgim][aria-checked=true] .toggle-slider[data-astro-cid-avknvgim]{background:#4caf50}.toggle-btn[data-astro-cid-avknvgim][aria-checked=true] .toggle-slider[data-astro-cid-avknvgim]:before{transform:translate(14px)}.toggle-text[data-astro-cid-avknvgim]{-moz-user-select:none;user-select:none;-webkit-user-select:none}.toggle-btn[data-astro-cid-avknvgim]:hover{color:#a8a8a8}.toggle-btn[data-astro-cid-avknvgim]:hover .toggle-slider[data-astro-cid-avknvgim]{opacity:.9}.toggle-btn[data-astro-cid-avknvgim]:active .toggle-slider[data-astro-cid-avknvgim]:before{transform:scale(.95) translate(var(--translate-x, 0))}.toggle-btn[data-astro-cid-avknvgim][aria-checked=true]:active .toggle-slider[data-astro-cid-avknvgim]:before{--translate-x: 14px}.toggle-btn[data-astro-cid-avknvgim]:focus{outline:none}.toggle-btn[data-astro-cid-avknvgim]:focus-visible{outline:2px solid #fff;outline-offset:2px}.sustain-slider-container[data-astro-cid-avknvgim]{display:flex;align-items:center;gap:.5rem;flex:1;min-width:100px;max-width:160px}.sustain-slider[data-astro-cid-avknvgim]{-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-avknvgim]::-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-avknvgim]::-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-avknvgim]::-webkit-slider-thumb:hover,.sustain-slider[data-astro-cid-avknvgim]::-webkit-slider-thumb:active{transform:scale(1.1)}.sustain-slider[data-astro-cid-avknvgim]::-moz-range-thumb:hover,.sustain-slider[data-astro-cid-avknvgim]::-moz-range-thumb:active{transform:scale(1.1)}.sustain-value[data-astro-cid-avknvgim]{min-width:3em;color:#fff;font-size:.75rem;text-align:right}@media (max-width: 768px){.sustain-control[data-astro-cid-avknvgim]{padding:.5rem .75rem;gap:.75rem;width:auto;flex-wrap:nowrap}.toggle-btn[data-astro-cid-avknvgim]{flex-shrink:0}.sustain-slider-container[data-astro-cid-avknvgim]{min-width:80px;max-width:120px}.sustain-slider[data-astro-cid-avknvgim]::-webkit-slider-thumb{width:16px;height:16px}.sustain-slider[data-astro-cid-avknvgim]::-moz-range-thumb{width:16px;height:16px}}.metronome-control[data-astro-cid-qwot2efx]{display:flex;align-items:center;gap:.75rem;background:var(--color-hover-brand);padding:.5rem .75rem;border-radius:9999px;width:-moz-fit-content;width:fit-content}.metronome-btn[data-astro-cid-qwot2efx]{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-qwot2efx]:hover{color:#a8a8a8}.metronome-btn[data-astro-cid-qwot2efx][aria-checked=true],.metronome-btn[data-astro-cid-qwot2efx][aria-checked=true] .metronome-text[data-astro-cid-qwot2efx]{color:#4caf50}.metronome-icon[data-astro-cid-qwot2efx]{transition:transform .2s ease}.metronome-btn[data-astro-cid-qwot2efx][aria-checked=true] .metronome-icon[data-astro-cid-qwot2efx]{animation:metronome-swing .5s infinite alternate}@keyframes metronome-swing{0%{transform:rotate(-15deg)}to{transform:rotate(15deg)}}.tempo-controls[data-astro-cid-qwot2efx]{display:flex;align-items:center;gap:.5rem}.tempo-btn[data-astro-cid-qwot2efx]{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#4a4a4a;border:none;border-radius:50%;cursor:pointer;color:#fff;transition:all .2s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.tempo-btn[data-astro-cid-qwot2efx]:hover{background:#666}.tempo-btn[data-astro-cid-qwot2efx]:active{transform:scale(.95)}.tempo-display[data-astro-cid-qwot2efx]{display:flex;align-items:baseline;gap:.25rem;min-width:3.5rem;color:#fff;font-size:.875rem;font-weight:700}.tempo-unit[data-astro-cid-qwot2efx]{font-size:.75rem;color:#888}.metronome-btn[data-astro-cid-qwot2efx]:focus,.tempo-btn[data-astro-cid-qwot2efx]:focus{outline:none}.metronome-btn[data-astro-cid-qwot2efx]:focus-visible,.tempo-btn[data-astro-cid-qwot2efx]:focus-visible{outline:2px solid #fff;outline-offset:2px}@media (max-width: 768px){.metronome-control[data-astro-cid-qwot2efx]{padding:.5rem .75rem}.tempo-btn[data-astro-cid-qwot2efx]{width:36px;height:36px}.tempo-display[data-astro-cid-qwot2efx]{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-wrapper-tool[data-astro-cid-bttv2juv]{width:100%;display:flex;flex-direction:column;align-items:center;background:var(--color-hover-brand);padding:20px;box-sizing:border-box}.piano-container-tool[data-astro-cid-bttv2juv]{width:100%;padding:20px 0;position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}.piano-keys-tool[data-astro-cid-bttv2juv]{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-bttv2juv]{position:relative;width:var(--white-key-width);height:var(--white-key-height);background:#fff;border:1px solid #ccc;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-bttv2juv]:active,.white-key-tool[data-astro-cid-bttv2juv]._active{background:#7a94ff;transform:translateY(2px)}.black-key-tool[data-astro-cid-bttv2juv]{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-bttv2juv]:active,.black-key-tool[data-astro-cid-bttv2juv]._active{background:#7a94ff;transform:translate(-50%) translateY(2px)}.key-label[data-astro-cid-bttv2juv]{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-bttv2juv]{display:var(--note-labels-visibility);bottom:10px;color:#666;font-size:var(--note-label-size);font-weight:700}.typing-label[data-astro-cid-bttv2juv]{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-bttv2juv] .key-label[data-astro-cid-bttv2juv]{color:#fff;left:50%;transform:translate(-50%);width:-moz-max-content;width:max-content}.black-key-tool[data-astro-cid-bttv2juv] .note-label[data-astro-cid-bttv2juv]{bottom:20px;font-size:calc(var(--note-label-size) * .85)}.black-key-tool[data-astro-cid-bttv2juv] .typing-label[data-astro-cid-bttv2juv]{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-bttv2juv]{width:100%;max-width:1400px;margin:2rem auto;padding:1.5rem;background:#4387c311;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;box-shadow:0 4px 6px #0000001a;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.controls-section[data-astro-cid-bttv2juv]{padding:1.5rem;background:#ffffff0d;border-radius:8px;transition:all .3s ease;min-width:0}.controls-section[data-astro-cid-bttv2juv]:hover{background:#ffffff14;transform:translateY(-2px)}.controls-heading[data-astro-cid-bttv2juv]{color:#fff;font-size:1.1rem;font-weight:600;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid rgba(255,255,255,.1)}.controls-group[data-astro-cid-bttv2juv]{display:flex;flex-direction:column;gap:.75rem}.piano-controls[data-astro-cid-bttv2juv]{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-bttv2juv]{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-bttv2juv][data-marked=true] .key-mark-dot[data-astro-cid-bttv2juv],.black-key-tool[data-astro-cid-bttv2juv][data-marked=true] .key-mark-dot[data-astro-cid-bttv2juv]{display:block}.black-key-tool[data-astro-cid-bttv2juv] .key-mark-dot[data-astro-cid-bttv2juv]{background:#e12b2b;top:30px}.db2[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 1 + var(--keys-spacing) * 1 - var(--black-key-width) / 2 + var(--black-key-adjust))}.eb2[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 2 + var(--keys-spacing) * 2 - var(--black-key-width) / 2 + var(--black-key-adjust))}.gb2[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 4 + var(--keys-spacing) * 4 - var(--black-key-width) / 2 + var(--black-key-adjust))}.ab2[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 5 + var(--keys-spacing) * 5 - var(--black-key-width) / 2 + var(--black-key-adjust))}.bb2[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 6 + var(--keys-spacing) * 6 - var(--black-key-width) / 2 + var(--black-key-adjust))}.db3[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 8 + var(--keys-spacing) * 8 - var(--black-key-width) / 2 + var(--black-key-adjust))}.eb3[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 9 + var(--keys-spacing) * 9 - var(--black-key-width) / 2 + var(--black-key-adjust))}.gb3[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 11 + var(--keys-spacing) * 11 - var(--black-key-width) / 2 + var(--black-key-adjust))}.ab3[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 12 + var(--keys-spacing) * 12 - var(--black-key-width) / 2 + var(--black-key-adjust))}.bb3[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 13 + var(--keys-spacing) * 13 - var(--black-key-width) / 2 + var(--black-key-adjust))}.db4[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 15 + var(--keys-spacing) * 15 - var(--black-key-width) / 2 + var(--black-key-adjust))}.eb4[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 16 + var(--keys-spacing) * 16 - var(--black-key-width) / 2 + var(--black-key-adjust))}.gb4[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 18 + var(--keys-spacing) * 18 - var(--black-key-width) / 2 + var(--black-key-adjust))}.ab4[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 19 + var(--keys-spacing) * 19 - var(--black-key-width) / 2 + var(--black-key-adjust))}.bb4[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 20 + var(--keys-spacing) * 20 - var(--black-key-width) / 2 + var(--black-key-adjust))}.db5[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 22 + var(--keys-spacing) * 22 - var(--black-key-width) / 2 + var(--black-key-adjust))}.eb5[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 23 + var(--keys-spacing) * 23 - var(--black-key-width) / 2 + var(--black-key-adjust))}.gb5[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 25 + var(--keys-spacing) * 25 - var(--black-key-width) / 2 + var(--black-key-adjust))}.ab5[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 26 + var(--keys-spacing) * 26 - var(--black-key-width) / 2 + var(--black-key-adjust))}.bb5[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 27 + var(--keys-spacing) * 27 - var(--black-key-width) / 2 + var(--black-key-adjust))}.db6[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 29 + var(--keys-spacing) * 29 - var(--black-key-width) / 2 + var(--black-key-adjust))}.eb6[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 30 + var(--keys-spacing) * 30 - var(--black-key-width) / 2 + var(--black-key-adjust))}.gb6[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 32 + var(--keys-spacing) * 32 - var(--black-key-width) / 2 + var(--black-key-adjust))}.ab6[data-astro-cid-bttv2juv]{left:calc(var(--white-key-width) * 33 + var(--keys-spacing) * 33 - var(--black-key-width) / 2 + var(--black-key-adjust))}.bb6[data-astro-cid-bttv2juv]{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-bttv2juv]{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-bttv2juv] .typing-label[data-astro-cid-bttv2juv]{font-size:.7em}}@media (min-width: 1201px){.white-key-tool[data-astro-cid-bttv2juv]{--key-label-size: 1.2em;--note-label-size: 1em}}@media (max-width: 800px){.piano-controls[data-astro-cid-bttv2juv]{flex-direction:column;gap:.75rem}.controls-panel[data-astro-cid-bttv2juv]{grid-template-columns:1fr;padding:1rem;gap:1rem}.controls-section[data-astro-cid-bttv2juv]{padding:.75rem}.controls-heading[data-astro-cid-bttv2juv]{font-size:1rem;margin-bottom:.75rem}.controls-group[data-astro-cid-bttv2juv]{gap:.5rem}.black-key-tool[data-astro-cid-bttv2juv] .typing-label[data-astro-cid-bttv2juv]{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}.controls-panel[data-astro-cid-bttv2juv]{margin:1rem auto;padding:.75rem}.controls-section[data-astro-cid-bttv2juv]{padding:.5rem}}@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}}h2[data-astro-cid-bttv2juv]{text-transform:none}.ad-label[data-astro-cid-tqz4q2bh]{font-size:.6rem;color:#6666667a;text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px;text-align:right}.mpu-ad-container[data-astro-cid-tqz4q2bh]{width:100%;max-width:100%;margin:1px auto 0;overflow:hidden}.mpu-ad-wrapper[data-astro-cid-tqz4q2bh]{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-tqz4q2bh]{max-width:930px}.mpu-ad-wrapper[data-astro-cid-tqz4q2bh]{padding-top:280px}}.mpu-ad-wrapper[data-astro-cid-tqz4q2bh] .adsbygoogle{position:absolute;top:0;left:0;width:100%;height:100%}