diff --git a/package.json b/package.json
index 0d2efe8..26a87a2 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "animatr",
+  "name": "ruwio",
   "private": true,
-  "version": "0.10.7",
+  "version": "0.11.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/scripts/bump.sh b/scripts/bump.sh
new file mode 100755
index 0000000..16da542
--- /dev/null
+++ b/scripts/bump.sh
@@ -0,0 +1,44 @@
+#!/usr/bin/env bash
+# Bump the version in package.json. Usage:
+#
+#     bash scripts/bump.sh patch   # 0.10.7 -> 0.10.8
+#     bash scripts/bump.sh minor   # 0.10.7 -> 0.11.0
+#     bash scripts/bump.sh major   # 0.10.7 -> 1.0.0
+set -euo pipefail
+
+cd "$(dirname "$0")/.."
+
+KIND="${1:-}"
+case "$KIND" in
+  patch|minor|major) ;;
+  *)
+    echo "Usage: $0 {patch|minor|major}" >&2
+    exit 1
+    ;;
+esac
+
+NEW_VERSION=$(node -e "
+  const fs = require('fs');
+  const pkgPath = './package.json';
+  const verPath = './src/version.ts';
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+  const m = /^(\d+)\.(\d+)\.(\d+)\$/.exec(pkg.version);
+  if (!m) { console.error('unparseable version:', pkg.version); process.exit(1); }
+  let [_, a, b, c] = m.map((x, i) => i === 0 ? x : Number(x));
+  if (process.argv[1] === 'patch') c += 1;
+  else if (process.argv[1] === 'minor') { b += 1; c = 0; }
+  else if (process.argv[1] === 'major') { a += 1; b = 0; c = 0; }
+  const next = a + '.' + b + '.' + c;
+  pkg.version = next;
+  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
+  const ver = fs.readFileSync(verPath, 'utf8');
+  const updated = ver.replace(
+    /(APP_VERSION\s*=\s*)(['\"])[^'\"]*\2/,
+    (_m, lhs, q) => lhs + q + next + q,
+  );
+  if (updated === ver) { console.error('APP_VERSION not found in', verPath); process.exit(1); }
+  fs.writeFileSync(verPath, updated);
+  process.stdout.write(next);
+" "$KIND")
+
+echo "Bumped to $NEW_VERSION"
diff --git a/src/App.vue b/src/App.vue
index c49baf2..bd70262 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,12 +13,14 @@ import {
   PhPause,
   PhPencilSimpleLine,
   PhPlay,
+  PhQuestion,
   PhSkipBack,
   PhSparkle,
   PhStop,
 } from '@phosphor-icons/vue'
 import AboutDialog from './components/AboutDialog.vue'
 import AssetSidebar from './components/AssetSidebar.vue'
+import HelpDialog from './components/HelpDialog.vue'
 import CanvasStage from './components/CanvasStage.vue'
 import ClipartDrawer from './components/ClipartDrawer.vue'
 import SceneDrawer from './components/SceneDrawer.vue'
@@ -59,6 +61,7 @@ const testsOpen = ref(false)
 const welcomeOpen = ref(false)
 const fullscreenOpen = ref(false)
 const aboutOpen = ref(false)
+const helpOpen = ref(false)
 const TIMELINE_HEIGHT_KEY = 'animatr:timelineHeight'
 const DEFAULT_TIMELINE_HEIGHT = 220
 const MIN_TIMELINE_HEIGHT = 120
@@ -501,6 +504,9 @@ onBeforeUnmount(() => {
           <PhFloppyDisk :size="16" />
           <span v-if="isDirty" class="dirty-dot" aria-hidden="true"></span>
         </button>
+        <button class="icon-btn" v-tooltip="t('help.openTooltip')" @click="helpOpen = true">
+          <PhQuestion :size="16" />
+        </button>
         <button class="icon-btn" v-tooltip="t('app.documentSettings')" @click="settingsOpen = true">
           <PhGearSix :size="16" />
         </button>
@@ -556,6 +562,7 @@ onBeforeUnmount(() => {
     <TestOverlay v-model="testsOpen" />
     <FullscreenPreview v-model="fullscreenOpen" />
     <AboutDialog v-model="aboutOpen" />
+    <HelpDialog v-model="helpOpen" />
     <DialogsHost />
     <WelcomeDialog
       v-model="welcomeOpen"
diff --git a/src/components/DocumentSettings.vue b/src/components/DocumentSettings.vue
index 54ffee6..fa629a7 100644
--- a/src/components/DocumentSettings.vue
+++ b/src/components/DocumentSettings.vue
@@ -5,7 +5,6 @@ import {
   PhFolder,
   PhFrameCorners,
   PhMoon,
-  PhPalette,
   PhSlidersHorizontal,
   PhSun,
   PhX,
@@ -18,7 +17,8 @@ import { useTooltipPref } from '@/composables/useTooltipPref'
 import { useAssetThumbsPref } from '@/composables/useAssetThumbsPref'
 import { showLocked } from '@/composables/useShowLocked'
 import { Modal, confirmDialog, promptDialog } from '@/components/ui'
-import { t } from '@/i18n'
+import { setLocale, t, useI18n } from '@/i18n'
+import type { Locale } from '@/i18n'
 
 const props = defineProps<{ modelValue: boolean }>()
 const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
@@ -28,6 +28,7 @@ const clipart = useClipartStore()
 const { theme, setTheme } = useTheme()
 const { enabled: tooltipsEnabled } = useTooltipPref()
 const { enabled: thumbsEnabled } = useAssetThumbsPref()
+const { locale } = useI18n()
 
 // Re-check the stored clipart folder whenever settings opens — covers the
 // case where initial App.vue init raced ahead of IDB or the user opens
@@ -39,13 +40,12 @@ watch(
   },
 )
 
-type TabId = 'document' | 'clipart' | 'interface' | 'theme'
+type TabId = 'document' | 'clipart' | 'interface'
 
-const tabs: { id: TabId; label: string; icon: typeof PhFrameCorners }[] = [
-  { id: 'document', label: t('settings.tab.document'), icon: PhFrameCorners },
-  { id: 'clipart', label: t('settings.tab.clipart'), icon: PhFolder },
-  { id: 'interface', label: t('settings.tab.interface'), icon: PhSlidersHorizontal },
-  { id: 'theme', label: t('settings.tab.theme'), icon: PhPalette },
+const tabs: { id: TabId; labelKey: string; icon: typeof PhFrameCorners }[] = [
+  { id: 'document', labelKey: 'settings.tab.document', icon: PhFrameCorners },
+  { id: 'clipart', labelKey: 'settings.tab.clipart', icon: PhFolder },
+  { id: 'interface', labelKey: 'settings.tab.interface', icon: PhSlidersHorizontal },
 ]
 
 const activeTab = ref<TabId>('document')
@@ -195,6 +195,11 @@ const fps = computed({
   set: (v: number) => store.setFps(v),
 })
 
+const selectedLocale = computed({
+  get: () => locale.value,
+  set: (value: Locale) => setLocale(value),
+})
+
 const presets: { label: string; w: number; h: number }[] = [
   { label: '16:9 · 1280×720', w: 1280, h: 720 },
   { label: '16:9 · 1920×1080', w: 1920, h: 1080 },
@@ -221,6 +226,15 @@ function applyTheme(t: Theme) {
     :model-value="modelValue"
     :title="t('settings.title')"
     size="lg"
+    :dialog-style="{
+      width: 'min(920px, calc(100% - 32px))',
+      height: 'min(620px, calc(100vh - 48px))',
+    }"
+    :body-style="{
+      display: 'flex',
+      overflow: 'hidden',
+      minHeight: 0,
+    }"
     @update:model-value="emit('update:modelValue', $event)"
   >
     <div class="body">
@@ -233,7 +247,7 @@ function applyTheme(t: Theme) {
                 @click="activeTab = tab.id"
               >
                 <component :is="tab.icon" :size="14" />
-                {{ tab.label }}
+                {{ t(tab.labelKey) }}
               </button>
             </nav>
 
@@ -362,6 +376,18 @@ function applyTheme(t: Theme) {
 
               <section v-else-if="activeTab === 'interface'">
                 <h3>{{ t('settings.tab.interface') }}</h3>
+                <div class="setting-block">
+                  <div class="setting-heading">{{ t('settings.languageTitle') }}</div>
+                  <div class="setting-desc">{{ t('settings.languageDesc') }}</div>
+                  <label class="setting-select">
+                    <span class="setting-label">{{ t('settings.languageLabel') }}</span>
+                    <select v-model="selectedLocale">
+                      <option value="en">{{ t('settings.languageEnglish') }}</option>
+                      <option value="de">{{ t('settings.languageGerman') }}</option>
+                    </select>
+                  </label>
+                </div>
+
                 <label class="row-toggle">
                   <span class="switch" :class="{ on: tooltipsEnabled }">
                     <input type="checkbox" v-model="tooltipsEnabled" />
@@ -391,41 +417,41 @@ function applyTheme(t: Theme) {
                     <div class="row-toggle-desc">{{ t('settings.assetThumbsDesc') }}</div>
                   </div>
                 </label>
-              </section>
 
-              <section v-else-if="activeTab === 'theme'">
-                <h3>{{ t('settings.tab.theme') }}</h3>
-                <div class="theme-grid">
-                  <button
-                    class="theme-card"
-                    :class="{ active: theme === 'dark' }"
-                    @click="applyTheme('dark')"
-                  >
-                    <div class="theme-preview theme-preview-dark">
-                      <div class="tp-panel"></div>
-                      <div class="tp-accent"></div>
-                    </div>
-                    <div class="theme-label">
-                      <PhMoon :size="14" />
-                      <span>{{ t('settings.themeDark') }}</span>
-                    </div>
-                  </button>
-                  <button
-                    class="theme-card"
-                    :class="{ active: theme === 'light' }"
-                    @click="applyTheme('light')"
-                  >
-                    <div class="theme-preview theme-preview-light">
-                      <div class="tp-panel"></div>
-                      <div class="tp-accent"></div>
-                    </div>
-                    <div class="theme-label">
-                      <PhSun :size="14" />
-                      <span>{{ t('settings.themeLight') }}</span>
-                    </div>
-                  </button>
+                <div class="setting-block">
+                  <div class="setting-heading">{{ t('settings.appearanceTitle') }}</div>
+                  <div class="setting-desc">{{ t('settings.themeHint') }}</div>
+                  <div class="theme-grid">
+                    <button
+                      class="theme-card"
+                      :class="{ active: theme === 'dark' }"
+                      @click="applyTheme('dark')"
+                    >
+                      <div class="theme-preview theme-preview-dark">
+                        <div class="tp-panel"></div>
+                        <div class="tp-accent"></div>
+                      </div>
+                      <div class="theme-label">
+                        <PhMoon :size="14" />
+                        <span>{{ t('settings.themeDark') }}</span>
+                      </div>
+                    </button>
+                    <button
+                      class="theme-card"
+                      :class="{ active: theme === 'light' }"
+                      @click="applyTheme('light')"
+                    >
+                      <div class="theme-preview theme-preview-light">
+                        <div class="tp-panel"></div>
+                        <div class="tp-accent"></div>
+                      </div>
+                      <div class="theme-label">
+                        <PhSun :size="14" />
+                        <span>{{ t('settings.themeLight') }}</span>
+                      </div>
+                    </button>
+                  </div>
                 </div>
-                <p class="hint">{{ t('settings.themeHint') }}</p>
               </section>
       </div>
     </div>
@@ -438,7 +464,8 @@ function applyTheme(t: Theme) {
 <style scoped>
 .body {
   display: flex;
-  min-height: 340px;
+  flex: 1 1 auto;
+  min-height: 0;
 }
 
 .tabs {
@@ -450,6 +477,7 @@ function applyTheme(t: Theme) {
   flex-direction: column;
   gap: 2px;
   background: var(--panel-alt);
+  min-height: 0;
 }
 
 .tab {
@@ -478,6 +506,7 @@ function applyTheme(t: Theme) {
   padding: 16px 20px;
   overflow: auto;
   min-width: 0;
+  min-height: 0;
 }
 
 section {
@@ -605,6 +634,56 @@ input[type='number'] {
   margin: 0;
 }
 
+.setting-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--panel-alt);
+}
+
+.setting-heading {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.setting-desc {
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--text-dim);
+}
+
+.setting-select {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 0 0 auto;
+  font-size: 11px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.setting-label {
+  color: var(--text-dim);
+}
+
+.setting-select select {
+  width: 100%;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  font: inherit;
+  font-size: 13px;
+  text-transform: none;
+  letter-spacing: normal;
+}
+
 /* Switch + two-line label. Defensive resets defeat the scoped
    blanket `label { flex-direction: column; text-transform: uppercase;
    font-size: 10px; flex: 1 1 0; }` that form-row labels in this file
diff --git a/src/components/HelpDialog.vue b/src/components/HelpDialog.vue
new file mode 100644
index 0000000..204b8cf
--- /dev/null
+++ b/src/components/HelpDialog.vue
@@ -0,0 +1,918 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+import type { Component } from 'vue'
+import {
+  PhCode,
+  PhCursorClick,
+  PhExport,
+  PhFilmStrip,
+  PhFrameCorners,
+  PhImageSquare,
+  PhListBullets,
+  PhMusicNote,
+  PhPencilSimpleLine,
+  PhQuestion,
+  PhSlidersHorizontal,
+  PhSparkle,
+} from '@phosphor-icons/vue'
+import { Modal } from '@/components/ui'
+import { t } from '@/i18n'
+
+const props = defineProps<{ modelValue: boolean }>()
+const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
+
+type ChapterId =
+  | 'getting-started'
+  | 'stage'
+  | 'assets'
+  | 'layers-timeline'
+  | 'clips'
+  | 'buttons'
+  | 'scenes'
+  | 'audio'
+  | 'markers'
+  | 'scripts-actions'
+  | 'script-language'
+  | 'export'
+  | 'shortcuts'
+
+interface HelpListItem {
+  bodyKey: string
+  icon?: Component
+  labelKey?: string
+}
+
+interface HelpTableRow {
+  effectKey: string
+  syntaxKey: string
+}
+
+type HelpBlock =
+  | { kind: 'paragraph'; bodyKey: string; titleKey?: string }
+  | { items: HelpListItem[]; kind: 'list'; titleKey?: string }
+  | { items: string[]; kind: 'steps'; titleKey: string }
+  | { kind: 'table'; rows: HelpTableRow[]; titleKey: string }
+  | { bodyKey: string; kind: 'code'; titleKey: string }
+  | { kind: 'shortcuts' }
+
+interface Chapter {
+  blocks: HelpBlock[]
+  icon: Component
+  id: ChapterId
+  introKey: string
+  titleKey: string
+}
+
+const CHAPTERS: Chapter[] = [
+  {
+    id: 'getting-started',
+    titleKey: 'help.chapters.gettingStarted',
+    icon: PhSparkle,
+    introKey: 'help.content.gettingStarted.intro',
+    blocks: [
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.gettingStarted.modelTitle',
+        bodyKey: 'help.content.gettingStarted.modelBody',
+      },
+      {
+        kind: 'list',
+        titleKey: 'help.content.gettingStarted.whereTitle',
+        items: [
+          {
+            icon: PhQuestion,
+            labelKey: 'help.content.gettingStarted.where.topBar.label',
+            bodyKey: 'help.content.gettingStarted.where.topBar.body',
+          },
+          {
+            icon: PhImageSquare,
+            labelKey: 'help.content.gettingStarted.where.assets.label',
+            bodyKey: 'help.content.gettingStarted.where.assets.body',
+          },
+          {
+            icon: PhFrameCorners,
+            labelKey: 'help.content.gettingStarted.where.stage.label',
+            bodyKey: 'help.content.gettingStarted.where.stage.body',
+          },
+          {
+            icon: PhSlidersHorizontal,
+            labelKey: 'help.content.gettingStarted.where.properties.label',
+            bodyKey: 'help.content.gettingStarted.where.properties.body',
+          },
+          {
+            icon: PhFilmStrip,
+            labelKey: 'help.content.gettingStarted.where.timeline.label',
+            bodyKey: 'help.content.gettingStarted.where.timeline.body',
+          },
+          {
+            icon: PhListBullets,
+            labelKey: 'help.content.gettingStarted.where.scenes.label',
+            bodyKey: 'help.content.gettingStarted.where.scenes.body',
+          },
+        ],
+      },
+      {
+        kind: 'steps',
+        titleKey: 'help.content.gettingStarted.quickStartTitle',
+        items: [
+          'help.content.gettingStarted.quickStart.step1',
+          'help.content.gettingStarted.quickStart.step2',
+          'help.content.gettingStarted.quickStart.step3',
+          'help.content.gettingStarted.quickStart.step4',
+        ],
+      },
+    ],
+  },
+  {
+    id: 'stage',
+    titleKey: 'help.chapters.stage',
+    icon: PhFrameCorners,
+    introKey: 'help.content.stage.intro',
+    blocks: [
+      {
+        kind: 'list',
+        titleKey: 'help.content.stage.viewTitle',
+        items: [
+          { bodyKey: 'help.content.stage.view.zoom' },
+          { bodyKey: 'help.content.stage.view.pan' },
+          { bodyKey: 'help.content.stage.view.fit' },
+        ],
+      },
+      {
+        kind: 'list',
+        titleKey: 'help.content.stage.selectionTitle',
+        items: [
+          { bodyKey: 'help.content.stage.selection.pick' },
+          { bodyKey: 'help.content.stage.selection.clear' },
+          { bodyKey: 'help.content.stage.selection.handles' },
+        ],
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.stage.lockingTitle',
+        bodyKey: 'help.content.stage.lockingBody',
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.stage.drawingTitle',
+        bodyKey: 'help.content.stage.drawingBody',
+      },
+    ],
+  },
+  {
+    id: 'assets',
+    titleKey: 'help.chapters.assets',
+    icon: PhImageSquare,
+    introKey: 'help.content.assets.intro',
+    blocks: [
+      {
+        kind: 'list',
+        titleKey: 'help.content.assets.sectionsTitle',
+        items: [
+          { bodyKey: 'help.content.assets.sections.shapes', icon: PhSparkle },
+          { bodyKey: 'help.content.assets.sections.images', icon: PhImageSquare },
+          { bodyKey: 'help.content.assets.sections.clips', icon: PhFilmStrip },
+          { bodyKey: 'help.content.assets.sections.buttons', icon: PhCursorClick },
+          { bodyKey: 'help.content.assets.sections.audio', icon: PhMusicNote },
+        ],
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.assets.thumbsTitle',
+        bodyKey: 'help.content.assets.thumbsBody',
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.assets.foldTitle',
+        bodyKey: 'help.content.assets.foldBody',
+      },
+    ],
+  },
+  {
+    id: 'layers-timeline',
+    titleKey: 'help.chapters.layersTimeline',
+    icon: PhFilmStrip,
+    introKey: 'help.content.layersTimeline.intro',
+    blocks: [
+      {
+        kind: 'list',
+        titleKey: 'help.content.layersTimeline.keyframesTitle',
+        items: [
+          { bodyKey: 'help.content.layersTimeline.keyframes.add' },
+          { bodyKey: 'help.content.layersTimeline.keyframes.drag' },
+          { bodyKey: 'help.content.layersTimeline.keyframes.jump' },
+          { bodyKey: 'help.content.layersTimeline.keyframes.menu' },
+        ],
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.layersTimeline.holdsTitle',
+        bodyKey: 'help.content.layersTimeline.holdsBody',
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.layersTimeline.separateTitle',
+        bodyKey: 'help.content.layersTimeline.separateBody',
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.layersTimeline.groupsTitle',
+        bodyKey: 'help.content.layersTimeline.groupsBody',
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.layersTimeline.snappingTitle',
+        bodyKey: 'help.content.layersTimeline.snappingBody',
+      },
+    ],
+  },
+  {
+    id: 'clips',
+    titleKey: 'help.chapters.clips',
+    icon: PhFilmStrip,
+    introKey: 'help.content.clips.intro',
+    blocks: [
+      {
+        kind: 'steps',
+        titleKey: 'help.content.clips.createTitle',
+        items: [
+          'help.content.clips.create.step1',
+          'help.content.clips.create.step2',
+          'help.content.clips.create.step3',
+        ],
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.clips.editTitle',
+        bodyKey: 'help.content.clips.editBody',
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.clips.trimTitle',
+        bodyKey: 'help.content.clips.trimBody',
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.clips.transformTitle',
+        bodyKey: 'help.content.clips.transformBody',
+      },
+    ],
+  },
+  {
+    id: 'buttons',
+    titleKey: 'help.chapters.buttons',
+    icon: PhCursorClick,
+    introKey: 'help.content.buttons.intro',
+    blocks: [
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.buttons.editingTitle',
+        bodyKey: 'help.content.buttons.editingBody',
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.buttons.stateKeyframesTitle',
+        bodyKey: 'help.content.buttons.stateKeyframesBody',
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.buttons.stillFramesTitle',
+        bodyKey: 'help.content.buttons.stillFramesBody',
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.buttons.hitShapesTitle',
+        bodyKey: 'help.content.buttons.hitShapesBody',
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.buttons.actionsTitle',
+        bodyKey: 'help.content.buttons.actionsBody',
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.buttons.disabledTitle',
+        bodyKey: 'help.content.buttons.disabledBody',
+      },
+    ],
+  },
+  {
+    id: 'scenes',
+    titleKey: 'help.chapters.scenes',
+    icon: PhListBullets,
+    introKey: 'help.content.scenes.intro',
+    blocks: [
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.scenes.drawerTitle',
+        bodyKey: 'help.content.scenes.drawerBody',
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.scenes.switchingTitle',
+        bodyKey: 'help.content.scenes.switchingBody',
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.scenes.referencesTitle',
+        bodyKey: 'help.content.scenes.referencesBody',
+      },
+    ],
+  },
+  {
+    id: 'audio',
+    titleKey: 'help.chapters.audio',
+    icon: PhMusicNote,
+    introKey: 'help.content.audio.intro',
+    blocks: [
+      {
+        kind: 'steps',
+        titleKey: 'help.content.audio.addTitle',
+        items: [
+          'help.content.audio.add.step1',
+          'help.content.audio.add.step2',
+          'help.content.audio.add.step3',
+        ],
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.audio.tracksTitle',
+        bodyKey: 'help.content.audio.tracksBody',
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.audio.movingTitle',
+        bodyKey: 'help.content.audio.movingBody',
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.audio.waveformsTitle',
+        bodyKey: 'help.content.audio.waveformsBody',
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.audio.urlsTitle',
+        bodyKey: 'help.content.audio.urlsBody',
+      },
+    ],
+  },
+  {
+    id: 'markers',
+    titleKey: 'help.chapters.markers',
+    icon: PhPencilSimpleLine,
+    introKey: 'help.content.markers.intro',
+    blocks: [
+      {
+        kind: 'list',
+        titleKey: 'help.content.markers.editingTitle',
+        items: [
+          { bodyKey: 'help.content.markers.editing.add' },
+          { bodyKey: 'help.content.markers.editing.drag' },
+          { bodyKey: 'help.content.markers.editing.rename' },
+          { bodyKey: 'help.content.markers.editing.delete' },
+          { bodyKey: 'help.content.markers.editing.clear' },
+        ],
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.markers.sceneTitle',
+        bodyKey: 'help.content.markers.sceneBody',
+      },
+    ],
+  },
+  {
+    id: 'scripts-actions',
+    titleKey: 'help.chapters.scriptsActions',
+    icon: PhCode,
+    introKey: 'help.content.scriptsActions.intro',
+    blocks: [
+      {
+        kind: 'steps',
+        titleKey: 'help.content.scriptsActions.addTitle',
+        items: [
+          'help.content.scriptsActions.add.step1',
+          'help.content.scriptsActions.add.step2',
+          'help.content.scriptsActions.add.step3',
+        ],
+      },
+      {
+        kind: 'list',
+        titleKey: 'help.content.scriptsActions.firingTitle',
+        items: [
+          { bodyKey: 'help.content.scriptsActions.firing.forward' },
+          { bodyKey: 'help.content.scriptsActions.firing.exact' },
+          { bodyKey: 'help.content.scriptsActions.firing.order' },
+          { bodyKey: 'help.content.scriptsActions.firing.replay' },
+        ],
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.scriptsActions.menuTitle',
+        bodyKey: 'help.content.scriptsActions.menuBody',
+      },
+      {
+        kind: 'list',
+        titleKey: 'help.content.scriptsActions.typesTitle',
+        items: [
+          { bodyKey: 'help.content.scriptsActions.types.transport' },
+          { bodyKey: 'help.content.scriptsActions.types.jump' },
+          { bodyKey: 'help.content.scriptsActions.types.scene' },
+          { bodyKey: 'help.content.scriptsActions.types.button' },
+          { bodyKey: 'help.content.scriptsActions.types.script' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'script-language',
+    titleKey: 'help.chapters.scriptLanguage',
+    icon: PhCode,
+    introKey: 'help.content.scriptLanguage.intro',
+    blocks: [
+      {
+        kind: 'list',
+        titleKey: 'help.content.scriptLanguage.syntaxTitle',
+        items: [
+          { bodyKey: 'help.content.scriptLanguage.syntax.onePerLine' },
+          { bodyKey: 'help.content.scriptLanguage.syntax.comments' },
+          { bodyKey: 'help.content.scriptLanguage.syntax.tokens' },
+          { bodyKey: 'help.content.scriptLanguage.syntax.case' },
+        ],
+      },
+      {
+        kind: 'table',
+        titleKey: 'help.content.scriptLanguage.commandsTitle',
+        rows: [
+          {
+            syntaxKey: 'help.content.scriptLanguage.commands.play.syntax',
+            effectKey: 'help.content.scriptLanguage.commands.play.effect',
+          },
+          {
+            syntaxKey: 'help.content.scriptLanguage.commands.pause.syntax',
+            effectKey: 'help.content.scriptLanguage.commands.pause.effect',
+          },
+          {
+            syntaxKey: 'help.content.scriptLanguage.commands.rewind.syntax',
+            effectKey: 'help.content.scriptLanguage.commands.rewind.effect',
+          },
+          {
+            syntaxKey: 'help.content.scriptLanguage.commands.jumpSeconds.syntax',
+            effectKey: 'help.content.scriptLanguage.commands.jumpSeconds.effect',
+          },
+          {
+            syntaxKey: 'help.content.scriptLanguage.commands.jumpFrame.syntax',
+            effectKey: 'help.content.scriptLanguage.commands.jumpFrame.effect',
+          },
+          {
+            syntaxKey: 'help.content.scriptLanguage.commands.jumpMarker.syntax',
+            effectKey: 'help.content.scriptLanguage.commands.jumpMarker.effect',
+          },
+        ],
+      },
+      {
+        kind: 'code',
+        titleKey: 'help.content.scriptLanguage.exampleTitle',
+        bodyKey: 'help.content.scriptLanguage.exampleBody',
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.scriptLanguage.errorsTitle',
+        bodyKey: 'help.content.scriptLanguage.errorsBody',
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.scriptLanguage.notInDslTitle',
+        bodyKey: 'help.content.scriptLanguage.notInDslBody',
+      },
+    ],
+  },
+  {
+    id: 'export',
+    titleKey: 'help.chapters.export',
+    icon: PhExport,
+    introKey: 'help.content.export.intro',
+    blocks: [
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.export.editorPreviewTitle',
+        bodyKey: 'help.content.export.editorPreviewBody',
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.export.fullscreenPreviewTitle',
+        bodyKey: 'help.content.export.fullscreenPreviewBody',
+      },
+      {
+        kind: 'list',
+        titleKey: 'help.content.export.formatsTitle',
+        items: [
+          { bodyKey: 'help.content.export.formats.runtime' },
+          { bodyKey: 'help.content.export.formats.scene' },
+          { bodyKey: 'help.content.export.formats.html' },
+          { bodyKey: 'help.content.export.formats.mp4' },
+          { bodyKey: 'help.content.export.formats.webm' },
+        ],
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.export.skipHiddenTitle',
+        bodyKey: 'help.content.export.skipHiddenBody',
+      },
+      {
+        kind: 'paragraph',
+        titleKey: 'help.content.export.assetsTitle',
+        bodyKey: 'help.content.export.assetsBody',
+      },
+    ],
+  },
+  {
+    id: 'shortcuts',
+    titleKey: 'help.chapters.shortcuts',
+    icon: PhQuestion,
+    introKey: 'help.content.shortcuts.intro',
+    blocks: [{ kind: 'shortcuts' }],
+  },
+]
+
+const activeChapter = ref<ChapterId>('getting-started')
+const contentRef = ref<HTMLElement | null>(null)
+
+const activeChapterDef = computed<Chapter>(
+  () => CHAPTERS.find((chapter) => chapter.id === activeChapter.value) ?? CHAPTERS[0],
+)
+
+watch(
+  () => props.modelValue,
+  async (open) => {
+    if (!open) return
+    activeChapter.value = 'getting-started'
+    await nextTick()
+    if (contentRef.value) contentRef.value.scrollTop = 0
+  },
+)
+
+function selectChapter(id: ChapterId) {
+  activeChapter.value = id
+  if (contentRef.value) contentRef.value.scrollTop = 0
+}
+
+const APP_SHORTCUTS = [
+  { labelKey: 'help.shortcut.playPause', keys: 'Space' },
+  { labelKey: 'help.shortcut.fullscreen', keys: 'Shift+Space' },
+  { labelKey: 'help.shortcut.undo', keys: 'Ctrl/Cmd+Z' },
+  { labelKey: 'help.shortcut.redo', keys: 'Ctrl/Cmd+Shift+Z' },
+  { labelKey: 'help.shortcut.save', keys: 'Ctrl/Cmd+S' },
+  { labelKey: 'help.shortcut.inPoint', keys: 'I' },
+  { labelKey: 'help.shortcut.outPoint', keys: 'O' },
+  { labelKey: 'help.shortcut.rewind', keys: 'R' },
+  { labelKey: 'help.shortcut.addMarker', keys: 'M' },
+  { labelKey: 'help.shortcut.deleteSelected', keys: 'Backspace / Delete' },
+  { labelKey: 'help.shortcut.clearSelection', keys: 'Escape' },
+  { labelKey: 'help.shortcut.panCanvas', keys: 'Middle-click / Ctrl+drag' },
+  { labelKey: 'help.shortcut.zoomCanvas', keys: 'Ctrl/Cmd+wheel' },
+  { labelKey: 'help.shortcut.pasteImage', keys: 'Ctrl/Cmd+V' },
+  { labelKey: 'help.shortcut.tests', keys: 'Ctrl+Shift+Alt+T' },
+]
+</script>
+
+<template>
+  <Modal
+    :model-value="modelValue"
+    size="xl"
+    :title="t('help.title')"
+    :dialog-style="{
+      width: 'min(1100px, calc(100% - 32px))',
+      height: 'min(760px, calc(100vh - 48px))',
+    }"
+    :body-style="{
+      display: 'flex',
+      overflow: 'hidden',
+      minHeight: 0,
+    }"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <div class="help">
+      <aside class="toc" :aria-label="t('help.tocLabel')">
+        <button
+          v-for="chapter in CHAPTERS"
+          :key="chapter.id"
+          class="toc-item"
+          :class="{ active: activeChapter === chapter.id }"
+          @click="selectChapter(chapter.id)"
+        >
+          <component :is="chapter.icon" :size="15" class="toc-icon" />
+          <span>{{ t(chapter.titleKey) }}</span>
+        </button>
+      </aside>
+
+      <div ref="contentRef" class="content">
+        <section class="chapter">
+          <h3 class="chapter-title">{{ t(activeChapterDef.titleKey) }}</h3>
+
+          <p class="chapter-intro" v-html="t(activeChapterDef.introKey)" />
+
+          <template v-for="block in activeChapterDef.blocks" :key="JSON.stringify(block)">
+            <div v-if="block.kind === 'paragraph'" class="chapter-block">
+              <h4 v-if="block.titleKey">{{ t(block.titleKey) }}</h4>
+              <p v-html="t(block.bodyKey)" />
+            </div>
+
+            <div v-else-if="block.kind === 'list'" class="chapter-block">
+              <h4 v-if="block.titleKey">{{ t(block.titleKey) }}</h4>
+              <ul
+                class="bullets"
+                :class="block.items.some((i) => i.icon) ? 'bullets-icon' : 'bullets-disc'"
+              >
+                <li v-for="item in block.items" :key="item.bodyKey" class="bullet-item">
+                  <span v-if="item.icon" class="bullet-icon">
+                    <component :is="item.icon" :size="14" />
+                  </span>
+                  <div class="bullet-copy">
+                    <strong v-if="item.labelKey">{{ t(item.labelKey) }}:</strong>
+                    <span v-html="t(item.bodyKey)" />
+                  </div>
+                </li>
+              </ul>
+            </div>
+
+            <div v-else-if="block.kind === 'steps'" class="chapter-block">
+              <h4>{{ t(block.titleKey) }}</h4>
+              <ol class="bullets bullets-steps">
+                <li v-for="item in block.items" :key="item" v-html="t(item)" />
+              </ol>
+            </div>
+
+            <div v-else-if="block.kind === 'table'" class="chapter-block">
+              <h4>{{ t(block.titleKey) }}</h4>
+              <table class="cmd-table">
+                <thead>
+                  <tr>
+                    <th>{{ t('help.table.syntax') }}</th>
+                    <th>{{ t('help.table.effect') }}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="row in block.rows" :key="row.syntaxKey">
+                    <td v-html="t(row.syntaxKey)" />
+                    <td v-html="t(row.effectKey)" />
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <div v-else-if="block.kind === 'code'" class="chapter-block">
+              <h4>{{ t(block.titleKey) }}</h4>
+              <pre class="code">{{ t(block.bodyKey) }}</pre>
+            </div>
+
+            <div v-else-if="block.kind === 'shortcuts'" class="chapter-block">
+              <ul class="shortcuts">
+                <li v-for="shortcut in APP_SHORTCUTS" :key="shortcut.keys + shortcut.labelKey">
+                  <span class="shortcut-label">{{ t(shortcut.labelKey) }}</span>
+                  <kbd>{{ shortcut.keys }}</kbd>
+                </li>
+              </ul>
+            </div>
+          </template>
+        </section>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+.help {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.toc {
+  flex: 0 0 220px;
+  border-right: 1px solid var(--border);
+  padding: 10px 8px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  background: var(--panel-alt);
+  min-height: 0;
+}
+
+.toc-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-align: left;
+  padding: 8px 10px;
+  font-size: 12px;
+  color: var(--text-dim);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.toc-icon {
+  flex-shrink: 0;
+}
+
+.toc-item:hover:not(.active) {
+  background: var(--panel-hover);
+  color: var(--text);
+}
+
+.toc-item.active {
+  background: var(--accent);
+  color: #fff;
+  font-weight: 600;
+}
+
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 18px 22px 22px;
+  min-width: 0;
+  min-height: 0;
+}
+
+.chapter {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.chapter-title {
+  margin: 0;
+  font-size: 16px;
+}
+
+.chapter-intro {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text);
+}
+
+.chapter-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.chapter h4 {
+  margin: 0;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+}
+
+.chapter p {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--text);
+}
+
+.bullets {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.bullets-disc {
+  list-style: disc;
+  padding-left: 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.bullets-disc::marker,
+.bullets-disc li::marker {
+  color: var(--text-dim);
+}
+
+.bullets-icon {
+  list-style: none;
+  padding-left: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.bullets-steps {
+  padding-left: 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.bullets-icon .bullet-item {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+}
+
+.bullet-icon {
+  width: 18px;
+  color: var(--text-dim);
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.bullet-copy {
+  min-width: 0;
+}
+
+.bullet-copy strong {
+  color: var(--text);
+  margin-right: 4px;
+}
+
+.chapter code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  background: var(--panel-alt);
+  padding: 1px 5px;
+  border-radius: 3px;
+  color: var(--text);
+}
+
+.chapter em {
+  font-style: italic;
+  color: var(--text);
+}
+
+.code {
+  margin: 0;
+  padding: 10px 12px;
+  background: var(--panel-alt);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  color: var(--text);
+}
+
+.cmd-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.cmd-table th,
+.cmd-table td {
+  text-align: left;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--border);
+  vertical-align: top;
+}
+
+.cmd-table th {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+}
+
+.shortcuts {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px 12px;
+}
+
+.shortcuts li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 5px 8px;
+  background: var(--panel-alt);
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+}
+
+.shortcut-label {
+  color: var(--text);
+}
+
+kbd {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 10px;
+  color: var(--text-dim-strong);
+}
+</style>
diff --git a/src/components/ui/Modal.vue b/src/components/ui/Modal.vue
index bd42efe..330555f 100644
--- a/src/components/ui/Modal.vue
+++ b/src/components/ui/Modal.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref } from 'vue'
+import type { StyleValue } from 'vue'
 import { PhX } from '@phosphor-icons/vue'
 import { t } from '@/i18n'
 
-type Size = 'sm' | 'md' | 'lg'
+type Size = 'sm' | 'md' | 'lg' | 'xl'
 
 const props = withDefaults(
   defineProps<{
@@ -13,12 +14,16 @@ const props = withDefaults(
     closeOnBackdrop?: boolean
     closeOnEsc?: boolean
     dismissable?: boolean
+    dialogStyle?: StyleValue
+    bodyStyle?: StyleValue
   }>(),
   {
     size: 'md',
     closeOnBackdrop: true,
     closeOnEsc: true,
     dismissable: true,
+    dialogStyle: undefined,
+    bodyStyle: undefined,
   },
 )
 
@@ -99,7 +104,14 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKeyDown))
   <Teleport to="body">
     <Transition name="modal-fade">
       <div v-if="modelValue" class="backdrop" @mousedown="onBackdropMouseDown">
-        <div ref="dialogRef" class="dialog" :class="`size-${size}`" role="dialog" aria-modal="true">
+        <div
+          ref="dialogRef"
+          class="dialog"
+          :class="`size-${size}`"
+          :style="dialogStyle"
+          role="dialog"
+          aria-modal="true"
+        >
           <header v-if="title || $slots.header" class="hdr">
             <slot name="header">
               <h2>{{ title }}</h2>
@@ -114,7 +126,7 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKeyDown))
               <PhX :size="14" weight="bold" />
             </button>
           </header>
-          <div class="body" tabindex="-1">
+          <div class="body" :style="bodyStyle" tabindex="-1">
             <slot />
           </div>
           <footer v-if="$slots.footer" class="ftr">
@@ -161,6 +173,10 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKeyDown))
   width: min(720px, calc(100% - 32px));
 }
 
+.dialog.size-xl {
+  width: min(960px, calc(100% - 32px));
+}
+
 .hdr {
   display: flex;
   align-items: center;
diff --git a/src/devtools/TestOverlay.vue b/src/devtools/TestOverlay.vue
index 32d6884..523f689 100644
--- a/src/devtools/TestOverlay.vue
+++ b/src/devtools/TestOverlay.vue
@@ -2,7 +2,7 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { PhArrowClockwise, PhCheck, PhClipboardText, PhWarning, PhX } from '@phosphor-icons/vue'
 import { useSceneStore } from '@/stores/scene'
-import { t } from '@/i18n'
+import { t, useI18n } from '@/i18n'
 import { runAll, type TestResult } from './testRunner'
 import { registerAllTests } from './tests'
 
@@ -140,6 +140,13 @@ async function run() {
   clipboardStatus.value = 'idle'
   startedAt.value = performance.now()
   const snapshot = JSON.parse(JSON.stringify(store.$state))
+  // The test harness asserts against English UI strings (aria-labels,
+  // section titles, help dialog headings, "yet"/"unsaved" substrings).
+  // Pin the locale to 'en' for the duration of the run so a German
+  // browser default doesn't flip them all red. Restore on finally.
+  const { locale } = useI18n()
+  const prevLocale = locale.value
+  locale.value = 'en'
   try {
     await runAll(registerAllTests, {
       onProgress: (d, t) => {
@@ -160,6 +167,7 @@ async function run() {
     })
   } finally {
     store.$state = snapshot
+    locale.value = prevLocale
     finishedAt.value = performance.now()
     running.value = false
   }
diff --git a/src/devtools/tests.ts b/src/devtools/tests.ts
index 53690b3..4e2a4ac 100644
--- a/src/devtools/tests.ts
+++ b/src/devtools/tests.ts
@@ -1,4 +1,4 @@
-import { createApp, h, nextTick, type Component, type Slot } from 'vue'
+import { createApp, defineComponent, h, nextTick, ref, type Component, type Slot } from 'vue'
 import {
   createBlankProject,
   createBlankScene,
@@ -46,6 +46,7 @@ import ActionEditor from '@/components/ActionEditor.vue'
 import Timeline from '@/components/Timeline.vue'
 import AssetSidebar from '@/components/AssetSidebar.vue'
 import FullscreenPreview from '@/components/FullscreenPreview.vue'
+import HelpDialog from '@/components/HelpDialog.vue'
 import { createAudioRuntime } from '@/composables/useAudioRuntime'
 import {
   clearWaveformCache,
@@ -1813,6 +1814,120 @@ export function registerAllTests(): void {
     })
   })
 
+  suite('ui — HelpDialog', () => {
+    const snapshotDialogs = () =>
+      new Set(Array.from(document.querySelectorAll('[role="dialog"]')))
+    const dialogsAddedSince = (baseline: Set<Element>) =>
+      Array.from(document.querySelectorAll('[role="dialog"]')).filter(
+        (el) => !baseline.has(el),
+      ) as HTMLElement[]
+
+    test('opens on modelValue=true and renders a TOC with all 13 chapters', async () => {
+      const baseline = snapshotDialogs()
+      const handle = mountComponent(HelpDialog, { modelValue: true })
+      await nextTick()
+      const added = dialogsAddedSince(baseline)
+      expect(added.length).toBe(1)
+      const tocItems = added[0].querySelectorAll('.toc-item')
+      expect(tocItems.length).toBe(13)
+      handle.unmount()
+    })
+
+    test('defaults to the Getting started chapter', async () => {
+      const baseline = snapshotDialogs()
+      const handle = mountComponent(HelpDialog, { modelValue: true })
+      await nextTick()
+      const dialog = dialogsAddedSince(baseline)[0]
+      const activeToc = dialog.querySelector('.toc-item.active') as HTMLElement
+      expect(activeToc).toBeTruthy()
+      expect(activeToc.textContent?.trim()).toBe('Getting started')
+      // Content heading matches.
+      const heading = dialog.querySelector('.chapter h3')
+      expect(heading?.textContent?.trim()).toBe('Getting started')
+      handle.unmount()
+    })
+
+    test('clicking a TOC item swaps the right-pane content', async () => {
+      const baseline = snapshotDialogs()
+      const handle = mountComponent(HelpDialog, { modelValue: true })
+      await nextTick()
+      const dialog = dialogsAddedSince(baseline)[0]
+      const items = Array.from(dialog.querySelectorAll('.toc-item')) as HTMLButtonElement[]
+      const scripting = items.find((el) => el.textContent?.includes('Script language'))
+      expect(scripting).toBeTruthy()
+      scripting!.click()
+      await nextTick()
+      const heading = dialog.querySelector('.chapter h3')
+      expect(heading?.textContent?.trim()).toBe('Script language')
+      // Active highlight moved.
+      const active = dialog.querySelector('.toc-item.active')
+      expect(active?.textContent?.trim()).toBe('Script language')
+      handle.unmount()
+    })
+
+    test('Script language chapter documents every DSL command', async () => {
+      // Pin the parser/help alignment — if a new command ships in
+      // scriptDsl.ts, this test reminds us to document it here too.
+      const baseline = snapshotDialogs()
+      const handle = mountComponent(HelpDialog, { modelValue: true })
+      await nextTick()
+      const dialog = dialogsAddedSince(baseline)[0]
+      const items = Array.from(dialog.querySelectorAll('.toc-item')) as HTMLButtonElement[]
+      items.find((el) => el.textContent?.includes('Script language'))!.click()
+      await nextTick()
+      const body = dialog.querySelector('.chapter')!.textContent ?? ''
+      expect(body).toContain('play')
+      expect(body).toContain('pause')
+      expect(body).toContain('rewind')
+      expect(body).toContain('jump')
+      expect(body).toContain('#')
+      expect(body).toContain('@')
+      expect(body).toContain('//')
+      handle.unmount()
+    })
+
+    test('Shortcuts chapter renders one row per shortcut with a kbd key', async () => {
+      const baseline = snapshotDialogs()
+      const handle = mountComponent(HelpDialog, { modelValue: true })
+      await nextTick()
+      const dialog = dialogsAddedSince(baseline)[0]
+      const items = Array.from(dialog.querySelectorAll('.toc-item')) as HTMLButtonElement[]
+      items.find((el) => el.textContent?.includes('Keyboard shortcuts'))!.click()
+      await nextTick()
+      const rows = dialog.querySelectorAll('.shortcuts li')
+      expect(rows.length).toBeGreaterThan(9)
+      // Every row ends with a kbd element.
+      for (const li of Array.from(rows)) {
+        expect(li.querySelector('kbd')).toBeTruthy()
+      }
+      handle.unmount()
+    })
+
+    test('reopening resets to the first chapter (no stale selection)', async () => {
+      // Regression: a user who leaves the dialog on "Script language"
+      // and reopens it expects to land on the intro, not mid-content.
+      const open = ref(true)
+      const Wrapper = defineComponent({
+        render: () => h(HelpDialog, { modelValue: open.value }),
+      })
+      const handle = mountComponent(Wrapper, {})
+      await nextTick()
+      const items = Array.from(
+        document.querySelectorAll('.toc-item'),
+      ) as HTMLButtonElement[]
+      items.find((el) => el.textContent?.includes('Script language'))!.click()
+      await nextTick()
+      open.value = false
+      await nextTick()
+      open.value = true
+      await nextTick()
+      await nextTick()
+      const heading = document.querySelector('.chapter h3')
+      expect(heading?.textContent?.trim()).toBe('Getting started')
+      handle.unmount()
+    })
+  })
+
   suite('ui — IconButton', () => {
     test('renders a button element', async () => {
       // IconButton now uses the custom v-tooltip directive instead of
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index 61baebf..ffdc86c 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -1,10 +1,25 @@
 import { ref } from 'vue'
-import { en, type Messages } from './messages'
+import { de, en } from './messages'
 
-export type Locale = 'en'
+export type Locale = 'en' | 'de'
 
-const activeLocale = ref<Locale>('en')
-const messagesByLocale: Record<Locale, Messages> = { en }
+const LOCALE_KEY = 'animatr:locale'
+const messagesByLocale: Record<Locale, unknown> = { en, de }
+
+function readInitialLocale(): Locale {
+  try {
+    const stored = localStorage.getItem(LOCALE_KEY)
+    if (stored === 'en' || stored === 'de') return stored
+  } catch {
+    /* noop */
+  }
+  if (typeof navigator !== 'undefined' && navigator.language.toLowerCase().startsWith('de')) {
+    return 'de'
+  }
+  return 'en'
+}
+
+const activeLocale = ref<Locale>(readInitialLocale())
 
 function resolveAt(obj: unknown, path: string): unknown {
   let cur = obj
@@ -28,11 +43,13 @@ function interpolate(template: string, params?: Record<string, string | number>)
 
 export function t(key: string, params?: Record<string, string | number>): string {
   const raw = resolveAt(messagesByLocale[activeLocale.value], key)
-  if (typeof raw !== 'string') {
+  if (typeof raw === 'string') return interpolate(raw, params)
+  const fallback = resolveAt(en, key)
+  if (typeof fallback !== 'string') {
     if (import.meta.env.DEV) console.warn(`[i18n] Missing key: ${key}`)
     return key
   }
-  return interpolate(raw, params)
+  return interpolate(fallback, params)
 }
 
 export function useI18n() {
@@ -41,4 +58,9 @@ export function useI18n() {
 
 export function setLocale(l: Locale): void {
   activeLocale.value = l
+  try {
+    localStorage.setItem(LOCALE_KEY, l)
+  } catch {
+    /* noop */
+  }
 }
diff --git a/src/i18n/messages.ts b/src/i18n/messages.ts
index 3461135..4d13a8d 100644
--- a/src/i18n/messages.ts
+++ b/src/i18n/messages.ts
@@ -333,6 +333,13 @@ export const en = {
       theme: 'UI Theme',
     },
     timing: 'Timing',
+    languageTitle: 'Language',
+    languageLabel: 'App language',
+    languageDesc:
+      'Choose the language for the interface and the help screen. The setting is saved in the browser.',
+    languageEnglish: 'English',
+    languageGerman: 'Deutsch',
+    appearanceTitle: 'Appearance',
     tooltipsLabel: 'Show tooltips',
     tooltipsDesc:
       'Floating help text when you hover over a button or control. Turn off if you know the app well and find them distracting — screen readers still get the label.',
@@ -524,6 +531,1137 @@ export const en = {
     remove: 'Delete frame',
     done: 'Done',
   },
+
+  help: {
+    openTooltip: 'Help',
+    title: 'RUWIO: Help',
+    tocLabel: 'Help chapters',
+    chapters: {
+      gettingStarted: 'Getting started',
+      stage: 'Stage',
+      assets: 'Assets library',
+      layersTimeline: 'Layers & timeline',
+      clips: 'Clips',
+      buttons: 'Buttons',
+      scenes: 'Scenes',
+      audio: 'Audio',
+      markers: 'Markers',
+      scriptsActions: 'Script frames & actions',
+      scriptLanguage: 'Script language',
+      export: 'Preview & export',
+      shortcuts: 'Keyboard shortcuts',
+    },
+    shortcut: {
+      playPause: 'Play / Pause',
+      fullscreen: 'Fullscreen preview',
+      undo: 'Undo',
+      redo: 'Redo',
+      save: 'Save project',
+      inPoint: 'Set in-point at playhead',
+      outPoint: 'Set out-point at playhead',
+      rewind: 'Rewind to start',
+      addMarker: 'Add marker at playhead',
+      deleteSelected: 'Delete selected keyframe / marker / layer',
+      clearSelection: 'Clear selection / close menu',
+      panCanvas: 'Pan canvas',
+      zoomCanvas: 'Zoom canvas',
+      pasteImage: 'Paste image from clipboard',
+      tests: 'Open test runner',
+    },
+    table: {
+      syntax: 'Syntax',
+      effect: 'Effect',
+    },
+    content: {
+      gettingStarted: {
+        intro:
+          'RUWIO is a timeline editor that runs in your browser. You add assets, animate them with keyframes, preview everything, and export the result as runtime, HTML, or video.',
+        modelTitle: 'Mental model',
+        modelBody:
+          'A <strong>project</strong> can contain one or more <strong>scenes</strong>. All scenes share the same canvas size, duration, and fps. Inside each scene you place <strong>layers</strong> on the stage. Layers point to reusable <strong>assets</strong> like images, shapes, buttons, clips, or audio.',
+        whereTitle: 'Where things are',
+        where: {
+          topBar: {
+            label: 'Top bar',
+            body:
+              'Transport controls, undo and redo, open and save, settings, and export live here. The logo opens the About dialog. The <strong>?</strong> button opens this help.',
+          },
+          assets: {
+            label: 'Assets sidebar',
+            body:
+              'This is your shared library for images, clips, buttons, and audio. Use the <strong>+</strong> buttons to create things quickly, then drag them onto the active scene.',
+          },
+          stage: {
+            label: 'Stage',
+            body:
+              'This is the live canvas. Click layers to select them, drag them around, and use the handles to transform them. In preview mode, buttons react to hover and click.',
+          },
+          properties: {
+            label: 'Properties panel',
+            body:
+              'This panel shows the settings for the selected layer: position, rotation, opacity, fill, masking, button wiring, clip trims, and more.',
+          },
+          timeline: {
+            label: 'Timeline',
+            body:
+              'This is where keyframes, clip instances, script frames, and audio clips live. You can resize it by dragging the top edge.',
+          },
+          scenes: {
+            label: 'Scenes drawer',
+            body:
+              'Open the drawer on the right to switch scenes, create new ones, duplicate them, or clean them up.',
+          },
+        },
+        quickStartTitle: 'First animation: quick start',
+        quickStart: {
+          step1: 'Click <strong>+</strong> next to a shape in the Assets sidebar, for example rect, circle, text, or polygon.',
+          step2: 'Drag the new shape on the stage to place it.',
+          step3: 'Move the playhead, drag the shape again, and RUWIO creates a new keyframe for you.',
+          step4: 'Press <kbd>Space</kbd> to play it back.',
+        },
+      },
+      stage: {
+        intro:
+          'The stage shows the active scene at the current playhead position. In edit mode it behaves like a canvas with handles and selection. In fullscreen preview it behaves like the exported runtime: buttons can hover, press, and fire actions.',
+        viewTitle: 'View controls',
+        view: {
+          zoom:
+            '<strong>Zoom:</strong> Use <kbd>Ctrl/Cmd</kbd> plus mouse wheel, or the zoom controls at the bottom-right corner of the stage.',
+          pan:
+            '<strong>Pan:</strong> Middle-drag, or hold <kbd>Ctrl</kbd> while dragging.',
+          fit:
+            '<strong>Fit:</strong> Use the Fit button to bring the whole canvas back into view.',
+        },
+        selectionTitle: 'Selection',
+        selection: {
+          pick:
+            'Click a layer to select it. Use <kbd>Shift</kbd> plus click to add or remove layers from the selection.',
+          clear: 'Click empty canvas space to clear the selection.',
+          handles:
+            'With one layer selected, the transformer handles appear. Drag them to scale or rotate.',
+        },
+        lockingTitle: 'Locking and editor-hide',
+        lockingBody:
+          'Right-click a track in the timeline to lock it or hide it in the editor. <strong>Locked</strong> layers stay visible but cannot be edited on the stage. <strong>Editor-hidden</strong> layers disappear from the editor, but they still render in preview and export unless you explicitly skip them.',
+        drawingTitle: 'Drawing polygons',
+        drawingBody:
+          'Start a polygon from the Assets sidebar and the stage switches into drawing mode. Click to place points, press <kbd>Enter</kbd> to finish, or <kbd>Escape</kbd> to cancel.',
+      },
+      assets: {
+        intro:
+          'Assets are templates. Layers are placements. If you delete a layer, the asset stays in the library so you can use it again later. If you delete an asset, all layers that reference it go away too.',
+        sectionsTitle: 'What you can keep there',
+        sections: {
+          shapes:
+            '<strong>Shapes:</strong> Quick buttons for rect, circle, text, and polygon. One click creates the asset and places a layer on the active scene.',
+          images:
+            '<strong>Images:</strong> Import them with the upload button or paste them with <kbd>Ctrl/Cmd+V</kbd>. The Media drawer can browse local folders without adding every file to the project right away.',
+          clips:
+            '<strong>Clips:</strong> Reusable mini-timelines you can place again and again.',
+          buttons:
+            '<strong>Buttons:</strong> Interactive assets with states and click actions.',
+          audio:
+            '<strong>Audio:</strong> Shared audio assets that you place on per-scene audio tracks.',
+        },
+        thumbsTitle: 'Thumbs toggle',
+        thumbsBody:
+          'The <em>Thumbs</em> switch shows or hides previews in the asset lists. Turn it off if you want a tighter, faster list. Turn it on if you prefer visual scanning.',
+        foldTitle: 'Folding sections',
+        foldBody:
+          'Each section header can be folded. That makes it easier to focus when the library gets crowded.',
+      },
+      layersTimeline: {
+        intro:
+          'The timeline stacks tracks vertically and arranges time from left to right. That is where you scrub, retime, group things, and wire clips, scripts, and audio together.',
+        keyframesTitle: 'Keyframes',
+        keyframes: {
+          add: 'Click an empty spot on a layer lane to add a keyframe at that time.',
+          drag: 'Drag a keyframe horizontally to retime it.',
+          jump: 'Double-click a keyframe to move the playhead right onto it.',
+          menu:
+            'Right-click a keyframe for options like easing, still-frame, duplicate, and delete.',
+        },
+        holdsTitle: 'Still-frames',
+        holdsBody:
+          'A held keyframe freezes the current value until the next keyframe. That is handy when you want a snap instead of an interpolation.',
+        separateTitle: 'Separate position and rotation',
+        separateBody:
+          'By default, a keyframe stores all animatable values together. Use <em>Separate</em> on a track if you want position and rotation on their own sub-tracks so you can retime them independently.',
+        groupsTitle: 'Groups',
+        groupsBody:
+          'Select several tracks, right-click, and choose <em>Group selected</em>. Groups can be collapsed, coloured, locked, and reordered as one unit.',
+        snappingTitle: 'Snapping',
+        snappingBody:
+          'While you drag keyframes or clips, the timeline can snap to nearby times and markers. Use the magnet toggle when you want free movement instead.',
+      },
+      clips: {
+        intro:
+          'A <strong>clip</strong> is a reusable group of layers with its own local timeline. A placed clip becomes a <strong>clip instance</strong> on the main timeline.',
+        createTitle: 'Create a clip',
+        create: {
+          step1: 'Select one or more layers in the timeline.',
+          step2: 'Right-click and choose <em>Convert to clip</em>.',
+          step3: 'RUWIO creates the clip asset and swaps the original layers for a clip instance on a clip track.',
+        },
+        editTitle: 'Edit clip internals',
+        editBody:
+          'Double-click a clip instance or click the clip in the Assets sidebar. The editor switches into clip scope, so everything you add there belongs to the clip, not the scene.',
+        trimTitle: 'Trim instances',
+        trimBody:
+          'Drag the left or right edge of a clip instance to trim what portion of the internal animation is visible. Other instances of the same clip keep their own trims.',
+        transformTitle: 'Transform on stage',
+        transformBody:
+          'A clip instance can also have its own transform on the stage. That means you can reuse the same clip animation in different positions, scales, or rotations.',
+      },
+      buttons: {
+        intro:
+          'Buttons are interactive assets with four visual states: <code>normal</code>, <code>hover</code>, <code>pressed</code>, and <code>disabled</code>. They can also carry hit shapes and onClick actions.',
+        editingTitle: 'Edit a button',
+        editingBody:
+          'Click a button asset in the sidebar to enter button-edit mode. The stage and timeline now show the button internals. Use the state switcher to jump between <em>normal</em>, <em>hover</em>, <em>pressed</em>, and <em>disabled</em>.',
+        stateKeyframesTitle: 'Per-state keyframes',
+        stateKeyframesBody:
+          'Buttons use four fixed time slots, one per state. Empty slots show a <strong>+</strong> button. Clicking it seeds a keyframe from the nearest existing state so you can keep moving quickly.',
+        stillFramesTitle: 'Still-frames inside buttons',
+        stillFramesBody:
+          'A held keyframe only shows on that button state. A normal keyframe can interpolate across states. Mixing both approaches is great for glows, outlines, or tiny one-state extras.',
+        hitShapesTitle: 'Hit shapes',
+        hitShapesBody:
+          'Switch to <em>Hit</em> mode when you want to draw the clickable area. You can combine rects, circles, and polygons. If you do not define any hit shape, the whole button canvas is clickable.',
+        actionsTitle: 'On click actions',
+        actionsBody:
+          'With a button layer selected, open the <em>On Click</em> section in the Properties panel. Actions run in order when the press starts and ends inside the hit area.',
+        disabledTitle: 'Disabled state',
+        disabledBody:
+          'Buttons can start disabled, and scripts or actions can toggle that later with <code>setButtonEnabled</code>.',
+      },
+      scenes: {
+        intro:
+          'Scenes are like pages or chapters. They all share the project canvas, fps, duration, and asset library, but each scene has its own layers, markers, audio, and scripts.',
+        drawerTitle: 'Scene drawer',
+        drawerBody:
+          'Use the drawer on the right to switch scenes, add a new one, duplicate one, rename one, or delete one.',
+        switchingTitle: 'Switching behaviour',
+        switchingBody:
+          'Switching from the drawer is regular navigation: the playhead stays where it is. Jumping with <code>jumpToScene</code> feels more like a transition: the target scene rewinds to the project in-point and starts playing from there.',
+        referencesTitle: 'Cross-scene references',
+        referencesBody:
+          'Scene actions use stable scene ids. That means renaming a scene does not break existing jumps.',
+      },
+      audio: {
+        intro:
+          'RUWIO separates <strong>audio assets</strong> from <strong>audio clips</strong>. Assets live in the shared library. Clips are placements on scene-specific audio tracks.',
+        addTitle: 'Add audio',
+        add: {
+          step1: 'Open the Audio section in the Assets sidebar and click the upload button.',
+          step2: 'Pick one or more mp3 files. Each file becomes an audio asset.',
+          step3: 'Drag an audio asset onto the timeline, or drop it into empty space to create a track automatically.',
+        },
+        tracksTitle: 'Audio tracks',
+        tracksBody:
+          'Each audio track can hold multiple clips. Right-click a track to rename, mute, colour, lock, or delete it.',
+        movingTitle: 'Move audio clips',
+        movingBody:
+          'Drag a clip left or right to retime it. Drag it to another audio track to move it. If clips would overlap on the same track, RUWIO pushes them forward instead of stacking them.',
+        waveformsTitle: 'Waveforms',
+        waveformsBody:
+          'Waveforms are decoded in the background. Right after import, a clip may look flat for a moment before the waveform appears.',
+        urlsTitle: 'Data URLs and external URLs',
+        urlsBody:
+          'Files picked locally are stored as data URLs so editing works offline. For production exports, it is better to point audio to a normal <code>https://</code> URL.',
+      },
+      markers: {
+        intro:
+          'Markers are named times on the ruler. They are useful for navigation, syncing, and script jumps like <code>jump @intro</code>.',
+        editingTitle: 'Add and edit markers',
+        editing: {
+          add: 'Press <kbd>M</kbd> to drop a marker at the playhead.',
+          drag: 'Drag a marker horizontally to retime it.',
+          rename: 'Click a marker to select it, then double-click to rename it.',
+          delete:
+            'Selected markers turn orange. Press <kbd>Delete</kbd> or <kbd>Backspace</kbd> to remove them.',
+          clear: 'Click outside a selected marker to clear the selection.',
+        },
+        sceneTitle: 'Per scene',
+        sceneBody:
+          'Markers belong to a scene, not the whole project. If a script tries to jump to a missing marker, the runtime logs a warning.',
+      },
+      scriptsActions: {
+        intro:
+          'A <strong>script frame</strong> is a timeline event that fires one or more actions when playback crosses it. Script frames live on dedicated script tracks.',
+        addTitle: 'Add a script frame',
+        add: {
+          step1: 'Click an empty spot on a script track. The script-frame dialog opens right away.',
+          step2: 'Set the time, optionally give it a label, and add the actions you want.',
+          step3: 'Click <em>Done</em>. The frame appears as a dot on the track.',
+        },
+        firingTitle: 'When actions fire',
+        firing: {
+          forward:
+            'Only forward playback crossings fire actions. Scrubbing and direct playhead jumps do not.',
+          exact:
+            'A script exactly at the current playhead still fires on the first tick after you press <em>Play</em>.',
+          order:
+            'If multiple script frames land in the same tick window, they fire in time order.',
+          replay:
+            'If you press play again from the same position, frames at that exact position can fire again.',
+        },
+        menuTitle: 'Right-click menu',
+        menuBody:
+          'Right-click a script frame to duplicate it or delete it. Duplicate copies the label and action list into the next free slot.',
+        typesTitle: 'Available action types',
+        types: {
+          transport:
+            '<code>play</code>, <code>pause</code>, <code>rewindToLoop</code>: transport control.',
+          jump:
+            '<code>jumpTo</code>, <code>jumpToFrame</code>, <code>jumpToMarker</code>: move the playhead without stopping.',
+          scene:
+            '<code>jumpToScene</code>: switch scenes and rewind to the in-point.',
+          button:
+            '<code>setButtonEnabled</code>: enable or disable a specific button layer.',
+          script:
+            '<code>script</code>: run a small line-based DSL. That is explained in the next chapter.',
+        },
+      },
+      scriptLanguage: {
+        intro:
+          'The <code>script</code> action accepts a small line-based DSL. The editor, preview, and exported runtime all use the same parser, so behaviour stays consistent.',
+        syntaxTitle: 'Syntax rules',
+        syntax: {
+          onePerLine: 'Write one command per line. Empty lines are ignored.',
+          comments: 'Everything after <code>//</code> on a line counts as a comment.',
+          tokens:
+            'Tokens are split by whitespace. The first token is the command name.',
+          case: 'Commands are case-insensitive.',
+        },
+        commandsTitle: 'Commands',
+        commands: {
+          play: {
+            syntax: '<code>play</code>',
+            effect: 'Starts or resumes playback.',
+          },
+          pause: {
+            syntax: '<code>pause</code>',
+            effect: 'Stops playback and leaves the playhead where it is.',
+          },
+          rewind: {
+            syntax: '<code>rewind</code>',
+            effect:
+              'Moves the playhead to the playback in-point: project start or the current <em>I</em> marker.',
+          },
+          jumpSeconds: {
+            syntax: '<code>jump &lt;seconds&gt;</code>',
+            effect:
+              'Jumps to a floating-point time value, for example <code>jump 2.5</code>.',
+          },
+          jumpFrame: {
+            syntax: '<code>jump #&lt;frame&gt;</code>',
+            effect:
+              'Jumps to a frame index at the current scene fps, for example <code>jump #60</code>.',
+          },
+          jumpMarker: {
+            syntax: '<code>jump @&lt;marker&gt;</code>',
+            effect:
+              'Jumps to a named marker on the active scene, for example <code>jump @intro</code>.',
+          },
+        },
+        exampleTitle: 'Example',
+        exampleBody: `// Loop the intro, then wait for a click.
+jump @intro-start
+pause // wait for a button or another script frame
+play
+// A later script frame can send playback back:
+// jump @intro-start`,
+        errorsTitle: 'Errors',
+        errorsBody:
+          'Unknown commands, missing arguments, and invalid jump targets show up in the browser console as <code>[ruwio] Script line N: message</code>. One broken line does not cancel the others.',
+        notInDslTitle: 'What the DSL does not cover',
+        notInDslBody:
+          'The DSL is intentionally small. It does not handle <code>jumpToScene</code>, <code>setButtonEnabled</code>, or nested <code>script</code> blocks. Use the structured action editor for those.',
+      },
+      export: {
+        intro:
+          'You can preview inside the editor, test the interactive runtime in fullscreen, or export the project once everything feels right.',
+        editorPreviewTitle: 'In-editor preview',
+        editorPreviewBody:
+          'The regular stage preview plays the active scene without interactive button hover or click behaviour. Press <kbd>Space</kbd> to play or pause.',
+        fullscreenPreviewTitle: 'Fullscreen preview',
+        fullscreenPreviewBody:
+          'Press <kbd>Shift</kbd>+<kbd>Space</kbd> to open the runtime-style fullscreen preview. Buttons work there, audio plays, and scene jumps are live. Press <kbd>Escape</kbd> to close it.',
+        formatsTitle: 'Export formats',
+        formats: {
+          runtime:
+            '<strong>ruwio-runtime.js:</strong> The runtime engine. Load it once on a page and mount projects into it.',
+          scene:
+            '<strong>animation.js:</strong> Project data only. It expects the runtime to already be loaded.',
+          html:
+            '<strong>HTML example:</strong> A quick standalone page with everything wired up.',
+          mp4:
+            '<strong>MP4 video:</strong> Frame-accurate server render. This needs the render server configured in Settings.',
+          webm:
+            '<strong>WebM video:</strong> Browser-side realtime recording. This depends on <code>MediaRecorder</code> support.',
+        },
+        skipHiddenTitle: 'Skip hidden layers',
+        skipHiddenBody:
+          'If you turn on <em>Skip editor-hidden layers</em>, layers hidden in the editor are removed from the export output. That is useful for drafts, guides, or temporary work.',
+        assetsTitle: 'Assets and URLs',
+        assetsBody:
+          'Images and audio stored as data URLs stay embedded in exports. Background videos and external media URLs stay linked, so the exported project still needs those files to be reachable.',
+      },
+      shortcuts: {
+        intro:
+          'Most shortcuts pause automatically while a text input, textarea, or number field has focus, so typing stays safe.',
+      },
+    },
+  },
 } as const
 
-export type Messages = typeof en
+type Widen<T> =
+  T extends string ? string
+  : T extends object ? { [K in keyof T]: Widen<T[K]> }
+  : T
+
+export type Messages = Widen<typeof en>
+
+type DeepPartial<T> = {
+  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K]
+}
+
+export const de: DeepPartial<Messages> = {
+  app: {
+    undo: 'Rückgängig (Ctrl+Z)',
+    redo: 'Wiederholen (Ctrl+Shift+Z)',
+    jumpToStart: 'Zum Anfang springen',
+    pause: 'Pause (Leertaste)',
+    play: 'Abspielen (Leertaste)',
+    stop: 'Stop',
+    recentProjects: 'Letzte Projekte',
+    saveProject: 'Projekt speichern (Ctrl/Cmd+S)',
+    saveProjectDirty: 'Projekt speichern (ungespeicherte Änderungen, Ctrl/Cmd+S)',
+    documentSettings: 'Dokumenteinstellungen',
+    export: 'Export',
+    mainTimeline: 'Haupt-Timeline',
+    dragResize: 'Ziehen, um die Timeline zu vergrößern oder zu verkleinern',
+    loadFailed: 'Projekt konnte nicht geladen werden.',
+    savedToast: '"{name}" gespeichert',
+    saveDialog: {
+      title: 'Projekt speichern',
+      message: 'Wie soll das Projekt heißen?',
+      confirm: 'Speichern',
+      defaultName: 'Projekt {date}',
+    },
+    renameProject: 'Projekt umbenennen',
+    renameProjectHelp:
+      'Klicken, um den Namen zu ändern. Gespeicherte Projekte werden direkt aktualisiert. Neue Namen gelten beim nächsten Speichern.',
+    renameProjectDialog: {
+      title: 'Projekt umbenennen',
+      message: 'Wähle einen neuen Namen für dieses Projekt.',
+      confirm: 'Umbenennen',
+    },
+    untitledProject: 'Unbenanntes Projekt',
+    saveProjectDirtyHelp:
+      'Dein Projekt hat ungespeicherte Änderungen. Mit Ctrl/Cmd+S wird es im Browser gespeichert.',
+    exportHelp:
+      'Als Runtime, HTML oder Video exportieren. MP4 braucht den Render-Server. WebM wird direkt im Browser in Echtzeit aufgenommen.',
+    replaceDialog: {
+      title: 'Projekt ersetzen?',
+      message:
+        'Das aktuelle Projekt wird durch die geladene Datei ersetzt. Ungespeicherte Änderungen gehen verloren.',
+      confirm: 'Weiter',
+    },
+  },
+  welcome: {
+    heading: 'Willkommen bei Animatr',
+    subheading: 'Letzte Projekte',
+    loading: 'Lädt…',
+    empty: 'Noch keine gespeicherten Projekte.',
+    layerCount: '{n} Ebenen',
+    today: 'heute {time}',
+    deleteTooltip: 'Projekt löschen',
+    newProject: 'Neues Projekt',
+    importFile: 'Datei importieren…',
+    exportCurrent: 'Aktuelles exportieren',
+    deleteDialog: {
+      title: 'Projekt löschen?',
+      message: '"{name}" wird dauerhaft aus dem Browser-Speicher entfernt.',
+      confirm: 'Löschen',
+    },
+  },
+  sidebar: {
+    addFile: 'Bild oder Audio hinzufügen',
+    library: 'Bibliothek',
+    images: 'Bilder',
+    thumbnailsHide: 'Vorschaubilder ausblenden',
+    thumbnailsShow: 'Vorschaubilder anzeigen',
+    thumbsToggle: 'Thumbs',
+    imageLabel: 'Bild',
+    addLayerTooltip: 'Als Ebene einfügen oder auf die Bühne ziehen',
+    noImages: 'Keine Bilder importiert',
+    clips: 'Clips',
+    createClipTooltip: 'Neuen Clip anlegen',
+    clipLayerCount: '{n} Ebenen',
+    renameTooltip: 'Umbenennen',
+    deleteTooltip: 'Löschen',
+    noClips: 'Noch keine Clips',
+    shape: {
+      rect: 'Rechteck',
+      circle: 'Kreis',
+      text: 'Text',
+      polygon: 'Polygon',
+      freeform: 'Freiform: Klicken zum Zeichnen, Enter zum Beenden, Esc zum Abbrechen',
+      freeformActive: 'Zeichnen läuft: Enter beendet, Esc bricht ab',
+      button: 'Button (5-Frame-Asset)',
+    },
+    buttons: 'Buttons',
+    noButtons: 'Noch keine Buttons',
+    audio: 'Audio',
+    noAudio: 'Kein Audio importiert',
+    deleteAudioDialog: {
+      title: 'Audio löschen?',
+      message:
+        '„{name}“ aus der Asset-Bibliothek entfernen. Alle Clips auf der Timeline, die darauf verweisen, werden ebenfalls entfernt.',
+      confirm: 'Löschen',
+    },
+    createButtonTooltip: 'Neues Button-Asset anlegen',
+    hitModeDisabled: 'Wechsle zurück zu den Button-States, um Assets hinzuzufügen.',
+    newButtonDialog: {
+      title: 'Neuer Button',
+      nameMessage: 'Button-Name:',
+      defaultName: 'Button',
+      next: 'Weiter',
+      sizeMessage: 'Canvas-Größe (Breite × Höhe):',
+      confirm: 'Erstellen',
+    },
+    renameButtonDialog: {
+      title: 'Button umbenennen',
+      confirm: 'Übernehmen',
+    },
+    deleteButtonDialog: {
+      title: 'Button löschen?',
+      message:
+        'Das Button-Asset wird entfernt. Ebenen, die darauf verweisen, werden danach nicht mehr gerendert.',
+      confirm: 'Löschen',
+    },
+    newTextDialog: {
+      title: 'Neues Textobjekt',
+      message: 'Text:',
+      default: 'Hallo',
+      confirm: 'Einfügen',
+      fallback: 'Text',
+    },
+    newPolygonDialog: {
+      title: 'Neues Polygon',
+      message: 'Anzahl der Punkte (3–24):',
+      confirm: 'Erstellen',
+    },
+    newClipDialog: {
+      title: 'Neuer Clip',
+      message: 'Clip-Name:',
+      default: 'Clip',
+      confirm: 'Erstellen',
+    },
+    renameClipDialog: {
+      title: 'Clip umbenennen',
+      confirm: 'Übernehmen',
+    },
+    deleteClipDialog: {
+      title: 'Clip löschen?',
+      message: 'Der Clip und alle platzierten Instanzen werden entfernt.',
+      confirm: 'Löschen',
+    },
+  },
+  fullscreen: {
+    pause: 'Pause',
+    play: 'Abspielen',
+    jumpToStart: 'Zum Anfang springen',
+    close: 'Schließen (Esc)',
+  },
+  settings: {
+    title: 'Einstellungen',
+    tab: {
+      document: 'Dokument',
+      clipart: 'Medien',
+      interface: 'Oberfläche',
+      theme: 'Theme',
+    },
+    timing: 'Timing',
+    languageTitle: 'Sprache',
+    languageLabel: 'App-Sprache',
+    languageDesc:
+      'Wähle die Sprache für Oberfläche und Hilfe. Die Einstellung wird im Browser gespeichert.',
+    languageEnglish: 'English',
+    languageGerman: 'Deutsch',
+    appearanceTitle: 'Darstellung',
+    tooltipsLabel: 'Tooltips anzeigen',
+    tooltipsDesc:
+      'Kleine Hilfetexte beim Hover über Buttons und Controls. Kannst du abschalten, wenn du die App schon gut kennst.',
+    showLockedLabel: 'Gesperrte Tracks anzeigen',
+    showLockedDesc:
+      'Wenn aus, verschwinden gesperrte Tracks aus Timeline und Bühne. Praktisch, wenn du dich nur auf aktive Ebenen konzentrieren willst.',
+    assetThumbsLabel: 'Asset-Vorschaubilder',
+    assetThumbsDesc:
+      'Zeigt kleine Vorschauen in Assets, Clips und Buttons. Aus ist kompakter, an ist übersichtlicher.',
+    bgVideoLabel: 'Video',
+    bgVideoNone: 'Kein Hintergrundvideo',
+    bgVideoPickFile: 'Videodatei wählen…',
+    bgVideoPickUrl: 'URL setzen…',
+    bgVideoClear: 'Hintergrundvideo entfernen',
+    bgVideoLocalFile: 'Lokale Videodatei',
+    bgVideoHint:
+      'Das Video läuft hinter allen Ebenen und folgt dem Playhead. Am besten funktioniert MP4 (H.264). Lokale Dateien werden mit dem Projekt gespeichert, URLs bleiben verlinkt.',
+    bgVideoStageSizeTitle: 'Videogröße übernehmen?',
+    bgVideoStageSizeMessage:
+      'Das Video ist {w}×{h} groß. Deine Canvas ist aktuell {cw}×{ch}. Soll die Canvas auf die Videogröße angepasst werden?',
+    bgVideoStageSizeConfirm: 'Canvas anpassen',
+    bgVideoStageSizeCancel: 'Aktuelle Größe behalten',
+    bgVideoDurationTitle: 'Szenendauer verlängern?',
+    bgVideoDurationMessage:
+      'Das Video ist {d}s lang. Die Szene ist aktuell {cd}s lang. Soll die Szene auf die Videolänge verlängert werden?',
+    bgVideoDurationConfirm: 'Dauer verlängern',
+    bgVideoDurationCancel: 'Aktuelle Dauer behalten',
+    bgVideoUrlTitle: 'Hintergrundvideo-URL',
+    bgVideoUrlMessage: 'Video-URL einfügen. Sie muss im Browser erreichbar sein:',
+    bgVideoUrlConfirm: 'Laden',
+    canvas: 'Canvas',
+    width: 'Breite',
+    height: 'Höhe',
+    background: 'Hintergrund',
+    duration: 'Dauer (s)',
+    fps: 'FPS',
+    timelineHint: 'Die Timeline-Länge bestimmt die Skala im Lineal. Die Wiedergabe stoppt am Ende.',
+    themeHint: 'Wird im Browser gespeichert und beim nächsten Öffnen wiederverwendet.',
+    themeDark: 'Dunkel',
+    themeLight: 'Hell',
+    done: 'Fertig',
+  },
+  export: {
+    title: 'Export',
+    runtimeBadge: '1× pro Seite',
+    runtimeDesc: 'Engine: Einmal pro Seite laden. Alle Szenen teilen sich dieselbe Runtime.',
+    sceneBadge: 'Szene',
+    sceneDesc: 'Nur Projektdaten: Die Runtime muss schon geladen sein.',
+    exampleTitle: 'HTML-Beispiel',
+    exampleDesc: 'Eigenständige HTML-Datei: Einfach im Browser öffnen.',
+    mp4Badge: 'Server · Frame-genau',
+    mp4Desc: 'H.264 in jeder Auflösung: braucht den Render-Server.',
+    webmBadge: 'Browser · Echtzeit',
+    webmDesc: 'Ohne Server: direkt im Browser aufgenommen.',
+    webmNotSupported: 'Dieser Browser unterstützt MediaRecorder nicht.',
+    cancel: 'Abbrechen',
+    failed: 'Export fehlgeschlagen',
+    back: 'Zurück',
+    labelWebm: 'WebM wird gerendert (Browser, Echtzeit)…',
+    labelMp4: 'MP4 wird gerendert (Server)…',
+    skipHidden: 'Versteckte Tracks überspringen',
+    skipHiddenDesc: 'Lässt editor-versteckte Ebenen in allen Exportformaten weg.',
+    skipHiddenNone: 'In dieser Szene gibt es keine editor-versteckten Tracks.',
+  },
+  tests: {
+    running: 'Tests laufen',
+    title: 'Test Runner',
+    runAgain: 'Neu starten',
+    close: 'Schließen',
+    copyTooltip: 'Bericht in die Zwischenablage kopieren',
+    copiedTooltip: 'Bericht kopiert',
+    copiedBanner: 'Fehlerbericht wurde in die Zwischenablage kopiert.',
+    copyFailedBanner:
+      'Kopieren fehlgeschlagen. Nutze das Zwischenablage-Icon, um es manuell auszulösen.',
+    emptyState: 'Noch keine Ergebnisse. Klicke auf „Neu starten“ oder drücke {shortcut}.',
+    testsCountLabel: '{n} Tests',
+    passedLabel: '{n} bestanden',
+    failedLabel: '{n} fehlgeschlagen',
+  },
+  clipart: {
+    title: 'Medien',
+    open: 'Medien öffnen',
+    close: 'Medien schließen',
+    refresh: 'Ordner neu laden',
+    empty: 'Wähle einen Ordner mit Bildern und Audiodateien, um die Bibliothek zu füllen.',
+    noFiles: 'In diesem Ordner gibt es keine Bilder oder Audiodateien.',
+    loading: 'Lädt…',
+    unsupported:
+      'Dein Browser unterstützt keinen Ordnerzugriff. Probier am besten Chrome oder Edge.',
+    chooseFolder: 'Ordner wählen…',
+    clearFolder: 'Leeren',
+    folderLabel: 'Ordner',
+    noFolder: 'Kein Ordner ausgewählt',
+    settingsHint:
+      'Verweise auf einen lokalen Ordner mit Bildern und Audio. Die App merkt sich den Ordner. Nach einem Browser-Neustart kann die Berechtigung erneut abgefragt werden.',
+  },
+  scenes: {
+    title: 'Szenen',
+    open: 'Szenen öffnen',
+    close: 'Szenen schließen',
+    add: 'Szene hinzufügen',
+    rename: 'Szene umbenennen',
+    renameDialog: {
+      title: 'Szene umbenennen',
+      confirm: 'Umbenennen',
+    },
+    duplicate: 'Duplizieren',
+    delete: 'Löschen',
+    deleteDialog: {
+      title: 'Szene löschen?',
+      message: '„{name}“ aus diesem Projekt entfernen. Das kann nicht rückgängig gemacht werden.',
+      confirm: 'Löschen',
+    },
+    count: '{n} Szenen | {n} Szene | {n} Szenen',
+    locked: 'Ein Projekt muss mindestens eine Szene haben.',
+  },
+  dialog: {
+    confirm: 'Bestätigen',
+    input: 'Eingabe',
+    ok: 'OK',
+    cancel: 'Abbrechen',
+    close: 'Schließen',
+  },
+  about: {
+    openTooltip: 'Über RUWIO',
+    title: 'Über {name}',
+    tagline: 'Ein zeitleistenbasierter Animationseditor, der direkt im Browser läuft.',
+    versionLabel: 'Version',
+    buildLabel: 'Build',
+    close: 'Schließen',
+    credit: 'Mit Liebe gemacht von Torsten Hoeltge',
+    shortcutsHeading: 'Shortcuts',
+    shortcut: {
+      undo: 'Ctrl+Z',
+      redo: 'Ctrl+Shift+Z',
+      playPause: 'Leertaste',
+      fullscreen: 'Shift+Leertaste',
+      tests: 'Ctrl+Shift+Alt+T',
+      panCanvas: 'Mittelklick / Ctrl+Ziehen',
+    },
+    shortcutLabel: {
+      undo: 'Rückgängig',
+      redo: 'Wiederholen',
+      playPause: 'Play / Pause',
+      fullscreen: 'Fullscreen-Vorschau',
+      tests: 'Test Runner öffnen',
+      panCanvas: 'Canvas verschieben',
+    },
+  },
+  actions: {
+    empty: 'Noch keine Aktionen. Füge unten eine hinzu.',
+    add: 'Aktion hinzufügen',
+    remove: 'Entfernen',
+    moveUp: 'Nach oben',
+    moveDown: 'Nach unten',
+    noMarkers: 'Keine Marker vorhanden',
+    noScenes: 'Keine anderen Szenen vorhanden',
+    noButtonLayers: 'Keine Button-Ebenen vorhanden',
+    type: {
+      play: 'Abspielen',
+      pause: 'Pause',
+      rewindToLoop: 'Zum Loop-Start zurück',
+      jumpTo: 'Zu Zeit springen',
+      jumpToFrame: 'Zu Frame springen',
+      jumpToMarker: 'Zu Marker springen',
+      jumpToScene: 'Zu Szene springen',
+      setButtonEnabled: 'Button aktivieren / deaktivieren',
+      script: 'Script ausführen',
+    },
+    param: {
+      time: 'Sekunden',
+      frame: 'Frame',
+      marker: 'Marker',
+      scene: 'Szene',
+      buttonLayer: 'Button',
+      enabled: 'Aktiviert',
+      source: 'Script-Quelle',
+    },
+  },
+  scriptFrameDialog: {
+    title: 'Script-Frame',
+    time: 'Zeit (s)',
+    label: 'Label (optional)',
+    labelPlaceholder: 'z. B. intro-end',
+    remove: 'Frame löschen',
+    done: 'Fertig',
+  },
+  help: {
+    openTooltip: 'Hilfe',
+    title: 'RUWIO: Hilfe',
+    tocLabel: 'Hilfekapitel',
+    chapters: {
+      gettingStarted: 'Erste Schritte',
+      stage: 'Bühne',
+      assets: 'Asset-Bibliothek',
+      layersTimeline: 'Ebenen und Timeline',
+      clips: 'Clips',
+      buttons: 'Buttons',
+      scenes: 'Szenen',
+      audio: 'Audio',
+      markers: 'Marker',
+      scriptsActions: 'Script-Frames und Aktionen',
+      scriptLanguage: 'Scriptsprache',
+      export: 'Vorschau und Export',
+      shortcuts: 'Tastenkürzel',
+    },
+    shortcut: {
+      playPause: 'Play / Pause',
+      fullscreen: 'Fullscreen-Vorschau',
+      undo: 'Rückgängig',
+      redo: 'Wiederholen',
+      save: 'Projekt speichern',
+      inPoint: 'In-Point am Playhead setzen',
+      outPoint: 'Out-Point am Playhead setzen',
+      rewind: 'Zum Start zurück',
+      addMarker: 'Marker am Playhead setzen',
+      deleteSelected: 'Ausgewähltes Keyframe, Marker oder Ebene löschen',
+      clearSelection: 'Auswahl löschen oder Menü schließen',
+      panCanvas: 'Canvas verschieben',
+      zoomCanvas: 'Canvas zoomen',
+      pasteImage: 'Bild aus Zwischenablage einfügen',
+      tests: 'Test Runner öffnen',
+    },
+    table: {
+      syntax: 'Syntax',
+      effect: 'Wirkung',
+    },
+    content: {
+      gettingStarted: {
+        intro:
+          'RUWIO ist ein Timeline-Editor im Browser. Du legst Assets an, animierst sie mit Keyframes, prüfst das Ergebnis in der Vorschau und exportierst es als Runtime, HTML oder Video.',
+        modelTitle: 'So denkt die App',
+        modelBody:
+          'Ein <strong>Projekt</strong> kann aus mehreren <strong>Szenen</strong> bestehen. Alle Szenen teilen sich Canvas-Größe, Dauer und fps. In jeder Szene platzierst du <strong>Ebenen</strong>. Ebenen verweisen auf wiederverwendbare <strong>Assets</strong> wie Bilder, Shapes, Buttons, Clips oder Audio.',
+        whereTitle: 'Wo du was findest',
+        where: {
+          topBar: {
+            label: 'Top-Bar',
+            body:
+              'Hier sitzen Transport, Undo und Redo, Öffnen und Speichern, Einstellungen und Export. Das Logo öffnet den About-Dialog. Der <strong>?</strong>-Button öffnet diese Hilfe.',
+          },
+          assets: {
+            label: 'Assets-Seite',
+            body:
+              'Das ist deine gemeinsame Bibliothek für Bilder, Clips, Buttons und Audio. Mit den <strong>+</strong>-Buttons legst du schnell Dinge an und ziehst sie danach in die aktive Szene.',
+          },
+          stage: {
+            label: 'Bühne',
+            body:
+              'Hier siehst du die Live-Canvas. Du kannst Ebenen auswählen, verschieben und transformieren. In der Vorschau reagieren Buttons auf Hover und Klick.',
+          },
+          properties: {
+            label: 'Properties',
+            body:
+              'Hier bearbeitest du die Einstellungen der ausgewählten Ebene: Position, Rotation, Deckkraft, Fill, Masking, Button-Verknüpfungen, Clip-Trims und mehr.',
+          },
+          timeline: {
+            label: 'Timeline',
+            body:
+              'Hier liegen Keyframes, Clip-Instanzen, Script-Frames und Audio-Clips. Die Höhe kannst du über die obere Kante ändern.',
+          },
+          scenes: {
+            label: 'Szenen-Schublade',
+            body:
+              'Rechts findest du die Szenenliste. Dort kannst du wechseln, neue Szenen anlegen, duplizieren oder aufräumen.',
+          },
+        },
+        quickStartTitle: 'Erste Animation: Schnellstart',
+        quickStart: {
+          step1:
+            'Klicke auf <strong>+</strong> neben einer Form im Assets-Bereich, zum Beispiel Rechteck, Kreis, Text oder Polygon.',
+          step2: 'Ziehe die neue Form auf die Bühne und platziere sie.',
+          step3:
+            'Bewege den Playhead, ziehe die Form noch einmal und RUWIO legt automatisch ein neues Keyframe an.',
+          step4: 'Drücke <kbd>Leertaste</kbd>, um die Animation abzuspielen.',
+        },
+      },
+      stage: {
+        intro:
+          'Die Bühne zeigt die aktive Szene an der aktuellen Playhead-Position. Im Edit-Modus ist sie deine Arbeitsfläche mit Auswahl und Griffen. In der Fullscreen-Vorschau verhält sie sich wie die exportierte Runtime: Buttons können hovern, drücken und Aktionen auslösen.',
+        viewTitle: 'Ansicht steuern',
+        view: {
+          zoom:
+            '<strong>Zoom:</strong> Mit <kbd>Ctrl/Cmd</kbd> plus Mausrad oder über die Zoom-Controls unten rechts auf der Bühne.',
+          pan:
+            '<strong>Verschieben:</strong> Mittelklick ziehen oder beim Ziehen <kbd>Ctrl</kbd> halten.',
+          fit:
+            '<strong>Fit:</strong> Mit dem Fit-Button holst du die ganze Canvas wieder in den sichtbaren Bereich.',
+        },
+        selectionTitle: 'Auswahl',
+        selection: {
+          pick:
+            'Klicke eine Ebene an, um sie auszuwählen. Mit <kbd>Shift</kbd> plus Klick kannst du weitere Ebenen hinzufügen oder entfernen.',
+          clear: 'Klicke in leeren Bühnenbereich, um die Auswahl zu löschen.',
+          handles:
+            'Wenn genau eine Ebene ausgewählt ist, erscheinen die Transform-Griffe. Damit kannst du skalieren oder rotieren.',
+        },
+        lockingTitle: 'Sperren und im Editor verstecken',
+        lockingBody:
+          'Über den Rechtsklick auf einen Track kannst du Ebenen sperren oder im Editor ausblenden. <strong>Gesperrte</strong> Ebenen bleiben sichtbar, lassen sich aber nicht anfassen. <strong>Editor-versteckte</strong> Ebenen verschwinden nur im Editor, nicht automatisch aus Vorschau oder Export.',
+        drawingTitle: 'Polygone zeichnen',
+        drawingBody:
+          'Starte ein Polygon über die Assets-Seite, dann wechselt die Bühne in den Zeichenmodus. Mit Klick setzt du Punkte. <kbd>Enter</kbd> schließt ab. <kbd>Escape</kbd> bricht ab.',
+      },
+      assets: {
+        intro:
+          'Assets sind Vorlagen. Ebenen sind Platzierungen. Wenn du eine Ebene löschst, bleibt das Asset in der Bibliothek. Wenn du ein Asset löschst, verschwinden auch alle Ebenen, die darauf verweisen.',
+        sectionsTitle: 'Was dort liegen kann',
+        sections: {
+          shapes:
+            '<strong>Shapes:</strong> Schnelle Buttons für Rechteck, Kreis, Text und Polygon. Ein Klick legt Asset und Ebene direkt in der aktiven Szene an.',
+          images:
+            '<strong>Bilder:</strong> Über den Upload-Button importieren oder mit <kbd>Ctrl/Cmd+V</kbd> einfügen. Über den Medien-Ordner kannst du Dateien durchsuchen, ohne sie sofort alle ins Projekt zu ziehen.',
+          clips: '<strong>Clips:</strong> Wiederverwendbare Mini-Timelines.',
+          buttons: '<strong>Buttons:</strong> Interaktive Assets mit States und Klick-Aktionen.',
+          audio: '<strong>Audio:</strong> Gemeinsame Audio-Assets, die du auf Szenen-Tracks platzierst.',
+        },
+        thumbsTitle: 'Thumbs-Schalter',
+        thumbsBody:
+          'Mit <em>Thumbs</em> blendest du Vorschaubilder in den Asset-Listen ein oder aus. Aus ist kompakter. An ist oft leichter zu scannen.',
+        foldTitle: 'Bereiche einklappen',
+        foldBody:
+          'Jeder Abschnitt kann eingeklappt werden. Das hilft, wenn die Bibliothek mit der Zeit voller wird.',
+      },
+      layersTimeline: {
+        intro:
+          'Die Timeline stapelt Tracks untereinander und ordnet die Zeit von links nach rechts. Hier scrubbst du, retimest Dinge, gruppierst Tracks und verbindest Clips, Scripts und Audio.',
+        keyframesTitle: 'Keyframes',
+        keyframes: {
+          add: 'Klicke in einen leeren Bereich einer Layer-Spur, um dort ein Keyframe anzulegen.',
+          drag: 'Ziehe ein Keyframe horizontal, um es zeitlich zu verschieben.',
+          jump: 'Doppelklick auf ein Keyframe setzt den Playhead direkt darauf.',
+          menu:
+            'Per Rechtsklick bekommst du Optionen wie Easing, Still-Frame, Duplizieren und Löschen.',
+        },
+        holdsTitle: 'Still-Frames',
+        holdsBody:
+          'Ein gehaltenes Keyframe friert den aktuellen Wert bis zum nächsten Keyframe ein. Das ist praktisch, wenn du einen harten Sprung statt einer weichen Interpolation willst.',
+        separateTitle: 'Position und Rotation trennen',
+        separateBody:
+          'Standardmäßig speichert ein Keyframe alle animierbaren Werte zusammen. Mit <em>Separate</em> kannst du Position und Rotation auf eigene Sub-Tracks legen und getrennt retimen.',
+        groupsTitle: 'Gruppen',
+        groupsBody:
+          'Mehrere Tracks auswählen, rechtsklicken und <em>Group selected</em> wählen. Gruppen lassen sich einklappen, färben, sperren und gemeinsam verschieben.',
+        snappingTitle: 'Snapping',
+        snappingBody:
+          'Beim Ziehen von Keyframes oder Clips kann die Timeline an nahen Zeiten und Markern einrasten. Mit dem Magneten schaltest du das bei Bedarf aus.',
+      },
+      clips: {
+        intro:
+          'Ein <strong>Clip</strong> ist eine wiederverwendbare Gruppe aus Ebenen mit eigener lokaler Timeline. Auf der Haupt-Timeline wird daraus eine <strong>Clip-Instanz</strong>.',
+        createTitle: 'Clip anlegen',
+        create: {
+          step1: 'Wähle eine oder mehrere Ebenen in der Timeline aus.',
+          step2: 'Rechtsklick und <em>Convert to clip</em> wählen.',
+          step3:
+            'RUWIO erstellt das Clip-Asset und ersetzt die ursprünglichen Ebenen durch eine Clip-Instanz auf einer Clip-Spur.',
+        },
+        editTitle: 'Clip-Inhalt bearbeiten',
+        editBody:
+          'Doppelklick auf eine Clip-Instanz oder Klick auf den Clip in der Assets-Seite: Danach wechselst du in den Clip-Kontext. Alles, was du dort hinzufügst, gehört zum Clip, nicht zur Szene.',
+        trimTitle: 'Instanzen trimmen',
+        trimBody:
+          'Ziehe die linke oder rechte Kante einer Clip-Instanz, um festzulegen, welcher Teil der internen Animation sichtbar ist. Andere Instanzen desselben Clips behalten ihre eigenen Trims.',
+        transformTitle: 'Auf der Bühne transformieren',
+        transformBody:
+          'Eine Clip-Instanz kann auf der Bühne zusätzlich ihren eigenen Transform haben. So kannst du dieselbe Animation an mehreren Positionen, Größen oder Rotationen wiederverwenden.',
+      },
+      buttons: {
+        intro:
+          'Buttons sind interaktive Assets mit vier visuellen States: <code>normal</code>, <code>hover</code>, <code>pressed</code> und <code>disabled</code>. Dazu kommen optionale Hit-Shapes und On-Click-Aktionen.',
+        editingTitle: 'Button bearbeiten',
+        editingBody:
+          'Klicke einen Button in der Sidebar an, um in den Button-Edit-Modus zu wechseln. Bühne und Timeline zeigen dann den Button-Inhalt. Über den State-Switcher springst du zwischen <em>normal</em>, <em>hover</em>, <em>pressed</em> und <em>disabled</em>.',
+        stateKeyframesTitle: 'Keyframes pro State',
+        stateKeyframesBody:
+          'Buttons arbeiten mit vier festen Zeit-Slots, einer pro State. Leere Slots zeigen ein <strong>+</strong>. Ein Klick darauf erzeugt ein Start-Keyframe aus dem nächsten vorhandenen State.',
+        stillFramesTitle: 'Still-Frames in Buttons',
+        stillFramesBody:
+          'Ein gehaltenes Keyframe erscheint nur im jeweiligen Button-State. Normale Keyframes können über mehrere States interpolieren. Das ist ideal für kleine Extras wie Glow oder Outline in genau einem State.',
+        hitShapesTitle: 'Hit-Shapes',
+        hitShapesBody:
+          'Wechsle in den <em>Hit</em>-Modus, wenn du die klickbare Fläche zeichnen willst. Rechtecke, Kreise und Polygone lassen sich kombinieren. Ohne Hit-Shape ist die ganze Button-Canvas klickbar.',
+        actionsTitle: 'On-Click-Aktionen',
+        actionsBody:
+          'Mit ausgewählter Button-Ebene öffnest du im Properties-Panel den Bereich <em>On Click</em>. Die Aktionen laufen der Reihe nach, wenn der Klick im Hit-Bereich startet und endet.',
+        disabledTitle: 'Disabled-State',
+        disabledBody:
+          'Buttons können deaktiviert starten. Später lassen sie sich per Script oder Aktion mit <code>setButtonEnabled</code> an- oder ausschalten.',
+      },
+      scenes: {
+        intro:
+          'Szenen sind wie Seiten oder Kapitel. Sie teilen sich Canvas, fps, Dauer und Asset-Bibliothek, haben aber jeweils eigene Ebenen, Marker, Audio und Scripts.',
+        drawerTitle: 'Szenen-Schublade',
+        drawerBody:
+          'Über die Liste rechts kannst du Szenen wechseln, neue anlegen, duplizieren, umbenennen oder löschen.',
+        switchingTitle: 'Wie Szenenwechsel funktionieren',
+        switchingBody:
+          'Ein Wechsel über die Schublade ist normale Navigation: Der Playhead bleibt stehen. Ein Sprung mit <code>jumpToScene</code> wirkt eher wie ein Übergang: Die Zielszene startet wieder am In-Point.',
+        referencesTitle: 'Verweise zwischen Szenen',
+        referencesBody:
+          'Szenen-Aktionen arbeiten mit stabilen IDs. Darum brechen bestehende Sprünge nicht, wenn du eine Szene umbenennst.',
+      },
+      audio: {
+        intro:
+          'RUWIO trennt <strong>Audio-Assets</strong> von <strong>Audio-Clips</strong>. Assets liegen in der gemeinsamen Bibliothek. Clips sind Platzierungen auf Audio-Tracks innerhalb einer Szene.',
+        addTitle: 'Audio hinzufügen',
+        add: {
+          step1: 'Öffne den Audio-Bereich in der Sidebar und klicke auf den Upload-Button.',
+          step2: 'Wähle eine oder mehrere mp3-Dateien. Jede Datei wird zu einem Audio-Asset.',
+          step3:
+            'Ziehe ein Audio-Asset auf die Timeline oder in eine leere Stelle, damit automatisch ein Track angelegt wird.',
+        },
+        tracksTitle: 'Audio-Tracks',
+        tracksBody:
+          'Jeder Audio-Track kann mehrere Clips enthalten. Mit Rechtsklick kannst du ihn umbenennen, muten, färben, sperren oder löschen.',
+        movingTitle: 'Audio-Clips verschieben',
+        movingBody:
+          'Ziehe Clips nach links oder rechts, um sie zeitlich zu verschieben. Ziehe sie auf einen anderen Track, um sie umzulegen. Wenn Clips sich auf demselben Track überschneiden würden, schiebt RUWIO sie nach vorn.',
+        waveformsTitle: 'Waveforms',
+        waveformsBody:
+          'Waveforms werden im Hintergrund dekodiert. Direkt nach dem Import kann ein Clip kurz flach aussehen, bis die Vorschau geladen ist.',
+        urlsTitle: 'Data-URLs und externe URLs',
+        urlsBody:
+          'Lokal gewählte Dateien werden als Data-URL gespeichert, damit das Projekt offline bearbeitbar bleibt. Für produktive Exporte ist eine normale <code>https://</code>-URL oft die bessere Wahl.',
+      },
+      markers: {
+        intro:
+          'Marker sind benannte Zeitpunkte im Lineal. Sie helfen beim Navigieren, beim Timing und bei Script-Sprüngen wie <code>jump @intro</code>.',
+        editingTitle: 'Marker anlegen und bearbeiten',
+        editing: {
+          add: 'Mit <kbd>M</kbd> legst du einen Marker an der aktuellen Playhead-Position an.',
+          drag: 'Ziehe einen Marker horizontal, um ihn zeitlich zu verschieben.',
+          rename:
+            'Klicke einen Marker an, um ihn auszuwählen, und doppelklicke dann zum Umbenennen.',
+          delete:
+            'Ausgewählte Marker werden orange. Mit <kbd>Delete</kbd> oder <kbd>Backspace</kbd> löschst du sie.',
+          clear: 'Klick neben den Marker entfernt die Auswahl.',
+        },
+        sceneTitle: 'Pro Szene',
+        sceneBody:
+          'Marker gehören immer zu einer Szene, nicht zum ganzen Projekt. Wenn ein Script zu einem fehlenden Marker springen will, erscheint eine Warnung in der Runtime-Konsole.',
+      },
+      scriptsActions: {
+        intro:
+          'Ein <strong>Script-Frame</strong> ist ein Timeline-Event, das beim Überqueren durch die Wiedergabe eine oder mehrere Aktionen auslöst. Script-Frames liegen auf eigenen Script-Spuren.',
+        addTitle: 'Script-Frame anlegen',
+        add: {
+          step1:
+            'Klicke in einen leeren Bereich einer Script-Spur. Der Script-Frame-Dialog öffnet sich sofort.',
+          step2: 'Setze Zeit und optional ein Label und füge die gewünschten Aktionen hinzu.',
+          step3: 'Mit <em>Done</em> erscheint der Frame als Punkt auf der Spur.',
+        },
+        firingTitle: 'Wann Aktionen ausgelöst werden',
+        firing: {
+          forward:
+            'Nur Vorwärtsbewegung während der Wiedergabe löst Aktionen aus. Scrubbing und direkte Playhead-Sprünge tun das nicht.',
+          exact:
+            'Ein Script genau auf der aktuellen Playhead-Position feuert trotzdem beim ersten Tick nach dem Start von <em>Play</em>.',
+          order:
+            'Wenn mehrere Script-Frames im selben Tick-Fenster liegen, laufen sie in zeitlicher Reihenfolge.',
+          replay:
+            'Wenn du von derselben Position erneut startest, können Frames an genau dieser Position erneut auslösen.',
+        },
+        menuTitle: 'Rechtsklick-Menü',
+        menuBody:
+          'Per Rechtsklick auf einen Script-Frame kannst du ihn duplizieren oder löschen. Beim Duplizieren werden Label und Aktionsliste übernommen.',
+        typesTitle: 'Verfügbare Aktionstypen',
+        types: {
+          transport:
+            '<code>play</code>, <code>pause</code>, <code>rewindToLoop</code>: Steuerung der Wiedergabe.',
+          jump:
+            '<code>jumpTo</code>, <code>jumpToFrame</code>, <code>jumpToMarker</code>: bewegen den Playhead, ohne die Wiedergabe zu stoppen.',
+          scene:
+            '<code>jumpToScene</code>: wechselt die Szene und springt zurück zum In-Point.',
+          button:
+            '<code>setButtonEnabled</code>: aktiviert oder deaktiviert eine bestimmte Button-Ebene.',
+          script:
+            '<code>script</code>: führt eine kleine zeilenbasierte DSL aus. Die kommt im nächsten Kapitel.',
+        },
+      },
+      scriptLanguage: {
+        intro:
+          'Die <code>script</code>-Aktion akzeptiert eine kleine zeilenbasierte DSL. Editor, Vorschau und exportierte Runtime nutzen denselben Parser, deshalb bleibt das Verhalten konsistent.',
+        syntaxTitle: 'Syntax-Regeln',
+        syntax: {
+          onePerLine: 'Ein Befehl pro Zeile. Leere Zeilen werden ignoriert.',
+          comments: 'Alles hinter <code>//</code> in einer Zeile gilt als Kommentar.',
+          tokens:
+            'Tokens werden über Leerzeichen getrennt. Das erste Token ist immer der Befehlsname.',
+          case: 'Befehle sind nicht case-sensitiv.',
+        },
+        commandsTitle: 'Befehle',
+        commands: {
+          play: {
+            syntax: '<code>play</code>',
+            effect: 'Startet oder setzt die Wiedergabe fort.',
+          },
+          pause: {
+            syntax: '<code>pause</code>',
+            effect: 'Hält die Wiedergabe an und lässt den Playhead stehen.',
+          },
+          rewind: {
+            syntax: '<code>rewind</code>',
+            effect:
+              'Setzt den Playhead auf den Wiedergabe-In-Point: Projektstart oder aktueller <em>I</em>-Marker.',
+          },
+          jumpSeconds: {
+            syntax: '<code>jump &lt;seconds&gt;</code>',
+            effect:
+              'Springt zu einer Zeit in Sekunden, zum Beispiel <code>jump 2.5</code>.',
+          },
+          jumpFrame: {
+            syntax: '<code>jump #&lt;frame&gt;</code>',
+            effect:
+              'Springt zu einem Frame-Index bei der aktuellen Szenen-fps, zum Beispiel <code>jump #60</code>.',
+          },
+          jumpMarker: {
+            syntax: '<code>jump @&lt;marker&gt;</code>',
+            effect:
+              'Springt zu einem benannten Marker in der aktiven Szene, zum Beispiel <code>jump @intro</code>.',
+          },
+        },
+        exampleTitle: 'Beispiel',
+        exampleBody: `// Intro loopen und dann auf einen Klick warten.
+jump @intro-start
+pause // wartet auf einen Button oder einen anderen Script-Frame
+play
+// Ein späterer Script-Frame kann hierhin zurückspringen:
+// jump @intro-start`,
+        errorsTitle: 'Fehler',
+        errorsBody:
+          'Unbekannte Befehle, fehlende Argumente und ungültige Jump-Ziele erscheinen in der Browser-Konsole als <code>[ruwio] Script line N: message</code>. Eine kaputte Zeile stoppt die anderen nicht.',
+        notInDslTitle: 'Was die DSL nicht kann',
+        notInDslBody:
+          'Die DSL ist bewusst klein gehalten. Dinge wie <code>jumpToScene</code>, <code>setButtonEnabled</code> oder verschachtelte <code>script</code>-Blöcke gehören in den strukturierten Action-Editor.',
+      },
+      export: {
+        intro:
+          'Du kannst direkt im Editor vorprüfen, die interaktive Runtime im Fullscreen testen oder das Projekt exportieren, sobald alles passt.',
+        editorPreviewTitle: 'Vorschau im Editor',
+        editorPreviewBody:
+          'Die normale Bühnenvorschau spielt die aktive Szene ab, aber ohne interaktive Button-Hover- oder Klick-States. Mit <kbd>Leertaste</kbd> startest oder pausierst du.',
+        fullscreenPreviewTitle: 'Fullscreen-Vorschau',
+        fullscreenPreviewBody:
+          'Mit <kbd>Shift</kbd>+<kbd>Leertaste</kbd> öffnest du die runtime-nahe Fullscreen-Vorschau. Dort funktionieren Buttons, Audio läuft und Szenensprünge sind live. Mit <kbd>Escape</kbd> schließt du sie.',
+        formatsTitle: 'Exportformate',
+        formats: {
+          runtime:
+            '<strong>ruwio-runtime.js:</strong> Die Runtime-Engine. Einmal auf der Seite laden und Projekte daran mounten.',
+          scene:
+            '<strong>animation.js:</strong> Nur Projektdaten. Die Runtime muss schon vorhanden sein.',
+          html:
+            '<strong>HTML-Beispiel:</strong> Eine schnelle eigenständige Seite mit allem fertig verdrahtet.',
+          mp4:
+            '<strong>MP4-Video:</strong> Frame-genauer Server-Render. Dafür muss der Render-Server in den Einstellungen konfiguriert sein.',
+          webm:
+            '<strong>WebM-Video:</strong> Browser-seitige Echtzeit-Aufnahme. Das hängt von <code>MediaRecorder</code> ab.',
+        },
+        skipHiddenTitle: 'Versteckte Ebenen auslassen',
+        skipHiddenBody:
+          'Wenn <em>Skip editor-hidden layers</em> aktiv ist, werden im Editor versteckte Ebenen im Export weggelassen. Das ist praktisch für Hilfsebenen, Skizzen oder temporäre Elemente.',
+        assetsTitle: 'Assets und URLs',
+        assetsBody:
+          'Bilder und Audio als Data-URL bleiben im Export eingebettet. Hintergrundvideos und externe Medien-URLs bleiben verlinkt. Die Dateien müssen also weiterhin erreichbar sein.',
+      },
+      shortcuts: {
+        intro:
+          'Die meisten Shortcuts pausieren automatisch, sobald ein Textfeld, eine Textarea oder ein Zahlenfeld den Fokus hat. So kannst du sicher tippen.',
+      },
+    },
+  },
+}
diff --git a/src/version.ts b/src/version.ts
index ba66f6a..7e420a1 100644
--- a/src/version.ts
+++ b/src/version.ts
@@ -1,2 +1,2 @@
-export const APP_VERSION = '0.8.5'
+export const APP_VERSION = '0.11.0'
 export const APP_NAME = 'RUWIO'