*{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}.App{width:100%;max-width:64rem;min-height:100vh;margin:0 auto;padding:1rem}.morse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.8rem,1fr));gap:.5rem;margin:1rem 0}.morse-cell{display:flex;flex-direction:column;align-items:center;padding:.5rem;border:1px solid #ccc;border-radius:.5rem;cursor:default}.morse-cell img{width:5.5rem;height:4.5rem;object-fit:cover;object-position:top;background-color:#dc5041;border-radius:.5rem}.morse-cell .letter{display:inline-block;font-weight:700;font-size:1.2rem;padding-bottom:.2rem}.morse-cell .mnemonic{display:inline-block;padding-top:.4rem;font-family:monospace;font-size:.85rem;color:#555}.morse-cell.fluency-green{background-color:#a8e6a3}.morse-cell.fluency-yellow{background-color:#fff3a3}.btn{display:inline-block;padding:.75rem 1.5rem;font-size:1rem;border:none;border-radius:.5rem;cursor:pointer;text-decoration:none;color:#fff;background:#4a90d9}.btn:hover{background:#357abd}.btn-back{background:#888}.btn-back:hover{background:#666}.config-screen{display:flex;flex-direction:column;gap:1.5rem;margin-top:1rem}.config-group{display:flex;flex-direction:column;gap:.5rem}.config-group label{font-weight:700;font-size:1.1rem}.toggle-group{display:flex;gap:0;border-radius:.5rem;overflow:hidden;border:2px solid #4a90d9;width:fit-content}.toggle-group button{padding:.75rem 1.5rem;border:none;background:#fff;cursor:pointer;font-size:1rem;color:#333}.toggle-group button.active{background:#4a90d9;color:#fff}.exercise-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.exercise-type{font-size:1.2rem;font-weight:700;text-transform:capitalize;text-align:center}.exercise-progress{color:#888;font-size:.9rem;text-align:center;margin-bottom:.5rem}.exercise-prompt{font-size:2rem;font-weight:700;text-align:center;padding:2rem 0;font-family:monospace;word-break:break-all}.exercise-input{width:100%;padding:1rem;font-size:1.5rem;font-family:monospace;border:2px solid #ccc;border-radius:.5rem;text-align:center}.exercise-input:focus{outline:none;border-color:#4a90d9}.decode-inputs{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;padding:1rem 0}.decode-slot{display:flex;flex-direction:column;align-items:center;gap:.25rem}.decode-space{width:1.5rem}.decode-morse{font-family:monospace;font-size:1.2rem;font-weight:700}.decode-letter-input{width:3rem;height:3rem;text-align:center;font-size:1.5rem;font-weight:700;border:2px solid #ccc;border-radius:.5rem;text-transform:uppercase}.decode-letter-input:focus{outline:none;border-color:#4a90d9}.decode-letter-input.input-error{border-color:#dc3545}.encode-morse-input{width:5rem;height:3rem;text-align:center;font-size:1.2rem;font-family:monospace;font-weight:700;border:2px solid #ccc;border-radius:.5rem}.encode-morse-input:focus,.encode-morse-input.input-focused{outline:none;border-color:#4a90d9}.encode-morse-input.input-error{border-color:#dc3545}.morse-buttons{display:flex;width:100%;height:8rem;gap:2px}.morse-buttons button{flex:1;font-size:2.5rem;border:none;background:#e8e8e8;cursor:pointer;border-radius:.25rem}.morse-buttons button:hover{background:#d0d0d0}.morse-buttons button:active{background:#b8b8b8}.exercise-actions{display:flex;gap:.5rem;justify-content:center;margin:1rem 0}.feedback{text-align:center;padding:1rem;border-radius:.5rem;margin:1rem 0}.feedback.correct{background:#d4edda;color:#155724}.feedback.wrong{background:#f8d7da;color:#721c24}.feedback-images{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:.5rem}.feedback-images .feedback-letter{display:flex;flex-direction:column;align-items:center}.feedback-images img{width:4rem;height:4rem;object-fit:contain}.top-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.help-cell{display:flex;justify-content:center;margin:1rem 0}.help-cell .morse-cell{padding:1rem}.help-cell .code{font-family:monospace;font-size:1.1rem;font-weight:700;color:#333;margin-top:.25rem}.summary{text-align:center;padding:2rem 0}.summary h2{margin-bottom:1rem}.home-buttons{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.home-buttons .btn{width:100%}.config-start-btn{width:100%;margin-top:1rem}.config-description{color:#666;font-size:.9rem;margin-top:.25rem}.custom-input-section{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}.custom-input-section label{font-weight:700}.custom-text-input{width:100%;padding:1rem;font-size:1.2rem;border:2px solid #ccc;border-radius:.5rem;text-transform:uppercase;box-sizing:border-box}.custom-text-input:focus{outline:none;border-color:#4a90d9}.top-bar-buttons{display:flex;gap:.5rem}.rate-description{color:#666;margin-bottom:1rem}.rate-columns{display:flex;gap:1rem}.rate-column{flex:1}.rate-column h3{text-align:center;margin-bottom:.5rem}.rate-table{width:100%;border-collapse:collapse}.rate-table th,.rate-table td{padding:.25rem .5rem;border-bottom:1px solid #eee;text-align:center;height:2rem}.rate-table th{font-weight:700;border-bottom:2px solid #ccc}.rate-morse{font-family:monospace;font-weight:700}.score-badge{display:inline-block;padding:.1rem .4rem;border-radius:.25rem;font-weight:700}.score-green{background-color:#a8e6a3}.score-yellow{background-color:#fff3a3}.score-red{background-color:#f8a3a3}.btn-danger{background:#dc3545}.btn-danger:hover{background:#c82333}.confirm-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.confirm-dialog{background:#fff;padding:2rem;border-radius:.5rem;text-align:center}.confirm-actions{display:flex;gap:.5rem;justify-content:center;margin-top:1rem}.mnemonic-group{margin-bottom:1.5rem}.mnemonic-phrase{text-transform:capitalize;margin-bottom:.5rem}.mnemonic-list{display:flex;flex-direction:column;gap:.25rem}.mnemonic-row{display:flex;align-items:center;gap:1rem;padding:.25rem .5rem;font-family:monospace;font-size:1.1rem}.mnemonic-code{min-width:5rem;font-weight:700}.mnemonic-letter{font-weight:700;color:#4a90d9}.atbash-story{font-style:italic;color:#555;text-align:center;margin-bottom:1.5rem;font-size:1.1rem;line-height:1.6}.atbash-list{display:flex;flex-direction:column;gap:.25rem}.atbash-row{display:flex;align-items:center;gap:.75rem;padding:.4rem .75rem;font-size:1.1rem;border-bottom:1px solid #eee}.atbash-letter{font-weight:700;font-size:1.2rem;min-width:1.5rem;text-align:center}.atbash-dash{color:#999}.atbash-hint{color:#666;font-size:.95rem}.atbash-help-content{font-size:1.2rem;font-weight:700;padding:.5rem 1rem;border:1px solid #ccc;border-radius:.5rem;background:#f9f9f9}.tapcode-grid{width:100%;border-collapse:collapse;margin:1rem 0;text-align:center}.tapcode-grid th,.tapcode-grid td{padding:.5rem;border:1px solid #ccc;font-size:1.1rem;width:2.5rem;height:2.5rem}.tapcode-grid th{background:#f0f0f0;font-weight:700}.tapcode-buttons{display:flex;width:100%;height:5rem;gap:2px}.tapcode-buttons button{flex:1;font-size:1.8rem;border:none;background:#e8e8e8;cursor:pointer;border-radius:.25rem}.tapcode-buttons button:hover{background:#d0d0d0}.tapcode-buttons button:active{background:#b8b8b8}h1{margin-bottom:1rem}