diff --git a/system/backend/MIME.md b/system/backend/MIME.md
index a150ee6dd7..1384bbc0d2 100644
--- a/system/backend/MIME.md
+++ b/system/backend/MIME.md
@@ -1,9 +1,11 @@
 # Mime
 
 Discussion on AC media. The frontend is `/mime/`; the API is `/api/mime`.
-The main feed uses square media frames without cropping, loads 12 posts at a
-time while scrolling, and preserves loaded posts and position across thread
-visits. A load-more button also supports manual loading and retries.
+The main feed snaps to one viewport per media item without cropping, following
+the tape viewer (`disks/tv.mjs`). It loads 12 posts at a time and preserves the
+current item across thread visits and orientation changes. Videos play muted
+inline and pause offscreen. A load-more button supports manual loading and
+retries. The feed has no category bar, file composer, or footer.
 `/mimechan/` preserves old hash links through a redirect, and `/api/mimechan`
 remains an alias. Existing uploaded files and replies stay in `mimechan`.
 
@@ -48,7 +50,7 @@ Painting and tape metadata endpoints expose `discussion` URLs for other clients.
 
 Direct entry: `/mime/#/media/painting/abc` (also `tape`, `piece`, or `kidlisp`).
 The painting viewer includes a Comment button. Other media can be discussed from
-their MIME board or direct entry URL.
+the main feed or a direct entry URL.
 The prompt curtain includes a MIME link; entering `mime` opens the same page.
 The corner word returns to `/prompt`.
 
diff --git a/system/public/mime/index.html b/system/public/mime/index.html
index 4d099b561f..7376a51537 100644
--- a/system/public/mime/index.html
+++ b/system/public/mime/index.html
@@ -50,20 +50,6 @@
     header { text-align: left; padding: 1em 1em 0.4em; }
     header h1 { margin: 0; color: var(--ink); font: 22px/1.5 "YWFTProcessing-Regular", "Berkeley Mono Variable", monospace; }
     header h1 a { color: inherit; text-decoration: none; }
-    nav#boards {
-      display: flex; flex-wrap: wrap; gap: 0.4em 0.8em;
-      text-align: left;
-      padding: 0.6em 1em;
-      border-top: 1px solid var(--card-edge);
-      border-bottom: 1px solid var(--card-edge);
-      margin: 0.8em 0 1em;
-      font-size: 0.9em;
-    }
-    nav#boards a { overflow-wrap: anywhere; }
-    nav#boards a[aria-current="page"] { color: var(--ink); font-weight: bold; }
-    nav#boards:empty { display: none; }
-    details { margin-bottom: 1em; }
-    summary { cursor: pointer; color: var(--link); margin-bottom: 0.5em; }
     .pages { display: flex; justify-content: space-between; margin-top: 1em; }
     main { width: 100%; max-width: 80rem; margin: 0; padding: 0 1em; }
     h2 { color: var(--ink); font-size: 1.2em; }
@@ -87,8 +73,6 @@
     }
     form#post textarea { min-height: 4.5em; resize: vertical; }
     form#post input[readonly] { color: var(--ink); border-color: transparent; background: transparent; }
-    form#post input[type="file"] { max-width: 100%; min-width: 0; }
-    form#post .filerow { display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; }
     form#post button, .feed-more button {
       background: var(--ink); color: var(--paper);
       border: 0; border-radius: 4px; min-height: 44px;
@@ -105,8 +89,6 @@
     a.discussion:hover, a.discussion:active {
       background: var(--ink); color: var(--paper);
     }
-    #dest { color: var(--green); font-weight: bold; }
-    #formhint { color: var(--dim); font-size: 0.85em; margin: 0; }
     #status { color: var(--accent); }
 
     .post {
@@ -136,68 +118,65 @@
       display: inline-block; background: var(--paper);
       border: 1px dashed var(--card-edge); padding: 0.8em 1.2em;
     }
-    .feed-list { display: grid; gap: 1em; max-width: 40rem; }
-    .feed-post { margin: 0; padding: 0; overflow: hidden; }
-    .feed-post > .meta { margin: 0.7em 0.85em 0.3em; }
-    .feed-post > .filemeta { margin: 0.3em 0.85em 0.6em; }
-    .feed-media { aspect-ratio: 1; width: 100%; overflow: hidden; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; background: var(--paper); }
+    body.feed { padding: 0; overflow: hidden; }
+    body.feed header { position: fixed; top: 0; left: 0; z-index: 2; padding-top: max(0.6em, env(safe-area-inset-top)); }
+    body.feed header a { background: var(--paper); }
+    body.feed main {
+      max-width: none; padding: 0; height: 100vh; height: 100dvh;
+      overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-type: y mandatory;
+    }
+    .feed-list { width: 100%; }
+    .post.feed-post {
+      position: relative; height: 100vh; height: 100dvh; margin: 0; border: 0;
+      padding: max(3.5rem, calc(env(safe-area-inset-top) + 2.5rem)) 0 max(0.75rem, env(safe-area-inset-bottom));
+      display: flex; flex-direction: column; gap: 0.5em; overflow: hidden;
+      background: var(--paper); scroll-snap-align: start; scroll-snap-stop: always;
+    }
+    .feed-media {
+      order: -1; flex: 1; min-height: 0; width: 100%; overflow: hidden;
+      display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
+    }
     .feed-media > * { min-width: 0; min-height: 0; }
     .feed-media > img, .feed-media > video, .feed-media > iframe.doc {
-      width: 100%; height: 100%; max-height: none; min-height: 0; object-fit: contain; border: 0;
+      width: 100%; height: 100%; max-height: none; object-fit: contain; border: 0;
     }
-    .feed-media > pre.textfile { width: 100%; height: 100%; max-height: none; min-height: 0; margin: 0; border: 0; }
+    .feed-media > pre.textfile { width: 100%; height: 100%; max-height: none; margin: 0; border: 0; overscroll-behavior: contain; }
     .feed-media > audio { width: calc(100% - 2em); }
     .feed-media > .blob { max-width: calc(100% - 2em); }
-    .feed-post > .body { padding: 0 0.85em; }
-    .feed-post > .discussion { margin: 0.7em 0.85em; }
-    .feed-more { max-width: 40rem; padding: 1em 0; display: flex; align-items: center; gap: 1em; }
-    .feed-more [role="status"] { color: var(--dim); }
-    main > details, main > .dir { max-width: 40rem; }
-    main > .dir { margin-bottom: 1em; }
+    .feed-post > .meta { margin: 0 0.75rem; }
+    .feed-post > .body { margin: 0 0.75rem; max-height: 15vh; overflow: auto; }
+    .feed-post > .discussion { align-self: center; flex-shrink: 0; margin: 0; }
+    .feed-more { position: absolute; top: max(0.6em, env(safe-area-inset-top)); right: 0.75rem; display: flex; align-items: center; gap: 0.5em; max-width: calc(100% - 6rem); }
+    .feed-more button { padding: 0.3em 0.6em; }
+    .feed-more [role="status"] { color: var(--dim); font-size: 0.85em; }
+    body.feed main > p { margin: 4rem 0.75rem; }
     .omitted { color: var(--dim); font-size: 0.85em; margin: 0.3em 0; }
     .replies { margin-left: 1.5em; }
     @media (max-width: 40em) {
       .replies { margin-left: 0; }
-      header, nav#boards { padding-left: 0.75rem; padding-right: 0.75rem; }
+      header { padding-left: 0.75rem; padding-right: 0.75rem; }
       main { padding: 0 0.75rem; }
       .post { padding: 0.6em; }
-      .feed-post { padding: 0; }
-    }
+      }
 
-    .dir { display: flex; flex-wrap: wrap; gap: 0.5em; }
-    .dir a.b {
-      background: var(--card); border: 1px solid var(--card-edge);
-      padding: 0.35em 0.6em; text-decoration: none; color: var(--body); overflow-wrap: anywhere;
-    }
-    .dir a.b .t { color: var(--ink); font-weight: bold; }
-    .dir a.b .n { color: var(--dim); font-size: 0.8em; margin-left: 0.5em; }
-    body.dragging::after {
-      content: "drop file";
-      position: fixed; inset: 0; display: grid; place-items: center;
-      background: color-mix(in srgb, var(--paper) 80%, transparent);
-      color: var(--ink); font-size: 1.4em; pointer-events: none;
-    }
-    footer { text-align: left; color: var(--dim); font-size: 0.8em; margin-top: 3em; padding: 0 1rem; }
   </style>
 </head>
 <body>
   <header>
     <h1><a href="/prompt" aria-label="Return to Aesthetic Computer prompt">mime</a></h1>
   </header>
-  <nav id="boards"></nav>
   <main id="view"></main>
-  <footer><a href="https://aesthetic.computer">aesthetic.computer</a></footer>
 
 <script>
 const API = "/api/mime";
 const view = document.getElementById("view");
-const nav = document.getElementById("boards");
-let pendingFile = null; // { name, type, data } staged for the form
 let routeController;
-let feedCache, activeFeed, feedObserver;
+let feedCache, activeFeed, feedObserver, playbackObserver;
 history.scrollRestoration = "manual";
-window.addEventListener("scroll", () => {
-  if (activeFeed) activeFeed.scrollY = window.scrollY;
+view.addEventListener("scroll", () => {
+  if (activeFeed && activeFeed.viewportHeight === view.clientHeight) {
+    activeFeed.index = Math.round(view.scrollTop / view.clientHeight);
+  }
 }, { passive: true });
 
 const esc = (s) => s ?? "";
@@ -234,6 +213,7 @@ function renderFile(file) {
   } else if (top === "video") {
     media = el("video");
     media.controls = true;
+    media.playsInline = true;
     media.preload = "metadata";
     media.src = file.url;
   } else if (file.type === "application/pdf" || file.type === "text/html") {
@@ -282,7 +262,7 @@ function renderText(text) {
 }
 
 function renderPost(post, isOp, inThread = false, contextBoard, inFeed = false) {
-  const div = el("div", "post" + (isOp ? " op" : "") + (inFeed ? " feed-post" : ""));
+  const div = el(inFeed ? "article" : "div", "post" + (isOp ? " op" : "") + (inFeed ? " feed-post" : ""));
   div.id = post.code;
   const meta = el("div", "meta");
   meta.append(el("span", "name", esc(post.name) || "Anonymous"), document.createTextNode(" · " + ago(post.when) + " · "));
@@ -303,8 +283,9 @@ function renderPost(post, isOp, inThread = false, contextBoard, inFeed = false)
     const file = renderFile(post.file);
     if (inFeed) {
       const frame = el("div", "feed-media");
+      if (file.tagName === "VIDEO") { file.muted = true; file.loop = true; }
       frame.append(file);
-      div.append(fm, frame);
+      div.append(frame);
     } else div.append(fm, file);
   }
   if (post.text) div.append(renderText(post.text));
@@ -404,11 +385,11 @@ function postForm(parent) {
   name.setAttribute("aria-label", "Name (optional)");
   name.maxLength = 40;
   const text = el("textarea");
-  text.placeholder = parent ? "comment" : "comment (optional)";
-  text.setAttribute("aria-label", parent ? "Comment" : "Comment (optional)");
+  text.placeholder = "comment";
+  text.setAttribute("aria-label", "Comment");
   text.maxLength = 4000;
   name.name = "commenter";
-  const button = el("button", null, parent ? "reply" : "post");
+  const button = el("button", null, "reply");
   const status = el("span");
   status.id = "status";
   status.setAttribute("role", "status");
@@ -417,61 +398,12 @@ function postForm(parent) {
     if (form.isConnected) status.textContent = "sign in again to use your handle";
   });
 
-  // Only opening posts accept files. Comments have no picker, paste or drop upload path.
   document.ondragover = (e) => { e.preventDefault(); };
   document.ondrop = (e) => { e.preventDefault(); };
-  if (!parent) {
-    const filerow = el("div", "filerow");
-    const file = el("input");
-    file.type = "file";
-    file.setAttribute("aria-label", "File");
-    const dest = el("span");
-    dest.id = "dest";
-    filerow.append(file, dest);
-    const hint = el("p", null, "Choose, drop, or paste a file · 8 MB max");
-    hint.id = "formhint";
-    file.setAttribute("aria-describedby", "formhint");
-    form.prepend(filerow, hint);
-    let stagedVersion = 0;
-    const stage = (f) => {
-      const version = ++stagedVersion;
-      pendingFile = null;
-      button.disabled = false;
-      dest.textContent = "";
-      const details = form.closest("details");
-      if (details) details.open = true;
-      if (f.size > 8 * 1024 * 1024) { status.textContent = "file over 8 MB"; return; }
-      status.textContent = "reading file…";
-      button.disabled = true;
-      const reader = new FileReader();
-      reader.onload = () => {
-        if (version !== stagedVersion || !form.isConnected) return;
-        button.disabled = false;
-        status.textContent = "";
-        pendingFile = { name: f.name, type: fileType(f), data: reader.result.split(",")[1] };
-        dest.textContent = f.name + " → /" + pendingFile.type + "/";
-      };
-      reader.onerror = () => { button.disabled = false; status.textContent = "file unreadable"; };
-      reader.readAsDataURL(f);
-    };
-    file.onchange = () => file.files[0] && stage(file.files[0]);
-    document.ondragover = (e) => { e.preventDefault(); document.body.classList.add("dragging"); };
-    document.ondragleave = () => document.body.classList.remove("dragging");
-    document.ondrop = (e) => {
-      e.preventDefault();
-      document.body.classList.remove("dragging");
-      if (e.dataTransfer.files[0]) stage(e.dataTransfer.files[0]);
-    };
-    document.onpaste = (e) => {
-      const f = [...(e.clipboardData?.files || [])][0];
-      if (f) stage(f);
-    };
-  }
 
   form.onsubmit = async (e) => {
     e.preventDefault();
-    if (!parent && !pendingFile) { status.textContent = "choose a file"; return; }
-    if (parent && !text.value.trim()) { status.textContent = "empty reply"; return; }
+    if (!text.value.trim()) { status.textContent = "empty reply"; return; }
     status.textContent = "posting…";
     button.disabled = true;
     try {
@@ -480,12 +412,10 @@ function postForm(parent) {
       const res = await fetch(API, {
         method: "POST",
         headers: { "Content-Type": "application/json", ...(identity.token ? { Authorization: "Bearer " + identity.token } : {}) },
-        body: JSON.stringify({ name: name.value, text: text.value, parent, ...(!parent ? { file: pendingFile } : {}) }),
+        body: JSON.stringify({ name: name.value, text: text.value, parent }),
       });
       const out = await res.json();
       if (!res.ok) { status.textContent = out.error; return; }
-      if (!parent) feedCache = null;
-      pendingFile = null;
       history.replaceState(null, "", "#/t/" + (parent || out.code));
       await route();
     } catch (error) {
@@ -497,30 +427,6 @@ function postForm(parent) {
   return form;
 }
 
-// Use the browser type, then extension, then generic bytes.
-function fileType(f) {
-  if (f.type) return f.type;
-  const ext = f.name.split(".").pop().toLowerCase();
-  const map = { lisp: "text/x-lisp", lua: "text/x-lua", mjs: "text/javascript", js: "text/javascript",
-    md: "text/markdown", txt: "text/plain", html: "text/html", css: "text/css", json: "application/json",
-    mid: "audio/midi", midi: "audio/midi", wasm: "application/wasm", png: "image/png", jpg: "image/jpeg",
-    jpeg: "image/jpeg", gif: "image/gif", webp: "image/webp", svg: "image/svg+xml", mp3: "audio/mpeg",
-    wav: "audio/wav", ogg: "audio/ogg", mp4: "video/mp4", webm: "video/webm", mov: "video/quicktime",
-    pdf: "application/pdf", zip: "application/zip", ttf: "font/ttf", otf: "font/otf", woff: "font/woff", woff2: "font/woff2" };
-  return map[ext] || "application/octet-stream";
-}
-
-async function loadNav(active, signal) {
-  const { boards } = await read(API, signal);
-  nav.replaceChildren(...boards.flatMap((b, i) => {
-    const a = el("a", null, "/" + b.board + "/");
-    a.href = "#/" + b.board;
-    if (b.board === active) a.setAttribute("aria-current", "page");
-    return i ? [document.createTextNode(" "), a] : [a];
-  }));
-  return boards;
-}
-
 function pages(page, hasMore, path) {
   const links = el("nav", "pages");
   links.setAttribute("aria-label", "Pages");
@@ -541,8 +447,8 @@ async function home(page = 0, signal) {
   let state = feedCache?.startPage === page ? feedCache : null;
   if (!state) {
     const data = await read(API + "?page=" + page, signal);
-    state = { startPage: page, nextPage: page + 1, boards: data.boards,
-      hasMore: data.hasMore, nodes: [], codes: new Set(), scrollY: 0 };
+    state = { startPage: page, nextPage: page + 1,
+      hasMore: data.hasMore, nodes: [], codes: new Set(), index: 0 };
     for (const post of data.recent) {
       if (state.codes.has(post.code)) continue;
       state.codes.add(post.code);
@@ -551,21 +457,12 @@ async function home(page = 0, signal) {
     feedCache = state;
   }
   if (signal.aborted) return;
-  const restoreY = state.scrollY;
-  const upload = el("details");
-  upload.append(el("summary", null, "post file"), postForm(null));
-  const dir = el("div", "dir");
-  for (const b of state.boards) {
-    const a = el("a", "b");
-    a.href = "#/" + b.board;
-    a.setAttribute("aria-label", b.board + ": " + b.threads + " threads");
-    a.append(el("span", "t", "/" + b.board + "/"), el("span", "n", b.threads));
-    dir.append(a);
-  }
+  const restoreIndex = state.index;
   const list = el("div", "feed-list");
   list.setAttribute("aria-label", "Media feed");
+  state.nodes.forEach((node) => node.querySelector(".feed-more")?.remove());
   list.append(...state.nodes);
-  view.replaceChildren(upload, dir, list);
+  view.replaceChildren(list);
   if (!state.nodes.length) list.append(el("p", null, "no media yet"));
   const more = el("div", "feed-more");
   const button = el("button", null, "load more");
@@ -573,7 +470,22 @@ async function home(page = 0, signal) {
   const status = el("span");
   status.setAttribute("role", "status");
   more.append(button, status);
-  if (state.hasMore) view.append(more);
+  const attachMore = () => {
+    if (state.hasMore) (state.nodes.at(-1) || list).append(more);
+    else more.remove();
+  };
+  attachMore();
+  if ("IntersectionObserver" in window) {
+    playbackObserver = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        for (const media of entry.target.querySelectorAll("video, audio")) {
+          if (!entry.isIntersecting || entry.intersectionRatio < 0.6) media.pause();
+          else if (media.tagName === "VIDEO" && !document.hidden) media.play().catch(() => {});
+        }
+      }
+    }, { root: view, threshold: [0, 0.6] });
+    state.nodes.forEach((node) => playbackObserver.observe(node));
+  }
   let loading = false;
   const loadMore = async () => {
     if (loading || !state.hasMore || signal.aborted) return;
@@ -591,13 +503,14 @@ async function home(page = 0, signal) {
         const node = renderPost(post, false, false, undefined, true);
         state.nodes.push(node);
         list.append(node);
+        playbackObserver?.observe(node);
       }
       state.nextPage++;
       state.hasMore = data.hasMore;
       status.textContent = "";
       button.textContent = "load more";
-      if (!state.hasMore) more.remove();
-      else feedObserver?.observe(more);
+      attachMore();
+      if (state.hasMore) feedObserver?.observe(state.nodes.at(-1) || more);
     } catch (error) {
       if (!signal.aborted) {
         status.textContent = "could not load more posts";
@@ -613,21 +526,20 @@ async function home(page = 0, signal) {
   if ("IntersectionObserver" in window) {
     feedObserver = new IntersectionObserver((entries) => {
       if (entries.some((entry) => entry.isIntersecting)) loadMore();
-    }, { rootMargin: "600px 0px" });
+    }, { root: view, rootMargin: "150% 0px" });
   }
+  state.viewportHeight = view.clientHeight;
   activeFeed = state;
   requestAnimationFrame(() => {
     if (signal.aborted) return;
-    window.scrollTo(0, restoreY);
-    if (state.hasMore) feedObserver?.observe(more);
+    view.scrollTop = restoreIndex * view.clientHeight;
+    if (state.hasMore) feedObserver?.observe(state.nodes.at(-1) || more);
   });
 }
 
 async function board(name, page = 0, signal) {
   const data = await read(API + "?board=" + encodeURIComponent(name) + "&page=" + page, signal);
-  const upload = el("a", null, "post file");
-  upload.href = "#/";
-  view.replaceChildren(upload);
+  view.replaceChildren();
   for (const t of data.threads) {
     view.append(renderPost(t.op, true, false, name));
     const omitted = t.replyCount - t.replies.length;
@@ -645,7 +557,9 @@ async function thread(code, kind, signal) {
   const data = await read(API + (kind ? "?media=" + encodeURIComponent(kind) + "&code=" : "?thread=") + encodeURIComponent(code), signal);
   code = data.op.code;
   if (kind) history.replaceState(null, "", "#/t/" + code);
-  view.replaceChildren(renderPost(data.op, true, true, data.op.board));
+  const back = el("a", null, "← feed");
+  back.href = "#/";
+  view.replaceChildren(back, renderPost(data.op, true, true, data.op.board));
   const wrap = el("div", "replies");
   for (const r of data.replies) wrap.append(renderPost(r, false, false, data.op.board));
   view.append(wrap, postForm(code));
@@ -661,31 +575,30 @@ async function read(url, signal) {
 }
 
 async function route() {
-  if (activeFeed) activeFeed.scrollY = window.scrollY;
+  if (activeFeed) activeFeed.index = Math.round(view.scrollTop / view.clientHeight);
   activeFeed = null;
   feedObserver?.disconnect();
   feedObserver = null;
+  playbackObserver?.disconnect();
+  playbackObserver = null;
+  view.querySelectorAll("video, audio").forEach((media) => media.pause());
   routeController?.abort();
   routeController = new AbortController();
   const { signal } = routeController;
   window.scrollTo(0, 0);
-  pendingFile = null;
   document.ondragover = document.ondragleave = document.ondrop = document.onpaste = null;
-  document.body.classList.remove("dragging");
   const [hash, query] = location.hash.replace(/^#\/?/, "").split("?");
+  document.body.classList.toggle("feed", !hash);
   const params = new URLSearchParams(query);
   const page = Math.max(0, parseInt(params.get("page")) || 0);
   view.replaceChildren(el("p", null, "loading…"));
-  nav.replaceChildren();
   try {
-    let active;
     if (!hash) await home(page, signal);
-    else if (hash.startsWith("t/")) active = await thread(hash.slice(2), undefined, signal);
+    else if (hash.startsWith("t/")) await thread(hash.slice(2), undefined, signal);
     else if (hash.startsWith("media/")) {
       const [, kind, code] = hash.split("/");
-      active = await thread(decodeURIComponent(code || ""), kind, signal);
-    } else active = await board(decodeURIComponent(hash), page, signal);
-    if (hash) await loadNav(active, signal);
+      await thread(decodeURIComponent(code || ""), kind, signal);
+    } else await board(decodeURIComponent(hash), page, signal);
     if (signal.aborted) return;
     if (params.get("comment") === "1" && (hash.startsWith("t/") || hash.startsWith("media/"))) {
       const comment = view.querySelector("#post textarea");
@@ -698,6 +611,26 @@ async function route() {
   }
 }
 
+// Keep the same item through orientation changes, as in the tape viewer.
+window.addEventListener("resize", () => {
+  if (activeFeed) {
+    view.scrollTop = activeFeed.index * view.clientHeight;
+    activeFeed.viewportHeight = view.clientHeight;
+  }
+});
+document.addEventListener("visibilitychange", () => {
+  if (document.hidden) view.querySelectorAll("video, audio").forEach((media) => media.pause());
+});
+window.addEventListener("keydown", (event) => {
+  if (!activeFeed || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey ||
+      event.target.closest("input, textarea, button, a, audio, video, pre, [contenteditable]")) return;
+  const step = { ArrowDown: 1, PageDown: 1, ArrowUp: -1, PageUp: -1 }[event.key];
+  if (!step) return;
+  event.preventDefault();
+  const index = Math.max(0, Math.min(activeFeed.nodes.length - 1, activeFeed.index + step));
+  view.scrollTo({ top: index * view.clientHeight,
+    behavior: matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth" });
+});
 window.onhashchange = route;
 route();
 </script>