Seed phrase: three columns read across (1 2 3), two columns still run down.

Co-Authored-By: Claude Fable 5.1 <[email protected]>

1 files changed, 6 insertions, 5 deletions

diff --git a/src/style.css b/src/style.css
index d9f202e..06ba80c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -262,10 +262,11 @@ textarea { resize: vertical; min-height: 84px; font-family: var(--mono); font-si
 .addr-check .hl { color: var(--ink); font-weight: 700; }
 
 /* ---- mnemonic grid ---- */
-/* Words run DOWN a column, then the next — the way a hand copies a list —
-   so on a phone (two columns) the first column is 1–6, not 1,3,5,…; the row
-   count comes from the word count (--rows-3 / --rows-2, set inline). */
-.words { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows-3, 4), auto); grid-auto-columns: 1fr; gap: 8px; }
+/* Three columns read ACROSS — 1 2 3 on the first line, 4 5 6 on the next —
+   the way a printed sheet is read. Two columns (a phone) run DOWN instead,
+   the way a hand copies a list: the first column is 1–6, not 1,3,5,…; that
+   row count comes from the word count (--rows-2, set inline). */
+.words { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: 8px; }
 .words .w {
   display: flex; align-items: baseline; gap: 7px; background: var(--surface2);
   border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-family: var(--mono);
@@ -377,7 +378,7 @@ hr.divider { margin: 16px 0; }
 /* ---- how it works ---- */
 
 @media (max-width: 420px) {
-  .words { grid-template-rows: repeat(var(--rows-2, 6), auto); }
+  .words { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 1fr; grid-template-rows: repeat(var(--rows-2, 6), auto); }
   .balance .amt { font-size: 28px; }
 }