Put both handles where a keyboard can actually reach them

The plan is a Lexical surface, and `listsPlugin` mounts
`TabIndentationPlugin`, which calls `preventDefault` on Tab before it has
looked at `shiftKey` — Tab indents, Shift-Tab outdents, and focus that lands
in the editor does not leave it in either direction. Lexical says so in that
plugin's own doc comment. Both handles sat behind the editor in the markup,
so a keyboard reached neither of them. They are positioned, so moving them
ahead of the plan changes what order they are tabbed to and nothing about
where they are drawn.

The test called `focus()`, which arrives at anything in the document whether
or not a person could, and so passed against exactly that shell. It walks the
tab order now, and says where it got to instead when it does not arrive.

`ring-hairline` is `hairline-ring`. `--color-hairline` is a theme token, so
Tailwind already mints a class from it in every colour namespace; a utility
declared under one of those names merges into the generated rule rather than
replacing it, and the built class carried `--tw-ring-color` beside the outline
that was the whole point.

The rails are back at 340 and 320. Nothing in this task asks for other
numbers, and the pictures are retaken at the widths that restores.