diff --git a/ROUND1-ANALYSIS.md b/ROUND1-ANALYSIS.md
new file mode 100644
index 0000000..4167d49
--- /dev/null
+++ b/ROUND1-ANALYSIS.md
@@ -0,0 +1,475 @@
+# Round 1 Analysis: github-markdown-css Mobile Issues
+
+## Session Info
+- **Date**: 2026-04-25
+- **User Prompt**: System梳理 github-markdown-css 中 github-markdown.css、github-markdown-light.css、github-markdown-dark.css 与 package.json 构建流程的关系，定位 markdown-body 在移动端最容易出问题的 5 类样式（table、pre/code、图片媒体、blockquote、list），并给出每类的关键选择器、文件位置、复现方式和修复优先级，最后产出第二轮可直接修复的 Bug Top3（含根因假设和预计改动文件）。
+- **Fork URL**: https://github.com/666yuhan666/github-markdown-css
+
+---
+
+## Part 1: CSS Files & package.json Build Flow Relationship
+
+### 1.1 Build Architecture
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ package.json scripts │
+├─────────────────────────────────────────────────────────────┤
+│ npm run make:auto → github-markdown.css (auto theme) │
+│ npm run make:light → github-markdown-light.css │
+│ npm run make:dark → github-markdown-dark.css │
+│ npm run make:dark-dimmed → github-markdown-dark-dimmed.css │
+│ npm run make:dark-high-contrast → github-markdown-dark-high-contrast.css │
+│ npm run make:dark-colorblind → github-markdown-dark-colorblind.css │
+│ npm run make:light-colorblind → github-markdown-light-colorblind.css │
+│ │
+│ npm run make → runs ALL of the above │
+└─────────────────────────────────────────────────────────────┘
+ │
+ ▼
+┌─────────────────────────────────────────────────────────────┐
+│ Dependency: generate-github-markdown-css@^6.6.0 │
+│ (External CLI tool that generates the styles) │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### 1.2 File Comparison Matrix
+
+| File | CSS Variables | Mobile Media Query | img has `height: auto` | Published in files[] |
+|------|---------------|-------------------|------------------------|---------------------|
+| github-markdown.css | ✅ (via prefers-color-scheme) | ✅ Lines 1250-1295 | ❌ Lines 239-243 | ✅ |
+| github-markdown-light.css | ❌ (hardcoded colors) | ❌ None | ❌ Lines 115-119 | ✅ |
+| github-markdown-dark.css | ❌ (hardcoded colors) | ❌ None | ❌ Lines 115-119 | ✅ |
+| github-markdown-mobile.css | ✅ | ✅ Lines 1251-1292 | ✅ Lines 239-244 | ❌ |
+
+### 1.3 Key Observations
+
+1. **`github-markdown.css` is special**: It's the ONLY file with BOTH:
+ - Automatic theme switching via `@media (prefers-color-scheme)`
+ - Mobile optimization via `@media (max-width: 767px)`
+
+2. **`github-markdown-light.css` and `github-markdown-dark.css` are incomplete**:
+ - NO mobile media queries at all
+ - Use hardcoded color values instead of CSS variables
+
+3. **`github-markdown-mobile.css` is a mystery**:
+ - Exists in the project
+ - Has better mobile optimizations (e.g., `height: auto` on images)
+ - NOT included in `package.json` files array
+ - NOT generated by `npm run make`
+
+---
+
+## Part 2: Mobile Style Issues - 5 Categories
+
+### Category 1: Table
+
+| Attribute | Details |
+|-----------|---------|
+| **Key Selectors** | `.markdown-body table`, `.markdown-body table th`, `.markdown-body table td` |
+| **File Locations** | github-markdown.css:333-341 (base), 1252-1259 (mobile) github-markdown-light.css:209-217 (base only) github-markdown-dark.css:209-217 (base only) |
+
+#### CSS Analysis
+
+```css
+/* Base styles - present in ALL files */
+.markdown-body table {
+ display: block; /* Block-level display */
+ width: max-content; /* Width determined by content */
+ max-width: 100%; /* Max width doesn't exceed container */
+ overflow: auto; /* Scroll when overflowing */
+}
+```
+
+**The Problem with `width: max-content`**:
+- Tables with many columns will be wider than mobile screens
+- `max-width: 100%` + `overflow: auto` means horizontal scrolling
+- This is intentional behavior, but the font size and padding make it worse on mobile
+
+#### Mobile Optimization (ONLY in github-markdown.css)
+
+```css
+@media (max-width: 767px) {
+ .markdown-body table {
+ font-size: 12px; /* Reduced from 14px/16px */
+ }
+
+ .markdown-body table th,
+ .markdown-body table td {
+ padding: 4px 8px; /* Reduced from 6px 13px */
+ }
+}
+```
+
+#### Reproduction Steps
+
+1. Open Chrome DevTools
+2. Toggle Device Toolbar (Ctrl+Shift+M)
+3. Select iPhone SE (375px width)
+4. View a table with 5+ columns
+
+#### Expected vs Actual
+
+| Expected | Actual (without mobile fix) |
+|----------|------------------------------|
+| Readable text size | Text too small to read |
+| Compact padding | Too much whitespace, less content visible |
+
+#### Fix Priority
+
+⭐⭐⭐ **High** - Tables are very common in documentation
+
+---
+
+### Category 2: Pre/Code Blocks
+
+| Attribute | Details |
+|-----------|---------|
+| **Key Selectors** | `.markdown-body pre`, `.markdown-body code`, `.markdown-body pre code` |
+| **File Locations** | github-markdown.css:482-490 (pre base), 827-835 (code base), 1262-1270 (mobile) github-markdown-light.css:358-375 (pre base), 703-711 (code base) github-markdown-dark.css:358-375 (pre base), 703-711 (code base) |
+
+#### CSS Analysis
+
+```css
+/* Base styles */
+.markdown-body pre {
+ word-wrap: normal; /* No word wrapping */
+ white-space: pre; /* Preserve whitespace, NO wrapping */
+ overflow: auto; /* Scroll when overflowing */
+ font-size: 12px; /* Base font size */
+ padding: 1rem; /* 16px padding */
+}
+
+.markdown-body code {
+ white-space: break-spaces; /* Inline code CAN wrap */
+ font-size: 85%; /* 85% of parent */
+}
+```
+
+**The Problem**:
+- `white-space: pre` on `
` means long code lines will NEVER wrap
+- Users must scroll horizontally to read long lines
+- On mobile, even moderately long lines require scrolling
+
+#### Mobile Optimization (ONLY in github-markdown.css)
+
+```css
+@media (max-width: 767px) {
+ .markdown-body pre {
+ font-size: 10px; /* Reduced from 12px */
+ padding: 12px; /* Reduced from 16px */
+ }
+
+ .markdown-body code,
+ .markdown-body tt {
+ font-size: 80%; /* Reduced from 85% */
+ }
+}
+```
+
+#### Reproduction Steps
+
+1. View a code block with a line > 40 characters
+2. Switch to mobile view (375px)
+3. Notice horizontal scrollbar appears
+
+#### Fix Priority
+
+⭐⭐⭐ **High** - Code blocks are ubiquitous in technical docs
+
+---
+
+### Category 3: Images/Media
+
+| Attribute | Details |
+|-----------|---------|
+| **Key Selectors** | `.markdown-body img` |
+| **File Locations** | github-markdown.css:239-243 (NO `height: auto`) github-markdown-mobile.css:239-244 (HAS `height: auto`) |
+
+#### CSS Analysis
+
+```css
+/* github-markdown.css, light.css, dark.css - THE PROBLEM */
+.markdown-body img {
+ max-width: 100%; /* Only constrains width */
+ box-sizing: content-box;
+}
+
+/* github-markdown-mobile.css - THE SOLUTION */
+.markdown-body img {
+ max-width: 100%;
+ height: auto; /* Maintains aspect ratio! */
+ box-sizing: content-box;
+}
+```
+
+**The Root Cause**:
+
+When HTML has:
+```html
+
+```
+
+Without `height: auto`:
+- `max-width: 100%` makes width = 375px (on iPhone SE)
+- But `height` attribute keeps height = 400px
+- **Result: Image is STRETCHED and DISTORTED**
+
+With `height: auto`:
+- `max-width: 100%` makes width = 375px
+- `height: auto` calculates height = 187.5px (maintaining 2:1 ratio)
+- **Result: Image displays correctly**
+
+#### Reproduction Steps
+
+```html
+
+```
+
+1. On desktop: Looks fine (800x400 or scaled by container)
+2. On mobile (375px):
+ - Without fix: 375px × 400px (stretched!)
+ - With fix: 375px × 187.5px (correct ratio)
+
+#### Evidence That Devs Know About This
+
+`github-markdown-mobile.css` line 239-244 explicitly includes `height: auto`. This means:
+1. Someone already identified and fixed this issue
+2. But the fix was only applied to the "mobile" variant
+3. The main `github-markdown.css` and all theme variants are still broken
+
+#### Fix Priority
+
+⭐⭐ **Medium** - Affects visual quality, not functionality
+
+---
+
+### Category 4: Blockquote
+
+| Attribute | Details |
+|-----------|---------|
+| **Key Selectors** | `.markdown-body blockquote` |
+| **File Locations** | github-markdown.css:445-450 (base), 1272-1274 (mobile) github-markdown-light.css:321-326 (base only) github-markdown-dark.css:321-326 (base only) |
+
+#### CSS Analysis
+
+```css
+/* Base styles */
+.markdown-body blockquote {
+ margin: 0;
+ padding: 0 1em; /* 16px left/right padding */
+ color: var(--fgColor-muted);
+ border-left: .25em solid var(--borderColor-default);
+}
+
+/* Mobile optimization - ONLY in github-markdown.css */
+@media (max-width: 767px) {
+ .markdown-body blockquote {
+ padding: 0 12px; /* Slightly reduced from 16px */
+ }
+}
+```
+
+**The Issue**:
+- Relatively minor - 16px vs 12px padding
+- The border-left indicator is the key visual element
+- On mobile, every pixel counts
+
+#### Reproduction Steps
+
+1. View a blockquote with multiple paragraphs
+2. Switch to mobile view
+3. Notice the available text width is slightly reduced
+
+#### Fix Priority
+
+⭐ **Low** - Minimal impact on readability
+
+---
+
+### Category 5: List (ul/ol)
+
+| Attribute | Details |
+|-----------|---------|
+| **Key Selectors** | `.markdown-body ul`, `.markdown-body ol`, `.markdown-body li` |
+| **File Locations** | github-markdown.css:452-480 (base), 1276-1279 (mobile) github-markdown-light.css:328-371 (base only) github-markdown-dark.css:328-371 (base only) |
+
+#### CSS Analysis
+
+```css
+/* Base styles */
+.markdown-body ul,
+.markdown-body ol {
+ padding-left: 2em; /* 32px indent for list markers */
+}
+
+/* Mobile optimization - ONLY in github-markdown.css */
+@media (max-width: 767px) {
+ .markdown-body ul,
+ .markdown-body ol {
+ padding-left: 1.5em; /* 24px indent - saves 8px per level */
+ }
+}
+```
+
+**The Issue**:
+- Nested lists (3+ levels) on mobile screens
+- Each level adds padding
+- With `2em` per level, 3 levels = 96px lost on a 375px screen
+- That's 25% of screen width gone before content starts
+
+#### Example
+
+```
+Level 1 item (32px indent)
+ Level 2 item (64px indent)
+ Level 3 item (96px indent)
+ Actual content here (Only 279px width left!)
+```
+
+With mobile fix (`1.5em = 24px` per level):
+- 3 levels = 72px indent
+- Saves 24px = ~6% more content width
+
+#### Reproduction Steps
+
+1. Create a list with 3+ levels of nesting
+2. View on mobile (375px)
+3. Notice how narrow the content area becomes
+
+#### Fix Priority
+
+⭐ **Low** - Only affects deeply nested lists
+
+---
+
+## Part 3: Bug Top 3 for Round 2
+
+### Bug #1: Light/Dark Themes Missing Mobile Media Queries (High Priority)
+
+| Attribute | Details |
+|-----------|---------|
+| **Root Cause Hypothesis** | The `generate-github-markdown-css` CLI tool does NOT include mobile optimization code when generating specific themes (light/dark). The `@media (max-width: 767px)` block in `github-markdown.css` was likely added MANUALLY after generation, and was never synchronized to the other theme variants. |
+| **Evidence** | Compare the three files: - github-markdown.css lines 1249-1295: Has mobile optimizations - github-markdown-light.css ends around line 1121: NO mobile code - github-markdown-dark.css ends around line 1121: NO mobile code
This pattern is consistent across ALL theme variants: dark-dimmed, dark-high-contrast, dark-colorblind, light-colorblind. |
+| **Impact Scope** | ALL users who use `github-markdown-light.css` or `github-markdown-dark.css` on mobile devices. Tables, code blocks, lists, and blockquotes all render with desktop-sized padding and fonts. |
+| **Affected Files (Estimated)** | All 6 theme files: 1. `github-markdown-light.css` 2. `github-markdown-dark.css` 3. `github-markdown-dark-dimmed.css` 4. `github-markdown-dark-high-contrast.css` 5. `github-markdown-dark-colorblind.css` 6. `github-markdown-light-colorblind.css` |
+| **Fix Approach** | Copy the `@media (max-width: 767px) { ... }` block from `github-markdown.css` lines 1249-1295 and append it to ALL theme files. |
+
+#### Mobile Block Content to Copy
+
+```css
+/* Mobile-specific optimizations */
+@media (max-width: 767px) {
+ /* Table optimizations */
+ .markdown-body table {
+ font-size: 14px;
+ }
+
+ .markdown-body table th,
+ .markdown-body table td {
+ padding: 4px 8px;
+ }
+
+ /* Code block optimizations */
+ .markdown-body pre {
+ font-size: 10px;
+ padding: 12px;
+ }
+
+ /* Image optimizations */
+ .markdown-body img {
+ height: auto;
+ }
+
+ /* Blockquote optimizations */
+ .markdown-body blockquote {
+ padding: 0 12px;
+ }
+
+ /* List optimizations */
+ .markdown-body ul,
+ .markdown-body ol {
+ padding-left: 1.5em;
+ }
+
+ /* Heading optimizations */
+ .markdown-body h1 {
+ font-size: 1.8em;
+ }
+
+ .markdown-body h2 {
+ font-size: 1.3em;
+ }
+
+ .markdown-body h3 {
+ font-size: 1.1em;
+ }
+}
+```
+
+---
+
+### Bug #2: Image Missing `height: auto` Causes Stretching (Medium Priority)
+
+| Attribute | Details |
+|-----------|---------|
+| **Root Cause Hypothesis** | `max-width: 100%` only constrains the image width to not exceed the container. However, when the HTML `` tag has `width` and `height` attributes (a common practice from Markdown renderers and for Cumulative Layout Shift optimization), the browser uses those attribute values as the intrinsic dimensions. `max-width` overrides the width, but the height remains at the attribute value, causing aspect ratio distortion. |
+| **CSS Box Model Explanation** | ```css /* Current problematic code */ .markdown-body img { max-width: 100%; box-sizing: content-box; } /* Scenario: */ /* On 375px screen: width=375px, height=400px → STRETCHED! */ /* The fix */ .markdown-body img { max-width: 100%; height: auto; /* Let height scale proportionally */ box-sizing: content-box; } ``` |
+| **Evidence** | `github-markdown-mobile.css` lines 239-244 explicitly includes `height: auto`. This proves the developers were aware of this issue and fixed it in one variant, but forgot to apply it to the main CSS files. |
+| **Impact Scope** | Any image rendered with `width` and `height` HTML attributes. This is increasingly common for: (1) CLS optimization (Core Web Vitals), (2) Markdown renderers that preserve image dimensions, (3) Raw HTML in Markdown. |
+| **Affected Files (Estimated)** | 3 main files: 1. `github-markdown.css` (lines 239-243) 2. `github-markdown-light.css` (lines 115-119) 3. `github-markdown-dark.css` (lines 115-119) |
+| **Fix Approach** | Add `height: auto;` to the `.markdown-body img` selector in all CSS files. |
+
+---
+
+### Bug #3: github-markdown-mobile.css Not Published (Consistency Issue)
+
+| Attribute | Details |
+|-----------|---------|
+| **Root Cause Hypothesis** | `github-markdown-mobile.css` exists in the project directory but is NOT included in `package.json`'s `files` array. Additionally, there's no `make:mobile` script to generate it. This suggests: (1) It was added for testing/development, (2) It was meant to be published but got forgotten, OR (3) It's a deprecated approach. |
+| **Evidence** | - File exists: `github-markdown-mobile.css` - package.json files array: ["github-markdown.css", "github-markdown-light.css", ...] (7 files, NO mobile) - npm run make has NO `make:mobile` command |
+| **Impact** | Users who `npm install github-markdown-css` cannot access this optimized version. They either don't know it exists, or must manually copy it from the repo. |
+| **Affected Files (Estimated)** | `package.json` (possibly) |
+| **Fix Approach** | Two options:
**Option A (Publish it)**: 1. Add `github-markdown-mobile.css` to `package.json` files array 2. Document its purpose in README
**Option B (Deprecate/remove it)**: 1. If it's just a dev/test file, delete it 2. Ensure all its optimizations are in the main files
Cell 1-4 with even longer content that should wrap
+
Cell 1-5
+
+
+
Cell 2-1
+
Cell 2-2
+
Cell 2-3 with longer content that might cause overflow
+
Cell 2-4
+
Cell 2-5
+
+
+
+
+
2. Code Block Test
+
function longFunctionNameWithManyParameters(param1, param2, param3, param4, param5, param6, param7, param8) {
+ // This is a long code line that should cause horizontal scrolling on mobile devices
+ console.log('This is a long line of code that will test the horizontal scrolling behavior in code blocks');
+ return param1 + param2 + param3 + param4 + param5 + param6 + param7 + param8;
+}
+
+// Another long line of code to test the scrolling behavior
+const veryLongVariableNameThatShouldCauseHorizontalScrolling = 'This is a very long string that will test the horizontal scrolling behavior in code blocks';
+
+
3. Image Test
+
+
+
4. Blockquote Test
+
+
This is a long blockquote that should test the layout behavior on mobile devices. It contains multiple sentences to ensure that the blockquote is properly formatted and does not overflow the container.
+
Another paragraph in the blockquote to test the spacing and layout.
+
+
+
5. List Test
+
+
First list item with normal length
+
Second list item with longer content that should wrap properly on mobile devices
+
Third list item with even longer content that will test the wrapping behavior in lists
+
Fourth list item with nested list:
+
+
Nested list item 1
+
Nested list item 2 with longer content
+
Nested list item 3 with even longer content
+
+
+
+
+
+
\ No newline at end of file
diff --git a/test-mobile-layout.html b/test-mobile-layout.html
new file mode 100644
index 0000000..6ba1779
--- /dev/null
+++ b/test-mobile-layout.html
@@ -0,0 +1,97 @@
+
+
+
+
+
+ Mobile Layout Test
+
+
+
+
+
+
Mobile Layout Test
+
+
1. Table Test
+
+
+
+
Header 1
+
Header 2
+
Header 3
+
Header 4
+
Header 5
+
+
+
+
+
Cell 1-1
+
Cell 1-2 with longer content
+
Cell 1-3
+
Cell 1-4 with even longer content that should wrap
+
Cell 1-5
+
+
+
Cell 2-1
+
Cell 2-2
+
Cell 2-3 with longer content that might cause overflow
+
Cell 2-4
+
Cell 2-5
+
+
+
+
+
2. Code Block Test
+
function longFunctionNameWithManyParameters(param1, param2, param3, param4, param5, param6, param7, param8) {
+ // This is a long code line that should cause horizontal scrolling on mobile devices
+ console.log('This is a long line of code that will test the horizontal scrolling behavior in code blocks');
+ return param1 + param2 + param3 + param4 + param5 + param6 + param7 + param8;
+}
+
+// Another long line of code to test the scrolling behavior
+const veryLongVariableNameThatShouldCauseHorizontalScrolling = 'This is a very long string that will test the horizontal scrolling behavior in code blocks';
+
+
3. Image Test
+
+
+
4. Blockquote Test
+
+
This is a long blockquote that should test the layout behavior on mobile devices. It contains multiple sentences to ensure that the blockquote is properly formatted and does not overflow the container.
+
Another paragraph in the blockquote to test the spacing and layout.
+
+
+
5. List Test
+
+
First list item with normal length
+
Second list item with longer content that should wrap properly on mobile devices
+
Third list item with even longer content that will test the wrapping behavior in lists
+```
+
+Without `height: auto`:
+- `max-width: 100%` makes width = 375px (on iPhone SE)
+- But `height` attribute keeps height = 400px
+- **Result: Image is STRETCHED and DISTORTED**
+
+With `height: auto`:
+- `max-width: 100%` makes width = 375px
+- `height: auto` calculates height = 187.5px (maintaining 2:1 ratio)
+- **Result: Image displays correctly**
+
+#### Reproduction Steps
+
+```html
+
*/ /* On 375px screen: width=375px, height=400px → STRETCHED! */ /* The fix */ .markdown-body img { max-width: 100%; height: auto; /* Let height scale proportionally */ box-sizing: content-box; } ``` |
+| **Evidence** | `github-markdown-mobile.css` lines 239-244 explicitly includes `height: auto`. This proves the developers were aware of this issue and fixed it in one variant, but forgot to apply it to the main CSS files. |
+| **Impact Scope** | Any image rendered with `width` and `height` HTML attributes. This is increasingly common for: (1) CLS optimization (Core Web Vitals), (2) Markdown renderers that preserve image dimensions, (3) Raw HTML in Markdown. |
+| **Affected Files (Estimated)** | 3 main files: