@charset "UTF-8";.layout-main-wrap{height:100vh}.layout-main-wrap .layout-header-wrap{height:40px;padding:0 50px;background-color:#001529;display:flex;justify-content:space-between;align-items:center}.layout-main-wrap .layout-header-wrap .name-text{color:#fff}.layout-main-wrap .layout-header-wrap .donate-img{width:20px;color:#fff;cursor:pointer}.layout-main-wrap .layout-content-wrap{overflow-y:auto}.main-layout-wrap{height:100%;overflow:hidden}.main-layout-wrap .layout-content{overflow:hidden;background-color:#fff}.main-layout-wrap .left{margin:20px;border-radius:20px}.main-layout-wrap .left .go-back{margin:20px 0 20px 30px;display:flex;align-items:center;color:#1677ff;cursor:pointer}.main-layout-wrap .left .go-back .go-back-icon{width:20px;height:20px;margin-right:10px}.main-layout-wrap .right{padding:20px;overflow-y:auto}.home-page{height:100%;display:flex;flex-direction:column;background-color:#fff}.home-page .home-content{flex:1;overflow-y:auto;background-repeat:no-repeat;background-size:600px;background-position:bottom -40px right 40px;background-color:#f5f5f5}.home-page .home-content .home-bg{width:600px;position:fixed;bottom:20px;right:40px}.home-page .feature-wrap{display:flex;padding:20px 0;background-color:#fff}.home-page .feature-wrap .feature-item{transition:flex .5s;flex:2;display:flex;flex-direction:column;justify-content:center;align-items:center;border-left:1px solid gray}.home-page .feature-wrap .feature-item .title{margin-bottom:10px;font-size:16px;font-weight:700}.home-page .feature-wrap .feature-item .desc{max-width:200px}.home-page .feature-wrap .feature-item:first-child{flex:6;border-left:none;color:#37455d;font-weight:700}.home-page .feature-wrap .feature-item:first-child .title{font-size:26px}.home-page .feature-wrap .feature-item:hover{flex:3}.home-page .feature-wrap .feature-item:first-child:hover{flex:6}.home-page .tool-content-wrap{display:flex;flex-direction:column;align-items:center}.home-page .title-wrap{margin-top:26px;display:flex;align-items:center}.home-page .title-wrap .title-icon{width:30px;height:30px}.home-page .title-wrap .title-text{margin-left:12px;font-size:16px;font-weight:700}.home-page .tool-wrap{display:flex;flex-wrap:wrap}.home-page .tool-wrap .tool-item{margin-top:16px;margin-right:20px;width:220px;height:150px;padding:20px;border:1px solid #e5e7eb;border-radius:14px;background-color:#fff;box-shadow:0 0 20px #e8e8e8;cursor:pointer}.home-page .tool-wrap .tool-item .tool-title-wrap{display:flex;align-items:center;margin-bottom:12px}.home-page .tool-wrap .tool-item .tool-title-wrap .tool-icon{width:20px;height:20px}.home-page .tool-wrap .tool-item .tool-title-wrap .tool-text{margin-left:6px;font-size:16px;font-weight:700}.home-page .tool-wrap .tool-item .tool-desc{color:#999}.home-page .tool-wrap .tool-item:hover{background-color:#f6f6f7}.home-page .footer{height:40px;line-height:40px;text-align:center;padding:0}.home-page .footer .filing-text{cursor:pointer;-webkit-user-select:none;user-select:none}.home-page .text-delete{text-decoration:line-through 2px}.donate-page{height:100%;background-color:#fff;display:flex;justify-content:space-evenly}.donate-page .left{margin-top:100px;display:flex;flex-direction:column;align-items:center}.donate-page .middle-border{margin-top:100px;height:50%;border-left:2px solid #f3f5f6}.donate-page .right{margin-top:100px}.donate-page .text{font-size:20px}.donate-page .segmented-wrap{margin:60px 0 20px}.donate-page .segmented-wrap .segmented-item{display:flex;justify-content:center;align-items:center;width:90px}.donate-page .segmented-wrap .segmented-item .segmented-icon{width:24px;height:24px;margin-right:6px}.donate-page .qr-code{width:200px}.donate-page .table{margin-top:10px;width:600px}.bpm-click-page{display:flex;flex-direction:column;align-items:center;padding-top:100px}.bpm-click-page .bpm-click-wrap{width:80%;display:flex;justify-content:space-evenly}.bpm-click-page .bpm-click-wrap .bpm-item{padding:10px 40px 30px;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#fff;border-radius:20px;cursor:default}.bpm-click-page .bpm-click-wrap .bpm-item .num{width:160px;text-align:center;font-size:72px;font-weight:800;color:#333}.bpm-click-page .bpm-click-wrap .bpm-item .suffix{font-size:18px;color:#666}.bpm-click-page .btn{margin-top:100px;width:260px;height:60px;line-height:60px;text-align:center;border-radius:60px;font-size:18px;background:linear-gradient(#fff,#fafafa);-webkit-user-select:none;user-select:none;cursor:pointer}.bpm-click-page .btn-active,.bpm-click-page .btn:active{background:linear-gradient(#ececec,#e0e0e0)}.page-bass-wrap{height:100%;width:100%;display:flex;justify-content:space-between}.page-bass-wrap .font-weight-bold{font-weight:700}.page-bass-wrap .page-left{padding-top:150px}.page-bass-wrap .page-left .tone-item{width:60px;display:flex;flex-direction:column;justify-content:center;align-items:center}.page-bass-wrap .page-right{padding-left:100px;display:flex;justify-content:space-around;overflow-y:scroll}.page-bass-wrap .pin-step-wrap{position:relative}.page-bass-wrap .pin-step-mark{position:absolute;transform:translateY(-50%);top:50%;left:20px}.page-bass-wrap .step-box-wrap{position:relative}.page-bass-wrap .step-box-wrap .step-box-text{position:absolute;top:50%;transform:translate(-110%,-50%)}.page-bass-wrap .flex-column-middle{display:flex;flex-direction:column;justify-content:center;align-items:center}.chord-page .piano-wrap{--key-shadow-press: inset 0px -5px 20px 0px #99999940;--black-key-height: 90px;--white-key-height: 150px;height:var(--white-key-height);position:relative;box-shadow:0 10px 20px #99999940}.chord-page .piano-wrap .black-key{height:var(--black-key-height);position:absolute;display:flex;justify-content:center;align-items:flex-end;background-color:#000;color:#fff;-webkit-user-select:none;user-select:none;z-index:10}.chord-page .piano-wrap .white-key{box-sizing:content-box;height:var(--white-key-height);position:absolute;display:flex;justify-content:center;align-items:flex-end;background-color:#fff;color:#000;border:1px solid black;-webkit-user-select:none;user-select:none;z-index:1}.chord-page .piano-wrap .black-chord_active{box-shadow:0 10px #48a0de,var(--key-shadow-press);z-index:8}.chord-page .piano-wrap .white-chord_active{box-shadow:0 10px #48a0de,var(--key-shadow-press);z-index:3}.chord-page .piano-wrap .black-first-chord_active{box-shadow:0 10px #50e1ac,var(--key-shadow-press);z-index:9}.chord-page .piano-wrap .white-first-chord_active{box-shadow:0 10px #50e1ac,var(--key-shadow-press);z-index:4}.chord-page .piano-wrap .key-text{--key-text-height: 24px;padding:6px;margin-bottom:8px;width:var(--key-text-height);height:var(--key-text-height);display:flex;justify-content:center;align-items:center;border-radius:50%}.chord-page .piano-wrap .key-text_active{background-color:#d6c9db;color:#000}.chord-page .piano-wrap .first-key-text{background-color:#bfc;color:#000}.page-chord-refer{height:100%}.page-chord-refer .left-wrap .chord-list-wrap{margin-top:12px;margin-bottom:12px;display:flex;flex-wrap:wrap}.page-chord-refer .left-wrap .chord-list-wrap .chord-item{height:60px;line-height:60px;width:60px;text-align:center;border-radius:10px;position:relative;margin-right:15px;margin-top:15px;box-shadow:0 0 15px -5px gray;background-color:#fff}.page-chord-refer .left-wrap .chord-list-wrap .chord-item .delete-chord{width:20px;height:20px;position:absolute;top:0;right:0;transform:translate(50%,-50%);cursor:pointer}.page-chord-refer .left-wrap .chord-list-wrap .chord-item__select{background-color:#dbdbdb}.page-chord-refer .string-wrap{height:100%;overflow-y:auto;display:flex}.page-chord-refer .string-wrap .note-item{width:60px;height:110px;position:relative}.page-chord-refer .string-wrap .note-item .note-text{position:absolute;bottom:5%;right:5%}.page-chord-refer .string-wrap .note-item .chord-form{right:0%;transform:translate(50%);border-radius:5px;background-color:#7eb5cd;color:#fff;text-align:center}.page-chord-refer .string-wrap .note-item .chord-form .chord-text{padding:2px 10px;font-size:20px;font-weight:700}.page-chord-refer .string-wrap .note-item .chord-root-bg{background-color:#c09769}.page-chord-refer .string-wrap .note-item .pin-step-mark{position:absolute;bottom:10%;padding:0 12px;border-radius:5px;background-color:#b0b0b0;color:#fff}.page-chord-refer .string-wrap .note-border-bottom{border-bottom:2px solid black}.page-chord-refer .string-wrap .note-border-right{border-right:2px solid black}.component-piano-wrap{flex-shrink:0;position:relative;overflow:hidden}.component-piano-wrap .black-key-wrap{position:absolute;left:0;top:0;display:flex}.component-piano-wrap .black-key-wrap .black-key-item{box-sizing:border-box;padding-bottom:16px;display:flex;justify-content:center;align-items:flex-end;cursor:pointer;-webkit-user-select:none;user-select:none;width:50px;height:290px;color:#fff;background:linear-gradient(100deg,#4a4a4a,#000);border-bottom:14px solid #333;border-left:6px solid #444;border-right:6px solid #111;box-shadow:0 0 0 3px #000,inset 0 0 3px #7e7e7e,4px 1px 10px 2px #0006;border-bottom-left-radius:1px;border-bottom-right-radius:1px;position:absolute}.component-piano-wrap .black-key-wrap .black-key-item:nth-child(1){left:42px}.component-piano-wrap .black-key-wrap .black-key-item:nth-child(2){left:133px}.component-piano-wrap .black-key-wrap .black-key-item:nth-child(3){left:267px}.component-piano-wrap .black-key-wrap .black-key-item:nth-child(4){left:350px}.component-piano-wrap .black-key-wrap .black-key-item:nth-child(5){left:433px}.component-piano-wrap .black-key-wrap .black-key-item:active{background:linear-gradient(100deg,#222,#4a4a4a);border-bottom:10px solid #333}.component-piano-wrap .black-key-wrap .black-key-text{width:30px;height:30px;display:flex;justify-content:center;align-items:center}.component-piano-wrap .black-key-wrap .black-key-text__select{border:1px solid #fff;border-radius:50%}.component-piano-wrap .white-key-wrap{display:flex}.component-piano-wrap .white-key-wrap .white-key-item{flex-shrink:0;padding-bottom:16px;display:flex;justify-content:center;align-items:flex-end;cursor:pointer;-webkit-user-select:none;user-select:none;width:75px;height:430px;background-color:#fff;border-radius:0 0 5px 5px;color:#000;border:1px solid #212121;border-right:2px solid #212121}.component-piano-wrap .white-key-wrap .white-key-item:last-child{border-right:2px solid #212121}.component-piano-wrap .white-key-wrap .white-key-item:active{padding-bottom:12px;box-shadow:inset 2px 2px 20px #ccc}.component-piano-wrap .white-key-wrap .white-key-text{width:30px;height:30px;display:flex;justify-content:center;align-items:center}.component-piano-wrap .white-key-wrap .white-key-text__select{border:1px solid #000;border-radius:50%}.music-train-page .text-strong{font-size:16px;font-weight:700;color:#000}.music-train-page .text-weak{font-size:12px;color:gray}.music-train-page .text-scucess{margin-left:20px;font-size:30px;font-weight:700;color:green}.music-train-page .tips{margin-top:6px;color:gray}.music-train-page .topic-wrap{margin-top:20px;display:flex;align-items:center}.music-train-page .topic-item{margin-left:20px;width:60px;height:60px;line-height:60px;text-align:center;background-color:#aa98a1}.music-train-page .btn-play{margin-left:20px;margin-right:20px}.page-triplet .beat-wrap{width:50vw;display:flex}.page-triplet .triplet-wrap{width:50vw;display:flex;height:16px}.page-triplet .triplet-wrap .triplet-item{flex:1;position:relative}.page-triplet .triplet-wrap .triplet-item:before{content:"";position:absolute;left:0;transform:translate(-50%);height:16px;width:16px;border-radius:50%;background-color:green}.page-triplet .buoy-wrap{width:50vw;height:10px;position:relative}.page-triplet .buoy-wrap .buoy-item{position:absolute;left:0;transform:translate(-50%);height:0px;width:0px;border-bottom:16px solid red;border-left:10px solid transparent;border-right:10px solid transparent}.page-triplet .component-beat-wrap{flex:1;display:flex;align-items:center;position:relative;height:30px}.page-triplet .component-beat-wrap .dot{position:absolute;left:0;transform:translate(-50%);width:18px;height:18px;background-color:#bfc;border-radius:50%}.page-triplet .component-beat-wrap .dot__downbeat{width:30px;height:30px;background-color:#404040}.page-triplet .component-beat-wrap .dot__subDownbeat{width:24px;height:24px;background-color:#909090}.page-triplet .component-beat-wrap .dot__dashed{opacity:.2;background:linear-gradient(#404040,#404040 20%,#909090 20%,#909090 40%,#404040 40%,#404040 60%,#909090 60%,#909090 80%,#404040 80%,#404040)}.page-triplet .component-beat-wrap .line{flex:1;border-top:3px dotted #909090}.page-triplet .component-beat-wrap .line__dashed{opacity:.5}.calendar-page .btn-add,.calendar-page .year-calendar-wrap .year-wrap{margin-bottom:10px}.calendar-page .year-calendar-wrap .year-wrap .year-name{font-size:18px;font-weight:700}.calendar-page .year-calendar-wrap .month-wrap{display:flex}.calendar-page .year-calendar-wrap .month-wrap .month-item{margin-right:10px}.calendar-page .year-calendar-wrap .day-wrap{width:77px;display:flex;flex-wrap:wrap}.calendar-page .year-calendar-wrap .day-wrap .day-item{margin-top:2px;margin-left:2px;width:9px;height:9px;border-radius:2px;background-color:#d8d8d8}.calendar-page .year-calendar-wrap .day-wrap .day-item__blank{opacity:0}.calendar-page .year-calendar-wrap .day-wrap .day-item__afterToday{opacity:.6}.page-wx-applet{padding:20px;height:100%;display:flex;justify-content:space-around;align-items:center}.page-wx-applet .main-text{font-size:24px;font-weight:700}.page-wx-applet .sub-text{font-size:16px;color:gray}.page-wx-applet .qr-code{margin-top:16px;width:200px}.page-wx-applet .img-intro{width:75%}.page-wx-applet-marker{padding:20px;height:100%;display:flex;justify-content:space-around;align-items:center}.page-wx-applet-marker .main-text{font-size:24px;font-weight:700}.page-wx-applet-marker .sub-text{font-size:16px;color:gray}.page-wx-applet-marker .qr-code{margin-top:16px;width:200px}.page-wx-applet-marker .img-intro{max-height:600px}.game-2048-wrap{height:100%;display:flex;justify-content:center;align-items:center}.game-2048-wrap .board-wrap{padding:30px 16px 16px;display:flex;flex-direction:column;align-items:center;background-color:#777;border-radius:30px;box-shadow:5px 5px 5px #4d4d4d4d}.game-2048-wrap .board-wrap .btn{height:50px;width:150px;line-height:50px;text-align:center;color:#2c2c2c;font-weight:700;background-color:#e43b25;border-radius:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.game-2048-wrap .board-wrap .btn:hover{color:orange;background-color:sienna}.game-2048-wrap .board-wrap .content{margin-top:30px;padding:0 16px 16px 0;border-radius:20px;background-color:#bbada0}.game-2048-wrap .board-wrap .content .row-wrap{display:flex}.game-2048-wrap .board-wrap .content .row-wrap .cell-item{margin-left:16px;margin-top:16px;height:100px;width:100px;line-height:100px;text-align:center;background-color:#ccc0b2;color:#075353;border-radius:20px;font-size:40px;font-weight:700;-webkit-user-select:none;user-select:none;cursor:default}.left-spacing{margin-left:12px}.top-spacing{margin-top:12px}.page-404{display:flex;flex-direction:column;align-items:center}.page-404 .img{margin-top:30px;width:600px}.page-404 .text{margin-top:30px}.page-404 .text .link{text-decoration:underline;color:#1677ff;cursor:pointer}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}