feat(reader): shortcuts help modal + desktop edge page-turn zones

Help menu (the reader had a growing shortcut/gesture vocabulary with
no discoverability): a ? topbar button, the '?' key, and F1 open a
glass modal listing navigation, zoom/pan, highlight, and touch
gesture reference — format-aware (fixed-layout/PDF rows appear only
where they apply), Esc closes it first in the dismiss chain.

Desktop edge zones: clickable page-turn strips on the left/right
viewport edges (8% width, 44-72px), desktop only (hover+fine-pointer
media query — touch devices use tap zones, avoiding double paging).
Hovering reveals a chevron arrow and a subtle edge gradient. Zones
disable (pointer-events pass-through) while a fixed-layout page is
zoomed so edge clicks belong to content: panning, selection,
highlight editing. fxZoomed tracks zoom state via the renderer zoom
event, reset/fit actions, and init.

templates/reader.templ

@@ -71,6 +71,29 @@ templ Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookm
 			     drawers and scrim float above everything. -->
 			<div id="reader-viewport" class="fixed inset-0">
 				<foliate-view id="reader-view" class="block w-full h-full"></foliate-view>
+				<!-- Desktop edge page-turn zones: hover to reveal the arrow.
+				     Hidden on touch (tap zones cover that) and while a
+				     fixed-layout page is zoomed (edges belong to content then). -->
+				<div
+					class="reader-edge-zone left"
+					:class="edgeZonesActive ? '' : 'pointer-events-none'"
+					@click="goLeft()"
+					aria-hidden="true"
+				>
+					<svg class="reader-icon" width="28" height="28" aria-hidden="true">
+						<path d="M 18 6 L 10 14 L 18 22"></path>
+					</svg>
+				</div>
+				<div
+					class="reader-edge-zone right"
+					:class="edgeZonesActive ? '' : 'pointer-events-none'"
+					@click="goRight()"
+					aria-hidden="true"
+				>
+					<svg class="reader-icon" width="28" height="28" aria-hidden="true">
+						<path d="M 10 6 L 18 14 L 10 22"></path>
+					</svg>
+				</div>
 			</div>
 
 			@ReaderChrome(metadata, progress)
@@ -231,6 +254,59 @@ templ Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookm
 			>
 				@ReaderSearchDrawer()
 			</div>
+
+			<!-- Shortcuts & gestures help modal -->
+			<div
+				x-show="helpOpen"
+				x-transition.opacity.duration.200ms
+				class="reader-help-backdrop"
+				@click="helpOpen = false"
+				aria-hidden="true"
+			></div>
+			<div
+				x-show="helpOpen"
+				x-transition:enter="transition ease-out duration-150"
+				x-transition:enter-start="opacity-0 scale-95"
+				x-transition:enter-end="opacity-100 scale-100"
+				x-transition:leave="transition ease-in duration-100"
+				x-transition:leave-start="opacity-100 scale-100"
+				x-transition:leave-end="opacity-0 scale-95"
+				class="reader-help"
+				role="dialog"
+				aria-label="Shortcuts and gestures"
+			>
+				<div class="reader-help-header">
+					<h3 class="font-semibold text-base">Shortcuts &amp; Gestures</h3>
+					<button @click="helpOpen = false" class="p-1.5 rounded-lg hover:bg-gray-700" title="Close (Esc)" aria-label="Close">✕</button>
+				</div>
+				<div class="reader-help-body">
+					<h4 class="reader-help-section">Navigation</h4>
+					<div class="help-row"><span>Previous / next page</span><span class="help-keys"><kbd class="kbd">←</kbd><kbd class="kbd">→</kbd> or <kbd class="kbd">h</kbd><kbd class="kbd">l</kbd></span></div>
+					<div class="help-row"><span>Return to previous location</span><span class="help-keys"><kbd class="kbd">Alt</kbd>+<kbd class="kbd">←</kbd></span></div>
+					<div class="help-row"><span>Page edge zones <span class="help-note">(desktop)</span></span><span class="help-keys">click page edges</span></div>
+					<div class="help-row" x-show="!isFixedLayout || isPDF"><span>Search in book</span><span class="help-keys"><kbd class="kbd">/</kbd></span></div>
+					<div class="help-row"><span>Contents / thumbnails</span><span class="help-keys"><kbd class="kbd">t</kbd></span></div>
+					<div class="help-row"><span>Annotations drawer</span><span class="help-keys">📝 button</span></div>
+					<div class="help-row"><span>Settings</span><span class="help-keys"><kbd class="kbd">s</kbd></span></div>
+					<div class="help-row"><span>Add bookmark</span><span class="help-keys"><kbd class="kbd">b</kbd></span></div>
+					<div class="help-row"><span>Close menus / toggle chrome</span><span class="help-keys"><kbd class="kbd">Esc</kbd></span></div>
+
+					<h4 class="reader-help-section" x-show="isFixedLayout">Zoom &amp; pan <span class="help-note">(comics, PDFs)</span></h4>
+					<div class="help-row" x-show="isFixedLayout"><span>Zoom in / out / reset</span><span class="help-keys"><kbd class="kbd">+</kbd><kbd class="kbd">−</kbd><kbd class="kbd">0</kbd> or wheel</span></div>
+					<div class="help-row" x-show="isFixedLayout"><span>Move the page</span><span class="help-keys">drag with the mouse</span></div>
+					<div class="help-row" x-show="isFixedLayout"><span>Recenter <span class="help-note">(keeps zoom)</span></span><span class="help-keys">⊙ button</span></div>
+					<div class="help-row" x-show="isPDF"><span>Select text in a PDF</span><span class="help-keys">Smart mode: drag over text · <kbd class="kbd">Shift</kbd>+drag anywhere · Text mode</span></div>
+
+					<h4 class="reader-help-section">Highlights</h4>
+					<div class="help-row"><span>Create</span><span class="help-keys">select text → pick a color</span></div>
+					<div class="help-row"><span>Edit / delete</span><span class="help-keys">click the highlight</span></div>
+
+					<h4 class="reader-help-section">Touch</h4>
+					<div class="help-row"><span>Page turn</span><span class="help-keys">swipe, or tap outer edges</span></div>
+					<div class="help-row"><span>Toggle chrome</span><span class="help-keys">tap center</span></div>
+					<div class="help-row" x-show="isFixedLayout"><span>Zoom / move</span><span class="help-keys">pinch · two-finger drag · double-tap</span></div>
+				</div>
+			</div>
 		</body>
 	</html>
 }
@@ -249,6 +325,7 @@ templ ReaderChrome(metadata ReaderMetadata, progress ReadingProgress) {
 					<button x-show="!isFixedLayout || isPDF" @click="toggleSearch()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Search (/)">🔍</button>
 					<button @click="toggleBookmarks()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Annotations">📝</button>
 					<button @click="toggleSettings()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Settings (s)">Aa</button>
+					<button @click="toggleHelp()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700 text-sm font-bold" title="Shortcuts & gestures (?)" aria-label="Shortcuts and gestures">?</button>
 				</div>
 			</div>
 		</div>