body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;min-height:100vh}.settings-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#0006,#0009);display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:fadeIn .3s ease}.settings-modal{background:#0006;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);border-radius:20px;max-width:750px;width:90%;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 25px 50px #0000004d,0 0 0 1px #ffffff1a inset;animation:slideUp .4s cubic-bezier(.34,1.56,.64,1)}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:30px 35px;border-bottom:1px solid rgba(255,255,255,.1);background:#0003;border-radius:20px 20px 0 0}.settings-header h2{margin:0;color:#fff;font-size:1.6rem;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.3)}.close-icon{background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);font-size:1.4rem;cursor:pointer;color:#ffffffb3;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px;transition:all .3s ease}.close-icon:hover{background:#ef444433;border-color:#ef444466;color:#ff6b6b;transform:scale(1.05)}.settings-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.1);padding:0 35px;background:#0000001a}.tab{background:none;border:none;padding:18px 24px;cursor:pointer;font-size:.95rem;font-weight:500;color:#fff9;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}.tab:hover{color:#ffffffe6;background:#ffffff1a}.tab.active{color:#8b9cf7;border-bottom-color:#8b9cf7;font-weight:600;background:#667eea4d}.settings-content{flex:1;overflow-y:auto;padding:35px;background:#0000001a}.tab-content{animation:fadeIn .3s ease}.section{margin-bottom:30px}.section:last-child{margin-bottom:0}.section h3{color:#fff;font-size:1.3rem;font-weight:700;margin-bottom:18px;margin-top:0;text-shadow:0 2px 4px rgba(0,0,0,.3)}.section h4{color:#fff;font-size:1.1rem;font-weight:600;margin-bottom:15px;margin-top:0}.section strong,.radio-label strong,.layout-option strong,strong{color:#fff!important}.description{color:#fffc;font-size:.95rem;margin-bottom:24px;line-height:1.6}.preset-buttons{display:flex;flex-wrap:wrap;gap:10px}.preset-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:14px 20px;border-radius:12px;cursor:pointer;font-size:.9rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #667eea40;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.preset-button:hover{transform:translateY(-3px);box-shadow:0 8px 25px #667eea66}.range-inputs{display:flex;gap:20px;margin-bottom:15px}.input-group{flex:1}.input-group label{display:block;margin-bottom:8px;color:#fffc;font-weight:500;font-size:.95rem}.input-group select{width:100%;padding:10px;border:1px solid rgba(255,255,255,.2);background:#0000004d;color:#fff;border-radius:8px;font-size:1rem;cursor:pointer;transition:border-color .3s ease}.input-group select:focus{outline:none;border-color:#8b9cf7}.input-group select option{background:#2d3748;color:#fff}.info-text{color:#ffffffb3;font-size:.9rem;margin-top:10px;padding:10px;background:#0003;border-radius:6px}.layout-option{margin-bottom:15px}.layout-option label{display:flex;align-items:flex-start;cursor:pointer;padding:15px;border:1px solid rgba(255,255,255,.2);background:#0003;border-radius:10px;transition:all .3s ease;color:#fff}.layout-option label:hover{border-color:#8b9cf7;background:#667eea33}.layout-option label *{color:#fff!important}.layout-option input[type=radio]{margin-right:12px;margin-top:3px;cursor:pointer;width:18px;height:18px;accent-color:#667eea}.radio-label{display:flex;flex-direction:column;gap:5px}.radio-label strong{color:#fff!important;font-size:1rem}.radio-label small{color:#ffffffb3!important;font-size:.85rem}small{color:#ffffffb3}.info-box{background:#667eea1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(102,126,234,.3);border-left:4px solid #667eea;padding:20px;border-radius:12px;margin-top:24px}.info-box p{margin:0;color:#ffffffe6;font-size:.9rem;line-height:1.6}.effect-control,.sound-control{margin-bottom:25px;padding:24px;background:#0000004d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:16px;border:1px solid rgba(255,255,255,.2);transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0003}.effect-control:hover,.sound-control:hover{border-color:#667eea66;background:#0006;transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.effect-header{margin-bottom:15px}.effect-toggle{display:flex;align-items:center;cursor:pointer;font-size:1rem}.effect-toggle input[type=checkbox]{width:20px;height:20px;margin-right:12px;cursor:pointer;accent-color:#667eea}.effect-name{font-weight:600;color:#fff;font-size:1.05rem}.effect-params{margin-top:15px;padding-top:15px;border-top:2px solid #e0e0e0;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.param-control{margin-bottom:15px}.param-control:last-child{margin-bottom:0}.param-control label{display:flex;justify-content:space-between;margin-bottom:8px;color:#fffc;font-size:.9rem}.param-control label strong{color:#8b9cf7;font-weight:600}.param-control input[type=range]{width:100%;height:6px;border-radius:3px;background:linear-gradient(to right,#e0e0e0,#667eea);outline:none;cursor:pointer;-webkit-appearance:none;appearance:none}.param-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;box-shadow:0 2px 6px #667eea66;transition:all .2s ease}.param-control input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 3px 10px #667eea99}.param-control input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;border:none;box-shadow:0 2px 6px #667eea66;transition:all .2s ease}.param-control input[type=range]::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 3px 10px #667eea99}.shortcuts-list-modal{display:flex;flex-direction:column;gap:10px;margin-bottom:15px;max-height:300px;overflow-y:auto}.shortcut-item-modal{display:flex;align-items:center;gap:12px;padding:12px 15px;background:#0000004d;border-radius:10px;border:1px solid rgba(255,255,255,.2);transition:all .3s ease}.shortcut-item-modal:hover{border-color:#8b9cf7;background:#667eea33}.shortcut-key-modal{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:8px 16px;border-radius:8px;font-weight:700;font-size:1.1rem;min-width:50px;text-align:center;box-shadow:0 2px 8px #667eea4d}.shortcut-arrow-modal{color:#ffffff80;font-size:1.2rem}.shortcut-note-modal{color:#fff;font-weight:600;font-size:1rem;flex:1}.shortcut-actions-modal{display:flex;gap:5px}.edit-shortcut-btn-modal,.delete-shortcut-btn-modal{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:35px;height:35px;border-radius:8px;cursor:pointer;font-size:1rem;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.edit-shortcut-btn-modal:hover{background:#667eea;color:#fff;transform:scale(1.1)}.delete-shortcut-btn-modal:hover{background:#ff6b6b;color:#fff;transform:scale(1.1)}.no-shortcuts-modal{text-align:center;padding:30px;color:#fff9}.no-shortcuts-modal p{margin:5px 0}.no-shortcuts-modal .hint{font-size:.85rem;opacity:.8}.add-shortcut-btn-modal{width:100%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px;border-radius:10px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s ease;margin-bottom:15px}.add-shortcut-btn-modal:hover{transform:translateY(-2px);box-shadow:0 5px 20px #667eea80}.shortcut-editor-overlay-modal{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:3000;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:fadeIn .2s ease}.shortcut-editor-modal{background:#0006;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);border-radius:20px;max-width:500px;width:90%;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 25px 50px #0000004d,0 0 0 1px #ffffff1a inset;animation:slideUp .3s ease}.editor-header{padding:25px 30px;border-bottom:1px solid rgba(255,255,255,.1);background:#0003;border-radius:20px 20px 0 0;display:flex;justify-content:space-between;align-items:center}.editor-header h3{margin:0;color:#fff;font-size:1.3rem;font-weight:700}.editor-content{padding:30px;flex:1;overflow-y:auto}.editor-footer{padding:20px 30px;border-top:1px solid rgba(255,255,255,.1);background:#0003;border-radius:0 0 20px 20px;display:flex;gap:10px;justify-content:flex-end}.close-btn,.cancel-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:10px 20px;border-radius:10px;cursor:pointer;font-size:.95rem;font-weight:500;transition:all .3s ease}.close-btn:hover,.cancel-btn:hover{background:#fff3}.save-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;color:#fff;padding:10px 24px;border-radius:10px;cursor:pointer;font-size:.95rem;font-weight:600;transition:all .3s ease;box-shadow:0 4px 12px #667eea4d}.save-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.key-capture-section,.note-select-section{margin-bottom:20px}.key-capture-section label,.note-select-section label{display:block;margin-bottom:10px;color:#fff;font-weight:600;font-size:.95rem}.listening-indicator{text-align:center;padding:30px;background:#667eea33;border-radius:10px;border:2px dashed #8b9cf7}.pulse{width:60px;height:60px;margin:0 auto 15px;background:#8b9cf7;border-radius:50%;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}}.listening-indicator p{color:#8b9cf7;font-weight:600;font-size:1.1rem;margin-bottom:15px}.cancel-listen-btn{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);padding:8px 16px;border-radius:6px;cursor:pointer;font-size:.9rem;transition:all .2s ease}.cancel-listen-btn:hover{background:#fff3}.key-display{display:flex;gap:15px;align-items:center}.captured-key{flex:1;padding:15px;background:#0000004d;border:2px solid rgba(255,255,255,.2);border-radius:8px;text-align:center;font-size:1.2rem;font-weight:700;color:#8b9cf7;min-height:50px;display:flex;align-items:center;justify-content:center}.capture-key-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 20px;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:600;transition:all .3s ease;white-space:nowrap}.capture-key-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.note-select-section select{width:100%;padding:12px;border:1px solid rgba(255,255,255,.2);background:#0000004d;color:#fff;border-radius:8px;font-size:1rem;cursor:pointer;transition:border-color .3s ease}.note-select-section select:focus{outline:none;border-color:#8b9cf7}.note-select-section select option{background:#2d3748;color:#fff}.preview-box{margin-top:20px;padding:15px;background:linear-gradient(135deg,#667eea1a,#764ba21a);border-left:4px solid #667eea;border-radius:8px}.preview-box strong{color:#fff;font-size:.9rem}.preview-box p{margin:10px 0 0;color:#ffffffe6;font-size:.95rem;line-height:1.6}.preview-key,.preview-note{background:#667eea4d;padding:4px 10px;border-radius:6px;font-weight:700;color:#8b9cf7;box-shadow:0 2px 4px #0003}.key-listener{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}.settings-footer{padding:25px 35px;border-top:1px solid rgba(255,255,255,.1);background:#0003;border-radius:0 0 20px 20px}.done-button{width:100%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:16px;border-radius:12px;cursor:pointer;font-size:1.1rem;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #667eea4d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.done-button:hover{transform:translateY(-3px);box-shadow:0 8px 25px #667eea80}@media(max-width:768px){.settings-modal{width:95%;max-height:90vh}.settings-header{padding:20px}.settings-header h2{font-size:1.3rem}.settings-tabs{padding:0 20px}.tab{padding:12px 15px;font-size:.9rem}.settings-content{padding:20px}.range-inputs{flex-direction:column;gap:15px}.preset-buttons{flex-direction:column}.preset-button{width:100%}}.divider{height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,.2),transparent);margin:30px 0}.description-small{font-size:.9em;color:#ffffffb3;margin-bottom:15px;line-height:1.4}.param-hint{display:block;margin-top:5px;font-size:.85em;color:#fff9;font-style:italic}.info-box ul{margin:10px 0 0;padding-left:20px}.info-box li{margin:5px 0;color:#fffc}.sound-preset-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:24px}.sound-preset-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:16px 20px;border-radius:12px;cursor:pointer;font-size:.9rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #667eea40;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden}.sound-preset-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.sound-preset-button:hover:before{left:100%}.sound-preset-button:hover{transform:translateY(-3px);box-shadow:0 8px 25px #667eea66}.sound-preset-button:active{transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}@media(max-width:768px){.sound-preset-buttons{flex-direction:column}.sound-preset-button{width:100%;min-width:auto}}.custom-chords{width:100%;margin-top:20px}.chords-list{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.chord-item{display:flex;gap:5px;align-items:stretch}.chord-item.empty{opacity:.7}.chord-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 18px;border-radius:10px;cursor:pointer;font-size:.9rem;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:120px;box-shadow:0 4px 10px #667eea4d}.chord-button:hover{transform:translateY(-3px);box-shadow:0 6px 20px #667eea80}.chord-button:active{transform:translateY(-1px)}.chord-button.add-new{background:#fff3;border:2px dashed rgba(255,255,255,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.chord-button.add-new:hover{background:#ffffff4d;border-color:#fffc}.chord-number{font-size:1.2rem;font-weight:700;opacity:.8}.chord-name{font-weight:600;font-size:1rem}.chord-notes-count{font-size:.75rem;opacity:.8}.add-icon{font-size:2rem;opacity:.7}.add-text{font-size:.85rem;opacity:.9}.chord-actions{display:flex;flex-direction:column;gap:5px}.edit-btn,.delete-btn{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;width:35px;height:35px;border-radius:8px;cursor:pointer;font-size:1rem;transition:all .2s ease;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.edit-btn:hover{background:#ffffff4d;transform:scale(1.1)}.delete-btn:hover{background:#ff646480;transform:scale(1.1)}.chord-editor-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:2000;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:fadeIn .2s ease}.chord-editor{background:#0006;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);border-radius:20px;max-width:600px;width:90%;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 25px 50px #0000004d,0 0 0 1px #ffffff1a inset;animation:slideUp .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.chord-editor .editor-header{display:flex;justify-content:space-between;align-items:center;padding:25px 30px;border-bottom:1px solid rgba(255,255,255,.1);background:#0003;border-radius:20px 20px 0 0}.chord-editor .editor-header h3{margin:0;color:#fff;font-size:1.3rem;font-weight:700}.chord-editor .close-btn{background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);font-size:1.4rem;cursor:pointer;color:#ffffffb3;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px;transition:all .3s ease}.chord-editor .close-btn:hover{background:#ef444433;border-color:#ef444466;color:#ff6b6b;transform:scale(1.05)}.chord-editor .editor-content{flex:1;overflow-y:auto;padding:30px}.input-section{margin-bottom:25px}.input-section label{display:block;margin-bottom:8px;color:#fff;font-weight:600;font-size:.95rem}.input-section input{width:100%;padding:12px;border:1px solid rgba(255,255,255,.2);background:#0000004d;color:#fff;border-radius:8px;font-size:1rem;transition:border-color .3s ease}.input-section input:focus{outline:none;border-color:#8b9cf7}.input-section input::placeholder{color:#fff6}.notes-section label{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#fff;font-weight:600;font-size:.95rem}.selected-count{color:#8b9cf7;font-size:.9rem}.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:8px;max-height:250px;overflow-y:auto;padding:10px;background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:8px}.note-selector{padding:10px;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;font-size:.85rem;font-weight:600;transition:all .2s ease;background:#ffffff1a;color:#fff}.note-selector.white{background:#ffffff26;color:#fff}.note-selector.black{background:#0006;color:#fff}.note-selector:hover{transform:scale(1.05);box-shadow:0 2px 8px #0000004d;background:#fff3}.note-selector.selected{border-color:#8b9cf7;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transform:scale(1.05)}.selected-notes-preview{margin-top:20px;padding:15px;background:#667eea1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(102,126,234,.3);border-radius:12px;border-left:4px solid #667eea}.selected-notes-preview strong{color:#fff;font-size:.9rem}.preview-notes{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.chord-editor .preview-note{background:#667eea4d;padding:6px 12px;border-radius:6px;font-size:.85rem;font-weight:600;color:#8b9cf7;box-shadow:0 2px 4px #0003}.no-notes{margin:0;color:#fff9;font-style:italic;font-size:.9rem}.chord-editor .editor-footer{padding:20px 30px;border-top:1px solid rgba(255,255,255,.1);background:#0003;border-radius:0 0 20px 20px;display:flex;gap:10px}.chord-editor .cancel-btn,.chord-editor .save-btn{flex:1;padding:12px;border:none;border-radius:10px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s ease}.chord-editor .cancel-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff}.chord-editor .cancel-btn:hover{background:#fff3}.chord-editor .save-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 12px #667eea4d}.chord-editor .save-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}@media(max-width:768px){.chords-list{gap:8px}.chord-button{min-width:100px;padding:10px 14px;font-size:.85rem}.chord-number{font-size:1rem}.chord-name{font-size:.9rem}.edit-btn,.delete-btn{width:30px;height:30px;font-size:.9rem}.notes-grid{grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:6px}.editor-content{padding:20px}}.note-recorder{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:15px;padding:25px;margin:20px auto;max-width:800px;box-shadow:0 10px 30px #0000004d;color:#fff}.note-recorder h2{margin:0 0 20px;font-size:24px;text-align:center}.recorder-controls{display:flex;flex-direction:column;gap:15px}.control-group{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}.control-group button{padding:12px 24px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 6px #0003}.record-btn{background:#ff4757;color:#fff}.record-btn.recording{background:#ee5a6f;animation:pulse-red 1.5s infinite}@keyframes pulse-red{0%,to{opacity:1}50%{opacity:.7}}.play-btn{background:#2ecc71;color:#fff}.play-btn:hover:not(:disabled){background:#27ae60;transform:translateY(-2px)}.edit-btn{background:#3498db;color:#fff}.edit-btn:hover:not(:disabled){background:#2980b9;transform:translateY(-2px)}.clear-btn{background:#e74c3c;color:#fff}.clear-btn:hover:not(:disabled){background:#c0392b;transform:translateY(-2px)}.audio-record-btn{background:#f39c12;color:#fff;font-size:18px}.audio-record-btn:hover:not(:disabled){background:#e67e22;transform:translateY(-2px)}.export-btn{background:#9b59b6;color:#fff}.export-btn:hover:not(:disabled){background:#8e44ad;transform:translateY(-2px)}.import-btn-wrapper{display:inline-block}.import-btn{background:#1abc9c;color:#fff}.import-btn:hover:not(:disabled){background:#16a085;transform:translateY(-2px)}.control-group button:disabled{opacity:.5;cursor:not-allowed}.control-group label{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600}.control-group input[type=range]{width:150px;cursor:pointer}.notes-info{margin-top:20px;padding:15px;background:#ffffff1a;border-radius:8px}.info-row{display:flex;justify-content:space-around;align-items:center;margin:8px 0;font-size:14px;flex-wrap:wrap;gap:15px}.info-row span{display:flex;align-items:center;gap:5px}.info-row strong{color:gold;font-size:16px}.notes-preview{margin-top:20px;padding:15px;background:#ffffff0d;border-radius:8px;max-height:300px;overflow-y:auto}.notes-preview h3{margin:0 0 15px;font-size:16px;color:gold}.notes-list{display:flex;flex-direction:column;gap:8px}.note-group{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#ffffff1a;border-radius:6px;font-size:14px}.timestamp{color:#a0a0a0;font-family:Courier New,monospace;min-width:60px}.notes{flex:1;font-weight:600}.notes.chord{color:gold}.more-notes{text-align:center;padding:10px;color:#a0a0a0;font-style:italic}.recording-indicator{margin-top:20px;text-align:center;font-size:18px;font-weight:600}.pulse{display:inline-block;animation:pulse 1s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.edit-modal{position:fixed;inset:0;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.edit-content{background:#fff;color:#333;padding:30px;border-radius:15px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto}.edit-content h3{margin:0 0 10px;color:#667eea}.edit-help{font-size:14px;color:#666;margin-bottom:15px}.edit-content textarea{width:100%;padding:12px;border:2px solid #ddd;border-radius:8px;font-family:Courier New,monospace;font-size:14px;resize:vertical;margin-bottom:15px}.edit-buttons{display:flex;gap:10px;justify-content:flex-end}.edit-buttons button{padding:10px 20px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.edit-buttons button:first-child{background:#2ecc71;color:#fff}.edit-buttons button:first-child:hover{background:#27ae60}.edit-buttons button:last-child{background:#e74c3c;color:#fff}.edit-buttons button:last-child:hover{background:#c0392b}@media(max-width:768px){.note-recorder{padding:20px;margin:15px}.control-group button{padding:10px 18px;font-size:14px}.control-group label{font-size:14px}.control-group input[type=range]{width:120px}}*{margin:0;padding:0;box-sizing:border-box}.app{min-height:100vh;background:radial-gradient(circle at 20% 80%,rgba(120,119,198,.3) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,119,198,.3) 0%,transparent 50%),linear-gradient(135deg,#667eea,#764ba2);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;font-family:Inter,Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.header{text-align:center;margin-bottom:50px;color:#fff}.header h1{font-size:3rem;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.3);color:#fff}.instructions{font-size:1.1rem;opacity:.95;font-weight:400;margin-bottom:20px;text-shadow:0 2px 4px rgba(0,0,0,.2)}.settings-button{background:#ffffff26;border:1px solid rgba(255,255,255,.3);color:#fff;padding:14px 28px;border-radius:16px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 4px 12px #00000026}.settings-button:hover{background:#ffffff40;border-color:#ffffff80;transform:translateY(-3px);box-shadow:0 8px 25px #00000040}.piano-container{width:100%;padding:10px;display:flex;justify-content:center}.piano-wrapper{display:flex;flex-direction:column;gap:15px;max-width:100%}.piano-row{overflow-x:auto;display:flex;justify-content:center}.piano{display:flex;position:relative;background:#1a1a1a;padding:30px 20px 20px;border-radius:15px;box-shadow:0 20px 60px #00000080;min-width:fit-content}.piano-wrapper.rows-2 .key.white,.piano-wrapper.rows-3 .key.white{width:50px;height:240px}.piano-wrapper.rows-2 .key.black,.piano-wrapper.rows-3 .key.black{width:35px;height:155px;margin:0 -18px}.key{position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .05s ease;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:15px;overflow:visible}.key.white{width:60px;height:280px;background:#fff;border:2px solid #333;border-radius:0 0 8px 8px;margin:0 2px;z-index:1}.key.white:hover{background:#f0f0f0}.key.white.active{background:linear-gradient(135deg,#bd93f9,#8b5cf6);transform:translateY(3px) scale(.98);box-shadow:inset 0 5px 15px #0000004d,0 0 30px #bd93f9cc,0 0 60px #8b5cf699;animation:keyPressWhite .3s ease-out}.key.black{width:40px;height:180px;background:linear-gradient(to bottom,#2a2a2a,#000);border:2px solid #000;border-radius:0 0 6px 6px;margin:0 -21px;z-index:2;color:#fff}.key.black:hover{background:linear-gradient(to bottom,#3a3a3a,#1a1a1a)}.key.black.active{background:linear-gradient(to bottom,#bd93f9,#8b5cf6);transform:translateY(3px) scale(.98);box-shadow:inset 0 5px 15px #000000b3,0 0 30px #bd93f9cc,0 0 60px #8b5cf699;animation:keyPressBlack .3s ease-out}.key-label{font-size:.9rem;font-weight:700;opacity:.6;margin-bottom:5px}.note-label{font-size:.75rem;opacity:.4}.key.black .key-label,.key.black .note-label{color:#fff}@media(max-width:768px){.header h1{font-size:2rem}.settings-button{font-size:.9rem;padding:10px 18px}.piano{padding:20px 10px 10px}.key.white{width:45px;height:220px}.key.black{width:30px;height:140px;margin:0 -16px}.piano-wrapper.rows-2 .key.white,.piano-wrapper.rows-3 .key.white{width:40px;height:200px}.piano-wrapper.rows-2 .key.black,.piano-wrapper.rows-3 .key.black{width:28px;height:130px;margin:0 -15px}.key-label{font-size:.75rem}.note-label{font-size:.65rem}}@media(max-width:480px){.key.white{width:35px;height:180px}.key.black{width:25px;height:120px;margin:0 -13px}.piano-wrapper.rows-2 .key.white,.piano-wrapper.rows-3 .key.white{width:32px;height:160px}.piano-wrapper.rows-2 .key.black,.piano-wrapper.rows-3 .key.black{width:22px;height:105px;margin:0 -12px}}@keyframes keyPressWhite{0%{transform:translateY(0) scale(1)}50%{transform:translateY(4px) scale(.96)}to{transform:translateY(3px) scale(.98)}}@keyframes keyPressBlack{0%{transform:translateY(0) scale(1)}50%{transform:translateY(4px) scale(.96)}to{transform:translateY(3px) scale(.98)}}.ripple{position:absolute;border-radius:50%;background:radial-gradient(circle,#bd93f9cc,#8b5cf600 70%);pointer-events:none;animation:rippleEffect .8s ease-out;z-index:10}@keyframes rippleEffect{0%{width:0;height:0;opacity:1}to{width:200px;height:200px;opacity:0}}.particle{position:absolute;pointer-events:none;border-radius:50%;z-index:100;animation:particleFloat 1s ease-out forwards}@keyframes particleFloat{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}.light-burst{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;border-radius:50%;pointer-events:none;z-index:5;animation:lightBurst .6s ease-out}@keyframes lightBurst{0%{box-shadow:0 0 #bd93f9e6,0 0 #8b5cf6b3;opacity:1}50%{box-shadow:0 0 40px 20px #bd93f9b3,0 0 80px 40px #8b5cf680;opacity:.8}to{box-shadow:0 0 60px 30px #bd93f900,0 0 120px 60px #8b5cf600;opacity:0}}.note-float{position:absolute;font-size:24px;pointer-events:none;z-index:100;animation:noteFloatUp 1.5s ease-out forwards;font-weight:700;text-shadow:0 0 10px rgba(189,147,249,.9);color:#bd93f9}@keyframes noteFloatUp{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-150px) scale(1.5);opacity:0}}.key.white:hover{background:linear-gradient(135deg,#fff,#f5f5f5);box-shadow:0 5px 15px #8b5cf666;transform:translateY(-1px)}.key.black:hover{background:linear-gradient(to bottom,#3a3a3a,#1a1a1a);box-shadow:0 5px 15px #bd93f966;transform:translateY(-1px)}.piano{overflow:visible}.piano-row{overflow-x:auto;overflow-y:visible}