.piano-keyboard-48{height:200px;white-space:nowrap;padding-bottom:10px;touch-action:none;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;overflow:hidden!important}.white-key{position:relative;flex-grow:1;flex-shrink:1;min-width:14px;height:180px;border:1px solid #ddd;background-color:#fff;z-index:1}.black-key,.white-key{border-radius:0 0 4px 4px;transition:all .1s}.black-key{position:absolute;min-width:8px;height:110px;background-color:#000;z-index:10}.black-key div{font-size:.65rem!important;text-shadow:0 0 2px rgba(0,0,0,.5)}.white-key div{font-size:.7rem!important}@media (min-width:1200px){.piano-container{max-width:1400px;margin:0 auto}.white-key{min-width:22px!important}.black-key div,.white-key div{font-size:.75rem!important}}@media (max-width:768px){.white-key{height:120px!important}.black-key{height:80px!important}.black-key div,.white-key div{font-size:.6rem!important}}.white-keys-container{width:100%!important;display:flex;position:relative;z-index:1}.black-keys-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2}.white-key.pressed,.white-key:active{background-color:#f0f0f0;transform:translateY(2px);box-shadow:none}.black-key.pressed,.black-key:active{background-color:#333;transform:translateY(2px);box-shadow:none}.black-key.marked:after,.white-key.marked:after{content:"";position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:8px;height:8px;background-color:#4caf50;border-radius:50%}.white-key.playing{background-color:#e3f2fd}.black-key.playing{background-color:#455a64}.after\:bg-green-500:after{background-color:#4caf50!important}.top-2{top:.5rem}.bottom-2,.bottom-4{font-weight:400}.white-key div{opacity:1!important;text-shadow:0 0 1px rgba(0,0,0,.1);z-index:5}.black-key div{opacity:1!important;text-shadow:0 0 2px rgba(0,0,0,.8);z-index:5}.white-key .bottom-8{font-size:.85rem!important}.black-key .bottom-6{font-size:.75rem!important}.black-key .top-2,.white-key .top-2{font-weight:400!important;opacity:1!important}.black-key-letter,.black-key-note,.white-key-letter,.white-key-note{pointer-events:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important;z-index:20!important;opacity:1!important;visibility:visible!important;display:block!important}.white-key-note{font-size:.85rem!important;color:#999!important;font-weight:400!important;text-shadow:0 0 1px hsla(0,0%,100%,.8)!important}.black-key-note{font-size:.75rem!important;color:#fff!important;font-weight:400!important;text-shadow:0 0 2px rgba(0,0,0,.8)!important}.black-key-letter,.white-key-letter{font-size:.7rem!important;font-weight:400!important}@media (max-width:768px){.white-key-note{font-size:.7rem!important;bottom:6px!important}.black-key-note{font-size:.65rem!important;bottom:4px!important}}.black-key div,.white-key div{pointer-events:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important;z-index:50!important;opacity:1!important;visibility:visible!important;display:block!important}.white-key div{color:#999!important;font-weight:400!important;text-shadow:0 0 2px hsla(0,0%,100%,.9)!important}.black-key div{color:#fff!important;font-weight:400!important;text-shadow:0 0 2px rgba(0,0,0,.9)!important}.black-key,.white-key{overflow:visible!important}.black-key-label,.black-key-letter,.white-key-label,.white-key-letter{-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important;z-index:100!important}.piano-keyboard-48 .black-key-label,.piano-keyboard-48 .black-key-letter,.piano-keyboard-48 .white-key-label,.piano-keyboard-48 .white-key-letter{display:block!important;visibility:visible!important;opacity:1!important;z-index:9999!important}.black-key-label,.white-key-label{z-index:999!important;pointer-events:none!important}.black-key-label,.black-key-letter,.black-key:active .black-key-label,.black-key:hover .black-key-label,.white-key-label,.white-key-letter,.white-key:active .white-key-label,.white-key:hover .white-key-label{display:block!important;visibility:visible!important;opacity:1!important}.black-key-label,.black-key-letter,.white-key-label,.white-key-letter{z-index:999!important;pointer-events:none!important;text-shadow:0 0 2px hsla(0,0%,100%,.8)!important;background:transparent!important}.white-key-label,.white-key-letter{color:#999!important;font-weight:400!important}.black-key-label,.black-key-letter{color:#fff!important;font-weight:400!important;text-shadow:0 0 2px rgba(0,0,0,.8)!important}.piano-keyboard-48 .white-key div{color:#999!important;font-weight:400!important;text-shadow:0 0 2px hsla(0,0%,100%,.9)!important;background:transparent!important}.piano-keyboard-48 .black-key div{color:#fff!important;font-weight:400!important;text-shadow:0 0 2px rgba(0,0,0,.9)!important;background:transparent!important}.black-key:after,.white-key:after{z-index:50!important}.white-key.marked:after,.white-key[class*="after:bg-green-500"]:after{width:10px!important;height:10px!important;background-color:#4caf50!important;box-shadow:0 0 4px rgba(76,175,80,.6)!important}.black-key.marked:after,.black-key[class*="after:bg-green-500"]:after{width:8px!important;height:8px!important;background-color:#4caf50!important;box-shadow:0 0 4px rgba(76,175,80,.6)!important}@media (max-width:768px){.white-key.marked:after,.white-key[class*="after:bg-green-500"]:after{width:8px!important;height:8px!important}.black-key.marked:after,.black-key[class*="after:bg-green-500"]:after{width:6px!important;height:6px!important}}.piano-keyboard-48 .black-key,.piano-keyboard-48 .white-key{overflow:visible!important}.black-key[data-key=B-3]:after{display:none!important}.piano-tools{position:relative;z-index:5}.piano-keyboard-48{position:relative;z-index:1}.active-btn{background-color:#000!important;color:#fff!important;font-weight:600}.active-btn:hover{background-color:#333!important}body{transition:background-color 1s ease,color 1s ease}body.dark-mode{background-color:#121826;color:#f8fafc}body.dark-mode .piano-container{background-color:rgba(30,41,59,.8);border-color:#334155}body.dark-mode .white-key{border-color:#334155;background-color:#f8fafc}body.dark-mode .black-key{background-color:#0f172a}body.dark-mode button{transition:box-shadow .3s ease}body.dark-mode .piano-container button{transition:background-color .3s ease}body.dark-mode .metronome-container,body.dark-mode .note-recorder-simple,body.dark-mode .recorder-container{background-color:#f8fafc;border-color:#3b82f6;color:#1e293b}body.dark-mode .metronome-container .bpm-value,body.dark-mode .note-recorder-simple .note-recorder-title,body.dark-mode .recorder-container .recorder-title{color:#1e293b}body.dark-mode .metronome-container button,body.dark-mode .note-recorder-simple button,body.dark-mode .recorder-container button{border-color:#3b82f6}body.dark-mode .audio-preview,body.dark-mode .metronome-container .bpm-slider,body.dark-mode .note-recorder-content{background-color:#fff;border-color:#bfdbfe}body.dark-mode .audio-info,body.dark-mode .bpm-label,body.dark-mode .note-recorder-empty p,body.dark-mode .tempo-label{color:#475569}body.dark-mode .beat-indicator.active,body.dark-mode .recording-dot{background-color:#3b82f6}body.dark-mode .bpm-adjust-btn:hover,body.dark-mode .note-pill:hover{background-color:#bfdbfe}.metronome-container,.note-recorder-simple,.recorder-container{transition:background-color .5s ease,border-color .5s ease,box-shadow .5s ease}button{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px);max-height:0}to{opacity:1;transform:translateY(0);max-height:500px}}@keyframes slideUp{0%{opacity:1;transform:translateY(0);max-height:500px}to{opacity:0;transform:translateY(-20px);max-height:0}}.animate-slide-down{animation:slideDown .3s ease-out forwards}.animate-slide-up{animation:slideUp .3s ease-in forwards}.note-recorder-wrapper,.piano-tools,.recorder-wrapper{will-change:transform,opacity,max-height;overflow:hidden}.metronome-container,.note-recorder-simple,.recorder-container{transform-origin:top center}