diff --git a/format.sh b/format.sh
index b0b797b..595289f 100755
--- a/format.sh
+++ b/format.sh
@@ -14,3 +14,4 @@ RUST_LOG=error taplo fmt Cargo.toml htmlshell/Cargo.toml
 
 # Format HTML, CSS, and JS
 npx --yes prettier --list-different --write "ui/**/*.{html,css,js,json}"
+npx --yes prettier --list-different --write "resources/*.{html,css,js,json}"
diff --git a/resources/directory-listing.html b/resources/directory-listing.html
index 232d4b6..67ce3c8 100644
--- a/resources/directory-listing.html
+++ b/resources/directory-listing.html
@@ -1,103 +1,388 @@
 <!DOCTYPE html>
-<html>
-    <head>
-        <title>Index of</title>
-        <style>
-            h1 {
-                border-bottom: 1px solid black;
-            }
-
-            .listing {
-                margin: 0.5em;
-                display: table;
-            }
-
-            .listing .header,
-            .listing .entry {
-                display: table-row;
-            }
-
-            .listing .header {
-                font-weight: bold;
-            }
-
-            .listing .header span,
-            .listing .entry span {
-                display: table-cell;
-                padding-right: 1em;
-            }
-
-            .entry span:nth-child(1) {
-                min-width: 20em;
-            }
-
-            .entry span.size,
-            .entry span.last-modified {
-                white-space: nowrap;
-            }
-
-            .parent_link > a:before {
-                content: "📁 ";
-            }
-
-            .parent_link {
-                display: none;
-            }
-
-            .entry.directory > .name:before {
-                content: "📁 ";
-            }
-
-            .entry.file > .name:before {
-                content: "📄 ";
-            }
-
-            .entry.symlink > .name:before {
-                content: "🔗 ";
-            }
-        </style>
-        <script>
-            function setData(directoryName, parentLink, rows) {
-                document.title += " " + directoryName;
-                document.querySelector("h1").innerHTML += " " + directoryName;
-
-                if (parentLink != "") {
-                    document.querySelector(".parent_link > a").href = parentLink;
-                    document.querySelector(".parent_link").style.display = "initial";
-                }
-
-                rows.sort((rowA, rowB) => rowA[1].localeCompare(rowB[1]));
-
-                let listing = document.querySelector(".listing");
-                let rowTemplate = document.getElementById("rowTemplate");
-                for (row of rows) {
-                    let rowElement = rowTemplate.content.cloneNode(true);
-                    rowElement.querySelector(".entry").classList.add(row[0]);
-                    rowElement.querySelector(".name > .link").innerText = row[1];
-                    rowElement.querySelector(".name > .link").href = row[2];
-                    rowElement.querySelector(".size").innerText = row[3];
-                    rowElement.querySelector(".last-modified").innerText = row[4];
-                    listing.appendChild(rowElement);
-                }
-            }
-        </script>
-    </head>
-    <body>
-        <h1>Index of</h1>
-        <div class="parent_link"><a href="">Up to parent directory</a></div>
-        <div class="listing">
-            <div class="header">
-                <span class="name">Name</span>
-                <span class="size">Size</span>
-                <span class="last-modified">Last Modified</span>
-            </div>
-        </div>
-        <template id="rowTemplate">
-            <div class="entry">
-                <span class="name"><a class="link"></a></span>
-                <span class="size"></span>
-                <span class="last-modified"></span>
-            </div>
-        </template>
-    </body>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Index</title>
+  <!-- Active-theme tokens + the chrome's Lucide icon font, both reachable from a
+       content page over beaver:// (same as the font below). -->
+  <link rel="stylesheet" href="beaver://theme/index.css">
+  <link rel="stylesheet" href="beaver://shared/third_party/lucide/lucide.css">
+  <style>
+    @font-face {
+      font-family: "ReadexPro";
+      src: url(beaver://shared/fonts/ReadexPro.ttf) format("truetype");
+      font-display: swap;
+    }
+
+    /* Colors + spacing come from the active theme (beaver://theme/index.css).
+       Fallbacks are the exact default-theme values, used only if it fails. */
+    :root {
+      --dl-font: var(--font-family-base, "ReadexPro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+      --dl-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
+      --dl-bg: var(--bg-webview, oklch(99% 0.005 105));
+      --dl-fg: var(--color-text, oklch(22% 0.02 105));
+      --dl-fg-2: var(--color-text-secondary, oklch(42% 0.015 105));
+      --dl-fg-3: var(--color-text-tertiary, oklch(58% 0.01 105));
+      --dl-accent: var(--color-primary, oklch(48% 0.12 155));
+      --dl-border: var(--color-border, oklch(50% 0.02 105 / 0.18));
+      --dl-hover: var(--bg-hover, oklch(88% 0.03 105 / 0.4));
+      --dl-radius: var(--radius-sm, 0.5em);
+      --dl-ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
+      /* One intentional small-text scale: labels, secondary text, then body
+         (1rem) and the heading. Fewer steps, clearer intent. */
+      --dl-text-label: 0.72rem;
+      --dl-text-sm: 0.85rem;
+    }
+
+    * { box-sizing: border-box; }
+    html, body { margin: 0; }
+
+    body {
+      font-family: var(--dl-font);
+      color: var(--dl-fg);
+      background: var(--dl-bg);
+      min-height: 100vh;
+      padding: clamp(1.25rem, 4vw, 3rem);
+      line-height: 1.5;
+      font-size: 1rem;
+    }
+
+    main {
+      max-width: 52rem;
+      margin: 0 auto;
+      animation: rise 0.5s var(--dl-ease) both;
+    }
+    @keyframes rise {
+      from { opacity: 0; transform: translateY(12px); }
+      to   { opacity: 1; transform: none; }
+    }
+    @media (prefers-reduced-motion: reduce) { main { animation: none; } }
+
+    /* ===== Header ===== */
+    header { margin-bottom: var(--spacing-3xl, 1.5em); }
+
+    .eyebrow {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-sm, 0.375em);
+      margin: 0 0 var(--spacing-md, 0.5em);
+      font-size: var(--dl-text-label);
+      font-weight: 700;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--dl-accent);
+    }
+
+    h1 {
+      margin: 0;
+      font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.2rem);
+      line-height: 1.1;
+      font-weight: 700;
+      letter-spacing: -0.01em;
+      color: var(--dl-fg);
+      word-break: break-word;
+    }
+
+    .path {
+      margin: var(--spacing-sm, 0.375em) 0 0;
+      font-family: var(--dl-mono);
+      font-size: var(--dl-text-sm);
+      color: var(--dl-fg-3);
+      word-break: break-all;
+    }
+
+    .meta {
+      margin: var(--spacing-md, 0.5em) 0 0;
+      font-size: var(--dl-text-sm);
+      color: var(--dl-fg-2);
+    }
+
+    /* ===== Rows (parent link, header, entries share the flex column layout) ===== */
+    .parent,
+    .entry {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-lg, 0.625em);
+      padding: 0.5em 0.7em;
+      border-radius: var(--dl-radius);
+      color: var(--dl-fg);
+      text-decoration: none;
+      transition: background-color 0.14s var(--dl-ease);
+    }
+    .parent:hover,
+    .entry:hover { background: var(--dl-hover); }
+    .parent:focus-visible,
+    .entry:focus-visible {
+      outline: 2px solid var(--dl-accent);
+      outline-offset: -2px;
+    }
+
+    .parent {
+      color: var(--dl-accent);
+      font-weight: 600;
+      margin-bottom: var(--spacing-xs, 0.25em);
+    }
+
+    .list-head {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-lg, 0.625em);
+      padding: 0.35em 0.7em;
+      border-bottom: 1px solid var(--dl-border);
+      margin-bottom: var(--spacing-xs, 0.25em);
+      font-size: var(--dl-text-label);
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--dl-fg-3);
+    }
+
+    .listing {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* Icon glyph. Lucide forces font-size:inherit, so it tracks the row text;
+       colour is ours: accent for folders, muted otherwise. */
+    .entry-icon {
+      flex-shrink: 0;
+      width: 1.3em;
+      text-align: center;
+      color: var(--dl-fg-3);
+    }
+    .parent .entry-icon { color: inherit; }
+    .entry.directory .entry-icon { color: var(--dl-accent); }
+    .entry.symlink .entry-icon { color: var(--dl-fg-2); }
+
+    /* Columns: name flexes, size + modified are fixed so they align down the
+       list; the header carries a hidden icon-width spacer to match. */
+    .name, .col-name {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .entry.directory .name { font-weight: 600; }
+
+    .size, .col-size {
+      flex-shrink: 0;
+      width: 4.5rem;
+      text-align: right;
+      font-variant-numeric: tabular-nums;
+    }
+    .modified, .col-modified {
+      flex-shrink: 0;
+      width: 5.5rem;
+      text-align: right;
+      white-space: nowrap;
+      font-variant-numeric: tabular-nums;
+    }
+    .size, .modified {
+      font-size: var(--dl-text-sm);
+      color: var(--dl-fg-3);
+    }
+    .list-head .entry-icon { visibility: hidden; }
+
+    /* ===== Empty state ===== */
+    .empty {
+      margin-top: var(--spacing-4xl, 2.5em);
+      padding: var(--spacing-4xl, 2.5em) var(--spacing-3xl, 1.5em);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--spacing-sm, 0.375em);
+      text-align: center;
+      color: var(--dl-fg-3);
+    }
+    /* Wrapper sets the size the Lucide glyph inherits (it forces font-size:inherit). */
+    .empty-mark {
+      font-size: 1.75rem;
+      line-height: 1;
+      opacity: 0.5;
+      margin-bottom: var(--spacing-xs, 0.25em);
+    }
+    .empty-title {
+      margin: 0;
+      font-size: 1rem;
+      font-weight: 600;
+      color: var(--dl-fg-2);
+    }
+    .empty-sub {
+      margin: 0;
+      font-size: var(--dl-text-sm);
+    }
+  </style>
+</head>
+<body>
+  <main>
+    <header>
+      <p class="eyebrow"><span class="icon-folder-open" aria-hidden="true"></span>Local directory</p>
+      <h1 id="dir-name">Index</h1>
+      <p class="path" id="dir-path"></p>
+      <p class="meta" id="count"></p>
+    </header>
+
+    <a class="parent" id="parent" href="" style="display: none">
+      <span class="entry-icon icon-corner-up-left" aria-hidden="true"></span>
+      <span>Parent directory</span>
+    </a>
+
+    <div class="list-head">
+      <span class="entry-icon" aria-hidden="true"></span>
+      <span class="col-name">Name</span>
+      <span class="col-size">Size</span>
+      <span class="col-modified">Modified</span>
+    </div>
+
+    <ul class="listing" id="listing" role="list"></ul>
+
+    <div class="empty" id="empty" style="display: none">
+      <span class="empty-mark" aria-hidden="true"><span class="icon-folder-open"></span></span>
+      <p class="empty-title">This folder is empty</p>
+      <p class="empty-sub">There's nothing inside to list.</p>
+    </div>
+
+    <template id="rowTemplate">
+      <li class="entry-item">
+        <a class="entry">
+          <span class="entry-icon" aria-hidden="true"></span>
+          <span class="name"></span>
+          <span class="size"></span>
+          <span class="modified"></span>
+        </a>
+      </li>
+    </template>
+  </main>
+
+  <script>
+    // Called by the browser (a <script> tag appended after this document) with
+    // the directory URL, the parent URL ("" at a root), and rows shaped as
+    // [type, name, href, size, modified]. type is "directory" | "file" | "symlink".
+
+    // Files get an extension-aware icon so the list is scannable at a glance.
+    // Differentiation is by icon SHAPE, not colour (files stay muted; only
+    // folders take the accent), so it doesn't turn into a rainbow.
+    var EXT_ICON = (function () {
+      var groups = {
+        "image": "png jpg jpeg gif webp svg bmp ico avif heic heif tif tiff",
+        "film": "mp4 webm mkv mov avi m4v wmv flv mpg mpeg",
+        "music": "mp3 wav flac ogg m4a aac opus wma mid",
+        "file-archive": "zip tar gz tgz bz2 tbz xz 7z rar zst lz lzma",
+        "file-code": "js mjs cjs ts tsx jsx rs py c cc cpp cxx h hpp hh java go rb php swift kt kts scala lua pl pm sh bash zsh fish ps1 vim r dart ex exs erl clj html htm css scss sass less vue svelte astro",
+        "braces": "json jsonc yaml yml toml ini cfg conf env",
+        "file-spreadsheet": "csv tsv xls xlsx ods",
+        "file-text": "txt md markdown rst log rtf doc docx odt pages pdf",
+        "presentation": "ppt pptx odp",
+        "file-type": "ttf otf woff woff2 eot",
+        "disc": "iso dmg",
+        "package": "deb rpm apk pkg appimage msi",
+        "binary": "exe bin so dll dylib wasm o",
+        "database": "db sqlite sqlite3 sql",
+        "key": "pem key crt cert cer pub gpg asc"
+      };
+      var map = {};
+      Object.keys(groups).forEach(function (icon) {
+        groups[icon].split(" ").forEach(function (ext) { map[ext] = icon; });
+      });
+      return map;
+    })();
+
+    // A few well-known extension-less names.
+    var NAME_ICON = {
+      "dockerfile": "file-code", "makefile": "file-code", "cmakelists.txt": "file-code",
+      "readme": "file-text", "license": "file-text", "licence": "file-text",
+      ".gitignore": "file-code", ".gitattributes": "file-code", ".editorconfig": "file-code"
+    };
+
+    function iconForRow(type, name) {
+      if (type === "directory") return "folder";
+      if (type === "symlink") return "link";
+      var lower = name.toLowerCase();
+      if (NAME_ICON[lower]) return NAME_ICON[lower];
+      var dot = name.lastIndexOf(".");
+      var ext = dot > 0 ? name.slice(dot + 1).toLowerCase() : "";
+      return EXT_ICON[ext] || "file";
+    }
+
+    function setData(directoryName, parentLink, rows) {
+      var info = prettyPath(directoryName);
+      document.getElementById("dir-name").textContent = info.name;
+      document.getElementById("dir-path").textContent = info.path;
+      document.title = info.name;
+
+      if (parentLink) {
+        var parent = document.getElementById("parent");
+        parent.href = parentLink;
+        parent.style.display = "";
+      }
+
+      // Directories first, then natural-alphabetical (file2 before file10).
+      rows.sort(function (a, b) {
+        var ad = a[0] === "directory", bd = b[0] === "directory";
+        if (ad !== bd) return ad ? -1 : 1;
+        return a[1].localeCompare(b[1], undefined, { numeric: true, sensitivity: "base" });
+      });
+
+      var dirs = rows.filter(function (r) { return r[0] === "directory"; }).length;
+      document.getElementById("count").textContent = summarize(dirs, rows.length - dirs);
+
+      var listing = document.getElementById("listing");
+      if (!rows.length) {
+        document.getElementById("empty").style.display = "";
+        listing.style.display = "none";
+        return;
+      }
+
+      var tpl = document.getElementById("rowTemplate");
+      var frag = document.createDocumentFragment();
+      rows.forEach(function (row) {
+        var type = row[0];
+        var li = tpl.content.querySelector(".entry-item").cloneNode(true);
+        var el = li.querySelector(".entry");
+        el.href = row[2];
+        el.classList.add(type);
+        el.querySelector(".entry-icon").classList.add("icon-" + iconForRow(type, row[1]));
+
+        var nameEl = el.querySelector(".name");
+        nameEl.textContent = row[1];
+        nameEl.title = row[1];
+
+        el.querySelector(".size").textContent = type === "directory" ? "" : (row[3] || "");
+
+        // modified is "YYYY-MM-DD hh:mm:ss AM/PM"; show the date, full stamp on hover.
+        var modified = row[4] || "";
+        var modEl = el.querySelector(".modified");
+        modEl.textContent = modified.split(" ")[0];
+        if (modified) modEl.title = modified;
+
+        frag.appendChild(li);
+      });
+      listing.appendChild(frag);
+    }
+
+    function summarize(dirs, files) {
+      var parts = [];
+      if (dirs) parts.push(dirs + (dirs === 1 ? " folder" : " folders"));
+      if (files) parts.push(files + (files === 1 ? " file" : " files"));
+      return parts.join(" · ") || "Empty";
+    }
+
+    function prettyPath(urlStr) {
+      try {
+        var u = new URL(urlStr);
+        var path = decodeURIComponent(u.pathname) || urlStr;
+        var name = path.replace(/\/+$/, "").split("/").filter(Boolean).pop() || "/";
+        return { name: name, path: path };
+      } catch (e) {
+        return { name: urlStr, path: urlStr };
+      }
+    }
+  </script>
+</body>
 </html>
+
diff --git a/resources/neterror.html b/resources/neterror.html
index 8af6cbb..8ff78b3 100644
--- a/resources/neterror.html
+++ b/resources/neterror.html
@@ -1,8 +1,315 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <head>
-  <title>Error loading page</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Can't reach this page</title>
+  <link rel="stylesheet" href="beaver://theme/index.css">
+  <style>
+    /* The brand font, if a content page is allowed to reach the chrome's
+       beaver:// resources. If not, it falls through to the system stack, and
+       if the theme tokens ARE present var(--font-family-base) wins anyway. */
+    @font-face {
+      font-family: "ReadexPro";
+      src: url(beaver://shared/fonts/ReadexPro.ttf) format("truetype");
+      font-display: swap;
+    }
+
+    /* Colors come straight from the active theme via the beaver://theme/index.css
+       link above (--bg-main, --color-text, --color-primary, ...), so the page
+       matches whatever theme is active. The fallbacks are the exact default-theme
+       values, used only if that stylesheet somehow fails to load. */
+    :root {
+      --ne-font: var(--font-family-base, "ReadexPro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+      --ne-sky: var(--bg-main, linear-gradient(to bottom right in oklab,
+                  oklch(94% 0.08 115) 0%, oklch(82% 0.1 100) 100%));
+      --ne-fg: var(--color-text, oklch(22% 0.02 105));
+      --ne-fg-2: var(--color-text-secondary, oklch(42% 0.015 105));
+      --ne-fg-3: var(--color-text-tertiary, oklch(58% 0.01 105));
+      --ne-accent: var(--color-primary, oklch(48% 0.12 155));
+      --ne-on-accent: var(--color-text-on-header, oklch(99% 0.005 105));
+      --ne-border: var(--color-border, oklch(50% 0.02 105 / 0.18));
+      --ne-surface: var(--bg-surface, oklch(97% 0.01 105));
+      --ne-shadow: var(--color-shadow, oklch(35% 0.03 105 / 0.2));
+      --ne-radius: var(--radius-md, 1em);
+      --ne-radius-sm: var(--radius-sm, 0.5em);
+      --ne-ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
+    }
+
+    * { box-sizing: border-box; }
+    html, body { height: 100%; margin: 0; }
+
+    body {
+      font-family: var(--ne-font);
+      color: var(--ne-fg);
+      background: var(--ne-sky);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      /* Left-anchored rather than dead-centre: an asymmetric, editorial
+         composition (content to the left, the landscape sweeping full-width
+         below). On a narrow phone the column is width-constrained anyway, so
+         this only shapes the wider desktop / TV layouts. */
+      justify-content: flex-start;
+      padding: clamp(1.5rem, 5vw, 4.5rem);
+      line-height: 1.62;
+      overflow-x: hidden;
+    }
+
+    /* Ambient landscape: pinned to the bottom, receding behind the words. */
+    .hills {
+      position: fixed;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 42vh;
+      max-height: 360px;
+      z-index: 0;
+      pointer-events: none;
+      color: var(--ne-accent);
+      animation: settle 1.4s ease both;
+    }
+
+    /* Hills take the theme accent through currentColor (set via .hills color
+       above) and fill="currentColor" on the paths, because Servo doesn't resolve
+       var() inside the SVG fill property. They recede front to back via opacity. */
+    .hills .h1 { opacity: 0.2; }
+    .hills .h2 { opacity: 0.34; }
+    .hills .h3 { opacity: 0.5; }
+
+    main {
+      position: relative;
+      z-index: 1;
+      width: 100%;
+      max-width: 34rem;
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-2xl, 1em);
+    }
+
+    .eyebrow {
+      margin: 0;
+      font-size: 0.8rem;
+      font-weight: 700;
+      letter-spacing: 0.14em;
+      text-transform: uppercase;
+      color: var(--ne-accent);
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-lg, 0.625em);
+    }
+
+    /* A small stitched seam rather than an icon: a hand-crafted mark. */
+    .eyebrow::before {
+      content: "";
+      width: 1.6em;
+      height: 2px;
+      border-radius: 2px;
+      background: currentColor;
+      opacity: 0.75;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: clamp(2rem, 1.3rem + 3.4vw, 3.15rem);
+      line-height: 1.08;
+      font-weight: 700;
+      letter-spacing: -0.015em;
+      color: var(--ne-fg);
+      max-width: 16ch;
+    }
+
+    .lead {
+      margin: 0;
+      font-size: clamp(1.02rem, 0.96rem + 0.4vw, 1.18rem);
+      color: var(--ne-fg-2);
+      max-width: 54ch;
+    }
+
+    .reassure {
+      margin: 0;
+      font-size: 0.98rem;
+      color: var(--ne-fg-3);
+      max-width: 54ch;
+    }
+
+    .detail {
+      margin-top: var(--spacing-2xl, 1em);
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-md, 0.5em);
+      align-items: flex-start;
+    }
+
+    .detail-label {
+      font-size: 0.72rem;
+      font-weight: 700;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      color: var(--ne-fg-3);
+    }
+
+    .detail code {
+      max-width: 100%;
+      padding: 0.5em 0.8em;
+      border: 1px solid var(--ne-border);
+      border-radius: var(--ne-radius-sm);
+      background: var(--ne-surface);
+      color: var(--ne-fg-2);
+      font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
+      font-size: 0.85em;
+      line-height: 1.4;
+      word-break: break-word;
+    }
+
+    .actions {
+      margin-top: var(--spacing-2xl, 1em);
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-xl, 0.75em);
+    }
+
+    .btn {
+      appearance: none;
+      font: inherit;
+      font-weight: 650;
+      cursor: pointer;
+      padding: 0.7em 1.35em;
+      border-radius: var(--ne-radius);
+      border: 1px solid transparent;
+      transition: transform 0.18s var(--ne-ease),
+                  background-color 0.18s var(--ne-ease),
+                  border-color 0.18s var(--ne-ease),
+                  box-shadow 0.18s var(--ne-ease);
+    }
+
+    .btn:active { transform: translateY(1px); }
+    .btn:focus-visible {
+      outline: 2px solid var(--ne-accent);
+      outline-offset: 3px;
+    }
+
+    .btn-primary {
+      background: var(--ne-accent);
+      color: var(--ne-on-accent);
+      box-shadow: 0 6px 18px -8px var(--ne-shadow);
+    }
+
+    .btn-primary:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 10px 24px -10px var(--ne-shadow);
+    }
+
+    .btn-ghost {
+      background: var(--ne-surface);
+      color: var(--ne-fg);
+      border-color: var(--ne-border);
+    }
+
+    .btn-ghost:hover {
+      transform: translateY(-1px);
+      border-color: var(--ne-accent);
+    }
+
+    /* Motion: a calm, staggered arrival. Real objects settle, they don't bounce. */
+    @keyframes rise {
+      from { opacity: 0; transform: translateY(14px); }
+      to   { opacity: 1; transform: none; }
+    }
+
+    @keyframes settle {
+      from { opacity: 0; transform: translateY(20px); }
+      to   { opacity: 1; transform: none; }
+    }
+
+    main > * { animation: rise 0.6s var(--ne-ease) both; }
+    main > *:nth-child(1) { animation-delay: 0.04s; }
+    main > *:nth-child(2) { animation-delay: 0.10s; }
+    main > *:nth-child(3) { animation-delay: 0.16s; }
+    main > *:nth-child(4) { animation-delay: 0.22s; }
+    main > *:nth-child(5) { animation-delay: 0.28s; }
+    main > *:nth-child(6) { animation-delay: 0.34s; }
+
+    @media (prefers-reduced-motion: reduce) {
+      .hills, main > * { animation: none; }
+    }
+  </style>
 </head>
 <body>
-  <p>Could not load the requested page: ${reason}</p>
+  <svg class="hills" viewBox="0 0 1200 340" preserveAspectRatio="xMidYMax slice" aria-hidden="true">
+    <path class="h1" fill="currentColor" d="M0,150 C 210,96 380,178 600,140 S 1010,96 1200,146 L1200,340 L0,340 Z"/>
+    <path class="h2" fill="currentColor" d="M0,214 C 250,166 470,236 720,198 S 1060,176 1200,220 L1200,340 L0,340 Z"/>
+    <path class="h3" fill="currentColor" d="M0,268 C 300,238 520,290 800,262 S 1110,250 1200,276 L1200,340 L0,340 Z"/>
+  </svg>
+
+  <main>
+    <p class="eyebrow">Off the trail</p>
+    <h1>We can't reach this page</h1>
+    <p class="lead" id="lead">The page couldn't be loaded.</p>
+    <p class="reassure">Most detours are temporary. Try the path again in a moment, or head back to where you were.</p>
+    <div class="detail">
+      <span class="detail-label">Technical detail</span>
+      <code id="reason-raw">${reason}</code>
+    </div>
+    <div class="actions">
+      <button class="btn btn-primary" type="button" onclick="location.reload()">Try again</button>
+      <button class="btn btn-ghost" type="button" onclick="history.back()">Go back</button>
+    </div>
+  </main>
+
+  <script>
+    // Map the reasons Beaver reports (often a debug enum name) to a plain,
+    // friendly sentence. Unknown values pass through as-is, so the tinkerer
+    // still sees exactly what happened, and the raw value always stays in the
+    // "Technical detail" chip.
+    var FRIENDLY = {
+      ConnectionFailure: "We couldn't connect to the server.",
+      UnsupportedScheme: "This type of address isn't supported.",
+      RedirectError: "A redirect along the way failed.",
+      TooManyRedirects: "The page redirected too many times to follow.",
+      TooManyInFlightKeepAliveRequests: "Too many requests are in flight right now.",
+      InvalidMethod: "The request used a method that isn't allowed.",
+      InvalidPort: "That network port isn't permitted.",
+      ContentSecurityPolicy: "The page's security policy blocked this request.",
+      Nosniff: "The server's content type didn't match what was expected.",
+      SubresourceIntegrity: "A resource on the page failed its integrity check.",
+      MixedContent: "The page tried to load insecure content over a secure connection.",
+      CacheError: "Something went wrong reading from the cache.",
+      LocalDirectoryError: "This local folder couldn't be opened.",
+      DecompressionError: "The page's compressed data couldn't be unpacked.",
+      PartialResponseToNonRangeRequestError: "The server sent a partial response we didn't ask for.",
+      ProtocolHandlerSubstitutionError: "A custom protocol handler couldn't be applied.",
+      CorsGeneral: "Cross-origin security rules blocked this request.",
+      CrossOriginResponse: "Cross-origin security rules blocked the response.",
+      CorsCredentials: "Cross-origin credentials weren't allowed here.",
+      CorsAllowMethods: "The server didn't allow this cross-origin method.",
+      CorsAllowHeaders: "The server didn't allow these cross-origin headers.",
+      CorsMethod: "This cross-origin request method isn't allowed.",
+      CorsAuthorization: "Cross-origin authorization wasn't allowed.",
+      CorsHeaders: "The cross-origin request headers weren't allowed.",
+      "client error (Connect)": "We couldn't connect to the server."
+    };
+
+    (function () {
+      var rawEl = document.getElementById("reason-raw");
+      var raw = (rawEl.textContent || "").trim();
+      var lead = document.getElementById("lead");
+      var friendly = FRIENDLY[raw];
+
+      if (friendly) {
+        lead.textContent = friendly;
+      } else if (raw) {
+        // Not a known code: it's already a message, so lead with it and drop
+        // the now-redundant detail chip.
+        lead.textContent = raw;
+        var detail = rawEl.parentElement;
+        if (detail) { detail.style.display = "none"; }
+      }
+
+      document.title = lead.textContent;
+    })();
+  </script>
 </body>
 </html>
+
diff --git a/ui/system/desktop/palette.js b/ui/system/desktop/palette.js
index eef2a8f..89d7002 100644
--- a/ui/system/desktop/palette.js
+++ b/ui/system/desktop/palette.js
@@ -319,7 +319,10 @@ function buildResults(query) {
   }
 
   // Fall-through: if the query looks navigable, offer to navigate.
-  if (q && (q.includes(".") || q.startsWith("http"))) {
+  if (
+    q &&
+    (q.includes(".") || q.startsWith("http") || q.startsWith("file://"))
+  ) {
     groups.unshift({
       group: "Navigate",
       items: [
