*{box-sizing:border-box;margin:0;padding:0}body{color:#e0e4ef;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0f1117;min-height:100vh;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}#root{flex-direction:column;max-width:640px;min-height:100vh;margin:0 auto;padding:16px;display:flex}button{cursor:pointer;font-family:inherit}.level-select{flex-direction:column;flex:1;display:flex}.app-title{color:#f0f4ff;text-align:center;letter-spacing:-.5px;margin:32px 0 8px;font-size:2.2rem;font-weight:700}.app-subtitle{color:#7c829d;text-align:center;margin-bottom:32px;font-size:1rem}.levels-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}@media (width<=480px){.levels-grid{grid-template-columns:1fr}}.level-card{cursor:pointer;text-align:left;background:#1a1d27;border:1px solid #2d3148;border-radius:12px;padding:16px;transition:transform .15s,border-color .15s,box-shadow .15s}.level-card:hover{border-color:var(--card-color);transform:translateY(-2px);box-shadow:0 4px 24px #0006}.level-card:active{transform:translateY(0)}.level-number{text-transform:uppercase;letter-spacing:1.5px;margin-bottom:4px;font-size:.7rem;font-weight:700}.level-name{color:#f0f4ff;margin-bottom:4px;font-size:1.1rem;font-weight:600}.level-desc{color:#7c829d;margin-bottom:6px;font-size:.8rem}.level-mnemonic{color:#6b7280;margin-bottom:6px;font-size:.75rem;font-style:italic}.level-note-count{color:#4b5563;font-size:.7rem}.flash-card-screen{flex-direction:column;flex:1;animation:.2s fadeIn;display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.top-bar{justify-content:space-between;align-items:center;padding:4px 0 8px;display:flex}.back-btn{color:#7c829d;background:0 0;border:1px solid #2d3148;border-radius:8px;padding:6px 14px;font-size:.85rem;transition:border-color .15s,color .15s}.back-btn:hover{color:#e0e4ef;border-color:#4b5563}.level-title{color:#f0f4ff;font-size:1rem;font-weight:600}.progress{color:#7c829d;font-variant-numeric:tabular-nums;font-size:.85rem}.progress-bar{background:#1a1d27;border-radius:2px;width:100%;height:3px;margin-bottom:4px;overflow:hidden}.progress-fill{background:#818cf8;border-radius:2px;height:100%;transition:width .3s}.stats-bar{justify-content:center;gap:24px;padding:6px 0;font-size:.9rem;display:flex}.stat{color:#7c829d;font-variant-numeric:tabular-nums}.staff-container{flex:1;justify-content:center;align-items:center;min-height:200px;margin:4px 0;display:flex}.staff-container canvas{display:block}.feedback{text-align:center;justify-content:center;align-items:center;height:28px;margin-bottom:12px;font-size:1rem;font-weight:600;transition:color .15s;display:flex}.feedback.correct{color:#4ade80}.feedback.wrong{color:#f87171}.answer-buttons{justify-content:center;gap:8px;padding-bottom:24px;display:flex}.answer-btn{aspect-ratio:1;color:#e0e4ef;-webkit-user-select:none;user-select:none;background:#1a1d27;border:2px solid #2d3148;border-radius:12px;flex:1;justify-content:center;align-items:center;max-width:70px;font-size:1.4rem;font-weight:700;transition:transform .1s,border-color .15s,background .15s;display:flex}.answer-btn:hover:not(:disabled){border-color:#818cf8;transform:scale(1.05)}.answer-btn:active:not(:disabled){transform:scale(.95)}.answer-btn.correct{color:#4ade80;background:#4ade8026;border-color:#4ade80}.answer-btn.wrong{color:#f87171;background:#f8717126;border-color:#f87171;animation:.4s shake}.answer-btn:disabled{cursor:default;opacity:.4}.answer-btn:disabled.correct,.answer-btn:disabled.wrong{opacity:1}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.results-screen{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;animation:.3s fadeIn;display:flex}.results-title{color:#9ca3af;text-transform:uppercase;letter-spacing:2px;font-size:1.3rem;font-weight:600}.grade{font-size:6rem;font-weight:800;line-height:1}.result-score{color:#e0e4ef;font-size:1.5rem;font-weight:600}.result-message{color:#7c829d;max-width:300px;font-size:1rem}.result-stats{color:#6b7280;flex-direction:column;gap:4px;font-size:.85rem;display:flex}.result-buttons{gap:12px;margin-top:16px;display:flex}.result-btn{border:none;border-radius:10px;padding:12px 28px;font-size:.95rem;font-weight:600;transition:transform .1s,opacity .15s}.result-btn:hover{transform:scale(1.03)}.result-btn:active{transform:scale(.97)}.result-btn.primary{color:#0f1117;background:#818cf8}.result-btn.secondary{color:#e0e4ef;background:#1a1d27;border:1px solid #2d3148}