.piano[data-v-99d36b5b]{width:100%;color:#000;position:relative}.piano .piano-scroll-wrap[data-v-99d36b5b]{width:100%;overflow:scroll}.piano .piano-wrap.visible[data-v-99d36b5b]{opacity:1}.piano .piano-wrap[data-v-99d36b5b]{width:90%;box-shadow:5px 5px 20px 5px #888;border-radius:5px;opacity:0;margin:20px auto;overflow:hidden;position:relative}.piano .piano-wrap .piano-band[data-v-99d36b5b]{width:100%;height:40px;line-height:40px;background:#000;box-shadow:inset 0 -1px 2px #fff6,0 2px 3px #0006;border-width:3px 2px 2px;border-style:solid;border-color:#555 #222 #111 #777;position:relative}.piano .piano-wrap .piano-band .piano-tip[data-v-99d36b5b]{color:#fff;font-size:14px;transform:translateY(-50%);position:absolute;top:50%;right:20px}.piano .piano-wrap .piano-key-wrap[data-v-99d36b5b]{width:100%;background:#373737;overflow:hidden;position:relative}.piano .piano-wrap .piano-key-wrap .piano-key[data-v-99d36b5b]:hover{cursor:pointer}.piano .piano-wrap .piano-key-wrap .wkey[data-v-99d36b5b]{display:inline-block;width:2.775%;height:100%;background:linear-gradient(-30deg,#f5f5f5,#fff);box-shadow:inset 0 1px #fff,inset 0 -1px #fff,inset 1px 0 #fff,inset -1px 0 #fff,0 4px 3px #000000b3;border:1px solid #ccc;border-radius:0 0 5px 5px;margin:0 auto;position:relative}.piano .piano-wrap .piano-key-wrap .wkey[data-v-99d36b5b]:active{height:99%;background:#efefef;box-shadow:0 2px 2px #0006;top:-1%}.piano .piano-wrap .piano-key-wrap .wkey[data-v-99d36b5b]:active:before{content:"";border-width:250px 5px 0px;border-style:solid;border-color:transparent transparent transparent rgba(0,0,0,.1);position:absolute;left:0;bottom:0}.piano .piano-wrap .piano-key-wrap .wkey[data-v-99d36b5b]:active:after{content:"";border-width:250px 5px 0px;border-style:solid;border-color:transparent rgba(0,0,0,.1) transparent transparent;position:absolute;right:0;bottom:0}.piano .piano-wrap .piano-key-wrap .wkey .keytip[data-v-99d36b5b]{width:100%;color:#373737;font-size:14px;text-align:center;position:absolute;bottom:5%}.piano .piano-wrap .piano-key-wrap .wkey .keytip .keyname[data-v-99d36b5b]{margin-bottom:5px}.piano .piano-wrap .piano-key-wrap .wkey .keytip .notename[data-v-99d36b5b]{color:#1295db;font-weight:700}.piano .piano-wrap .piano-key-wrap .wkey-active[data-v-99d36b5b]{height:99%;background:#efefef;box-shadow:0 2px 2px #0006;top:-1%}.piano .piano-wrap .piano-key-wrap .wkey-active[data-v-99d36b5b]:before{content:"";border-width:250px 5px 0px;border-style:solid;border-color:transparent transparent transparent rgba(0,0,0,.1);position:absolute;left:0;bottom:0}.piano .piano-wrap .piano-key-wrap .wkey-active[data-v-99d36b5b]:after{content:"";border-width:250px 5px 0px;border-style:solid;border-color:transparent rgba(0,0,0,.1) transparent transparent;position:absolute;right:0;bottom:0}.piano .piano-wrap .piano-key-wrap .bkey[data-v-99d36b5b]{display:inline-block;width:10%;height:70%;background:linear-gradient(-20deg,#333,#000,#333);box-shadow:inset 0 -1px 2px #fff6,0 2px 3px #0006;border-width:1px 2px 7px;border-style:solid;border-color:#666 #222 #111 #555;border-radius:0 0 2px 2px;overflow:hidden;position:absolute;top:0}.piano .piano-wrap .piano-key-wrap .bkey[data-v-99d36b5b]:active{height:101%;box-shadow:inset 0 -1px 1px #fff6,0 1px #000c,0 2px 2px #0006,0 -1px #000;border-bottom-width:2px}.piano .piano-wrap .piano-key-wrap .bkey .keytip[data-v-99d36b5b]{width:100%;color:#fff;font-size:14px;overflow:hidden;position:absolute;bottom:5%;left:0}.piano .piano-wrap .piano-key-wrap .bkey .keytip .keyname[data-v-99d36b5b]{width:100%;text-align:center}.piano .piano-wrap .piano-key-wrap .bkey-active[data-v-99d36b5b]{height:101%;box-shadow:inset 0 -1px 1px #fff6,0 1px #000c,0 2px 2px #0006,0 -1px #000;border-bottom-width:2px}.piano .piano-wrap .piano-key-wrap .wkey.auto-key-active[data-v-99d36b5b]{height:100%;background:#facc94!important;box-shadow:0 2px 2px #0006;top:0%}.piano .piano-wrap .piano-key-wrap .wkey.auto-key-active[data-v-99d36b5b]:before{content:"";border-width:250px 5px 0px;border-style:solid;border-color:transparent transparent transparent rgba(0,0,0,.1);position:absolute;top:0;left:0}.piano .piano-wrap .piano-key-wrap .wkey.auto-key-active[data-v-99d36b5b]:after{content:"";border-width:250px 5px 0px;border-style:solid;border-color:transparent rgba(0,0,0,.1) transparent transparent;position:absolute;right:0;left:0}.piano .piano-wrap .piano-key-wrap .bkey.auto-key-active[data-v-99d36b5b]{height:101%;background:#facc94!important;box-shadow:inset 0 -1px 1px #fff6,0 1px #000c,0 2px 2px #0006,0 -1px #000;border-bottom-width:2px}.piano .piano-wrap .piano-key-wrap .bkey[data-v-99d36b5b]:nth-child(1){left:9%}.piano .piano-wrap .piano-key-wrap .bkey[data-v-99d36b5b]:nth-child(2){left:23%}.piano .piano-wrap .piano-key-wrap .bkey[data-v-99d36b5b]:nth-child(3){left:50%}.piano .piano-wrap .piano-key-wrap .bkey[data-v-99d36b5b]:nth-child(4){left:65%}.piano .piano-wrap .piano-key-wrap .bkey[data-v-99d36b5b]:nth-child(5){left:79%}.piano .piano-wrap .piano-key-wrap .bkey-wrap[data-v-99d36b5b]{width:20%;height:0;position:absolute;top:0}.piano .piano-wrap .piano-key-wrap .bkey-wrap1[data-v-99d36b5b]{left:0}.piano .piano-wrap .piano-key-wrap .bkey-wrap2[data-v-99d36b5b]{left:19.5%}.piano .piano-wrap .piano-key-wrap .bkey-wrap3[data-v-99d36b5b]{left:39%}.piano .piano-wrap .piano-key-wrap .bkey-wrap4[data-v-99d36b5b]{left:58.3%}.piano .piano-wrap .piano-key-wrap .bkey-wrap5[data-v-99d36b5b]{left:77.7%}.piano .piano-options[data-v-99d36b5b]{width:90%;height:50px;padding:0;margin:20px auto;position:relative}.piano .piano-options .option-item-wrap[data-v-99d36b5b]{gap:20px;display:flex;align-items:center;position:absolute;right:0}.piano .piano-options .option-item-wrap .option-item[data-v-99d36b5b]{height:40px;line-height:40px;display:flex;align-items:center}.piano .piano-options .option-item-wrap .option-item .recording-controls[data-v-99d36b5b]{display:flex;height:fit-content;gap:10px}.piano .piano-options .option-item-wrap .option-item .recording-controls .record-btn[data-v-99d36b5b]{padding:8px 16px;background-color:#fff;border-radius:4px;border:1px solid #1295db;color:#1295db;cursor:pointer;transition:all .3s}.piano .piano-options .option-item-wrap .option-item .recording-controls .record-btn[data-v-99d36b5b]:hover{background-color:#1295db;color:#fff}.piano .piano-options .option-item-wrap .option-item .recording-controls .record-btn.paused[data-v-99d36b5b]{background-color:#facc94;border-color:#facc94;color:#fff}.piano .piano-options .option-item-wrap .option-item .recording-controls .record-btn.paused[data-v-99d36b5b]:hover{background-color:#f8b563}.piano .piano-options .option-item-wrap .option-item .recording-controls .record-btn.stop[data-v-99d36b5b]{background-color:#f44;border-color:#f44;color:#fff}.piano .piano-options .option-item-wrap .option-item .recording-controls .record-btn.stop[data-v-99d36b5b]:hover{background-color:#f11}.piano .piano-options .option-item-wrap .option-item .recording-controls .record-btn.restart[data-v-99d36b5b]{background-color:#07e26d;border-color:#07e26d;color:#fff}.piano .piano-options .option-item-wrap .option-item .recording-controls .record-btn.restart[data-v-99d36b5b]:hover{background-color:#05b155}.piano .piano-options .option-item-wrap .option-item .recording-controls .record-btn[data-v-99d36b5b]:disabled{opacity:.6;cursor:not-allowed}.piano .piano-options .option-item-wrap .option-item .recording-controls .record-btn[data-v-99d36b5b]:disabled:hover{background-color:inherit;color:inherit}.piano .piano-options .option-item-wrap .option-item .recording-controls .recording-status[data-v-99d36b5b]{gap:10px;display:flex;align-items:center}.piano .piano-options .option-item-wrap .option-item .recording-controls .recording-status .recording-time[data-v-99d36b5b]{color:#1295db;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.piano .piano-options .option-item-wrap .option-item .recording-controls .recording-status .recording-indicator[data-v-99d36b5b]{width:12px;height:12px;background-color:#f44;border-radius:50%;animation:blink-99d36b5b 1s infinite}.piano .piano-options .option-item-wrap .option-item .recording-controls .recording-status .recording-indicator.paused[data-v-99d36b5b]{animation:none;opacity:.3}.piano .piano-options .option-item-wrap .option-item .label>input[data-v-99d36b5b]{display:none}.piano .piano-options .option-item-wrap .option-item .label i[data-v-99d36b5b]{display:inline-block;width:40px;height:20px;box-sizing:initial;padding:2px;background:#d8d9db;border-radius:13px;vertical-align:middle;transition:.25s .09s;margin-left:5px;position:relative}.piano .piano-options .option-item-wrap .option-item .label i[data-v-99d36b5b]:after{content:" ";display:block;width:20px;height:20px;background:#fff;border-radius:50%;transition:.25s;position:absolute;left:2px}.piano .piano-options .option-item-wrap .option-item .label>input:checked+i[data-v-99d36b5b]{background:#07e26d}.piano .piano-options .option-item-wrap .option-item .label>input:checked+i[data-v-99d36b5b]:after{transform:translate(20px)}.piano .piano-options .option-item-wrap .option-item .label[data-v-99d36b5b]:hover{cursor:pointer}.piano .piano-options .option-item-wrap .option-item .label.disabled[data-v-99d36b5b]{opacity:.6;cursor:not-allowed}.piano .piano-options .option-item-wrap .option-item .label.disabled[data-v-99d36b5b]:hover{cursor:not-allowed}.countdown-timer[data-v-99d36b5b]{color:#1295db;font-size:32px;font-weight:700;text-align:center;margin-top:40px}.countdown-timer .countdown-number[data-v-99d36b5b]{display:inline-block;min-width:30px;text-align:center}@keyframes blink-99d36b5b{0%{opacity:1}50%{opacity:.3}to{opacity:1}}