feat(guides): add mana guides app — step-by-step playbook app

New app at apps/guides/ with local-first architecture (Dexie.js + mana-sync).

- 5 collections: guides, sections, steps, collections, runs
- Library view: card grid with search, category & difficulty filters
- Guide detail: sections/steps overview, start-run buttons
- Run mode: scroll (all steps) + focus (one step at a time) with note support
- Collections view: learning paths with progress bars
- History view: all runs with timestamps and duration
- Guest seed: 3 demo guides (dev setup, pasta recipe, git basics)
- GuideCard with run-status indicator (○◑●⟳)
- GuideEditModal with emoji, color, difficulty, tags
- Registered in shared-branding: port 5200, teal #0d9488, guides.mana.how
- Plan doc: .claude/plans/mana-guides.md

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

packages/shared-branding/src/app-icons.ts

@@ -123,6 +123,9 @@ export const APP_ICONS = {
 	news: svgToDataUrl(
 		`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><linearGradient id="ng" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#10b981"/><stop offset="100%" style="stop-color:#34d399"/></linearGradient></defs><rect width="100" height="100" rx="22" fill="url(#ng)"/><rect x="22" y="25" width="56" height="50" rx="4" stroke="white" stroke-width="4" fill="none"/><line x1="30" y1="38" x2="55" y2="38" stroke="white" stroke-width="3" stroke-linecap="round"/><line x1="30" y1="48" x2="70" y2="48" stroke="white" stroke-width="3" stroke-linecap="round"/><line x1="30" y1="58" x2="65" y2="58" stroke="white" stroke-width="3" stroke-linecap="round"/></svg>`
 	),
+	guides: svgToDataUrl(
+		`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><linearGradient id="gg" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#0d9488"/><stop offset="100%" style="stop-color:#0f766e"/></linearGradient></defs><rect width="100" height="100" rx="22" fill="url(#gg)"/><rect x="18" y="25" width="28" height="50" rx="3" fill="white" fill-opacity="0.15"/><rect x="54" y="25" width="28" height="50" rx="3" fill="white" fill-opacity="0.15"/><rect x="46" y="25" width="8" height="50" fill="white" fill-opacity="0.25"/><circle cx="27" cy="40" r="4" fill="white" fill-opacity="0.9"/><rect x="34" y="37" width="11" height="3" rx="1.5" fill="white" fill-opacity="0.6"/><circle cx="27" cy="52" r="4" fill="white" fill-opacity="0.55"/><rect x="34" y="49" width="9" height="3" rx="1.5" fill="white" fill-opacity="0.4"/><circle cx="27" cy="64" r="4" fill="white" fill-opacity="0.3"/><rect x="34" y="61" width="10" height="3" rx="1.5" fill="white" fill-opacity="0.25"/><path d="M60 52l6 7 12-14" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>`
+	),
 } as const;
 
 export type AppIconId = keyof typeof APP_ICONS;

packages/shared-branding/src/mana-apps.ts

@@ -513,6 +513,23 @@ export const MANA_APPS: ManaApp[] = [
 		status: 'development',
 		requiredTier: 'beta',
 	},
+	{
+		id: 'guides',
+		name: 'Guides',
+		description: {
+			de: 'Schritt-für-Schritt Anleitungen',
+			en: 'Step-by-Step Guides',
+		},
+		longDescription: {
+			de: 'Erstelle und führe strukturierte Anleitungen aus — Rezepte, SOPs, Lernpfade und Playbooks mit Ausführungshistorie.',
+			en: 'Create and execute structured guides — recipes, SOPs, learning paths, and playbooks with run history.',
+		},
+		icon: APP_ICONS.guides,
+		color: '#0d9488',
+		comingSoon: false,
+		status: 'development',
+		requiredTier: 'beta',
+	},
 ];
 
 /**
@@ -617,6 +634,7 @@ export const APP_URLS: Record<AppIconId, { dev: string; prod: string }> = {
 	reader: { dev: 'exp://localhost:8081', prod: 'https://reader.mana.how' },
 	news: { dev: 'http://localhost:5174', prod: 'https://news.mana.how' },
 	calc: { dev: 'http://localhost:5198', prod: 'https://calc.mana.how' },
+	guides: { dev: 'http://localhost:5200', prod: 'https://guides.mana.how' },
 };
 
 /**