diff --git a/PRODUCT.md b/PRODUCT.md
new file mode 100644
index 0000000..b736b2c
--- /dev/null
+++ b/PRODUCT.md
@@ -0,0 +1,55 @@
+# Product
+
+## Register
+
+product
+
+## Users
+
+Readers, students, researchers, and language-tool builders comparing how a
+Han character is written and catalogued across mainland China, Hong Kong,
+Taiwan, Japan, and Korea. They may scan the full table, filter by meaningful
+differences, or open a single character directly while working across several
+interface languages.
+
+## Product Purpose
+
+Hanji is a fast, transparent reference for the union of five regional common
+character lists. It places regional glyphs, code points, stroke counts,
+frequency, readings, listing status, related forms, and primary dictionaries
+side by side. Success means that a reader can verify a difference without
+mistaking a font-design choice, an unlisted reference glyph, or an uncertain
+relationship for an official regional standard.
+
+## Brand Personality
+
+Precise, neutral, and scholarly. The interface should feel like a carefully
+annotated proof sheet: quiet enough for close reading, but distinctive enough
+that structure and evidence remain legible at a glance.
+
+## Anti-references
+
+Do not present the project as an authoritative dictionary or conceal the
+limits of its public sources. Avoid decorative region-coded color, flag-led
+national branding, generic dashboard card grids, and effects that compete
+with the glyphs. Never let the interface language choose the wrong regional
+font for data.
+
+## Design Principles
+
+- Put glyph comparison first and supporting metadata in its service.
+- Make provenance, uncertainty, and scope explicit rather than smoothing over
+  inconvenient distinctions.
+- Preserve regional typographic fidelity independently of interface language.
+- Keep direct lookup, filtering, and returning to context fast and predictable.
+- Use the visual language of a proof sheet: restrained, dense where useful,
+  and calm during long reading sessions.
+
+## Accessibility & Inclusion
+
+The repository does not declare a formal WCAG conformance level. Existing
+requirements include visible keyboard focus, reduced-motion support, readable
+light and dark themes, and signals that remain understandable without color.
+Grouping uses spacing and structure as its primary cue, with color only as a
+redundant aid. Locale and regional font handling must remain explicit so each
+reader sees the intended character form.
diff --git a/app/app.vue b/app/app.vue
index c8b1c27..b92f826 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { RESTORE_SCRIPT, useStyle } from '~/composables/style.ts'
+import { useStyle } from '~/composables/style.ts'
 
 const { t, meta } = useT()
 const route = useRoute()
@@ -27,7 +27,6 @@ useHead({
     lang: () => meta.value.htmlLang,
     'data-style': () => style.value,
   },
-  script: [{ innerHTML: RESTORE_SCRIPT, tagPosition: 'head' }],
   titleTemplate: (title) =>
     title ? `${title} \u00B7 ${t('meta.title')}` : t('meta.title'),
   link: () =>
diff --git a/app/components/ThemeToggle.vue b/app/components/ThemeToggle.vue
index 4dbd6fc..a2293d3 100644
--- a/app/components/ThemeToggle.vue
+++ b/app/components/ThemeToggle.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { COLOR_KEY } from '~/composables/style.ts'
+import { COLOR_KEY } from '~/utils/theme.ts'
 
 const { t } = useT()
 
diff --git a/app/composables/style.ts b/app/composables/style.ts
index 97fdcb5..a4e34a7 100644
--- a/app/composables/style.ts
+++ b/app/composables/style.ts
@@ -1,14 +1,12 @@
 import { STYLES, type Style } from '~~/shared/types.ts'
-
-export const STYLE_KEY = 'hanji:style'
-export const COLOR_KEY = 'hanji:color'
+import { STYLE_KEY } from '~/utils/theme.ts'
 
 /**
  * Typeface for the whole interface, remembered across visits.
  *
  * This is a reading preference rather than part of a result set, so it lives
- * in localStorage and stays out of the URL. app.vue applies it to the root
- * element before first paint, so the page never flashes the wrong face.
+ * in localStorage and stays out of the URL. The static head script applies it
+ * to the root element before first paint, so no page flashes the wrong face.
  */
 export function useStyle() {
   const stored = useLocalStorage<Style>(STYLE_KEY, 'sans')
@@ -17,18 +15,3 @@ export function useStyle() {
     set: (value) => (stored.value = value),
   })
 }
-
-/**
- * Runs in <head> before anything is painted, so a reader who chose serif or
- * dark never sees a frame of the other.
- *
- * useStorage keeps plain strings unquoted, but a value written by an older
- * build may still carry quotes, hence the strip.
- */
-export const RESTORE_SCRIPT = `
-try{
-var d=document.documentElement,q=function(k){var v=localStorage.getItem(k);return v?v.replace(/^"|"$/g,''):''};
-var s=q(${JSON.stringify(STYLE_KEY)});if(s==='sans'||s==='serif')d.dataset.style=s;
-var c=q(${JSON.stringify(COLOR_KEY)});
-if(c==='dark'||(c!=='light'&&matchMedia('(prefers-color-scheme: dark)').matches))d.classList.add('dark');
-}catch(e){}`
diff --git a/app/utils/theme.ts b/app/utils/theme.ts
new file mode 100644
index 0000000..5a5bd02
--- /dev/null
+++ b/app/utils/theme.ts
@@ -0,0 +1,19 @@
+export const STYLE_KEY = 'hanji:style'
+export const COLOR_KEY = 'hanji:color'
+
+/**
+ * Runs in <head> before anything is painted, so a reader who chose serif or
+ * dark never sees a frame of the other.
+ *
+ * This is installed through nuxt.config rather than app.vue so it is also
+ * present in the client-only 200.html and 404.html fallback shells.
+ * useStorage keeps plain strings unquoted, but a value written by an older
+ * build may still carry quotes, hence the strip.
+ */
+export const RESTORE_SCRIPT = `
+try{
+var d=document.documentElement,q=function(k){var v=localStorage.getItem(k);return v?v.replace(/^"|"$/g,''):''};
+var s=q(${JSON.stringify(STYLE_KEY)});if(s==='sans'||s==='serif')d.dataset.style=s;
+var c=q(${JSON.stringify(COLOR_KEY)});
+if(c==='dark'||(c!=='light'&&matchMedia('(prefers-color-scheme: dark)').matches))d.classList.add('dark');
+}catch(e){}`
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 038da58..489d8c1 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,4 +1,5 @@
 import { readFileSync } from 'node:fs'
+import { RESTORE_SCRIPT } from './app/utils/theme.ts'
 import type { CharsData } from './shared/types.ts'
 import type { NuxtConfig } from 'nuxt/schema'
 
@@ -55,6 +56,10 @@ export default {
     viewTransition: false,
     head: {
       htmlAttrs: { lang: 'zh-CN', 'data-style': 'sans' },
+      // app.vue does not render into Nitro's client-only fallback documents.
+      // Keep preference restoration static so 200.html and 404.html also set
+      // the selected face and color scheme before their first paint.
+      script: [{ innerHTML: RESTORE_SCRIPT, tagPosition: 'head' }],
       // Chunked Han subsets. Keeping the @font-face rules in their own
       // cacheable files keeps them out of the JS/CSS bundle; serif is linked
       // on demand from app.vue.
diff --git a/scripts/tests/theme.test.ts b/scripts/tests/theme.test.ts
new file mode 100644
index 0000000..6f1917c
--- /dev/null
+++ b/scripts/tests/theme.test.ts
@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+import { RESTORE_SCRIPT } from '../../app/utils/theme.ts'
+import config from '../../nuxt.config.ts'
+
+describe('theme restoration', () => {
+  it('runs from the static head used by client-only fallback pages', () => {
+    expect(config.app.head.script).toContainEqual({
+      innerHTML: RESTORE_SCRIPT,
+      tagPosition: 'head',
+    })
+  })
+})