:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;overflow:hidden}body{color:#18223d;background:#edf2ff;margin:0}#app{height:100svh}.trainer{max-width:720px;height:100%;margin:0 auto;padding:1.5svh 12px}.screen{height:100%}.hidden{display:none!important}.select-screen{flex-direction:column;justify-content:center;gap:12px;display:flex}h1{text-align:center;margin:0;font-size:1.3rem;line-height:1.35}.sub{text-align:center;color:#4f628f;margin:0 0 10px;font-size:.9rem;line-height:1.5}.mode-buttons{flex-direction:column;gap:10px;display:flex}.mode{color:#fff;background:#2f53c8;border:none;border-radius:14px;width:100%;min-height:52px;font-size:1.08rem;font-weight:700}.play-screen{grid-template-rows:30fr 22fr 42fr auto;min-height:0;display:grid}.play-screen.example{grid-template-rows:28fr 32fr 34fr auto}.play-screen.example .mnemonic{display:none}.play-screen.quiz{grid-template-rows:34fr 66fr auto}.play-screen.quiz .morse-area{display:none}.target-char.code{letter-spacing:.06em;word-break:break-all;font-size:min(9vh,3.4rem)}.quiz-area{flex-direction:column;justify-content:center;gap:12px;padding-bottom:14px;display:flex}.replay-btn:disabled{color:#8a97b5;border-color:#b9c2d6}.replay-btn{color:#2f53c8;background:#fff;border:1px solid #2f53c8;border-radius:999px;align-self:center;padding:8px 20px;font-size:.9rem;font-weight:700}.choices{grid-template-columns:1fr 1fr;gap:10px;display:grid}.choice{color:#fff;background:#2f53c8;border:none;border-radius:14px;min-height:min(14vh,84px);font-size:1.6rem;font-weight:700}.choice.wrong{color:#b12323;background:#e3e8f4;text-decoration:line-through}.sentence{text-align:center;letter-spacing:.02em;word-break:break-word;color:#8a97b5;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:min(4.6vh,1.6rem);line-height:1.45}.sentence-space{width:.8em;display:inline-block}.sentence-char.done{color:#19753d}.sentence-char.current{color:#fff;background:#2f53c8;border-radius:3px;font-weight:700}.target-area,.morse-area,.action-area,.input-area{justify-content:center;align-items:center;min-height:0;display:flex}.action-area>*{width:100%;height:100%}.target-area{flex-direction:column;gap:6px}.target-label{color:#667dad;margin:0;font-size:.85rem}.target-char{margin:0;font-size:min(22vh,11rem);font-weight:700;line-height:1}.progress{color:#3f5a95;margin:0;font-size:.95rem}.feedback{min-height:1.4em;margin:0;font-size:.9rem}.feedback.neutral{color:#365092}.feedback.success{color:#19753d}.feedback.error{color:#b12323}.morse-area{flex-direction:column;gap:6px}.current-input{min-height:1.1em;margin:0;font-size:min(9vh,3.2rem);line-height:1.1}.current-input.compact{text-align:center;word-break:break-all;width:100%;max-height:100%;font-size:1rem;line-height:1.35;overflow:hidden}.diff{flex-direction:column;gap:2px;display:flex}.diff-row{align-items:center;gap:2px;margin:0;font-size:1.05rem;line-height:1.2;display:flex}.diff-label{color:#667dad;margin-right:4px;font-size:.72rem}.diff-cell{text-align:center;min-width:.9em;display:inline-block}.diff-cell.missing,.diff-cell.extra{color:#b12323;font-weight:700}.diff-cell.blank{background:#b123231f;border-radius:2px}.mnemonic{text-align:center;color:#5f2d92;min-height:1.4em;margin:0;font-size:.92rem}.sentence-code{text-align:center;word-break:break-all;color:#aeb7c9;width:100%;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.95rem;line-height:1.5}.code-signal.active{color:#1b2f6b;font-weight:700}.input-area{padding:0 8px 14px 0;position:relative}.playing-badge{color:#18223d;pointer-events:none;background:#ffffffeb;border-radius:999px;padding:6px 16px;font-size:.9rem;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.input-pad{aspect-ratio:1;touch-action:none;-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 30% 24%,#ffffff8c 0%,#fff0 26%),radial-gradient(circle at 38% 32%,#5a616b 0%,#2a2e34 42%,#0c0e11 100%);border:none;border-radius:50%;height:min(100%,70vw,320px);transition:transform 60ms ease-out,box-shadow 60ms ease-out;box-shadow:8px 8px 14px #080a0e66,inset 0 -8px 16px #0000008c}.input-pad.active{transform:translate(8px,8px);box-shadow:2px 2px 4px #080a0e59,inset 0 -8px 16px #0000008c}.input-pad:disabled{background:radial-gradient(circle at 30% 24%,#ffffff4d 0%,#fff0 26%),radial-gradient(circle at 38% 32%,#9aa1ac 0%,#757b85 42%,#565b63 100%);box-shadow:8px 8px 14px #080a0e38,inset 0 -8px 16px #0000004d}.scoreboard{color:#18223d8c;justify-content:space-between;align-items:center;gap:10px;font-size:.72rem;display:flex}.scoreboard p{white-space:nowrap;margin:0}.sound-toggle{color:#18223d8c;white-space:nowrap;background:0 0;border:1px solid #2f53c859;border-radius:999px;padding:4px 10px;font-size:.72rem}.sound-toggle.on{color:#fff;background:#2f53c8;border-color:#2f53c8}.result-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex}.result-screen h2{margin:0 0 10px;font-size:1.5rem}.result-mode,.result-line{margin:0}.result-score{font-size:1.4rem;font-weight:700}.result-actions{flex-direction:column;gap:10px;width:min(90vw,420px);margin-top:12px;display:flex}.result-btn{color:#fff;background:#2f53c8;border:none;border-radius:12px;width:100%;min-height:54px;font-size:1rem;font-weight:700}.result-btn.secondary{color:#24396f;background:#d9e2fb}