.component-setting-visual{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:linear-gradient(180deg,hsla(0,0%,100%,.76),rgba(224,243,252,.58));border:1px solid rgba(18,149,219,.18);border-bottom:0;border-radius:16px 16px 0 0;box-shadow:inset 0 -1px rgba(18,149,219,.08),0 -12px 32px rgba(18,149,219,.08);overflow:hidden;padding:0 16px;position:relative;width:100%}.component-setting-visual.is-collapsed{align-items:center;border-bottom:0;display:flex;height:40px;justify-content:flex-end;overflow:hidden;padding:0 10px}.component-setting-visual .visual-section{margin:0;width:100%}.component-setting-visual .visualizer-canvas{display:block;height:auto;margin:0 auto;max-height:120px;width:100%}.component-setting-visual .visualizer-toggle{align-items:center;background:hsla(0,0%,100%,.62);border:1px solid rgba(18,149,219,.2);border-radius:10px;color:rgba(11,91,134,.76);cursor:pointer;display:grid;height:30px;justify-items:center;padding:0;place-items:center;position:absolute;right:10px;top:8px;transition:border-color .2s ease,background .2s ease,color .2s ease;width:30px;z-index:4}.component-setting-visual .visualizer-toggle:hover{background:rgba(18,149,219,.16);border-color:rgba(117,195,237,.55);color:#1295db}.component-setting-visual .visualizer-toggle .v-icon{color:inherit;font-size:18px}.component-setting-visual .visualizer-toggle--reopen{background:hsla(0,0%,100%,.68);border-color:rgba(18,149,219,.22);color:#1295db;position:static}.v-application.theme--dark .component-setting-visual{background:linear-gradient(180deg,rgba(8,18,29,.88),rgba(12,27,40,.72));border-color:rgba(117,195,237,.22);box-shadow:inset 0 -1px hsla(0,0%,100%,.06),0 -12px 32px rgba(18,149,219,.08)}.v-application.theme--dark .component-setting-visual .visualizer-toggle{background:rgba(5,14,23,.58);border-color:hsla(0,0%,100%,.14);color:hsla(0,0%,100%,.78)}.v-application.theme--dark .component-setting-visual .visualizer-toggle:hover{background:rgba(18,149,219,.32);border-color:rgba(117,195,237,.55);color:#fff}.v-application.theme--dark .component-setting-visual .visualizer-toggle--reopen{background:rgba(10,27,40,.82);border-color:rgba(117,195,237,.28);color:#75c3ed}@media (max-width:760px){.component-setting-visual{border-radius:12px 12px 0 0;padding:0 8px}.component-setting-visual.is-collapsed{padding:0 8px}}.component-autopiano{width:100%;z-index:100}.component-autopiano .piano-scroll-wrap{overflow:hidden;width:100%}.component-autopiano .piano-wrap.piano{border-radius:5px;margin:0 auto;overflow:visible;position:relative;width:90%}.component-autopiano .piano-wrap.piano .piano-visualizer{margin:0}.component-autopiano .piano-wrap.piano .piano-panel{background:#000;border-color:#555 #222 #111 #777;border-style:solid;border-width:3px 2px 2px;box-shadow:inset 0 -1px 2px hsla(0,0%,100%,.4),0 2px 3px rgba(0,0,0,.4);height:auto;padding:.7% 0;position:relative;width:100%}.component-autopiano .piano-wrap.piano .piano-panel .piano-info-container{height:100%;padding:0;position:relative;width:100%}.component-autopiano .piano-wrap.piano .piano-panel .piano-info-container .piano-art-word{flex-grow:0}.component-autopiano .piano-wrap.piano .piano-panel .piano-info-container .piano-displayer{background:linear-gradient(180deg,#0059f1,#0eb2ff,#0996e3);background:linear-gradient(180deg,#222,#666,#333);border-radius:8px;color:#f0f0f0;font-size:14px;height:100%;padding:5px 0;position:relative;width:52%}.component-autopiano .piano-wrap.piano .piano-panel .piano-info-container .piano-displayer .current-note-name{font-size:20px;font-weight:700;text-align:center;width:40px}.component-autopiano .piano-wrap.piano .piano-panel .piano-info-container .piano-displayer .keymap .v-icon{color:#f0f0f0}.component-autopiano .piano-wrap.piano .piano-panel .piano-info-container .piano-displayer .current-playing-music{max-width:200px}.component-autopiano .piano-wrap.piano .piano-key-wrap{background:#ddd;height:auto;overflow:hidden;position:relative;width:100%}.component-autopiano .piano-wrap.piano .piano-key-wrap .piano-key{position:relative}.component-autopiano .piano-wrap.piano .piano-key-wrap .wkey{background:#fff;background:linear-gradient(-30deg,#f5f5f5,#fff);border:1px solid #ccc;border-radius:0 0 5px 5px;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #fff,inset 1px 0 0 #fff,inset -1px 0 0 #fff,0 4px 3px rgba(0,0,0,.7);margin:0;padding-bottom:20%;width:2.775%}.component-autopiano .piano-wrap.piano .piano-key-wrap .wkey .keytip{bottom:5%;color:#373737;font-size:13px;position:absolute;text-align:center;width:100%}.component-autopiano .piano-wrap.piano .piano-key-wrap .wkey .keytip .keyname{font-size:18px;font-weight:700;margin-bottom:8px}.component-autopiano .piano-wrap.piano .piano-key-wrap .wkey .keytip .notename,.component-autopiano .piano-wrap.piano .piano-key-wrap .wkey .keytip .singname{display:inline-block;font-weight:700;height:20px;line-height:20px;text-align:center;width:20px}.component-autopiano .piano-wrap.piano .piano-key-wrap .wkey:nth-child(-n+7) .notename,.component-autopiano .piano-wrap.piano .piano-key-wrap .wkey:nth-child(-n+7) .singname{background:#ccccd6}.component-autopiano .piano-wrap.piano .piano-key-wrap .wkey:nth-child(-n+14):nth-child(n+8) .notename,.component-autopiano .piano-wrap.piano .piano-key-wrap .wkey:nth-child(-n+14):nth-child(n+8) .singname{background:#93b5cf}.component-autopiano .piano-wrap.piano .piano-key-wrap .wkey:nth-child(-n+21):nth-child(n+15) .notename,.component-autopiano .piano-wrap.piano .piano-key-wrap .wkey:nth-child(-n+21):nth-child(n+15) .singname{background:#a4cab6}.component-autopiano .piano-wrap.piano .piano-key-wrap .wkey:nth-child(-n+28):nth-child(n+22) .notename,.component-autopiano .piano-wrap.piano .piano-key-wrap .wkey:nth-child(-n+28):nth-child(n+22) .singname{background:#fbb957}.component-autopiano .piano-wrap.piano .piano-key-wrap .wkey:nth-child(-n+35):nth-child(n+29) .notename,.component-autopiano .piano-wrap.piano .piano-key-wrap .wkey:nth-child(-n+35):nth-child(n+29) .singname{background:#ee8055}.component-autopiano .piano-wrap.piano .piano-key-wrap .wkey:nth-child(36) .notename,.component-autopiano .piano-wrap.piano .piano-key-wrap .wkey:nth-child(36) .singname{background:#f07c82}.component-autopiano .piano-wrap.piano .piano-key-wrap .wkey-active{background:#efefef;box-shadow:0 2px 2px rgba(0,0,0,.4);padding-bottom:19.7%}.component-autopiano .piano-wrap.piano .piano-key-wrap .wkey-active:before{border-color:transparent transparent transparent rgba(0,0,0,.1);border-style:solid;border-width:250px 5px 0;bottom:0;content:"";left:0;position:absolute}.component-autopiano .piano-wrap.piano .piano-key-wrap .wkey-active:after{border-color:transparent rgba(0,0,0,.1) transparent transparent;border-style:solid;border-width:250px 5px 0;bottom:0;content:"";position:absolute;right:0}.component-autopiano .piano-wrap.piano .piano-key-wrap .bkey{background:linear-gradient(-20deg,#333,#000,#333);border-color:#666 #222 #111 #555;border-radius:0 0 2px 2px;border-style:solid;border-width:1px 2px 7px;box-shadow:inset 0 -1px 2px hsla(0,0%,100%,.4),0 2px 3px rgba(0,0,0,.4);height:100%;overflow:hidden;position:absolute;top:0;width:10%}.component-autopiano .piano-wrap.piano .piano-key-wrap .bkey .keytip{bottom:5%;color:#fff;font-size:14px;left:0;overflow:hidden;position:absolute;width:100%}.component-autopiano .piano-wrap.piano .piano-key-wrap .bkey .keytip .keyname{margin-bottom:8px;text-align:center;width:100%}.component-autopiano .piano-wrap.piano .piano-key-wrap .bkey-active{border-bottom-width:2px;box-shadow:inset 0 -1px 1px hsla(0,0%,100%,.4),0 1px 0 rgba(0,0,0,.8),0 2px 2px rgba(0,0,0,.4),0 -1px 0 #000}.component-autopiano .piano-wrap.piano .piano-key-wrap .wkey.auto-key-active{background:#facc94!important}.component-autopiano .piano-wrap.piano .piano-key-wrap .bkey.auto-key-active{background:#75c3ed!important;border-color:#75c3ed}.component-autopiano .piano-wrap.piano .piano-key-wrap .bkey:first-child{left:8%}.component-autopiano .piano-wrap.piano .piano-key-wrap .bkey:nth-child(2){left:23%}.component-autopiano .piano-wrap.piano .piano-key-wrap .bkey:nth-child(3){left:49%}.component-autopiano .piano-wrap.piano .piano-key-wrap .bkey:nth-child(4){left:64%}.component-autopiano .piano-wrap.piano .piano-key-wrap .bkey:nth-child(5){left:79%}.component-autopiano .piano-wrap.piano .piano-key-wrap .bkey-wrap{padding-bottom:12%;position:absolute;top:0;width:20%}.component-autopiano .piano-wrap.piano .piano-key-wrap .bkey-wrap1{left:0}.component-autopiano .piano-wrap.piano .piano-key-wrap .bkey-wrap2{left:19.5%}.component-autopiano .piano-wrap.piano .piano-key-wrap .bkey-wrap3{left:39%}.component-autopiano .piano-wrap.piano .piano-key-wrap .bkey-wrap4{left:58.3%}.component-autopiano .piano-wrap.piano .piano-key-wrap .bkey-wrap5{left:77.7%}