.ladder { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; align-items:center; gap:6px; }
.ladder li { display:flex; gap:5px; align-items:center; }
.ladder .ch { width:42px; height:46px; display:grid; place-items:center; border:2px solid var(--line); border-radius:9px; background:var(--panel); font:800 1.35rem/1 ui-monospace, Menlo, monospace; text-transform:uppercase; }
.ladder .ch.changed { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 22%, var(--panel)); }
.ladder li.target .ch { border-style:dashed; color:var(--muted); }
.ladder li.target.done .ch { border-style:solid; border-color:#4ade80; color:inherit; }
.ladder li.start .ch { background:color-mix(in srgb, var(--muted) 18%, var(--panel)); }
.ladder li.hinted .ch { border-color:#4ade80; }
.ladder .arrow { color:var(--muted); font-size:.8rem; height:10px; line-height:10px; }
.entry { display:flex; gap:8px; }
.entry input { width:11ch; min-height:44px; padding:6px 12px; border:2px solid var(--line); border-radius:9px; background:var(--panel); color:var(--text); font:700 1.2rem ui-monospace, Menlo, monospace; text-transform:lowercase; letter-spacing:.1em; }
.entry input:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.entry button, .bar button { min-height:44px; }
.sr { position:absolute; left:-9999px; }
#modes button.on { background:var(--accent); color:var(--accent-ink,#06202e); }