# Reader experience

Reader is static HTML with output-local CSS/scripts/fonts. It runs independently of optional writing server. Validate whether intended reader can find and complete a task, not just whether files were generated.

# Reading controls

Start at landing to understand prerequisites/sequence. Alphabetic page order is not an automatically designed training course. A search heading result can jump into a task; read surrounding scope and warnings before commands.

Search and navigation documents exact palette input/matching/result caps, sidebar state and deep links. Its static index is not a hosted permission service or query of unsaved source.

# Metadata and page furniture

Use browser Back for actual visit history. Copy real heading permalink after build; title and fragment changes can break different links. Root homepage has special hero/body behavior, not identical normal-page furniture. Frontmatter explains exact date/reading calculation.

# Code copy

Ordinary code blocks receive language header/Copy button. Copy uses code text, not UI header. Success displays Copied briefly; failure displays Failed. Clipboard support/permission/secure context still matters. Select manually when unavailable and inspect copied bytes before use.

Commands may use fictional paths/usernames or shell-specific syntax. Copy does not run/authorize or check their environment. Long code stays in its dedicated horizontal scroller; key steps/qualifications remain in readable prose. Do not claim tables have automatic fit just because code does.

# Diagrams

Mermaid source becomes SVG in browser through local lazy bundle. This pinned reader has no built-in diagram zoom, enlargement or fullscreen controls. Reader clicking a diagram is not an edit or interactive architecture tool.

Wait for real SVG and inspect labels/relationships in both themes. Normal prose should explain conclusions and sequence because search strips diagram/preformatted text and some readers cannot interpret it visually. Browser build success is not grammar/semantic/accessibility certification. Mermaid diagrams gives rendering/error gates.

# Phone layout

Test longest labels/nesting, reduced height, focus/touch and actual target device. Phone width screenshots measure layout, not physical keyboard/Safari/rotation reliability. Keep full procedure and essential qualifications readable at normal zoom without page-level horizontal scroll.

Tables are useful for comparisons, but many columns/unbreakable strings can overflow pinned styles. Recompose content with fewer columns or short values/prose without editing engine CSS. Media should not be the only source of useful task information.

# Browser-local state

Theme defaults dark until saved choice applies. Sidebar visibility/expansion/scroll and theme live in this origin/browser profile, not user account/cloud synchronization. A second device may start differently. Clearing storage can erase preferences; it does not delete server source.

Reader storage calls are wrapped: blocked reads return no saved value and failed writes are ignored. Immediate reading and controls can still work without remembered choices. Test interaction separately from persistence; this fallback does not certify every private/restricted browser mode. Local storage is not a security gate.

# Network and privacy

Static output is not an installed offline app/service-worker package. Serve through HTTP/HTTPS and test resources/index/diagrams/media under expected network isolation if offline matters. file:// and plain remote HTTP can differ, especially clipboard and modern browser APIs.

Mermaid 12.1.0 is bundled at this pin. Modern browser support must be checked against actual library/platform use and target devices; no blanket Safari/device certification follows from local Chromium screenshots. The handbook does not certify every browser/version or restricted-storage mode.

Protect private reader with a host gate covering HTML, search JSON, images, icons and downloads. Writer permissions protect source editing only. Hidden sidebar flag or unlinked URL is not an access rule. Review copied static bytes before release.

# Content and accessibility

Use meaningful heading hierarchy, descriptive links, useful alt text and searchable explanation outside code/diagram. Essential warning/conclusion must be text, not only color, icon or tiny screenshot label.

Inspect contrast, focus, zoom, keyboard, motion behavior and supported assistive technology with your actual content. A script having ARIA labels is not full accessibility certification. Record observed checks/remaining limits instead of claiming universal compliance.

# Reader acceptance matrix

Repeat affected checks after title/route/resource release. A homepage 200 is not whole-host verification. Review and release and Validation limits keep local versus production evidence distinct.