body{background:#1f2430;margin:0;padding:0;font-family:system-ui}html,body{min-height:100vh;margin:0;padding:0}body{background:radial-gradient(circle at top,#1f2430,#0e1016)}.app-container{min-height:100vh}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}.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}@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}}