.app{background:#fff;border-radius:20px;padding:40px;box-shadow:0 20px 60px #0000004d}h1{text-align:center;color:#333;margin-bottom:10px;font-size:2.5rem}.feedback-container{min-height:60px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}.score-board{text-align:center;margin-bottom:30px;font-size:1.2rem;color:#555}.score-board p{margin:5px 0}.percentage{font-size:1rem;color:#667eea;font-weight:700}.feedback{text-align:center;font-size:1.5rem;font-weight:700;padding:10px 25px;border-radius:10px;animation:fadeInSmooth .3s ease-in}.feedback.correct{color:#10b981;background:#d1fae5}.feedback.wrong{color:#ef4444;background:#fee2e2}.instruction{text-align:center;color:#666;margin-top:20px;font-style:italic}.game-over-container{text-align:center;padding:40px;margin-top:30px}.game-over-container h2{color:#667eea;font-size:1.8rem;margin-bottom:20px}.final-score{font-size:3rem;font-weight:700;color:#333;margin:20px 0}.final-percentage{font-size:2rem;color:#667eea;font-weight:700;margin-bottom:30px}.restart-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:15px 40px;font-size:1.2rem;font-weight:700;border-radius:10px;cursor:pointer;transition:transform .2s,box-shadow .2s}.restart-button:hover{transform:translateY(-2px);box-shadow:0 10px 25px #667eea66}.restart-button:active{transform:translateY(0)}@keyframes fadeInSmooth{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.staff-container{display:flex;justify-content:center;margin:30px 0;background:#f9fafb;border-radius:10px;padding:20px}svg{max-width:100%;height:auto}.piano-container{margin:30px 0}.piano-keys{display:flex;justify-content:center;gap:8px;margin-bottom:10px}.piano-key{width:70px;height:200px;background:linear-gradient(to bottom,#fff,#f5f5f5);border:2px solid #333;border-radius:0 0 8px 8px;cursor:pointer;transition:all .1s ease;display:flex;align-items:flex-end;justify-content:center;padding-bottom:20px;box-shadow:0 4px 6px #0000001a}.piano-key:hover:not(:disabled){background:linear-gradient(to bottom,#f0f0f0,#e0e0e0);transform:translateY(2px)}.piano-key:active:not(:disabled){background:linear-gradient(to bottom,#e0e0e0,#d0d0d0);transform:translateY(4px);box-shadow:0 2px 3px #0000001a}.piano-key:disabled{opacity:.6;cursor:not-allowed}.note-label{font-size:1.5rem;font-weight:700;color:#333;-webkit-user-select:none;user-select:none}.piano-label{text-align:center;color:#666;font-size:.9rem;margin-top:10px}*{margin:0;padding:0;box-sizing:border-box}body{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;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;justify-content:center;align-items:center}#root{width:100%;max-width:800px;padding:20px}