feat: implement remote settings navigation and focus management

- Added `useSettingsNavigation.ts` for handling remote control navigation within settings.
- Introduced `arrowDirection` and `directionalFocusIndex` functions in `remote.mjs` to manage directional input and focus transitions.
- Created a new markdown file `verification-settings-remote.md` documenting the changes and testing outcomes.
- Developed comprehensive tests for arrow key functionality and focus behavior in `remote.test.mjs`.
- Ensured compatibility with standard keys and legacy key codes, maintaining expected navigation behavior across different screen resolutions.

src/styles.css

@@ -294,6 +294,10 @@ h1 { font-size: clamp(30px, 3.8vw, 76px); letter-spacing: -.05em; line-height: 1
 
 .settings-dialog { width: min(600px, calc(100vw - 28px)); max-height: calc(100dvh - 32px); padding: 0; color: var(--foreground); background: var(--surface); border: 1px solid var(--outline); border-radius: 20px; overflow: auto; box-shadow: 0 25px 90px #0006; }
 .settings-dialog::backdrop { background: #0009; backdrop-filter: blur(8px); }
+.settings-dialog { scroll-padding: 56px 14px 14px; }
+.settings-navigation-hint { position: sticky; top: 0; z-index: 2; margin: 0; padding: 10px 28px; color: var(--secondary); font-size: 12px; line-height: 1.4; background: var(--surface); border-bottom: 1px solid var(--line); }
+.settings-dialog[data-remote-navigation='true'] [data-tv-focus] { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
+.settings-dialog[data-remote-editing='true'] :focus { outline: 3px solid var(--accent); outline-offset: 3px; background: color-mix(in srgb, var(--accent) 12%, var(--input)); }
 .settings-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 25px 28px; border-bottom: 1px solid var(--line); }
 .settings-heading h2 { margin: 8px 0 0; font-size: 27px; font-weight: 600; letter-spacing: -.04em; }
 .settings-heading .eyebrow { font-size: 11px; }