Show the Sign in button's label in katakana on hover

app.css

@@ -225,6 +225,9 @@ dialog::backdrop { background: rgba(22, 23, 26, .55); }
 .loginform input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(42, 120, 214, .25); }
 .loginform .btn { min-height: 44px; width: 100%; margin-top: 10px; font-size: 15px; font-weight: 600; background: #f4f4f1; border-color: #f4f4f1; color: var(--ink); }
 .loginform .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
+.signin .ja { display: none; font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif; letter-spacing: 0.1em; }
+.signin:hover:not(:disabled) .en { display: none; }
+.signin:hover:not(:disabled) .ja { display: inline; }
 .loginform .err-text { color: #ff8a80; }
 .loginform .err-text:empty { display: none; }
 .loginfoot { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8d8e93; }

app.js

@@ -437,7 +437,9 @@
     const err = h('p', { class: 'err-text', role: 'alert' });
     const user = h('input', { id: 'u', autocomplete: 'username', value: 'admin', required: true });
     const pw = h('input', { id: 'p', type: 'password', autocomplete: 'current-password', required: true });
-    const btn = h('button', { type: 'submit', class: 'btn primary' }, 'Sign in');
+    // On hover the label turns into its Japanese reading; screen readers keep "Sign in".
+    const btn = h('button', { type: 'submit', class: 'btn primary signin' },
+      h('span', { class: 'en' }, 'Sign in'), h('span', { class: 'ja', lang: 'ja', 'aria-hidden': 'true' }, 'サインイン'));
     const form = h('form', { class: 'loginform', onSubmit: async (e) => {
       e.preventDefault();
       err.textContent = '';