buninu-browser 0.1.0 → 0.2.1

package/lib/renderer/page-renderer.js

@@ -23,24 +23,57 @@
  * after the load event.
  */
 import CanvasKitInit from "../../usr/lib/canvaskit/canvaskit.js";
+import { DESKTOP_USER_AGENT } from "../user-agent.js";
 import { parseHTMLDocument } from "../happy-dom/parser.js";
-import { layoutText } from "../layout/text-layout.js";
+import { LayoutEngine } from "../layout/text-layout.js";
 import { ScrollViewport } from "../layout/scroll-viewport.js";
 import { elementBounds, hitTest, interactiveRegions } from "../input/hit-test.js";
-import { RenderTreeBuilder, renderTreeText } from "../render-tree/index.js";
-import { StyleEngine } from "../style/computed-style.js";
+import { RenderTreeBuilder, renderTreeText, sameLayoutInput } from "../render-tree/index.js";
+import { matchSelectors, StyleEngine, topmostConnected } from "../style/computed-style.js";
+import { compileSelector, matchesCompiled } from "../happy-dom/selector-matcher.js";
+import { elementFeatures, sheetTraits } from "../style/selector-traits.js";
 import { buildDisplayList, visibleItems } from "../paint/display-list.js";
 import { backgroundBytes, cropViewport, encodeImage } from "../paint/frame.js";
-import { createPageRealm } from "./page-realm.js";
+import { CLASSIC_SCRIPT_TYPES, createPageRealm } from "./page-realm.js";
 import { MOBILE_USER_AGENT } from "./flags.js";
+import { formatHint } from "../../vendor/wasmpeg/src/js/formats.js";
+import { floatToS16, splitSamples } from "../audio/pcm.js";
+import { pianoNote, PianoMixer } from "../audio/piano.js";
 
 // Captured at load: in host mode page scripts share this global object.
 const hostPerformance = globalThis.performance;
 const hostSetTimeout = globalThis.setTimeout;
 const hostClearTimeout = globalThis.clearTimeout;
+const hostSetInterval = globalThis.setInterval;
+const hostClearInterval = globalThis.clearInterval;
 
 /** How long subresources may take before a preview of the unstyled document is shown. */
 export const PREVIEW_DELAY_MS = 300;
+const MAX_COMPILED_COMPOUNDS = 10_000;
+
+// Media controls: the bar's height over video, and where its parts sit.
+const MEDIA_BAR_HEIGHT = 24;
+// Decoded audio already sent, kept so pause/resume continues exactly without decoding again.
+const AUDIO_HISTORY_SECONDS = 3;
+
+/**
+ * Horizontal layout of a media control bar `width` CSS pixels wide: the
+ * play/pause mark takes the first 30, then "m:ss / m:ss" when there is room,
+ * then the progress track that clicks seek.
+ */
+export function mediaBarLayout(width) {
+  const timeWidth = width >= 200 ? 86 : 0;
+  const trackStart = 30 + timeWidth;
+  return { timeStart: 30, timeWidth, trackStart, trackEnd: Math.max(trackStart + 10, width - 12) };
+}
+
+export function formatMediaTime(seconds) {
+  const whole = Math.floor(seconds);
+  const hours = Math.floor(whole / 3600);
+  const minutes = Math.floor(whole / 60) % 60;
+  const rest = String(whole % 60).padStart(2, "0");
+  return hours ? `${hours}:${String(minutes).padStart(2, "0")}:${rest}` : `${minutes}:${rest}`;
+}
 
 const canvasKitDirectory = new URL("../../usr/lib/canvaskit/", import.meta.url);
 const fontDirectory = new URL("../../usr/share/fonts/", import.meta.url);
@@ -49,10 +82,12 @@ const fontDirectory = new URL("../../usr/share/fonts/", import.meta.url);
  * @param {{
  *   fetchResource(url: string, kind: "stylesheet" | "image" | "script" | "metadata" | "video"):
  *     Promise<{ ok: boolean, status: number, url: string, contentType: string, body: Uint8Array }>,
- *   requestNavigation?(url: string): void,
+ *   requestNavigation?(url: string, downloadName?: string | null, fragmentFrom?: { x: number, y: number } | null): void,
+ *   requestDownload?(payload: { url: string, name: string, data: Uint8Array }): void,
  *   reportError?(message: string): void,
  *   pageFetch?(request: object): Promise<object>,
  *   webSockets?: { open(url, protocols, onEvent): number, send(id, data): void, close(id, code, reason): void } | null,
+ *   audio?: { open(options, onEvent): number, write(id, data): void, finish(id): void, close(id): void } | null,
  *   setCookie?(value: string): void,
  *   consoleMessage?: ((level: string, text: string) => void) | null,
  *   trace?: ((text: string) => void) | null,
@@ -62,11 +97,13 @@ const fontDirectory = new URL("../../usr/share/fonts/", import.meta.url);
  * }} options
  */
 export async function createPageRenderer({
-  fetchResource,
+  fetchResource: rawFetchResource,
   requestNavigation = () => {},
+  requestDownload = () => {},
   reportError = () => {},
   pageFetch = () => Promise.reject(new TypeError("network access is not available")),
   webSockets = null,
+  audio = null,
   setCookie = () => {},
   consoleMessage = null,
   trace = null,
@@ -74,6 +111,8 @@ export async function createPageRenderer({
   onLifecycle = null,
   videoDecoder = null,
   mobile = false,
+  verifyStyle = false,
+  fullStyle = false,
 }) {
   const wasmBinary = await Bun.file(new URL("canvaskit.wasm", canvasKitDirectory)).arrayBuffer();
   const CanvasKit = await CanvasKitInit({ wasmBinary });
@@ -130,7 +169,24 @@ export async function createPageRenderer({
   const graphemes = new Intl.Segmenter(undefined, { granularity: "grapheme" });
   const emojiPresentation = /^\p{Emoji_Presentation}/u;
   const renderTreeBuilder = new RenderTreeBuilder();
+  const layoutEngine = new LayoutEngine({ measureText, fontMetrics });
   const styleEngine = new StyleEngine();
+  // Incremental restyle: what may have changed style since the last
+  // computation. DOM mutations come from a MutationObserver; state that is
+  // not in the DOM tree (checked, value, focus) is marked by the code that
+  // changes it. `full` asks for a complete restyle.
+  const styleChanges = { full: true, roots: new Set(), rootFeatures: new Map(), records: [], observer: null, activeElement: null };
+  let selectorTraits = { sibling: false, has: null, sheets: null };
+  let lastStyleParts = "";
+  let laidOutSheets = null;
+  const sheetTraitsCache = new Map();
+  // Invalidation compounds compiled for matchesCompound() and matchSelectors().
+  const compiledCompounds = new Map();
+  let lastStyleReason = "";
+  let hasState = null;
+  let hasStateStale = false;
+  let structuralState = null;
+  let siblingState = null;
   const viewport = new ScrollViewport(800, 600);
   const page = {
     url: "about:blank",
@@ -149,19 +205,31 @@ export async function createPageRenderer({
     hints: [],
     hintsVisible: false,
     styleSheets: [],
+    linkSheets: null,
+    // The document's scripts fetched ahead of their turn (see preloadScripts), by URL.
+    preloadedScripts: new Map(),
     backgroundColor: "rgba(255, 255, 255, 1)",
     resources: new WeakMap(),
     decodedImages: [],
-    videos: new Map(),
+    imagesLoaded: null,
+    // <video> and <audio> playback states, by element (see playMedia).
+    media: new Map(),
     realm: null,
     // "off" until the renderer process has set up its sandbox.
     scripting: "off",
     dirty: false,
-    userAgent: mobile ? MOBILE_USER_AGENT : "Mozilla/5.0 (X11; Linux) BuninuBrowser/0.0.1",
+    resourceLayoutDirty: false,
+    userAgent: mobile ? MOBILE_USER_AGENT : DESKTOP_USER_AGENT,
     // document.cookie as last reported by the controller (non-HttpOnly only).
     cookie: "",
   };
 
+  async function fetchResource(url, kind) {
+    const response = await rawFetchResource(url, kind);
+    if (typeof response.documentCookie === "string") page.cookie = response.documentCookie;
+    return response;
+  }
+
   function makeParagraph(text, computedStyle = null, fontSize = computedStyle?.fontSize ?? 16, scale = 1) {
     const color = canvasColor(CanvasKit, computedStyle?.color ?? "rgba(0, 0, 0, 1)");
     const weight = computedStyle?.fontWeight ?? 400;
@@ -416,7 +484,10 @@ export async function createPageRenderer({
     frameTimer = hostSetTimeout(() => {
       frameTimer = null;
       refresh();
-    }, Math.max(50, lastRebuildMs));
+    // Leave one rebuild-sized idle window after an expensive frame. Without
+    // it, a large document can spend all its time producing back-to-back
+    // frames while scripts are still making related mutations.
+    }, Math.max(50, lastRebuildMs * 2));
   }
 
   /** The viewport as a PNG (base64), cut from the latest tile. */
@@ -585,15 +656,17 @@ export async function createPageRenderer({
           const path = CanvasKit.Path.MakeFromSVGString(
             `M ${centerX - 6 * scale} ${centerY - 10 * scale} L ${centerX + 11 * scale} ${centerY} L ${centerX - 6 * scale} ${centerY + 10 * scale} Z`);
           if (path) { canvas.drawPath(path, paint); path.delete(); }
-        } else {
-          const bar = CanvasKit.XYWHRect(rect[0], rect[3] - 24 * scale, rect[2] - rect[0], 24 * scale);
-          canvas.drawRect(bar, paint);
-          paint.setColor(CanvasKit.Color(255, 255, 255, 1));
-          canvas.drawRect(CanvasKit.XYWHRect(rect[0] + 10 * scale, rect[3] - 18 * scale, 4 * scale, 12 * scale), paint);
-          canvas.drawRect(CanvasKit.XYWHRect(rect[0] + 17 * scale, rect[3] - 18 * scale, 4 * scale, 12 * scale), paint);
         }
-        canvas.restore();
+        // The control bar (play/pause, time, seekable progress) once playing or known.
+        if (resource?.playing || Number.isFinite(resource?.duration)) {
+          drawMediaBar(canvas, item.rect.x - view.x, item.rect.y + item.rect.height - MEDIA_BAR_HEIGHT - view.y,
+            item.rect.width, MEDIA_BAR_HEIGHT, resource, scale, true);
+        }
         paint.delete();
+        canvas.restore();
+      } else if (item.op === "drawAudio") {
+        const resource = displayList.images[item.image];
+        drawMediaBar(canvas, item.rect.x - view.x, item.rect.y - view.y, item.rect.width, item.rect.height, resource, scale, false);
       } else if (item.op === "drawSvg") {
         drawSvg(item);
       } else if (item.op === "drawText") {
@@ -694,6 +767,53 @@ export async function createPageRenderer({
 
   // Overlays are placed in page coordinates (viewport position plus the
   // scroll offset when they were created), so they stay on their element.
+  /**
+   * A media control bar in CSS pixels at (x, y), relative to the tile: a
+   * play/pause mark, "m:ss / m:ss" and a progress track that clicks seek
+   * (see mediaBarLayout). Video draws it over the picture, audio as its box.
+   */
+  function drawMediaBar(canvas, x, y, width, height, resource, scale, overlay) {
+    const paint = new CanvasKit.Paint();
+    paint.setAntiAlias(true);
+    const box = CanvasKit.XYWHRect(x * scale, y * scale, width * scale, height * scale);
+    paint.setColor(overlay ? CanvasKit.Color(0, 0, 0, 0.65) : CanvasKit.Color(241, 243, 244, 1));
+    if (overlay) canvas.drawRect(box, paint);
+    else canvas.drawRRect(CanvasKit.RRectXY(box, height / 2 * scale, height / 2 * scale), paint);
+    paint.setColor(overlay ? CanvasKit.Color(255, 255, 255, 1) : CanvasKit.Color(32, 33, 36, 1));
+    const middle = (y + height / 2) * scale;
+    const iconX = (x + 12) * scale;
+    if (resource?.playing) {
+      canvas.drawRect(CanvasKit.XYWHRect(iconX, middle - 6 * scale, 3.5 * scale, 12 * scale), paint);
+      canvas.drawRect(CanvasKit.XYWHRect(iconX + 6.5 * scale, middle - 6 * scale, 3.5 * scale, 12 * scale), paint);
+    } else {
+      const path = CanvasKit.Path.MakeFromSVGString(
+        `M ${iconX} ${middle - 7 * scale} L ${iconX + 11 * scale} ${middle} L ${iconX} ${middle + 7 * scale} Z`);
+      if (path) { canvas.drawPath(path, paint); path.delete(); }
+    }
+    const layout = mediaBarLayout(width);
+    const duration = resource?.duration;
+    const time = Math.max(0, Math.min(Number.isFinite(duration) ? duration : Infinity, resource?.time ?? 0));
+    if (layout.timeWidth) {
+      const text = `${formatMediaTime(time)} / ${Number.isFinite(duration) ? formatMediaTime(duration) : "--:--"}`;
+      const paragraph = makeParagraph(text, { color: overlay ? "rgba(255, 255, 255, 1)" : "rgba(32, 33, 36, 1)",
+        fontFamily: ["sans-serif"], fontWeight: 400 }, 11, scale);
+      paragraph.layout(layout.timeWidth * scale);
+      canvas.drawParagraph(paragraph, (x + layout.timeStart) * scale, middle - paragraph.getHeight() / 2);
+      paragraph.delete();
+    }
+    const trackStart = (x + layout.trackStart) * scale;
+    const trackWidth = (layout.trackEnd - layout.trackStart) * scale;
+    paint.setColor(overlay ? CanvasKit.Color(255, 255, 255, 0.35) : CanvasKit.Color(0, 0, 0, 0.18));
+    canvas.drawRRect(CanvasKit.RRectXY(CanvasKit.XYWHRect(trackStart, middle - 2 * scale, trackWidth, 4 * scale), 2 * scale, 2 * scale), paint);
+    if (Number.isFinite(duration) && duration > 0) {
+      const played = trackWidth * time / duration;
+      paint.setColor(overlay ? CanvasKit.Color(255, 255, 255, 1) : CanvasKit.Color(26, 115, 232, 1));
+      canvas.drawRRect(CanvasKit.RRectXY(CanvasKit.XYWHRect(trackStart, middle - 2 * scale, played, 4 * scale), 2 * scale, 2 * scale), paint);
+      canvas.drawCircle(trackStart + played, middle, 5 * scale, paint);
+    }
+    paint.delete();
+  }
+
   function drawHints(canvas, region) {
     if (!page.hintsVisible) return;
     const paint = new CanvasKit.Paint();
@@ -733,7 +853,311 @@ export async function createPageRenderer({
     replaceParsedDocument(parseHTMLDocument(html, url), styleSheets, imageResources);
   }
 
-  function replaceParsedDocument(parsed, styleSheets = [], imageResources = emptyImageResources()) {
+  /** `linkSheets` (link element -> { url, text }) makes the sheet list follow the DOM; without it the given sheets are fixed. */
+  /** Marks a node whose own state changed (its subtree may restyle); null asks for a full restyle. */
+  function markStyleDirty(node, features = [":state"]) {
+    // Documents and fragments carry no state selectors read; their children's
+    // changes arrive as mutation records.
+    if (node?.nodeType === 9 || node?.nodeType === 11) return;
+    const element = node?.nodeType === 1 ? node : node?.parentElement;
+    if (!element) styleChanges.full ||= node ? `touched ${node.nodeName}` : "unknown change";
+    else {
+      styleChanges.roots.add(element);
+      const previous = styleChanges.rootFeatures.get(element);
+      styleChanges.rootFeatures.set(element, previous ? [...new Set([...previous, ...features])] : features);
+    }
+  }
+
+  function observeStyleChanges(document) {
+    styleChanges.observer?.disconnect();
+    styleChanges.records = [];
+    styleChanges.roots = new Set();
+    styleChanges.rootFeatures = new Map();
+    styleChanges.full = "new document";
+    styleChanges.activeElement = null;
+    const observer = new page.window.MutationObserver((records) => { styleChanges.records.push(...records); });
+    observer.observe(document, { subtree: true, childList: true, attributes: true, attributeOldValue: true, characterData: true });
+    styleChanges.observer = observer;
+  }
+
+  /**
+   * What the stylesheets' selectors make sensitive: sibling combinators let
+   * a change restyle the following siblings; :has() lets one change the
+   * match of an ancestor (or, with + and ~, of an earlier sibling), so the
+   * compounds that contain it are re-checked there (`hasCompounds`).
+   */
+  function selectorTraitsFor(sheets) {
+    if (selectorTraits.sheets === sheets) return selectorTraits;
+    const parts = sheets.map(sheetTraitsFor);
+    // Only the sheets in use stay cached.
+    if (sheetTraitsCache.size > sheets.length) for (const sheet of new Set(sheetTraitsCache.keys()).difference(new Set(sheets))) sheetTraitsCache.delete(sheet);
+    const union = (key) => new Set(parts.flatMap((part) => [...part[key]]));
+    const any = (key) => parts.some((part) => part[key]);
+    selectorTraits = {
+      sheets, sibling: any("sibling"), hasSiblings: any("hasSiblings"),
+      hasCompounds: [...union("hasCompounds")], structuralCompounds: [...union("structuralCompounds")],
+      descendantFeatures: union("descendantFeatures"), siblingFeatures: union("siblingFeatures"),
+      descendantStateCompounds: parts.flatMap((part) => part.descendantStateCompounds),
+      siblingTargetCompounds: [...union("siblingTargetCompounds")],
+      forward: any("forward"), firstChild: any("firstChild"), backward: any("backward"), lastChild: any("lastChild"),
+      defined: any("defined"), target: any("target"),
+    };
+    // Checked against the old compounds this time, re-recorded after the restyle.
+    hasStateStale = true;
+    return selectorTraits;
+  }
+
+  /**
+   * One sheet's share of `selectorTraitsFor`, cached by its text (sheets come
+   * and go one at a time, and parsing all of them again is slow).
+   */
+  function sheetTraitsFor(sheet) {
+    let traits = sheetTraitsCache.get(sheet);
+    if (traits) return traits;
+    traits = sheetTraits(sheet);
+    sheetTraitsCache.set(sheet, traits);
+    return traits;
+  }
+
+  /**
+   * Which elements match each :has() and non-subject structural compound, as
+   * of the last restyle. After an incremental round the kept maps are
+   * current, so only compounds new to the sheets are looked up.
+   */
+  function recordHasState(traits) {
+    const reuse = hasState !== null;
+    if (compiledCompounds.size >= MAX_COMPILED_COMPOUNDS) compiledCompounds.clear();
+    const record = (compounds, previous) => {
+      const missing = compounds.filter((compound) => !(reuse && previous?.has(compound)));
+      const matched = missing.length ? matchSelectors(page.document, missing, compiledCompounds) : null;
+      const state = new Map();
+      for (const compound of compounds) {
+        if (reuse && previous?.has(compound)) state.set(compound, previous.get(compound));
+        else if (matched.has(compound)) state.set(compound, matched.get(compound)); // invalid ones never match
+      }
+      return state;
+    };
+    hasState = record(traits.hasCompounds, hasState);
+    structuralState = record(traits.structuralCompounds, structuralState);
+    siblingState = record(traits.siblingTargetCompounds, siblingState);
+  }
+
+  /** Brings the recorded matches of an inserted subtree up to date (it may have been in the document before). */
+  function recordInserted(root) {
+    const states = [hasState, structuralState, siblingState].filter(Boolean);
+    const now = matchSelectors(root, states.flatMap((state) => [...state.keys()]), compiledCompounds);
+    for (const state of states) {
+      for (const [compound, matched] of state) {
+        const inside = now.get(compound);
+        if (!inside) continue;
+        for (const element of [root, ...root.getElementsByTagName("*")]) {
+          if (inside.has(element)) matched.add(element); else matched.delete(element);
+        }
+      }
+    }
+  }
+
+
+  /** element.matches(compound), with the compound compiled once (see matchSelectors). */
+  function matchesCompound(element, compound) {
+    let compiled = compiledCompounds.get(compound);
+    if (compiled === undefined) {
+      compiled = compileSelector(element, compound);
+      if (compiled === undefined) return element.matches(compound);
+      if (compiledCompounds.size >= MAX_COMPILED_COMPOUNDS) compiledCompounds.clear();
+      compiledCompounds.set(compound, compiled);
+    }
+    return compiled !== null && matchesCompiled(element, compiled);
+  }
+
+  /** Re-checks `element` against recorded compounds; whether any match changed (the state is updated). */
+  function matchesChanged(state, element) {
+    let changed = false;
+    for (const [compound, matched] of state ?? []) {
+      let now = false;
+      try { now = matchesCompound(element, compound); } catch {}
+      if (now === matched.has(element)) continue;
+      if (now) matched.add(element); else matched.delete(element);
+      changed = true;
+    }
+    return changed;
+  }
+
+  /**
+   * Elements whose :has() matches changed around a mutated node: its
+   * ancestors (and their earlier siblings for :has(+ / ~)), re-checked
+   * against the recorded state, which is updated as it goes.
+   */
+  function hasChanges(traits, node, add, checked) {
+    if (!hasState || hasState.size === 0) return;
+    for (let element = node?.nodeType === 1 ? node : node?.parentElement; element; element = element.parentElement) {
+      // The records describe one final DOM, so each element is checked once a
+      // round; its ancestors were too when it was.
+      if (checked.has(element)) return;
+      const candidates = [element];
+      if (traits.hasSiblings) for (let sibling = element.previousElementSibling; sibling; sibling = sibling.previousElementSibling) candidates.push(sibling);
+      for (const candidate of candidates) {
+        if (candidate !== element && checked.has(candidate)) continue;
+        checked.add(candidate);
+        for (const [compound, matched] of hasState) {
+          let now = false;
+          try { now = matchesCompound(candidate, compound); } catch {}
+          if (now === matched.has(candidate)) continue;
+          if (now) matched.add(candidate); else matched.delete(candidate);
+          add(candidate);
+        }
+      }
+    }
+  }
+
+  /**
+   * The style computation's dirty set, or null for a full restyle. Pending
+   * mutation records become subtree roots: an attribute change restyles the
+   * element's subtree (descendant selectors), a child list change its
+   * parent's (structural pseudo-classes), with siblings included when the
+   * sheets use sibling combinators; a change :has() may observe restyles all.
+   */
+  function takeStyleChanges(sheets) {
+    const traits = selectorTraitsFor(sheets);
+    const records = styleChanges.records;
+    if (styleChanges.observer) records.push(...styleChanges.observer.takeRecords());
+    const roots = styleChanges.roots;
+    // Explicit roots mean that state-dependent selectors may need restyling;
+    // they do not by themselves change render-tree content. DOM mutation
+    // records below identify structural/content changes separately.
+    let treeDirty = false;
+    let full = styleChanges.full;
+    const active = page.document.activeElement;
+    if (active !== styleChanges.activeElement) {
+      // :focus, :focus-within and :focus-visible follow the focused element.
+      if (styleChanges.activeElement !== null) full ||= "focus moved";
+      styleChanges.activeElement = active;
+    }
+    // Elements whose subtree restyles (`roots`), and elements whose own
+    // matches may change but whose subtree restyles only if their style does
+    // (`self`, decided by the style engine).
+    const self = new Set();
+    const add = (element) => roots.add(element);
+    // Elements already re-checked this round against the :has(), sibling and structural state.
+    const hasChecked = new Set();
+    const siblingChecked = new Set();
+    const structuralChecked = new Set();
+    const inserted = new Set();
+    // Siblings after a change: their own matches may differ; their subtrees
+    // only when a non-subject compound right of + / ~ now matches differently.
+    const laterSibling = (element) => {
+      self.add(element);
+      if (siblingChecked.has(element)) return;
+      siblingChecked.add(element);
+      if (matchesChanged(siblingState, element)) roots.add(element);
+    };
+    const later = (element) => { for (let next = element?.nextElementSibling; next; next = next.nextElementSibling) laterSibling(next); };
+    const featureMatches = (used, changedFeatures) => changedFeatures.some((feature) => feature === ":state"
+      ? [...used].some((candidate) => candidate.startsWith(":"))
+      : used.has(feature));
+    const stateAffectsDescendants = (element, changedFeatures) => {
+      const states = changedFeatures.filter((feature) => feature.startsWith(":"));
+      if (!states.length) return false;
+      const available = new Set(elementFeatures(element));
+      return traits.descendantStateCompounds.some((entry) => (states.includes(":state") || entry.states.some((state) => states.includes(state)))
+        && entry.required.every((feature) => available.has(feature)));
+    };
+    /** An element whose features changed: itself, and wider where non-subject compounds use them. */
+    const changed = (element, features) => {
+      self.add(element);
+      const ordinary = features.filter((feature) => !feature.startsWith(":"));
+      if (featureMatches(traits.descendantFeatures, ordinary) || stateAffectsDescendants(element, features)) roots.add(element);
+      if (traits.siblingFeatures.has("*") || featureMatches(traits.siblingFeatures, features)) later(element);
+      hasChanges(traits, element, add, hasChecked);
+    };
+    const touchSibling = (element) => {
+      self.add(element);
+      if (structuralChecked.has(element)) return;
+      structuralChecked.add(element);
+      if (matchesChanged(structuralState, element)) roots.add(element);
+    };
+    if (!full && !hasState) full = "first restyle";
+    // Marked elements: state outside the DOM (checked, value) or a DOM change
+    // the records also describe; both start as a change of the element's state.
+    for (const element of [...roots]) {
+      roots.delete(element);
+      if (!full) changed(element, styleChanges.rootFeatures.get(element) ?? [":state"]);
+    }
+    for (const record of records) {
+      if (full) break;
+      const target = record.target;
+      if (record.type === "attributes") {
+        if (target.nodeType !== 1) continue;
+        const name = record.attributeName;
+        // data/ARIA/title changes have no direct render-tree representation;
+        // selectors that observe them are handled by the style diff below.
+        // Other attributes may alter controls, replaced elements or visibility.
+        if (!name.startsWith("data-") && !name.startsWith("aria-") && name !== "title") treeDirty = true;
+        const features = ["[" + name];
+        if (name === "class") {
+          const before = new Set(String(record.oldValue ?? "").split(/\s+/).filter(Boolean));
+          const after = new Set(target.classList);
+          for (const value of before) if (!after.has(value)) features.push("." + value);
+          for (const value of after) if (!before.has(value)) features.push("." + value);
+        } else if (name === "id") {
+          if (record.oldValue) features.push("#" + record.oldValue);
+          const id = target.getAttribute("id");
+          if (id) features.push("#" + id);
+        }
+        changed(target, features);
+      } else if (record.type === "childList") {
+        treeDirty = true;
+        if (target.nodeType !== 1) { full = `children of ${target.nodeName}`; break; }
+        // Inserted elements restyle; the parent itself may change (:empty);
+        // siblings around the change point may match structural
+        // pseudo-classes differently, and the ones after it sibling
+        // combinators whose left side the inserted or removed nodes match.
+        for (const node of record.addedNodes) {
+          if (node.nodeType === 1 && node.parentElement === target) {
+            add(node);
+            inserted.add(node);
+          }
+        }
+        self.add(target);
+        hasChanges(traits, target, add, hasChecked);
+        let next = record.nextSibling;
+        while (next && next.nodeType !== 1) next = next.nextSibling;
+        let previous = record.previousSibling;
+        while (previous && previous.nodeType !== 1) previous = previous.previousSibling;
+        if (next?.parentElement !== target) next = null;
+        if (previous?.parentElement !== target) previous = null;
+        if (traits.forward) for (let element = next; element; element = element.nextElementSibling) touchSibling(element);
+        else if (traits.firstChild && next) touchSibling(next);
+        if (traits.backward) for (let element = previous; element; element = element.previousElementSibling) touchSibling(element);
+        else if (traits.lastChild && previous) touchSibling(previous);
+        if (next && traits.siblingFeatures.size) {
+          const moved = [...record.addedNodes, ...record.removedNodes, previous].filter((node) => node?.nodeType === 1);
+          if (traits.siblingFeatures.has("*") || moved.some((node) => elementFeatures(node).some((feature) => traits.siblingFeatures.has(feature)))) {
+            for (let element = next; element; element = element.nextElementSibling) laterSibling(element);
+          }
+        }
+      } else if (record.type === "characterData") {
+        treeDirty = true;
+        // Only :empty and :has() can see text: the parent itself.
+        const parent = target.parentElement;
+        if (parent) {
+          self.add(parent);
+          hasChanges(traits, parent, add, hasChecked);
+        }
+      }
+    }
+    if (!full) for (const node of topmostConnected(inserted, page.document)) recordInserted(node);
+    styleChanges.records = [];
+    styleChanges.roots = new Set();
+    styleChanges.rootFeatures = new Map();
+    styleChanges.full = false;
+    lastStyleReason = full || `${roots.size} root(s), ${self.size} self`;
+    if (full) hasState = null; // recorded again after the full restyle
+    return full ? null : { roots, self, treeDirty };
+  }
+
+  function replaceParsedDocument(parsed, styleSheets = [], imageResources = emptyImageResources(), linkSheets = null) {
+    closePiano();
     disposeVideos();
     page.realm?.dispose();
     page.realm = null;
@@ -741,11 +1165,14 @@ export async function createPageRenderer({
     for (const image of page.decodedImages) image.delete();
     page.window = parsed.window;
     page.document = parsed.document;
+    observeStyleChanges(parsed.document);
     page.title = parsed.document.title;
     page.styleSheets = styleSheets;
+    page.linkSheets = linkSheets;
     page.resources = imageResources.map;
     initializeVideos(parsed.document, page.resources);
     page.decodedImages = imageResources.decoded;
+    page.imagesLoaded = null;
     imageRequests = new WeakMap();
     const timing = styleAndLayout();
     trace?.(`${page.url}: first style ${timing.style}ms, layout ${timing.layout}ms`);
@@ -759,27 +1186,94 @@ export async function createPageRenderer({
   /** Style, render tree, layout and display list of the current document. */
   function styleAndLayout() {
     const started = hostPerformance.now();
-    styleEngine.compute(page.document, page.styleSheets, { width: page.width, height: page.height, mobile });
+    const ms = (from, to) => Math.round(to - from);
+    const sheets = currentStyleSheets();
+    const environment = { width: page.width, height: page.height, mobile };
+    const changes = takeStyleChanges(sheets); // drained even when unused, so records do not pile up
+    const taken = hostPerformance.now();
+    // A rendering opportunity can be scheduled by lifecycle work which did
+    // not actually change DOM, state, resources, or styles. Keep the retained
+    // layout/display list in that case instead of laying the whole page out.
+    if (page.renderTree && !page.resourceLayoutDirty && sheets === laidOutSheets && changes
+      && changes.roots.size === 0 && changes.self.size === 0) {
+      lastStyleParts = `changes ${Math.round(taken - started)}, no invalidation`;
+      return { style: Math.round(taken - started), layout: 0, skipped: true };
+    }
+    styleEngine.compute(page.document, sheets, environment, fullStyle ? null : changes?.roots ?? null, changes?.self ?? null);
+    const computed = hostPerformance.now();
+    if (!hasState || hasStateStale) {
+      recordHasState(selectorTraitsFor(sheets));
+      hasStateStale = false;
+    }
+    const recorded = hostPerformance.now();
+    // Attribute mutations used by application bookkeeping often match no
+    // different rule and do not alter render-tree content. Once style has
+    // proved that no element changed, retain layout and paint unchanged.
+    if (page.renderTree && !page.resourceLayoutDirty && sheets === laidOutSheets && changes
+      && !changes.treeDirty && styleEngine.incremental && styleEngine.restyled === 0) {
+      lastStyleParts = `changes ${ms(started, taken)}, compute ${ms(taken, computed)}, record ${ms(computed, recorded)}, no visual change`;
+      return { style: Math.round(recorded - started), layout: 0, skipped: true };
+    }
+    if (verifyStyle && styleEngine.incremental) verifyIncrementalStyle(sheets, environment);
+    const verified = hostPerformance.now();
     page.backgroundColor = documentBackground(page.document, styleEngine);
-    page.renderTree = renderTreeBuilder.build(page.document, styleEngine, page.resources);
+    const nextRenderTree = renderTreeBuilder.build(page.document, styleEngine, page.resources);
     const styled = hostPerformance.now();
-    page.layout = layoutText(page.renderTree, {
+    lastStyleParts = `changes ${ms(started, taken)}, compute ${ms(taken, computed)}, record ${ms(computed, recorded)}, tree ${ms(verified, styled)}`;
+    // MutationObserver also reports changes under non-rendered nodes such as
+    // script and metadata elements. Compare the actual immutable layout input
+    // after rebuilding it, so those changes do not trigger a full reflow.
+    if (page.renderTree && !page.resourceLayoutDirty && sheets === laidOutSheets
+      && sameLayoutInput(page.renderTree.root, nextRenderTree.root, {
+        ignoreResources: true,
+        // A zero-element incremental pass retained every computed style.
+        // Control placeholders may still wrap that style in a fresh object.
+        ignoreStyles: styleEngine.incremental && styleEngine.restyled === 0,
+      })) {
+      lastStyleParts += ", unchanged layout input";
+      return { style: Math.round(styled - started), layout: 0, skipped: true };
+    }
+    page.renderTree = nextRenderTree;
+    page.layout = layoutEngine.layout(page.renderTree, {
       measureText, fontMetrics, width: page.width, viewportHeight: page.height, x: 0, y: 0,
     });
-    page.displayList = buildDisplayList(page.layout, page.renderTree);
+    page.displayList = buildDisplayList(page.layout, page.renderTree, page.resources);
+    page.resourceLayoutDirty = false;
+    laidOutSheets = sheets;
     viewport.setContentSize(page.layout.width, page.layout.height);
     return { style: Math.round(styled - started), layout: Math.round(hostPerformance.now() - styled) };
   }
 
+  /** BUNINU_VERIFY_STYLE: compare an incremental restyle with a full one, element by element. */
+  function verifyIncrementalStyle(sheets, environment) {
+    const reference = new StyleEngine().compute(page.document, sheets, environment);
+    const serialize = (style) => JSON.stringify(style, (key, value) => typeof value === "bigint" ? String(value) : value);
+    let mismatches = 0;
+    for (const element of page.document.querySelectorAll("*")) {
+      const ours = serialize(styleEngine.get(element));
+      const expected = serialize(reference.get(element));
+      const pseudo = ["before", "after"].some((name) =>
+        serialize(styleEngine.getPseudo(element, name)) !== serialize(reference.getPseudo(element, name)));
+      if (ours === expected && !pseudo) continue;
+      if (mismatches++ < 3) {
+        const a = styleEngine.get(element);
+        const b = reference.get(element);
+        const fields = Object.keys(b).filter((key) => serialize(a[key]) !== serialize(b[key]));
+        reportError(`buninu-browser: incremental style mismatch at <${element.localName} class="${element.getAttribute("class") ?? ""}">: ${pseudo ? "pseudo " : ""}${fields.join(", ")}`);
+      }
+    }
+    if (mismatches) reportError(`buninu-browser: incremental style: ${mismatches} element(s) differ from a full restyle`);
+  }
+
   function rebuildRenderTree(reason = "update") {
     const started = hostPerformance.now();
     page.dirty = false;
-    page.needsPaint = true;
     page.title = page.document?.title ?? page.title;
     const timing = styleAndLayout();
+    if (!timing.skipped) page.needsPaint = true;
     lastRebuildMs = hostPerformance.now() - started;
     trace?.(`${page.url}: restyle and relayout (${reason}) ${Math.round(lastRebuildMs)}ms`
-      + ` (style ${timing.style}ms, layout ${timing.layout}ms)`);
+      + ` (style ${timing.style}ms for ${styleEngine.incremental ? styleEngine.restyled : "all"} elements: ${lastStyleReason}; ${lastStyleParts}, layout ${timing.layout}ms)`);
   }
 
   // Each loadDocument starts a generation; stages of a superseded load stop.
@@ -849,37 +1343,41 @@ export async function createPageRenderer({
     const isHtml = contentType.toLowerCase().includes("html");
     const parsed = parseHTMLDocument(isHtml ? source : "<body></body>", url);
     phase("parse");
-    const resources = isHtml
-      ? Promise.all([loadStyleSheets(parsed.document, url), loadImageResources(parsed.document, url)])
-      : Promise.resolve([[], emptyImageResources()]);
+    // Stylesheets block rendering and scripts; images do not (only the
+    // window load event waits for them, see whenImagesLoaded): one slow image
+    // must not hold back the page's scripts. Images that are already here
+    // when the styles are join the first paint; the rest are drawn as they come.
+    const linkSheets = isHtml ? new WeakMap() : null;
+    const styleSheets = isHtml ? loadStyleSheets(parsed.document, url, linkSheets) : Promise.resolve([]);
+    const images = isHtml ? loadImageResources(parsed.document, url) : Promise.resolve(emptyImageResources());
+    page.preloadedScripts = isHtml && page.scripting !== "off" ? preloadScripts(parsed.document, url) : new Map();
+    let imagesReady = null;
+    images.then((loaded) => { imagesReady = loaded; });
     let timer;
-    let ready = await Promise.race([
-      resources,
+    let sheets = await Promise.race([
+      styleSheets,
       new Promise((resolve) => (timer = hostSetTimeout(resolve, PREVIEW_DELAY_MS, null))),
     ]);
     hostClearTimeout(timer);
-    if (!current()) return discard(resources, parsed);
-    if (!ready) {
-      // Subresources are slow: show the document with the user-agent
+    if (!current()) return discard(images, parsed);
+    if (!sheets) {
+      // Stylesheets are slow: show the document with the user-agent
       // defaults and its inline <style> sheets meanwhile.
-      replaceParsedDocument(parsed, inlineStyleSheets(parsed.document), emptyImageResources());
+      replaceParsedDocument(parsed, inlineStyleSheets(parsed.document), emptyImageResources(), linkSheets);
+      awaitImages(images, generation);
       render();
       phase("preview");
       commit.resolve();
-      ready = await resources;
-      if (!current()) return discard(resources);
-      phase(`${ready[0].length} stylesheets and ${ready[1].decoded.length} images`);
+      sheets = await styleSheets;
+      if (!current()) return;
+      phase(`${sheets.length} stylesheets`);
       // Same document, now styled; the scroll position is kept.
-      for (const image of page.decodedImages) image.delete();
-      page.styleSheets = ready[0];
-      page.resources = ready[1].map;
-      initializeVideos(page.document, page.resources);
-      page.decodedImages = ready[1].decoded;
-      imageRequests = new WeakMap();
+      page.styleSheets = sheets;
       rebuildRenderTree("stylesheets loaded");
     } else {
-      phase(`${ready[0].length} stylesheets and ${ready[1].decoded.length} images`);
-      replaceParsedDocument(parsed, ready[0], ready[1]);
+      phase(`${sheets.length} stylesheets${imagesReady ? ` and ${imagesReady.decoded.length} images` : ""}`);
+      replaceParsedDocument(parsed, sheets, imagesReady ?? emptyImageResources(), linkSheets);
+      if (!imagesReady) awaitImages(images, generation);
     }
     phase("style and layout");
     if (!isHtml) {
@@ -905,22 +1403,79 @@ export async function createPageRenderer({
       phase("scripts");
       page.loading = false;
       refresh();
-      void hydrateGitHubBranchInfo(generation);
       phase("style, layout and raster after scripts");
     } else {
       finish();
     }
   }
 
+  /**
+   * Like a browser's preload scanner: starts fetching the document's external
+   * scripts and declared module preloads (<link rel=modulepreload>) as soon
+   * as it is parsed, while its stylesheets load and it is styled, instead of
+   * when the scripts' turn comes and a module graph is discovered level by
+   * level. Only the bytes are fetched early; fetchScript() takes them.
+   */
+  function preloadScripts(document, documentUrl) {
+    const preloaded = new Map();
+    const preload = (href) => {
+      let target;
+      try { target = new URL(href, documentUrl); } catch { return; }
+      if (!["http:", "https:"].includes(target.protocol) || preloaded.has(target.href)) return;
+      const response = fetchResource(target.href, "script");
+      response.catch(() => {}); // reported when the script runs
+      preloaded.set(target.href, response);
+    };
+    for (const script of document.querySelectorAll("script[src]")) {
+      const type = (script.getAttribute("type") ?? "").trim().toLowerCase();
+      if (type === "module" || (CLASSIC_SCRIPT_TYPES.has(type) && !script.hasAttribute("nomodule"))) preload(script.getAttribute("src"));
+    }
+    for (const link of document.querySelectorAll("link[rel~='modulepreload'][href]")) preload(link.getAttribute("href"));
+    return preloaded;
+  }
+
   /** Frees what a superseded load fetched. */
-  async function discard(resources, parsed = null) {
+  async function discard(images, parsed = null) {
     parsed?.window?.happyDOM?.abort?.();
-    const [, images] = await resources.catch(() => [[], emptyImageResources()]);
-    for (const image of images.decoded) image.delete();
+    const loaded = await images.catch(() => emptyImageResources());
+    for (const image of loaded.decoded) image.delete();
+  }
+
+  /**
+   * The document's initial images, still on their way: they are drawn when
+   * they arrive (unless a script changed the src meanwhile), and the load
+   * event waits for them.
+   */
+  function awaitImages(images, generation) {
+    const document = page.document;
+    // queueImageResources must not fetch these again.
+    for (const element of document.querySelectorAll("img")) {
+      const src = element.getAttribute("src");
+      if (src) imageRequests.set(element, src);
+    }
+    page.imagesLoaded = images.then((loaded) => {
+      if (generation !== loadGeneration || document !== page.document) {
+        for (const image of loaded.decoded) image.delete();
+        return;
+      }
+      for (const { element, src, resource } of loaded.entries) {
+        if (element.getAttribute("src") !== src || page.resources.get(element)) {
+          resource.image.delete();
+          continue;
+        }
+        page.resources.set(element, resource);
+        page.decodedImages.push(resource.image);
+      }
+      page.dirty = true;
+      page.resourceLayoutDirty = true;
+      scheduleFrame();
+    }, () => {});
   }
 
   function inlineStyleSheets(document) {
-    return [...document.querySelectorAll("style")].map((element) => element.textContent ?? "");
+    return [...document.querySelectorAll("style")]
+      .filter((element) => !element.closest("noscript"))
+      .map((element) => element.textContent ?? "");
   }
 
   /** Brings style, layout and raster up to date; returns whether it repainted. */
@@ -944,6 +1499,15 @@ export async function createPageRenderer({
     const element = page.document.activeElement;
     if (!element || !["INPUT", "TEXTAREA"].includes(element.tagName) || element.disabled || element.readOnly) return;
     if (element.tagName === "INPUT" && !["text", "search", "url", "email", "tel", "password"].includes(element.type)) return;
+    // Mobile IMEs often send committed text without a usable keydown (key 229
+    // or Unidentified). Handle that before the normal beforeinput insertion.
+    if (!backspace && element.getAttribute("id") === "buninu-piano-input" && audio && text.length === 1) {
+      const note = pianoNote(text);
+      if (note !== null) {
+        playPiano(note);
+        return;
+      }
+    }
     const value = String(element.value ?? "");
     let start = Number.isInteger(element.selectionStart) ? element.selectionStart : value.length;
     const end = Number.isInteger(element.selectionEnd) ? element.selectionEnd : start;
@@ -957,23 +1521,73 @@ export async function createPageRenderer({
       if (prevented) return;
     }
     element.value = value.slice(0, start) + text + value.slice(end);
+    markStyleDirty(element); // :placeholder-shown, :valid / :invalid
     element.setSelectionRange?.(start + text.length, start + text.length);
     if (page.realm) page.realm.dispatch(element, new page.window.Event("input", { bubbles: true }));
     page.dirty = true;
   }
 
+  let pianoStreamId = null;
+  let pianoMixer = null;
+  let pianoIdleTimer = null;
+  const PIANO_IDLE_MS = 2000;
+
+  function playPiano(note) {
+    pianoMixer ??= new PianoMixer();
+    pianoMixer.trigger(note);
+    hostClearTimeout(pianoIdleTimer);
+    pianoIdleTimer = hostSetTimeout(closePiano, PIANO_IDLE_MS);
+    if (pianoStreamId !== null) return;
+    const id = audio.open({ rate: 48000, channels: 1, name: "piano" }, (event) => {
+      if (pianoStreamId !== id) return;
+      if (event.event === "request") audio.write(id, pianoMixer.render(event.bytes));
+      else if (event.event === "error" || event.event === "ended") {
+        pianoStreamId = null;
+        pianoMixer = null;
+        if (event.event === "error") reportError(new Error(`piano audio: ${event.message}`));
+      }
+    });
+    pianoStreamId = id;
+  }
+
+  function closePiano() {
+    hostClearTimeout(pianoIdleTimer);
+    pianoIdleTimer = null;
+    if (pianoStreamId !== null) audio?.close(pianoStreamId);
+    pianoStreamId = null;
+    pianoMixer = null;
+  }
+
   function realmHooks(generation) {
     return {
-      touch() {
+      definedChanged(name) {
+        // An upgrade changes :defined for that tag's elements only.
+        if (selectorTraits.defined) {
+          for (const element of page.document.getElementsByTagName(String(name))) markStyleDirty(element, [":defined"]);
+        }
+        page.dirty = true;
+        scheduleFrame();
+      },
+      touch(node = null, stateFeatures = []) {
+        if (stateFeatures.length) markStyleDirty(node, stateFeatures);
         page.dirty = true;
         scheduleFrame();
       },
-      playVideo,
-      pauseVideo,
-      videoState,
+      mediaState,
+      playMedia,
+      pauseMedia,
+      seekMedia,
       lifecycle(name) {
-        if (generation === loadGeneration) onLifecycle?.(name, generation);
+        if (generation !== loadGeneration) return;
+        onLifecycle?.(name, generation);
+        // Parsing and the deferred scripts are done: changes from async
+        // scripts and late images get frames, without waiting for load.
+        if (name === "DOMContentLoaded") {
+          page.loading = false;
+          scheduleFrame();
+        }
       },
+      whenImagesLoaded: () => page.imagesLoaded,
       afterTask() {},
       boundsOf(element) {
         if (page.dirty) rebuildRenderTree("script read geometry");
@@ -997,9 +1611,23 @@ export async function createPageRenderer({
         if (page.dirty) rebuildRenderTree("getComputedStyle");
         return styleEngine.get(element);
       },
-      navigate: (url) => requestNavigation(String(url)),
+      navigate: (url) => navigateTo(String(url)),
+      activateLink(anchor) {
+        const href = new URL(anchor.getAttribute("href"), page.url).href;
+        const name = anchor.hasAttribute("download") ? anchor.getAttribute("download") ?? "" : null;
+        if (href.startsWith("blob:") && name !== null) void downloadBlob(href, name);
+        else navigateTo(href, name);
+      },
+      submitForm,
       async fetchScript(url) {
-        const response = await fetchResource(url, "script");
+        if (/^(?:blob|data):/i.test(url)) {
+          const response = await fetch(url);
+          if (!response.ok) throw new Error(`script ${url} failed with HTTP ${response.status}`);
+          return response.text();
+        }
+        const preloaded = page.preloadedScripts.get(url);
+        if (preloaded) page.preloadedScripts.delete(url);
+        const response = await (preloaded ?? fetchResource(url, "script"));
         if (!response.ok) throw new Error(`script ${url} failed with HTTP ${response.status}`);
         return new TextDecoder().decode(response.body);
       },
@@ -1020,6 +1648,18 @@ export async function createPageRenderer({
     };
   }
 
+  function submitForm(form, submitter = null) {
+    const method = (submitter?.getAttribute("formmethod") ?? form.getAttribute("method") ?? "get").toLowerCase();
+    if (method !== "get") return;
+    const action = submitter?.getAttribute("formaction") ?? form.getAttribute("action") ?? page.url;
+    const url = new URL(action || page.url, page.url);
+    url.search = "";
+    for (const [name, value] of new page.window.FormData(form, submitter)) {
+      if (typeof value === "string") url.searchParams.append(name, value);
+    }
+    navigateTo(url.href);
+  }
+
   /** The border box of an element's layout box in viewport coordinates. */
   function viewportBounds(element) {
     let fixed = false;
@@ -1044,27 +1684,66 @@ export async function createPageRenderer({
   }
 
   /**
-   * Scrolls to the fragment's target (HTML §7.4.6.4); returns whether one
-   * was found. `prefix` looks for "<prefix><fragment>" instead.
+   * Navigation a page starts (a link, location.href = ...). A fragment of
+   * the current document is navigated to at once, as HTML specifies, so the
+   * page's own click and popstate handlers already see the new location;
+   * the controller then only records the history entry (with the scroll
+   * position being left). Anything else goes to the controller.
+   */
+  function navigateTo(url, downloadName = null) {
+    const from = downloadName === null ? fragmentNavigation(url) : null;
+    requestNavigation(url, downloadName, from);
+  }
+
+  /**
+   * Navigates to `url` at once if it is a fragment of the current document;
+   * returns the scroll offset it left, or null when it is not such a URL.
    */
-  function scrollToFragment(href, prefix = "") {
+  function fragmentNavigation(url) {
+    const target = new URL(url, page.url);
+    const current = new URL(page.url);
+    target.hash = current.hash = "";
+    if (!page.realm || !String(url).includes("#") || target.href !== current.href) return null;
+    const from = { x: viewport.x, y: viewport.y };
+    void showFragment(new URL(url, page.url).href);
+    return from;
+  }
+
+  async function showFragment(url) {
+    // :target moves from the old fragment's element to the new one's.
+    if (selectorTraits.target) {
+      for (const href of [page.url, url]) {
+        let id = "";
+        try { id = decodeURIComponent(new URL(href).hash.slice(1)); } catch {}
+        const target = id && page.document.getElementById(id);
+        if (target) markStyleDirty(target);
+      }
+    }
+    page.url = url;
+    scrollToFragment(url);
+    // Pages that map fragments to their own targets scroll from popstate or hashchange listeners.
+    await page.realm?.navigateToFragment(url);
+    render();
+  }
+
+  /** Scrolls to the fragment's target (HTML §7.4.6.4). */
+  function scrollToFragment(href) {
     const url = new URL(href);
     if (!url.hash || url.hash === "#") {
       viewport.scrollTo(0, 0);
-      return true;
+      return;
     }
     let identifier;
     try {
-      identifier = prefix + decodeURIComponent(url.hash.slice(1));
+      identifier = decodeURIComponent(url.hash.slice(1));
     } catch {
-      identifier = prefix + url.hash.slice(1);
+      identifier = url.hash.slice(1);
     }
     const target = page.document.getElementById(identifier)
       ?? [...page.document.getElementsByTagName("a")]
         .find((element) => element.getAttribute("name") === identifier);
     const bounds = target && elementBounds(page.renderTree, page.layout, target);
     if (bounds) viewport.scrollTo(viewport.x, bounds.top);
-    return Boolean(target);
   }
 
   function collectHints() {
@@ -1102,6 +1781,18 @@ export async function createPageRenderer({
     render();
   }
 
+  async function downloadBlob(url, name) {
+    try {
+      const response = await fetch(url);
+      if (!response.ok) throw new Error(`blob download failed: HTTP ${response.status}`);
+      const data = new Uint8Array(await response.arrayBuffer());
+      if (data.byteLength > 64 * 1024 * 1024) throw new Error("blob download exceeds 64 MB");
+      requestDownload({ url, name, data });
+    } catch (error) {
+      reportError(error);
+    }
+  }
+
   const api = {
     loadDocument,
     /** Enables page scripts once the sandbox is ready: "ses", "host", or "off". */
@@ -1116,18 +1807,7 @@ export async function createPageRenderer({
       return page.realm?.console ?? [];
     },
     /** Same-document navigation: keep the document, move to the fragment. */
-    async showFragment(url) {
-      page.url = url;
-      const found = scrollToFragment(url);
-      // Pages that map fragments to their own targets scroll from a hashchange
-      // listener. Rendered Markdown (GitHub, Gitea) prefixes heading ids with
-      // "user-content-" and relies on such a script; if the page did not
-      // scroll, go to that target instead.
-      const before = viewport.y;
-      await page.realm?.navigateToFragment(url);
-      if (!found && viewport.y === before) scrollToFragment(url, "user-content-");
-      render();
-    },
+    showFragment,
     url() {
       return page.url;
     },
@@ -1235,6 +1915,14 @@ export async function createPageRenderer({
     },
     press(key, options = {}) {
       refresh();
+      const pianoInput = page.document?.activeElement;
+      if (audio && pianoInput?.getAttribute?.("id") === "buninu-piano-input") {
+        const note = pianoNote(String(key), String(options.code ?? ""));
+        if (note !== null && !options.repeat && !options.modifiers) {
+          playPiano(note);
+          return { x: viewport.x, y: viewport.y };
+        }
+      }
       // Pages see keydown/keyup first; preventDefault() cancels the default scroll.
       if (page.realm) {
         const target = page.document.activeElement ?? page.document.body;
@@ -1248,7 +1936,15 @@ export async function createPageRenderer({
         const prevented = page.realm.dispatch(target, new page.window.KeyboardEvent("keydown", init));
         if (!prevented && !init.ctrlKey && !init.metaKey && !init.altKey) {
           if (key === "Backspace") editFocusedText("", true);
-          else if (key === "Enter" && target.tagName === "TEXTAREA") editFocusedText("\n");
+          else if (key === "Enter" && target.tagName === "TEXTAREA") {
+            // A search IME's action key submits a search form. Other textareas
+            // keep their normal newline behavior.
+            const form = target.form;
+            if (target.getAttribute("inputmode")?.toLowerCase() === "search" && form && form.checkValidity()) {
+              const event = new page.window.SubmitEvent("submit", { bubbles: true, cancelable: true, submitter: form });
+              if (!page.realm.dispatch(form, event)) submitForm(form);
+            } else editFocusedText("\n");
+          }
           else if (String(key).length === 1) editFocusedText(String(key));
         }
         page.realm.dispatch(target, new page.window.KeyboardEvent("keyup", init));
@@ -1283,8 +1979,33 @@ export async function createPageRenderer({
      */
     click(x, y) {
       refresh();
-      const region = hitTest(page.renderTree, page.layout, x, y, viewport, viewport);
+      // Activation can toggle checked state (radios in a group, through a
+      // label) without a DOM mutation, so the next restyle is a full one.
+      markStyleDirty(null); // full: click
+      let region = hitTest(page.renderTree, page.layout, x, y, viewport, viewport);
+      if (!region) {
+        // Some search forms draw a wide control around a narrow textarea and
+        // rely on script to forward clicks. Preserve that affordance when the
+        // form has exactly one search field, even if its script did not run.
+        for (const form of page.document.querySelectorAll('form[role="search"]')) {
+          const bounds = viewportBounds(form);
+          if (!bounds || x < bounds.left || x >= bounds.left + bounds.width
+            || y < bounds.top || y >= bounds.top + bounds.height) continue;
+          const fields = form.querySelectorAll('textarea[inputmode="search"], input[type="search"]');
+          if (fields.length === 1) region = { element: fields[0] };
+          break;
+        }
+      }
       if (!region) return null;
+      if (page.url === "about:audio") {
+        const key = region.element.closest?.("[data-piano-note]");
+        const note = Number(key?.getAttribute("data-piano-note"));
+        if (key && Number.isInteger(note) && note >= 0 && note <= 127 && audio) {
+          playPiano(note);
+          page.document.getElementById("buninu-piano-input")?.focus();
+          return null;
+        }
+      }
       if (["INPUT", "TEXTAREA", "SELECT", "BUTTON"].includes(region.element.tagName)) {
         region.element.focus();
       }
@@ -1296,10 +2017,8 @@ export async function createPageRenderer({
         refresh();
         if (prevented) return null;
       }
-      if (region.element.tagName === "VIDEO") {
-        const state = page.videos.get(region.element);
-        if (state?.playing) pauseVideo(region.element);
-        else void playVideo(region.element);
+      if (region.element.tagName === "AUDIO" || region.element.tagName === "VIDEO") {
+        clickMedia(region.element, x, y);
         return null;
       }
       const anchor = region.element.closest?.("a[href]");
@@ -1309,7 +2028,13 @@ export async function createPageRenderer({
         this.runJavaScriptURL(href);
         return null;
       }
-      return href;
+      if (href.startsWith("blob:") && anchor.hasAttribute("download")) {
+        void downloadBlob(href, anchor.getAttribute("download") ?? "");
+        return null;
+      }
+      if (anchor.hasAttribute("download")) return { url: href, download: anchor.getAttribute("download") ?? "" };
+      const fragmentFrom = fragmentNavigation(href);
+      return fragmentFrom ? { url: href, fragmentFrom } : href;
     },
     /**
      * Navigating to a javascript: URL runs its percent-decoded source as a
@@ -1383,6 +2108,7 @@ export async function createPageRenderer({
       hostClearTimeout(prepaintTimer);
       hostClearTimeout(frameTimer);
       page.realm?.dispose();
+      closePiano();
       disposeVideos();
       page.window?.happyDOM?.abort?.();
       for (const image of page.decodedImages) image.delete();
@@ -1395,26 +2121,66 @@ export async function createPageRenderer({
   render();
   return api;
 
-  async function loadStyleSheets(document, documentUrl) {
-    // Fetched in parallel; the cascade keeps document order.
-    const sheets = [...document.querySelectorAll("style, link[rel~='stylesheet']")].map(async (element) => {
-      if (element.tagName === "STYLE") return element.textContent ?? "";
+  /** Fetches the document's linked stylesheets (in parallel), then lists all its sheets. */
+  async function loadStyleSheets(document, documentUrl, linkSheets) {
+    const pending = [];
+    collectStyleSheets(document, documentUrl, linkSheets, pending);
+    await Promise.all(pending);
+    return collectStyleSheets(document, documentUrl, linkSheets);
+  }
+
+  /**
+   * The document's style sheets as they are now, in document order: each
+   * <style>'s current text and each loaded <link rel=stylesheet>. Sheets that
+   * scripts add later count too; a link not fetched yet is requested (its
+   * promise goes to `pending`) and redraws the page when it arrives.
+   */
+  function collectStyleSheets(document, documentUrl, linkSheets, pending = null) {
+    const sheets = [];
+    for (const element of document.querySelectorAll("style, link[rel~='stylesheet']")) {
+      if (element.closest("noscript")) continue;
+      if (element.tagName === "STYLE") {
+        sheets.push(element.textContent ?? "");
+        continue;
+      }
       const href = element.getAttribute("href");
-      if (!href) return null;
-      try {
-        const response = await fetchResource(new URL(href, documentUrl).href, "stylesheet");
-        return response.ok ? new TextDecoder().decode(response.body) : null;
-      } catch {
-        // A failed stylesheet must not prevent the document itself from loading.
-        return null;
+      let url;
+      try { url = href ? new URL(href, documentUrl).href : null; } catch { url = null; }
+      if (!url) continue;
+      const loaded = linkSheets.get(element);
+      if (loaded?.url === url) {
+        if (loaded.text !== null) sheets.push(loaded.text);
+        continue;
       }
-    });
-    return (await Promise.all(sheets)).filter((sheet) => sheet !== null);
+      const entry = { url, text: null };
+      linkSheets.set(element, entry);
+      const request = fetchResource(url, "stylesheet").then((response) => {
+        if (response.ok) entry.text = new TextDecoder().decode(response.body);
+      }, () => {
+        // A failed stylesheet must not prevent the document itself from loading.
+      }).then(() => {
+        if (entry.text === null || document !== page.document || linkSheets.get(element) !== entry) return;
+        page.dirty = true;
+        scheduleFrame();
+      });
+      pending?.push(request);
+    }
+    return sheets;
+  }
+
+  /** The current sheet list, the same array while nothing changed (the style engine caches parsed rules by it). */
+  function currentStyleSheets() {
+    if (!page.linkSheets) return page.styleSheets;
+    const sheets = collectStyleSheets(page.document, page.url, page.linkSheets);
+    const previous = page.styleSheets;
+    if (previous.length === sheets.length && sheets.every((sheet, index) => sheet === previous[index])) return previous;
+    return page.styleSheets = sheets;
   }
 
   async function loadImageResources(document, documentUrl) {
     const map = new WeakMap();
     const decoded = [];
+    const entries = [];
     await Promise.all([...document.querySelectorAll("img")].map(async (element) => {
       const src = element.getAttribute("src");
       if (!src) return;
@@ -1429,20 +2195,22 @@ export async function createPageRenderer({
         const resource = Object.freeze({ width, height, image, url: response.url });
         map.set(element, resource);
         decoded.push(image);
+        entries.push({ element, src, resource });
       } catch {
         // Broken images keep their fallback replaced-element dimensions.
       }
     }));
-    return { map, decoded };
+    return { map, decoded, entries };
   }
 
+  /** Every <video> and <audio> gets its (painted) resource: size, frame, playing, time. */
   function initializeVideos(document, resources) {
-    for (const element of document.querySelectorAll("video")) {
+    for (const element of document.querySelectorAll("video, audio")) {
       if (resources.get(element)) continue;
-      const width = Number(element.getAttribute("width")) || 300;
-      const height = Number(element.getAttribute("height")) || 150;
-      resources.set(element, { width, height, bitmapWidth: 0, bitmapHeight: 0,
-        image: null, playing: false, url: "" });
+      const audioOnly = element.tagName === "AUDIO";
+      resources.set(element, { width: audioOnly ? 300 : Number(element.getAttribute("width")) || 300,
+        height: audioOnly ? 32 : Number(element.getAttribute("height")) || 150,
+        bitmapWidth: 0, bitmapHeight: 0, image: null, playing: false, time: 0, duration: NaN });
     }
   }
 
@@ -1451,155 +2219,412 @@ export async function createPageRenderer({
     try { return src ? new URL(src, page.url).href : null; } catch { return null; }
   }
 
-  function videoState(element) {
-    const state = page.videos.get(element);
-    return { paused: !state?.playing, currentTime: state?.time ?? 0, duration: state?.duration ?? NaN };
+  // ---- media: <video> and <audio> share one pipeline. An <audio> is media
+  // whose picture is not shown (its box is only the 300x32 control bar), and
+  // a video's own sound plays too. wasmpeg decodes (frames and PCM); PCM goes
+  // to the controller, which plays it through PulseAudio paced to real time.
+  // One clock: `base` is the position where the current run started and
+  // `clockStart` when it did. Frames are drawn when the clock reaches them.
+  // wasmpeg seeks video (to a keyframe) but not audio, so an audio seek
+  // decodes forward and skips (from the start again when going back).
+
+  /** HTMLMediaElement state for page script. */
+  function mediaState(element) {
+    const state = page.media.get(element);
+    return { paused: !state?.playing, ended: Boolean(state?.ended), currentTime: state ? mediaTime(state) : 0,
+      duration: state?.duration ?? NaN };
   }
 
-  function pauseVideo(element) {
-    const state = page.videos.get(element);
-    if (!state) return;
-    if (!state.decoder) {
-      closeVideo(state);
-      page.videos.delete(element);
-      rasterized.list = null;
-      render();
-      return;
+  /** The element's playback state, created (not loaded) on first use. */
+  function mediaStateFor(element) {
+    const resource = page.resources.get(element);
+    const url = videoSource(element);
+    if (!videoDecoder || !resource || !url) return null;
+    let state = page.media.get(element);
+    if (state && state.url !== url) {
+      closeMedia(state);
+      state = null;
     }
-    state.playing = false;
-    state.resource.playing = false;
-    hostClearTimeout(state.timer);
+    if (!state) {
+      state = { element, url, resource, bytes: null, loading: null, showsPicture: element.tagName === "VIDEO",
+        video: null, sound: null, playing: false, ended: false, duration: NaN, base: 0, clockStart: null,
+        timer: null, lastTimeUpdate: -1, generation: loadGeneration, document: page.document };
+      page.media.set(element, state);
+    }
+    return state;
+  }
+
+  /** Current position in seconds. */
+  function mediaTime(state) {
+    const running = state.playing && state.clockStart !== null ? (hostPerformance.now() - state.clockStart) / 1000 : 0;
+    const time = state.base + running;
+    return Number.isFinite(state.duration) ? Math.min(state.duration, time) : time;
+  }
+
+  /** Fires a media event (play, pause, ended, seeked, timeupdate...) at the element. */
+  function mediaEvent(state, type) {
+    if (state.document !== page.document || !page.realm) return;
+    try {
+      page.realm.dispatch(state.element, new page.window.Event(type));
+    } catch {}
+  }
+
+  /** The control bar and frame redraw without a relayout. */
+  function repaintMedia() {
     rasterized.list = null;
     render();
   }
 
-  async function playVideo(element) {
-    if (!videoDecoder) return;
-    const resource = page.resources.get(element);
-    const url = videoSource(element);
-    if (!resource || !url) return;
-    let state = page.videos.get(element);
-    if (state?.playing) return;
-    if (!state || state.url !== url) {
-      if (state) closeVideo(state);
-      const generation = loadGeneration;
-      state = { element, url, resource, decoder: null, image: null, timer: null, playing: true,
-        time: 0, duration: NaN, generation, document: page.document };
-      page.videos.set(element, state);
-      resource.playing = true;
-      rasterized.list = null;
-      render();
-      try {
-        const response = await fetchResource(url, "video");
-        if (!response.ok) throw new Error(`video ${url} failed with HTTP ${response.status}`);
-        if (generation !== loadGeneration || state.document !== page.document || !state.playing) return;
-        state.decoder = await videoDecoder.decode(response.body, { format: "mp4" });
-        trace?.(`video decoded ${url}: ${state.decoder.width}x${state.decoder.height}`);
-        if (generation !== loadGeneration || state.document !== page.document || !state.playing) {
-          state.decoder.close();
-          return;
-        }
-        const metadata = await videoDecoder.probe(response.body);
-        state.duration = metadata.duration ?? NaN;
-        resource.width = state.decoder.width;
-        resource.height = state.decoder.height;
-        page.dirty = true;
-        refresh();
-      } catch (error) {
-        if (state.document === page.document) reportError(error);
-        closeVideo(state);
-        page.videos.delete(element);
-        resource.playing = false;
-        rasterized.list = null;
-        render();
+  /** Fetches (once), probes, and opens the decoders for what the file holds. */
+  function loadMedia(state) {
+    state.loading ??= (async () => {
+      if (!state.bytes) {
+        const response = await fetchResource(state.url, state.showsPicture ? "video" : "audio");
+        if (!response.ok) throw new Error(`media ${state.url} failed with HTTP ${response.status}`);
+        state.bytes = response.body;
+      }
+      if (!Number.isFinite(state.duration) && !state.probed) {
+        const probe = await videoDecoder.probe(state.bytes);
+        state.probed = true;
+        state.duration = probe.duration ?? NaN;
+        state.hasVideo = state.showsPicture && probe.video?.width > 0;
+        state.hasAudio = probe.audio?.sampleRate > 0;
+        state.resource.duration = state.duration;
+        mediaEvent(state, "loadedmetadata");
+      }
+      if (state.hasVideo && !state.video) await openVideoDecoder(state);
+      if (state.hasAudio && audio && !state.sound) await openAudioDecoder(state);
+    })().finally(() => { state.loading = null; });
+    return state.loading;
+  }
+
+  // FFmpeg probes the container; formats without magic bytes take a hint from the extension.
+  function decodeOptions(state) {
+    const hint = formatHint(new URL(state.url).pathname);
+    return hint ? { format: hint } : {};
+  }
+
+  async function openVideoDecoder(state) {
+    state.video?.decoder.close();
+    const decoder = await videoDecoder.decode(state.bytes, decodeOptions(state));
+    state.video = { decoder, frameTime: 0, done: false };
+    trace?.(`video decoded ${state.url}: ${decoder.width}x${decoder.height}`);
+    if (state.resource.width !== decoder.width || state.resource.height !== decoder.height) {
+      state.resource.width = decoder.width;
+      state.resource.height = decoder.height;
+      page.dirty = true;
+      refresh();
+    }
+  }
+
+  async function openAudioDecoder(state) {
+    state.sound?.decoder.close();
+    const decoder = await videoDecoder.decodeAudio(state.bytes, decodeOptions(state));
+    state.sound = { decoder, id: null, position: 0, pending: null, history: [], finishing: false, done: false };
+    trace?.(`audio decoded ${state.url}: ${decoder.sampleRate} Hz, ${decoder.channels} channels`);
+  }
+
+  /** A click on the media: on its progress track it seeks, anywhere else it plays or pauses. */
+  function clickMedia(element, x, y) {
+    const box = viewportBounds(element);
+    const state = page.media.get(element);
+    const duration = state?.duration;
+    if (box && Number.isFinite(duration) && duration > 0) {
+      const layout = mediaBarLayout(box.width);
+      const onBar = element.tagName === "AUDIO" || y - box.top >= box.height - MEDIA_BAR_HEIGHT;
+      const relative = x - box.left;
+      if (onBar && relative >= layout.trackStart - 6) {
+        const fraction = Math.min(1, Math.max(0, (relative - layout.trackStart) / (layout.trackEnd - layout.trackStart)));
+        void seekMedia(element, fraction * duration);
         return;
       }
-    } else {
-      state.playing = true;
-      resource.playing = true;
     }
-    drawNextVideoFrame(state);
+    if (state?.playing) pauseMedia(element);
+    else void playMedia(element);
   }
 
-  function drawNextVideoFrame(state) {
-    if (!state.playing || state.generation !== loadGeneration || state.document !== page.document) return;
-    const started = hostPerformance.now();
-    const width = Math.min(480, state.decoder.width);
-    const height = Math.max(1, Math.round(width * state.decoder.height / state.decoder.width));
-    const pixels = state.decoder.nextFrame(width, height);
-    if (state.time === 0) trace?.(`video first frame ${state.url}: ${pixels?.length ?? 0} bytes`);
-    if (!pixels) {
-      state.playing = false;
-      state.resource.playing = false;
-      rasterized.list = null;
-      render();
+  async function playMedia(element) {
+    const state = mediaStateFor(element);
+    if (!state || state.playing) return;
+    setMediaPlaying(state, true);
+    try {
+      await loadMedia(state);
+      if (state.ended) {
+        state.ended = false;
+        await positionMedia(state, 0);
+      } else if (state.needsPosition) {
+        // After a pause the audio decoder is ahead of where playing resumes.
+        await positionMedia(state, state.base, { videoToo: false });
+      }
+      state.needsPosition = false;
+    } catch (error) {
+      if (state.document === page.document) reportError(error);
+      closeMedia(state);
+      page.media.delete(element);
+      repaintMedia();
+      return;
+    }
+    if (!state.playing || state.document !== page.document) return;
+    if (!state.video && !state.sound) {
+      // Nothing this engine can play (audio with no audio output).
+      setMediaPlaying(state, false);
+      reportError(new Error(`media ${state.url}: nothing to play`));
+      return;
+    }
+    startMedia(state);
+    mediaEvent(state, "play");
+  }
+
+  function pauseMedia(element) {
+    const state = page.media.get(element);
+    if (!state?.playing) return;
+    state.base = mediaTime(state);
+    stopClock(state);
+    state.needsPosition = true;
+    setMediaPlaying(state, false);
+    mediaEvent(state, "pause");
+  }
+
+  async function seekMedia(element, seconds) {
+    const state = mediaStateFor(element);
+    if (!state) return;
+    const wasPlaying = state.playing;
+    if (wasPlaying) stopClock(state);
+    try {
+      await loadMedia(state);
+      const target = Math.max(0, Math.min(Number.isFinite(state.duration) ? state.duration : Infinity, Number(seconds) || 0));
+      state.ended = false;
+      await positionMedia(state, target);
+      state.needsPosition = false;
+      // A paused video shows the frame it landed on.
+      if (state.video && !wasPlaying) drawVideoFrame(state, true);
+    } catch (error) {
+      reportError(error);
       return;
     }
+    if (wasPlaying && state.playing && state.document === page.document) startMedia(state);
+    state.resource.time = mediaTime(state);
+    repaintMedia();
+    mediaEvent(state, "seeked");
+    mediaEvent(state, "timeupdate");
+  }
+
+  /** Moves the decoders (and the clock's base) to `seconds`. */
+  async function positionMedia(state, seconds, { videoToo = true } = {}) {
+    state.base = seconds;
+    if (state.video && videoToo) {
+      if (state.video.done || seconds === 0) await openVideoDecoder(state);
+      if (seconds > 0) state.video.decoder.seek(seconds * 1000);
+      state.video.frameTime = seconds;
+      state.video.done = false;
+    }
+    if (state.sound) await positionAudio(state, seconds);
+  }
+
+  /** Puts the audio decoder at `seconds`: from the kept history, by decoding ahead, or from the start. */
+  async function positionAudio(state, seconds) {
+    const sound = state.sound;
+    const { sampleRate, channels } = sound.decoder;
+    const target = Math.max(0, Math.round(seconds * sampleRate));
+    sound.done = false;
+    const historyStart = sound.history[0]?.start ?? Infinity;
+    if (target >= historyStart && target < sound.position) {
+      // Resume inside audio already decoded: take it from the history.
+      const parts = [];
+      for (const chunk of sound.history) {
+        const frames = chunk.samples.length / channels;
+        if (chunk.start + frames <= target) continue;
+        parts.push(chunk.start >= target ? chunk.samples : chunk.samples.subarray((target - chunk.start) * channels));
+      }
+      if (sound.pending) parts.push(sound.pending);
+      sound.pending = concatSamples(parts);
+      sound.position = target;
+      sound.history = [];
+      return;
+    }
+    if (target < sound.position) await openAudioDecoder(state);
+    const current = state.sound;
+    current.history = [];
+    if (current.pending) {
+      const frames = current.pending.length / channels;
+      if (current.position + frames > target) {
+        current.pending = current.pending.subarray((target - current.position) * channels);
+        current.position = target;
+        return;
+      }
+      current.position += frames;
+      current.pending = null;
+    }
+    while (current.position < target) {
+      const samples = current.decoder.nextSamples();
+      if (!samples) return;
+      const frames = samples.length / channels;
+      if (current.position + frames > target) {
+        current.pending = samples.subarray((target - current.position) * channels);
+        current.position = target;
+        return;
+      }
+      current.position += frames;
+    }
+  }
+
+  /** Starts the clock, the audio stream and the frame/time ticks. */
+  function startMedia(state) {
+    state.clockStart = hostPerformance.now();
+    if (state.sound && !state.sound.done) openAudioStream(state);
+    mediaTick(state);
+  }
+
+  function stopClock(state) {
+    hostClearTimeout(state.timer);
+    state.timer = null;
+    state.clockStart = null;
+    if (state.sound?.id != null) {
+      audio.close(state.sound.id);
+      state.sound.id = null;
+      state.sound.finishing = false;
+    }
+  }
+
+  /** Draws the frames the clock has reached, updates time, ends when everything has played. */
+  function mediaTick(state) {
+    if (!state.playing || state.generation !== loadGeneration || state.document !== page.document) return;
+    const now = mediaTime(state);
+    const video = state.video;
+    if (video && !video.done && video.frameTime <= now) {
+      // Late frames are decoded but only the newest is shown.
+      while (video.frameTime <= now && !video.done) {
+        const nextIsLate = video.frameTime + 1 / (video.decoder.fps || 30) <= now;
+        if (!drawVideoFrame(state, !nextIsLate)) video.done = true;
+      }
+    }
+    state.resource.time = now;
+    repaintMedia();
+    if (Math.floor(now * 4) !== state.lastTimeUpdate) {
+      state.lastTimeUpdate = Math.floor(now * 4);
+      mediaEvent(state, "timeupdate");
+    }
+    const videoFinished = !video || video.done;
+    const soundFinished = !state.sound || state.sound.done;
+    // The clock at the duration ends it too: after a seek, frames restart at a
+    // keyframe before the target, and wasmpeg does not tell their timestamps.
+    const pastEnd = Number.isFinite(state.duration) && state.clockStart !== null
+      && state.base + (hostPerformance.now() - state.clockStart) / 1000 >= state.duration;
+    if ((videoFinished && soundFinished) || (pastEnd && soundFinished)) return endMedia(state);
+    const delay = video && !video.done ? Math.max(5, (video.frameTime - mediaTime(state)) * 1000) : 250;
+    state.timer = hostSetTimeout(() => mediaTick(state), delay);
+  }
+
+  /** Decodes the next frame; shows it when `show`. False at the end of the stream. */
+  function drawVideoFrame(state, show) {
+    const decoder = state.video.decoder;
+    const width = Math.min(480, decoder.width);
+    const height = Math.max(1, Math.round(width * decoder.height / decoder.width));
+    const pixels = decoder.nextFrame(width, height);
+    if (!pixels) return false;
+    state.video.frameTime += 1 / (decoder.fps || 30);
+    if (!show) return true;
     const image = CanvasKit.MakeImage({ width, height, alphaType: CanvasKit.AlphaType.Unpremul,
       colorType: CanvasKit.ColorType.RGBA_8888, colorSpace: CanvasKit.ColorSpace.SRGB }, pixels, width * 4);
-    if (!image) return pauseVideo(state.element);
-    const previous = state.image;
-    state.image = image;
+    if (!image) return true;
+    state.resource.image?.delete();
     state.resource.image = image;
     state.resource.bitmapWidth = width;
     state.resource.bitmapHeight = height;
-    state.time += 1 / (state.decoder.fps || 30);
-    rasterized.list = null;
-    render();
-    previous?.delete();
-    if (state.playing) state.timer = hostSetTimeout(() => drawNextVideoFrame(state),
-      Math.max(1, 1000 / (state.decoder.fps || 30) - (hostPerformance.now() - started)));
+    return true;
+  }
+
+  function openAudioStream(state) {
+    const sound = state.sound;
+    sound.finishing = false;
+    const name = new URL(state.url).pathname.split("/").pop() || "audio";
+    const id = audio.open({ rate: sound.decoder.sampleRate, channels: sound.decoder.channels, name }, (event) => {
+      if (sound.id !== id) return;
+      if (event.event === "request") feedAudio(state, event.bytes);
+      else if (event.event === "ended") {
+        sound.id = null;
+        sound.done = true;
+        mediaTick(state);
+      } else if (event.event === "error") {
+        sound.id = null;
+        sound.done = true;
+        reportError(new Error(`audio: ${event.message}`));
+        // Video plays on without sound; audio alone stops.
+        if (!state.video) pauseMedia(state.element);
+      }
+    });
+    sound.id = id;
+  }
+
+  /** Sends about `bytes` of s16le audio (pending samples first, then decoding); at the end, lets it drain. */
+  function feedAudio(state, bytes) {
+    const sound = state.sound;
+    if (!state.playing || sound.id === null || sound.finishing) return;
+    const { channels, sampleRate } = sound.decoder;
+    const frameBytes = channels * 2;
+    for (let sent = 0; sent + frameBytes <= bytes;) {
+      let samples = sound.pending;
+      sound.pending = null;
+      samples ??= sound.decoder.nextSamples();
+      if (!samples) {
+        sound.finishing = true;
+        audio.finish(sound.id);
+        return;
+      }
+      const [taken, remaining] = splitSamples(samples, channels, bytes - sent);
+      if (remaining.length) sound.pending = remaining;
+      sound.history.push({ start: sound.position, samples: taken });
+      sound.position += taken.length / channels;
+      while (sound.history.length > 1 && sound.position - sound.history[1].start > AUDIO_HISTORY_SECONDS * sampleRate) {
+        sound.history.shift();
+      }
+      const pcm = floatToS16(taken);
+      audio.write(sound.id, pcm);
+      sent += pcm.length;
+    }
+  }
+
+  function endMedia(state) {
+    stopClock(state);
+    state.ended = true;
+    state.base = Number.isFinite(state.duration) ? state.duration : state.base;
+    setMediaPlaying(state, false);
+    mediaEvent(state, "pause");
+    mediaEvent(state, "ended");
+  }
+
+  function setMediaPlaying(state, playing) {
+    state.playing = playing;
+    state.resource.playing = playing;
+    state.resource.time = mediaTime(state);
+    if (state.document === page.document) repaintMedia();
   }
 
-  function closeVideo(state) {
+  function closeMedia(state) {
+    stopClock(state);
     state.playing = false;
-    hostClearTimeout(state.timer);
-    state.decoder?.close();
-    state.image?.delete();
+    state.video?.decoder.close();
+    state.video = null;
+    state.sound?.decoder.close();
+    state.sound = null;
+    state.resource.image?.delete();
     state.resource.image = null;
     state.resource.playing = false;
   }
 
   function disposeVideos() {
-    for (const state of page.videos.values()) closeVideo(state);
-    page.videos.clear();
+    for (const state of page.media.values()) closeMedia(state);
+    page.media.clear();
   }
 
-  async function hydrateGitHubBranchInfo(generation) {
-    if (new URL(page.url).hostname !== "github.com") return;
-    const document = page.document;
-    const bar = document.querySelector('[data-testid="branch-info-bar"]');
-    const embedded = document.querySelector('script[data-target="react-app.embeddedData"]');
-    if (!bar?.querySelector(".Skeleton") || !embedded) return;
-    try {
-      const payload = JSON.parse(embedded.textContent ?? "").payload;
-      const fork = payload?.codeViewLayoutRoute?.repo;
-      const parent = payload?.sidebarAbout?.repo?.parentRepo;
-      const branch = payload?.codeViewRepoRoute?.refInfo;
-      if (!fork?.isFork || !parent?.ownerLogin || !parent?.name || branch?.refType !== "branch") return;
-      const repoUrl = `https://api.github.com/repos/${encodeURIComponent(parent.ownerLogin)}/${encodeURIComponent(parent.name)}`;
-      const compareUrl = `${repoUrl}/compare/HEAD...${encodeURIComponent(fork.ownerLogin)}:${encodeURIComponent(branch.name)}`;
-      const [repoResponse, compareResponse] = await Promise.all([
-        fetchResource(repoUrl, "metadata"), fetchResource(compareUrl, "metadata"),
-      ]);
-      if (!repoResponse.ok || !compareResponse.ok) return;
-      const decoder = new TextDecoder();
-      const defaultBranch = JSON.parse(decoder.decode(repoResponse.body)).default_branch;
-      const comparison = JSON.parse(decoder.decode(compareResponse.body));
-      const ahead = comparison.ahead_by;
-      const behind = comparison.behind_by;
-      if (!defaultBranch || !Number.isInteger(ahead) || !Number.isInteger(behind)) return;
-      if (generation !== loadGeneration || document !== page.document || !bar.querySelector(".Skeleton")) return;
-      const baseName = `${parent.ownerLogin}/${parent.name}:${defaultBranch}`;
-      const status = behind > 0
-        ? `This branch is ${ahead} commits ahead of and ${behind} commits behind ${baseName}.`
-        : `This branch is ${ahead} commits ahead of ${baseName}.`;
-      bar.textContent = status;
-      page.dirty = true;
-      refresh();
-    } catch {
-      // GitHub's own client can still replace the loading placeholder.
+  function concatSamples(parts) {
+    const out = new Float32Array(parts.reduce((sum, part) => sum + part.length, 0));
+    let offset = 0;
+    for (const part of parts) {
+      out.set(part, offset);
+      offset += part.length;
     }
+    return out;
   }
 
   function queueImageResources() {
@@ -1631,7 +2656,25 @@ export async function createPageRenderer({
         }
         page.resources.set(element, Object.freeze({ width, height, image, url: response.url }));
         page.decodedImages.push(image);
-        page.dirty = true;
+        const node = [...page.renderTree.nodesById.values()].find((candidate) => candidate.domNode === element);
+        const run = page.layout.fragments.flatMap((fragment) => fragment.runs)
+          .find((candidate) => candidate.type === "image" && candidate.nodeId === node?.id);
+        const cssWidth = node?.style?.width;
+        const cssHeight = node?.style?.height;
+        const specifiedWidth = typeof cssWidth === "number" ? cssWidth : node?.widthAttribute;
+        const specifiedHeight = typeof cssHeight === "number" ? cssHeight : node?.heightAttribute;
+        // When both used dimensions were already fixed, decoded pixels only
+        // change paint. The retained layout remains authoritative and the
+        // display list resolves the current resource by DOM node.
+        const paintOnly = run && Number.isFinite(specifiedWidth) && Number.isFinite(specifiedHeight)
+          && Math.abs(run.width - specifiedWidth) < 0.01 && Math.abs(run.height - specifiedHeight) < 0.01;
+        if (paintOnly) {
+          page.displayList = buildDisplayList(page.layout, page.renderTree, page.resources);
+          page.needsPaint = true;
+        } else {
+          page.dirty = true;
+          page.resourceLayoutDirty = true;
+        }
         refresh();
       }).catch(() => {
         // A failed image retains its fallback replaced-element dimensions.
@@ -1687,5 +2730,5 @@ function documentBackground(document, styleEngine) {
 }
 
 function emptyImageResources() {
-  return { map: new WeakMap(), decoded: [] };
+  return { map: new WeakMap(), decoded: [], entries: [] };
 }