Upload 5 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+Machine-Learning-Systems.pdf filter=lfs diff=lfs merge=lfs -text

Machine-Learning-Systems.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:882ae6b12bda753a49919cf6e57e9d5b8efb42f708a2bd0268aac8621eb62cb6
+size 42590610

README.md

@@ -0,0 +1,162 @@
+---
+title: Machine Learning Systems
+emoji: 📚
+colorFrom: purple
+colorTo: blue
+sdk: static
+pinned: false
+---
+
+# Machine Learning Systems PDF Viewer
+
+A stunning, modern web application for viewing the Machine Learning Systems PDF. Built with vanilla JavaScript, HTML, and CSS, featuring a premium dark mode design with glassmorphism effects.
+
+## ✨ Features
+
+- 📄 **PDF.js Integration** - Smooth in-browser PDF viewing
+- 🎨 **Premium Design** - Dark mode with vibrant gradients and glassmorphism
+- 🔍 **Search Functionality** - Find text across all pages
+- ⌨️ **Keyboard Shortcuts** - Navigate efficiently with hotkeys
+- 📱 **Fully Responsive** - Works beautifully on all devices
+- 🎯 **Page Thumbnails** - Quick navigation with visual previews
+- 🔎 **Zoom Controls** - Multiple zoom options including fit-to-width
+- 🖼️ **Fullscreen Mode** - Distraction-free reading experience
+
+## 🚀 Deployment to Hugging Face Spaces
+
+### Step 1: Create a New Space
+
+1. Go to [Hugging Face](https://huggingface.co/) and sign in
+2. Click on your profile → **New Space**
+3. Choose:
+   - **Space name**: `ml-systems-pdf-viewer` (or your preferred name)
+   - **License**: Choose your preferred license
+   - **Space SDK**: Select **Static**
+   - **Visibility**: Public or Private
+
+### Step 2: Upload Files
+
+You can upload files either through the web interface or using Git:
+
+#### Option A: Web Interface
+1. In your Space, click **Files** → **Add file** → **Upload files**
+2. Upload these files:
+   - `index.html`
+   - `styles.css`
+   - `script.js`
+   - `Machine-Learning-Systems.pdf`
+   - `README.md` (this file)
+
+#### Option B: Git (Recommended)
+```bash
+# Clone your Space repository
+git clone https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
+cd YOUR_SPACE_NAME
+
+# Copy all files
+cp index.html styles.css script.js Machine-Learning-Systems.pdf README.md ./
+
+# Commit and push
+git add .
+git commit -m "Initial commit: PDF viewer application"
+git push
+```
+
+### Step 3: Configure Custom Domain
+
+1. Go to your Space settings
+2. Navigate to **Settings** → **Domains**
+3. Click **Add a domain**
+4. Follow the instructions to:
+   - Add your custom domain (e.g., `ml-systems.yourdomain.com`)
+   - Update your DNS records with the provided CNAME
+   - Wait for DNS propagation (can take up to 48 hours)
+
+**DNS Configuration Example:**
+```
+Type: CNAME
+Name: ml-systems (or your subdomain)
+Value: spaces.huggingface.co
+TTL: 3600
+```
+
+5. Once DNS is propagated, enable SSL certificate (automatic via Let's Encrypt)
+
+## 💻 Local Development
+
+To run this project locally:
+
+1. **Clone or download** this repository
+2. **Ensure all files are in the same directory**:
+   - `index.html`
+   - `styles.css`
+   - `script.js`
+   - `Machine-Learning-Systems.pdf`
+3. **Open `index.html`** in a modern web browser (Chrome, Firefox, Safari, or Edge)
+
+> **Note**: For the best experience, serve the files through a local web server rather than opening the HTML file directly. You can use:
+> - Python: `python -m http.server 8000`
+> - Node.js: `npx http-server`
+> - VS Code: Use the Live Server extension
+
+## ⌨️ Keyboard Shortcuts
+
+- `←` / `→` - Navigate between pages
+- `↑` / `↓` - Navigate between pages (alternative)
+- `+` / `-` - Zoom in/out
+- `Ctrl+F` - Open search
+- `F` - Toggle fullscreen
+- `Ctrl+Wheel` - Zoom with mouse wheel
+
+## 🎨 Design Features
+
+- **Glassmorphism UI** - Frosted glass effect with backdrop blur
+- **Vibrant Gradients** - Purple, blue, and cyan color scheme
+- **Smooth Animations** - Micro-interactions for better UX
+- **Responsive Layout** - Adapts to mobile, tablet, and desktop
+- **Dark Mode** - Eye-friendly dark theme optimized for reading
+
+## 🔧 Customization
+
+### Change Colors
+Edit the CSS custom properties in `styles.css`:
+```css
+:root {
+    --color-accent-primary: #a855f7;  /* Purple */
+    --color-accent-secondary: #3b82f6; /* Blue */
+    --color-accent-tertiary: #06b6d4;  /* Cyan */
+}
+```
+
+### Default Zoom Level
+Edit `script.js`:
+```javascript
+const state = {
+    scale: 1.5, // Change this value (1.0 = 100%)
+    // ...
+};
+```
+
+## 📦 Dependencies
+
+- [PDF.js](https://mozilla.github.io/pdf.js/) v3.11.174 (loaded via CDN)
+- [Google Fonts](https://fonts.google.com/) - Inter & Fira Code
+
+## 🌐 Browser Support
+
+- Chrome/Edge (latest)
+- Firefox (latest)
+- Safari (latest)
+- Mobile browsers (iOS Safari, Chrome Mobile)
+
+## 📝 License
+
+This PDF viewer application is provided as-is. The PDF content may have its own license.
+
+## 🤝 Contributing
+
+Feel free to fork this project and customize it for your needs!
+
+---
+
+Built with ❤️ for the Machine Learning community

index.html

@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description"
+        content="Machine Learning Systems - An interactive PDF viewer for exploring machine learning systems concepts, architectures, and best practices.">
+    <meta name="keywords" content="machine learning, ML systems, AI, deep learning, MLOps">
+    <meta name="author" content="Machine Learning Systems">
+
+    <title>Machine Learning Systems | Interactive PDF Viewer</title>
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap"
+        rel="stylesheet">
+
+    <!-- Styles -->
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- PDF.js -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
+</head>
+
+<body>
+    <!-- Header -->
+    <header class="header">
+        <div class="header-content">
+            <div class="logo-section">
+                <div class="logo-icon">
+                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2"
+                            stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                            stroke-linejoin="round" />
+                        <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                            stroke-linejoin="round" />
+                    </svg>
+                </div>
+                <div class="logo-text">
+                    <h1>Machine Learning Systems</h1>
+                    <p class="subtitle">Interactive PDF Viewer</p>
+                </div>
+            </div>
+
+            <div class="header-actions">
+                <button class="btn-icon" id="themeToggle" title="Toggle theme">
+                    <svg id="sunIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2" />
+                        <path
+                            d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                    </svg>
+                    <svg id="moonIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+                        style="display: none;">
+                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor" stroke-width="2"
+                            stroke-linecap="round" stroke-linejoin="round" />
+                    </svg>
+                </button>
+                <button class="btn-icon" id="searchBtn" title="Search (Ctrl+F)">
+                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
+                        <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                    </svg>
+                </button>
+                <button class="btn-icon" id="fullscreenBtn" title="Fullscreen">
+                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M8 3H5C3.89543 3 3 3.89543 3 5V8M21 8V5C21 3.89543 20.1046 3 19 3H16M16 21H19C20.1046 21 21 20.1046 21 19V16M3 16V19C3 20.1046 3.89543 21 5 21H8"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                    </svg>
+                </button>
+                <a href="Machine-Learning-Systems.pdf" download class="btn-primary">
+                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M21 15V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V15"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                        <path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                            stroke-linejoin="round" />
+                        <path d="M12 15V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                    </svg>
+                    Download PDF
+                </a>
+            </div>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="main-container">
+        <!-- Sidebar -->
+        <aside class="sidebar" id="sidebar">
+            <div class="sidebar-header">
+                <h2>Navigation</h2>
+                <button class="btn-icon" id="closeSidebarBtn" title="Close sidebar">
+                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                    </svg>
+                </button>
+            </div>
+
+            <div class="page-info">
+                <div class="info-item">
+                    <span class="info-label">Current Page</span>
+                    <span class="info-value" id="currentPageDisplay">1</span>
+                </div>
+                <div class="info-item">
+                    <span class="info-label">Total Pages</span>
+                    <span class="info-value" id="totalPagesDisplay">-</span>
+                </div>
+            </div>
+
+            <div class="page-navigation">
+                <label for="pageInput">Go to Page</label>
+                <div class="page-input-group">
+                    <input type="number" id="pageInput" min="1" placeholder="1">
+                    <button class="btn-secondary" id="goToPageBtn">Go</button>
+                </div>
+            </div>
+
+            <div class="thumbnails" id="thumbnails">
+                <p class="loading-text">Loading pages...</p>
+            </div>
+        </aside>
+
+        <!-- PDF Viewer -->
+        <div class="viewer-container">
+            <button class="sidebar-toggle" id="sidebarToggle" title="Toggle sidebar">
+                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M3 12H21M3 6H21M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                </svg>
+            </button>
+
+            <!-- Search Panel -->
+            <div class="search-panel" id="searchPanel">
+                <div class="search-input-group">
+                    <input type="text" id="searchInput" placeholder="Search in PDF...">
+                    <button class="btn-secondary" id="searchNextBtn">Next</button>
+                    <button class="btn-secondary" id="searchPrevBtn">Previous</button>
+                    <button class="btn-icon" id="closeSearchBtn">
+                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2"
+                                stroke-linecap="round" />
+                        </svg>
+                    </button>
+                </div>
+                <p class="search-results" id="searchResults"></p>
+            </div>
+
+            <!-- Controls -->
+            <div class="controls">
+                <div class="control-group">
+                    <button class="btn-icon" id="prevPageBtn" title="Previous page (←)">
+                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round" />
+                        </svg>
+                    </button>
+
+                    <span class="page-indicator">
+                        <span id="pageNum">1</span> / <span id="pageCount">-</span>
+                    </span>
+
+                    <button class="btn-icon" id="nextPageBtn" title="Next page (→)">
+                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round" />
+                        </svg>
+                    </button>
+                </div>
+
+                <div class="control-group">
+                    <button class="btn-icon" id="zoomOutBtn" title="Zoom out (-)">
+                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
+                            <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2"
+                                stroke-linecap="round" />
+                            <path d="M8 11H14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                        </svg>
+                    </button>
+
+                    <span class="zoom-level" id="zoomLevel">100%</span>
+
+                    <button class="btn-icon" id="zoomInBtn" title="Zoom in (+)">
+                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
+                            <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2"
+                                stroke-linecap="round" />
+                            <path d="M11 8V14M8 11H14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                        </svg>
+                    </button>
+
+                    <button class="btn-icon" id="fitWidthBtn" title="Fit to width">
+                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2" />
+                            <path d="M9 12H15M9 12L11 10M9 12L11 14M15 12L13 10M15 12L13 14" stroke="currentColor"
+                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Canvas Container -->
+            <div class="canvas-container" id="canvasContainer">
+                <div class="loading-overlay" id="loadingOverlay">
+                    <div class="spinner"></div>
+                    <p>Loading PDF...</p>
+                </div>
+                <canvas id="pdfCanvas"></canvas>
+            </div>
+        </div>
+    </main>
+
+    <!-- Scripts -->
+    <script src="script.js"></script>
+</body>
+
+</html>

script.js

@@ -0,0 +1,457 @@
+// PDF.js Configuration
+pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
+
+// Theme Management
+const themeToggle = document.getElementById('themeToggle');
+const sunIcon = document.getElementById('sunIcon');
+const moonIcon = document.getElementById('moonIcon');
+
+// Initialize theme from localStorage or default to dark
+const currentTheme = localStorage.getItem('theme') || 'dark';
+if (currentTheme === 'light') {
+    document.documentElement.setAttribute('data-theme', 'light');
+    sunIcon.style.display = 'none';
+    moonIcon.style.display = 'block';
+}
+
+// Toggle theme function
+function toggleTheme() {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+
+    document.documentElement.setAttribute('data-theme', newTheme);
+    localStorage.setItem('theme', newTheme);
+
+    // Toggle icons
+    if (newTheme === 'light') {
+        sunIcon.style.display = 'none';
+        moonIcon.style.display = 'block';
+    } else {
+        sunIcon.style.display = 'block';
+        moonIcon.style.display = 'none';
+    }
+}
+
+// State Management
+const state = {
+    pdfDoc: null,
+    pageNum: 1,
+    pageRendering: false,
+    pageNumPending: null,
+    scale: 1.5,
+    canvas: document.getElementById('pdfCanvas'),
+    ctx: null
+};
+
+// Initialize
+state.ctx = state.canvas.getContext('2d');
+
+// DOM Elements
+const elements = {
+    loadingOverlay: document.getElementById('loadingOverlay'),
+    pageNum: document.getElementById('pageNum'),
+    pageCount: document.getElementById('pageCount'),
+    currentPageDisplay: document.getElementById('currentPageDisplay'),
+    totalPagesDisplay: document.getElementById('totalPagesDisplay'),
+    zoomLevel: document.getElementById('zoomLevel'),
+    prevPageBtn: document.getElementById('prevPageBtn'),
+    nextPageBtn: document.getElementById('nextPageBtn'),
+    zoomInBtn: document.getElementById('zoomInBtn'),
+    zoomOutBtn: document.getElementById('zoomOutBtn'),
+    fitWidthBtn: document.getElementById('fitWidthBtn'),
+    pageInput: document.getElementById('pageInput'),
+    goToPageBtn: document.getElementById('goToPageBtn'),
+    sidebar: document.getElementById('sidebar'),
+    sidebarToggle: document.getElementById('sidebarToggle'),
+    closeSidebarBtn: document.getElementById('closeSidebarBtn'),
+    searchBtn: document.getElementById('searchBtn'),
+    searchPanel: document.getElementById('searchPanel'),
+    closeSearchBtn: document.getElementById('closeSearchBtn'),
+    fullscreenBtn: document.getElementById('fullscreenBtn'),
+    canvasContainer: document.getElementById('canvasContainer')
+};
+
+// Render Page
+function renderPage(num) {
+    state.pageRendering = true;
+
+    state.pdfDoc.getPage(num).then(page => {
+        const viewport = page.getViewport({ scale: state.scale });
+        state.canvas.height = viewport.height;
+        state.canvas.width = viewport.width;
+
+        const renderContext = {
+            canvasContext: state.ctx,
+            viewport: viewport
+        };
+
+        const renderTask = page.render(renderContext);
+
+        renderTask.promise.then(() => {
+            state.pageRendering = false;
+
+            if (state.pageNumPending !== null) {
+                renderPage(state.pageNumPending);
+                state.pageNumPending = null;
+            }
+
+            // Update UI
+            updatePageDisplay();
+
+            // Hide loading overlay on first render
+            if (num === 1) {
+                elements.loadingOverlay.classList.add('hidden');
+            }
+        });
+    });
+
+    // Update page display immediately
+    elements.pageNum.textContent = num;
+    elements.currentPageDisplay.textContent = num;
+}
+
+// Queue Page Render
+function queueRenderPage(num) {
+    if (state.pageRendering) {
+        state.pageNumPending = num;
+    } else {
+        renderPage(num);
+    }
+}
+
+// Update Page Display
+function updatePageDisplay() {
+    elements.zoomLevel.textContent = Math.round(state.scale * 100) + '%';
+    updateThumbnailSelection();
+}
+
+// Navigate to Previous Page
+function onPrevPage() {
+    if (state.pageNum <= 1) {
+        return;
+    }
+    state.pageNum--;
+    queueRenderPage(state.pageNum);
+}
+
+// Navigate to Next Page
+function onNextPage() {
+    if (state.pageNum >= state.pdfDoc.numPages) {
+        return;
+    }
+    state.pageNum++;
+    queueRenderPage(state.pageNum);
+}
+
+// Zoom In
+function zoomIn() {
+    if (state.scale < 3) {
+        state.scale += 0.25;
+        queueRenderPage(state.pageNum);
+    }
+}
+
+// Zoom Out
+function zoomOut() {
+    if (state.scale > 0.5) {
+        state.scale -= 0.25;
+        queueRenderPage(state.pageNum);
+    }
+}
+
+// Fit to Width
+function fitToWidth() {
+    const containerWidth = elements.canvasContainer.clientWidth - 40;
+    state.pdfDoc.getPage(state.pageNum).then(page => {
+        const viewport = page.getViewport({ scale: 1 });
+        state.scale = containerWidth / viewport.width;
+        queueRenderPage(state.pageNum);
+    });
+}
+
+// Go to Page
+function goToPage() {
+    const pageNumber = parseInt(elements.pageInput.value);
+    if (pageNumber >= 1 && pageNumber <= state.pdfDoc.numPages) {
+        state.pageNum = pageNumber;
+        queueRenderPage(state.pageNum);
+        elements.pageInput.value = '';
+    }
+}
+
+// Toggle Sidebar
+function toggleSidebar() {
+    elements.sidebar.classList.toggle('hidden');
+}
+
+// Toggle Search
+function toggleSearch() {
+    elements.searchPanel.classList.toggle('active');
+    if (elements.searchPanel.classList.contains('active')) {
+        document.getElementById('searchInput').focus();
+    }
+}
+
+// Toggle Fullscreen
+function toggleFullscreen() {
+    if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen();
+    } else {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        }
+    }
+}
+
+// Event Listeners
+themeToggle.addEventListener('click', toggleTheme);
+elements.prevPageBtn.addEventListener('click', onPrevPage);
+elements.nextPageBtn.addEventListener('click', onNextPage);
+elements.zoomInBtn.addEventListener('click', zoomIn);
+elements.zoomOutBtn.addEventListener('click', zoomOut);
+elements.fitWidthBtn.addEventListener('click', fitToWidth);
+elements.goToPageBtn.addEventListener('click', goToPage);
+elements.sidebarToggle.addEventListener('click', toggleSidebar);
+elements.closeSidebarBtn.addEventListener('click', toggleSidebar);
+elements.searchBtn.addEventListener('click', toggleSearch);
+elements.closeSearchBtn.addEventListener('click', toggleSearch);
+elements.fullscreenBtn.addEventListener('click', toggleFullscreen);
+
+// Enter key for page input
+elements.pageInput.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') {
+        goToPage();
+    }
+});
+
+// Keyboard Shortcuts
+document.addEventListener('keydown', (e) => {
+    // Arrow keys for navigation
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        onPrevPage();
+    } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        onNextPage();
+    }
+
+    // Zoom shortcuts
+    if (e.key === '+' || e.key === '=') {
+        e.preventDefault();
+        zoomIn();
+    } else if (e.key === '-') {
+        e.preventDefault();
+        zoomOut();
+    }
+
+    // Search shortcut
+    if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+        e.preventDefault();
+        toggleSearch();
+    }
+
+    // Fullscreen shortcut
+    if (e.key === 'f' && !e.ctrlKey && !e.metaKey) {
+        const activeElement = document.activeElement;
+        if (activeElement.tagName !== 'INPUT') {
+            toggleFullscreen();
+        }
+    }
+});
+
+// Search Functionality
+let searchMatches = [];
+let currentMatch = 0;
+
+document.getElementById('searchInput').addEventListener('input', async (e) => {
+    const query = e.target.value.toLowerCase();
+    const results = document.getElementById('searchResults');
+
+    if (query.length < 2) {
+        results.textContent = '';
+        searchMatches = [];
+        return;
+    }
+
+    searchMatches = [];
+
+    // Search through all pages
+    for (let i = 1; i <= state.pdfDoc.numPages; i++) {
+        const page = await state.pdfDoc.getPage(i);
+        const textContent = await page.getTextContent();
+        const text = textContent.items.map(item => item.str).join(' ').toLowerCase();
+
+        if (text.includes(query)) {
+            searchMatches.push(i);
+        }
+    }
+
+    if (searchMatches.length > 0) {
+        results.textContent = `Found ${searchMatches.length} matches`;
+        currentMatch = 0;
+    } else {
+        results.textContent = 'No matches found';
+    }
+});
+
+document.getElementById('searchNextBtn').addEventListener('click', () => {
+    if (searchMatches.length > 0) {
+        currentMatch = (currentMatch + 1) % searchMatches.length;
+        state.pageNum = searchMatches[currentMatch];
+        queueRenderPage(state.pageNum);
+        document.getElementById('searchResults').textContent =
+            `Match ${currentMatch + 1} of ${searchMatches.length} (Page ${searchMatches[currentMatch]})`;
+    }
+});
+
+document.getElementById('searchPrevBtn').addEventListener('click', () => {
+    if (searchMatches.length > 0) {
+        currentMatch = (currentMatch - 1 + searchMatches.length) % searchMatches.length;
+        state.pageNum = searchMatches[currentMatch];
+        queueRenderPage(state.pageNum);
+        document.getElementById('searchResults').textContent =
+            `Match ${currentMatch + 1} of ${searchMatches.length} (Page ${searchMatches[currentMatch]})`;
+    }
+});
+
+// Mouse Wheel Zoom
+elements.canvasContainer.addEventListener('wheel', (e) => {
+    if (e.ctrlKey) {
+        e.preventDefault();
+        if (e.deltaY < 0) {
+            zoomIn();
+        } else {
+            zoomOut();
+        }
+    }
+});
+
+// Load PDF
+const url = 'Machine-Learning-Systems.pdf';
+
+pdfjsLib.getDocument(url).promise.then(pdfDoc => {
+    state.pdfDoc = pdfDoc;
+    elements.pageCount.textContent = pdfDoc.numPages;
+    elements.totalPagesDisplay.textContent = pdfDoc.numPages;
+    elements.pageInput.max = pdfDoc.numPages;
+
+    // Render the first page
+    renderPage(state.pageNum);
+
+    // Generate thumbnails
+    generateThumbnails();
+}).catch(error => {
+    console.error('Error loading PDF:', error);
+    elements.loadingOverlay.innerHTML = `
+        <div style="text-align: center;">
+            <h2 style="color: var(--color-accent-primary); margin-bottom: 1rem;">Error Loading PDF</h2>
+            <p style="color: var(--color-text-secondary);">Please make sure the PDF file is in the same directory as this HTML file.</p>
+            <p style="color: var(--color-text-muted); margin-top: 1rem; font-size: 0.875rem;">Looking for: ${url}</p>
+        </div>
+    `;
+});
+
+// Generate Thumbnails
+let currentThumbnailCount = 20;
+const thumbnailsPerLoad = 20;
+
+async function generateThumbnails(startFrom = 1, count = 20) {
+    const thumbnailsContainer = document.getElementById('thumbnails');
+
+    if (startFrom === 1) {
+        thumbnailsContainer.innerHTML = '<h3 style="font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--color-text-secondary);">Pages</h3>';
+    }
+
+    const endAt = Math.min(startFrom + count - 1, state.pdfDoc.numPages);
+
+    for (let i = startFrom; i <= endAt; i++) {
+        const page = await state.pdfDoc.getPage(i);
+        const viewport = page.getViewport({ scale: 0.2 });
+
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        canvas.height = viewport.height;
+        canvas.width = viewport.width;
+
+        await page.render({
+            canvasContext: ctx,
+            viewport: viewport
+        }).promise;
+
+        const thumbnailDiv = document.createElement('div');
+        thumbnailDiv.className = 'thumbnail-item';
+        thumbnailDiv.dataset.page = i;
+
+        // Create wrapper and label
+        const wrapper = document.createElement('div');
+        wrapper.className = 'thumbnail-canvas-wrapper';
+        wrapper.appendChild(canvas); // Append the actual canvas object with drawing
+
+        const label = document.createElement('div');
+        label.className = 'thumbnail-label';
+        label.textContent = `Page ${i}`;
+
+        thumbnailDiv.appendChild(wrapper);
+        thumbnailDiv.appendChild(label);
+
+        thumbnailDiv.addEventListener('click', () => {
+            state.pageNum = i;
+            queueRenderPage(i);
+            // Highlight selected thumbnail
+            updateThumbnailSelection(); // Modified this line
+        });
+
+        thumbnailsContainer.appendChild(thumbnailDiv);
+    }
+
+    // Remove existing "Show More" button if present
+    const existingShowMore = thumbnailsContainer.querySelector('.show-more-btn');
+    if (existingShowMore) {
+        existingShowMore.remove();
+    }
+
+    // Add "Show More" button if there are more pages
+    if (endAt < state.pdfDoc.numPages) {
+        const showMoreDiv = document.createElement('div');
+        showMoreDiv.className = 'show-more-btn';
+        showMoreDiv.innerHTML = `
+            <button onclick="loadMoreThumbnails()">
+                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12 5V19M5 12L12 19L19 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                Show More (${state.pdfDoc.numPages - endAt} remaining)
+            </button>
+        `;
+        thumbnailsContainer.appendChild(showMoreDiv);
+    }
+
+    // Highlight the current page
+    updateThumbnailSelection();
+}
+
+function loadMoreThumbnails() {
+    const nextStart = currentThumbnailCount + 1;
+    currentThumbnailCount += thumbnailsPerLoad;
+    generateThumbnails(nextStart, thumbnailsPerLoad);
+}
+
+function updateThumbnailSelection() {
+    document.querySelectorAll('.thumbnail-item').forEach(t => {
+        if (parseInt(t.dataset.page) === state.pageNum) {
+            t.classList.add('active');
+            // Scroll to the active thumbnail if it's not in view
+            t.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        } else {
+            t.classList.remove('active');
+        }
+    });
+}
+
+// Responsive adjustments
+window.addEventListener('resize', () => {
+    if (window.innerWidth <= 768 && !elements.sidebar.classList.contains('hidden')) {
+        elements.sidebar.classList.add('hidden');
+    }
+});
+
+console.log('PDF Viewer initialized successfully!');

styles.css

@@ -0,0 +1,812 @@
+/* ==========================================
+   DESIGN SYSTEM - CSS CUSTOM PROPERTIES
+   ========================================== */
+
+:root {
+    /* Dark Mode Colors (Default) */
+    --color-bg-primary: #0a0e1a;
+    --color-bg-secondary: #111827;
+    --color-bg-tertiary: #1a2332;
+
+    --color-accent-primary: #3b82f6;
+    --color-accent-secondary: #2563eb;
+    --color-accent-tertiary: #1d4ed8;
+
+    --color-text-primary: #f9fafb;
+    --color-text-secondary: #d1d5db;
+    --color-text-muted: #9ca3af;
+
+    --color-border: rgba(255, 255, 255, 0.1);
+    --color-border-hover: rgba(255, 255, 255, 0.2);
+
+    /* Glassmorphism */
+    --glass-bg: rgba(17, 24, 39, 0.7);
+    --glass-border: rgba(255, 255, 255, 0.1);
+    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+
+    /* Spacing */
+    --spacing-xs: 0.25rem;
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+    --spacing-xl: 2rem;
+    --spacing-2xl: 3rem;
+
+    /* Typography */
+    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --font-mono: 'Fira Code', 'Courier New', monospace;
+
+    /* Transitions */
+    --transition-fast: 0.15s ease;
+    --transition-normal: 0.3s ease;
+    --transition-slow: 0.5s ease;
+
+    /* Border Radius */
+    --radius-sm: 0.375rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 1rem;
+    --radius-xl: 1.5rem;
+
+    /* Shadows */
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+}
+
+/* Light Mode Colors */
+[data-theme="light"] {
+    --color-bg-primary: #ffffff;
+    --color-bg-secondary: #f9fafb;
+    --color-bg-tertiary: #f3f4f6;
+
+    --color-accent-primary: #3b82f6;
+    --color-accent-secondary: #2563eb;
+    --color-accent-tertiary: #1d4ed8;
+
+    --color-text-primary: #111827;
+    --color-text-secondary: #4b5563;
+    --color-text-muted: #6b7280;
+
+    --color-border: rgba(0, 0, 0, 0.1);
+    --color-border-hover: rgba(0, 0, 0, 0.2);
+
+    --glass-bg: rgba(255, 255, 255, 0.7);
+    --glass-border: rgba(0, 0, 0, 0.1);
+    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
+
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+}
+
+/* ==========================================
+   RESET & BASE STYLES
+   ========================================== */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 16px;
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: var(--font-primary);
+    background-color: var(--color-bg-primary);
+    color: var(--color-text-primary);
+    line-height: 1.6;
+    overflow-x: hidden;
+    min-height: 100vh;
+}
+
+/* ==========================================
+   BACKGROUND EFFECTS
+   ========================================== */
+
+/* Background effects removed for clean theme switching */
+
+/* ==========================================
+   HEADER
+   ========================================== */
+
+.header {
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px) saturate(180%);
+    border-bottom: 1px solid var(--glass-border);
+    box-shadow: var(--glass-shadow);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    animation: slideDown 0.5s ease;
+}
+
+@keyframes slideDown {
+    from {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.header-content {
+    max-width: 1800px;
+    margin: 0 auto;
+    padding: var(--spacing-lg) var(--spacing-xl);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-lg);
+}
+
+.logo-section {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+}
+
+.logo-icon {
+    width: 48px;
+    height: 48px;
+    background: var(--color-accent-primary);
+    border-radius: var(--radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    box-shadow: var(--shadow-lg);
+    transition: all var(--transition-normal);
+}
+
+.logo-icon svg {
+    width: 28px;
+    height: 28px;
+}
+
+.logo-icon:hover {
+    transform: scale(1.05);
+}
+
+@keyframes pulse {
+
+    0%,
+    100% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.7);
+    }
+
+    50% {
+        transform: scale(1.05);
+        box-shadow: 0 0 0 10px rgba(168, 85, 247, 0);
+    }
+}
+
+.logo-text h1 {
+    font-size: 1.5rem;
+    font-weight: 800;
+    color: var(--color-accent-primary);
+    line-height: 1.2;
+}
+
+.subtitle {
+    font-size: 0.875rem;
+    color: var(--color-text-muted);
+    font-weight: 400;
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+}
+
+/* ==========================================
+   BUTTONS
+   ========================================== */
+
+.btn-primary {
+    background: var(--color-accent-primary);
+    color: white;
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: var(--radius-md);
+    font-weight: 600;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: all var(--transition-normal);
+    box-shadow: var(--shadow-md);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    text-decoration: none;
+    font-family: var(--font-primary);
+}
+
+.btn-primary:hover {
+    background: var(--color-accent-secondary);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-xl);
+}
+
+.btn-primary:active {
+    transform: translateY(0);
+}
+
+.btn-primary svg {
+    width: 18px;
+    height: 18px;
+}
+
+.btn-secondary {
+    background: var(--color-bg-tertiary);
+    color: var(--color-text-primary);
+    border: 1px solid var(--color-border);
+    padding: 0.5rem 1rem;
+    border-radius: var(--radius-md);
+    font-weight: 500;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    font-family: var(--font-primary);
+}
+
+.btn-secondary:hover {
+    background: var(--color-bg-secondary);
+    border-color: var(--color-border-hover);
+}
+
+.btn-icon {
+    background: transparent;
+    color: var(--color-text-secondary);
+    border: 1px solid var(--color-border);
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-icon:hover {
+    background: var(--color-bg-tertiary);
+    border-color: var(--color-border-hover);
+    color: var(--color-text-primary);
+    transform: scale(1.05);
+}
+
+.btn-icon svg {
+    width: 20px;
+    height: 20px;
+}
+
+/* ==========================================
+   MAIN CONTAINER
+   ========================================== */
+
+.main-container {
+    display: flex;
+    height: calc(100vh - 88px);
+    max-width: 1800px;
+    margin: 0 auto;
+    gap: var(--spacing-lg);
+    padding: var(--spacing-lg);
+}
+
+/* ==========================================
+   SIDEBAR
+   ========================================== */
+
+.sidebar {
+    width: 320px;
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px) saturate(180%);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-lg);
+    overflow-y: auto;
+    box-shadow: var(--glass-shadow);
+    animation: slideInLeft 0.5s ease;
+    transition: transform var(--transition-normal);
+}
+
+@keyframes slideInLeft {
+    from {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+.sidebar.hidden {
+    transform: translateX(-100%);
+    position: absolute;
+    left: 0;
+    height: calc(100vh - 120px);
+}
+
+.sidebar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--spacing-lg);
+}
+
+.sidebar-header h2 {
+    font-size: 1.25rem;
+    font-weight: 700;
+}
+
+.page-info {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacing-md);
+    margin-bottom: var(--spacing-lg);
+}
+
+.info-item {
+    background: var(--color-bg-tertiary);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-md);
+    text-align: center;
+}
+
+.info-label {
+    display: block;
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+    margin-bottom: var(--spacing-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.info-value {
+    display: block;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--color-accent-primary);
+}
+
+.page-navigation {
+    margin-bottom: var(--spacing-lg);
+}
+
+.page-navigation label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin-bottom: var(--spacing-sm);
+    color: var(--color-text-secondary);
+}
+
+.page-input-group {
+    display: flex;
+    gap: var(--spacing-sm);
+}
+
+.page-input-group input {
+    flex: 1;
+    background: var(--color-bg-tertiary);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    padding: 0.5rem;
+    color: var(--color-text-primary);
+    font-size: 0.875rem;
+    font-family: var(--font-primary);
+}
+
+.page-input-group input:focus {
+    outline: none;
+    border-color: var(--color-accent-primary);
+}
+
+.thumbnails {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.thumbnail-item {
+    cursor: pointer;
+    padding: var(--spacing-sm);
+    border: 2px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-bg-tertiary);
+    transition: all var(--transition-fast);
+    text-align: center;
+}
+
+.thumbnail-item:hover {
+    border-color: var(--color-accent-primary);
+    transform: scale(1.02);
+    box-shadow: var(--shadow-md);
+}
+
+.thumbnail-item.active {
+    border-color: var(--color-accent-primary);
+    background: var(--color-accent-primary);
+    background: linear-gradient(to bottom, var(--color-accent-primary) 0%, var(--color-accent-primary) 4px, var(--color-bg-tertiary) 4px);
+}
+
+.thumbnail-canvas-wrapper {
+    margin-bottom: var(--spacing-xs);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    background: white;
+}
+
+.thumbnail-canvas-wrapper canvas {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+.thumbnail-label {
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+    font-weight: 500;
+}
+
+.thumbnail-item.active .thumbnail-label {
+    color: var(--color-accent-primary);
+    font-weight: 600;
+}
+
+.show-more-btn {
+    text-align: center;
+    padding: var(--spacing-md) 0;
+}
+
+.show-more-btn button {
+    background: var(--color-bg-tertiary);
+    border: 1px solid var(--color-border);
+    color: var(--color-text-secondary);
+    padding: var(--spacing-sm) var(--spacing-md);
+    border-radius: var(--radius-md);
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    margin: 0 auto;
+    font-family: var(--font-primary);
+}
+
+.show-more-btn button:hover {
+    background: var(--color-accent-primary);
+    color: white;
+    border-color: var(--color-accent-primary);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.show-more-btn button svg {
+    width: 16px;
+    height: 16px;
+}
+
+.loading-text {
+    color: var(--color-text-muted);
+    font-size: 0.875rem;
+    text-align: center;
+    padding: var(--spacing-lg);
+}
+
+/* ==========================================
+   VIEWER CONTAINER
+   ========================================== */
+
+.viewer-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px) saturate(180%);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    box-shadow: var(--glass-shadow);
+    position: relative;
+    animation: fadeIn 0.5s ease;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.sidebar-toggle {
+    position: absolute;
+    top: var(--spacing-md);
+    left: var(--spacing-md);
+    z-index: 10;
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px);
+    color: var(--color-text-primary);
+    border: 1px solid var(--glass-border);
+    width: 44px;
+    height: 44px;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: var(--shadow-md);
+}
+
+.sidebar-toggle:hover {
+    background: var(--color-bg-tertiary);
+    transform: scale(1.05);
+}
+
+.sidebar-toggle svg {
+    width: 22px;
+    height: 22px;
+}
+
+/* ==========================================
+   SEARCH PANEL
+   ========================================== */
+
+.search-panel {
+    background: var(--color-bg-secondary);
+    border-bottom: 1px solid var(--color-border);
+    padding: var(--spacing-md);
+    display: none;
+    animation: slideDown 0.3s ease;
+}
+
+.search-panel.active {
+    display: block;
+}
+
+.search-input-group {
+    display: flex;
+    gap: var(--spacing-sm);
+    align-items: center;
+    margin-bottom: var(--spacing-sm);
+}
+
+.search-input-group input {
+    flex: 1;
+    background: var(--color-bg-tertiary);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    padding: 0.5rem 1rem;
+    color: var(--color-text-primary);
+    font-size: 0.875rem;
+    font-family: var(--font-primary);
+}
+
+.search-input-group input:focus {
+    outline: none;
+    border-color: var(--color-accent-primary);
+    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
+}
+
+.search-results {
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+    text-align: center;
+}
+
+/* ==========================================
+   CONTROLS
+   ========================================== */
+
+.controls {
+    background: var(--color-bg-secondary);
+    border-bottom: 1px solid var(--color-border);
+    padding: var(--spacing-md);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-xl);
+}
+
+.control-group {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+}
+
+.page-indicator,
+.zoom-level {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--color-text-secondary);
+    min-width: 80px;
+    text-align: center;
+    font-family: var(--font-mono);
+}
+
+/* ==========================================
+   CANVAS CONTAINER
+   ========================================== */
+
+.canvas-container {
+    flex: 1;
+    overflow: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-lg);
+    position: relative;
+    background: var(--color-bg-primary);
+}
+
+.canvas-container::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+}
+
+.canvas-container::-webkit-scrollbar-track {
+    background: var(--color-bg-secondary);
+}
+
+.canvas-container::-webkit-scrollbar-thumb {
+    background: var(--color-bg-tertiary);
+    border-radius: var(--radius-sm);
+    border: 2px solid var(--color-bg-secondary);
+}
+
+.canvas-container::-webkit-scrollbar-thumb:hover {
+    background: var(--color-accent-primary);
+}
+
+#pdfCanvas {
+    box-shadow: var(--shadow-xl);
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--radius-sm);
+}
+
+/* ==========================================
+   LOADING OVERLAY
+   ========================================== */
+
+.loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--color-bg-primary);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-lg);
+    z-index: 50;
+}
+
+.loading-overlay.hidden {
+    display: none;
+}
+
+.spinner {
+    width: 60px;
+    height: 60px;
+    border: 4px solid var(--color-border);
+    border-top-color: var(--color-accent-primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.loading-overlay p {
+    color: var(--color-text-secondary);
+    font-size: 1rem;
+    font-weight: 500;
+}
+
+/* ==========================================
+   RESPONSIVE DESIGN
+   ========================================== */
+
+@media (max-width: 1024px) {
+    .header-content {
+        padding: var(--spacing-md);
+    }
+
+    .logo-text h1 {
+        font-size: 1.25rem;
+    }
+
+    .main-container {
+        padding: var(--spacing-md);
+        gap: var(--spacing-md);
+    }
+
+    .sidebar {
+        width: 280px;
+    }
+}
+
+@media (max-width: 768px) {
+    .header-content {
+        flex-direction: column;
+        gap: var(--spacing-md);
+    }
+
+    .header-actions {
+        width: 100%;
+        justify-content: space-between;
+    }
+
+    .btn-primary span {
+        display: none;
+    }
+
+    .main-container {
+        flex-direction: column;
+        height: auto;
+    }
+
+    .sidebar {
+        width: 100%;
+        max-height: 300px;
+    }
+
+    .sidebar.hidden {
+        display: none;
+    }
+
+    .controls {
+        flex-direction: column;
+        gap: var(--spacing-md);
+    }
+
+    .canvas-container {
+        min-height: 500px;
+    }
+}
+
+@media (max-width: 480px) {
+    .logo-text h1 {
+        font-size: 1rem;
+    }
+
+    .subtitle {
+        font-size: 0.75rem;
+    }
+
+    .btn-icon {
+        width: 36px;
+        height: 36px;
+    }
+
+    .control-group {
+        gap: var(--spacing-sm);
+    }
+}