@dzhechkov/keysarium 1.3.0 → 1.5.0

package/templates/.claude/skills/transcript-site-generator/examples/sample-transcript-site.md

@@ -0,0 +1,134 @@
+# Example: Podcast Transcript Site
+
+## Input
+
+```
+YouTube URL: https://www.youtube.com/watch?v=julbw1JuAz0
+Title: "Building Claude Code with Boris Cherny"
+Language: Russian
+```
+
+## Parsed Sections (Step 1 Output)
+
+```
+Section 1: "Введение" (00:00:00) - 342 words
+Section 2: "Ранняя карьера: от Pokemon до программирования" (00:02:15) - 890 words
+Section 3: "Опыт в Meta: Instagram, Facebook, WhatsApp" (00:08:30) - 1240 words
+Section 4: "Приход в Anthropic и первый pull request" (00:15:45) - 780 words
+Section 5: "Рождение Claude Code" (00:22:10) - 1450 words
+Section 6: "Рабочие паттерны: 20-30 PR в день" (00:32:00) - 950 words
+Section 7: "Code Review с AI" (00:38:20) - 670 words
+Section 8: "Архитектура и безопасность" (00:43:15) - 1100 words
+Section 9: "Культура Anthropic" (00:50:30) - 820 words
+Section 10: "Claude как коллега" (00:56:45) - 560 words
+Section 11: "Agent Teams и будущее" (01:02:10) - 740 words
+Section 12: "Метафора печатного станка" (01:08:30) - 1320 words
+Section 13: "Навыки инженера будущего" (01:15:00) - 680 words
+
+Total: 11,542 words, ~58 min read, 2 speakers
+```
+
+## Generated File Structure
+
+```
+project-root/
+├── docs/
+│   ├── index.html       (87 KB)
+│   └── static/
+│       ├── app.js        (11 KB)
+│       └── style.css     (0.4 KB)
+├── .github/
+│   └── workflows/
+│       └── deploy.yml
+└── README.md
+```
+
+## index.html Highlights
+
+### SEO Head
+
+```html
+<title>Building Claude Code with Boris Cherny — Транскрипт</title>
+<meta name="description" content="Полный русский транскрипт подкаста Pragmatic Engineer с Борисом Черным, создателем Claude Code в Anthropic." />
+<meta property="og:type" content="video.other" />
+<meta property="og:image" content="https://img.youtube.com/vi/julbw1JuAz0/maxresdefault.jpg" />
+```
+
+### JSON-LD
+
+```json
+[
+  {
+    "@type": "Article",
+    "headline": "Building Claude Code with Boris Cherny — Транскрипт",
+    "wordCount": 11542
+  },
+  {
+    "@type": "VideoObject",
+    "name": "Building Claude Code with Boris Cherny",
+    "embedUrl": "https://www.youtube.com/embed/julbw1JuAz0"
+  }
+]
+```
+
+### Sample Section HTML
+
+```html
+<section id="section-birth-of-claude-code" class="mb-12 scroll-mt-20">
+  <div class="flex items-start justify-between mb-4">
+    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
+      <a href="#section-birth-of-claude-code" role="button" data-seek="1330"
+         class="timestamp-link text-primary-500 hover:text-primary-600 text-sm font-mono mr-2">22:10</a>
+      5. Рождение Claude Code
+    </h2>
+    <button data-copy="section-birth-of-claude-code"
+            class="copy-btn flex-shrink-0 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800
+                   text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 no-print"
+            aria-label="Скопировать">
+      <i class="far fa-copy"></i>
+    </button>
+  </div>
+  <div class="mb-3 flex items-center gap-2">
+    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
+                 bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200">
+      Boris Cherny &middot; Guest
+    </span>
+  </div>
+  <div class="prose prose-lg dark:prose-invert max-w-none">
+    <p>Когда я пришел в Anthropic, мой первый pull request был написан от руки...</p>
+    <p>И тогда я подумал: а что если Claude сможет сам писать код?...</p>
+  </div>
+</section>
+```
+
+### YouTube Embed
+
+```html
+<div class="mb-8 rounded-xl overflow-hidden shadow-lg aspect-video max-w-3xl mx-auto">
+  <iframe id="yt-player"
+    src="https://www.youtube.com/embed/julbw1JuAz0?enablejsapi=1&origin=https://user.github.io"
+    class="w-full h-full" frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowfullscreen>
+  </iframe>
+</div>
+```
+
+## Stats Displayed in Header
+
+```
+⏱ 58 мин чтения · 📄 11 542 слов · 13 разделов
+```
+
+## Verification Results
+
+```
+File checks: 5/5 passed
+HTML structure: 13/13 passed
+Content: 6/6 passed
+Interactivity: 10/10 passed
+Responsive: 6/6 passed
+Dark mode: 6/6 passed
+SEO: 7/7 passed
+Print: 4/4 passed
+```

package/templates/.claude/skills/transcript-site-generator/modules/00-input-analysis.md

@@ -0,0 +1,132 @@
+# Step 0: Input Analysis
+
+## Purpose
+
+Detect the input type, extract raw transcript text, and gather metadata for downstream steps.
+
+## Protocol
+
+### 1. Classify Input
+
+Scan the user's input for:
+
+| Pattern | Input Type | Action |
+|---------|-----------|--------|
+| `youtube.com/watch?v=` or `youtu.be/` | YouTube URL | Extract via yt-dlp |
+| File path ending in `.txt`, `.md`, `.vtt`, `.srt` | Local file | Read file |
+| Multi-line text block (>100 chars) | Pasted text | Use directly |
+| URL + text block | Combined | URL for embed, text as transcript |
+
+If the input is ambiguous, ask:
+```
+Detected both a URL and text. Which should I use?
+1. URL for video embed + text as transcript content
+2. URL only (extract transcript from video)
+3. Text only (ignore URL)
+```
+
+### 2. YouTube Extraction (if applicable)
+
+```bash
+# Check yt-dlp availability
+which yt-dlp || pip install yt-dlp
+
+# Extract video metadata
+yt-dlp --print title --print channel --print duration --skip-download "<URL>"
+
+# Extract subtitles (prefer manual, fallback to auto-generated)
+yt-dlp --write-sub --sub-lang ru,en --skip-download --sub-format vtt -o "/tmp/transcript" "<URL>" 2>/dev/null \
+  || yt-dlp --write-auto-sub --sub-lang ru,en --skip-download --sub-format vtt -o "/tmp/transcript" "<URL>"
+```
+
+#### VTT Parsing
+
+Parse the `.vtt` file:
+1. Skip the `WEBVTT` header and any style blocks
+2. Extract timestamp + text pairs
+3. Remove duplicate lines (VTT shows overlapping segments)
+4. Merge consecutive segments from the same speaker
+5. Clean up formatting: remove `<c>` tags, `&amp;` entities, alignment cues
+
+Output format:
+```javascript
+[
+  { timestamp: "00:00:00", text: "First paragraph of merged text..." },
+  { timestamp: "00:02:15", text: "Second paragraph..." },
+  // ...
+]
+```
+
+### 3. Language Detection
+
+Analyze the first 500 characters of the transcript to determine the primary UI language:
+
+1. Count Unicode script ranges in the text:
+   - Cyrillic: U+0400-U+04FF (Russian, Ukrainian, Bulgarian, Serbian, etc.)
+   - Latin: U+0041-U+024F
+   - CJK: U+4E00-U+9FFF, U+3040-U+309F, U+30A0-U+30FF
+   - Arabic: U+0600-U+06FF
+2. Pick the dominant script (highest character count).
+3. Map to UI language:
+   - Cyrillic-dominant -> `ru` (Russian UI strings)
+   - Latin-dominant -> `en` (English UI strings)
+   - Other scripts -> `en` (fallback; UI strings in English)
+
+This determines UI strings only (button labels, search placeholder, stats labels).
+The transcript content itself is rendered as-is regardless of language.
+
+> **Limitation:** UI strings are currently available in Russian and English only. For other
+> Cyrillic-script languages (Ukrainian, Bulgarian), Russian UI strings are used as the closest
+> available option. Adding more UI languages requires extending the strings table in Step 2.
+
+### 4. Metadata Collection
+
+Build metadata object:
+
+```javascript
+{
+  title: "",           // From YouTube title, or ask user
+  description: "",     // First 160 chars of transcript (for SEO)
+  author: "",          // From YouTube channel, or ask user
+  language: "ru|en",
+  sourceUrl: "",       // YouTube URL if provided
+  videoId: "",         // Extracted from YouTube URL
+  duration: "",        // Video duration if YouTube
+  publishDate: "",     // Video publish date if YouTube
+  wordCount: 0,        // Computed after text extraction
+  estimatedReadTime: 0 // wordCount / 200 (avg reading speed)
+}
+```
+
+### 5. Output
+
+Pass to Step 1:
+- `rawText`: Full transcript text (cleaned)
+- `timestamps`: Array of `{ timestamp, text }` pairs (or empty if no timestamps)
+- `metadata`: Metadata object
+- `hasVideo`: Boolean (true if YouTube URL provided)
+- `videoId`: YouTube video ID (or null)
+
+## Edge Cases
+
+| Case | Handling |
+|------|----------|
+| yt-dlp not installed | Prompt user to install or paste text manually |
+| No subtitles available | Inform user, ask for manual transcript |
+| VTT in unexpected format | Fallback to line-by-line parsing |
+| Very short transcript (<500 words) | Warn: site may have minimal content |
+| Very long transcript (>50K words) | Proceed normally; long content benefits most from navigation |
+| Multiple subtitle languages | Prefer user's detected language, then `ru`, then `en` |
+
+## Checkpoint
+
+```
+Step 0/5: Input Analysis Complete
+Input type: [text | YouTube | combined]
+Language: [ru | en]
+Word count: [N] (~[M] min read)
+Sections hint: ~[K] sections expected
+Video: [yes (videoId) | no]
+
+"ok" to continue | "[feedback]" to adjust
+```

package/templates/.claude/skills/transcript-site-generator/modules/01-content-parsing.md

@@ -0,0 +1,117 @@
+# Step 1: Content Parsing
+
+## Purpose
+
+Split raw transcript text into logical sections with titles, timestamps, and word counts.
+
+## Protocol
+
+### 1. Section Detection Strategy
+
+Try these strategies in order until one yields 3+ sections:
+
+#### Strategy A: Explicit Markers
+Look for existing structure in the text:
+- Markdown headings (`## Title`, `### Title`)
+- Numbered headers (`1. Topic`, `2. Topic`)
+- Bold markers (`**Topic:**`)
+- Speaker labels (`Speaker Name:`, `Host:`, `Guest:`)
+- Explicit section breaks (`---`, `===`, blank lines > 3)
+
+#### Strategy B: Topic Shift Detection
+If no explicit markers found:
+- Analyze paragraphs for semantic topic shifts
+- Group related paragraphs into sections
+- Target 5-15 sections for optimal navigation
+- Each section should be 200-2000 words
+
+#### Strategy C: Time-Based Splitting (for YouTube with timestamps)
+If timestamps are available:
+- Group content into ~5-minute segments
+- Adjust boundaries to natural pause points
+- Use topic keywords from each segment for titles
+
+### 2. Title Generation
+
+For each section, generate a concise title (3-8 words):
+- Extract the main topic or key phrase
+- Use sentence case
+- Avoid generic titles ("Part 1", "Continued")
+- If speakers are identified, optionally include: "Speaker Name: Topic"
+
+### 3. Timestamp Association
+
+For each section:
+- Assign the timestamp of its first paragraph
+- Format: `HH:MM:SS` or `MM:SS` (depending on duration)
+- If no timestamps available, set to `null`
+
+### 4. Section Schema
+
+```javascript
+{
+  id: "section-slug",       // kebab-case from title
+  order: 1,                 // 1-based sequential
+  title: "Section Title",
+  shortTitle: "Short",      // 2-3 words for mobile TOC
+  timestamp: "00:05:30",    // or null
+  timestampSeconds: 330,    // for YouTube seek, or null
+  content: "Full text...",  // Markdown-safe text
+  wordCount: 450,
+  speakerName: "Boris",     // or null if not identified
+  speakerRole: "Guest"      // "Host" | "Guest" | null
+}
+```
+
+### 5. Speaker Detection
+
+If the transcript has multiple speakers:
+- Detect speaker labels (Name:, [Name], SPEAKER_NAME:)
+- Assign speaker metadata to each section
+- Generate speaker list for metadata:
+  ```javascript
+  speakers: [
+    { name: "Boris Cherny", role: "Guest" },
+    { name: "Gergely Orosz", role: "Host" }
+  ]
+  ```
+
+### 6. Content Cleaning
+
+For each section's content:
+- Normalize whitespace (collapse multiple spaces/newlines)
+- Fix broken sentences from VTT merging
+- Preserve paragraph breaks (double newline)
+- Escape HTML special characters (`<`, `>`, `&`, `"`)
+- Convert `**bold**` to retain emphasis
+- Remove timecode artifacts if they appear inline
+
+## Output
+
+Pass to Step 2:
+- `sections`: Array of section objects (schema above)
+- `speakers`: Array of speaker objects (or empty)
+- `totalWordCount`: Sum of all section word counts
+- `estimatedReadTime`: totalWordCount / 200, rounded up
+
+## Edge Cases
+
+| Case | Handling |
+|------|----------|
+| Only 1-2 sections detected | Warn user, suggest splitting by time or paragraphs |
+| Section > 3000 words | Auto-split at paragraph boundaries |
+| No clear topic shifts | Split every ~500 words with generated titles |
+| Mixed languages in transcript | Keep as-is, note in metadata |
+| Code blocks in transcript | Preserve with ``` markers |
+
+## Checkpoint
+
+```
+Step 1/5: Content Parsing Complete
+Sections: [N] sections created
+Speakers: [names or "single speaker"]
+Timestamps: [available | not available]
+Avg section length: [N] words
+
+"ok" to continue | "[feedback]" to adjust
+```

package/templates/.claude/skills/transcript-site-generator/modules/02-site-generation.md

@@ -0,0 +1,293 @@
+# Step 2: Site Generation
+
+## Purpose
+
+Generate the complete `docs/index.html` — a self-contained static page with all transcript content, Tailwind CSS via CDN, SEO meta, and responsive layout.
+
+## Protocol
+
+### 1. Create docs/ Directory
+
+```bash
+mkdir -p docs/static
+```
+
+### 2. Generate index.html
+
+The HTML file follows this structure:
+
+```html
+<!DOCTYPE html>
+<html lang="{language}" class="scroll-smooth">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{TITLE}</title>
+  <meta name="description" content="{DESCRIPTION_160_CHARS}" />
+  <meta name="author" content="{AUTHOR}" />
+
+  <!-- Open Graph -->
+  <meta property="og:title" content="{TITLE}" />
+  <meta property="og:description" content="{DESCRIPTION}" />
+  <meta property="og:type" content="{article|video.other}" />
+  <meta property="og:url" content="https://{username}.github.io/{repo}/" />
+  <!-- If YouTube: -->
+  <meta property="og:image" content="https://img.youtube.com/vi/{VIDEO_ID}/maxresdefault.jpg" />
+  <meta property="og:video" content="https://www.youtube.com/embed/{VIDEO_ID}" />
+
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="{TITLE}" />
+  <meta name="twitter:description" content="{DESCRIPTION}" />
+
+  <!-- JSON-LD Structured Data -->
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    "headline": "{TITLE}",
+    "author": { "@type": "Person", "name": "{AUTHOR}" },
+    "datePublished": "{DATE}",
+    "description": "{DESCRIPTION}",
+    "wordCount": {WORD_COUNT}
+  }
+  </script>
+
+  <!-- If YouTube, add VideoObject: -->
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "VideoObject",
+    "name": "{TITLE}",
+    "description": "{DESCRIPTION}",
+    "thumbnailUrl": "https://img.youtube.com/vi/{VIDEO_ID}/maxresdefault.jpg",
+    "uploadDate": "{PUBLISH_DATE}",
+    "contentUrl": "{YOUTUBE_URL}",
+    "embedUrl": "https://www.youtube.com/embed/{VIDEO_ID}"
+  }
+  </script>
+
+  <!-- Tailwind CSS via CDN -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          colors: {
+            primary: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc',
+                       400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca',
+                       800: '#3730a3', 900: '#312e81', 950: '#1e1b4b' }
+          }
+        }
+      }
+    }
+  </script>
+
+  <!-- Font Awesome for icons (with SRI hash) -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+    integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+  <link rel="stylesheet" href="static/style.css" />
+</head>
+```
+
+### 3. Body Structure
+
+```html
+<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300">
+
+  <!-- Reading Progress Bar -->
+  <div id="progress-bar" class="fixed top-0 left-0 h-1 bg-primary-500 z-50 transition-all duration-150" style="width: 0%"></div>
+
+  <!-- Skip Navigation Link -->
+  <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:px-4 focus:py-2 focus:bg-primary-500 focus:text-white focus:rounded-lg">
+    Skip to content
+  </a>
+
+  <!-- Header -->
+  <header class="sticky top-0 z-40 bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm border-b border-gray-200 dark:border-gray-700" role="banner">
+    <div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <!-- Mobile menu button -->
+        <button id="menu-toggle" class="lg:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
+          <i class="fas fa-bars text-lg"></i>
+        </button>
+        <div>
+          <h1 class="text-lg font-bold text-primary-700 dark:text-primary-400 line-clamp-1">{TITLE}</h1>
+          <p class="text-xs text-gray-500 dark:text-gray-400">
+            <i class="far fa-clock"></i> {READ_TIME} {min_label} &middot;
+            <i class="far fa-file-alt"></i> {WORD_COUNT} {words_label} &middot;
+            {SECTION_COUNT} {sections_label}
+          </p>
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <button id="search-btn" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800" title="Ctrl+K">
+          <i class="fas fa-search"></i>
+        </button>
+        <button id="theme-toggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
+          <i class="fas fa-moon" id="theme-icon"></i>
+        </button>
+      </div>
+    </div>
+  </header>
+
+  <!-- Main Layout -->
+  <div class="max-w-7xl mx-auto flex">
+
+    <!-- Sidebar TOC (desktop) / Slide-out (mobile) -->
+    <nav id="sidebar" aria-label="Table of Contents" class="fixed lg:sticky top-16 left-0 h-[calc(100vh-4rem)] w-72 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 overflow-y-auto transform -translate-x-full lg:translate-x-0 transition-transform duration-300 z-30 no-print">
+      <div class="p-4">
+        <h2 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
+          {toc_label}
+        </h2>
+        <ul class="space-y-1">
+          <!-- For each section: -->
+          <li>
+            <a href="#section-{id}" class="toc-link block px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 transition-colors" data-section="section-{id}">
+              {section_title}
+            </a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main id="main-content" class="flex-1 min-w-0 px-4 py-8 lg:px-8" role="main">
+
+      <!-- YouTube Embed (if video URL provided) -->
+      <div class="mb-8 rounded-xl overflow-hidden shadow-lg aspect-video max-w-3xl mx-auto">
+        <iframe id="yt-player" src="https://www.youtube.com/embed/{VIDEO_ID}?enablejsapi=1&origin=https://{username}.github.io"
+          class="w-full h-full" frameborder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen></iframe>
+      </div>
+
+      <!-- Transcript Sections -->
+      <!-- For each section: -->
+      <section id="section-{id}" class="mb-12 scroll-mt-20">
+        <div class="flex items-start justify-between mb-4">
+          <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
+            <!-- If timestamp: -->
+            <a href="#{id}" role="button" data-seek="{seconds}" class="timestamp-link text-primary-500 hover:text-primary-600 text-sm font-mono mr-2">{timestamp}</a>
+            {section_title}
+          </h2>
+          <button data-copy="section-{id}" class="copy-btn flex-shrink-0 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 no-print" title="{copy_label}">
+            <i class="far fa-copy"></i>
+          </button>
+        </div>
+        <!-- If speaker identified: -->
+        <div class="mb-3 flex items-center gap-2">
+          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200">
+            {speaker_name} &middot; {speaker_role}
+          </span>
+        </div>
+        <div class="prose prose-lg dark:prose-invert max-w-none">
+          <!-- Transcript content paragraphs as <p> tags -->
+          <p>{paragraph_1}</p>
+          <p>{paragraph_2}</p>
+        </div>
+      </section>
+
+      <!-- Footer -->
+      <footer class="border-t border-gray-200 dark:border-gray-700 mt-16 pt-8 pb-12 text-center text-sm text-gray-500 dark:text-gray-400">
+        <p>{AUTHOR} &middot; {DATE}</p>
+        <!-- If YouTube: -->
+        <p class="mt-2">
+          <a href="{YOUTUBE_URL}" target="_blank" class="text-primary-500 hover:text-primary-600">
+            <i class="fab fa-youtube"></i> {watch_video_label}
+          </a>
+        </p>
+      </footer>
+    </main>
+  </div>
+
+  <!-- Search Modal -->
+  <div id="search-modal" class="hidden fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-start justify-center pt-[15vh]" role="dialog" aria-modal="true" aria-label="Search">
+    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-lg mx-4 overflow-hidden">
+      <div class="p-4 border-b border-gray-200 dark:border-gray-700">
+        <div class="flex items-center gap-3">
+          <i class="fas fa-search text-gray-400"></i>
+          <input id="search-input" type="text" placeholder="{search_placeholder}" class="flex-1 bg-transparent outline-none text-lg" autocomplete="off" />
+          <kbd class="hidden sm:inline-flex px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 rounded">{esc_label}</kbd>
+        </div>
+      </div>
+      <div id="search-results" class="max-h-[50vh] overflow-y-auto p-2">
+        <!-- Results populated by app.js -->
+      </div>
+    </div>
+  </div>
+
+  <!-- Back to Top Button -->
+  <button id="back-to-top" class="hidden fixed bottom-8 right-8 p-3 rounded-full bg-primary-500 text-white shadow-lg hover:bg-primary-600 transition-all duration-300 hover:scale-110 z-30 no-print">
+    <i class="fas fa-arrow-up"></i>
+  </button>
+
+  <script src="static/app.js"></script>
+</body>
+</html>
+```
+
+### 4. Content Rendering Rules
+
+When rendering transcript content into HTML:
+- Each paragraph becomes a `<p>` tag inside `.prose`
+- `**bold**` markers → `<strong>bold</strong>`
+- `*italic*` → `<em>italic</em>`
+- Code backticks → `<code class="bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-sm">code</code>`
+- URLs → `<a href="url" target="_blank" class="text-primary-500 hover:underline">url</a>`
+- Escape HTML entities in transcript text (`<`, `>`, `&`, `"`)
+- Newlines within a section become paragraph breaks
+
+### 5. Generate style.css
+
+```css
+/* docs/static/style.css */
+h1 { font-family: Arial, Helvetica, sans-serif; }
+
+@media print {
+  .no-print { display: none !important; }
+  body { font-size: 12pt; color: black !important; background: white !important; }
+  section { break-inside: avoid; page-break-inside: avoid; }
+  h2 { break-after: avoid; }
+  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: gray; }
+  .prose { max-width: 100% !important; }
+  #sidebar, #progress-bar, #back-to-top, #search-modal, .copy-btn { display: none !important; }
+}
+```
+
+### 6. Language-Specific UI Strings
+
+| Key | Russian (ru) | English (en) |
+|-----|-------------|-------------|
+| toc_label | Содержание | Table of Contents |
+| search_placeholder | Поиск по транскрипту... | Search transcript... |
+| esc_label | Esc | Esc |
+| copy_label | Скопировать | Copy |
+| copied_label | Скопировано! | Copied! |
+| no_results | Ничего не найдено | No results found |
+| watch_video_label | Смотреть видео | Watch video |
+| min_label | мин чтения | min read |
+| words_label | слов | words |
+| sections_label | разделов | sections |
+| back_to_top | Наверх | Back to top |
+
+## Output
+
+Files created:
+- `docs/index.html` (~50-100 KB depending on transcript length)
+- `docs/static/style.css` (~500 B)
+
+## Checkpoint
+
+```
+Step 2/5: Site Generation Complete
+Files: docs/index.html ({N} KB), docs/static/style.css
+Sections: {N} rendered
+SEO: OG + Twitter + JSON-LD configured
+YouTube: {embedded | not included}
+
+"ok" to continue | "[feedback]" to adjust
+```