: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;width:100%;max-width:800px;margin:0 auto}.note-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:2rem}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{position:relative;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;overflow:hidden;z-index:1}.clef-selection button .label{position:relative;z-index:2}.clef-selection button:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:6rem;opacity:.15;color:#fff;z-index:1;pointer-events:none;font-family:Times New Roman,serif;line-height:1}#btn-treble:before{content:"𝄞"}#btn-bass:before{content:"𝄢";font-size:5rem}.clef-selection button:hover{transform:translateY(-5px);box-shadow:0 15px 30px #0000004d}.piano-keyboard{position:relative;display:flex;justify-content:center;margin:2rem auto 0;background:#333;padding:10px;border-radius:8px;width:100%;max-width:800px}.key{position:relative;cursor:pointer;border-radius:0 0 4px 4px;-webkit-user-select:none;user-select:none;transition:all .1s}.key.white{flex:1;height:180px;background:#fff;border:1px solid #ccc;margin:0 2px;z-index:1;min-width:0}.key.white:active,.key.white.active{background:#eee;transform:translateY(2px);border-bottom:3px solid #ddd}.key.black{width:4.5%;height:110px;background:#000;position:absolute;top:0;z-index:2;border-radius:0 0 4px 4px}.key.black:active,.key.black.active{background:#222;transform:translateY(2px)}.input-toggle{margin-top:1rem;display:flex;justify-content:center;gap:1rem}@media(max-width:600px){.input-toggle,.piano-keyboard{display:none!important}.note-buttons{display:flex!important}}.toggle-btn{background:transparent;border:1px solid var(--accent-color);color:var(--text-color);padding:.5rem 1rem;font-size:.9rem;min-width:unset}.toggle-btn.active{background:var(--accent-color);color:#fff}.ad-container{margin-top:2rem;min-height:100px;width:100%;background:#f0f0f0;display:flex;justify-content:center;align-items:center;color:#888;border-radius:var(--border-radius)}footer{margin-top:2rem;padding-bottom:2rem;font-size:.8rem;color:#888}footer a{color:#888;text-decoration:none;margin:0 .5rem}footer a:hover{text-decoration:underline;color:var(--accent-color)}.content{text-align:left;max-width:800px;margin:0 auto;line-height:1.6}.content h2{margin-top:2rem;border-bottom:1px solid #ddd;padding-bottom:.5rem}