Consolidate MangaCircus app, scraper, and Compose baseline

public/read.html

@@ -12,6 +12,8 @@
 <link rel="manifest" href="manifest.webmanifest">
 <meta name="theme-color" content="#0b0b0c">
 <script src="common.js" defer></script>
+<script src="reading-clock-core.js" defer></script>
+<script src="reading-clock.js" defer></script>
 <script src="reader.js" defer></script>
 </head>
 <body class="reader">
@@ -37,11 +39,17 @@
       <button data-mode="book" title="Two pages side by side, like an open book">Book</button>
     </div>
     <button id="shift" class="btn" title="Page pairs look wrong? Shift them by one page">⇄<span class="wide-only"> Shift</span></button>
-    <button id="zoom" class="btn" title="Page zoom (Ctrl + scroll or pinch). Click to fit the screen again.">100%</button>
+    <div class="seg zoom-controls" role="group" aria-label="Page zoom">
+      <button id="zoomout" title="Zoom out 5%" aria-label="Zoom out 5%">−</button>
+      <button id="zoom" title="Current page zoom. Click to fit the screen again.">100%</button>
+      <button id="zoomin" title="Zoom in 5%" aria-label="Zoom in 5%">+</button>
+    </div>
+    <button id="readclock" class="btn clock-chip" hidden aria-label="Active Reading Clock"><span class="clock-icon">⏸</span> <span class="clock-time">00:00</span><span class="clock-label"></span></button>
     <select id="ver" title="Version of this chapter" aria-label="Version"></select>
     <a id="nextch" class="btn" title="Next chapter"><span class="wide-only">Next </span>›</a>
   </div>
 </div>
+<div id="clockpanel" class="clock-panel" hidden></div>
 <div id="toast"></div>
 </body>
 </html>