.key[data-v-bafce364]{cursor:pointer;-moz-user-select:none;user-select:none;-webkit-user-select:none}.active-key[data-v-bafce364]{opacity:.45}.volume-slider{margin-top:3rem;color:#000;display:flex;width:16rem;align-items:center;flex-direction:column;justify-content:center;border:1px solid #486e72;border-radius:5px;padding:10px;background-color:#86d0d2;margin-left:auto;margin-right:auto}input[type=range].volume-slider{width:100%;max-width:200px;margin-left:1.5rem;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;vertical-align:middle}input[type=range].volume-slider::-webkit-slider-runnable-track{width:100%;height:8px;background:#d3d3d3;border-radius:3px;position:relative}input[type=range].volume-slider::-moz-range-track{width:100%;height:8px;background:#d3d3d3;border-radius:3px}input[type=range].volume-slider::-ms-track{width:100%;height:8px;background:#d3d3d3;border-radius:3px}input[type=range].volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:#0ddc14;border-radius:50%;margin-top:-6px}input[type=range].volume-slider::-moz-range-thumb{width:20px;height:20px;background:#a0af4c;border-radius:50%}input[type=range].volume-slider::-ms-thumb{width:20px;height:20px;background:#4caf50;border-radius:50%}.piano-keyboard[data-v-0c00e288]{display:flex;align-items:flex-start;background-color:#84cfd2;padding:50px;border-radius:10px;box-shadow:1px 8px 6px #395a63}.key[data-v-0c00e288]{cursor:pointer;-moz-user-select:none;user-select:none;-webkit-user-select:none;box-shadow:0 2px 4px #316c9c}.white[data-v-0c00e288]{background-color:#fff;height:120px;width:40px;border:2px solid #ccc;z-index:1}.black[data-v-0c00e288]{background-color:#000;height:80px;width:30px;margin-left:-15px;margin-right:-15px;z-index:2}.keyboard-container[data-v-0c00e288]{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:1rem;box-sizing:border-box}.piano-container[data-v-0c00e288]{margin-bottom:250px}.info-box-container[data-v-0c00e288]{display:flex;justify-content:space-between;width:100%;margin-bottom:20px}.info-box[data-v-0c00e288]{flex:1;padding:10px;margin:10px;text-align:center;font-size:24px;font-weight:700;background-color:#ffffffd8;border:1px solid #0000007f;border-radius:8px}.waveform-selected[data-v-0c00e288]{background-color:#0ff!important}.waveform-selection[data-v-0c00e288]{display:flex;justify-content:center;margin-bottom:10px}.waveform-selection button[data-v-0c00e288]{background-color:#f0f0f0;border:1px solid #0707077e;border-radius:4px;color:#000;cursor:pointer;font-size:14px;margin:0 5px;padding:8px 12px;text-transform:capitalize;transition:background-color .2s}.waveform-selection button[data-v-0c00e288]:hover{background-color:#a2a1a1}.waveform-selection button[data-v-0c00e288]:active{background-color:#d0d0d0}.title[data-v-0c00e288]{font-size:3rem;text-align:center;margin-bottom:3rem;background-color:#f3ec78;background-image:linear-gradient(45deg,#f0a,#d9ff00);background-size:100%;-webkit-background-clip:text;-moz-background-clip:text;-webkit-text-fill-color:transparent;-moz-text-fill-color:transparent;-webkit-text-stroke-width:1.5px;-webkit-text-stroke-color:#000}.controls-container[data-v-0c00e288]{display:flex;flex-direction:column;align-items:center}.instruction-box[data-v-0c00e288]{background-color:#99e7ff;border:1px solid #545454;border-radius:4px;padding:10px;margin-top:10px;text-align:center;font-size:14px}@media (max-width:768px){.piano-keyboard[data-v-0c00e288]{padding:20px;flex-wrap:wrap}.key[data-v-0c00e288]{height:60px;width:20px}.title[data-v-0c00e288]{font-size:1.5rem}}#app[data-v-6db6b6a4]{display:flex;justify-content:center;align-items:flex-end;height:100vh;margin:0;padding:0;background:linear-gradient(#0c8ed3,#0cabc0,#aff3ff)}