# Tempo

Tempo arranges access around its expiry dates: a chronological journal with oversized calendar stamps, a thin vertical rule and subscription details set directly into the page. The normal account opens its active subscription; expired and unavailable accounts stay compact. Each entry can expand, with copy, QR and management controls immediately available. There is no repeated card grid.

The palette is charcoal, warm ivory and vermilion. The light theme reverses the paper and ink while keeping the red date emphasis. Large date numerals establish the hierarchy; subscription usernames remain exact, selectable Latin strings, and all calendar stamps are Gregorian with Latin digits. Persian content and the timeline mirror naturally. The current date and expiry stamps use Tehran time.

Subscriptions are the default destination. Two numbered navigation segments lead to access and the wallet, with a separate vermilion purchase control. Search, filters and sorting sit in a disclosure beneath the headline. Expiry is the initial sort; name and accurate usage sorting remain available, along with shared pagination for the 140-subscription partner account. The sections distinguish expired access, the next seven days, later expiries, no expiry date and accounts needing review.

Motion is functional: the date rule draws over 950 ms, entries arrive over 580 ms with a brief stagger, actual usage meters fill over 850 ms, and an expanded entry reveals over 280 ms. Completion keys are recorded only when the animated element finishes while connected to the document, so asynchronous shared refreshes cannot silently cancel the first reveal. Later updates do not replay completed introductions. Reduced motion disables CSS and JavaScript animation.

Only selection, filter disclosure and motion bookkeeping live in this folder. The shared application and API own account data, usage, balances, purchases, renewals, confirmations and error handling. The wallet uses an inverted balance panel and a ruled ledger; the shop uses open rows. Detail and confirmation sheets share Tempo's restrained typography and square controls. All common account operations remain in the shared sheets, including automatic renewal and destructive actions.

This is an independent composition for round two. Refero was not used, honoring the request to reserve that workflow for the first two original concepts. The provided existing miniapp and written brief informed its product scope; neither dictated the layout.

Validation completed in a real Chromium browser at 360 × 800 and 390 × 844, in Persian and English, with dark and light themes. No horizontal overflow or JavaScript errors occurred. At 360 × 800, the normal account's copy button ends at 638 px and the third subscription identity ends at 717 px, above navigation at 726 px. Search, sorting, expansion, renewal offers, QR rendering, detail tools, wallet and purchase navigation passed. Reduced-motion mode reported zero running animations. Root additionally verified connected completion of the rule, entries and usage meter, cross-concept synchronization and common workflow integration.

Browser drivers and screenshots are in `../output/playwright/` under the `tempo-` prefix. The source passes `node --check 10-tempo/app.js`.