diff --git a/frontend/package.json b/frontend/package.json
index 00255f3..795b088 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -33,6 +33,7 @@
     "jsdom": "^29.1.1",
     "prettier": "^3.8.3",
     "vite": "^5.4.10",
+    "vite-plugin-mkcert": "^2.0.0",
     "vitest": "^4.1.7"
   }
 }
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 563609b..af76593 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -14,12 +14,15 @@ import RelatedSubsRow from './components/RelatedSubsRow';
 import SourceToggle from './components/SourceToggle';
 import AdvancedSearch, { DEFAULT_ADVANCED, QUALITY_THRESHOLDS, countActiveFilters } from './components/AdvancedSearch';
 import ActiveFiltersStrip from './components/ActiveFiltersStrip';
+import FeedMode from './components/FeedMode';
+import FeedExitGesture from './components/FeedExitGesture';
 import { ToastProvider, useToast } from './components/Toast';
 import { useFavorites } from './hooks/useFavorites';
 import { useSavedSubreddits } from './hooks/useSavedSubreddits';
 import { useHiddenAuthors } from './hooks/useBlockList';
 import { usePreferences } from './hooks/usePreferences';
 import { getInitialUrlState, useSyncUrlState } from './hooks/useUrlState';
+import { useMode } from './hooks/useMode';
 import {
   fetchRedditUserMedia,
   fetchSubredditMedia,
@@ -275,6 +278,8 @@ function AppShell() {
 
   useSyncUrlState(urlState);
 
+  const { mode, setMode } = useMode();
+
   const currentSnapshot = useMemo(
     () => createFeedSnapshot({ subreddit, authorView, sort, includeNsfw, mediaFilter, order, redditFilters }),
     [subreddit, authorView, sort, includeNsfw, mediaFilter, order, redditFilters]
@@ -786,6 +791,14 @@ function AppShell() {
     return { videos, images, audio, all: items.length };
   }, [items]);
 
+  if (mode === 'feed') {
+    return (
+      <FeedExitGesture onExit={() => setMode('grid')}>
+        <FeedMode items={displayItems} />
+      </FeedExitGesture>
+    );
+  }
+
   return (
     <div className="app-shell-beeg">
       <TopBar
@@ -826,6 +839,7 @@ function AppShell() {
         onBlueskySortChange={setBlueskySort}
         onOpenAdvanced={() => setAdvancedOpen(true)}
         advancedFilterCount={countActiveFilters(advanced)}
+        onEnterFeed={() => setMode('feed')}
       />
 
       {source === 'reddit' && (
diff --git a/frontend/src/components/FeedExitGesture.jsx b/frontend/src/components/FeedExitGesture.jsx
new file mode 100644
index 0000000..466dd07
--- /dev/null
+++ b/frontend/src/components/FeedExitGesture.jsx
@@ -0,0 +1,71 @@
+import { useEffect } from 'react';
+
+const EDGE_SWIPE_START_THRESHOLD_PX = 25;
+const EDGE_SWIPE_DISTANCE_THRESHOLD_PX = 60;
+const EDGE_SWIPE_VERTICAL_TOLERANCE_PX = 40;
+
+function FeedExitGesture({ onExit, children }) {
+  useEffect(() => {
+    let touchStart = null;
+
+    function handleKeyDown(e) {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        window.history.back();
+      }
+    }
+
+    function handlePopState() {
+      const urlMode = new URLSearchParams(window.location.search).get('mode');
+      if (urlMode !== 'feed') {
+        onExit();
+      }
+    }
+
+    function handleTouchStart(e) {
+      const t = e.touches[0];
+      if (!t) return;
+      if (t.clientX <= EDGE_SWIPE_START_THRESHOLD_PX) {
+        touchStart = { x: t.clientX, y: t.clientY };
+      } else {
+        touchStart = null;
+      }
+    }
+
+    function handleTouchMove(e) {
+      if (!touchStart) return;
+      const t = e.touches[0];
+      if (!t) return;
+      const dx = t.clientX - touchStart.x;
+      const dy = Math.abs(t.clientY - touchStart.y);
+      if (
+        dx > EDGE_SWIPE_DISTANCE_THRESHOLD_PX &&
+        dy < EDGE_SWIPE_VERTICAL_TOLERANCE_PX
+      ) {
+        touchStart = null;
+        window.history.back();
+      }
+    }
+
+    function handleTouchEnd() {
+      touchStart = null;
+    }
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('popstate', handlePopState);
+    window.addEventListener('touchstart', handleTouchStart, { passive: true });
+    window.addEventListener('touchmove', handleTouchMove, { passive: true });
+    window.addEventListener('touchend', handleTouchEnd, { passive: true });
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('popstate', handlePopState);
+      window.removeEventListener('touchstart', handleTouchStart);
+      window.removeEventListener('touchmove', handleTouchMove);
+      window.removeEventListener('touchend', handleTouchEnd);
+    };
+  }, [onExit]);
+
+  return <>{children}</>;
+}
+
+export default FeedExitGesture;
diff --git a/frontend/src/components/FeedItem.jsx b/frontend/src/components/FeedItem.jsx
new file mode 100644
index 0000000..dbb8461
--- /dev/null
+++ b/frontend/src/components/FeedItem.jsx
@@ -0,0 +1,49 @@
+import VideoPlayer from './VideoPlayer';
+import { getModalItems } from '../utils/media';
+
+function FeedItem({ item }) {
+  const modalItems = getModalItems(item);
+  const first = modalItems[0];
+  if (!first) return null;
+
+  if (first.kind === 'video') {
+    return (
+      <div className="feed-item">
+        <VideoPlayer
+          mp4Url={first.url}
+          hlsUrl={first.hlsUrl}
+          dashUrl={first.dashUrl}
+          hasAudio={first.hasAudio}
+          sourceKind={first.sourceKind}
+          posterUrl={item?.thumbnail || ''}
+          className="feed-item__video"
+          controls={false}
+        />
+      </div>
+    );
+  }
+
+  if (first.kind === 'image') {
+    return (
+      <div className="feed-item">
+        <img src={first.url} alt="" className="feed-item__media" />
+      </div>
+    );
+  }
+
+  if (first.kind === 'audio' || first.kind === 'embed') {
+    return null;
+  }
+
+  if (first.url) {
+    return (
+      <div className="feed-item">
+        <img src={first.url} alt="" className="feed-item__media" />
+      </div>
+    );
+  }
+
+  return null;
+}
+
+export default FeedItem;
diff --git a/frontend/src/components/FeedMode.jsx b/frontend/src/components/FeedMode.jsx
new file mode 100644
index 0000000..3197202
--- /dev/null
+++ b/frontend/src/components/FeedMode.jsx
@@ -0,0 +1,14 @@
+import FeedItem from './FeedItem';
+import '../styles/feed.css';
+
+function FeedMode({ items }) {
+  return (
+    <div className="feed-mode" role="region" aria-label="Feed mode">
+      {items.map((item) => (
+        <FeedItem key={item.id} item={item} />
+      ))}
+    </div>
+  );
+}
+
+export default FeedMode;
diff --git a/frontend/src/components/TopBar.jsx b/frontend/src/components/TopBar.jsx
index 32ff88b..8ca27b2 100644
--- a/frontend/src/components/TopBar.jsx
+++ b/frontend/src/components/TopBar.jsx
@@ -93,7 +93,8 @@ function TopBar({
   blueskySort,
   onBlueskySortChange,
   onOpenAdvanced,
-  advancedFilterCount = 0
+  advancedFilterCount = 0,
+  onEnterFeed
 }) {
   const isEporner = source === 'eporner';
   const isBooru = source === 'booru';
@@ -189,6 +190,14 @@ function TopBar({
             <ThemeIcon theme={theme} />
           </button>
         )}
+        {onEnterFeed && (
+          <button type="button" className="topbar-icon-btn" onClick={onEnterFeed} aria-label="Enter feed mode" title="Enter feed">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <rect x="6" y="3" width="12" height="7" rx="1.5" />
+              <rect x="6" y="14" width="12" height="7" rx="1.5" />
+            </svg>
+          </button>
+        )}
       </div>
     </header>
   );
diff --git a/frontend/src/components/VideoPlayer.jsx b/frontend/src/components/VideoPlayer.jsx
index d708921..1c31dbb 100644
--- a/frontend/src/components/VideoPlayer.jsx
+++ b/frontend/src/components/VideoPlayer.jsx
@@ -33,6 +33,7 @@ const VideoPlayer = forwardRef(function VideoPlayer(
     className,
     autoPlay = true,
     loop = true,
+    controls = true,
     prebufferOnly = false,
     allowUnmutedAutoplay = false,
     preferredMuted = null,
@@ -565,7 +566,7 @@ const VideoPlayer = forwardRef(function VideoPlayer(
     <div ref={wrapperRef} className="video-player-shell" style={wrapperStyle}>
       <video
         ref={videoRef}
-        controls
+        controls={controls}
         playsInline
         preload="metadata"
         className={className}
diff --git a/frontend/src/hooks/useMode.js b/frontend/src/hooks/useMode.js
new file mode 100644
index 0000000..bacff1b
--- /dev/null
+++ b/frontend/src/hooks/useMode.js
@@ -0,0 +1,99 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const MODE_KEY = 'nightfeed:mode';
+const VALID_MODES = new Set(['grid', 'feed']);
+
+function readInitialMode() {
+  if (typeof window === 'undefined') return 'grid';
+  const url = new URLSearchParams(window.location.search).get('mode');
+  if (VALID_MODES.has(url)) return url;
+  try {
+    const stored = localStorage.getItem(MODE_KEY);
+    if (VALID_MODES.has(stored)) return stored;
+  } catch {
+    // localStorage may be unavailable; fall through to default.
+  }
+  return 'grid';
+}
+
+function buildUrl(params) {
+  const search = params.toString();
+  return `${window.location.pathname}${search ? '?' + search : ''}${window.location.hash}`;
+}
+
+export function useMode() {
+  const [mode, setModeState] = useState(readInitialMode);
+  const modeRef = useRef(mode);
+  const gridScrollYRef = useRef(0);
+
+  // Defensive: keep the ref aligned with state in case state ever changes
+  // through a path other than setMode (it shouldn't, but the ref is the
+  // synchronous source of truth and we don't want it to drift).
+  useEffect(() => {
+    modeRef.current = mode;
+  }, [mode]);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(MODE_KEY, mode);
+    } catch {
+      // ignore
+    }
+  }, [mode]);
+
+  // Cold-load history bootstrap: if we landed in feed mode directly (URL or
+  // localStorage) and the current history entry was not pushed by us, insert
+  // a grid entry below the current one so browser-back exits feed instead of
+  // leaving the app.
+  useEffect(() => {
+    if (mode !== 'feed') return;
+    if (window.history.state?.nightfeedMode === 'feed') return;
+    const params = new URLSearchParams(window.location.search);
+    params.delete('mode');
+    const gridUrl = buildUrl(params);
+    params.set('mode', 'feed');
+    const feedUrl = buildUrl(params);
+    window.history.replaceState(
+      { ...window.history.state, nightfeedMode: 'grid' },
+      '',
+      gridUrl
+    );
+    window.history.pushState({ nightfeedMode: 'feed' }, '', feedUrl);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Restore scroll when returning to grid from feed.
+  useEffect(() => {
+    if (mode !== 'grid') return;
+    const y = gridScrollYRef.current;
+    if (y <= 0) return;
+    requestAnimationFrame(() => window.scrollTo(0, y));
+  }, [mode]);
+
+  const setMode = useCallback((next) => {
+    if (!VALID_MODES.has(next)) return;
+    if (modeRef.current === next) return;
+
+    const params = new URLSearchParams(window.location.search);
+    if (next === 'feed') {
+      gridScrollYRef.current = window.scrollY;
+      params.set('mode', 'feed');
+      window.history.pushState(
+        { nightfeedMode: 'feed' },
+        '',
+        buildUrl(params)
+      );
+    } else {
+      params.delete('mode');
+      window.history.replaceState(
+        { ...window.history.state, nightfeedMode: 'grid' },
+        '',
+        buildUrl(params)
+      );
+    }
+    modeRef.current = next;
+    setModeState(next);
+  }, []);
+
+  return { mode, setMode };
+}
diff --git a/frontend/src/hooks/useMode.test.js b/frontend/src/hooks/useMode.test.js
new file mode 100644
index 0000000..b41364d
--- /dev/null
+++ b/frontend/src/hooks/useMode.test.js
@@ -0,0 +1,71 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { act, renderHook } from '@testing-library/react';
+import { useMode } from '@/hooks/useMode';
+
+const MODE_KEY = 'nightfeed:mode';
+
+function reset() {
+  localStorage.clear();
+  window.history.replaceState(null, '', '/');
+}
+
+describe('useMode', () => {
+  beforeEach(reset);
+
+  it('initial state from URL: ?mode=feed lands in feed mode', () => {
+    window.history.replaceState(null, '', '/?mode=feed');
+    const { result } = renderHook(() => useMode());
+    expect(result.current.mode).toBe('feed');
+  });
+
+  it('initial state from localStorage when URL is silent', () => {
+    localStorage.setItem(MODE_KEY, 'feed');
+    const { result } = renderHook(() => useMode());
+    expect(result.current.mode).toBe('feed');
+  });
+
+  it('defaults to grid when neither URL nor localStorage is set', () => {
+    const { result } = renderHook(() => useMode());
+    expect(result.current.mode).toBe('grid');
+  });
+
+  it('URL takes precedence over localStorage on init', () => {
+    localStorage.setItem(MODE_KEY, 'feed');
+    window.history.replaceState(null, '', '/?mode=grid');
+    const { result } = renderHook(() => useMode());
+    expect(result.current.mode).toBe('grid');
+  });
+
+  it('setMode persists to both URL and localStorage', () => {
+    const { result } = renderHook(() => useMode());
+
+    act(() => result.current.setMode('feed'));
+    expect(result.current.mode).toBe('feed');
+    expect(new URLSearchParams(window.location.search).get('mode')).toBe(
+      'feed'
+    );
+    expect(localStorage.getItem(MODE_KEY)).toBe('feed');
+
+    act(() => result.current.setMode('grid'));
+    expect(result.current.mode).toBe('grid');
+    expect(new URLSearchParams(window.location.search).get('mode')).toBeNull();
+    expect(localStorage.getItem(MODE_KEY)).toBe('grid');
+  });
+
+  it('writes URL synchronously inside setMode, not deferred to React commit', () => {
+    // Regression for React 18 Strict Mode bug: when history.pushState lived
+    // inside the setState updater function, it was a side effect that React
+    // would invoke twice and could mistime against the commit. The URL must
+    // change the moment setMode is called, before the React state update
+    // queue flushes.
+    const { result } = renderHook(() => useMode());
+
+    let urlInsideAct;
+    act(() => {
+      result.current.setMode('feed');
+      urlInsideAct = window.location.search;
+    });
+
+    expect(urlInsideAct).toContain('mode=feed');
+  });
+});
diff --git a/frontend/src/hooks/useUrlState.js b/frontend/src/hooks/useUrlState.js
index d38986b..14c30df 100644
--- a/frontend/src/hooks/useUrlState.js
+++ b/frontend/src/hooks/useUrlState.js
@@ -8,6 +8,12 @@ function readParams() {
   return out;
 }
 
+function isSkippedValue(v) {
+  if (v === undefined || v === null || v === '' || v === false) return true;
+  if (typeof v === 'number' && v === 0) return true;
+  return false;
+}
+
 export function getInitialUrlState() {
   return readParams();
 }
@@ -16,11 +22,13 @@ export function useSyncUrlState(state) {
   const lastWritten = useRef('');
 
   useEffect(() => {
-    const params = new URLSearchParams();
+    const params = new URLSearchParams(window.location.search);
     for (const [k, v] of Object.entries(state)) {
-      if (v === undefined || v === null || v === '' || v === false) continue;
-      if (typeof v === 'number' && v === 0) continue;
-      params.set(k, String(v));
+      if (isSkippedValue(v)) {
+        params.delete(k);
+      } else {
+        params.set(k, String(v));
+      }
     }
     const search = params.toString();
     if (search === lastWritten.current) return;
diff --git a/frontend/src/hooks/useUrlState.test.js b/frontend/src/hooks/useUrlState.test.js
new file mode 100644
index 0000000..17ce00e
--- /dev/null
+++ b/frontend/src/hooks/useUrlState.test.js
@@ -0,0 +1,57 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useSyncUrlState } from '@/hooks/useUrlState';
+
+function setUrl(search) {
+  const qs = search ? `?${search}` : '';
+  window.history.replaceState(null, '', `/${qs}`);
+}
+
+describe('useSyncUrlState', () => {
+  beforeEach(() => {
+    setUrl('');
+  });
+
+  it('writes managed state keys to the URL', () => {
+    renderHook(() => useSyncUrlState({ r: 'nsfw', sort: 'hot' }));
+    const params = new URLSearchParams(window.location.search);
+    expect(params.get('r')).toBe('nsfw');
+    expect(params.get('sort')).toBe('hot');
+  });
+
+  it('does not write skipped values (empty string, null, undefined, false, zero)', () => {
+    renderHook(() =>
+      useSyncUrlState({
+        r: 'nsfw',
+        empty: '',
+        nullish: null,
+        undef: undefined,
+        falsy: false,
+        zero: 0
+      })
+    );
+    const params = new URLSearchParams(window.location.search);
+    expect(params.get('r')).toBe('nsfw');
+    expect(params.has('empty')).toBe(false);
+    expect(params.has('nullish')).toBe(false);
+    expect(params.has('undef')).toBe(false);
+    expect(params.has('falsy')).toBe(false);
+    expect(params.has('zero')).toBe(false);
+  });
+
+  it('preserves pre-existing unknown params on write (regression for issue 011)', () => {
+    setUrl('mode=feed');
+    renderHook(() => useSyncUrlState({ r: 'nsfw' }));
+    const params = new URLSearchParams(window.location.search);
+    expect(params.get('mode')).toBe('feed');
+    expect(params.get('r')).toBe('nsfw');
+  });
+
+  it('removes managed keys with skipped values from the URL if previously present', () => {
+    setUrl('r=nsfw&sort=hot');
+    renderHook(() => useSyncUrlState({ r: 'nsfw', sort: '' }));
+    const params = new URLSearchParams(window.location.search);
+    expect(params.get('r')).toBe('nsfw');
+    expect(params.has('sort')).toBe(false);
+  });
+});
diff --git a/frontend/src/styles/feed.css b/frontend/src/styles/feed.css
new file mode 100644
index 0000000..ce21e07
--- /dev/null
+++ b/frontend/src/styles/feed.css
@@ -0,0 +1,40 @@
+.feed-mode {
+  position: fixed;
+  inset: 0;
+  background: #000;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scroll-snap-type: y mandatory;
+  touch-action: pan-y;
+  overscroll-behavior: contain;
+  z-index: 1000;
+  -webkit-overflow-scrolling: touch;
+}
+
+.feed-item {
+  width: 100%;
+  height: 100vh;
+  height: 100dvh;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #000;
+  overflow: hidden;
+  position: relative;
+}
+
+.feed-item__media {
+  max-width: 100%;
+  max-height: 100%;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+}
+
+.feed-item__video {
+  width: 100%;
+  height: 100%;
+}
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 9555ba1..da85a77 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -1,9 +1,13 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import mkcert from 'vite-plugin-mkcert';
 import { fileURLToPath, URL } from 'node:url';
+import process from 'node:process';
+
+const useHttps = process.env.VITE_HTTPS === 'true';
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), useHttps && mkcert()].filter(Boolean),
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
diff --git a/memory.md b/memory.md
index e55908c..6acdf86 100644
--- a/memory.md
+++ b/memory.md
@@ -58,6 +58,24 @@ When a React component destructures a prop with a default value that is a non-pr
 
 **Grep this entry by `destructure-default-non-primitive` when triaging similar loops in the future.**
 
+### 2026-05-26: `VideoPlayer.jsx` off-limits rule suspended narrowly (issue 011)
+- **Suspension is exactly two lines.** A `controls` prop with a `true` default in the destructure, and the literal `controls` attribute on the `<video>` element changed to `controls={controls}`. Nothing else in `VideoPlayer.jsx` was touched.
+- **Why suspend rather than work around.** The alternative was a CSS hack in `feed.css` using `::-webkit-media-controls` (and other vendor pseudos) to hide chrome. That couples feed-mode styling to Chromium's shadow DOM internals and would rot on engine updates. A real prop with a backwards-compatible default is structurally correct and reusable for the eventual feed-mode control row (issue 012) and any future surfaces that want chromeless playback.
+- **Scope of the suspension.** Only for the prop. Pre-existing warnings in `VideoPlayer.jsx` (no-console, set-state-in-effect, exhaustive-deps, no-unused-vars) remain; they belong in that file's planned shrink, not in 011.
+
+### 2026-05-26: Feed-mode shell shipped (issue 011)
+- **Single exit code path.** Esc keydown, leftmost-25px edge-swipe-right (dx > 60px, dy < 40px), and browser back all call `history.back()`. The popstate listener in `FeedExitGesture` detects the URL no longer has `mode=feed` and calls `setMode('grid')`. One convergence point; no double-handling.
+- **Cold-load history bootstrap.** When `useMode` initialises into feed mode directly from URL or localStorage (the current history entry was not pushed by us), the hook synthesises a grid history entry below the current one via `replaceState` + `pushState`. Guarantees browser back exits feed mode unconditionally.
+- **`FeedExitGesture` has no DOM.** Listeners attach to `window` so the edge-swipe registers regardless of which child receives the touch. The component is a behaviour-only Fragment wrapper.
+- **Item-kind discriminator is `getModalItems()` in `utils/media.js`.** Already exists for the lightbox; feed mode reuses it directly. Not duplicated, no new utility introduced.
+- **`VideoPlayer` untouched.** `FeedItem` passes `mp4Url/hlsUrl/dashUrl/hasAudio/sourceKind/posterUrl/className`. The existing `autoPlay=true`, `loop=true` defaults match feed-mode semantics.
+- **`feed.css` imported from `FeedMode.jsx` via Vite**, not from `styles.css`. `styles.css` stays off-limits.
+- **Followup flagged, not addressed:** sound autoplay-after-user-gesture across feed scrolls. The Enter-Feed button click is the unlock gesture per the initial plan; whether `VideoPlayer` needs adjustment to propagate that across siblings is a future investigation, likely under issue 014 or its own slice.
+
+### 2026-05-26: `useUrlState` made composable (issue 011 prep)
+- **`useSyncUrlState` now preserves unknown URL params.** Previously it rebuilt the URL from scratch using only the keys in the state object it was given, silently stripping any param it didn't own. Discovered while planning feed-mode entry: `useMode` writing `?mode=feed` would have been clobbered by the next filter change. Fix is generic, not feed-mode-specific, and lives in its own commit ahead of the rest of issue 011.
+- **Regression test added** (`frontend/src/hooks/useUrlState.test.js`) covering: managed keys written, skipped values not written, pre-existing unknown params preserved, managed keys with skipped values removed if previously present.
+
 ### 2026-05-26: Tooling scaffold (issue 010)
 - **Warn-baseline for ESLint on legacy code.** Rules existing code violates are downgraded to `warn` at the config level rather than refactored. Tightening to `error` belongs in a dedicated cleanup task, not 010. Specific downgrades: `no-empty` (allowEmptyCatch), `react-hooks/set-state-in-effect`, `react-hooks/immutability`, `react/no-unescaped-entities`, `no-constant-binary-expression`.
 - **`no-dupe-keys` stays strict.** The one duplicate `width` key in `VideoPlayer.jsx` was deleted by exception (one line, behavior-neutral, user-approved). Future dupe-key bugs will still be caught.
diff --git a/package-lock.json b/package-lock.json
index 8fa7a01..a4ccf2d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -59,6 +59,7 @@
         "jsdom": "^29.1.1",
         "prettier": "^3.8.3",
         "vite": "^5.4.10",
+        "vite-plugin-mkcert": "^2.0.0",
         "vitest": "^4.1.7"
       }
     },
@@ -7855,6 +7856,47 @@
         }
       }
     },
+    "node_modules/vite-plugin-mkcert": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-mkcert/-/vite-plugin-mkcert-2.0.0.tgz",
+      "integrity": "sha512-+5roXeOT91WRO3NKFRcDZKEHhze/1uahSSKOIq3vz2w19mJojBcyOo0JyLRHbME31Ym5qPRNJ8CwKO0mu4RJ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.3",
+        "supports-color": "^10.2.2",
+        "undici": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=22.19.0"
+      },
+      "peerDependencies": {
+        "vite": ">=3"
+      }
+    },
+    "node_modules/vite-plugin-mkcert/node_modules/supports-color": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-10.2.2.tgz",
+      "integrity": "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/vite-plugin-mkcert/node_modules/undici": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-8.3.0.tgz",
+      "integrity": "sha512-TkUDgb6tl7KOGZ+7e8E3d2FYgUQgF6z5YypqjWmixVQSQERFcVrVg0ySADm2LVLRh5ljAaHTCR5Fmz3Q34rB7Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=22.19.0"
+      }
+    },
     "node_modules/vitest": {
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.7.tgz",