:root{--bg-color: #1a1a1a;--text-color: #ffffff;--accent-color: #646cff;--accent-hover: #535bf2;--success-color: #4caf50;--error-color: #f44336;--surface-color: #242424;--border-radius: 12px;--transition-speed: .3s}*,*:before,*:after{box-sizing:border-box}#notation-container svg{margin:0 auto;display:block}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;background-color:var(--bg-color);color:var(--text-color);transition:background-color var(--transition-speed)}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center;width:100%;display:flex;flex-direction:column;gap:2rem}header{display:flex;flex-direction:column;align-items:center;gap:1rem}h1{font-size:3.2em;line-height:1.1;background:linear-gradient(to right,#646cff,#a56cc1);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0}.stats{display:flex;gap:2rem;font-size:1.2rem;font-weight:600;color:#888}#notation-container{background:#fff;border-radius:var(--border-radius);padding:20px;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 20px #0000004d;min-height:200px;transition:transform .2s}.note-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}button{border-radius:8px;border:1px solid transparent;padding:.8em 1.4em;font-size:1.2em;font-weight:500;font-family:inherit;background-color:var(--surface-color);cursor:pointer;transition:all .25s;color:var(--text-color);min-width:60px}button:hover{border-color:var(--accent-color);transform:translateY(-2px);box-shadow:0 4px 12px #646cff33}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}button.correct{background-color:var(--success-color);border-color:var(--success-color);animation:bounce .5s}button.incorrect{background-color:var(--error-color);border-color:var(--error-color);animation:shake .4s}#feedback{height:24px;font-weight:700}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@media(prefers-color-scheme:light){:root{--bg-color: #ffffff;--text-color: #213547;--surface-color: #f9f9f9}#notation-container{background:#fdfdfd;box-shadow:0 4px 20px #0000001a}}.hidden{display:none!important}.screen{display:flex;flex-direction:column;align-items:center;gap:2rem;animation:fadeIn .5s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.clef-selection{display:flex;gap:20px}.clef-selection button{padding:1.5rem 3rem;font-size:1.5rem;background:linear-gradient(135deg,var(--accent-color),var(--accent-hover));color:#fff;font-weight:700;border:none;box-shadow:0 10px 20px #0003}.clef-selection button:hover{transform:translateY(-5px);box-shadow:0 15px 30px #0000004d}