[data-v-c8ccdb2d]:root{--el-color-primary:#5100e9!important;--el-color-primary-light-3:#818cf8!important;--el-color-primary-light-5:#a5b4fc!important;--el-color-primary-light-7:#c7d2fe!important;--el-color-primary-light-8:#ddd6fe!important;--el-color-primary-light-9:#ede9fe!important;--el-color-primary-dark-2:#4f46e5!important;--el-button-primary-bg-color:#5100e9!important;--el-button-primary-border-color:#5100e9!important;--el-button-primary-text-color:#fff!important;--el-button-primary-hover-bg-color:#4f46e5!important;--el-button-primary-hover-border-color:#4f46e5!important;--el-switch-on-color:#5100e9!important;--el-switch-off-color:#dcdfe6!important;--el-switch-on-border-color:#5100e9!important;--el-switch-off-border-color:#dcdfe6!important;--el-switch-on-hover-color:#4f46e5!important;--el-pagination-active-bg-color:#5100e9!important;--el-pagination-active-color:#fff!important;--el-tabs-active-color:#5100e9!important;--el-tag-primary-bg-color:#5100e9!important;--el-tag-primary-border-color:#5100e9!important}[data-v-c8ccdb2d]{box-sizing:border-box;font-family:微软雅黑,PingFang SC,Hiragino Sans GB,Arial,sans-serif}body[data-v-c8ccdb2d]{align-items:flex-start;display:flex;justify-content:center;min-height:100vh}.container[data-v-c8ccdb2d]{animation:slideUp-c8ccdb2d .6s ease-out;background:#fff;border-radius:16px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-width:1400px;overflow:hidden;width:100%}@keyframes slideUp-c8ccdb2d{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn-c8ccdb2d{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.section[data-v-c8ccdb2d]{margin-bottom:25px}.section .section-title[data-v-c8ccdb2d]{align-items:center;color:#1e293b;display:flex;font-size:1.2rem;font-weight:600;gap:10px;margin-bottom:15px}.section .section-title[data-v-c8ccdb2d]:before{background:#5100e9;border-radius:2px;content:"";height:20px;width:4px}.example-buttons[data-v-c8ccdb2d]{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:20px}.example-buttons .example-btn[data-v-c8ccdb2d]{background:#f8fafc;border:2px solid #e2e8f0;border-radius:8px;color:#1e293b;cursor:pointer;font-size:.95rem;font-weight:500;padding:12px 16px;text-align:center;transition:all .3s ease}.example-buttons .example-btn[data-v-c8ccdb2d]:hover{border-color:#5100e9;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transform:translateY(-2px)}textarea[data-v-c8ccdb2d]{background:#f8fafc;border:2px solid #e2e8f0;border-radius:8px;font-size:1rem;line-height:1.6;min-height:120px;padding:16px;resize:vertical;transition:border-color .3s ease;width:100%}textarea[data-v-c8ccdb2d]:focus{border-color:#5100e9;box-shadow:0 0 0 3px #3b82f61a;outline:none}.rules[data-v-c8ccdb2d]{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-left:4px solid #5100e9;border-radius:8px;margin-top:20px;padding:20px}.rules .rule-item[data-v-c8ccdb2d]{color:#1e293b;line-height:1.5;margin-bottom:8px}.highlight[data-v-c8ccdb2d]{background:#3b82f61a;border-radius:4px;color:#5100e9;font-weight:600;padding:2px 6px}.footer[data-v-c8ccdb2d]{border-top:1px solid #e2e8f0;color:#64748b;font-size:.9rem;padding:20px;text-align:center}.audio-player[data-v-c8ccdb2d]{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;margin-top:20px;padding:15px}.audio-player .audio-player-title[data-v-c8ccdb2d]{align-items:center;color:#1e293b;display:flex;font-size:1.1rem;font-weight:600;gap:10px;margin-bottom:15px}.audio-player .audio-player-title[data-v-c8ccdb2d]:before{content:"🎵";font-size:1.2rem}.audio-player .audio-buttons[data-v-c8ccdb2d]{display:flex;flex-wrap:wrap;gap:10px}.audio-player .audio-buttons .audio-btn[data-v-c8ccdb2d]{align-items:center;background:#5100e9;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:.9rem;font-weight:500;gap:5px;padding:10px 16px;transition:all .3s ease}.audio-player .audio-buttons .audio-btn[data-v-c8ccdb2d]:hover{background:#4f46e5;transform:translateY(-1px)}.audio-player .audio-buttons .audio-btn[data-v-c8ccdb2d]:disabled{background:#64748b;cursor:not-allowed;transform:none}.audio-player .audio-buttons .audio-btn.playing[data-v-c8ccdb2d]{background:#10b981}.audio-player .tempo-control[data-v-c8ccdb2d]{align-items:center;display:flex;gap:10px;margin-top:15px}.audio-player .tempo-control .tempo-label[data-v-c8ccdb2d]{color:#64748b;font-size:.9rem}.audio-player .tempo-control .tempo-slider[data-v-c8ccdb2d]{-webkit-appearance:none;background:#e2e8f0;border-radius:2px;flex:1;height:4px;outline:none}.audio-player .tempo-control .tempo-slider[data-v-c8ccdb2d]::-webkit-slider-thumb{-webkit-appearance:none;background:#5100e9;border-radius:50%;cursor:pointer;height:16px;width:16px}.audio-player .tempo-control .tempo-value[data-v-c8ccdb2d]{color:#1e293b;font-size:.9rem;font-weight:500;min-width:40px}.loading[data-v-c8ccdb2d]{animation:spin-c8ccdb2d 1s ease-in-out infinite;border:3px solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:#fff;display:inline-block;height:20px;width:20px}@keyframes spin-c8ccdb2d{to{transform:rotate(1turn)}}.success-message[data-v-c8ccdb2d]{animation:slideIn-c8ccdb2d .3s ease-out;background:#10b981;border-radius:6px;color:#fff;display:none;margin-top:10px;padding:10px 16px}@keyframes slideIn-c8ccdb2d{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.el-button--primary[data-v-c8ccdb2d]{background-color:#5100e9!important;border-color:#5100e9!important;color:#fff!important}.el-button--primary[data-v-c8ccdb2d]:active,.el-button--primary[data-v-c8ccdb2d]:focus,.el-button--primary[data-v-c8ccdb2d]:hover{background-color:#4f46e5!important;border-color:#4f46e5!important;color:#fff!important}.el-button--primary.is-loading[data-v-c8ccdb2d],.el-button[type=primary][data-v-c8ccdb2d],.search-bar .el-button--primary[data-v-c8ccdb2d]{background-color:#5100e9!important;border-color:#5100e9!important}.el-switch.el-switch--small .el-switch__core[data-v-c8ccdb2d]{height:20px!important;width:36px!important}.el-switch .el-switch__core[data-v-c8ccdb2d]{background-color:#dcdfe6!important;border-color:#dcdfe6!important}.el-switch .el-switch__core[data-v-c8ccdb2d]:before{background-color:#fff!important;height:18px!important;width:18px!important}.el-switch:hover .el-switch__core[data-v-c8ccdb2d]{background-color:#e4e7ed!important;border-color:#5100e9!important}.el-switch:hover.is-checked .el-switch__core[data-v-c8ccdb2d]{background-color:#4f46e5!important;border-color:#4f46e5!important}.el-switch.is-disabled[data-v-c8ccdb2d]{opacity:.6}.el-switch.is-disabled .el-switch__core[data-v-c8ccdb2d]{cursor:not-allowed!important}.el-switch.is-checked .el-switch__core[data-v-c8ccdb2d]{background-color:#5100e9!important;border-color:#5100e9!important}.el-pagination .el-pager li[data-v-c8ccdb2d]{border-radius:50%;height:32px;line-height:32px;margin:0 5px;min-width:32px}.el-pagination .el-pager li[data-v-c8ccdb2d]:hover{background-color:#5100e91a;color:#5100e9}.el-pagination .el-pager li.active[data-v-c8ccdb2d]{background-color:#5100e9;border-radius:50%;color:#fff;height:32px;line-height:32px;min-width:32px}.el-pagination .btn-next[data-v-c8ccdb2d],.el-pagination .btn-prev[data-v-c8ccdb2d]{border-radius:50%;height:32px;line-height:32px;margin:0 5px;width:32px}.el-pagination .btn-next[data-v-c8ccdb2d]:hover,.el-pagination .btn-prev[data-v-c8ccdb2d]:hover{background-color:#5100e91a;color:#5100e9}@media(max-width:768px){body[data-v-c8ccdb2d]{padding:0}.container[data-v-c8ccdb2d]{border-radius:12px}.header[data-v-c8ccdb2d]{padding:20px}.header h1[data-v-c8ccdb2d]{font-size:1.8rem}.tabs[data-v-c8ccdb2d]{flex-direction:column;padding:0}.tabs .tab[data-v-c8ccdb2d]{border-right:none;text-align:center}.example-buttons[data-v-c8ccdb2d]{grid-template-columns:1fr}.audio-buttons[data-v-c8ccdb2d]{flex-direction:column}.audio-buttons .audio-btn[data-v-c8ccdb2d]{justify-content:center}}.preset-covers-title[data-v-c8ccdb2d]{color:#303133;font-size:14px;font-weight:500;margin-bottom:12px}.preset-covers-list[data-v-c8ccdb2d]{display:grid;gap:12px;grid-template-columns:repeat(10,1fr)}@media(max-width:768px){.preset-covers-list[data-v-c8ccdb2d]{grid-template-columns:repeat(6,1fr)}}@media(max-width:480px){.preset-covers-list[data-v-c8ccdb2d]{grid-template-columns:repeat(3,1fr)}}.preset-cover-item[data-v-c8ccdb2d]{align-items:center;cursor:pointer;display:flex;flex-direction:column;transition:all .3s ease}.preset-cover-item[data-v-c8ccdb2d]:hover{transform:translateY(-2px)}.preset-cover-image[data-v-c8ccdb2d]{aspect-ratio:1;border:2px solid transparent;border-radius:6px;box-shadow:0 2px 6px #0000001a;-o-object-fit:cover;object-fit:cover;transition:all .3s ease;width:100%}.preset-cover-item:hover .preset-cover-image[data-v-c8ccdb2d]{border-color:#5100e9;box-shadow:0 4px 12px #00000026;transform:scale(1.05)}.more-covers-btn[data-v-c8ccdb2d]{color:#5100e9;cursor:pointer;font-size:14px;margin-top:15px;text-align:center;transition:color .3s}.more-covers-list[data-v-c8ccdb2d]{border-top:1px solid #e4e7ed;margin-top:15px;padding-top:15px}.virtual-keyboard[data-v-007399f1]{background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 2px 8px #0000001a;box-sizing:border-box;padding:20px;width:100%}.section-title[data-v-007399f1]{align-items:center;color:#1e293b;display:flex;font-size:1.3rem;font-weight:600;gap:10px;margin-bottom:15px}.octave-section[data-v-007399f1]{margin-bottom:20px}.octave-label[data-v-007399f1]{color:#64748b;font-size:.9rem;font-weight:600;margin-bottom:8px}.keyboard-row[data-v-007399f1]{flex-wrap:wrap;gap:2px}.keyboard-row[data-v-007399f1],.piano-key[data-v-007399f1]{display:flex;justify-content:center;position:relative}.piano-key[data-v-007399f1]{align-items:center;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;flex-shrink:0;font-size:.85rem;font-weight:600;height:50px;min-width:38px;transition:all .2s ease;width:38px}.piano-key[data-v-007399f1]:hover{box-shadow:0 4px 8px #00000026;transform:translateY(-2px)}.piano-key[data-v-007399f1]:active{transform:translateY(0)}.piano-key.low-note[data-v-007399f1]{background:linear-gradient(135deg,#e3f2fd,#bbdefb);color:#1565c0}.piano-key.mid-note[data-v-007399f1]{background:linear-gradient(135deg,#f3e5f5,#e1bee7);color:#6a1b9a}.piano-key.high-note[data-v-007399f1]{background:linear-gradient(135deg,#fff3e0,#ffe0b2);color:#e65100}.piano-key.sharp[data-v-007399f1]{background:linear-gradient(135deg,#263238,#37474f);border:1px solid #37474f;color:#fff;font-size:.75rem;height:35px;margin:0 -13px;min-width:26px;width:26px;z-index:2}.piano-key.sharp[data-v-007399f1]:hover{background:linear-gradient(135deg,#455a64,#546e7a)}@media(max-width:768px){.virtual-keyboard[data-v-007399f1]{padding:10px}.octave-section[data-v-007399f1]{margin-bottom:10px}.octave-label[data-v-007399f1]{font-size:.75rem;margin-bottom:4px}.keyboard-row[data-v-007399f1]{gap:1px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:5px;white-space:nowrap}.piano-key[data-v-007399f1]{flex-shrink:0;font-size:.7rem;height:35px;min-width:25px;padding:0;width:25px}.piano-key.sharp[data-v-007399f1]{font-size:.6rem;height:25px;margin:0 -9px;min-width:18px;width:18px;z-index:2}}.el-alert{--el-alert-padding:8px 16px;--el-alert-border-radius-base:var(--el-border-radius-base);--el-alert-title-font-size:14px;--el-alert-title-with-description-font-size:16px;--el-alert-description-font-size:14px;--el-alert-close-font-size:16px;--el-alert-close-customed-font-size:14px;--el-alert-icon-size:16px;--el-alert-icon-large-size:28px;align-items:center;background-color:var(--el-color-white);border-radius:var(--el-alert-border-radius-base);box-sizing:border-box;display:flex;margin:0;opacity:1;overflow:hidden;padding:var(--el-alert-padding);position:relative;transition:opacity var(--el-transition-duration-fast);width:100%}.el-alert.is-light .el-alert__close-btn{color:var(--el-text-color-placeholder)}.el-alert.is-dark .el-alert__close-btn,.el-alert.is-dark .el-alert__description{color:var(--el-color-white)}.el-alert.is-center{justify-content:center}.el-alert--primary{--el-alert-bg-color:var(--el-color-primary-light-9)}.el-alert--primary.is-light{background-color:var(--el-alert-bg-color)}.el-alert--primary.is-light,.el-alert--primary.is-light .el-alert__description{color:var(--el-color-primary)}.el-alert--primary.is-dark{background-color:var(--el-color-primary);color:var(--el-color-white)}.el-alert--success{--el-alert-bg-color:var(--el-color-success-light-9)}.el-alert--success.is-light{background-color:var(--el-alert-bg-color)}.el-alert--success.is-light,.el-alert--success.is-light .el-alert__description{color:var(--el-color-success)}.el-alert--success.is-dark{background-color:var(--el-color-success);color:var(--el-color-white)}.el-alert--info{--el-alert-bg-color:var(--el-color-info-light-9)}.el-alert--info.is-light{background-color:var(--el-alert-bg-color)}.el-alert--info.is-light,.el-alert--info.is-light .el-alert__description{color:var(--el-color-info)}.el-alert--info.is-dark{background-color:var(--el-color-info);color:var(--el-color-white)}.el-alert--warning{--el-alert-bg-color:var(--el-color-warning-light-9)}.el-alert--warning.is-light{background-color:var(--el-alert-bg-color)}.el-alert--warning.is-light,.el-alert--warning.is-light .el-alert__description{color:var(--el-color-warning)}.el-alert--warning.is-dark{background-color:var(--el-color-warning);color:var(--el-color-white)}.el-alert--error{--el-alert-bg-color:var(--el-color-error-light-9)}.el-alert--error.is-light{background-color:var(--el-alert-bg-color)}.el-alert--error.is-light,.el-alert--error.is-light .el-alert__description{color:var(--el-color-error)}.el-alert--error.is-dark{background-color:var(--el-color-error);color:var(--el-color-white)}.el-alert__content{display:flex;flex-direction:column;gap:4px}.el-alert .el-alert__icon{font-size:var(--el-alert-icon-size);margin-right:8px;width:var(--el-alert-icon-size)}.el-alert .el-alert__icon.is-big{font-size:var(--el-alert-icon-large-size);margin-right:12px;width:var(--el-alert-icon-large-size)}.el-alert__title{font-size:var(--el-alert-title-font-size);line-height:24px}.el-alert__title.with-description{font-size:var(--el-alert-title-with-description-font-size)}.el-alert .el-alert__description{font-size:var(--el-alert-description-font-size);margin:0}.el-alert .el-alert__close-btn{cursor:pointer;font-size:var(--el-alert-close-font-size);opacity:1;position:absolute;right:16px;top:12px}.el-alert .el-alert__close-btn.is-customed{font-size:var(--el-alert-close-customed-font-size);font-style:normal;line-height:24px;top:8px}.el-alert-fade-enter-from,.el-alert-fade-leave-active{opacity:0}:root{--el-color-primary:#5100e9!important;--el-color-primary-light-3:#818cf8!important;--el-color-primary-light-5:#a5b4fc!important;--el-color-primary-light-7:#c7d2fe!important;--el-color-primary-light-8:#ddd6fe!important;--el-color-primary-light-9:#ede9fe!important;--el-color-primary-dark-2:#4f46e5!important;--el-button-primary-bg-color:#5100e9!important;--el-button-primary-border-color:#5100e9!important;--el-button-primary-text-color:#fff!important;--el-button-primary-hover-bg-color:#4f46e5!important;--el-button-primary-hover-border-color:#4f46e5!important;--el-switch-on-color:#5100e9!important;--el-switch-off-color:#dcdfe6!important;--el-switch-on-border-color:#5100e9!important;--el-switch-off-border-color:#dcdfe6!important;--el-switch-on-hover-color:#4f46e5!important;--el-pagination-active-bg-color:#5100e9!important;--el-pagination-active-color:#fff!important;--el-tabs-active-color:#5100e9!important;--el-tag-primary-bg-color:#5100e9!important;--el-tag-primary-border-color:#5100e9!important}*{box-sizing:border-box;font-family:微软雅黑,PingFang SC,Hiragino Sans GB,Arial,sans-serif}body{align-items:flex-start;display:flex;justify-content:center;min-height:100vh}.container{animation:slideUp .6s ease-out;background:#fff;border-radius:16px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-width:1400px;overflow:hidden;width:100%}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.section{margin-bottom:25px}.section .section-title{align-items:center;color:#1e293b;display:flex;font-size:1.2rem;font-weight:600;gap:10px;margin-bottom:15px}.section .section-title:before{background:#5100e9;border-radius:2px;content:"";height:20px;width:4px}.example-buttons{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:20px}.example-buttons .example-btn{background:#f8fafc;border:2px solid #e2e8f0;border-radius:8px;color:#1e293b;cursor:pointer;font-size:.95rem;font-weight:500;padding:12px 16px;text-align:center;transition:all .3s ease}.example-buttons .example-btn:hover{border-color:#5100e9;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transform:translateY(-2px)}textarea{background:#f8fafc;border:2px solid #e2e8f0;border-radius:8px;font-size:1rem;line-height:1.6;min-height:120px;padding:16px;resize:vertical;transition:border-color .3s ease;width:100%}textarea:focus{border-color:#5100e9;box-shadow:0 0 0 3px #3b82f61a;outline:none}.rules{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-left:4px solid #5100e9;border-radius:8px;margin-top:20px;padding:20px}.rules .rule-item{color:#1e293b;line-height:1.5;margin-bottom:8px}.highlight{background:#3b82f61a;border-radius:4px;color:#5100e9;font-weight:600;padding:2px 6px}.footer{border-top:1px solid #e2e8f0;color:#64748b;font-size:.9rem;padding:20px;text-align:center}.audio-player .audio-player-title{align-items:center;color:#1e293b;display:flex;font-size:1.1rem;font-weight:600;gap:10px;margin-bottom:15px}.audio-player .audio-player-title:before{content:"🎵";font-size:1.2rem}.audio-player .audio-buttons{display:flex;flex-wrap:wrap;gap:10px}.audio-player .audio-buttons .audio-btn{align-items:center;background:#5100e9;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:.9rem;font-weight:500;gap:5px;padding:10px 16px;transition:all .3s ease}.audio-player .audio-buttons .audio-btn:hover{background:#4f46e5;transform:translateY(-1px)}.audio-player .audio-buttons .audio-btn:disabled{background:#64748b;cursor:not-allowed;transform:none}.audio-player .audio-buttons .audio-btn.playing{background:#10b981}.audio-player .tempo-control{align-items:center;display:flex;gap:10px;margin-top:15px}.audio-player .tempo-control .tempo-label{color:#64748b;font-size:.9rem}.audio-player .tempo-control .tempo-slider{-webkit-appearance:none;background:#e2e8f0;border-radius:2px;flex:1;height:4px;outline:none}.audio-player .tempo-control .tempo-slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5100e9;border-radius:50%;cursor:pointer;height:16px;width:16px}.audio-player .tempo-control .tempo-value{color:#1e293b;font-size:.9rem;font-weight:500;min-width:40px}.loading{animation:spin 1s ease-in-out infinite;border:3px solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:#fff;display:inline-block;height:20px;width:20px}@keyframes spin{to{transform:rotate(1turn)}}.success-message{margin-top:10px}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.el-button--primary{background-color:#5100e9!important;border-color:#5100e9!important;color:#fff!important}.el-button--primary:active,.el-button--primary:focus,.el-button--primary:hover{background-color:#4f46e5!important;border-color:#4f46e5!important;color:#fff!important}.el-button--primary.is-loading,.el-button[type=primary],.search-bar .el-button--primary{background-color:#5100e9!important;border-color:#5100e9!important}.el-switch.el-switch--small .el-switch__core{height:20px!important;width:36px!important}.el-switch .el-switch__core{background-color:#dcdfe6!important;border-color:#dcdfe6!important}.el-switch .el-switch__core:before{background-color:#fff!important;height:18px!important;width:18px!important}.el-switch:hover .el-switch__core{background-color:#e4e7ed!important;border-color:#5100e9!important}.el-switch:hover.is-checked .el-switch__core{background-color:#4f46e5!important;border-color:#4f46e5!important}.el-switch.is-disabled{opacity:.6}.el-switch.is-disabled .el-switch__core{cursor:not-allowed!important}.el-switch.is-checked .el-switch__core{background-color:#5100e9!important;border-color:#5100e9!important}.el-pagination .el-pager li{border-radius:50%;height:32px;line-height:32px;margin:0 5px;min-width:32px}.el-pagination .el-pager li:hover{background-color:#5100e91a;color:#5100e9}.el-pagination .el-pager li.active{background-color:#5100e9;border-radius:50%;color:#fff;height:32px;line-height:32px;min-width:32px}.el-pagination .btn-next,.el-pagination .btn-prev{border-radius:50%;height:32px;line-height:32px;margin:0 5px;width:32px}.el-pagination .btn-next:hover,.el-pagination .btn-prev:hover{background-color:#5100e91a;color:#5100e9}@media(max-width:768px){body{padding:0}.container{border-radius:12px}.header{padding:20px}.header h1{font-size:1.8rem}.tabs{flex-direction:column;padding:0}.tabs .tab{border-right:none;text-align:center}.example-buttons{grid-template-columns:1fr}.audio-buttons{flex-direction:column}.audio-buttons .audio-btn{justify-content:center}}.keyboard-rhythm-container{display:flex;flex-wrap:wrap;gap:0 20px;justify-content:center;margin-bottom:25px}.keyboard-rhythm-container .VirtualKeyboard,.keyboard-rhythm-container .virtual-keyboard{min-width:300px;width:calc(50% - 10px)}.keyboard-rhythm-container .virtual-keyboard-home{width:calc(50% - 10px)}@media(max-width:768px){.keyboard-rhythm-container{flex-direction:column;gap:20px 0}.keyboard-rhythm-container .VirtualKeyboard,.keyboard-rhythm-container .virtual-keyboard{min-width:auto;width:100%}.keyboard-rhythm-container .virtual-keyboard-home{width:calc(100% - 20px)}}.keyboard-section{margin-bottom:15px}.keyboard-section:last-child{margin-bottom:0}.keyboard-section .keyboard-title{color:#64748b;font-size:.9rem;font-weight:600;margin-bottom:8px;padding-left:5px}.keyboard-section .keyboard-row{display:flex;flex-wrap:wrap;gap:8px}.keyboard-section .keyboard-row .keyboard-key{background:#fff;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;font-size:.9rem;font-weight:500;min-width:40px;padding:8px 12px;transition:all .2s ease}.keyboard-section .keyboard-row .keyboard-key:hover{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transform:translateY(-2px)}.keyboard-section .keyboard-row .keyboard-key:active{transform:translateY(0)}.keyboard-section .keyboard-row .keyboard-key.symbol-key{background:linear-gradient(135deg,#e8f5e8,#c8e6c9);border-color:#66bb6a;color:#2e7d32}.keyboard-section .keyboard-row .keyboard-key.symbol-key:hover{background:linear-gradient(135deg,#c8e6c9,#a5d6a7)}.keyboard-section .keyboard-row .keyboard-key.action-key{background:linear-gradient(135deg,#f5f5f5,#eee);border-color:#9e9e9e;color:#616161}.keyboard-section .keyboard-row .keyboard-key.action-key:hover{background:linear-gradient(135deg,#eee,#e0e0e0)}.conversion-layout{display:grid;gap:20px;grid-template-columns:1fr 1fr}@media(max-width:768px){.conversion-layout{gap:20px;grid-template-columns:1fr}}.input-section,.output-section{display:flex;flex-direction:column;gap:20px}.input-section .textarea-container,.output-section .textarea-container{position:relative}.input-section .textarea-container textarea,.output-section .textarea-container textarea{min-height:200px;padding-right:64px}.input-section .section,.output-section .section{background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;padding:24px;transition:all .3s ease}.input-section .section:hover,.output-section .section:hover{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;transform:translateY(-2px)}.input-section .section{border-left:4px solid #5100e9}.output-section .section{border-left:4px solid #10b981}.output-section .result-area{display:flex;flex-direction:column}.output-section .result-area textarea{background:linear-gradient(135deg,#f8fafc,#f1f5f9);font-family:Courier New,monospace;font-size:.95rem;min-height:200px;overflow:auto;resize:vertical;-webkit-resize:vertical;-moz-resize:vertical}.output-section .result-area textarea:focus{border-color:#10b981;box-shadow:0 0 0 3px #10b9811a}.button-group{display:flex;flex-wrap:wrap;gap:20px}@media(max-width:768px){.button-group{flex-direction:column;gap:12px}}.save-btn{background:linear-gradient(135deg,#22c55e,#16a34a);border:none;border-radius:8px;color:#fff;cursor:pointer;flex:1;font-size:1.1rem;font-weight:600;min-width:120px;overflow:hidden;position:relative;transition:all .3s ease}.save-btn:hover{box-shadow:0 8px 20px #22c55e4d;transform:translateY(-2px)}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:linear-gradient(135deg,#a3e635,#84cc16);box-shadow:none;cursor:not-allowed;opacity:.7;transform:none}.save-btn .btn-text{display:inline-block;margin-right:8px}.success-message{animation:slideIn .3s ease-out;background:#10b981;border-radius:6px;color:#fff;display:none;margin:10px 0;padding:10px 16px;width:100%}.convert-btn{background:linear-gradient(135deg,#5100e9,#1d4ed8);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;margin:20px 0;overflow:hidden;padding:16px;position:relative;transition:all .3s ease;width:calc(50% - 10px)}@media(max-width:768px){.convert-btn{font-size:1rem;padding:14px;width:100%}}.convert-btn:hover{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;transform:translateY(-2px)}.convert-btn:active{transform:translateY(0)}.convert-btn:after{background:#ffffff4d;border-radius:50%;content:"";height:0;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s;width:0}.convert-btn:active:after{height:300px;width:300px}.copy-btn{background:linear-gradient(135deg,#5100e9,#4f46e5);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:500;padding:4px 8px;position:absolute;right:10px;top:10px;transition:all .3s ease}.copy-btn:hover{box-shadow:0 4px 12px #3b82f64d;transform:translateY(-2px)}.copy-btn:active{transform:translateY(0)}.audio-player{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;display:flex;flex-direction:column;gap:15px;margin-top:20px;padding:15px}@media(max-width:768px){.audio-player{gap:10px;padding:10px}.audio-player .audio-player-title{font-size:1rem;margin-bottom:0}}.audio-player-title{align-items:center;color:#1e293b;display:flex;font-size:1.1rem;font-weight:600;gap:10px;margin-bottom:15px}.audio-player-title:before{content:"🎵";font-size:1.2rem}.tempo-control{align-items:center;display:flex;gap:10px;margin-top:15px}.tempo-control .tempo-label{color:#64748b;font-size:.9rem}.tempo-control .tempo-slider{-webkit-appearance:none;background:#e2e8f0;border-radius:2px;flex:1;height:4px;outline:none}.tempo-control .tempo-slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5100e9;border-radius:50%;cursor:pointer;height:16px;width:16px}.tempo-control .tempo-value{color:#1e293b;font-size:.9rem;font-weight:500;min-width:40px}@media(max-width:768px){.audio-player{padding:10px}.audio-player-title{font-size:1rem;margin-bottom:10px}.tempo-control{flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}.tempo-label{font-size:.8rem}.tempo-slider{flex:1;min-width:200px}.tempo-value{font-size:.8rem;min-width:35px}}