Add How it works page, plainer copy, faster import scan

UI / copy:
- Footer: "made by Adam Soltys" (drop the heart) + a "How it works"
  link on its own line, matching the footer's size.
- New "How it works" page: plain-language basics plus an expandable
  "for the technically curious" section. Routed via ui.screen, with
  Back/logo returning to wherever you opened it from.
- Scrub jargon from the main UI for newcomers: drop BIP39, soften
  "raw hex" -> "code", "txid" -> "transaction ID", "air-gapped" ->
  "offline"; replace em dashes in the intro/keys notes. The technical
  terms now live only in the How it works technical section.

Import / scan performance (fewer requests -> fewer 429s, faster):
- Skip the /utxo fetch for fully-settled, zero-balance addresses
  (they can't hold UTXOs) -- the bulk of a history-heavy wallet.
- Show balance as soon as the address scan finishes, then load UTXOs
  and history in the background.
- Probe the receive and change chains concurrently so their per-hit
  delays overlap.
- History fills in progressively as each address resolves, with a
  loading indicator on the History tab.

i18n.js is now tracked; new English keys fall back to English for the
other languages until translated.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>

1 files changed, 9 insertions, 0 deletions

diff --git a/src/style.css b/src/style.css
index dce2d88..d913d76 100644
--- a/src/style.css
+++ b/src/style.css
@@ -198,6 +198,7 @@ textarea { resize: vertical; min-height: 84px; font-family: var(--mono); font-si
   width: 18px; height: 18px; border: 2px solid var(--line-strong); border-top-color: var(--accent);
   border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; vertical-align: middle;
 }
+.spinner.sm { width: 13px; height: 13px; border-width: 2px; }
 @keyframes spin { to { transform: rotate(360deg); } }
 .toast {
   position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
@@ -230,6 +231,14 @@ hr.divider { margin: 16px 0; }
 .linklike { background: none; border: 0; padding: 0; color: var(--accent-ink); font-weight: 600; cursor: pointer; }
 .linklike:hover { text-decoration: underline; background: none; }
 
+/* ---- how it works ---- */
+.lead { font-size: 16px; line-height: 1.5; color: var(--ink); }
+.hiw-tech { border-top: 1px solid var(--line); padding-top: 14px; }
+.hiw-tech > summary { font-weight: 650; cursor: pointer; list-style: none; color: var(--accent-ink); display: flex; align-items: center; gap: 7px; }
+.hiw-tech > summary::-webkit-details-marker { display: none; }
+.hiw-tech > summary::before { content: '▸'; font-size: 12px; transition: transform .15s; }
+.hiw-tech[open] > summary::before { transform: rotate(90deg); }
+
 @media (max-width: 420px) {
   .words { grid-template-columns: repeat(2, 1fr); }
   .balance .amt { font-size: 28px; }