.wrapper-keyboard[data-v-afc1b70c]{margin:.5rem;height:27rem;width:103rem;background-color:var(--color-98);-webkit-user-select:none;user-select:none}.key[data-v-afc1b70c]{display:flex;align-items:center;justify-content:center;border-radius:3px;position:absolute;font-size:.5rem;background-color:#93e1f580;border:2px solid greenyellow}.wrapper-scroll[data-v-3519193e]{margin-top:2rem}.wrapper[data-v-3519193e]{margin-left:.5rem;height:25.5rem;width:68.2rem;background-color:var(--background-secondary)}.wrapper-card[data-v-3519193e]{margin-left:.5rem;height:25.5rem;width:34rem;background-color:var(--background-secondary);-webkit-user-select:none;user-select:none}.wrapper-container[data-v-3519193e]{display:flex;flex-direction:row;justify-content:center;margin-top:3rem}.wrapper-colors[data-v-3519193e]{width:16rem;display:flex;margin-top:1rem;height:3rem;flex-direction:row;align-items:center;justify-content:center;background-color:var(--background-tertiary)}.wrapper-color-picker[data-v-3519193e]{margin-left:2rem;width:16rem;display:flex;flex-direction:column;justify-content:center;align-items:center}.wrapper-params[data-v-3519193e]{width:16rem;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:1rem;height:6rem;background-color:var(--background-tertiary);color:var(--text-dark)}.el-btn[data-v-3519193e]{background-color:var(--background-tertiary);color:var(--text-dark);margin-left:10px;width:5rem}.color-dot-item[data-v-3519193e]{width:1.2rem;height:1.2rem;border-radius:1rem;margin:auto 4px}.light-item div[data-v-3519193e]{width:100%;height:100%;margin:24% auto 25%;padding:0}.light-item-container[data-v-3519193e]{padding-top:1vh;margin-left:2rem;margin-right:1rem}.light-item[data-v-3519193e]{-webkit-user-select:none;user-select:none;float:left;margin:.3rem;min-width:8rem;height:3rem;display:flex;justify-content:center;align-items:center;color:var(--text-primary);border-radius:.5rem;background-color:var(--color-88);outline:2px solid var(--color-88);transition:all .3s ease-in-out}.light-item[data-v-3519193e]:hover{outline:2px solid var(--orange);background-color:var(--color-85)}.toggle{border:1px solid rgb(24,103,192)}.wrapper-keyboard[data-v-80461ad1]{margin:.5rem;height:27rem;width:103rem;background-color:#ffffff4d;-webkit-user-select:none;user-select:none}.key[data-v-80461ad1]{display:flex;align-items:center;justify-content:center;border-radius:3px;position:absolute;font-size:.5rem;background-color:#93e1f580}.rhythm-running-tips[data-v-ecabed65]{position:absolute;bottom:1rem;left:2rem;font-size:1rem;color:#fb8c00}.wrapper-colorful[data-v-ecabed65]{background-image:url(src/assets/img/bg-colorful.png)}.wrapper-scroll[data-v-ecabed65]{margin-top:2rem}.wrapper[data-v-ecabed65]{margin-left:.5rem;height:25.5rem;width:68.2rem;background-color:var(--background-secondary)}.wrapper-colors[data-v-ecabed65]{width:16rem;display:flex;margin-top:1rem;height:3rem;flex-direction:row;align-items:center;justify-content:center;background-color:var(--background-tertiary)}.wrapper-params[data-v-ecabed65]{width:16rem;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:1rem;height:6rem;background-color:var(--background-tertiary);color:var(--text-dark)}.wrapper-container[data-v-ecabed65]{display:flex;flex-direction:row;justify-content:center;margin-top:3rem}.wrapper-color-picker[data-v-ecabed65]{margin-left:2rem;width:16rem;display:flex;flex-direction:column;justify-content:center;align-items:center}.wrapper-card[data-v-ecabed65]{margin-left:.5rem;height:25.5rem;width:34rem;background-color:var(--background-secondary);-webkit-user-select:none;user-select:none}.color-dot-item[data-v-ecabed65]{width:1.2rem;height:1.2rem;border-radius:1rem;margin:auto 4px}.light-item div[data-v-ecabed65]{width:100%;height:100%;margin:24% auto 25%;padding:0}.light-item-container[data-v-ecabed65]{padding-top:1vh;margin-left:2rem;margin-right:1rem}.light-item[data-v-ecabed65]{-webkit-user-select:none;user-select:none;float:left;margin:.3rem;min-width:8rem;height:3rem;display:flex;justify-content:center;align-items:center;color:var(--text-primary);border-radius:.5rem;background-color:var(--color-88);outline:2px solid var(--color-88);transition:all .3s ease-in-out}.light-item[data-v-ecabed65]:hover{outline:2px solid var(--orange);background-color:var(--color-85)}.rhythm-running-tips[data-v-05d6c745]{position:absolute;bottom:1rem;left:2rem;font-size:1rem;color:#fb8c00}.wrapper-colorful[data-v-05d6c745]{background-image:url(src/assets/img/bg-colorful.png)}.wrapper-scroll[data-v-05d6c745]{margin-top:2rem}.wrapper[data-v-05d6c745]{margin-left:.5rem;height:25.5rem;width:68.2rem;background-color:var(--background-secondary)}.wrapper-colors[data-v-05d6c745]{width:16rem;display:flex;margin-top:1rem;height:3rem;flex-direction:row;align-items:center;justify-content:center;background-color:var(--background-tertiary)}.wrapper-params[data-v-05d6c745]{width:16rem;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:1rem;height:6rem;background-color:var(--background-tertiary);color:var(--text-dark)}.wrapper-container[data-v-05d6c745]{display:flex;flex-direction:row;justify-content:center;margin-top:3rem}.wrapper-color-picker[data-v-05d6c745]{margin-left:2rem;width:16rem;display:flex;flex-direction:column;justify-content:center;align-items:center}.wrapper-card[data-v-05d6c745]{margin-left:.5rem;height:25.5rem;width:34rem;background-color:var(--background-secondary);-webkit-user-select:none;user-select:none}.color-dot-item[data-v-05d6c745]{width:1.2rem;height:1.2rem;border-radius:1rem;margin:auto 4px}.light-item div[data-v-05d6c745]{width:100%;height:100%;margin:24% auto 25%;padding:0}.light-item-container[data-v-05d6c745]{padding-top:1vh;margin-left:2rem;margin-right:1rem}.light-item[data-v-05d6c745]{-webkit-user-select:none;user-select:none;float:left;margin:.3rem;min-width:8rem;height:3rem;display:flex;justify-content:center;align-items:center;color:var(--text-primary);border-radius:.5rem;background-color:var(--color-88);outline:2px solid var(--color-88);transition:all .3s ease-in-out}.light-item[data-v-05d6c745]:hover{outline:2px solid var(--orange);background-color:var(--color-85)}.wrapper-colorful[data-v-0fa26507]{background-image:url(src/assets/img/bg-colorful.png)}.wrapper-scroll[data-v-0fa26507]{margin-top:2rem}.wrapper[data-v-0fa26507]{margin-left:.5rem;height:25.5rem;width:68.2rem;background-color:var(--background-secondary)}.wrapper-colors[data-v-0fa26507]{width:16rem;display:flex;margin-top:1rem;height:3rem;flex-direction:row;align-items:center;justify-content:center;background-color:var(--background-tertiary)}.wrapper-params[data-v-0fa26507]{width:16rem;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:1rem;height:6rem;background-color:var(--background-tertiary);color:var(--text-dark)}.wrapper-container[data-v-0fa26507]{display:flex;flex-direction:row;justify-content:center;margin-top:3rem}.wrapper-color-picker[data-v-0fa26507]{margin-left:2rem;width:16rem;display:flex;flex-direction:column;justify-content:center;align-items:center}.wrapper-card[data-v-0fa26507]{margin-left:.5rem;height:25.5rem;width:34rem;background-color:var(--background-secondary);-webkit-user-select:none;user-select:none}.color-dot-item[data-v-0fa26507]{width:1.2rem;height:1.2rem;border-radius:1rem;margin:auto 4px}.light-item div[data-v-0fa26507]{width:100%;height:100%;margin:24% auto 25%;padding:0}.light-item-container[data-v-0fa26507]{padding-top:1vh;margin-left:2rem;margin-right:1rem}.light-item[data-v-0fa26507]{-webkit-user-select:none;user-select:none;float:left;margin:.3rem;min-width:8rem;height:3rem;display:flex;justify-content:center;align-items:center;color:var(--text-primary);border-radius:.5rem;background-color:var(--color-88);outline:2px solid var(--color-88);transition:all .3s ease-in-out}.light-item[data-v-0fa26507]:hover{outline:2px solid var(--orange);background-color:var(--color-85)}[data-theme=light]{--base-background-color: var(--background-tertiary);--thumb-border-color: rgba(255, 255, 255, .7);--color-wheel-control-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .45) inset;--brightness-control-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .25) inset;--input-controls-tab-header-background-color: var(--background-tertiary);--input-controls-tab-header-font-color: var(--text-dark);--input-controls-tab-background-color: rgba(122, 122, 122, .1);--range-input-control-background-color: rgba(221, 218, 210, .6);--range-input-control-background-color--focused: rgba(222, 220, 220, .5);--range-input-control-font-color: var(--color-98);--range-input-control-selection-color: var(--color-60);--range-input-control-progress-color: var(--color-60);--text-input-control-background-color: var(--color-60);--text-input-control-background-color--focused: var(--color-70);--text-input-control-font-color: var(--color-98);--text-input-control-selection-color: var(--color-60)}.color-picker{top:12rem;right:15rem;width:180px;height:18rem;min-height:226px;background:var(--base-background-color);border-radius:5px;-webkit-box-shadow:0px 3px 1px -2px rgba(0,0,0,.2),0px 2px 2px 0px rgba(0,0,0,.14),0px 1px 5px 0px rgba(0,0,0,.12);-moz-box-shadow:0px 3px 1px -2px rgba(0,0,0,.2),0px 2px 2px 0px rgba(0,0,0,.14),0px 1px 5px 0px rgba(0,0,0,.12);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;z-index:1000}.color-picker-controls{position:relative;width:100%;height:auto;display:flex;flex-direction:column}.color-picker-controls-group{box-sizing:border-box;-moz-box-sizing:border-box;position:relative;display:block;width:100%;padding:10px}.color-picker-wheel-control{padding:2px;box-sizing:border-box;-moz-box-sizing:border-box;position:relative;display:flex;flex-direction:row;height:100%;width:100%;border:none}.color-picker-wheel-control:after{content:"";position:absolute;display:block;top:0;left:0;width:100%;height:100%;border:1px solid var(--base-background-color);border-radius:50%;-webkit-box-shadow:var(--color-wheel-control-box-shadow);-moz-box-shadow:var(--color-wheel-control-box-shadow);box-shadow:var(--color-wheel-control-box-shadow);margin:-1px;pointer-events:none}.color-picker-brightness-control{position:relative;display:flex;flex-direction:row;height:100%;width:8px;border:1px solid transparent;border-radius:3px;margin-left:10px}.color-picker-brightness-control:after{content:"";position:absolute;display:block;top:0;left:0;width:100%;height:100%;border-radius:3px;-webkit-box-shadow:var(--brightness-control-box-shadow);-moz-box-shadow:var(--brightness-control-box-shadow);box-shadow:var(--brightness-control-box-shadow);pointer-events:none}.color-picker-wheel-control-thumb,.color-picker-brightness-control-thumb{position:absolute;display:block;width:10px;height:10px;border:1px solid var(--thumb-border-color);border-radius:50%;-webkit-box-shadow:0px 3px 1px -2px rgba(0,0,0,.2),0px 2px 2px 0px rgba(0,0,0,.14),0px 1px 5px 0px rgba(0,0,0,.12);-moz-box-shadow:0px 3px 1px -2px rgba(0,0,0,.2),0px 2px 2px 0px rgba(0,0,0,.14),0px 1px 5px 0px rgba(0,0,0,.12);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;cursor:pointer;z-index:1000}.wheel-canvas,.brightness-canvas{width:100%;height:100%;border-radius:3px}.color-picker-input-controls{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background:var(--input-controls-tab-background-color);border-radius:3px;overflow:hidden}.color-picker-input-controls-tab-headers{position:relative;display:flex;flex-direction:row;width:100%;height:25px;overflow:hidden}.color-picker-input-controls-tab-headers button{position:relative;display:block;width:33.33%;height:100%;background:var(--input-controls-tab-header-background-color);font-size:9px;color:var(--input-controls-tab-header-font-color);border:none;outline:none}.color-picker-input-controls-tab-headers button.selected{background:none}.color-picker-input-controls-tabs{position:relative;display:block;width:100%;height:auto;padding:4px}.color-picker-input-controls-tab{position:relative;display:flex;flex-direction:column}.color-picker-input-controls-tab:not(.selected){display:none}input{font-size:100%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.range-input-control{position:relative;display:block;width:100%;height:auto;min-height:20px;margin:1px 0 0;background:var(--range-input-control-background-color);font-size:10px;cursor:ew-resize;overflow:hidden}.range-input-control:hover,.range-input-control.range-input-control--focused{background:var(--range-input-control-background-color--focused)}.range-input-control:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.range-input-control:last-child{border-bottom-left-radius:3px;border-bottom-right-radius:3px}.range-input-control .range-input-enter-block,.range-input-control .range-input-details-block{position:absolute;display:block;top:0;left:0;right:0;bottom:0}.range-input-control:not(.range-input-control--key-input-mode) .range-input-enter-block{display:none}.range-input-control.range-input-control--key-input-mode .range-input-enter-block{display:block}.range-input-control:not(.range-input-control--key-input-mode) .range-input-details-block{display:block}.range-input-control.range-input-control--key-input-mode .range-input-details-block{display:none}.range-input-control input{position:absolute;display:block;top:50%;transform:translateY(-50%);width:100%;height:auto;background:none;border:none;color:var(--range-input-control-font-color);text-align:center;outline:none}.range-input-control input::-moz-selection{background:var(--range-input-control-selection-color)}.range-input-control input::selection{background:var(--range-input-control-selection-color)}.range-input-control .range-input-progress{position:absolute;display:block;top:0;left:0;height:100%;background:var(--range-input-control-progress-color)}.range-input-control .range-input-label,.range-input-control .range-input-value{position:absolute;display:block;top:50%;width:auto;height:auto;transform:translateY(-50%);color:var(--range-input-control-font-color);pointer-events:none}.range-input-control .range-input-label{left:5px}.range-input-control .range-input-value{right:5px}.text-input-control{position:relative;display:block;width:100%;height:auto;min-height:20px;background:var(--text-input-control-background-color);font-size:10px;margin:1px 0 0;cursor:text;overflow:hidden}.text-input-control:hover,.text-input-control.text-input-control--focused{background:var(--text-input-control-background-color--focused)}.text-input-control:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.text-input-control:last-child{border-bottom-left-radius:3px;border-bottom-right-radius:3px}.text-input-control .text-input-enter-block,.text-input-control .text-input-details-block{position:absolute;display:block;top:0;left:0;right:0;bottom:0}.text-input-control:not(.text-input-control--focused) .text-input-enter-block{display:none}.text-input-control.text-input-control--focused .text-input-enter-block{display:block}.text-input-control:not(.text-input-control--focused) .text-input-details-block{display:block}.text-input-control.text-input-control--focused .text-input-details-block{display:none}.text-input-control input{position:absolute;display:block;top:50%;transform:translateY(-50%);width:100%;height:auto;background:none;color:var(--text-input-control-font-color);text-align:center;border:none;outline:none}.text-input-control input::-moz-selection{background:var(--text-input-control-selection-color)}.text-input-control input::selection{background:var(--text-input-control-selection-color)}.text-input-control .text-input-label,.text-input-control .text-input-value{position:absolute;display:block;top:50%;width:auto;height:auto;transform:translateY(-50%);color:var(--text-input-control-font-color);pointer-events:none}.text-input-control .text-input-label{left:5px}.text-input-control .text-input-value{right:5px}.scrollbar-flex-content[data-v-a388bc4b]{display:flex}.scrollbar-demo-item[data-v-a388bc4b]{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:100px;height:50px;margin:10px;border-radius:4px;background:var(--el-color-danger-light-9);color:var(--el-color-danger)}.scrollbar-flex-content[data-v-3a88684b]{display:flex}.scrollbar-demo-item[data-v-3a88684b]{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:100px;height:50px;margin:10px;border-radius:4px;background:var(--el-color-danger-light-9);color:var(--el-color-danger)}