#letter-pad { max-width:640px; margin:16px auto; }
#letter-pad .letter-note { font-size:14px; color:var(--ink-sub); line-height:1.6; margin:0 0 12px; }
#letter-pad .letter-cells { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:12px 0 16px; }
#letter-pad .letter-cell { min-width:32px; min-height:40px; padding:4px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:6px; font-size:22px; font-weight:600; }
#letter-pad .letter-cell.current { border:2px solid var(--accent); padding:3px; }
#letter-pad .letter-cell.fixed { border:0; min-width:8px; }
#letter-pad .letter-candidates { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
#letter-pad .letter-choice { position:relative; min-width:48px; min-height:52px; padding:12px 12px 6px; background:var(--surface); color:var(--ink); border:2px solid var(--accent); border-radius:6px; font:inherit; cursor:pointer; }
#letter-pad .letter-choice b { font-size:24px; font-weight:600; }
#letter-pad .letter-choice small { position:absolute; left:4px; top:1px; font-size:11px; color:var(--ink-sub); }
#letter-pad .letter-choice:active { transform:translateY(1px); }
#letter-pad .letter-choice:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
#letter-pad .letter-feedback { font-size:16px; line-height:1.6; overflow-wrap:anywhere; }