body{background:radial-gradient(circle at top,#1f2430,#0e1016);margin:0;padding:0;font-family:system-ui}html,body{min-height:100vh;margin:0;padding:0}.app-container{min-height:100dvh}body{color:#fff;text-align:center;background:radial-gradient(circle at top,#1f2430,#0e1016);font-family:system-ui}.title{margin-top:30px;font-size:48px;font-weight:700}.levels button{color:#fff;cursor:pointer;background:#3a7cff;border:none;border-radius:6px;margin:6px;padding:8px 16px}.level-container{width:100%;max-width:600px;margin:auto;padding:20px}.score-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:20px;font-size:18px;font-weight:600;display:flex}.controls-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;margin-bottom:15px;display:flex}.control-group{align-items:center;gap:8px;display:flex}.control-group label{font-weight:600}.control-group select{border:none;border-radius:6px;padding:6px 8px}.note-grid{grid-template-columns:repeat(7,70px);justify-content:center;gap:12px;margin-top:25px;display:grid}.note-btn{color:#222;cursor:pointer;background:#e5e5e5;border:none;border-radius:8px;height:55px;padding:12px 18px;font-size:18px;font-weight:600;transition:all .1s}.note-btn:hover{color:#fff;background:#4f8cff;transform:translateY(-2px)}.note-btn.correct{color:#fff;background:#4caf50}.note-btn.wrong{color:#fff;background:#e53935}.note-btn p{opacity:0;margin:0;padding:0;display:none}.note-btn:hover p{opacity:100;color:#c1cfff;font-size:small;font-weight:100;display:block}@media (width<=480px){.note-grid{grid-template-columns:repeat(7,42px);justify-content:center;gap:6px}.note-btn{border-radius:6px;padding:8px;font-size:14px}}.play-btn{color:#000;cursor:pointer;background:#fff;border:none;border-radius:6px;padding:6px 8px;transition:all .2s}.play-btn:hover{background:#c1cfff}.feedback{min-height:24px;margin-bottom:30px;font-size:18px}