diff --git a/README.md b/README.md
index a91d8ce..c1cb22b 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # HackiNews
 
-A personal Hacker News reader. Stories are cached in Postgres and can be filtered by score or title.
+A personal Hacker News reader. Stories are cached in Postgres and can be filtered by score, title, or by what has arrived since your last visit.
 
 ## Requirements
 
@@ -41,6 +41,57 @@ bundle exec ruby worker.rb          # loop
 bundle exec rake worker             # one shot
 ```
 
+## New since last visit
+
+The listing marks stories that were not there on your previous load, and the
+pill under the score filter narrows the page to just those. It runs in the
+browser: the pages are served with public cache headers and a single ETag, so
+per-visitor state cannot live on the server without sessions or giving up
+caching. The baseline is the set of story ids from the last load (kept in
+`localStorage` under `hn.visit.v1` for seven days), not a posting timestamp,
+because stories are often hours old by the time their score lifts them into the
+listing. Rapid refreshes within five minutes keep the same marks rather than
+clearing them before they have been read.
+
+To exercise it without waiting for HN, run this in the console on the listing to
+forget the top five stories and push the baseline past the grace window, then
+reload -- they come back marked new:
+
+```js
+;(() => {
+  const KEY = 'hn.visit.v1', N = 5
+  const s = JSON.parse(localStorage.getItem(KEY) || '{}')
+  s.seen = s.seen || {}
+  s.lastVisit = Date.now() - 10 * 60 * 1000
+  s.cutoff = s.lastVisit - 1000
+  Object.keys(s.seen).forEach(id => { s.seen[id] = s.lastVisit - 60000 })
+  Array.from(document.querySelectorAll('tr[date]')).slice(0, N).forEach(r => delete s.seen[r.id])
+  localStorage.setItem(KEY, JSON.stringify(s))
+  location.reload()
+})()
+```
+
+`N = 0` gives the empty case, and `localStorage.removeItem('hn.visit.v1')`
+resets to a first visit, where nothing is new.
+
+## Keyboard
+
+On the listing:
+
+| Key | Does |
+| --- | --- |
+| `j` / `k` | Down / up a row, holding the column (comments, points, title) |
+| `h` / `l` | Previous / next link |
+| `space` | Activate the focused filter |
+| `?` | Show the cheatsheet |
+
+`k` past the first story steps up into the filters -- the new-since-last-visit
+pill, then the score pills, landing on the score already in effect -- where
+`h`/`l` moves along that row and `space` applies it. `j` walks back down into
+the listing.
+
+Story pages take the same keys, minus the filters; `?` there lists what applies.
+
 ## Tests
 
 ```bash
diff --git a/app.rb b/app.rb
index e77e043..e962c97 100644
--- a/app.rb
+++ b/app.rb
@@ -17,6 +17,21 @@
 class App < Sinatra::Base
   MIN_SCORES = [0, 50, 100, 200, 300, 400, 500, 750, 1000].freeze
 
+  # Rendered into the ? cheatsheet. Kept beside the routes rather than in the
+  # templates so each page documents the keys its own script actually binds.
+  LISTING_SHORTCUTS = [
+    [%w[j k], 'Down or up a row, keeping the column'],
+    [%w[h l], 'Previous or next link'],
+    [%w[space], 'Activate the focused filter'],
+    [%w[?], 'This help']
+  ].freeze
+
+  STORY_SHORTCUTS = [
+    [%w[j k], 'Down or up a comment'],
+    [%w[h l], 'Previous or next link'],
+    [%w[?], 'This help']
+  ].freeze
+
   configure :development do
     set :host_authorization, permitted_hosts: []
   end
@@ -99,6 +114,7 @@ def cache_for(records)
   end
 
   get '/' do
+    @shortcuts = LISTING_SHORTCUTS
     @q = params['q']
     @min_score = (params['min_score'] || 50).to_i
     @next_min_score =
@@ -117,6 +133,7 @@ def cache_for(records)
   STORY_ID_RANGE = (1..2_147_483_647)
 
   get '/stories/:id' do
+    @shortcuts = STORY_SHORTCUTS
     id = Integer(params[:id], exception: false)
     halt 404 unless id && STORY_ID_RANGE.cover?(id)
 
diff --git a/tests/app_test.rb b/tests/app_test.rb
index 14d73e7..b685841 100644
--- a/tests/app_test.rb
+++ b/tests/app_test.rb
@@ -415,6 +415,110 @@ def test_membership_change_invalidates_the_homepage_cache
     assert_equal 200, last_response.status, 'membership changed, must not 304'
   end
 
+  # --- new since last visit -------------------------------------------------
+
+  # The filter runs in the browser because the listing is cached publicly under
+  # one ETag for everyone; the server only ships the control. It must arrive
+  # hidden so a visitor without JS -- or without writable storage, where the
+  # script bails -- never sees a toggle that does nothing.
+  def test_new_since_last_visit_control_is_hidden_until_scripted
+    create_item id: 1, title: 'A', score: 100
+
+    get '/'
+    body = last_response.body
+
+    assert_includes body, 'New since last visit'
+    assert_match(/<ul id="new-filter"[^>]*\shidden/, body)
+    assert_match(/<p id="no-new-stories"[^>]*\shidden/, body)
+  end
+
+  # The baseline is a set of story ids, not a timestamp: a story is often hours
+  # old by the time its score lifts it into the listing. That only works while
+  # every row carries its id.
+  def test_listing_rows_carry_story_ids_for_the_new_filter
+    create_item id: 42, title: 'A', score: 100
+
+    get '/'
+
+    assert_match(/<tr id="42"/, last_response.body)
+  end
+
+  # Hiding rows can strand a date divider above a different day, so the
+  # dividers are rebuilt from the visible rows on every filter change rather
+  # than inserted once at load.
+  def test_date_dividers_are_rebuilt_rather_than_inserted_once
+    create_item id: 1, title: 'A', score: 100
+
+    get '/'
+
+    assert_includes last_response.body, 'function renderDateRows'
+    assert_match(/renderDateRows\(\)/, last_response.body)
+  end
+
+  # --- keyboard navigation --------------------------------------------------
+
+  # j/k step up out of the listing into the filters, which the script finds by
+  # id. Renaming or dropping either container silently strands the walk at the
+  # first story, so the hooks are pinned here.
+  def test_filter_rows_expose_the_ids_keyboard_nav_walks
+    create_item id: 1, title: 'A', score: 100
+
+    get '/'
+    body = last_response.body
+
+    assert_includes body, '<ul id="min-score"'
+    assert_includes body, '<ul id="new-filter"'
+    assert_match(/visibleLinks\('#min-score a'\)/, body)
+    assert_match(/visibleLinks\('#new-filter a'\)/, body)
+  end
+
+  # The score pills are anchors, which answer to Enter but not Space, and UIkit
+  # strips their focus ring; both are patched over so the filters are usable
+  # from the keyboard alone.
+  def test_filters_are_operable_and_visible_from_the_keyboard
+    create_item id: 1, title: 'A', score: 100
+
+    get '/'
+    body = last_response.body
+
+    assert_match(/e\.key === ' '/, body)
+    assert_includes body, 'a:focus-visible'
+  end
+
+  # --- keyboard shortcuts overlay -------------------------------------------
+
+  # Each page documents the keys its own script binds, so the listing's filter
+  # shortcut must not leak onto a story page that has no filters.
+  def test_listing_cheatsheet_lists_the_filter_shortcut
+    create_item id: 1, title: 'A', score: 100
+
+    get '/'
+    body = last_response.body
+
+    assert_includes body, 'Keyboard shortcuts'
+    assert_includes body, 'Activate the focused filter'
+    assert_includes body, 'Down or up a row, keeping the column'
+  end
+
+  def test_story_cheatsheet_documents_comment_navigation_only
+    create_item id: 1, title: 'A', score: 100
+
+    get '/stories/1'
+    body = last_response.body
+
+    assert_includes body, 'Down or up a comment'
+    refute_includes body, 'Activate the focused filter'
+  end
+
+  # A 404 renders through the same layout; without a shortcut list there is
+  # nothing to show, and the partial must not be rendered at all.
+  def test_pages_without_shortcuts_omit_the_cheatsheet
+    get '/nope'
+
+    assert_equal 404, last_response.status
+    refute_includes last_response.body, 'Keyboard shortcuts'
+  end
+
   # --- listing scope --------------------------------------------------------
 
   # The listing used to rely on comments never carrying a score key.
diff --git a/views/_shortcuts.erb b/views/_shortcuts.erb
new file mode 100644
index 0000000..5997932
--- /dev/null
+++ b/views/_shortcuts.erb
@@ -0,0 +1,39 @@
+<!-- Keyboard cheatsheet, opened with ?.
+
+     The close button carries a literal x rather than UIkit's uk-close: that
+     glyph is an SVG injected by uikit-icons.js, which the layout does not load,
+     so the button would render empty. -->
+<div id="shortcuts" uk-modal>
+  <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
+    <button class="uk-close uk-modal-close-default" type="button" aria-label="Close">&times;</button>
+    <h3 class="uk-modal-title">Keyboard shortcuts</h3>
+    <table class="uk-table uk-table-small hn-keys">
+      <tbody>
+        <% shortcuts.each do |keys, description| %>
+          <tr>
+            <td class="uk-table-shrink uk-text-nowrap">
+              <% keys.each_with_index do |key, i| %><%= ' / ' if i.positive? %><code><%= h key %></code><% end %>
+            </td>
+            <td><%= h description %></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<script>
+  (function () {
+    // The dialog is UIkit's, so without its JS there is nothing to open; the
+    // page is unstyled at that point anyway.
+    if (!window.UIkit) return
+
+    var dialog = document.querySelector('#shortcuts')
+
+    document.addEventListener('keydown', function (e) {
+      if (e.key !== '?') return
+      e.preventDefault()
+      UIkit.modal(dialog)[dialog.classList.contains('uk-open') ? 'hide' : 'show']()
+    })
+  })()
+</script>
diff --git a/views/index.erb b/views/index.erb
index cad52a6..dce1023 100644
--- a/views/index.erb
+++ b/views/index.erb
@@ -1,5 +1,5 @@
 <p class="uk-form-label uk-text-center uk-text-meta">Minimum Score</p>
-<ul class="uk-subnav uk-subnav-pill uk-flex-center" uk-margin>
+<ul id="min-score" class="uk-subnav uk-subnav-pill uk-flex-center" uk-margin>
   <% App::MIN_SCORES.each do |score| %>
     <li<%= ' class="uk-active"' if @min_score == score %>>
       <a href="?min_score=<%= score %>"><%= score %></a>
@@ -7,8 +7,21 @@
   <% end %>
 </ul>
 
+<!-- Hidden until the script has confirmed it can keep a baseline, so a
+     visitor without JS or without storage never sees a dead toggle. -->
+<ul id="new-filter" class="uk-subnav uk-subnav-pill uk-flex-center" hidden uk-margin>
+  <li id="new-filter-item">
+    <a href="#" id="new-filter-toggle" aria-pressed="false">New since last visit<span id="new-filter-count"></span></a>
+  </li>
+</ul>
+
+<p id="no-new-stories" class="uk-placeholder uk-text-center" hidden>
+  Nothing new since your last visit.
+  <a href="#" id="show-all-stories">Show all</a>
+</p>
+
 <% if @stories.present? %>
-  <table class="uk-table hn-table-xsmall">
+  <table id="stories" class="uk-table hn-table-xsmall">
     <thead>
       <tr>
         <th class="uk-table-shrink hn-text-xsmall"><span class="uk-visible@s">Comments</span></th>
@@ -55,54 +68,241 @@
 <script>
   var daterowTemplate = document.querySelector('#daterow')
 
-  Array.from(document.querySelectorAll('tr[date]')).forEach(function (el) {
-    var date = new Date(el.getAttribute('date') * 1000)
-    var prettyDate = date.toLocaleDateString(undefined, {
-      weekday: 'short', month: 'short', day: 'numeric'
+  // Rebuilt from the currently visible rows rather than inserted once, because
+  // the "new since last visit" filter hides rows after the fact and would
+  // otherwise strand a divider above stories from a different day, or above
+  // nothing at all.
+  function renderDateRows () {
+    Array.from(document.querySelectorAll('tr.daterow')).forEach(function (el) { el.remove() })
+
+    var lastLabel = null
+    Array.from(document.querySelectorAll('tr[date]')).forEach(function (el) {
+      if (el.hidden) return
+
+      var date = new Date(el.getAttribute('date') * 1000)
+      var label = date.toLocaleDateString(undefined, {
+        weekday: 'short', month: 'short', day: 'numeric'
+      })
+      var isToday = (new Date()).toDateString() === date.toDateString()
+
+      if (label !== lastLabel && !isToday) {
+        var daterow = daterowTemplate.content.cloneNode(true)
+        daterow.querySelector('tr').className = 'daterow'
+        daterow.querySelector('td').textContent = label
+        el.parentNode.insertBefore(daterow, el)
+      }
+      lastLabel = label
     })
-    var daterow = daterowTemplate.content.cloneNode(true)
-    daterow.querySelector('td').textContent = prettyDate
-    var alreadyInserted = Array.from(el.parentNode.children).some(e => daterow.textContent.includes(e.textContent))
-    var isToday = (new Date()).toDateString() === date.toDateString()
-    if (!alreadyInserted && !isToday) el.parentNode.insertBefore(daterow, el)
-  })
+  }
+
+  renderDateRows()
+</script>
+
+<!-- "New since last visit"
+
+     Deliberately client-side. The listing is served with public cache headers
+     and one ETag shared by every visitor, so "what have *I* already seen"
+     cannot live on the server without either sessions or making the page
+     uncacheable. The baseline is the set of story ids from the previous load
+     rather than a posting timestamp: a story is often hours old by the time it
+     crosses the score threshold and appears here, and filtering on when it was
+     posted would hide exactly those arrivals. -->
+<script>
+  (function () {
+    var KEY = 'hn.visit.v1'
+    // A refresh moments after the last one should not wipe the highlight before
+    // it has been read, so the cutoff only advances once the previous view has
+    // been on screen long enough to have been looked at.
+    var GRACE_MS = 5 * 60 * 1000
+    // Stories rotate off the listing; without an expiry the seen map only grows.
+    var TTL_MS = 7 * 24 * 60 * 60 * 1000
+
+    var rows = Array.from(document.querySelectorAll('tr[date]'))
+    if (!rows.length) return
+
+    var store
+    try {
+      // Safari in private mode exposes localStorage but throws on write, so the
+      // probe has to actually write.
+      store = window.localStorage
+      store.setItem(KEY, store.getItem(KEY) || '{}')
+    } catch (e) {
+      return // No storage means no baseline; leave the control hidden.
+    }
+
+    var state
+    try { state = JSON.parse(store.getItem(KEY)) || {} } catch (e) { state = {} }
+
+    var now = Date.now()
+    var seen = state.seen || {}
+    // A first visit has no previous load to compare against: the cutoff is now,
+    // nothing is marked new, and the whole listing becomes the baseline.
+    var cutoff = state.lastVisit && now - state.lastVisit >= GRACE_MS
+      ? state.lastVisit
+      : (state.cutoff || now)
+
+    var newIds = []
+    rows.forEach(function (row) {
+      if (!seen[row.id]) seen[row.id] = now
+      if (seen[row.id] > cutoff) {
+        row.classList.add('hn-new')
+        newIds.push(row.id)
+      }
+    })
+
+    Object.keys(seen).forEach(function (id) {
+      if (now - seen[id] > TTL_MS) delete seen[id]
+    })
+
+    var enabled = !!state.on
+    var nav = document.querySelector('#new-filter')
+    var item = document.querySelector('#new-filter-item')
+    var toggle = document.querySelector('#new-filter-toggle')
+    var count = document.querySelector('#new-filter-count')
+    var table = document.querySelector('#stories')
+    var placeholder = document.querySelector('#no-new-stories')
+
+    function persist () {
+      store.setItem(KEY, JSON.stringify({
+        seen: seen, cutoff: cutoff, lastVisit: now, on: enabled
+      }))
+    }
+
+    function apply () {
+      rows.forEach(function (row) {
+        row.hidden = enabled && !row.classList.contains('hn-new')
+      })
+      renderDateRows()
+      item.classList.toggle('uk-active', enabled)
+      toggle.setAttribute('aria-pressed', enabled ? 'true' : 'false')
+      // An empty table would render as a bare header, so swap in a placeholder
+      // that also offers the way back out of the filter.
+      var blank = enabled && newIds.length === 0
+      table.hidden = blank
+      placeholder.hidden = !blank
+    }
+
+    function setEnabled (value) {
+      return function (e) {
+        e.preventDefault()
+        enabled = value
+        apply()
+        persist()
+      }
+    }
+
+    count.textContent = ' (' + newIds.length + ')'
+    nav.hidden = false
+    apply()
+    // Written after the first render so a load that throws midway does not
+    // consume the baseline and lose the unread stories.
+    persist()
+
+    toggle.addEventListener('click', function (e) { setEnabled(!enabled)(e) })
+    document.querySelector('#show-all-stories').addEventListener('click', setEnabled(false))
+  })()
 </script>
 
 <!-- Keyboard Navigation -->
 <script>
+  // Hidden rows are not focusable, so a filtered-out link would silently eat a
+  // keystroke; every lookup walks the visible links only.
+  function visibleLinks(selector) {
+    return Array.from(document.querySelectorAll(selector)).filter(function (el) {
+      return el.offsetParent !== null
+    })
+  }
+
+  // The controls above the listing, top to bottom. j/k treat each as one more
+  // row above the stories, so the filters are reachable without leaving the
+  // keyboard. Rows that are not on the page drop out instead of swallowing a
+  // keystroke: the new-since filter is absent without storage, and the
+  // placeholder only exists while the filter is hiding everything.
+  function controlRows() {
+    return [
+      visibleLinks('#min-score a'),
+      visibleLinks('#new-filter a'),
+      visibleLinks('#no-new-stories a')
+    ].filter(function (row) { return row.length })
+  }
+
+  function rowIndexOf(rows, el) {
+    for (var i = 0; i < rows.length; i++) if (rows[i].indexOf(el) !== -1) return i
+    return -1
+  }
+
+  // Which column of the listing j/k walks, taken from where focus already is.
+  function storyLinks() {
+    if (document.activeElement.classList.contains('comments')) return visibleLinks('a.comments')
+    if (document.activeElement.classList.contains('points')) return visibleLinks('a.points')
+    return visibleLinks('.story a')
+  }
+
+  // Arriving at a filter lands on the value already in effect, so h/l nudges
+  // from the current score rather than walking up from the far left.
+  function focusRow(row) {
+    if (!row || !row.length) return
+    var active = row.filter(function (el) { return el.parentNode.classList.contains('uk-active') })[0]
+    ;(active || row[0]).focus()
+  }
+
+  function focusRelative(links, offset) {
+    var target = links[links.indexOf(document.activeElement) + offset]
+    if (target) target.focus()
+  }
+
+  // j/k: a row down or up, holding the column inside the listing and stepping
+  // out into the filters once past the first story.
   function relativelyFocusLink(offset) {
-    if (document.activeElement.classList.contains('comments')) {
-      var commentLinks = Array.from(document.querySelectorAll("a.comments"))
-      var currentCommentLink = commentLinks.indexOf(document.activeElement)
-      commentLinks[currentCommentLink + offset].focus()
-    } else if (document.activeElement.classList.contains('points')) {
-      var pointsLinks = Array.from(document.querySelectorAll("a.points"))
-      var currentPointLink = pointsLinks.indexOf(document.activeElement)
-      pointsLinks[currentPointLink + offset].focus()
-    } else {
-      var storyLinks = Array.from(document.querySelectorAll(".story a"))
-      var currentStoryLink = storyLinks.indexOf(document.activeElement)
-      storyLinks[currentStoryLink + offset].focus()
+    var rows = controlRows()
+    var links = storyLinks()
+    var row = rowIndexOf(rows, document.activeElement)
+
+    if (row !== -1) {
+      if (rows[row + offset]) focusRow(rows[row + offset])
+      else if (offset > 0 && links.length) links[0].focus()
+      return
+    }
+
+    var index = links.indexOf(document.activeElement)
+    // Nothing focused yet: j enters the listing, k enters the filters.
+    if (index === -1) {
+      if (offset > 0) { if (links.length) links[0].focus() }
+      else focusRow(rows[rows.length - 1])
+      return
     }
-  }
 
-  function focusPreviousLink() {
-      var links = Array.from(document.querySelectorAll("a"))
-      var currentLink = links.indexOf(document.activeElement)
-      links[currentLink - 1].focus()
+    if (links[index + offset]) links[index + offset].focus()
+    else if (offset < 0) focusRow(rows[rows.length - 1])
   }
 
-  function focusNextLink() {
-      var links = Array.from(document.querySelectorAll("a"))
-      var currentLink = links.indexOf(document.activeElement)
-      links[currentLink + 1].focus()
+  // h/l: the previous or next link. Inside a filter row the walk is clamped to
+  // that row, so stepping past the last score pill cannot drop focus into the
+  // page heading or the listing behind it.
+  function focusHorizontally(offset) {
+    var rows = controlRows()
+    var row = rowIndexOf(rows, document.activeElement)
+    focusRelative(row === -1 ? visibleLinks('a') : rows[row], offset)
   }
 
   document.addEventListener('keydown', function (e) {
+    // The cheatsheet is a dialog over the page; walking focus underneath it
+    // would scroll the listing out from behind it.
+    if (document.querySelector('.uk-modal.uk-open')) return
+
+    // Space activates a focused filter the way it would a button; these are
+    // anchors, which answer only to Enter on their own, and the page would
+    // scroll instead.
+    if (e.key === ' ' && rowIndexOf(controlRows(), document.activeElement) !== -1) {
+      e.preventDefault()
+      document.activeElement.click()
+      return
+    }
+
     if (!['h', 'j', 'k', 'l'].includes(e.key)) return
-    if (e.key === 'h') focusPreviousLink()
+    if (e.key === 'h') focusHorizontally(-1)
     if (e.key === 'j') relativelyFocusLink(1)
     if (e.key === 'k') relativelyFocusLink(-1)
-    if (e.key === 'l') focusNextLink()
+    if (e.key === 'l') focusHorizontally(1)
   })
 </script>
diff --git a/views/layout.erb b/views/layout.erb
index 7f9d21e..af32a34 100644
--- a/views/layout.erb
+++ b/views/layout.erb
@@ -12,6 +12,40 @@
       .hn-text-xsmall { font-size: 0.75em !important }
       .hn-cursor-pointer { cursor: pointer }
 
+      /* Rows the "new since last visit" filter keeps. The rule is paid for out
+         of the cell's own padding so marked titles stay aligned with the rest,
+         and tr[hidden] is spelled out because UIkit's table rules would
+         otherwise outrank the UA stylesheet's [hidden]. */
+      .hn-table-xsmall tr[hidden] { display: none }
+      tr.hn-new td.story { border-left: 3px solid #1e87f0; padding-left: 9px }
+
+      /* UIkit clears the focus ring on links, which leaves the j/k walk through
+         the filters with nothing to show for it -- the score pills would take
+         focus invisibly. Restricted to :focus-visible so clicking a pill does
+         not leave a ring behind. */
+      a:focus-visible,
+      .uk-subnav > * > a:focus-visible { outline: 2px solid #1e87f0; outline-offset: 2px }
+
+      /* Keys in the ? cheatsheet. UIkit paints <code> pink on near-white,
+         which reads as a link here rather than as a key. */
+      .hn-keys code {
+        background: #f8f8f8;
+        border: 1px solid #ddd;
+        border-radius: 3px;
+        padding: 2px 6px;
+        color: inherit;
+      }
+
+      /* UIkit's .uk-close only recolours the control; the browser's own button
+         chrome would still box the glyph. */
+      .uk-modal .uk-close {
+        background: none;
+        border: none;
+        font-size: 1.5rem;
+        line-height: 1;
+        cursor: pointer;
+      }
+
       .story a { text-decoration: none; }
       table a:visited { color: #999 }
 
@@ -79,6 +113,17 @@
            they sit beside. */
         .hn-dark .uk-comment-list li { border-left-color: #2a2a2a }
         .hn-dark .uk-comment-list li:hover { border-left-color: #58a6ff }
+
+        /* Same AAA blue as the high-score highlight; UIkit's #1e87f0 is dimmer
+           than the off-white text next to it on black. */
+        .hn-dark tr.hn-new td.story { border-left-color: #58a6ff }
+        .hn-dark a:focus-visible,
+        .hn-dark .uk-subnav > * > a:focus-visible { outline-color: #58a6ff }
+
+        /* The dialog keeps UIkit's white background otherwise, which .uk-light
+           then writes white text onto. */
+        .hn-dark .uk-modal-dialog { background-color: #111 }
+        .hn-dark .hn-keys code { background: #1a1a1a; border-color: #333 }
       }
     </style>
 
@@ -110,6 +155,10 @@
 
       <%= yield %>
 
+      <% if @shortcuts %>
+        <%= erb :_shortcuts, layout: false, locals: { shortcuts: @shortcuts } %>
+      <% end %>
+
       <% if ENV['GA_TRACKING_ID'] %>
         <script async src="https://www.googletagmanager.com/gtag/js?id=<%= ENV['GA_TRACKING_ID'] %>"></script>
         <script>
diff --git a/views/story.erb b/views/story.erb
index f9adaf1..196f084 100644
--- a/views/story.erb
+++ b/views/story.erb
@@ -89,6 +89,9 @@
   }
 
   document.addEventListener('keydown', function (e) {
+    // Ignore the nav keys while the ? cheatsheet is up, or focus walks the
+    // thread behind the dialog.
+    if (document.querySelector('.uk-modal.uk-open')) return
     if (!['h', 'j', 'k', 'l'].includes(e.key)) return
     if (e.key === 'h') focusPreviousLink()
     if (e.key === 'j') relativelyFocusLink(1)