Show each shot's scene slug, so a wrong grouping is visible

Shots sharing a scene are drawn from one frame of that place. When the
grouping is wrong the symptom is a set that drifts, and until now the
slug doing the grouping was not on the page at all.

trailer.html

@@ -12,6 +12,7 @@
        padding:10px 16px;border-radius:10px 10px 0 0;cursor:pointer;font:inherit;font-size:14px}
   .tab.on{color:var(--ink);border-color:var(--line);background:var(--panel)}
   .tab.lead{color:var(--accent)}
+  .scene{color:var(--accent2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
   .tab .sc{color:var(--accent2);margin-left:7px;font-weight:600}
   .tab .st{color:var(--muted);margin-left:7px;font-size:12px}
   .head{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;margin-bottom:6px}
@@ -490,7 +491,9 @@
     return '<div class="shot"><div class="num">' + esc(s.id) + '</div><div class="body">'
       + '<h3>' + esc(s.title || "") + '</h3>'
       + '<div class="where">' + esc(s.setting || "") + ' &middot; '
-      + Number(s.edit_seconds || 0).toFixed(1) + 's</div>'
+      + Number(s.edit_seconds || 0).toFixed(1) + 's'
+      + (s.scene ? ' &middot; <span class="scene">' + esc(s.scene) + '</span>' : '')
+      + '</div>'
       + media
       + '<p class="act">' + esc(s.action || "") + '</p>'
       + (s.camera ? '<p class="cam">camera: ' + esc(s.camera) + '</p>' : '')