refactor: enhance TimerPage layout and functionality; update theme and tokens for improved design consistency

- Refactored TimerPage component to improve layout and user experience.
- Updated theme configuration to utilize design tokens for better maintainability.
- Introduced new tokens for colors and typography to align with design principles.
- Simplified state management and improved timer functionality.
- Enhanced accessibility and responsiveness of UI elements.

README.md

@@ -33,19 +33,24 @@ and taking **all** of them:
 
 * **Jira** — every open issue across the site (not just what is due today), with
   the due date, the "Start date" custom field, the status, the priority, the
-  project. Finishing a Jira-backed task here **transitions the issue to Done**.
-* **Todoist** — every open task, or your own filter query. Finishing closes it in
-  Todoist.
-* **Google Tasks** — every incomplete task, including undated ones. Finishing
-  marks it completed in Google.
+  project.
+* **Todoist** — every open task, or your own filter query.
+* **Google Tasks** — every incomplete task, including undated ones.
 * **Laundry bookings** (`4ka.inbicst.ru`) — the slots you booked today, because
   they are blocks of time that will interrupt your pomodoros.
 * **Local tasks** — the "and this too" you type at 9am.
 
+**You cannot tick a task off here.** Completion belongs to the tool the task
+lives in — close it in Jira, Todoist or Google Tasks and the next refresh
+notices (an item that comes back done, or that a healthy source stops returning
+at all, is credited to that day). Two places to mark something done is two
+places to be wrong.
+
 Every source is pulled independently: an expired laundry cookie or a Jira outage
 costs you that one source and shows up as a warning next to it, never as an
-empty list. The list is mirrored into the database on every refresh, so the UI is
-instant and the daily report still works when a source is down.
+empty list — and nothing is ever counted as closed on a source that failed. The
+list is mirrored into the database on every refresh, so the UI is instant and
+the daily report still works when a source is down.
 
 ### A focus guard that actually blocks
 Rules live on the server (edit them in the web app or the desktop app); the
@@ -54,8 +59,14 @@ native desktop app enforces them on your machine:
 * **Websites** — `/etc/hosts` is rewritten through a tiny privileged helper under
   polkit. No browser extension, no proxy, works for every app on the machine, and
   you can audit it with `cat /etc/hosts`.
+* **Masks** — `youtube.com` blocks the site plus `www.` and `m.`; `*.google.com`
+  blocks every subdomain in your expansion list (a hosts file has no wildcards,
+  so the app expands them for you and tells you when a pattern like `*gram*`
+  cannot be expressed that way). Exceptions take masks too, so `*.google.com`
+  blocked plus `*.docs.google.com` allowed does what you would expect.
 * **Applications** — `/proc` is watched and blocked apps are closed (or just
-  reported, if you prefer a warning).
+  reported, if you prefer a warning). Entries here are globs as well: `steam*`,
+  `*discord*`, matched against the process name and its command line.
 * **When** — only while a focus interval runs (the default), always, or on a
   schedule. Breaks can keep the block on or let it go.
 * Every attempt that gets turned away is recorded — and teased about in the
@@ -192,6 +203,12 @@ and you can fill everything in from **Settings**.
   per integration; `app/api/` is a thin HTTP layer. 44 tests under `backend/tests`.
 * `frontend/` — React + TypeScript + MUI, built by Vite into the backend image and
   served from the same origin (so there is no CORS to configure).
+* **The look** — warm paper, ink type, hairline rules instead of boxes and
+  shadows, Fraunces for figures and headings, Inter for everything else, one
+  ember accent. The desktop app's `Theme` singleton carries the same tokens as
+  the web app's `tokens.ts`, so the two clients are one product. Chart colours
+  come from a separate, validated data palette: the brand is warm, but a chart
+  has to stay readable for colour-blind readers in both themes.
 * `desktop/` — the native app. See [`desktop/README.md`](desktop/README.md).
 
 ---