body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--bg-gradient-from:#f0f5fa;--bg-gradient-to:#e0eaf5;--text-primary:#334155;--text-secondary:#64748b;--title-gradient-from:#1e40af;--title-gradient-to:#3b82f6;--card-bg:#fff;--card-border:#dbeafeb3;--card-shadow:#3b82f614;--button-hover-bg:#dbeafe;--button-hover-border:#93c5fd;--button-hover-text:#1e40af;--hotkey-text:#64748b;--correct-color:#16a34a;--correct-bg:#f0fdf4;--correct-border:#4ade80;--incorrect-color:#dc2626;--incorrect-bg:#fef2f2;--incorrect-border:#f87171;--config-icon-color:#3b82f6;--accent-blue:#3b82f6;--accent-blue-hover:#2563eb;--input-bg:#f8fafc;--divider-color:#dbeafe80;--theme-toggle-bg:#e2e8f0;--theme-toggle-icon:#94a3b8}[data-theme=dark]{--bg-gradient-from:#0f172a;--bg-gradient-to:#1e293b;--text-primary:#e2e8f0;--text-secondary:#94a3b8;--title-gradient-from:#60a5fa;--title-gradient-to:#93c5fd;--card-bg:#1e293b;--card-border:#334155b3;--card-shadow:#0003;--button-hover-bg:#334155;--button-hover-border:#475569;--button-hover-text:#93c5fd;--hotkey-text:#94a3b8;--correct-color:#4ade80;--correct-bg:#064e3b;--correct-border:#10b981;--incorrect-color:#f87171;--incorrect-bg:#7f1d1d;--incorrect-border:#ef4444;--config-icon-color:#60a5fa;--accent-blue:#60a5fa;--accent-blue-hover:#93c5fd;--input-bg:#334155;--divider-color:#334155b3;--theme-toggle-bg:#334155;--theme-toggle-icon:#f8fafc}#options button,#rangeStaffContainer,#score,#staveContainer,#theme-toggle,.App,.chip,.footer-link,.github-link,.hotkey-text,.range-adjuster,.settings-card,body,button,h1,input,select{transition:background .3s ease,background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}body{background-color:#f0f5fa;background-image:linear-gradient(120deg,#f0f5fa,#e0eaf5);background-image:linear-gradient(120deg,var(--bg-gradient-from) 0,var(--bg-gradient-to) 100%);color:#334155;color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;margin:0;min-height:100vh;padding:0}.App{flex-direction:column;margin:20px auto;max-width:900px;padding:40px 30px;position:relative;text-align:center}#theme-toggle,.App{align-items:center;display:flex}#theme-toggle{background:#e2e8f0;background:var(--theme-toggle-bg);border:none;border-radius:50%;box-shadow:0 2px 10px #0000001a;cursor:pointer;height:45px;justify-content:center;position:absolute;right:20px;top:20px;width:45px;z-index:10}#theme-toggle svg{fill:#94a3b8;fill:var(--theme-toggle-icon);height:22px;width:22px}h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#1e40af,#3b82f6);background:linear-gradient(135deg,var(--title-gradient-from) 0,var(--title-gradient-to) 100%);-webkit-background-clip:text;color:#1e40af;color:var(--title-gradient-from);font-size:2.7rem;font-weight:800;letter-spacing:-.5px;margin-bottom:.5rem}#score{background:#0000;border:none;border-radius:0;box-shadow:none;color:#334155;color:var(--text-primary);font-size:1.6rem;font-weight:700;margin-bottom:2.5rem;padding:.5rem 0;position:relative}#score:after{background:linear-gradient(90deg,#3b82f6,#3b82f6);background:linear-gradient(90deg,var(--accent-blue) 0,var(--title-gradient-to) 100%);border-radius:2px;bottom:-5px;content:"";height:3px;left:50%;position:absolute;transform:translateX(-50%);width:60px}#rangeStaffContainer,#staveContainer{align-items:center;background-color:#fff;background-color:var(--card-bg);border:1px solid #dbeafeb3;border-radius:18px;box-shadow:0 8px 20px #3b82f60f;display:flex;justify-content:center;margin:25px auto;max-width:640px;min-height:140px;overflow:hidden;padding:25px;transition:transform .2s ease,box-shadow .2s ease;width:100%}#staveContainer:hover{box-shadow:0 10px 25px #3b82f614;box-shadow:0 10px 25px var(--card-shadow);transform:translateY(-3px)}#rangeStaffContainer svg,#staveContainer svg{background-color:initial!important;display:block;margin:0 auto;max-width:100%}#options{flex-wrap:nowrap;gap:10px;margin:35px 0;max-width:740px;overflow-x:auto;padding:10px 5px;width:100%}#options,#options button{display:flex;justify-content:center}#options button{align-items:center;background-color:#fff;background-color:var(--card-bg);border:1px solid #dbeafeb3;border:1px solid var(--card-border);border-radius:12px;box-shadow:0 4px 12px #3b82f614;box-shadow:0 4px 12px var(--card-shadow);color:#334155;color:var(--text-primary);flex:1 1;flex-direction:column;font-weight:600;height:75px;max-width:110px;min-width:75px;padding:14px 10px;transition:all .25s ease;white-space:nowrap}#options button .note-text{font-size:1.05rem;margin-bottom:4px}#options button .hotkey-text{color:#64748b;color:var(--hotkey-text);font-size:.8rem;font-weight:500}#options button:hover:not(:disabled){background-color:#dbeafe;background-color:var(--button-hover-bg);border-color:#93c5fd;border-color:var(--button-hover-border);transform:translateY(-3px)}#options button:hover:not(:disabled),#options button:hover:not(:disabled) .hotkey-text{color:#1e40af;color:var(--button-hover-text)}.range-adjuster{background-color:#fff;background-color:var(--card-bg);border:1px solid #dbeafeb3;border:1px solid var(--card-border);border-radius:18px;box-shadow:0 8px 20px #3b82f614;box-shadow:0 8px 20px var(--card-shadow);box-sizing:border-box;margin:35px 0;max-width:740px;padding:28px 25px;width:100%}.range-label-title{color:#334155;color:var(--text-primary);display:block;font-size:1.25rem;font-weight:700;margin-bottom:18px;text-align:center}#rangeStaffContainer{margin-bottom:15px;margin-top:0}.range-buttons{align-items:center;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:20px}.range-buttons button{background-color:#f8fafc;background-color:var(--input-bg);border:1px solid #dbeafeb3;border:1px solid var(--card-border);border-radius:12px;box-shadow:0 4px 12px #3b82f614;box-shadow:0 4px 12px var(--card-shadow);color:#334155;color:var(--text-primary);font-weight:600;transition:all .25s ease}.range-buttons button:hover:not(:disabled){background-color:#dbeafe;background-color:var(--button-hover-bg);border-color:#93c5fd;border-color:var(--button-hover-border);color:#1e40af;color:var(--button-hover-text)}button{background-color:#fff;background-color:var(--card-bg);border:1px solid #dbeafeb3;border:1px solid var(--card-border);border-radius:12px;box-shadow:0 4px 12px #3b82f614;box-shadow:0 4px 12px var(--card-shadow);color:#334155;color:var(--text-primary);cursor:pointer;font-size:1rem;font-weight:600;margin:5px;padding:12px 24px;transition:all .25s ease;-webkit-user-select:none;user-select:none}button:hover:not(:disabled){background-color:#dbeafe;background-color:var(--button-hover-bg);border-color:#93c5fd;border-color:var(--button-hover-border);box-shadow:0 6px 16px #3b82f614;box-shadow:0 6px 16px var(--card-shadow);color:#1e40af;color:var(--button-hover-text);transform:translateY(-3px)}button:active:not(:disabled){box-shadow:0 4px 8px #3b82f614;box-shadow:0 4px 8px var(--card-shadow);transform:translateY(-1px)}button:disabled{box-shadow:none;cursor:not-allowed;opacity:.6;transform:none}button.correct{animation:correctAnimation .4s ease-out;background-color:#f0fdf4;background-color:var(--correct-bg);border-color:#4ade80;border-color:var(--correct-border);color:#16a34a;color:var(--correct-color)}button.incorrect{animation:incorrectAnimation .5s ease-out;background-color:#fef2f2;background-color:var(--incorrect-bg);border-color:#f87171;border-color:var(--incorrect-border);color:#dc2626;color:var(--incorrect-color)}@keyframes correctAnimation{50%{background-color:#f0fdf4;background-color:var(--correct-bg);box-shadow:0 0 20px rgba(#16a34a,.3);box-shadow:0 0 20px rgba(var(--correct-color),.3);transform:scale(1.06)}}@keyframes incorrectAnimation{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-5px)}20%,40%,60%,80%{transform:translateX(5px)}}#config-button{background:#fff;background:var(--card-bg);border:1px solid #dbeafeb3;border:1px solid var(--card-border);border-radius:50%;box-shadow:0 6px 16px #3b82f614;box-shadow:0 6px 16px var(--card-shadow);cursor:pointer;line-height:0;margin-bottom:16px;margin-top:16px;padding:12px;transition:all .3s ease}#config-button:hover:not(:disabled){background-color:#dbeafe;background-color:var(--button-hover-bg);border-color:#93c5fd;border-color:var(--button-hover-border);box-shadow:0 6px 20px #3b82f614;box-shadow:0 6px 20px var(--card-shadow);transform:rotate(30deg)}#config-button:disabled{background-color:initial;opacity:.5;transform:none}#config-button svg{fill:#3b82f6;fill:var(--config-icon-color);display:block;height:24px;width:24px}#config-button.animating{animation:spin .5s linear}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.settings-card{align-items:center;background:#fff;background:var(--card-bg);border:1px solid #dbeafeb3;border:1px solid var(--card-border);border-radius:24px;box-shadow:0 10px 30px #3b82f614;box-shadow:0 10px 30px var(--card-shadow);display:flex;flex-direction:column;margin:40px auto 24px;max-width:450px;padding:35px 30px}.settings-card h2{color:#1e40af;color:var(--title-gradient-from);font-size:1.8rem;font-weight:700;margin-bottom:32px;margin-top:0;text-align:center}.settings-section{align-items:center;display:flex;flex-direction:column;margin-bottom:30px;width:100%}.settings-section label{color:#334155;color:var(--text-primary);display:block;font-size:1.1rem;font-weight:600;margin-bottom:10px}.settings-section select{-webkit-appearance:none;appearance:none;background:#f8fafc;background:var(--input-bg);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 15px center;background-repeat:no-repeat;background-size:16px;border:1px solid #dbeafeb3;border:1px solid var(--card-border);border-radius:12px;box-shadow:0 4px 12px #3b82f614;box-shadow:0 4px 12px var(--card-shadow);color:#334155;color:var(--text-primary);cursor:pointer;font-size:1rem;font-weight:500;margin-top:6px;padding:12px 16px;transition:all .25s ease;width:220px}.settings-section select:focus{border:1.5px solid #3b82f6;border:1.5px solid var(--accent-blue);box-shadow:0 0 0 3px #60a5fa33;outline:none}.hotkey-chips{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:12px}.chip{align-items:center;background:#f8fafc;background:var(--input-bg);border:1px solid #dbeafeb3;border:1px solid var(--card-border);border-radius:16px;box-shadow:0 4px 12px #3b82f614;box-shadow:0 4px 12px var(--card-shadow);color:#334155;color:var(--text-primary);display:flex;font-size:1rem;font-weight:600;padding:10px 18px;transition:all .2s ease}.chip:hover{box-shadow:0 6px 16px #3b82f614;box-shadow:0 6px 16px var(--card-shadow);transform:translateY(-2px)}.chip button{background:none;border:none;border-radius:50%;box-shadow:none;color:#334155;color:var(--text-primary);cursor:pointer;font-size:1.1em;margin-left:10px;padding:3px 7px;transition:all .2s ease}.chip button.edit-key-btn{color:#3b82f6;color:var(--accent-blue);font-size:.9em;margin-left:5px}.chip button.edit-key-btn:hover{color:#1e40af;color:var(--button-hover-text)}.chip button.edit-key-btn:hover,.chip button:hover{background:#dbeafe;background:var(--button-hover-bg)}.chip button:hover{box-shadow:none;transform:none}.add-hotkey,.cancel-config-button{background:#3b82f6;border:none;border-radius:12px;box-shadow:0 6px 16px #3b82f614;box-shadow:0 6px 16px var(--card-shadow);color:#fff;cursor:pointer;font-size:1rem;font-weight:600;margin-top:16px;padding:12px 24px;transition:all .25s ease}.add-hotkey:hover,.cancel-config-button:hover{background:#2563eb;box-shadow:0 8px 20px #3b82f614;box-shadow:0 8px 20px var(--card-shadow);transform:translateY(-3px)}.cancel-config-button{background:#f8fafc;background:var(--input-bg);border:1px solid #dbeafeb3;border:1px solid var(--card-border);color:#334155;color:var(--text-primary);margin-top:20px}.cancel-config-button:hover{background:#dbeafe;background:var(--button-hover-bg);border-color:#93c5fd;border-color:var(--button-hover-border);color:#1e40af;color:var(--button-hover-text)}.footer-link{border-top:1px solid #dbeafe80;border-top:1px solid var(--divider-color);margin-top:40px;padding-top:20px;text-align:center;width:100%}.github-link{align-items:center;border-radius:50%;color:#64748b;color:var(--text-secondary);display:inline-flex;padding:10px;text-decoration:none;transition:all .2s ease}.github-link:hover{background-color:#f8fafc;background-color:var(--input-bg);color:#3b82f6;color:var(--accent-blue);transform:translateY(-2px)}.github-link svg{fill:currentColor;height:26px;transition:transform .3s ease;width:26px}.github-link:hover svg{transform:rotate(5deg)}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}@media (max-width:768px){.App{margin:15px auto;padding:25px 15px}h1{font-size:2.2rem}#score{font-size:1.7rem}#options{gap:8px;max-width:95%;padding:8px 2px}#options button{font-size:.95rem;height:65px;max-width:90px;min-width:65px;padding:10px 8px}button{font-size:.95rem;padding:10px 18px}#rangeStaffContainer,#staveContainer{min-height:100px;padding:15px}.range-adjuster{max-width:95%;padding:20px 15px}.settings-card{max-width:95%;padding:25px 20px}}@media (max-width:480px){.App{margin:10px auto;padding:15px 10px}h1{font-size:1.9rem}#score{font-size:1.5rem;padding:.6rem 1.5rem}#options{gap:6px;max-width:100%;padding:5px 0}#options button{font-size:.9rem;height:60px;max-width:70px;min-width:40px;padding:8px 4px}#options button .note-text{font-size:.95rem;margin-bottom:2px}#options button .hotkey-text{font-size:.7rem}button{font-size:.9rem;padding:10px 16px}#rangeStaffContainer,#staveContainer{border-radius:14px;padding:12px}.range-adjuster{border-radius:14px;max-width:100%;padding:16px 12px}.range-buttons{gap:8px}.range-label{flex-basis:100%;font-weight:600;margin:10px 5px;text-align:center}.settings-card{border-radius:16px;max-width:100%;padding:20px 15px}.chip{font-size:.95rem;padding:8px 14px}.settings-section select{width:100%}.add-hotkey,.cancel-config-button{padding:10px 20px}}#theme-button{align-items:center;background:#e2e8f0;background:var(--theme-toggle-bg);border:none;border-radius:50%;box-shadow:0 2px 10px #0000001a;color:#94a3b8;color:var(--theme-toggle-icon);cursor:pointer;display:flex;font-size:20px;height:45px;justify-content:center;position:absolute;right:20px;top:20px;transition:all .3s ease;width:45px;z-index:10}#theme-button:hover{background:#dbeafe;background:var(--button-hover-bg);transform:rotate(15deg)}
/*# sourceMappingURL=main.70b28aa0.css.map*/