revision-engine 0.2.2__py3-none-any.whl

revision_engine/serve.py

@@ -0,0 +1,153 @@
+"""Local preview: build to a temp folder, serve it, rebuild when the content changes."""
+
+from __future__ import annotations
+
+import http.server
+import os
+import re
+import sys
+import tempfile
+import threading
+import time
+from functools import partial
+from pathlib import Path
+
+from revision_engine.build import build
+from revision_engine.errors import BuildError
+
+_RANGE_RE = re.compile(r"bytes=(\d*)-(\d*)$")
+
+
+class _Slice:
+    """A bounded reader over an open file, for streaming one byte range."""
+
+    def __init__(self, f, remaining: int) -> None:
+        self._f = f
+        self._remaining = remaining
+
+    def read(self, n: int = -1) -> bytes:
+        if self._remaining <= 0:
+            return b""
+        n = self._remaining if n is None or n < 0 else min(n, self._remaining)
+        data = self._f.read(n)
+        self._remaining -= len(data)
+        return data
+
+    def close(self) -> None:
+        self._f.close()
+
+
+class RangeHTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
+    """SimpleHTTPRequestHandler plus HTTP Range support, which <audio> needs to seek."""
+
+    def end_headers(self) -> None:
+        if not any(h.lower().startswith("accept-ranges") for h in self._headers_buffer_text()):
+            self.send_header("Accept-Ranges", "bytes")
+        super().end_headers()
+
+    def _headers_buffer_text(self) -> list[str]:
+        buf = getattr(self, "_headers_buffer", [])
+        return [b.decode("latin-1", "replace") for b in buf]
+
+    def send_head(self):
+        path = self.translate_path(self.path)
+        range_header = self.headers.get("Range")
+        if os.path.isdir(path) or not range_header:
+            return super().send_head()
+        m = _RANGE_RE.match(range_header.strip())
+        if not m or (m.group(1) == "" and m.group(2) == ""):
+            return super().send_head()
+        try:
+            f = open(path, "rb")
+        except OSError:
+            self.send_error(404, "File not found")
+            return None
+        stat = os.fstat(f.fileno())
+        size = stat.st_size
+        if m.group(1):
+            start = int(m.group(1))
+            end = int(m.group(2)) if m.group(2) else size - 1
+        else:
+            start = max(0, size - int(m.group(2)))
+            end = size - 1
+        end = min(end, size - 1)
+        if start > end or start >= size:
+            f.close()
+            self.send_response(416, "Requested Range Not Satisfiable")
+            self.send_header("Content-Range", f"bytes */{size}")
+            self.end_headers()
+            return None
+        self.send_response(206, "Partial Content")
+        self.send_header("Content-Type", self.guess_type(path))
+        self.send_header("Content-Range", f"bytes {start}-{end}/{size}")
+        self.send_header("Content-Length", str(end - start + 1))
+        self.send_header("Last-Modified", self.date_time_string(stat.st_mtime))
+        self.end_headers()
+        f.seek(start)
+        return _Slice(f, end - start + 1)
+
+
+class Watcher:
+    """Polls file modification times under `root`, skipping ignored folders and VCS/cache noise."""
+
+    def __init__(self, root: Path, ignore: tuple[Path, ...] = ()) -> None:
+        self.root = root.resolve()
+        self.ignore = tuple(p.resolve() for p in ignore)
+        self._last = self.snapshot()
+
+    def _skip(self, p: Path) -> bool:
+        parts = set(p.parts)
+        if ".git" in parts or "__pycache__" in parts or ".venv" in parts:
+            return True
+        return any(ig == p or ig in p.parents for ig in self.ignore)
+
+    def snapshot(self) -> dict[str, int]:
+        out: dict[str, int] = {}
+        for p in self.root.rglob("*"):
+            if p.is_file() and not self._skip(p):
+                try:
+                    out[p.as_posix()] = p.stat().st_mtime_ns
+                except OSError:
+                    pass
+        return out
+
+    def changed(self) -> bool:
+        now = self.snapshot()
+        if now != self._last:
+            self._last = now
+            return True
+        return False
+
+
+def _build(root: Path, output: Path, commit: str | None) -> None:
+    try:
+        result = build(root, output=output, commit=commit)
+        print(f"built {len(result.pages)} pages -> {output}", flush=True)
+        for w in result.report.warnings:
+            print(f"warning: {w}", flush=True)
+    except BuildError as e:
+        print(f"error: {e}", file=sys.stderr, flush=True)
+
+
+def serve(root: Path, port: int, commit: str | None, once: bool = False) -> None:
+    root = root.resolve()
+    with tempfile.TemporaryDirectory(prefix="rv2-serve-") as tmp:
+        output = Path(tmp) / "site"
+        _build(root, output, commit)
+        if once:
+            return
+        handler = partial(RangeHTTPRequestHandler, directory=str(output))
+        server = http.server.ThreadingHTTPServer(("127.0.0.1", port), handler)
+        print(f"serving http://127.0.0.1:{server.server_address[1]}/  (Ctrl+C to stop)", flush=True)
+        thread = threading.Thread(target=server.serve_forever, daemon=True)
+        thread.start()
+        watcher = Watcher(root, ignore=(root / "public",))
+        try:
+            while True:
+                time.sleep(1.0)
+                if watcher.changed():
+                    _build(root, output, commit)
+        except KeyboardInterrupt:
+            pass
+        finally:
+            server.shutdown()

revision_engine/sources.py

@@ -0,0 +1,61 @@
+"""Snapshot source files from the working tree and identify the commit being built."""
+
+from __future__ import annotations
+
+import subprocess
+from dataclasses import dataclass
+from pathlib import Path
+
+from revision_engine.config import RepoConfig
+from revision_engine.errors import BuildError
+
+
+@dataclass(frozen=True)
+class SourceFile:
+    path: str
+    text: str
+    lines: tuple[str, ...]
+
+
+def read_source(root: Path, rel: str) -> SourceFile:
+    root = root.resolve()
+    target = (root / rel).resolve()
+    try:
+        target.relative_to(root)
+    except ValueError:
+        raise BuildError(f"source path {rel!r} is outside the repository") from None
+    if not target.is_file():
+        raise BuildError(f"source file not found: {rel}")
+    raw = target.read_bytes()
+    try:
+        text = raw.decode("utf-8")
+    except UnicodeDecodeError as e:
+        raise BuildError(f"source file is not UTF-8: {rel} ({e})") from e
+    text = text.replace("\r\n", "\n").replace("\r", "\n")
+    body = text[:-1] if text.endswith("\n") else text
+    lines = tuple(body.split("\n")) if body else ()
+    return SourceFile(path=rel.replace("\\", "/"), text=text, lines=lines)
+
+
+def git_commit(root: Path) -> str | None:
+    try:
+        out = subprocess.run(
+            ["git", "rev-parse", "HEAD"], cwd=root, capture_output=True, text=True, check=False
+        )
+    except FileNotFoundError:
+        return None
+    if out.returncode != 0:
+        return None
+    sha = out.stdout.strip()
+    return sha if len(sha) == 40 else None
+
+
+def short(commit: str) -> str:
+    return commit[:7]
+
+
+def file_url(repo: RepoConfig, commit: str, rel: str) -> str:
+    base = repo.url.rstrip("/")
+    if repo.host == "gitlab":
+        return f"{base}/-/blob/{commit}/{rel}"
+    return f"{base}/blob/{commit}/{rel}"

revision_engine/static/app.js

@@ -0,0 +1,292 @@
+/* reVision engine front end. No network, no framework. Behaviour only; the page is complete without it. */
+(function () {
+  "use strict";
+
+  const dataEl = document.getElementById("rv-data");
+  const data = dataEl ? JSON.parse(dataEl.textContent) : { anchors: {}, start: null, cues: null, variants: [] };
+  const body = document.body;
+  const $ = (id) => document.getElementById(id);
+
+  /* ---- storage helpers: per-device conveniences only, never required ---- */
+  function load(key) { try { return localStorage.getItem(key); } catch (e) { return null; } }
+  function save(key, value) { try { localStorage.setItem(key, value); } catch (e) { /* ignore */ } }
+
+  /* ---- rail and side panel ---- */
+  const panel = $("rv-panel");
+  const railButtons = Array.from(document.querySelectorAll(".rv-rail-btn"));
+  function openPanel(name) {
+    const open = !!name && body.dataset.panel !== name;
+    body.dataset.panel = open ? name : "";
+    document.documentElement.style.setProperty("--rv-panel-w", open ? "280px" : "0px");
+    if (panel) panel.hidden = !open;
+    document.querySelectorAll(".rv-panel-view").forEach((v) => { v.hidden = !(open && v.dataset.view === name); });
+    railButtons.forEach((b) => b.setAttribute("aria-pressed", String(open && b.dataset.panel === name)));
+  }
+  railButtons.forEach((b) => b.addEventListener("click", () => openPanel(b.dataset.panel)));
+
+  /* ---- theme ---- */
+  function setTheme(mode) {
+    if (mode === "light" || mode === "dark") document.documentElement.dataset.theme = mode;
+    else delete document.documentElement.dataset.theme;
+    save("rv-theme", mode || "auto");
+    document.querySelectorAll(".rv-theme").forEach((b) => b.setAttribute("aria-pressed", String(b.dataset.theme === (mode || "auto"))));
+  }
+  document.querySelectorAll(".rv-theme").forEach((b) => b.addEventListener("click", () => setTheme(b.dataset.theme)));
+  setTheme(load("rv-theme") || "auto");
+
+  /* ---- splitter ---- */
+  const splitter = $("rv-splitter");
+  const main = document.querySelector(".rv-main");
+  function setCodeWidth(px) {
+    const min = 240, max = main.clientWidth - 240 - 6;
+    const w = Math.max(min, Math.min(max, px));
+    document.documentElement.style.setProperty("--rv-code-w", w + "px");
+    save("rv-code-w", String(w));
+  }
+  if (splitter && main) {
+    const saved = parseInt(load("rv-code-w") || "", 10);
+    if (saved && window.innerWidth > 900) setCodeWidth(saved);
+    let dragging = false;
+    splitter.addEventListener("pointerdown", (e) => { dragging = true; splitter.setPointerCapture(e.pointerId); });
+    splitter.addEventListener("pointermove", (e) => { if (dragging && window.innerWidth > 900) setCodeWidth(e.clientX - main.getBoundingClientRect().left); });
+    splitter.addEventListener("pointerup", () => { dragging = false; });
+    splitter.addEventListener("keydown", (e) => {
+      const cur = $("rv-code").getBoundingClientRect().width;
+      if (e.key === "ArrowLeft") setCodeWidth(cur - 24);
+      if (e.key === "ArrowRight") setCodeWidth(cur + 24);
+    });
+    /* A width saved on a wide window must not squeeze the lesson to nothing on a narrower one. */
+    window.addEventListener("resize", () => {
+      if (window.innerWidth > 900 && document.documentElement.style.getPropertyValue("--rv-code-w").endsWith("px")) {
+        setCodeWidth($("rv-code").getBoundingClientRect().width);
+      }
+    });
+  }
+
+  /* ---- code boxes ---- */
+  const codeBody = $("rv-code-body");
+  const lines = codeBody ? Array.from(codeBody.querySelectorAll(".rv-line")) : [];
+  let boxed = null;          // {start, end} currently drawn
+  let pinned = null;         // anchor name pinned by click, or null
+  let cueBox = null;         // {start, end} from the active narration segment, or null
+
+  function clearBox() {
+    lines.forEach((l) => l.classList.remove("rv-boxed", "rv-box-start", "rv-box-end"));
+    boxed = null;
+  }
+  function boxLines(start, end, opts) {
+    clearBox();
+    for (let n = start; n <= end; n++) {
+      const el = lines[n - 1];
+      if (!el) continue;
+      el.classList.add("rv-boxed");
+      if (n === start) el.classList.add("rv-box-start");
+      if (n === end) el.classList.add("rv-box-end");
+    }
+    boxed = { start, end };
+    if (!opts || opts.scroll !== false) {
+      const first = lines[start - 1];
+      if (first && codeBody) {
+        const top = first.offsetTop - codeBody.clientHeight * 0.3;
+        codeBody.scrollTo({ top: Math.max(0, top), behavior: opts && opts.instant ? "auto" : "smooth" });
+      }
+    }
+  }
+  function anchorRange(name) { return data.anchors[name] || null; }
+  function showAnchor(name, opts) {
+    const r = anchorRange(name);
+    if (r) boxLines(r.start, r.end, opts);
+    return !!r;
+  }
+  function restore() {
+    if (pinned && showAnchor(pinned, { scroll: false })) return;
+    if (cueBox) { boxLines(cueBox.start, cueBox.end, { scroll: false }); return; }
+    clearBox();
+  }
+  function pin(name) {
+    pinned = name;
+    document.querySelectorAll(".rv-anchor.rv-pinned, .rv-svg-anchor.rv-pinned").forEach((el) => el.classList.remove("rv-pinned"));
+    body.classList.toggle("rv-pinned", !!name);
+    if (name) {
+      document.querySelectorAll('[data-anchor="' + name + '"]').forEach((el) => el.classList.add("rv-pinned"));
+      showAnchor(name);
+      if (history.replaceState) history.replaceState(null, "", "#" + name);
+    } else {
+      if (history.replaceState) history.replaceState(null, "", location.pathname + location.search);
+      restore();
+    }
+  }
+
+  /* A link inside an anchor phrase (a backticked intrinsic) keeps its own click and Enter. */
+  function fromNestedLink(el, e) {
+    const a = e.target.closest("a[href]");
+    return a !== el && el.contains(a);
+  }
+
+  /* anchor phrases in the lesson and anchor nodes in diagrams */
+  document.querySelectorAll("[data-anchor]").forEach((el) => {
+    const name = el.dataset.anchor;
+    const toggle = (e) => { if (fromNestedLink(el, e)) return; e.preventDefault(); pin(pinned === name ? null : name); };
+    el.addEventListener("mouseenter", () => showAnchor(name));
+    el.addEventListener("focusin", () => showAnchor(name));
+    el.addEventListener("mouseleave", restore);
+    el.addEventListener("focusout", restore);
+    el.addEventListener("click", toggle);
+    el.addEventListener("keydown", (e) => { if (e.key === "Enter" || e.key === " ") toggle(e); });
+  });
+
+  /* variants jump list */
+  document.querySelectorAll(".rv-variant").forEach((b) => b.addEventListener("click", () => pin(b.dataset.anchor)));
+
+  /* URL fragment: #anchor-name pins, #t=12.5 seeks. A fragment that is not valid percent-encoding is ignored. */
+  function applyHash() {
+    let h;
+    try { h = decodeURIComponent(location.hash.replace(/^#/, "")); } catch (e) { return; }
+    if (!h) return;
+    if (/^t=/.test(h)) { const t = parseFloat(h.slice(2)); if (Number.isFinite(t)) seek(Math.max(0, t)); return; }
+    if (anchorRange(h)) pin(h);
+  }
+
+  /* keyboard */
+  document.addEventListener("keydown", (e) => {
+    if (e.target && /INPUT|TEXTAREA|SELECT/.test(e.target.tagName)) return;
+    if (e.key === "Escape") { pin(null); return; }
+    if (e.key === "[") { const a = document.querySelector(".rv-prev"); if (a) location.href = a.href; }
+    if (e.key === "]") { const a = document.querySelector(".rv-next"); if (a) location.href = a.href; }
+  });
+
+  /* ---- media and cues ---- */
+  const mediaEl = $("rv-media-el");
+  const segEls = Array.from(document.querySelectorAll(".rv-seg"));
+  const cues = Array.isArray(data.cues) ? data.cues : [];
+  let activeIndex = -1;
+
+  function unionRange(names) {
+    let start = Infinity, end = -Infinity;
+    names.forEach((n) => { const r = anchorRange(n); if (r) { start = Math.min(start, r.start); end = Math.max(end, r.end); } });
+    return start === Infinity ? null : { start, end };
+  }
+  function applyCue(index) {
+    segEls.forEach((el, i) => el.classList.toggle("rv-active", i === index));
+    document.querySelectorAll(".rv-node-active").forEach((el) => el.classList.remove("rv-node-active"));
+    activeIndex = index;
+    const seg = cues[index];
+    if (!seg) { cueBox = null; return; }
+    const range = seg.show ? unionRange(seg.show) : null;
+    cueBox = range;
+    if (range) boxLines(range.start, range.end);
+    if (seg.diagram) {
+      const fig = document.querySelector('.rv-diagram[data-diagram="' + seg.diagram + '"]');
+      if (fig) {
+        fig.scrollIntoView({ block: "center", behavior: "smooth" });
+        if (seg.node) { const node = fig.querySelector('[data-node="' + seg.node + '"]'); if (node) node.classList.add("rv-node-active"); }
+      }
+    }
+    revealSeg(index);
+  }
+  function revealSeg(index) {
+    const el = segEls[index];
+    if (el) el.scrollIntoView({ block: "nearest" });
+  }
+  function segmentAt(t) {
+    for (let i = cues.length - 1; i >= 0; i--) if (t >= cues[i].start) return i;
+    return -1;
+  }
+  function activeSegment() { return activeIndex; }
+  /* A seek before metadata has loaded is dropped by the browser and may echo a timeupdate at 0,
+     so the target is parked until loadedmetadata and timeupdate is ignored meanwhile. */
+  let pendingSeekTo = null;
+  function seek(seconds) {
+    if (!mediaEl) return;
+    const i = segmentAt(seconds);
+    if (i !== activeIndex) applyCue(i);
+    if (mediaEl.readyState >= 1) mediaEl.currentTime = seconds;
+    else pendingSeekTo = seconds;
+  }
+  if (mediaEl) {
+    const mediaPane = $("rv-media");
+    /* Reader collapse: hides the pane's content but never pauses or removes the media, so playback and cues carry on. */
+    const mediaToggle = $("rv-media-toggle");
+    if (mediaToggle && mediaPane) {
+      mediaToggle.hidden = false;
+      mediaToggle.addEventListener("click", () => {
+        const collapsed = mediaPane.classList.toggle("rv-media-collapsed");
+        mediaToggle.setAttribute("aria-expanded", String(!collapsed));
+        if (!collapsed) revealSeg(activeIndex);
+      });
+    }
+    mediaEl.addEventListener("loadedmetadata", () => {
+      if (pendingSeekTo !== null) { mediaEl.currentTime = pendingSeekTo; pendingSeekTo = null; }
+    });
+    mediaEl.addEventListener("timeupdate", () => {
+      if (pendingSeekTo !== null || mediaEl.seeking) return;
+      const i = segmentAt(mediaEl.currentTime);
+      if (i !== activeIndex) applyCue(i);
+    });
+    function onMediaError() {
+      const err = document.querySelector(".rv-media-error");
+      if (err) err.hidden = false;
+      mediaEl.hidden = true;
+      if (mediaPane) mediaPane.classList.add("rv-media-failed");
+    }
+    mediaEl.addEventListener("error", onMediaError);
+    segEls.forEach((el) => {
+      const go = () => seek(parseFloat(el.dataset.start));
+      el.addEventListener("click", go);
+      el.addEventListener("keydown", (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); go(); } });
+    });
+    if (mediaPane) mediaPane.addEventListener("keydown", (e) => {
+      if (e.key === " " && e.target === mediaPane) { e.preventDefault(); if (mediaEl.paused) mediaEl.play(); else mediaEl.pause(); }
+    });
+    /* A load failure before this deferred script ran has already fired "error"; catch it up. */
+    if (mediaEl.error) onMediaError();
+  }
+
+  /* initial state: fragment wins, else the lesson's start anchor. Stays below the media section: a #t= fragment calls seek(), which reads mediaEl. */
+  applyHash();
+  if (!pinned && !cueBox && data.start) showAnchor(data.start, { instant: true });
+  window.addEventListener("hashchange", applyHash);
+
+  /* ---- quiz: page-local, nothing stored ---- */
+  document.querySelectorAll(".rv-quiz form").forEach((form) => {
+    const questions = Array.from(form.querySelectorAll(".rv-q"));
+    /* Shuffle unless the author fixed the order; two choices (True/False) keep theirs. Grading uses authored indexes. */
+    questions.forEach((q) => {
+      const labels = Array.from(q.querySelectorAll(":scope > label"));
+      if (q.hasAttribute("data-fixed-order") || labels.length < 3) return;
+      for (let i = labels.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [labels[i], labels[j]] = [labels[j], labels[i]];
+      }
+      const fb = q.querySelector(".rv-q-feedback");
+      labels.forEach((l) => q.insertBefore(l, fb));
+    });
+    function grade(q) {
+      const chosen = q.querySelector("input:checked");
+      const fb = q.querySelector(".rv-q-feedback");
+      if (!chosen) { q.classList.remove("rv-correct", "rv-incorrect"); fb.hidden = true; return null; }
+      const right = chosen.value === q.dataset.answer;
+      q.classList.toggle("rv-correct", right);
+      q.classList.toggle("rv-incorrect", !right);
+      fb.textContent = right ? "Correct." : "Not quite. Try another answer.";
+      fb.hidden = false;
+      return right;
+    }
+    questions.forEach((q) => q.addEventListener("change", () => grade(q)));
+    form.addEventListener("submit", (e) => {
+      e.preventDefault();
+      const results = questions.map(grade);
+      const answered = results.filter((r) => r !== null).length;
+      const correct = results.filter((r) => r === true).length;
+      const score = form.querySelector(".rv-quiz-score");
+      score.textContent = answered < questions.length
+        ? correct + " of " + questions.length + " correct so far; " + (questions.length - answered) + " unanswered."
+        : correct + " of " + questions.length + " correct.";
+      score.hidden = false;
+    });
+  });
+
+  window.RV = { data, openPanel, setTheme, setCodeWidth, boxLines, clearBox, pin, showAnchor, applyHash, applyCue, seek, activeSegment,
+                get pinned() { return pinned; }, get boxed() { return boxed; },
+                setCueBox(r) { cueBox = r; } };
+})();

revision_engine/static/styles.css

@@ -0,0 +1,160 @@
+/* reVision engine stylesheet. Tokens first, then layout, then components. */
+:root {
+  --rv-bg: #ffffff;
+  --rv-bg-2: #f4f5f7;
+  --rv-fg: #1d2129;
+  --rv-muted: #5f6672;
+  --rv-line: #e1e4e8;
+  --rv-accent: #1f6feb;
+  --rv-box: rgba(31, 111, 235, 0.14);
+  --rv-box-edge: #1f6feb;
+  --rv-pin: #d29922;
+  --rv-rail-w: 48px;
+  --rv-panel-w: 0px;
+  --rv-code-w: 1fr;
+  --rv-media-h: 200px;
+  --rv-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --rv-mono: ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --rv-bg: #0f1218; --rv-bg-2: #171b23; --rv-fg: #e6e8ec; --rv-muted: #9aa3b2;
+    --rv-line: #2a3140; --rv-accent: #6ea8ff; --rv-box: rgba(110, 168, 255, 0.18); --rv-box-edge: #6ea8ff; --rv-pin: #e3b341;
+  }
+}
+:root[data-theme="dark"] {
+  --rv-bg: #0f1218; --rv-bg-2: #171b23; --rv-fg: #e6e8ec; --rv-muted: #9aa3b2;
+  --rv-line: #2a3140; --rv-accent: #6ea8ff; --rv-box: rgba(110, 168, 255, 0.18); --rv-box-edge: #6ea8ff; --rv-pin: #e3b341;
+}
+
+* { box-sizing: border-box; }
+html, body { height: 100%; margin: 0; }
+body.rv {
+  display: grid;
+  grid-template-columns: var(--rv-rail-w) var(--rv-panel-w) minmax(0, 1fr);
+  background: var(--rv-bg); color: var(--rv-fg); font: 15px/1.55 var(--rv-font);
+  overflow: hidden;
+}
+
+/* Explicit grid placement: the panel is display:none when closed, so nothing may slide into its column. */
+.rv-rail { grid-column: 1; }
+.rv-panel { grid-column: 2; }
+.rv-main { grid-column: 3; }
+
+/* Rail */
+.rv-rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; background: var(--rv-bg-2); border-right: 1px solid var(--rv-line); }
+.rv-rail-btn { width: 36px; height: 36px; border: 0; border-radius: 6px; background: transparent; color: var(--rv-muted); font-size: 18px; cursor: pointer; }
+.rv-rail-btn:hover, .rv-rail-btn[aria-pressed="true"] { color: var(--rv-fg); background: var(--rv-bg); }
+.rv-rail-spacer { flex: 1; }
+
+/* Side panel */
+.rv-panel { overflow: auto; padding: 12px 14px; background: var(--rv-bg-2); border-right: 1px solid var(--rv-line); }
+.rv-panel[hidden] { display: none; }
+.rv-panel h2 { font-size: 14px; margin: 4px 0 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--rv-muted); }
+.rv-panel h3 { font-size: 14px; margin: 12px 0 4px; }
+.rv-panel ol, .rv-panel ul { margin: 0; padding-left: 18px; }
+.rv-panel li { margin: 2px 0; }
+.rv-panel a { color: var(--rv-fg); text-decoration: none; }
+.rv-panel li.rv-current > a { color: var(--rv-accent); font-weight: 600; }
+.rv-variant, .rv-theme { border: 1px solid var(--rv-line); background: var(--rv-bg); color: var(--rv-fg); border-radius: 6px; padding: 4px 8px; cursor: pointer; font: inherit; }
+.rv-variant small { color: var(--rv-muted); }
+.rv-theme[aria-pressed="true"] { border-color: var(--rv-accent); color: var(--rv-accent); }
+.rv-theme-row { display: flex; gap: 6px; }
+
+/* Main two-pane area */
+.rv-main { display: grid; grid-template-columns: var(--rv-code-w) 6px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-width: 0; min-height: 0; height: 100vh; }
+.rv-code-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--rv-line); tab-size: 4; }
+.rv-code-head { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--rv-line); background: var(--rv-bg-2); font-size: 13px; }
+.rv-file { font-family: var(--rv-mono); }
+.rv-commit { color: var(--rv-muted); text-decoration: none; white-space: nowrap; }
+.rv-code-body { flex: 1; overflow: auto; padding: 8px 0; font: 13px/1.5 var(--rv-mono); }
+.rv-line { display: flex; white-space: pre; padding: 0 12px 0 0; border-left: 3px solid transparent; }
+.rv-ln { width: 56px; flex: none; text-align: right; padding-right: 14px; color: var(--rv-muted); user-select: none; }
+.rv-line.rv-boxed { background: var(--rv-box); border-left-color: var(--rv-box-edge); }
+.rv-line.rv-boxed.rv-box-start { box-shadow: inset 0 1px 0 var(--rv-box-edge); }
+.rv-line.rv-boxed.rv-box-end { box-shadow: inset 0 -1px 0 var(--rv-box-edge); }
+.rv-line.rv-boxed.rv-box-start.rv-box-end { box-shadow: inset 0 1px 0 var(--rv-box-edge), inset 0 -1px 0 var(--rv-box-edge); }
+body.rv-pinned .rv-line.rv-boxed { border-left-color: var(--rv-pin); }
+
+.rv-splitter { cursor: col-resize; background: var(--rv-line); }
+.rv-splitter:hover, .rv-splitter:focus { background: var(--rv-accent); outline: none; }
+
+.rv-right { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; height: 100vh; }
+.rv-lesson { overflow: auto; padding: 20px 28px 40px; max-width: 78ch; }
+.rv-crumb { margin: 0 0 4px; font-size: 13px; color: var(--rv-muted); }
+.rv-lesson h1 { font-size: 26px; margin: 0 0 12px; }
+.rv-lesson pre { background: var(--rv-bg-2); padding: 10px 12px; border-radius: 6px; overflow: auto; font: 13px/1.5 var(--rv-mono); }
+.rv-lesson code { font-family: var(--rv-mono); font-size: 0.92em; }
+.rv-lesson table { border-collapse: collapse; }
+.rv-lesson td, .rv-lesson th { border: 1px solid var(--rv-line); padding: 4px 8px; }
+.rv-pager { display: flex; justify-content: space-between; margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--rv-line); }
+.rv-pager a { color: var(--rv-accent); text-decoration: none; }
+
+/* Anchor phrases, intrinsics, diagrams */
+.rv-anchor { border-bottom: 2px solid var(--rv-box-edge); background: var(--rv-box); border-radius: 3px 3px 0 0; padding: 0 2px; cursor: pointer; }
+.rv-anchor:hover, .rv-anchor:focus { outline: 2px solid var(--rv-box-edge); outline-offset: 1px; }
+.rv-anchor.rv-pinned { border-bottom-color: var(--rv-pin); background: transparent; box-shadow: inset 0 -2px 0 var(--rv-pin); }
+.rv-intrinsic { color: var(--rv-accent); text-decoration: none; border-bottom: 1px dotted var(--rv-accent); }
+.rv-diagram { margin: 16px 0; text-align: center; }
+.rv-diagram svg { max-width: 100%; height: auto; }
+/* Graphviz emits black strokes and fills; recolour from tokens so diagrams follow the theme. */
+.rv-svg text { fill: var(--rv-fg); }
+.rv-svg .node polygon, .rv-svg .node ellipse, .rv-svg .node path, .rv-svg .edge path { stroke: var(--rv-fg); }
+.rv-svg .edge polygon { fill: var(--rv-fg); stroke: var(--rv-fg); }
+.rv-svg .node.rv-svg-anchor { cursor: pointer; }
+.rv-svg .node.rv-node-active polygon, .rv-svg .node.rv-node-active ellipse { stroke: var(--rv-box-edge); stroke-width: 2.5; fill: var(--rv-box); }
+.rv-diagram figcaption { font-size: 13px; color: var(--rv-muted); }
+
+/* Media pane */
+.rv-media { border-top: 1px solid var(--rv-line); background: var(--rv-bg-2); padding: 8px 12px; height: var(--rv-media-h); display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; column-gap: 0; }
+.rv-media[hidden] { display: none; }
+.rv-media audio, .rv-media video { width: 100%; max-height: 120px; grid-row: 1; grid-column: 1; }
+/* Firefox sizes the player's grid row from a 150px default height, not its 40px controls (#45); 54px is Chromium's, so only Firefox changes. */
+.rv-media audio { max-height: 54px; }
+.rv-media-toggle { grid-row: 1; grid-column: 2; align-self: start; margin-left: 6px; border: 1px solid var(--rv-line); background: var(--rv-bg); color: var(--rv-fg); border-radius: 6px; padding: 4px 8px; cursor: pointer; font: 13px/1.4 var(--rv-font); }
+.rv-media-toggle:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 1px; }
+.rv-media-toggle[hidden] { display: none; }
+.rv-media-toggle[aria-expanded="false"] .rv-media-chev { display: inline-block; transform: rotate(-90deg); }
+.rv-transcript { margin: 0; padding: 0 0 0 20px; overflow: auto; font-size: 14px; grid-row: 2; grid-column: 1 / -1; }
+.rv-seg { cursor: pointer; padding: 2px 4px; border-radius: 4px; color: var(--rv-muted); }
+.rv-seg:hover, .rv-seg:focus { background: var(--rv-bg); outline: none; }
+.rv-seg.rv-active { color: var(--rv-fg); background: var(--rv-box); }
+.rv-media-error { color: var(--rv-muted); }
+/* Media failed to load: message first, transcript scrolls below it, pane shrinks to content up to --rv-media-h. */
+.rv-media.rv-media-failed { height: auto; max-height: var(--rv-media-h); }
+.rv-media-failed .rv-media-error { grid-row: 1; grid-column: 1; margin: 0; }
+/* Collapsed by the reader: only the toggle remains, as a full-width strip; the lesson takes the freed height. */
+.rv-media.rv-media-collapsed { height: auto; max-height: none; padding: 0; border-top-width: 0; display: block; }
+.rv-media-collapsed > :not(.rv-media-toggle) { display: none; }
+.rv-media-collapsed .rv-media-toggle { display: block; width: 100%; margin: 0; border-radius: 0; border: 0; border-top: 1px solid var(--rv-line); text-align: left; }
+
+/* Quiz */
+.rv-quiz { margin-top: 28px; padding: 14px 16px; border: 1px solid var(--rv-line); border-radius: 8px; }
+.rv-quiz h2 { margin: 0 0 8px; font-size: 18px; }
+.rv-q { border: 0; padding: 0; margin: 0 0 12px; }
+.rv-q legend { font-weight: 600; padding: 0; }
+.rv-q label { display: block; margin: 2px 0; }
+.rv-q-feedback { margin: 4px 0 0; font-size: 14px; }
+.rv-q.rv-correct .rv-q-feedback { color: #1a7f37; }
+.rv-q.rv-incorrect .rv-q-feedback { color: #cf222e; }
+.rv-quiz button { border: 1px solid var(--rv-line); background: var(--rv-bg-2); color: var(--rv-fg); border-radius: 6px; padding: 6px 12px; cursor: pointer; font: inherit; }
+.rv-quiz-score { font-weight: 600; }
+
+/* Narrow layout: stack panes, rail becomes a top bar */
+@media (max-width: 900px) {
+  body.rv { grid-template-columns: 1fr; grid-template-rows: var(--rv-rail-w) auto minmax(0, 1fr); height: 100vh; }
+  .rv-rail { grid-column: 1; grid-row: 1; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--rv-line); padding: 0 6px; }
+  .rv-panel { grid-column: 1; grid-row: 2; border-right: 0; border-bottom: 1px solid var(--rv-line); max-height: 40vh; }
+  .rv-main { grid-column: 1; grid-row: 3; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 6px minmax(0, 1fr); height: auto; min-height: 0; }
+  .rv-code-pane { border-right: 0; border-bottom: 1px solid var(--rv-line); }
+  .rv-splitter { cursor: row-resize; }
+  .rv-right { height: auto; }
+  .rv-lesson { padding: 16px; }
+  /* The media pane shares .rv-right with the lesson: cap it at half, so the lesson keeps at least as much (#13).
+     Guarded because a var() inside min() defeats the cascade fallback: an engine without cq units would make the height auto and grow the pane to fit the transcript. */
+  @supports (height: 1cqh) {
+    .rv-right { container-type: size; }
+    .rv-media { height: min(var(--rv-media-h), 50cqh); }
+    .rv-media.rv-media-failed { max-height: min(var(--rv-media-h), 50cqh); }
+  }
+}