body,html{margin:0;padding:0;background-color:#222;color:#eee;font-family:Microsoft Yahei}body,body *{box-sizing:border-box;user-select:none;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif}#pianoMain{position:fixed;top:0;left:0}#pianoMain .keyboard-w{user-select:none;position:absolute;width:100%;height:55%;bottom:0;max-width:1000px;max-height:350px;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%)}#pianoMain .keyboard-w .keyboard-line{height:33.333333%;text-align:center}#pianoMain .keyboard-w .keyboard-line .key-item{display:inline-block;width:10%;height:100%;padding:5px;position:relative}#pianoMain .keyboard-w .keyboard-line .key-item .key-word{cursor:pointer;border-radius:5px;width:100%;height:100%;text-align:center;line-height:100%;display:flex;align-items:center;justify-content:center;border:1px solid #aaa;font-weight:700;font-size:30px;transition:all .3s ease}#pianoMain .keyboard-w .keyboard-line .key-item .key-word:hover{border:1px solid #fff;color:#fff}#pianoMain .keyboard-w .keyboard-line .key-item .key-word.active{border:1px solid #6f6;color:#6f6}#pianoMain .keyboard-w .keyboard-line .key-item .key-word.error{border:1px solid #f66;color:#f66;animation:shake .1s 3;-webkit-animation:shake .1s 3}#pianoMain .keyboard-w .keyboard-line .key-item .key-audio-name{position:absolute;right:7px;bottom:5px;font-size:13px;color:#aaa}#pianoMain .lyric-w{position:absolute;width:100%;height:45%;top:0;left:0;text-align:center}#pianoMain .lyric-w .song-info{font-weight:700;position:absolute;font-size:20px;width:100%;padding:6px;z-index:10;background-color:rgba(34,34,34,.8)}#pianoMain .lyric-w .song-info-mode{position:fixed;bottom:10px;left:10px;color:#888}#pianoMain .lyric-w .mode-free-tip{height:100%;display:flex;align-items:center;justify-content:center;font-size:25px;color:#aaa}#pianoMain .lyric-w .mode-free-tip .sample-title{font-size:14px;color:#eee}#pianoMain .lyric-w .mode-free-tip .sample-key{font-size:12px;color:#eee;letter-spacing:5px;position:relative;left:4px}#pianoMain .lyric-w .lyric-w-inner{height:90%;overflow:hidden;position:absolute;width:100%}#pianoMain .lyric-w .lyric-w-inner .lyric-line{font-size:18px;padding:5px 0;opacity:.6;height:55.6px}#pianoMain .lyric-w .lyric-w-inner .lyric-line .lyric-item{display:inline-block;margin:0 4px;color:#888;transition:color .5s ease}#pianoMain .lyric-w .lyric-w-inner .lyric-line .lyric-item .lyric-letter{font-size:16px}#pianoMain .lyric-w .lyric-w-inner .lyric-line .lyric-item.actived{color:#fff}#pianoMain .lyric-w .lyric-w-inner .lyric-line .lyric-item.active{color:#6f6}#pianoMain .lyric-w .lyric-w-inner .lyric-line.active{opacity:1;font-size:20px;font-weight:700}#pianoMain .lyric-w .lyric-w-inner .lyric-line.active .lyric-letter{font-size:18px}#pianoMain .menu-w .toast-w{position:fixed;color:#eee;z-index:100;background-color:rgba(0,0,0,.8);padding:10px 15px;border-radius:5px;top:10px;left:50%;transform:translateX(-50%)}#pianoMain .menu-w .menu-config-w{position:fixed;right:20px;top:5px;font-size:25px;z-index:20}#pianoMain .menu-w .menu-config-w .menu-btn{display:block;padding:5px}#pianoMain .menu-w .menu-config-w .menu-config-tip{position:absolute;white-space:nowrap;right:30px;font-size:15px;margin-top:8px;animation:tipmove 1s 10;-webkit-animation:tipmove 1s 10}#pianoMain .menu-w .menu-select{z-index:30;position:fixed;width:100%;height:100%;top:0;left:0;background-color:rgba(0,0,0,.8);padding:30px 50px;overflow:auto}#pianoMain .menu-w .menu-select .menu-ss-item{font-size:20px;padding:15px 0;border-bottom:1px solid #666;position:relative}#pianoMain .menu-w .menu-select .menu-ss-item:last-child{border:none}#pianoMain .menu-w .menu-select .menu-ss-item .menu-desc{font-size:15px;color:#bbb}#pianoMain .menu-w .menu-select .menu-ss-item.choosed{color:#6f6}#pianoMain .menu-w .menu-select .menu-ss-item.choosed .menu-desc{color:#4eb34e}#pianoMain .menu-w .menu-select .menu-ss-item .ei-checked{position:absolute;right:0;font-size:27px}#pianoMain .menu-w .menu-select .menu-ss-item .ei-checked.mode-select{top:28px}#pianoMain .menu-w .menu-select .ei-times{font-size:25px;right:15px;position:fixed;top:15px}@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}to{transform:translateX(0)}}@-webkit-keyframes shake{0%{-webkit-transform:translateX(0)}25%{-webkit-transform:translateX(-5px)}75%{-webkit-transform:translateX(5px)}to{-webkit-transform:translateX(0)}}@keyframes tipmove{0%{transform:translateX(0)}50%{transform:translateX(-5px)}to{transform:translateX(0)}}@-webkit-keyframes tipmove{0%{-webkit-transform:translateX(0)}50%{-webkit-transform:translateX(-5px)}to{-webkit-transform:translateX(0)}}