Build a website where content exists as physical objects on an interactive tabletop:

**Metaphor**: Digital workspace where blog posts are magazines, resources are file folders, and art are framed pieces on a gallery wall.

**Interactions**:
1. Pan/zoom across infinite table surface
2. Hover objects for preview (gentle lift + shadow)
3. Drag to rearrange with slight physics
4. Click to "pick up" object and open in magazine/comic view
5. Magazine view: Comic panel layout with page navigation
6. Return to tabletop closes magazine back to its position

**Content types**:
- Blog posts → Magazines (cover, spine, pages)
- Resources → Filing cabinet with categorized cards
- Art projects → Gallery wall with frames
- Project demos → Device mockups

**Key features**:
- Multiple table views (chronological, categorical, project groups)
- Search via "magnifying glass" tool
- Personal annotations on objects (sticky notes, doodles)
- Day/night mode affecting lighting
- Mobile/touch optimized with gesture support

**Tech requirements**:
- Prioritize accessibility (keyboard nav, screen reader fallback)
- Offline reading capability for opened magazines
- Fast initial load (lazy-load objects as they enter viewport)
- CMS integration for easy content updates

**Success metrics**:
- Users naturally "play" with the interface
- Content discovery feels organic, not forced
- Emotional connection through tactile interaction
- Low cognitive load despite rich visual environment

README.md

@@ -1,10 +1,13 @@
 ---
-title: Tabletop Gallery Explorer
-emoji: 🌍
-colorFrom: purple
-colorTo: blue
+title: Tabletop Gallery Explorer 🎨
+colorFrom: red
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/magazine-viewer.js

@@ -0,0 +1,443 @@
+class MagazineViewer extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.currentPage = 0;
+        this.pages = [];
+    }
+
+    connectedCallback() {
+        this.pages = JSON.parse(this.getAttribute('pages') || '[]');
+        this.title = this.getAttribute('title') || 'Magazine';
+        this.color = this.getAttribute('color') || 'blue';
+        
+        this.render();
+        this.setupNavigation();
+        this.setupKeyboardNav();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    height: 100%;
+                    perspective: 1200px;
+                }
+                
+                .magazine-viewer {
+                    width: 100%;
+                    height: 100%;
+                    position: relative;
+                    transform-style: preserve-3d;
+                }
+                
+                .page-container {
+                    width: 100%;
+                    max-width: 800px;
+                    height: 100%;
+                    margin: 0 auto;
+                    position: relative;
+                    transform-style: preserve-3d;
+                    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+                }
+                
+                .page {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    background: white;
+                    border-radius: 8px;
+                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+                    backface-visibility: hidden;
+                    padding: 40px;
+                    display: flex;
+                    flex-direction: column;
+                    overflow: hidden;
+                }
+                
+                .page-content {
+                    flex: 1;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    text-align: center;
+                    position: relative;
+                }
+                
+                .page-header {
+                    position: absolute;
+                    top: 20px;
+                    left: 20px;
+                    right: 20px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    font-size: 12px;
+                    color: #6b7280;
+                }
+                
+                .page-footer {
+                    position: absolute;
+                    bottom: 20px;
+                    left: 20px;
+                    right: 20px;
+                    text-align: center;
+                    font-size: 12px;
+                    color: #6b7280;
+                }
+                
+                .cover {
+                    background: linear-gradient(135deg, ${this.getGradientColors(this.color)[0]} 0%, ${this.getGradientColors(this.color)[1]} 100%);
+                    color: white;
+                }
+                
+                .cover h1 {
+                    font-size: 3rem;
+                    margin-bottom: 1rem;
+                    font-weight: bold;
+                }
+                
+                .cover .subtitle {
+                    font-size: 1.5rem;
+                    opacity: 0.9;
+                }
+                
+                .navigation {
+                    position: absolute;
+                    bottom: -60px;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    display: flex;
+                    gap: 16px;
+                    background: rgba(255, 255, 255, 0.9);
+                    backdrop-filter: blur(10px);
+                    padding: 12px 24px;
+                    border-radius: 30px;
+                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+                }
+                
+                .nav-btn {
+                    padding: 8px 16px;
+                    background: ${this.getColorValue(this.color)};
+                    color: white;
+                    border: none;
+                    border-radius: 20px;
+                    cursor: pointer;
+                    transition: all 0.3s ease;
+                    font-size: 14px;
+                    display: flex;
+                    align-items: center;
+                    gap: 4px;
+                }
+                
+                .nav-btn:hover:not(:disabled) {
+                    transform: translateY(-2px);
+                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+                }
+                
+                .nav-btn:disabled {
+                    opacity: 0.5;
+                    cursor: not-allowed;
+                }
+                
+                .page-indicator {
+                    display: flex;
+                    align-items: center;
+                    padding: 0 16px;
+                    font-size: 14px;
+                    color: #374151;
+                }
+                
+                .ripple {
+                    position: absolute;
+                    border-radius: 50%;
+                    background: rgba(255, 255, 255, 0.6);
+                    transform: scale(0);
+                    animation: ripple 0.6s linear;
+                }
+                
+                @keyframes ripple {
+                    to {
+                        transform: scale(4);
+                        opacity: 0;
+                    }
+                }
+                
+                .content-animation {
+                    animation: fadeInUp 0.8s ease-out;
+                }
+                
+                @keyframes fadeInUp {
+                    from {
+                        opacity: 0;
+                        transform: translateY(30px);
+                    }
+                    to {
+                        opacity: 1;
+                        transform: translateY(0);
+                    }
+                }
+                
+                .page-number {
+                    position: absolute;
+                    bottom: 20px;
+                    right: 20px;
+                    font-size: 12px;
+                    color: #6b7280;
+                }
+                
+                /* Comic panel styles */
+                .comic-panel {
+                    background: #f3f4f6;
+                    border: 3px solid #1f293b;
+                    border-radius: 8px;
+                    padding: 20px;
+                    margin: 10px;
+                    position: relative;
+                }
+                
+                .comic-panel::before {
+                    content: '';
+                    position: absolute;
+                    top: -3px;
+                    left: -3px;
+                    right: -3px;
+                    bottom: -3px;
+                    background: #1f293b;
+                    border-radius: 10px;
+                    z-index: -1;
+                }
+            </style>
+            
+            <div class="magazine-viewer">
+                <div class="page-container" id="pageContainer">
+                    ${this.renderPages()}
+                </div>
+                
+                <div class="navigation">
+                    <button class="nav-btn" id="prevBtn">
+                        <i data-feather="chevron-left"></i>
+                        Previous
+                    </button>
+                    
+                    <div class="page-indicator">
+                        <span id="currentPage">${this.currentPage + 1}</span>
+                        <span> / </span>
+                        <span id="totalPages">${this.pages.length}</span>
+                    </div>
+                    
+                    <button class="nav-btn" id="nextBtn">
+                        Next
+                        <i data-feather="chevron-right"></i>
+                    </button>
+                </div>
+            </div>
+        `;
+        
+        // Replace feather icons
+        setTimeout(() => {
+            if (window.feather) {
+                feather.replace({ 
+                    'stroke-width': 2,
+                    width: 16,
+                    height: 16
+                });
+            }
+        }, 0);
+    }
+    
+    renderPages() {
+        return this.pages.map((page, index) => {
+            const isActive = index === this.currentPage;
+            const transform = this.calculatePageTransform(index);
+            
+            return `
+                <div class="page ${page.type}" 
+                     style="transform: ${transform}; ${isActive ? 'z-index: 10;' : ''}">
+                    
+                    <div class="page-header">
+                        <span>${this.title}</span>
+                        <span>${new Date().toLocaleDateString()}</span>
+                    </div>
+                    
+                    <div class="page-content">
+                        ${this.renderPageContent(page, index)}
+                    </div>
+                    
+                    <div class="page-footer">
+                        <span>© 2024 Tabletop Gallery</span>
+                    </div>
+                    
+                    ${index > 0 ? `<div class="page-number">${index}</div>` : ''}
+                </div>
+            `;
+        }).join('');
+    }
+    
+    calculatePageTransform(index) {
+        const diff = index - this.currentPage;
+        const baseTransform = 'rotateY(0deg)';
+        
+        if (diff === 0) {
+            return baseTransform;
+        } else if (diff < 0) {
+            return `translateX(${diff * 50}px) rotateY(-15deg) translateZ(${-Math.abs(diff) * 10}px)`;
+        } else {
+            return `translateX(${diff * 50}px) rotateY(15deg) translateZ(${-Math.abs(diff) * 10}px)`;
+        }
+    }
+    
+    renderPageContent(page, index) {
+        switch(page.type) {
+            case 'cover':
+                return `
+                    <div class="content-animation">
+                        <h1>${this.title}</h1>
+                        <div class="subtitle">${page.content}</div>
+                    </div>
+                `;
+                
+            case 'back':
+                return `
+                    <div class="content-animation">
+                        <h2>${page.content}</h2>
+                        <div style="margin-top: 2rem; font-size: 1.1rem; opacity: 0.8;">
+                            The End
+                        </div>
+                    </div>
+                `;
+                
+            default:
+                return `
+                    <div class="content-animation comic-panel">
+                        <h3 style="margin-bottom: 1rem;">${page.content}</h3>
+                        <p style="font-size: 1rem; line-height: 1.6; opacity: 0.9;">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                            Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        </p>
+                    </div>
+                `;
+        }
+    }
+    
+    setupNavigation() {
+        const prevBtn = this.shadowRoot.getElementById('prevBtn');
+        const nextBtn = this.shadowRoot.getElementById('nextBtn');
+        
+        prevBtn.addEventListener('click', () => this.previousPage());
+        nextBtn.addEventListener('click', () => this.nextPage());
+        
+        this.updateNavigationButtons();
+    }
+    
+    setupKeyboardNav() {
+        this.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowLeft') {
+                this.previousPage();
+            } else if (e.key === 'ArrowRight') {
+                this.nextPage();
+            }
+        });
+        
+        this.setAttribute('tabindex', '0');
+        this.focus();
+    }
+    
+    previousPage() {
+        if (this.currentPage > 0) {
+            this.currentPage--;
+            this.updateDisplay();
+            this.addRippleEffect('left');
+        }
+    }
+    
+    nextPage() {
+        if (this.currentPage < this.pages.length - 1) {
+            this.currentPage++;
+            this.updateDisplay();
+            this.addRippleEffect('right');
+        }
+    }
+    
+    updateDisplay() {
+        const pageContainer = this.shadowRoot.getElementById('pageContainer');
+        pageContainer.innerHTML = this.renderPages();
+        
+        this.updateNavigationButtons();
+        
+        // Animate content
+        const content = pageContainer.querySelector('.content-animation');
+        if (content) {
+            content.style.animation = 'none';
+            setTimeout(() => {
+                content.style.animation = 'fadeInUp 0.8s ease-out';
+            }, 50);
+        }
+        
+        // Update feather icons
+        setTimeout(() => {
+            if (window.feather) {
+                feather.replace({ 
+                    'stroke-width': 2,
+                    width: 16,
+                    height: 16
+                });
+            }
+        }, 0);
+    }
+    
+    updateNavigationButtons() {
+        const prevBtn = this.shadowRoot.getElementById('prevBtn');
+        const nextBtn = this.shadowRoot.getElementById('nextBtn');
+        
+        prevBtn.disabled = this.currentPage === 0;
+        nextBtn.disabled = this.currentPage === this.pages.length - 1;
+        
+        // Update page indicator
+        this.shadowRoot.getElementById('currentPage').textContent = this.currentPage + 1;
+    }
+    
+    addRippleEffect(direction) {
+        const ripple = document.createElement('div');
+        ripple.className = 'ripple';
+        ripple.style.width = '20px';
+        ripple.style.height = '20px';
+        ripple.style.left = direction === 'left' ? '20%' : '80%';
+        ripple.style.top = '50%';
+        
+        this.shadowRoot.querySelector('.page').appendChild(ripple);
+        
+        setTimeout(() => ripple.remove(), 600);
+    }
+    
+    getGradientColors(color) {
+        const colors = {
+            blue: ['#3b82f6', '#1d4ed8'],
+            purple: ['#8b5cf6', '#6d28d9'],
+            green: ['#10b981', '#047857'],
+            red: ['#ef4444', '#dc2626'],
+            orange: ['#f97316', '#ea580c'],
+            pink: ['#ec4899', '#db2777'],
+            yellow: ['#f59e0b', '#d97706']
+        };
+        return colors[color] || colors.blue;
+    }
+    
+    getColorValue(color) {
+        const colors = {
+            blue: '#3b82f6',
+            purple: '#8b5cf6',
+            green: '#10b981',
+            red: '#ef4444',
+            orange: '#f97316',
+            pink: '#ec4899',
+            yellow: '#f59e0b'
+        };
+        return colors[color] || colors.blue;
+    }
+}
+
+customElements.define('magazine-viewer', MagazineViewer);

components/tabletop-object.js

@@ -0,0 +1,278 @@
+class TabletopObject extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        const type = this.getAttribute('type');
+        const title = this.getAttribute('title');
+        const color = this.getAttribute('color') || 'blue';
+        const image = this.getAttribute('image');
+        
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: absolute;
+                    cursor: pointer;
+                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                    outline: none;
+                }
+                
+                :host(:hover) {
+                    transform: translateY(-8px) rotateZ(2deg);
+                    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
+                    z-index: 100;
+                }
+                
+                :host(:focus-visible) {
+                    outline: 3px solid #3b82f6;
+                    outline-offset: 2px;
+                }
+                
+                .object-container {
+                    width: 100%;
+                    height: 100%;
+                    position: relative;
+                }
+                
+                /* Magazine styles */
+                .magazine {
+                    background: linear-gradient(135deg, ${this.getColorShades(color)[0]} 0%, ${this.getColorShades(color)[1]} 100%);
+                    border-radius: 4px;
+                    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+                    position: relative;
+                    overflow: hidden;
+                }
+                
+                .magazine::before {
+                    content: '';
+                    position: absolute;
+                    inset: 0;
+                    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+                    transform: translateX(-100%);
+                }
+                
+                .magazine:hover::before {
+                    animation: shimmer 1.5s infinite;
+                }
+                
+                @keyframes shimmer {
+                    100% { transform: translateX(100%); }
+                }
+                
+                .magazine-title {
+                    writing-mode: vertical-rl;
+                    text-orientation: mixed;
+                    color: white;
+                    font-weight: bold;
+                    font-size: 14px;
+                    padding: 12px 8px;
+                    text-align: center;
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+                
+                /* Resource/file styles */
+                .file-folder {
+                    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+                    border-radius: 8px;
+                    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+                    position: relative;
+                }
+                
+                .file-folder::after {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    right: 12px;
+                    width: 30px;
+                    height: 10px;
+                    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+                    border-radius: 0 0 8px 8px;
+                }
+                
+                .file-label {
+                    position: absolute;
+                    bottom: 8px;
+                    left: 8px;
+                    right: 8px;
+                    background: rgba(0, 0, 0, 0.7);
+                    color: white;
+                    padding: 4px 8px;
+                    border-radius: 4px;
+                    font-size: 12px;
+                }
+                
+                /* Art frame styles */
+                .art-frame {
+                    background: linear-gradient(135deg, #d97706 0%, #92400e 100%);
+                    padding: 12px;
+                    border-radius: 4px;
+                    box-shadow: 
+                        inset 0 0 20px rgba(0, 0, 0, 0.3),
+                        0 10px 30px rgba(0, 0, 0, 0.2);
+                }
+                
+                .art-canvas {
+                    background: #f3f4f6;
+                    border-radius: 2px;
+                    overflow: hidden;
+                    position: relative;
+                }
+                
+                .art-image {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+                
+                .art-title {
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
+                    color: white;
+                    padding: 12px 8px 8px;
+                    font-size: 12px;
+                    font-weight: bold;
+                }
+                
+                /* Demo device styles */
+                .device {
+                    background: #1f2937;
+                    border-radius: 20px;
+                    padding: 20px;
+                    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+                    position: relative;
+                }
+                
+                .device-screen {
+                    background: #000;
+                    border-radius: 10px;
+                    overflow: hidden;
+                }
+                
+                .device-image {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+                
+                .device-title {
+                    position: absolute;
+                    bottom: -32px;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    background: rgba(255, 255, 255, 0.9);
+                    backdrop-filter: blur(8px);
+                    padding: 6px 16px;
+                    border-radius: 20px;
+                    font-size: 14px;
+                    font-weight: 500;
+                    white-space: nowrap;
+                }
+            </style>
+            
+            <div class="object-container">
+                ${this.renderObject(type, title, color, image)}
+            </div>
+        `;
+        
+        this.setupInteractions();
+    }
+    
+    getColorShades(color) {
+        const colorMap = {
+            blue: ['#3b82f6', '#1d4ed8'],
+            purple: ['#8b5cf6', '#6d28d9'],
+            green: ['#10b981', '#047857'],
+            red: ['#ef4444', '#dc2626'],
+            orange: ['#f97316', '#ea580c'],
+            pink: ['#ec4899', '#db2777'],
+            yellow: ['#f59e0b', '#d97706']
+        };
+        return colorMap[color] || colorMap.blue;
+    }
+    
+    renderObject(type, title, color, image) {
+        switch(type) {
+            case 'magazine':
+                return `
+                    <div class="magazine w-32 h-44">
+                        <div class="magazine-title">${title}</div>
+                    </div>
+                `;
+                
+            case 'resource':
+                return `
+                    <div class="file-folder w-24 h-32">
+                        <div class="file-label">${title}</div>
+                    </div>
+                `;
+                
+            case 'art':
+                return `
+                    <div class="art-frame">
+                        <div class="art-canvas w-48 h-32">
+                            <img src="${image}" alt="${title}" class="art-image">
+                            <div class="art-title">${title}</div>
+                        </div>
+                    </div>
+                `;
+                
+            case 'demo':
+                return `
+                    <div class="device w-64 h-40">
+                        <div class="device-screen">
+                            <img src="${image}" alt="${title}" class="device-image">
+                        </div>
+                        <div class="device-title">${title}</div>
+                    </div>
+                `;
+                
+            default:
+                return '<div>Unknown object type</div>';
+        }
+    }
+    
+    setupInteractions() {
+        this.addEventListener('click', (e) => {
+            this.dispatchEvent(new CustomEvent('object-click', {
+                detail: {
+                    id: this.getAttribute('object-id'),
+                    type: this.getAttribute('type'),
+                    title: this.getAttribute('title')
+                },
+                bubbles: true
+            }));
+        });
+        
+        // Adding hover preview
+        this.addEventListener('mouseenter', () => {
+            this.dispatchEvent(new CustomEvent('object-hover', {
+                detail: {
+                    id: this.getAttribute('object-id'),
+                    type: this.getAttribute('type'),
+                    title: this.getAttribute('title')
+                },
+                bubbles: true
+            }));
+        });
+        
+        this.addEventListener('mouseleave', () => {
+            this.dispatchEvent(new CustomEvent('object-unhover', {
+                detail: {
+                    id: this.getAttribute('object-id')
+                },
+                bubbles: true
+            }));
+        });
+    }
+}
+
+customElements.define('tabletop-object', TabletopObject);

index.html

@@ -1,19 +1,100 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tabletop Gallery Explorer</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gradient-to-br from-amber-50 to-orange-50 dark:from-gray-900 dark:to-gray-800 transition-colors duration-500">
+    <!-- Header -->
+    <header class="fixed top-0 left-0 right-0 z-50 bg-white/90 dark:bg-gray-800/90 backdrop-blur-md border-b border-amber-200 dark:border-gray-700">
+        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
+            <h1 class="text-2xl font-bold bg-gradient-to-r from-amber-600 to-orange-600 bg-clip-text text-transparent">
+                Tabletop Gallery
+            </h1>
+            <nav class="flex items-center gap-4">
+                <button id="searchBtn" class="p-2 rounded-lg hover:bg-amber-100 dark:hover:bg-gray-700 transition-colors">
+                    <i data-feather="search" class="w-5 h-5"></i>
+                </button>
+                <button id="viewModeBtn" class="p-2 rounded-lg hover:bg-amber-100 dark:hover:bg-gray-700 transition-colors">
+                    <i data-feather="grid" class="w-5 h-5"></i>
+                </button>
+                <button id="themeToggle" class="p-2 rounded-lg hover:bg-amber-100 dark:hover:bg-gray-700 transition-colors">
+                    <i data-feather="sun" class="w-5 h-5 hidden dark:block"></i>
+                    <i data-feather="moon" class="w-5 h-5 block dark:hidden"></i>
+                </button>
+            </nav>
+        </div>
+    </header>
+
+    <!-- Main Tabletop Canvas -->
+    <main class="relative h-screen overflow-hidden pt-16">
+        <div id="tabletop" class="absolute inset-0 cursor-grab active:cursor-grabbing">
+            <!-- Infinite Surface -->
+            <div id="surface" class="absolute w-[300vw] h-[300vh] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                <!-- Surface Texture -->
+                <div class="absolute inset-0 opacity-20">
+                    <div class="wood-grain"></div>
+                </div>
+                
+                <!-- Content Objects Container -->
+                <div id="objectsContainer" class="relative w-full h-full">
+                    <!-- Objects will be dynamically generated here -->
+                </div>
+            </div>
+        </div>
+
+        <!-- Zoom Controls -->
+        <div class="fixed bottom-6 right-6 flex flex-col gap-2 z-40">
+            <button id="zoomIn" class="p-3 bg-white dark:bg-gray-800 rounded-full shadow-lg hover:shadow-xl transition-all">
+                <i data-feather="zoom-in" class="w-5 h-5"></i>
+            </button>
+            <button id="zoomOut" class="p-3 bg-white dark:bg-gray-800 rounded-full shadow-lg hover:shadow-xl transition-all">
+                <i data-feather="zoom-out" class="w-5 h-5"></i>
+            </button>
+            <button id="resetView" class="p-3 bg-white dark:bg-gray-800 rounded-full shadow-lg hover:shadow-xl transition-all">
+                <i data-feather="home" class="w-5 h-5"></i>
+            </button>
+        </div>
+    </main>
+
+    <!-- Magazine View Modal -->
+    <div id="magazineModal" class="fixed inset-0 bg-black/90 z-50 hidden items-center justify-center p-4">
+        <div class="relative max-w-4xl w-full h-full flex items-center justify-center">
+            <button id="closeMagazine" class="absolute top-4 right-4 p-3 bg-white/20 rounded-full hover:bg-white/30 transition-colors z-10">
+                <i data-feather="x" class="w-6 h-6 text-white"></i>
+            </button>
+            <div id="magazineContent" class="w-full max-h-[90vh] overflow-hidden">
+                <!-- Magazine content will be loaded here -->
+            </div>
+        </div>
+    </div>
+
+    <!-- Search Modal -->
+    <div id="searchModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">
+        <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 max-w-2xl w-full">
+            <div class="flex items-center gap-4 mb-4">
+                <i data-feather="search" class="w-5 h-5 text-gray-400"></i>
+                <input type="text" id="searchInput" placeholder="Search magazines, resources, or art..." 
+                       class="flex-1 bg-transparent outline-none text-lg dark:text-white">
+            </div>
+            <div id="searchResults" class="space-y-2">
+                <!-- Search results will appear here -->
+            </div>
+        </div>
+    </div>
+
+    <!-- Component Scripts -->
+    <script src="components/tabletop-object.js"></script>
+    <script src="components/magazine-viewer.js"></script>
+    
+    <!-- Main Scripts -->
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,643 @@
+// Tabletop State Management
+class TabletopState {
+    constructor() {
+        this.scale = 1;
+        this.translateX = 0;
+        this.translateY = 0;
+        this.isDragging = false;
+        this.startX = 0;
+        this.startY = 0;
+        this.selectedObject = null;
+        this.isDarkMode = false;
+        this.viewMode = 'chronological'; // chronological, categorical, groups
+        this.objects = [];
+        this.filteredObjects = [];
+    }
+
+    setTransform(x, y, scale) {
+        this.translateX = x;
+        this.translateY = y;
+        this.scale = scale;
+        this.updateTransform();
+    }
+
+    updateTransform() {
+        const surface = document.getElementById('surface');
+        surface.style.transform = `translate(${this.translateX}px, ${this.translateY}px) scale(${this.scale})`;
+    }
+}
+
+// Initialize state
+const state = new TabletopState();
+
+// Sample data for demonstration
+const sampleData = {
+    magazines: [
+        {
+            id: 'mag-1',
+            type: 'magazine',
+            title: 'Design Systems Quarterly',
+            excerpt: 'Exploring the latest trends in digital design systems',
+            date: '2024-01',
+            color: 'blue',
+            pages: [
+                { type: 'cover', content: 'Cover Design' },
+                { type: 'page', content: 'Understanding Design Tokens' },
+                { type: 'page', content: 'Component Library Best Practices' },
+                { type: 'back', content: 'Resources & Tools' }
+            ]
+        },
+        {
+            id: 'mag-2',
+            type: 'magazine',
+            title: 'Creative Coding',
+            excerpt: 'Art meets technology in creative programming',
+            date: '2024-02',
+            color: 'purple',
+            pages: [
+                { type: 'cover', content: 'Creative Coding Cover' },
+                { type: 'page', content: 'Generative Art Techniques' },
+                { type: 'page', content: 'Interactive Installations' },
+                { type: 'back', content: 'Gallery Showcase' }
+            ]
+        }
+    ],
+    resources: [
+        {
+            id: 'res-1',
+            type: 'resource',
+            title: 'Development Tools',
+            items: ['Code Editors', 'Version Control', 'Testing Frameworks', 'Deployment Tools']
+        },
+        {
+            id: 'res-2',
+            type: 'resource',
+            title: 'Design Assets',
+            items: ['Icons & Illustrations', 'Color Palettes', 'Typography', 'Stock Photos']
+        }
+    ],
+    art: [
+        {
+            id: 'art-1',
+            type: 'art',
+            title: 'Generative Landscape',
+            image: 'http://static.photos/nature/640x360/42',
+            description: 'Algorithmic nature scenes'
+        },
+        {
+            id: 'art-2',
+            type: 'art',
+            title: 'Abstract Geometry',
+            image: 'http://static.photos/abstract/640x360/133',
+            description: 'Mathematical beauty in art'
+        }
+    ],
+    demos: [
+        {
+            id: 'demo-1',
+            type: 'demo',
+            title: 'Interactive Dashboard',
+            preview: 'http://static.photos/technology/640x360/1'
+        }
+    ]
+};
+
+// Generate objects from sample data
+function generateObjects() {
+    const objects = [];
+    
+    // Generate magazines
+    sampleData.magazines.forEach((magazine, index) => {
+        objects.push({
+            ...magazine,
+            x: 200 + (index % 3) * 300,
+            y: 200 + Math.floor(index / 3) * 400,
+            rotation: Math.random() * 15 - 7.5
+        });
+    });
+    
+    // Generate resources
+    sampleData.resources.forEach((resource, index) => {
+        objects.push({
+            ...resource,
+            x: 600 + (index % 2) * 200,
+            y: 800 + Math.floor(index / 2) * 200,
+            rotation: Math.random() * 10 - 5
+        });
+    });
+    
+    // Generate art
+    sampleData.art.forEach((art, index) => {
+        objects.push({
+            ...art,
+            x: 1000 + (index % 2) * 250,
+            y: 300 + Math.floor(index / 2) * 300,
+            rotation: 0
+        });
+    });
+    
+    // Generate demos
+    sampleData.demos.forEach((demo, index) => {
+        objects.push({
+            ...demo,
+            x: 1200,
+            y: 600,
+            rotation: 0
+        });
+    });
+    
+    state.objects = objects;
+    state.filteredObjects = [...objects];
+}
+
+// Render objects on tabletop
+function renderObjects() {
+    const container = document.getElementById('objectsContainer');
+    container.innerHTML = '';
+    
+    state.filteredObjects.forEach(obj => {
+        const element = createTabletopObject(obj);
+        container.appendChild(element);
+    });
+}
+
+// Create individual tabletop object
+function createTabletopObject(obj) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'tabletop-object absolute cursor-pointer';
+    wrapper.style.left = `${obj.x}px`;
+    wrapper.style.top = `${obj.y}px`;
+    wrapper.style.transform = `rotate(${obj.rotation}deg)`;
+    wrapper.dataset.objectId = obj.id;
+    wrapper.dataset.objectType = obj.type;
+    wrapper.tabIndex = 0;
+    wrapper.setAttribute('role', 'button');
+    wrapper.setAttribute('aria-label', `${obj.title} - ${obj.type}`);
+    
+    let content = '';
+    
+    switch(obj.type) {
+        case 'magazine':
+            content = `
+                <div class="magazine-spine w-32 h-44 rounded shadow-xl relative">
+                    <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
+                    <div class="p-3 h-full flex flex-col justify-between">
+                        <div class="text-white text-xs font-bold transform -rotate-90 origin-center whitespace-nowrap">
+                            ${obj.title}
+                        </div>
+                        <div class="text-white/70 text-xs">
+                            ${obj.date}
+                        </div>
+                    </div>
+                </div>
+            `;
+            break;
+            
+        case 'resource':
+            content = `
+                <div class="file-cabinet w-24 h-32 rounded shadow-lg relative">
+                    <div class="absolute inset-2 bg-gray-700 rounded">
+                        <div class="p-2">
+                            <div class="bg-gray-600 h-1 mb-2 rounded"></div>
+                            <div class="bg-gray-600 h-1 mb-2 rounded"></div>
+                            <div class="bg-gray-600 h-1 mb-2 rounded"></div>
+                            <div class="text-white text-xs mt-4">${obj.title}</div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            break;
+            
+        case 'art':
+            content = `
+                <div class="art-frame shadow-2xl">
+                    <div class="art-canvas w-48 h-32 relative overflow-hidden">
+                        <img src="${obj.image}" alt="${obj.title}" class="w-full h-full object-cover">
+                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-2">
+                            <div class="text-white text-xs font-semibold">${obj.title}</div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            break;
+            
+        case 'demo':
+            content = `
+                <div class="device-mockup shadow-2xl relative floating">
+                    <div class="device-screen w-64 h-40 relative overflow-hidden">
+                        <img src="${obj.preview}" alt="${obj.title}" class="w-full h-full object-cover">
+                    </div>
+                    <div class="absolute -bottom-6 left-0 right-0 text-center">
+                        <div class="text-gray-700 dark:text-gray-300 text-sm bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full px-3 py-1 inline-block">
+                            ${obj.title}
+                        </div>
+                    </div>
+                </div>
+            `;
+            break;
+    }
+    
+    wrapper.innerHTML = content;
+    
+    // Add event listeners
+    wrapper.addEventListener('click', () => handleObjectClick(obj));
+    wrapper.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            handleObjectClick(obj);
+        }
+    });
+    
+    // Add drag functionality
+    let isDragging = false;
+    let startX, startY, initialX, initialY;
+    
+    wrapper.addEventListener('mousedown', (e) => {
+        isDragging = true;
+        startX = e.clientX;
+        startY = e.clientY;
+        initialX = obj.x;
+        initialY = obj.y;
+        wrapper.classList.add('dragging');
+        e.stopPropagation();
+    });
+    
+    document.addEventListener('mousemove', (e) => {
+        if (!isDragging) return;
+        
+        const dx = (e.clientX - startX) / state.scale;
+        const dy = (e.clientY - startY) / state.scale;
+        
+        obj.x = initialX + dx;
+        obj.y = initialY + dy;
+        
+        wrapper.style.left = `${obj.x}px`;
+        wrapper.style.top = `${obj.y}px`;
+    });
+    
+    document.addEventListener('mouseup', () => {
+        if (isDragging) {
+            isDragging = false;
+            wrapper.classList.remove('dragging');
+            saveLayout();
+        }
+    });
+    
+    return wrapper;
+}
+
+// Handle object click
+function handleObjectClick(obj) {
+    state.selectedObject = obj;
+    
+    switch(obj.type) {
+        case 'magazine':
+            openMagazineViewer(obj);
+            break;
+        case 'resource':
+            openResourceViewer(obj);
+            break;
+        case 'art':
+            openArtViewer(obj);
+            break;
+        case 'demo':
+            openDemoViewer(obj);
+            break;
+    }
+}
+
+// Magazine Viewer
+function openMagazineViewer(magazine) {
+    const modal = document.getElementById('magazineModal');
+    const content = document.getElementById('magazineContent');
+    
+    content.innerHTML = `
+        <magazine-viewer 
+            title="${magazine.title}"
+            pages='${JSON.stringify(magazine.pages)}'
+            color="${magazine.color}">
+        </magazine-viewer>
+    `;
+    
+    modal.classList.remove('hidden');
+    modal.classList.add('flex');
+}
+
+// Resource Viewer (placeholder)
+function openResourceViewer(resource) {
+    alert(`Opening ${resource.title}\nItems: ${resource.items.join(', ')}`);
+}
+
+// Art Viewer (placeholder)
+function openArtViewer(art) {
+    alert(`Viewing ${art.title}\nDescription: ${art.description}`);
+}
+
+// Demo Viewer (placeholder)
+function openDemoViewer(demo) {
+    alert(`Launching ${demo.title}`);
+}
+
+// Pan and Zoom functionality
+function setupPanZoom() {
+    const tabletop = document.getElementById('tabletop');
+    let lastX = 0;
+    let lastY = 0;
+    
+    // Pan with mouse
+    tabletop.addEventListener('mousedown', (e) => {
+        if (e.target === tabletop || e.target.id === 'surface') {
+            state.isDragging = true;
+            state.startX = e.clientX - state.translateX;
+            state.startY = e.clientY - state.translateY;
+            tabletop.style.cursor = 'grabbing';
+        }
+    });
+    
+    document.addEventListener('mousemove', (e) => {
+        if (!state.isDragging) return;
+        
+        e.preventDefault();
+        state.translateX = e.clientX - state.startX;
+        state.translateY = e.clientY - state.startY;
+        state.updateTransform();
+    });
+    
+    document.addEventListener('mouseup', () => {
+        state.isDragging = false;
+        tabletop.style.cursor = 'grab';
+    });
+    
+    // Zoom with mouse wheel
+    tabletop.addEventListener('wheel', (e) => {
+        e.preventDefault();
+        
+        const delta = e.deltaY > 0 ? 0.9 : 1.1;
+        const newScale = Math.min(Math.max(state.scale * delta, 0.5), 3);
+        
+        const rect = tabletop.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        
+        state.translateX = x - (x - state.translateX) * (newScale / state.scale);
+        state.translateY = y - (y - state.translateY) * (newScale / state.scale);
+        state.scale = newScale;
+        
+        state.updateTransform();
+    });
+    
+    // Zoom controls
+    document.getElementById('zoomIn').addEventListener('click', () => {
+        state.scale = Math.min(state.scale * 1.2, 3);
+        state.updateTransform();
+    });
+    
+    document.getElementById('zoomOut').addEventListener('click', () => {
+        state.scale = Math.max(state.scale * 0.8, 0.5);
+        state.updateTransform();
+    });
+    
+    document.getElementById('resetView').addEventListener('click', () => {
+        state.setTransform(0, 0, 1);
+    });
+}
+
+// Touch support
+function setupTouchSupport() {
+    const tabletop = document.getElementById('tabletop');
+    let touchStartX, touchStartY;
+    let initialDistance = 0;
+    let initialScale = 1;
+    
+    tabletop.addEventListener('touchstart', (e) => {
+        if (e.touches.length === 2) {
+            const dx = e.touches[0].clientX - e.touches[1].clientX;
+            const dy = e.touches[0].clientY - e.touches[1].clientY;
+            initialDistance = Math.sqrt(dx * dx + dy * dy);
+            initialScale = state.scale;
+        } else if (e.touches.length === 1) {
+            touchStartX = e.touches[0].clientX - state.translateX;
+            touchStartY = e.touches[0].clientY - state.translateY;
+        }
+    });
+    
+    tabletop.addEventListener('touchmove', (e) => {
+        e.preventDefault();
+        
+        if (e.touches.length === 2) {
+            const dx = e.touches[0].clientX - e.touches[1].clientX;
+            const dy = e.touches[0].clientY - e.touches[1].clientY;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            const scale = (distance / initialDistance) * initialScale;
+            
+            state.scale = Math.min(Math.max(scale, 0.5), 3);
+            state.updateTransform();
+        } else if (e.touches.length === 1) {
+            state.translateX = e.touches[0].clientX - touchStartX;
+            state.translateY = e.touches[0].clientY - touchStartY;
+            state.updateTransform();
+        }
+    });
+}
+
+// Search functionality
+function setupSearch() {
+    const searchBtn = document.getElementById('searchBtn');
+    const searchModal = document.getElementById('searchModal');
+    const searchInput = document.getElementById('searchInput');
+    const searchResults = document.getElementById('searchResults');
+    
+    searchBtn.addEventListener('click', () => {
+        searchModal.classList.remove('hidden');
+        searchModal.classList.add('flex');
+        searchInput.focus();
+    });
+    
+    searchModal.addEventListener('click', (e) => {
+        if (e.target === searchModal) {
+            searchModal.classList.add('hidden');
+            searchModal.classList.remove('flex');
+        }
+    });
+    
+    searchInput.addEventListener('input', (e) => {
+        const query = e.target.value.toLowerCase();
+        
+        if (query.length < 2) {
+            searchResults.innerHTML = '';
+            return;
+        }
+        
+        const results = state.objects.filter(obj => 
+            obj.title.toLowerCase().includes(query) || 
+            (obj.excerpt && obj.excerpt.toLowerCase().includes(query))
+        );
+        
+        searchResults.innerHTML = results.map(obj => `
+            <div class="p-3 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg cursor-pointer transition-colors"
+                 onclick="focusOnObject('${obj.id}')">
+                <div class="font-semibold">${obj.title}</div>
+                <div class="text-sm text-gray-500 dark:text-gray-400">${obj.type}</div>
+            </div>
+        `).join('');
+    });
+}
+
+// Focus on object by ID
+function focusOnObject(id) {
+    const obj = state.objects.find(o => o.id === id);
+    if (!obj) return;
+    
+    state.setTransform(
+        -(obj.x - window.innerWidth / 4),
+        -(obj.y - window.innerHeight / 4),
+        1.5
+    );
+    
+    document.getElementById('searchModal').classList.add('hidden');
+    document.getElementById('searchModal').classList.remove('flex');
+}
+
+// Theme toggle
+function setupThemeToggle() {
+    const themeToggle = document.getElementById('themeToggle');
+    const html = document.documentElement;
+    
+    // Check for saved theme preference or default to light mode
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        html.classList.add('dark');
+        state.isDarkMode = true;
+    }
+    
+    themeToggle.addEventListener('click', () => {
+        html.classList.toggle('dark');
+        state.isDarkMode = !state.isDarkMode;
+        localStorage.setItem('theme', state.isDarkMode ? 'dark' : 'light');
+    });
+}
+
+// View mode toggle
+function setupViewMode() {
+    const viewModeBtn = document.getElementById('viewModeBtn');
+    
+    viewModeBtn.addEventListener('click', () => {
+        const modes = ['chronological', 'categorical', 'groups'];
+        const currentIndex = modes.indexOf(state.viewMode);
+        state.viewMode = modes[(currentIndex + 1) % modes.length];
+        
+        renderObjects();
+    });
+}
+
+// Close magazine modal
+document.getElementById('closeMagazine').addEventListener('click', () => {
+    const modal = document.getElementById('magazineModal');
+    modal.classList.add('hidden');
+    modal.classList.remove('flex');
+});
+
+// Keyboard navigation
+function setupKeyboardNav() {
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+            // Close any open modals
+            const modals = document.querySelectorAll('.modal:not(.hidden)');
+            modals.forEach(modal => {
+                modal.classList.add('hidden');
+                modal.classList.remove('flex');
+            });
+        }
+        
+        if (e.key === '/' && !e.ctrlKey && !e.metaKey) {
+            e.preventDefault();
+            document.getElementById('searchBtn').click();
+        }
+        
+        // Arrow keys for navigation
+        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+            e.preventDefault();
+            const step = e.shiftKey ? 50 : 10;
+            
+            switch(e.key) {
+                case 'ArrowUp':
+                    state.translateY += step;
+                    break;
+                case 'ArrowDown':
+                    state.translateY -= step;
+                    break;
+                case 'ArrowLeft':
+                    state.translateX += step;
+                    break;
+                case 'ArrowRight':
+                    state.translateX -= step;
+                    break;
+            }
+            
+            state.updateTransform();
+        }
+    });
+}
+
+// Save layout to localStorage
+function saveLayout() {
+    localStorage.setItem('tabletopLayout', JSON.stringify({
+        objects: state.objects,
+        viewMode: state.viewMode,
+        transform: {
+            x: state.translateX,
+            y: state.translateY,
+            scale: state.scale
+        }
+    }));
+}
+
+// Load layout from localStorage
+function loadLayout() {
+    const saved = localStorage.getItem('tabletopLayout');
+    if (saved) {
+        const data = JSON.parse(saved);
+        state.objects = data.objects || state.objects;
+        state.viewMode = data.viewMode || state.viewMode;
+        
+        if (data.transform) {
+            state.setTransform(data.transform.x, data.transform.y, data.transform.scale);
+        }
+    }
+}
+
+// Initialize everything
+document.addEventListener('DOMContentLoaded', () => {
+    generateObjects();
+    loadLayout();
+    renderObjects();
+    setupPanZoom();
+    setupTouchSupport();
+    setupSearch();
+    setupThemeToggle();
+    setupViewMode();
+    setupKeyboardNav();
+    
+    // Close magazine modal on escape
+    document.getElementById('magazineModal').addEventListener('click', (e) => {
+        if (e.target === document.getElementById('magazineModal')) {
+            document.getElementById('closeMagazine').click();
+        }
+    });
+});
+
+// Handle window resize
+window.addEventListener('resize', () => {
+    saveLayout();
+});
+
+// Save layout periodically
+setInterval(saveLayout, 10000);
+
+// Offline capability
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+        navigator.serviceWorker.register('/sw.js').catch(() => {
+            console.log('Service worker registration failed');
+        });
+    });
+}

style.css

@@ -1,28 +1,203 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom Wood Grain Effect */
+.wood-grain {
+    position: absolute;
+    inset: 0;
+    background-image: 
+        repeating-linear-gradient(90deg, 
+            transparent, 
+            transparent 50px, 
+            rgba(139, 69, 19, 0.1) 50px, 
+            rgba(139, 69, 19, 0.1) 51px
+        ),
+        repeating-linear-gradient(0deg, 
+            transparent, 
+            transparent 100px, 
+            rgba(160, 82, 45, 0.05) 100px, 
+            rgba(160, 82, 45, 0.05) 101px
+        );
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Custom Scrollbar for Dark Mode */
+.dark::-webkit-scrollbar {
+    width: 12px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.dark::-webkit-scrollbar-track {
+    background: #1f2937;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.dark::-webkit-scrollbar-thumb {
+    background: #4b5563;
+    border-radius: 6px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.dark::-webkit-scrollbar-thumb:hover {
+    background: #6b7280;
 }
+
+/* Magazine Animation */
+@keyframes magazineOpen {
+    from {
+        transform: scale(0.8) rotateY(-90deg);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1) rotateY(0);
+        opacity: 1;
+    }
+}
+
+.magazine-open {
+    animation: magazineOpen 0.5s ease-out;
+}
+
+/* Object Hover Effects */
+.tabletop-object {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.tabletop-object:hover {
+    transform: translateY(-8px) rotateZ(2deg);
+    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
+}
+
+.tabletop-object.dragging {
+    transform: scale(1.1) rotateZ(5deg);
+    z-index: 1000;
+    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.4));
+}
+
+/* Magazine Spine */
+.magazine-spine {
+    background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #1e293b 100%);
+    position: relative;
+    overflow: hidden;
+}
+
+.magazine-spine::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: repeating-linear-gradient(
+        90deg,
+        transparent,
+        transparent 2px,
+        rgba(255, 255, 255, 0.1) 2px,
+        rgba(255, 255, 255, 0.1) 4px
+    );
+}
+
+/* File Cabinet Texture */
+.file-cabinet {
+    background: linear-gradient(135deg, #6b7280 0%, #4b5563 50%, #374151 100%);
+    position: relative;
+}
+
+.file-cabinet::after {
+    content: '';
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    right: 10%;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+}
+
+/* Art Frame */
+.art-frame {
+    background: linear-gradient(135deg, #d97706 0%, #92400e 100%);
+    padding: 12px;
+    box-shadow: 
+        inset 0 0 20px rgba(0, 0, 0, 0.3),
+        0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+.art-canvas {
+    background: #f3f4f6;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+/* Sticky Note */
+.sticky-note {
+    transform: rotate(-3deg);
+    transition: transform 0.2s ease;
+}
+
+.sticky-note:hover {
+    transform: rotate(-1deg) scale(1.05);
+}
+
+/* Device Mockup */
+.device-mockup {
+    background: #1f2937;
+    border-radius: 20px;
+    padding: 20px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+}
+
+.device-screen {
+    background: #000;
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+/* Physics-based animations */
+@keyframes gentleFloat {
+    0%, 100% { transform: translateY(0) rotateZ(0); }
+    50% { transform: translateY(-5px) rotateZ(1deg); }
+}
+
+.floating {
+    animation: gentleFloat 4s ease-in-out infinite;
+}
+
+/* Loading States */
+.loading-shimmer {
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+    0% { background-position: -200% 0; }
+    100% { background-position: 200% 0; }
+}
+
+/* Accessibility Focus States */
+*:focus-visible {
+    outline: 3px solid #3b82f6;
+    outline-offset: 2px;
+}
+
+/* Touch Device Optimizations */
+@media (hover: none) {
+    .tabletop-object:hover {
+        transform: none;
+        filter: none;
+    }
+    
+    .tabletop-object:active {
+        transform: scale(1.05);
+        filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.3));
+    }
+}
+
+/* Print Styles */
+@media print {
+    body {
+        background: white;
+    }
+    
+    #tabletop {
+        position: static;
+        overflow: visible;
+    }
+    
+    .tabletop-object {
+        break-inside: avoid;
+        page-break-inside: avoid;
+    }
+}