diff --git a/package.json b/package.json
index 8e9dd87cd0..4d7a1f513a 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,8 @@
     "pop:site": "node pop/bin/publish-release-records.mjs",
     "doctor": "node toolchain/doctor.mjs",
     "domain": "node toolchain/domains/domain.mjs",
+    "laklok:parity": "node toolchain/laklok-sisters/parity.mjs",
+    "laklok:sisters": "node toolchain/laklok-sisters/sisters.mjs",
     "sitemap:update": "node utilities/update-sitemap.mjs",
     "sitemap:check": "node utilities/update-sitemap.mjs --check",
     "api-docs:check": "node utilities/check-api-docs.mjs",
diff --git a/system/public/aesthetic.computer/disks/gram.mjs b/system/public/aesthetic.computer/disks/gram.mjs
new file mode 100644
index 0000000000..2d772d7d9b
--- /dev/null
+++ b/system/public/aesthetic.computer/disks/gram.mjs
@@ -0,0 +1,510 @@
+// Gram, 2026.8.21
+// A handheld vertical feed of !tapes — swipe to surf, scrub sideways,
+// tap to pause, heart what you love. (The social sibling of `tv`.)
+
+/* 📝 Notes
+  MVP of the gram proposal: streaming MP4 tapes through the bios singleton
+  (`tape:play-mp4`), swapped on swipe-commit with each tape's baked
+  thumbnail painted as an instant poster frame while the next video spins
+  up. Feed comes from /api/tv?types=tape; hearts are the generic
+  /api/chat-heart {type, for} toggle.
+
+  `tv.mjs` remains the lean-back/ambient sibling — its gesture-commitment
+  core (first 10px decides scrub-vs-scroll) is forked here, but the ZIP
+  frame-tape engine is not: every feed item streams byte-ranged MP4 from
+  Spaces instead of downloading a frames ZIP.
+
+  Next (with the proposal): a bios <video> pool for gapless swaps, live
+  $kidlisp + painting interleave via the sprinkle mix, cursor pagination.
+*/
+
+import { createScrubber } from "./common/scrub.mjs";
+
+const SPACES = "https://at-blobs-aesthetic-computer.sfo3.digitaloceanspaces.com";
+
+let tapes = [];
+let loadingFeed = true;
+let feedError = null;
+
+// Feed position — displayIndex is fractional during drags and transitions.
+let currentIndex = 0;
+let targetIndex = 0;
+let displayIndex = 0;
+let isTransitioning = false;
+let lastSwipeTime = 0;
+const swipeThreshold = 30;
+const gestureThreshold = 10; // Pixels before committing to scrub or scroll.
+
+// Gesture state — the first 10px of movement decides the mode.
+let gestureMode = null; // null | "scrub" | "scroll"
+let gestureStartX = 0;
+let gestureStartY = 0;
+
+// Physics scrubber (same lazy-needle feel as tv/video).
+let scrubber = createScrubber();
+let wasPlayingBeforeScrub = false;
+let lastSeekProgress = 0;
+const seekThreshold = 0.002;
+
+// Current tape playback state (the MP4 singleton is always "the current one").
+let videoReady = false; // First playback-progress heard since the last swap.
+let isPaused = false;
+let currentProgress = 0;
+let playError = null;
+
+// Audio gating — bios falls back to muted autoplay; the first tap unmutes.
+let audioActivated = false;
+let hasAudioContext = false;
+
+let thumbs = new Map(); // code -> bitmap | "loading" | "failed"
+let hearts = new Map(); // code -> { hearted, count } (learned on toggle)
+let heartBusy = false;
+let heartBtnBox = null; // Rebuilt each paint; tap target for ♥.
+let handleBox = null; // Tap target for the owner handle → profile.
+
+let globalSend = null;
+let netPreload = null;
+let netUserRequest = null;
+let showNotice = null;
+let paintCount = 0n;
+
+function tapeAt(index) {
+  return index >= 0 && index < tapes.length ? tapes[index] : null;
+}
+
+// The raw at-blobs Spaces URLs the feed carries 403 right now (private
+// ACLs), so tapes stream through the AC media route instead — it redirects
+// to the public per-user bucket and supports byte ranges (the same path
+// video.mjs trusts). Local dev's media route is unreliable; go to prod.
+const MEDIA_ORIGIN =
+  typeof location !== "undefined" && /localhost|127\.0\.0\.1/.test(location.host)
+    ? "https://aesthetic.computer"
+    : "";
+
+function mp4Url(code) {
+  return `${MEDIA_ORIGIN}/media/tapes/${code}.mp4`;
+}
+
+// Baked thumbnails also sit behind the 403 ACLs with no media route yet —
+// requested anyway so posters light up the moment that's fixed; the dark
+// !code card carries until then.
+function thumbUrl(code) {
+  return `${SPACES}/tapes/${code}-thumb.jpg`;
+}
+
+function boot({ wipe, send, net, notice, hud }) {
+  wipe(0);
+  globalSend = send;
+  netPreload = net.preload;
+  netUserRequest = net.userRequest;
+  showNotice = notice;
+  hud.label("gram", "white");
+
+  // Local netlify dev can't reach Redis/outbound HTTP from functions, so the
+  // feed falls back to production there — same trick chat.mjs's OG previews
+  // use. The tapes themselves always stream from Spaces either way.
+  const FEED = "/api/tv?types=tape&limit=50";
+  fetch(FEED, { signal: AbortSignal.timeout(5000) }) // Local 500s take 30s; fail fast.
+    .then((res) => {
+      if (!res.ok) throw new Error("feed " + res.status);
+      return res.json();
+    })
+    .catch(() => fetch("https://aesthetic.computer" + FEED).then((res) => {
+      if (!res.ok) throw new Error("feed " + res.status);
+      return res.json();
+    }))
+    .then((data) => {
+      tapes = data.media?.tapes || [];
+      loadingFeed = false;
+      if (tapes.length === 0) return;
+      playCurrent();
+      preloadThumbs(0);
+    })
+    .catch((err) => {
+      console.error("🖼️ gram feed failed:", err);
+      feedError = err.message;
+      loadingFeed = false;
+    });
+}
+
+// Swap the MP4 singleton to the current tape. bios tears the old video down
+// synchronously, so the poster thumb covers the gap until progress reports.
+function playCurrent() {
+  const tape = tapeAt(currentIndex);
+  if (!tape) return;
+  videoReady = false;
+  isPaused = false;
+  currentProgress = 0;
+  playError = null;
+  globalSend({
+    type: "tape:play-mp4",
+    content: {
+      code: tape.code,
+      mp4Url: mp4Url(tape.code),
+      metadata: { kind: "mp4" },
+    },
+  });
+}
+
+// Poster thumbnails for the neighborhood — tiny JPGs, so ±2 is cheap.
+function preloadThumbs(center) {
+  for (let i = center - 2; i <= center + 2; i++) {
+    const tape = tapeAt(i);
+    if (!tape?.code || thumbs.has(tape.code)) continue;
+    thumbs.set(tape.code, "loading");
+    netPreload(thumbUrl(tape.code))
+      .then((loaded) => thumbs.set(tape.code, loaded?.img || loaded))
+      .catch(() => thumbs.set(tape.code, "failed"));
+  }
+}
+
+async function toggleHeart() {
+  const tape = tapeAt(currentIndex);
+  if (!tape || heartBusy) return;
+  heartBusy = true;
+  const res = await netUserRequest("POST", "/api/chat-heart", {
+    type: "tape",
+    for: tape.code,
+  });
+  heartBusy = false;
+  if (res?.status === 200) {
+    hearts.set(tape.code, { hearted: res.hearted, count: res.count });
+  } else {
+    showNotice?.("SIGN IN TO HEART", ["yellow"]);
+  }
+}
+
+function paint($) {
+  const { wipe, ink, paste, screen, rec, needsPaint } = $;
+  paintCount += 1n;
+
+  if (loadingFeed) {
+    wipe(0);
+    ink("white").write("LOADING GRAM...", { center: "xy", size: 2 });
+    return;
+  }
+  if (feedError) {
+    wipe(0);
+    ink("red").write("FEED ERROR", { center: "xy", size: 2 });
+    ink("white").write(feedError, { center: "x", y: screen.height / 2 + 20 });
+    return;
+  }
+  if (tapes.length === 0) {
+    wipe(0);
+    ink("yellow").write("NO TAPES", { center: "xy", size: 2 });
+    return;
+  }
+
+  // Ease toward the target row; commit the swap when the snap lands.
+  if (isTransitioning) {
+    displayIndex += (targetIndex - displayIndex) * 0.18;
+    if (Math.abs(targetIndex - displayIndex) < 0.01) {
+      displayIndex = targetIndex;
+      isTransitioning = false;
+      if (currentIndex !== targetIndex) {
+        currentIndex = targetIndex;
+        playCurrent();
+        preloadThumbs(currentIndex);
+      }
+    }
+  }
+
+  const slideOffset = (displayIndex - currentIndex) * screen.height;
+  const sliding = Math.abs(slideOffset) > 0.5;
+
+  heartBtnBox = null;
+  handleBox = null;
+
+  if (sliding || !videoReady) {
+    // Poster mode — opaque, thumbnails carry the motion (the MP4 singleton
+    // can't slide two videos at once; the pool upgrade fixes that later).
+    wipe(20, 10, 24);
+    drawPoster($, currentIndex, -slideOffset);
+    if (sliding) {
+      const incoming = displayIndex > currentIndex ? currentIndex + 1 : currentIndex - 1;
+      const yOff = incoming > currentIndex
+        ? screen.height - slideOffset
+        : -screen.height - slideOffset;
+      drawPoster($, incoming, yOff);
+      drawChrome($, incoming, yOff);
+      const dividerY = Math.floor(incoming > currentIndex ? screen.height - slideOffset : -slideOffset);
+      if (dividerY > 0 && dividerY < screen.height) {
+        ink(255, 255, 255, 60).line(0, dividerY, screen.width, dividerY);
+      }
+    }
+    if (!videoReady && !sliding && !playError) {
+      // Spinner while the swapped-in video buffers behind the poster.
+      const angle = (Number(paintCount) * 0.15) % (Math.PI * 2);
+      for (let i = 0; i < 8; i++) {
+        const a = angle + (i * Math.PI) / 4;
+        ink(255, 200, 100, Math.floor(255 * (1 - i / 8))).circle(
+          screen.width / 2 + Math.cos(a) * 24,
+          screen.height / 2 + Math.sin(a) * 24,
+          3,
+          true,
+        );
+      }
+    }
+    needsPaint();
+  } else if (isPaused) {
+    wipe(0, 100);
+    ink(255, 200).write("||", { center: "xy", size: 2 });
+    ink(255, 75).box(0, 0, screen.width, screen.height, "inline");
+  } else {
+    wipe(0, 0, 0, 0); // Transparent — the bios <video> underlay shows through.
+    needsPaint();
+  }
+
+  // Scrub overlay — target line (drag) vs needle line (playback, lagging).
+  if (scrubber.isScrubbing) {
+    ink(0, 0, 0, 100).box(0, 0, screen.width, screen.height);
+    const targetX = Math.floor(scrubber.targetProgress * screen.width);
+    const needleX = Math.floor(scrubber.needleProgress * screen.width);
+    ink(255, 200, 0, 200).line(targetX, 0, targetX, screen.height);
+    ink(255, 100, 0, 150).line(needleX, 0, needleX, screen.height);
+    ink(255).write(`${Math.floor(scrubber.needleProgress * 100)}%`, {
+      center: "xy",
+      size: 2,
+    });
+  }
+
+  if (playError) {
+    ink(255, 80, 80).write("TAPE UNAVAILABLE", { center: "xy" });
+    ink(150, 150, 150).write("swipe on", { center: "x", y: screen.height / 2 + 16 });
+  }
+
+  drawChrome($, currentIndex, sliding ? -slideOffset : 0, !sliding);
+
+  // VHS-style progress bar along the bottom (painted by the runtime).
+  if (rec) {
+    rec.tapeProgress =
+      !sliding && currentProgress > 0 && currentProgress < 1 ? currentProgress : 0;
+  }
+
+  // Audio gate — bios may have fallen back to muted autoplay.
+  if (!audioActivated && hasAudioContext && videoReady && !sliding) {
+    const pulse = Math.abs(Math.sin(Number(paintCount) * 0.1));
+    const alpha = Math.floor(128 + pulse * 127);
+    ink(0, 0, 0, 120).box(0, screen.height / 2 - 14, screen.width, 28);
+    ink(255, 200, 100, alpha).write("TAP FOR SOUND", { center: "xy" });
+    needsPaint();
+  }
+}
+
+function drawPoster($, index, yOff) {
+  const { ink, paste, screen } = $;
+  const tape = tapeAt(index);
+  if (!tape) return;
+  if (yOff <= -screen.height || yOff >= screen.height) return;
+  const bmp = thumbs.get(tape.code);
+  if (bmp && typeof bmp === "object" && bmp.width > 0) {
+    // Cover-scale: fill the frame, centered, cropping the overflow.
+    const scale = Math.max(screen.width / bmp.width, screen.height / bmp.height);
+    paste(
+      bmp,
+      Math.floor((screen.width - bmp.width * scale) / 2),
+      Math.floor(yOff + (screen.height - bmp.height * scale) / 2),
+      scale,
+    );
+  } else {
+    ink(30, 20, 40).box(0, yOff, screen.width, screen.height);
+    ink(120, 100, 140).write(`!${tape.code}`, {
+      center: "x",
+      y: yOff + screen.height / 2,
+    });
+  }
+}
+
+function drawChrome($, index, yOff, interactive = false) {
+  const { ink, screen } = $;
+  const tape = tapeAt(index);
+  if (!tape) return;
+  const baseY = 22 + yOff; // Below the HUD label row.
+  if (baseY <= -screen.height || baseY >= screen.height * 2) return;
+
+  ink("white").write(`!${tape.code}`, { x: 8, y: baseY });
+  const handle = tape.owner?.handle;
+  if (handle) {
+    ink("yellow").write(handle, { x: 8, y: baseY + 14 });
+    if (interactive) {
+      handleBox = { x: 4, y: baseY + 10, w: handle.length * 6 + 8, h: 14 };
+    }
+  }
+  ink("gray").write(`${index + 1}/${tapes.length}`, { right: 8, y: baseY });
+
+  // ♥ bottom-right, drawn as pixels — no shipped font carries U+2665
+  // (/api/bdf-glyph returns null for it in both unifont and MatrixChunky8).
+  // Fills pink once you've hearted it; the count is learned on toggle
+  // (batch counts arrive with the feed API's next revision).
+  const state = hearts.get(tape.code);
+  const hx = screen.width - 30;
+  const hy = screen.height - 42;
+  drawHeart(ink, hx, hy + yOff, 3, state?.hearted ? [255, 100, 180] : [255, 255, 255, 210]);
+  if (state?.count > 0) {
+    ink(255, 200, 220).write(`${state.count}`, { x: hx + 6, y: hy + yOff + 22 });
+  }
+  if (interactive) {
+    heartBtnBox = { x: hx - 12, y: hy - 12, w: 44, h: 44 };
+  }
+
+  const hintY = screen.height - 12 + yOff;
+  if (hintY > 0 && hintY < screen.height) {
+    ink(255, 255, 255, 90).write("surf - scrub - tap", { center: "x", y: hintY });
+  }
+}
+
+// A 7×6 pixel heart at `scale` — piece chrome stays in the pixel buffer.
+const HEART_ROWS = [0b0110110, 0b1111111, 0b1111111, 0b0111110, 0b0011100, 0b0001000];
+function drawHeart(ink, x, y, scale, color) {
+  for (let row = 0; row < HEART_ROWS.length; row++) {
+    for (let col = 0; col < 7; col++) {
+      if (HEART_ROWS[row] & (1 << (6 - col))) {
+        ink(...color).box(x + col * scale, y + row * scale, scale, scale);
+      }
+    }
+  }
+}
+
+function act({ event: e, screen, jump }) {
+  const now = performance.now();
+  const hit = (box) =>
+    box && e.x >= box.x && e.x < box.x + box.w && e.y >= box.y && e.y < box.y + box.h;
+
+  if (e.is("touch") && !gestureMode && !isTransitioning) {
+    gestureStartX = e.x;
+    gestureStartY = e.y;
+  }
+
+  // Commit to scrub (horizontal) or scroll (vertical) after 10px of travel.
+  if ((e.is("draw") || e.drag) && !gestureMode && !isTransitioning) {
+    const dx = Math.abs(e.x - gestureStartX);
+    const dy = Math.abs(e.y - gestureStartY);
+    if (Math.sqrt(dx * dx + dy * dy) > gestureThreshold) {
+      if (dx > dy && videoReady) {
+        gestureMode = "scrub";
+        wasPlayingBeforeScrub = !isPaused;
+        scrubber.start(e, currentProgress, !isPaused);
+        lastSeekProgress = currentProgress;
+      } else {
+        gestureMode = "scroll";
+        displayIndex = currentIndex;
+      }
+    }
+  }
+
+  if ((e.is("draw") || e.drag) && gestureMode === "scrub") {
+    scrubber.drag(e, screen.width);
+    if (Math.abs(scrubber.needleProgress - lastSeekProgress) > seekThreshold) {
+      globalSend({
+        type: "recorder:present:seek",
+        content: { progress: scrubber.needleProgress, scrubbing: true },
+      });
+      lastSeekProgress = scrubber.needleProgress;
+      currentProgress = scrubber.needleProgress;
+    }
+  }
+
+  if ((e.is("draw") || e.drag) && gestureMode === "scroll") {
+    const delta = (e.y - gestureStartY) / screen.height;
+    displayIndex = Math.max(0, Math.min(tapes.length - 1, currentIndex - delta));
+  }
+
+  if (e.is("lift")) {
+    if (gestureMode === "scrub") {
+      scrubber.end();
+      globalSend({
+        type: "recorder:present:seek",
+        content: { progress: scrubber.needleProgress, scrubEnd: true },
+      });
+      if (wasPlayingBeforeScrub) {
+        globalSend({ type: "recorder:present:play" });
+      }
+    } else if (gestureMode === "scroll") {
+      const swipe = e.y - gestureStartY;
+      if (now - lastSwipeTime < 300 || isTransitioning) {
+        gestureMode = null;
+        displayIndex = currentIndex;
+        return;
+      }
+      if (swipe < -swipeThreshold && currentIndex < tapes.length - 1) {
+        targetIndex = currentIndex + 1;
+        isTransitioning = true;
+        lastSwipeTime = now;
+      } else if (swipe > swipeThreshold && currentIndex > 0) {
+        targetIndex = currentIndex - 1;
+        isTransitioning = true;
+        lastSwipeTime = now;
+      } else {
+        targetIndex = currentIndex;
+        displayIndex = currentIndex;
+      }
+    } else if (!gestureMode) {
+      // Plain tap: heart button, handle, audio unlock, then pause toggle.
+      if (hit(heartBtnBox)) {
+        toggleHeart();
+      } else if (hit(handleBox) && tapeAt(currentIndex)?.owner?.handle) {
+        globalSend({ type: "tape:stop" });
+        jump(tapeAt(currentIndex).owner.handle); // → their profile.
+      } else if (!audioActivated && hasAudioContext) {
+        audioActivated = true;
+        globalSend({
+          type: "audio-context:resume-request",
+          content: { userGesture: true, source: "gram-first-tap", forceResume: true },
+        });
+        globalSend({ type: "recorder:present:play" }); // Unmute via Web Audio handoff.
+      } else if (videoReady) {
+        globalSend({ type: "tape:toggle-play-mp4" });
+      }
+    }
+    gestureMode = null;
+  }
+}
+
+function sim({ needsPaint }) {
+  if (scrubber.isScrubbing || scrubber.inertiaActive) {
+    scrubber.simulate();
+    if (Math.abs(scrubber.needleProgress - lastSeekProgress) > seekThreshold) {
+      globalSend({
+        type: "recorder:present:seek",
+        content: { progress: scrubber.needleProgress, scrubbing: true },
+      });
+      lastSeekProgress = scrubber.needleProgress;
+      currentProgress = scrubber.needleProgress;
+    }
+    if (scrubber.inertiaActive && Math.abs(scrubber.needleVelocity) < 0.0001) {
+      scrubber.reset();
+    }
+    needsPaint?.();
+  }
+}
+
+function receive({ type, content }) {
+  if (type === "tape:playback-progress") {
+    currentProgress = content.progress || 0;
+    videoReady = true;
+    return;
+  }
+  if (type === "tape:mp4-playing") {
+    isPaused = false;
+    return;
+  }
+  if (type === "tape:mp4-paused") {
+    isPaused = true;
+    return;
+  }
+  if (type === "tape:audio-context-state") {
+    hasAudioContext = true;
+    if (content.state === "running") audioActivated = true;
+    return;
+  }
+  if (type === "tape:error") {
+    console.warn("🖼️ gram tape error:", content);
+    playError = typeof content === "string" ? content : "error";
+  }
+}
+
+function leave() {
+  globalSend?.({ type: "tape:stop" }); // Tear down the underlay video.
+}
+
+export { boot, paint, act, sim, receive, leave };
diff --git a/system/public/aesthetic.computer/disks/laklok.mjs b/system/public/aesthetic.computer/disks/laklok.mjs
index 987182597c..05638c5cb0 100644
--- a/system/public/aesthetic.computer/disks/laklok.mjs
+++ b/system/public/aesthetic.computer/disks/laklok.mjs
@@ -6,7 +6,9 @@
   The raster piece and the vector client (`/html/` on laklok.com, source at
   `system/public/html/index.html`) are sisters — the settings pane (mode,
   tema, filter) exists on both and any change here should land there too.
-  `toolchain/laklok-sisters/` renders them side by side to keep it honest.
+  The update path lives in `toolchain/laklok-sisters/PARITY.md`:
+  `parity.mjs` diffs the mirrored constants (run it after touching either
+  side) and `sisters.mjs` renders them side by side for the visual half.
  */
 
 import { Chat } from "../lib/chat.mjs"; // TODO: Eventually expand to `net.Socket`
diff --git a/system/public/html/index.html b/system/public/html/index.html
index 6ab946ffaa..6ac7083085 100644
--- a/system/public/html/index.html
+++ b/system/public/html/index.html
@@ -11,8 +11,10 @@
      "raster" piece). Same terracotta theme + token colors, plain DOM so it
      loads instantly instead of waiting on the AC runtime + worker boot.
      The settings pane (mode / tema / filter) and the theme palettes mirror
-     the raster piece by name — keep them in lockstep; the suite in
-     toolchain/laklok-sisters/ renders both side by side to check. */
+     the raster piece by name — keep them in lockstep. The update path lives
+     in toolchain/laklok-sisters/PARITY.md: parity.mjs diffs the mirrored
+     constants (run it after touching either sister) and sisters.mjs renders
+     both side by side for the visual half. */
   :root, :root[data-theme="ler"] {
     --bg:        #b4643c;   /* warm terracotta/rust (laklok background) */
     --bg-deep:   #8f4e2e;   /* deeper rust for chrome wells */
@@ -82,6 +84,7 @@
     --painting:  #ffc88c;   /* peachy paintings */
     --kidlisp:   #ff8cc8;   /* pink kidlisp */
     --clock:     #ffd24b;   /* gold clock refs */
+    --yt:        #ff5050;   /* red youtube links (theme.youtube 255,80,80) */
     --heart:     #ffdcf0;   /* light pink hearts */
     --ok:        #64dc8c;   /* connected */
     --warn:      #ffd278;   /* connecting */
@@ -124,7 +127,7 @@
   .header-row {
     position: relative;
     display: flex; align-items: center; gap: 12px;
-    padding: 9px 14px;
+    padding: 9px 66px 9px 14px; /* right gutter clears the corner QR */
   }
   .wordmark { font-weight: 800; font-size: 22px; letter-spacing: -.5px; color: #5a2f1c;
     text-shadow: 0 1px 0 rgba(255,230,200,.5); }
@@ -139,7 +142,7 @@
   .presence {
     position: relative;
     display: flex; align-items: center; gap: 8px;
-    padding: 0 14px 7px; font-size: 12px; color: var(--text);
+    padding: 0 66px 7px 14px; font-size: 12px; color: var(--text);
   }
   .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn);
     box-shadow: 0 0 6px currentColor; }
@@ -148,6 +151,14 @@
   .presence .count b { color: #fff; }
   .presence .status { margin-left: auto; opacity: .8; }
 
+  /* 📱 laklok.com QR — pinned top-right with a white quiet zone, spanning both
+     header rows, same as the raster piece's paintQR. The gear sits to its left. */
+  #qrlink {
+    position: absolute; top: 6px; right: 6px; z-index: 4;
+    display: none; background: #fff; padding: 3px; line-height: 0;
+  }
+  #qr { display: block; image-rendering: pixelated; width: 50px; height: 50px; }
+
   /* ⚙️ Settings toggle — a little hamburger by the wordmark's QR-corner. */
   #gear {
     flex: 0 0 auto;
@@ -214,6 +225,7 @@
   }
   .msg.own:hover .editbtn { display: inline; }
   .editbtn:hover { color: var(--hover); }
+  .editbtn.slet:hover, .editbtn.armed { color: var(--bad); display: inline; }
 
   /* token colors */
   .t-handle  { color: var(--handle); cursor: pointer; }
@@ -223,8 +235,50 @@
   .t-painting{ color: var(--painting); }
   .t-kidlisp { color: var(--kidlisp); }
   .t-clock   { color: var(--clock); }
+  .t-url.yt  { color: var(--yt); }  /* YouTube links read red, like theme.youtube */
   .t-handle:hover, .t-url:hover { color: var(--hover); }
 
+  /* ── Media embeds (mirror chat.mjs previews) ────────────────────────────
+     #painting → 64px pixel preview · YouTube → 16:9 thumb linking out ·
+     direct image/video/audio files → native tags · other links → OG cards. */
+  .embeds { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 4px; }
+  .embed { display: block; }
+  .embed.painting {
+    width: 64px; height: 64px; object-fit: cover; image-rendering: pixelated;
+    border: 1px solid var(--painting); cursor: zoom-in;
+  }
+  /* Fixed frames (like raster's preview boxes) so late image loads don't
+     reflow the scroll position. */
+  .embed.img { width: 220px; height: 150px; object-fit: cover; border-radius: 4px; cursor: zoom-in; background: rgba(0,0,0,.2); }
+  .embed.yt { position: relative; width: 180px; height: 101px; } /* LINK_PREVIEW 16:9 */
+  .embed.yt img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
+  .embed.yt .play {
+    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
+    color: #fff; font-size: 26px; text-shadow: 0 1px 4px rgba(0,0,0,.8); pointer-events: none;
+  }
+  .embed.vid { width: 260px; height: 150px; object-fit: contain; border-radius: 4px; background: #000; }
+  .embed.aud { width: 240px; height: 32px; }
+  .embed.og {
+    display: none; gap: 8px; align-items: center; text-decoration: none;
+    border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px;
+    background: rgba(0,0,0,.15); color: var(--text); max-width: 320px;
+  }
+  .embed.og.ready { display: flex; }
+  .embed.og .thumb { width: 90px; height: 51px; object-fit: cover; border-radius: 3px; flex: 0 0 auto; }
+  .embed.og .fav { width: 16px; height: 16px; flex: 0 0 auto; }
+  .embed.og .t { font-size: 12px; line-height: 1.3; overflow: hidden; }
+  .embed.og .t .site { color: var(--time); font-size: 10px; display: block; }
+  .embed.og:hover { border-color: var(--hover); }
+
+  /* 🔍 Lightbox — the vector's take on chat.mjs's fullscreen painting modal. */
+  #lightbox {
+    position: fixed; inset: 0; z-index: 99; display: none;
+    background: rgba(10,6,4,.88); cursor: zoom-out;
+    align-items: center; justify-content: center; padding: 20px;
+  }
+  #lightbox.open { display: flex; }
+  #lightbox img { max-width: 92vw; max-height: 88vh; image-rendering: pixelated; }
+
   /* ── Composer ───────────────────────────────────────────────────────── */
   footer {
     flex: 0 0 auto; border-top: 1px solid var(--line);
@@ -262,6 +316,8 @@
       <div class="marquee" id="marquee"></div>
       <button id="gear" title="indstillinger" aria-label="indstillinger">≡</button>
     </div>
+    <a id="qrlink" href="https://laklok.com" title="laklok.com — scan, or click for the raster piece"
+       aria-label="laklok.com QR code"><canvas id="qr"></canvas></a>
     <div class="presence">
       <span class="dot" id="dot"></span>
       <span class="count"><b id="online">0</b> online · <b id="here">0</b> here</span>
@@ -302,6 +358,8 @@
     <button id="send" disabled>send</button>
   </footer>
 
+  <div id="lightbox"><img alt="" /></div>
+
 <script type="module">
 // ── laklok HTML chat client ────────────────────────────────────────────────
 // Connects to the live `chat-clock` instance (Laer Klokken). History via REST,
@@ -332,6 +390,26 @@ document.getElementById("marquee").innerHTML = [..."Laer Klokken"]
     `<b style="color:${CIRCUS[i % CIRCUS.length]};animation-delay:${(-i * .13).toFixed(2)}s">${c}</b>`)
   .join("");
 
+// 📱 laklok.com QR — same generator dep the raster piece uses (paintQR), served
+// from this origin, so both sisters encode the identical code. Fails quiet.
+import("/aesthetic.computer/dep/@akamfoad/qr/qr.mjs")
+  .then(({ qrcode, ErrorCorrectLevel }) => {
+    const cells = qrcode("https://laklok.com", {
+      errorCorrectLevel: ErrorCorrectLevel.L,
+    }).modules;
+    const size = cells.length;
+    const canvas = document.getElementById("qr");
+    canvas.width = size; canvas.height = size; // 1 canvas px per cell, CSS scales up
+    const ctx = canvas.getContext("2d");
+    ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, size, size);
+    ctx.fillStyle = "#000";
+    for (let y = 0; y < size; y++)
+      for (let x = 0; x < size; x++)
+        if (cells[y][x]) ctx.fillRect(x, y, 1, 1);
+    document.getElementById("qrlink").style.display = "block";
+  })
+  .catch((e) => console.warn("laklok QR generation failed:", e));
+
 // ── Settings (mode / tema / filter) — the raster piece's sister pane ────────
 // Persisted under the same names the raster piece uses; `?theme=`/`?links=`
 // query params override for shareable states and the sisters suite.
@@ -409,6 +487,177 @@ function hasMediaLink(text) {
   return !!urls && urls.some((u) => MEDIA_LINK.test(u));
 }
 
+// ── Media embeds — the vector's take on chat.mjs's inline previews ─────────
+// #painting → 64px preview (confirmed via /api/painting-code, image from
+// /media/paintings/<code>.png); YouTube → mqdefault thumb linking out (the
+// raster jumps out to youtube.com too); direct image/video/audio files →
+// native tags; every other non-sensitive URL → an OG card via
+// /api/og-preview + the /api/og-image proxy. All three endpoints send
+// Access-Control-Allow-Origin: *, so cross-origin from laklok.com is fine.
+const AC_API = "https://aesthetic.computer";
+const YT_LINK = /(?:youtube\.com\/(?:watch\?v=|shorts\/|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/; // mirror lib/chat-highlighting.mjs
+const FILE_IMG = /\.(png|jpe?g|gif|webp)([?#]|$)/i;
+const FILE_VID = /\.(mp4|mov|webm)([?#]|$)/i;
+const FILE_AUD = /\.(mp3|wav|ogg|m4a)([?#]|$)/i;
+const PAINTING_TOKEN = /(?<![\w&])#([a-z0-9]{3,})\b/gi; // mirror TOKEN's #painting arm
+
+const ogCache = new Map(); // url → metadata | null (failed — never retried, like ogPreviewCache)
+const paintingCache = new Map(); // code → true | false (confirmed / not-a-painting)
+
+// Rows hydrate their OG cards + painting confirms only once scrolled into
+// view, so a 40-message history seed doesn't fire 40 API calls at boot.
+const lazyRows = new IntersectionObserver(
+  (entries) => {
+    for (const entry of entries) {
+      if (!entry.isIntersecting) continue;
+      lazyRows.unobserve(entry.target);
+      entry.target._hydrateEmbeds?.();
+    }
+  },
+  { root: $log, rootMargin: "200px" },
+);
+
+const normalizeUrl = (tok) =>
+  (/^www\./i.test(tok) ? "https://" + tok : tok).replace(/[),.;!?]+$/, "");
+
+function ytEmbed(id) {
+  const a = document.createElement("a");
+  a.className = "embed yt";
+  a.href = "https://www.youtube.com/watch?v=" + id; // same jump-out as openYoutubeModal
+  a.target = "_blank"; a.rel = "noopener nofollow";
+  const img = document.createElement("img");
+  img.loading = "lazy"; img.alt = "YouTube";
+  img.src = `https://i.ytimg.com/vi/${id}/mqdefault.jpg`; // same thumb chat.mjs loads
+  img.onerror = () => a.remove();
+  a.append(img, span("play", "▶"));
+  return a;
+}
+
+function fileEmbed(url, kind) {
+  let el;
+  if (kind === "img") {
+    el = document.createElement("img");
+    el.loading = "lazy"; el.alt = url;
+    el.onclick = () => lightbox(url);
+  } else if (kind === "vid") {
+    el = document.createElement("video");
+    el.controls = true; el.playsInline = true; el.preload = "metadata";
+  } else {
+    el = document.createElement("audio");
+    el.controls = true; el.preload = "none";
+  }
+  el.className = "embed " + kind;
+  el.src = url;
+  el.onerror = () => el.remove();
+  return el;
+}
+
+function ogEmbed(url) {
+  const a = document.createElement("a");
+  a.className = "embed og";
+  a.href = url; a.target = "_blank"; a.rel = "noopener nofollow";
+  a._hydrate = async () => {
+    let meta = ogCache.get(url);
+    if (meta === undefined) {
+      try {
+        const r = await fetch(`${AC_API}/api/og-preview?url=${encodeURIComponent(url)}`);
+        meta = r.ok ? await r.json() : null;
+      } catch { meta = null; }
+      ogCache.set(url, meta);
+    }
+    if (!meta || (!meta.title && !meta.image)) return; // no card — the plain link already shows
+    if (meta.image) {
+      const img = document.createElement("img");
+      img.className = "thumb"; img.loading = "lazy"; img.alt = "";
+      img.src = `${AC_API}/api/og-image?url=${encodeURIComponent(meta.image)}`;
+      img.onerror = () => img.remove();
+      a.append(img);
+    } else if (meta.favicon) {
+      const fav = document.createElement("img");
+      fav.className = "fav"; fav.loading = "lazy"; fav.alt = "";
+      fav.src = `${AC_API}/api/og-image?url=${encodeURIComponent(meta.favicon)}`;
+      fav.onerror = () => fav.remove();
+      a.append(fav);
+    }
+    const t = span("t", "");
+    let host = url; try { host = new URL(url).hostname; } catch {}
+    t.append(span("site", meta.siteName || host), document.createTextNode(meta.title || url));
+    a.append(t);
+    a.classList.add("ready");
+  };
+  return a;
+}
+
+function paintingEmbed(code) {
+  const img = document.createElement("img");
+  img.className = "embed painting";
+  img.alt = "#" + code; img.title = "painting #" + code;
+  img.style.display = "none";
+  img.onclick = () => lightbox(img.src);
+  img._hydrate = async () => {
+    let ok = paintingCache.get(code);
+    if (ok === undefined) {
+      try {
+        const r = await fetch(`${AC_API}/api/painting-code?code=${code}`);
+        ok = r.ok; // 404 → ordinary hashtag, not a painting (nonPaintingCodeCache)
+      } catch { ok = false; }
+      paintingCache.set(code, ok);
+    }
+    if (!ok) return;
+    img.src = `${AC_API}/media/paintings/${code}.png`; // short-code path chat.mjs resolves
+    img.onerror = () => img.remove(); // broken load sticks, no per-frame retry
+    img.style.display = "block";
+  };
+  return img;
+}
+
+function buildEmbeds(text) {
+  const wrap = document.createElement("div");
+  wrap.className = "embeds";
+  const seenUrl = new Set();
+  for (const tok of text.match(URLISH) || []) {
+    const url = normalizeUrl(tok);
+    if (seenUrl.has(url) || isSensitiveUrl(url)) continue;
+    seenUrl.add(url);
+    const yt = url.match(YT_LINK);
+    if (yt) wrap.append(ytEmbed(yt[1]));
+    else if (FILE_IMG.test(url)) wrap.append(fileEmbed(url, "img"));
+    else if (FILE_VID.test(url)) wrap.append(fileEmbed(url, "vid"));
+    else if (FILE_AUD.test(url)) wrap.append(fileEmbed(url, "aud"));
+    else wrap.append(ogEmbed(url));
+  }
+  PAINTING_TOKEN.lastIndex = 0;
+  const seenCode = new Set();
+  let m;
+  while ((m = PAINTING_TOKEN.exec(text))) {
+    const code = m[1].toLowerCase();
+    if (!seenCode.has(code)) { seenCode.add(code); wrap.append(paintingEmbed(code)); }
+  }
+  return wrap.childElementCount ? wrap : null;
+}
+
+function attachEmbeds(row, text) {
+  row.querySelector(".embeds")?.remove();
+  const wrap = buildEmbeds(text || "");
+  if (!wrap) return;
+  row.append(wrap);
+  row._hydrateEmbeds = () => { for (const el of wrap.children) el._hydrate?.(); };
+  lazyRows.observe(row);
+}
+
+// 🔍 Lightbox for paintings + direct images.
+const $lightbox = document.getElementById("lightbox");
+const $lightboxImg = $lightbox.querySelector("img");
+function lightbox(src) {
+  if (!src) return;
+  $lightboxImg.src = src;
+  $lightbox.classList.add("open");
+}
+$lightbox.onclick = () => { $lightbox.classList.remove("open"); $lightboxImg.src = ""; };
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape") $lightbox.classList.remove("open");
+});
+
 // ── Inline color codes (mirror lib/color-codes.mjs + chat's validity) ──────
 // A chatter can dye their own words with `\red\…\reset\`; anything that isn't
 // a real color stays literal typing. Same rules as the raster chat.
@@ -478,6 +727,7 @@ function renderTokens(frag, text, inheritColor) {
       el.title = "open " + tok; el.onclick = () => open("https://aesthetic.computer/" + tok);
     } else if (/^(https?:|www\.)/i.test(tok)) {
       el = document.createElement("a"); el.className = "t-url";
+      if (YT_LINK.test(tok)) el.classList.add("yt"); // red youtube links, like raster
       const href = /^www\./i.test(tok) ? "https://" + tok : tok;
       if (isSensitiveUrl(tok)) {
         el.classList.add("sensitive");
@@ -561,16 +811,29 @@ function rowFor(msg) {
   time.title = new Date(msg.when).toLocaleString();
   row.append(from, body, time);
   if (msg.hearts > 0) { const h = span("heart", "♥" + msg.hearts); row.append(h); }
-  // ✏️ own messages get an edit affordance once signed in (CSS shows it).
+  // ✏️ own messages get edit + delete affordances once signed in (CSS shows
+  // them). Delete arms on first click ("sikker?") — the raster confirms via
+  // its copy modal; both end in the same chat:delete wire message.
   if (msg.id && !msg.deleted) {
     const edit = document.createElement("button");
     edit.className = "editbtn"; edit.textContent = "✎ ret"; edit.title = "ret beskeden";
     edit.onclick = () => beginEdit(row);
-    row.append(edit);
+    const del = document.createElement("button");
+    del.className = "editbtn slet"; del.textContent = "✕ slet"; del.title = "slet beskeden";
+    del.onclick = () => {
+      if (del.classList.contains("armed")) {
+        postDelete(row.dataset.id);
+      } else {
+        del.classList.add("armed"); del.textContent = "sikker?";
+        setTimeout(() => { del.classList.remove("armed"); del.textContent = "✕ slet"; }, 2500);
+      }
+    };
+    row.append(edit, del);
   }
   decorateRow(row, msg);
   time.textContent = timeLabel(row);
   row._text = msg.text || "";
+  if (!msg.deleted) attachEmbeds(row, msg.text);
   return row;
 }
 
@@ -730,6 +993,7 @@ function connect() {
         row._text = content.text || "";
         row.dataset.edited = "1";
         row.classList.toggle("has-media", hasMediaLink(content.text || ""));
+        attachEmbeds(row, content.text);
         const t = row.querySelector(".time");
         if (t) t.textContent = timeLabel(row);
       }
@@ -739,7 +1003,8 @@ function connect() {
         row.classList.add("deleted");
         row.classList.remove("has-media");
         row.querySelector(".body").textContent = "[deleted]";
-        row.querySelector(".editbtn")?.remove();
+        row.querySelectorAll(".editbtn").forEach((b) => b.remove());
+        row.querySelector(".embeds")?.remove();
       }
     } else if (type === "message:hearts") {
       const row = $log.querySelector(`.msg[data-id="${content.for}"]`);
@@ -795,6 +1060,16 @@ function post(text) {
     }));
   }
 }
+// 🗑 Same payload the raster's copy-modal delete sends; the server answers
+// with a message:delete broadcast that redraws the row.
+function postDelete(id) {
+  if (!auth.token || !ws || ws.readyState !== 1 || !id) return;
+  ws.send(JSON.stringify({
+    type: "chat:delete",
+    content: { id, token: auth.token, sub: auth.sub },
+  }));
+}
+
 $send.onclick = () => { const t = $input.value.trim(); if (t) { post(t); $input.value = ""; } };
 $input.addEventListener("keydown", (e) => {
   if (e.key === "Enter") $send.click();