Add deployment reading windows and progress-aware quiz unlock

public/app.css

@@ -389,6 +389,14 @@ body.reader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: h
 #stage.pan { cursor: grab; }
 #stage.drag { cursor: grabbing; }
 #canvas { position: relative; }
+.reading-gate { box-sizing: border-box; max-width: 620px; margin: min(13vh, 100px) auto 100px; padding: 24px;
+  border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--fg); line-height: 1.5; }
+.reading-gate h1 { margin-top: 0; }
+.reading-gate-question { margin: 20px 0; }
+.reading-gate-question input { display: block; box-sizing: border-box; width: 100%; margin: 14px 0; padding: 10px; }
+.reading-gate-actions { display: flex; flex-wrap: wrap; gap: 10px; }
+.reading-gate-message { color: var(--accent); min-height: 1.5em; }
+@media (max-width: 660px) { .reading-gate { margin: 28px 12px 100px; padding: 18px; } }
 .pg { position: absolute; overflow: hidden; background: #19191c; }
 .pg img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; }
 #canvas[data-page-tone="inverted"] .pg img { filter: invert(1); }