Redesign: light-table concept, dark background, readable stats

Shared style.css, grease-pencil swipe marks, log-scale outlier ruler,
paper-mount gallery cards with larger views/subscribers figures.
Add the sample outliers CSV.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

style.css

@@ -0,0 +1,88 @@
+/* Shared design tokens and components for Thumbnail Tinder.
+   Concept: a light table. Frosted glass surface, slide mounts, grease-pencil marks.
+   Red pencil = chosen, graphite = rejected, blue pencil = postponed. */
+
+:root {
+  --table-hi: #26262B;   /* table: dark grey */
+  --table-lo: #1B1B1F;
+  --on: #F1F4FA;         /* text on the table */
+  --on-muted: #A8A8B2;
+  --mount: #FBFBF9;      /* paper: slide mounts, cards */
+  --ink: #15171B;
+  --muted: #4A515B;      /* secondary text on paper */
+  --line: #C9CDD3;
+  --red: #DE3028;
+  --blue: #2A5BD7;
+
+  --f-display: 'Unbounded', 'Onest', system-ui, sans-serif;
+  --f-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
+}
+
+* { box-sizing: border-box; }
+html { height: 100%; }
+body {
+  margin: 0; min-height: 100%;
+  font: 15px/1.45 var(--f-body);
+  color: var(--ink);
+  background: var(--table-lo);
+}
+button, select { font: inherit; color: inherit; }
+button { cursor: pointer; }
+button:disabled { cursor: default; }
+a { color: inherit; text-decoration: none; }
+:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
+.hidden { display: none !important; }
+
+.brand { font: 600 14px/1 var(--f-display); letter-spacing: -.02em; white-space: nowrap; color: var(--on); }
+
+kbd {
+  font: 500 11px/1 var(--f-mono); padding: 3px 6px; border-radius: 3px;
+  border: 1px solid currentColor; opacity: .75;
+}
+
+/* ---------- Buttons ----------
+   Default: ink on paper. Inside a header (on the table) they flip to light on dark. */
+header { --fg: var(--on); --fg-inv: var(--table-lo); }
+.btn {
+  --fg: var(--ink); --fg-inv: var(--mount);
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+  padding: 9px 16px; border-radius: 6px; white-space: nowrap;
+  font-weight: 600; font-size: 14px; line-height: 1.2;
+  background: transparent; color: var(--fg); border: 1.5px solid var(--fg);
+  transition: background .15s, color .15s;
+}
+header .btn { --fg: var(--on); --fg-inv: var(--table-lo); }
+.btn:not(:disabled):hover { background: var(--fg); color: var(--fg-inv); }
+.btn.primary { background: var(--fg); color: var(--fg-inv); }
+.btn.primary:not(:disabled):hover { opacity: .88; }
+.btn:disabled { opacity: .3; }
+select.btn { appearance: none; padding-right: 16px; cursor: pointer; }
+select.btn:hover { background: transparent; color: var(--fg); }
+select.btn option { background: var(--mount); color: var(--ink); }
+
+/* ---------- Drop zone ---------- */
+.screen {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 14px; text-align: center; padding: 32px 24px; min-height: 420px;
+  background: var(--mount); border: 1.5px dashed var(--muted); border-radius: 6px;
+  transition: border-color .15s, background .15s;
+}
+.screen.solid { border: 1px solid var(--line); box-shadow: 0 24px 40px -28px #0007; }
+.screen.dragover { border-color: var(--red); border-style: solid; background: #fff; }
+.screen h2 { margin: 0; font: 600 20px/1.25 var(--f-display); letter-spacing: -.02em; }
+.screen p { margin: 0; color: var(--muted); max-width: 380px; }
+.screen .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
+
+/* ---------- Toast ---------- */
+.toast {
+  position: fixed; left: 50%; bottom: 24px; z-index: 10; max-width: calc(100% - 32px);
+  transform: translateX(-50%) translateY(120%); opacity: 0; pointer-events: none;
+  background: var(--mount); color: var(--ink); padding: 10px 16px; border-radius: 6px; box-shadow: 0 8px 24px #0006;
+  font-size: 14px; transition: transform .25s, opacity .25s;
+}
+.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
+}