: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:58px;font-size:1.08rem;font-weight:700}.play-screen{grid-template-rows:30fr 18fr 46fr auto;min-height:0;display:grid}.target-area,.morse-area,.input-area{justify-content:center;align-items:center;min-height:0;display:flex}.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}.mnemonic{text-align:center;color:#5f2d92;min-height:1.4em;margin:0;font-size:.92rem}.input-area{padding:0 8px 14px 0}.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}.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}