.note-bar{position:absolute;z-index:10;top:0;width:100%;height:100%;touch-action:none;cursor:default;user-select:none;pointer-events:none}.note-bar>canvas{width:100%;height:100%}.keyboard-c{position:absolute;bottom:0;left:0;width:100%;padding:0 0 15px}.keyboard{position:absolute;bottom:15px;height:200px;touch-action:none;cursor:default;overflow:visible;transition:transform .2s;-webkit-user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:rgba(0,0,0,0);transform-origin:0 100%;font-size:12px;box-shadow:0 0 10px rgba(0,0,0,.267)}.keyboard>.black{position:absolute;height:125px;margin:0 0 0 26px;width:0;bottom:75px;z-index:4;pointer-events:none}.keyboard>.black>div{position:absolute;left:0;top:0;width:27px;height:100%;background-color:#444;border:1px solid rgba(0,0,0,.5333333333);border-radius:3px;color:#fff;text-align:center}.keyboard>.black>div.act{background-color:#c783b2;border-color:rgba(0,0,0,.533)}.keyboard>.white{height:200px;white-space:nowrap;bottom:0;margin:0 0 0 1px;z-index:2;pointer-events:none}.keyboard>.white>div{position:relative;display:inline-block;width:41px;height:100%;background-color:#fff;border:1px solid rgba(0,0,0,.2666666667);margin:0 0 0 -1px;box-sizing:border-box;border-radius:4px;text-align:center;color:#000}.keyboard>.white>div.act{background-color:rgba(173,60,138,.6)}.keyboard>.white>div>div.pn{position:absolute;width:100%;bottom:10px;font-size:12px}.keyboard>.white>div>div.pn>div.sub,.keyboard>.white>div>div.pn>div.sup{display:inline-block;margin:0 2px}.keyboard>.white>div>div.pn>div.sub{transform:scale(.9) translateY(5px)}.keyboard>.white>div>div.pn>div.sup{transform:scale(.9) translateY(-5px)}.keyboard.hidenum>div>div>span{display:none}.keyboard.hidepname>div.white>div>div{display:none}.keyboard>.center-c{position:absolute;bottom:35px;left:925px;font-size:12px;color:#a43983;z-index:5;pointer-events:none}.visit-ct>.logo-ct{position:relative;margin:12px 0 0}.visit-ct>.logo-ct>.pn-logo{position:absolute;top:0;left:18px;width:40px;max-width:30%;overflow:hidden;border-radius:110px;border:2px solid #fff;box-shadow:0 0 10px rgba(0,0,0,.2);margin:0 auto}.visit-ct>.logo-ct>.pn-logo:before{padding-top:100%;content:"";display:block}.visit-ct>.logo-ct>.pn-logo>img{position:absolute;top:0;max-height:100%}.visit-ct>.logo-ct>.pn-info{margin:0 0 0 78px}.visit-ct>.logo-ct>.pn-info>h1{padding:4px 0 0;margin:0;font-size:16px;font-weight:700}.visit-ct>.logo-ct>.pn-info>p{margin:0;word-break:break-all}.visit-ct>.tips-wrapper{padding:50px 0 30px;margin:0 20px;font-size:17px;min-height:2em}.visit-ct>.tips-wrapper>div{text-align:center;transition:opacity .3s}.visit-ct>.tips-wrapper>div.hidden{opacity:0}.visit-ct>.tips-wrapper>div b{margin:0 6px;font-size:17px;color:#444}.xw-input{margin:0 2px;border:1px solid rgba(0,0,0,.3333333333);border-radius:3px;padding:4px 8px}.pc-keyboard-save{padding:0}.pc-keyboard-save>.t-save-tips{margin:1em 0}.pc-keyboard-save>.title{margin:0 0 1em}.pc-keyboard-save .save-list{position:relative;padding:0 0 1em}.pc-keyboard-save .save-list .save-list-item{display:inline-block;margin:3px;transition:all .6s}.pc-keyboard-save .save-list .save-list-item>div.cont{position:relative;padding:10px 12px;width:280px;border-radius:3px;box-shadow:0 0 6px rgba(0,0,0,.267);background-color:#fff}.pc-keyboard-save .save-list .save-list-item>div.cont>.name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 50px 5px 0}.pc-keyboard-save .save-list .save-list-item>div.cont>.time{font-size:12px}.pc-keyboard-save .save-list .save-list-item>div.cont>.btns{position:absolute;bottom:5px;right:3px;text-align:center}.pc-keyboard-save .save-list .save-list-item>div.cont>.btns>.xw-button{font-size:12px}.pc-keyboard-save .save-list-enter-from{opacity:0;transform:translateY(-100px) scale(.5)}.pc-keyboard-save .save-list-leave-to{opacity:0;transform:scale(.2) translateY(-100px) rotate(30deg)}.pc-keyboard-save .save-list-leave-active{position:absolute}.faq-item{background:#fff;padding:16px 0 8px;border-radius:5px;box-shadow:0 0 5px rgba(0,0,0,.267);margin:0 0 1em}.faq-item>header{position:relative;font-size:16px;padding:0 10px 0 20px;color:#000}.faq-item>header:before{position:absolute;top:8px;left:0;content:"";display:inline-block;width:14px;height:9px;background:#2479c1}.faq-item>p{margin:5px 10px 5px 20px}.pc-kbd-ct{padding:30px 5px 15px;user-select:none;width:1272px;margin:0 auto}.pc-kbd-ct>.pc-kbd-row{display:block;white-space:nowrap;height:52px;margin:0 0 5px}.pc-kbd-ct>.pc-kbd-row>div{display:inline-block;width:50px;height:50px;margin:0 5px 0 0;background:#fff;border:1px solid rgba(0,0,0,.3019607843);border-radius:4px;line-height:1;vertical-align:top}.pc-kbd-ct>.pc-kbd-row>div.disable{background:#7d97ad;border:1px solid rgba(0,0,0,.2)}.pc-kbd-ct>.pc-kbd-row>div.d{background-color:rgba(199,39,76,.5)}.pc-kbd-ct>.pc-kbd-row>div.selec{animation:shanshan 1s infinite}.pc-kbd-ct>.pc-kbd-row>div>.key-name{padding:5px 8px 0;pointer-events:none}.pc-kbd-ct>.pc-kbd-row>div>.key-rep{font-size:12px;padding:6px 0 0;color:rgba(16,10,255,.8);font-weight:700;text-align:center;pointer-events:none}.pc-kbd-set{width:1272px;margin:0 auto;padding:0 0 50px}.pc-kbd-set>.row-title{margin:0 10px .5em;font-size:16px;font-weight:700}.pc-kbd-set>.row{margin:0 10px}.pc-kbd-set>.row.faq-item{margin:0 10px 1em}.pc-kbd-set .xw-button{font-size:14px;margin:0 .25em}.pc-kbd-set .select-key{display:inline-block;width:50px;height:50px;margin:0 5px 0 0;background:rgba(0,0,0,.7333333333);border:1px solid rgba(0,0,0,.3019607843);border-radius:4px;line-height:1;vertical-align:top}.pc-kbd-set .select-key>.key-name{padding:5px 8px 0;pointer-events:none;font-weight:700;color:#fff}.pc-kbd-set .edit-container{margin:5px 0 0;border:1px solid rgba(0,0,0,.2);padding:3px 16px 20px;background:#fff}.pc-kbd-set .edit-container>.btn-group{margin:10px 0 0}@keyframes shanshan{0%{border:1px solid rgba(16,10,255,.8);color:rgba(16,10,255,.8);background-color:rgba(16,10,255,.2)}49%{border:1px solid rgba(16,10,255,.8);color:rgba(16,10,255,.8);background-color:rgba(16,10,255,.2)}50%{border:1px solid rgba(0,0,0,.3019607843);color:#000}to{border:1px solid rgba(0,0,0,.3019607843);color:#000}}.panel-midifile{margin:0 1em;font-size:14px}.panel-midifile>.player-wp{max-width:500px;padding:2em 0;margin:0 auto}.panel-midifile>.player-wp>.file-upload{position:relative;min-height:120px;border:1.5px dashed rgba(0,0,0,.1333333333);border-radius:8px;background:#f7f8fa;cursor:pointer;user-select:none;transition:border-color .2s,background .2s}.panel-midifile>.player-wp>.file-upload:hover{border-color:#267cc6;background:#f2f6ff}.panel-midifile>.player-wp>.file-upload:active{background:#ebf1fe}.panel-midifile>.player-wp>.file-upload>.tips-text{position:absolute;z-index:1;font-size:14px;top:50%;left:0;width:100%;text-align:center;color:rgba(0,0,0,.533);font-weight:700;text-shadow:0 0 2px rgba(255,255,255,.5333333333);transform:translateY(-50%)}.panel-midifile>.player-wp>.file-upload>.tips-text>.tips{margin-top:.4em;font-size:12px;font-weight:400;color:rgba(0,0,0,.4)}.panel-midifile>.player-wp>.player-card{margin-top:1.2em;padding:1.2em 1.4em;background:#fff;border:1px solid rgba(0,0,0,.0666666667);border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.05)}.panel-midifile>.player-wp>.player-card>.transport-row{display:flex;align-items:center;justify-content:space-between}.panel-midifile>.player-wp>.player-card>.progress-row{display:flex;align-items:center;gap:10px;padding:1em 0}.panel-midifile>.player-wp>.player-card>.progress-row>.time-text{flex:none;min-width:2.6em;font-size:12px;color:rgba(0,0,0,.467);font-variant-numeric:tabular-nums}.panel-midifile>.player-wp>.player-card>.progress-row>.time-text:last-child{text-align:right}.panel-midifile>.player-wp>.player-card>.progress-row>.progress-track{position:relative;flex:1;height:4px;border-radius:2px;background:rgba(0,0,0,.0666666667);cursor:pointer;touch-action:none}.panel-midifile>.player-wp>.player-card>.progress-row>.progress-track:before{content:"";position:absolute;top:-6px;bottom:-6px;left:0;right:0}.panel-midifile>.player-wp>.player-card>.progress-row>.progress-track>.progress-fill{position:relative;height:100%;border-radius:2px;background:#267cc6;opacity:.85}.panel-midifile>.player-wp>.player-card>.progress-row>.progress-track>.progress-fill:after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;border-radius:50%;background:#267cc6;box-shadow:0 1px 3px rgba(0,0,0,.267);transform:translateY(-50%)}.panel-midifile>.player-wp>.player-card>.progress-row.playing>.progress-track>.progress-fill{animation:midifile-progress-pulse 1.6s ease-in-out infinite}.panel-midifile>.player-wp>.player-card>.progress-row.empty>.progress-track{cursor:default}.panel-midifile>.player-wp>.player-card>.progress-row.empty>.progress-track>.progress-fill:after{display:none}.panel-midifile>.player-wp>.player-card>.option-row{display:flex;align-items:center;gap:1em;padding:.2em 0 1em}.panel-midifile>.player-wp>.player-card>.option-row>.option-tip{font-size:12px;color:rgba(0,0,0,.4)}.panel-midifile>.player-wp>.player-card>.meta-info{padding-top:1em;border-top:1px solid rgba(0,0,0,.0666666667)}.panel-midifile>.player-wp>.player-card>.meta-info>.meta-row{display:flex;gap:1em;padding:2px 0}.panel-midifile>.player-wp>.player-card>.meta-info>.meta-row>.name{flex:none;width:5em;font-size:12px;color:rgba(0,0,0,.4)}.panel-midifile>.player-wp>.player-card>.meta-info>.meta-row>.value{font-size:13px;color:rgba(0,0,0,.8);word-break:break-all}.panel-midifile .switch-toggle{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:rgba(0,0,0,.533);cursor:pointer;user-select:none;white-space:nowrap}.panel-midifile .switch-toggle.on{color:#267cc6}@keyframes midifile-progress-pulse{0%,to{opacity:.85}50%{opacity:.5}}.record{position:relative;z-index:1;font-size:14px;min-height:100%}.record>.record-loading{font-size:18px}.record>.record-loading .recording-tips{margin:1em 0}.record>.record-loading .record-time{margin:.5em 0;font-size:40px;line-height:2;user-select:none}.record>.metronome-bar{margin:0 auto;padding:1em 1em 0;width:100%;max-width:1000px;display:flex;align-items:center;flex-wrap:wrap;gap:.6em}.record>.metronome-bar>.metro-title{font-weight:700}.record>.metronome-bar .bpm-label{font-size:16px}.record>.metronome-bar .step-btn{width:28px;height:28px;border:1px solid #ddd;border-radius:4px;background:#fff;cursor:pointer;font-size:16px;line-height:1}.record>.metronome-bar .step-btn:disabled{opacity:.4;cursor:not-allowed}.record>.metronome-bar .bpm-input{width:64px;height:28px;border:1px solid #ddd;border-radius:4px;text-align:center;font-size:15px}.record>.metronome-bar .ts-select{height:28px;border:1px solid #ddd;border-radius:4px;background:#fff;font-size:14px}.record>.metronome-bar>.metro-bpm{display:inline-flex;align-items:center;gap:4px}.record>.metronome-bar>.count-in{display:inline-flex;align-items:center;gap:4px;cursor:pointer}.record>.metronome-bar>.metro-tips{width:100%;color:#999;font-size:13px}.record>.record-card{margin:0 auto;padding:1em 0;width:100%;max-width:1000px;min-height:200px}.record>.record-card>.bottons{margin:0 1em;text-align:center}.record>.record-card>.bottons>button{font-size:16px;transition:opacity .3s}.record>.record-card>.record-tips{font-size:16px;text-align:center;margin:1em 0}.record>.record-card>.record-list{margin:2em 1em 0}.record>.record-card>.record-list>.tips{margin:.5em}.record>.record-card>.record-list>.record-item{font-size:16px;margin:.4em 0;line-height:2;background:#fff;padding:.5em 1em}.record>.record-card>.record-list>.record-item>.index{font-weight:700}.setting-panel{position:relative}.setting-panel>.slide-menu{position:relative;top:4px;z-index:10;margin:0;padding:0 15px;line-height:32px;overflow-y:hidden;font-size:13px;white-space:nowrap;text-align:center;background:#fff;box-shadow:0 0 5px rgba(0,0,0,.2)}.setting-panel>.slide-menu>a{display:inline-block;padding:0 12px;cursor:pointer;margin:0 1px;background-color:rgba(255,255,255,.333);transition:background-color .3s;text-decoration:none;color:rgba(0,0,0,.667);font-size:14px}.setting-panel>.slide-menu>a:last-child{border-right:none}.setting-panel>.slide-menu>a>.midi-title{margin:0 6px 0 0}.setting-panel>.slide-menu>a>.btn{padding:3px 5px;background:rgba(0,0,0,.1333333333);border-radius:2px;margin:0 2px}.setting-panel>.slide-menu>a>.btn:hover{background:rgba(0,0,0,.0666666667)}.setting-panel>.slide-menu>a.active{position:relative;background-color:rgba(1,102,189,.133);color:#0166bd;font-weight:700;border:1px solid rgba(1,102,189,.2);border-width:0 1px}.setting-panel>.slide-menu>a:focus,.setting-panel>.slide-menu>a:hover{outline:none;background-color:rgba(1,102,189,.133)}.setting-panel>.slide-menu>a>.iconfont{padding:0 3px 0 0}.setting-panel>.st-cont{position:absolute;top:36px;left:0;bottom:0;width:100%;overflow-y:auto}@media (max-width: 768px){.setting-panel>.slide-menu{text-align:left}}.piano{position:absolute;overflow:hidden;top:50px;left:0;right:0;background-image:url(//o.xiwnn.com/cdn-2607/a/0/pianobg-i9BKY3W0.jpg)}.piano>.loading{position:absolute;z-index:20;top:50%;left:50%;width:200px;background:#fff;padding:0 0 10px;box-shadow:0 0 5px rgba(0,0,0,.2);border-radius:5px;overflow:hidden;transform:translate(-50%,-50%)}.piano>.loading>.loading-status{position:relative;height:7em;font-size:13px}.piano>.loading>.loading-status .loading-icon{padding:3em 0 0}.piano>.loading>.text{padding:20px 0;font-size:15px;text-align:center}.piano>.loading>.loading-bar{display:block;height:2px;max-width:100%;background:rgba(1,102,189,.8509803922)}html,body,#app,#main{position:relative;width:100%;height:100%}.xw-footer{display:none}