@stevejtrettel/shader-sandbox 0.1.0

package/dist-lib/layouts/SplitLayout.js

@@ -0,0 +1,61 @@
+/**
+ * Split Layout
+ *
+ * Shader on left, editable code on right with syntax highlighting.
+ * Ideal for teaching and presentations where viewers can tweak the code.
+ */
+import './split.css';
+export class SplitLayout {
+    constructor(opts) {
+        this.editorPanel = null;
+        this.recompileHandler = null;
+        this.container = opts.container;
+        this.project = opts.project;
+        // Create root layout container
+        this.root = document.createElement('div');
+        this.root.className = 'layout-split';
+        // Create canvas container (left side)
+        this.canvasContainer = document.createElement('div');
+        this.canvasContainer.className = 'canvas-container';
+        // Create code panel (right side)
+        this.codePanel = document.createElement('div');
+        this.codePanel.className = 'code-panel';
+        // Build editor panel
+        this.buildEditorPanel();
+        // Assemble and append to DOM
+        this.root.appendChild(this.canvasContainer);
+        this.root.appendChild(this.codePanel);
+        this.container.appendChild(this.root);
+    }
+    getCanvasContainer() {
+        return this.canvasContainer;
+    }
+    setRecompileHandler(handler) {
+        this.recompileHandler = handler;
+        if (this.editorPanel) {
+            this.editorPanel.setRecompileHandler(handler);
+        }
+    }
+    dispose() {
+        if (this.editorPanel) {
+            this.editorPanel.dispose();
+            this.editorPanel = null;
+        }
+        this.container.innerHTML = '';
+    }
+    /**
+     * Build editor panel (dynamically loaded).
+     */
+    async buildEditorPanel() {
+        try {
+            const { EditorPanel } = await import('../editor/EditorPanel');
+            this.editorPanel = new EditorPanel(this.codePanel, this.project);
+            if (this.recompileHandler) {
+                this.editorPanel.setRecompileHandler(this.recompileHandler);
+            }
+        }
+        catch (err) {
+            console.error('Failed to load editor panel:', err);
+        }
+    }
+}

package/dist-lib/layouts/TabbedLayout.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Tabbed Layout
+ *
+ * Single window with tabs to switch between shader output, editable code, and textures.
+ * First tab shows the live shader, remaining tabs show editable GLSL source files and images.
+ */
+import './tabbed.css';
+import { BaseLayout, LayoutOptions, RecompileHandler } from './types';
+export declare class TabbedLayout implements BaseLayout {
+    private container;
+    private project;
+    private root;
+    private canvasContainer;
+    private contentArea;
+    private imageViewer;
+    private editorContainer;
+    private editorInstance;
+    private buttonContainer;
+    private copyButton;
+    private recompileButton;
+    private errorDisplay;
+    private recompileHandler;
+    private modifiedSources;
+    private tabs;
+    private activeTabIndex;
+    constructor(opts: LayoutOptions);
+    getCanvasContainer(): HTMLElement;
+    setRecompileHandler(handler: RecompileHandler): void;
+    dispose(): void;
+    private setupKeyboardShortcut;
+    private saveCurrentEditorContent;
+    private recompile;
+    private showError;
+    private hideError;
+    private copyToClipboard;
+    private buildTabBar;
+}
+//# sourceMappingURL=TabbedLayout.d.ts.map

package/dist-lib/layouts/TabbedLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabbedLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/TabbedLayout.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQtE,qBAAa,YAAa,YAAW,UAAU;IAC7C,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,OAAO,CAAmB;IAClC,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,WAAW,CAAc;IAEjC,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,cAAc,CAAa;IACnC,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,UAAU,CAAc;IAChC,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,gBAAgB,CAAiC;IACzD,OAAO,CAAC,eAAe,CAAkC;IACzD,OAAO,CAAC,IAAI,CAAa;IACzB,OAAO,CAAC,cAAc,CAAa;gBAEvB,IAAI,EAAE,aAAa;IAoF/B,kBAAkB,IAAI,WAAW;IAIjC,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAIpD,OAAO,IAAI,IAAI;IAQf,OAAO,CAAC,qBAAqB;IAY7B,OAAO,CAAC,wBAAwB;IAUhC,OAAO,CAAC,SAAS;IAsBjB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,SAAS;YAMH,eAAe;IA4B7B,OAAO,CAAC,WAAW;CAqJpB"}

package/dist-lib/layouts/TabbedLayout.js

@@ -0,0 +1,305 @@
+/**
+ * Tabbed Layout
+ *
+ * Single window with tabs to switch between shader output, editable code, and textures.
+ * First tab shows the live shader, remaining tabs show editable GLSL source files and images.
+ */
+import './tabbed.css';
+export class TabbedLayout {
+    constructor(opts) {
+        this.editorInstance = null;
+        this.recompileHandler = null;
+        this.modifiedSources = new Map();
+        this.tabs = [];
+        this.activeTabIndex = 0;
+        this.container = opts.container;
+        this.project = opts.project;
+        // Create root layout container
+        this.root = document.createElement('div');
+        this.root.className = 'layout-tabbed';
+        // Create wrapper to constrain size (matches default layout)
+        const wrapper = document.createElement('div');
+        wrapper.className = 'tabbed-wrapper';
+        // Create content area (holds either canvas, code, or image)
+        this.contentArea = document.createElement('div');
+        this.contentArea.className = 'tabbed-content';
+        // Create canvas container (shown when Shader tab is active)
+        this.canvasContainer = document.createElement('div');
+        this.canvasContainer.className = 'tabbed-canvas-container';
+        // Create image viewer (shown when image tabs are active)
+        this.imageViewer = document.createElement('div');
+        this.imageViewer.className = 'tabbed-image-viewer';
+        this.imageViewer.style.visibility = 'hidden';
+        this.contentArea.appendChild(this.canvasContainer);
+        this.contentArea.appendChild(this.imageViewer);
+        // Create editor container
+        this.editorContainer = document.createElement('div');
+        this.editorContainer.className = 'tabbed-editor-container';
+        this.editorContainer.style.visibility = 'hidden';
+        this.contentArea.appendChild(this.editorContainer);
+        // Create button container for copy and recompile (will be added to toolbar)
+        this.buttonContainer = document.createElement('div');
+        this.buttonContainer.className = 'tabbed-button-container';
+        this.buttonContainer.style.display = 'none';
+        // Create copy button (icon only)
+        this.copyButton = document.createElement('button');
+        this.copyButton.className = 'tabbed-copy-button';
+        this.copyButton.innerHTML = `
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2z" opacity="0.4"/>
+        <path d="M2 5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H2zm0 1h7a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1z"/>
+      </svg>
+    `;
+        this.copyButton.title = 'Copy code to clipboard';
+        this.copyButton.addEventListener('click', () => this.copyToClipboard());
+        this.buttonContainer.appendChild(this.copyButton);
+        // Create recompile button
+        this.recompileButton = document.createElement('button');
+        this.recompileButton.className = 'tabbed-recompile-button';
+        this.recompileButton.innerHTML = `
+      <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M4 3v10l8-5-8-5z"/>
+      </svg>
+      Recompile
+    `;
+        this.recompileButton.title = 'Recompile shader (Ctrl+Enter)';
+        this.recompileButton.addEventListener('click', () => this.recompile());
+        this.buttonContainer.appendChild(this.recompileButton);
+        // Create error display
+        this.errorDisplay = document.createElement('div');
+        this.errorDisplay.className = 'tabbed-error-display';
+        this.errorDisplay.style.display = 'none';
+        this.contentArea.appendChild(this.errorDisplay);
+        // Set up keyboard shortcut for recompile
+        this.setupKeyboardShortcut();
+        // Build tab bar
+        const tabBar = this.buildTabBar();
+        // Assemble and append to DOM
+        wrapper.appendChild(tabBar);
+        wrapper.appendChild(this.contentArea);
+        this.root.appendChild(wrapper);
+        this.container.appendChild(this.root);
+    }
+    getCanvasContainer() {
+        return this.canvasContainer;
+    }
+    setRecompileHandler(handler) {
+        this.recompileHandler = handler;
+    }
+    dispose() {
+        if (this.editorInstance) {
+            this.editorInstance.destroy();
+            this.editorInstance = null;
+        }
+        this.container.innerHTML = '';
+    }
+    setupKeyboardShortcut() {
+        document.addEventListener('keydown', (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                const tab = this.tabs[this.activeTabIndex];
+                if (tab.kind === 'code') {
+                    e.preventDefault();
+                    this.recompile();
+                }
+            }
+        });
+    }
+    saveCurrentEditorContent() {
+        if (this.editorInstance) {
+            const tab = this.tabs[this.activeTabIndex];
+            if (tab.kind === 'code') {
+                const source = this.editorInstance.getSource();
+                this.modifiedSources.set(tab.passName, source);
+            }
+        }
+    }
+    recompile() {
+        if (!this.recompileHandler) {
+            console.warn('No recompile handler set');
+            return;
+        }
+        this.saveCurrentEditorContent();
+        const tab = this.tabs[this.activeTabIndex];
+        if (tab.kind !== 'code')
+            return;
+        const source = this.modifiedSources.get(tab.passName) ?? tab.source;
+        const result = this.recompileHandler(tab.passName, source);
+        if (result.success) {
+            this.hideError();
+            tab.source = source;
+        }
+        else {
+            this.showError(result.error || 'Compilation failed');
+        }
+    }
+    showError(message) {
+        if (this.errorDisplay) {
+            this.errorDisplay.textContent = message;
+            this.errorDisplay.style.display = 'block';
+        }
+    }
+    hideError() {
+        if (this.errorDisplay) {
+            this.errorDisplay.style.display = 'none';
+        }
+    }
+    async copyToClipboard() {
+        const tab = this.tabs[this.activeTabIndex];
+        if (tab.kind !== 'code')
+            return;
+        // Get current source (modified or original)
+        const source = this.editorInstance
+            ? this.editorInstance.getSource()
+            : (this.modifiedSources.get(tab.passName) ?? tab.source);
+        try {
+            await navigator.clipboard.writeText(source);
+            // Show checkmark feedback
+            const originalHTML = this.copyButton.innerHTML;
+            this.copyButton.innerHTML = `
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+          <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>
+        </svg>
+      `;
+            this.copyButton.classList.add('copied');
+            setTimeout(() => {
+                this.copyButton.innerHTML = originalHTML;
+                this.copyButton.classList.remove('copied');
+            }, 1500);
+        }
+        catch (err) {
+            console.error('Failed to copy:', err);
+        }
+    }
+    buildTabBar() {
+        // Create toolbar container (holds tabs + buttons)
+        const toolbar = document.createElement('div');
+        toolbar.className = 'tabbed-toolbar';
+        // Create tab bar
+        const tabBar = document.createElement('div');
+        tabBar.className = 'tabbed-tab-bar';
+        // Build tabs: Shader first, then code files, then textures
+        this.tabs = [];
+        // 1. Shader output tab
+        this.tabs.push({ kind: 'shader', name: 'Shader' });
+        // 2. Common (if exists)
+        if (this.project.commonSource) {
+            this.tabs.push({
+                kind: 'code',
+                name: 'common.glsl',
+                passName: 'common',
+                source: this.project.commonSource,
+            });
+        }
+        // 3. Buffers in order
+        const bufferOrder = [
+            'BufferA', 'BufferB', 'BufferC', 'BufferD',
+        ];
+        for (const bufferName of bufferOrder) {
+            const pass = this.project.passes[bufferName];
+            if (pass) {
+                this.tabs.push({
+                    kind: 'code',
+                    name: `${bufferName.toLowerCase()}.glsl`,
+                    passName: bufferName,
+                    source: pass.glslSource,
+                });
+            }
+        }
+        // 4. Image pass
+        const imagePass = this.project.passes.Image;
+        this.tabs.push({
+            kind: 'code',
+            name: 'image.glsl',
+            passName: 'Image',
+            source: imagePass.glslSource,
+        });
+        // 5. Textures (images)
+        for (const texture of this.project.textures) {
+            this.tabs.push({
+                kind: 'image',
+                name: texture.filename || texture.name,
+                url: texture.source,
+            });
+        }
+        // Function to show a specific tab
+        const showTab = async (tabIndex) => {
+            // Save current editor content before switching
+            this.saveCurrentEditorContent();
+            const tab = this.tabs[tabIndex];
+            this.activeTabIndex = tabIndex;
+            // Update active tab styling
+            tabBar.querySelectorAll('.tabbed-tab-button').forEach((b, i) => {
+                b.classList.toggle('active', i === tabIndex);
+            });
+            // Hide all content first
+            this.canvasContainer.style.visibility = 'hidden';
+            this.imageViewer.style.visibility = 'hidden';
+            this.editorContainer.style.visibility = 'hidden';
+            this.buttonContainer.style.display = 'none';
+            // Destroy previous editor instance
+            if (this.editorInstance) {
+                this.editorInstance.destroy();
+                this.editorInstance = null;
+            }
+            if (tab.kind === 'shader') {
+                // Show shader canvas
+                this.canvasContainer.style.visibility = 'visible';
+            }
+            else if (tab.kind === 'code') {
+                // Show editor and buttons
+                this.editorContainer.style.visibility = 'visible';
+                this.buttonContainer.style.display = 'flex';
+                // Get source (use modified if available)
+                const source = this.modifiedSources.get(tab.passName) ?? tab.source;
+                // Clear and load editor
+                this.editorContainer.innerHTML = '';
+                try {
+                    const { createEditor } = await import('../editor/prism-editor');
+                    this.editorInstance = createEditor(this.editorContainer, source, (newSource) => {
+                        this.modifiedSources.set(tab.passName, newSource);
+                    });
+                }
+                catch (err) {
+                    console.error('Failed to load editor:', err);
+                    // Fallback to textarea
+                    const textarea = document.createElement('textarea');
+                    textarea.className = 'tabbed-fallback-textarea';
+                    textarea.value = source;
+                    textarea.addEventListener('input', () => {
+                        this.modifiedSources.set(tab.passName, textarea.value);
+                    });
+                    this.editorContainer.appendChild(textarea);
+                }
+            }
+            else {
+                // Show image
+                this.imageViewer.style.visibility = 'visible';
+                const img = document.createElement('img');
+                img.src = tab.url;
+                img.alt = tab.name;
+                this.imageViewer.innerHTML = '';
+                this.imageViewer.appendChild(img);
+            }
+        };
+        // Create tab buttons
+        this.tabs.forEach((tab, index) => {
+            const tabButton = document.createElement('button');
+            tabButton.className = 'tabbed-tab-button';
+            if (tab.kind === 'shader') {
+                tabButton.classList.add('shader-tab');
+            }
+            else if (tab.kind === 'image') {
+                tabButton.classList.add('image-tab');
+            }
+            tabButton.textContent = tab.name;
+            if (index === 0)
+                tabButton.classList.add('active');
+            tabButton.addEventListener('click', () => showTab(index));
+            tabBar.appendChild(tabButton);
+        });
+        // Assemble toolbar: tabs + buttons
+        toolbar.appendChild(tabBar);
+        toolbar.appendChild(this.buttonContainer);
+        return toolbar;
+    }
+}

package/dist-lib/layouts/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Layouts - Modular layout system for Shadertoy viewer
+ *
+ * Provides four layout modes:
+ * - Default: Canvas centered with styling
+ * - Fullscreen: Canvas fills entire viewport
+ * - Split: Canvas on left, code viewer on right
+ * - Tabbed: Single window with tabs for shader and code
+ */
+export { FullscreenLayout } from './FullscreenLayout';
+export { DefaultLayout } from './DefaultLayout';
+export { SplitLayout } from './SplitLayout';
+export { TabbedLayout } from './TabbedLayout';
+export type { BaseLayout, LayoutOptions, LayoutMode } from './types';
+import { BaseLayout, LayoutOptions, LayoutMode } from './types';
+/**
+ * Factory function to create the appropriate layout based on mode.
+ *
+ * @param mode - Layout mode to create
+ * @param options - Layout options
+ * @returns Layout instance implementing BaseLayout interface
+ */
+export declare function createLayout(mode: LayoutMode, options: LayoutOptions): BaseLayout;
+//# sourceMappingURL=index.d.ts.map

package/dist-lib/layouts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layouts/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAMrE,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEhE;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,aAAa,GACrB,UAAU,CAWZ"}

package/dist-lib/layouts/index.js

@@ -0,0 +1,36 @@
+/**
+ * Layouts - Modular layout system for Shadertoy viewer
+ *
+ * Provides four layout modes:
+ * - Default: Canvas centered with styling
+ * - Fullscreen: Canvas fills entire viewport
+ * - Split: Canvas on left, code viewer on right
+ * - Tabbed: Single window with tabs for shader and code
+ */
+export { FullscreenLayout } from './FullscreenLayout';
+export { DefaultLayout } from './DefaultLayout';
+export { SplitLayout } from './SplitLayout';
+export { TabbedLayout } from './TabbedLayout';
+import { FullscreenLayout } from './FullscreenLayout';
+import { DefaultLayout } from './DefaultLayout';
+import { SplitLayout } from './SplitLayout';
+import { TabbedLayout } from './TabbedLayout';
+/**
+ * Factory function to create the appropriate layout based on mode.
+ *
+ * @param mode - Layout mode to create
+ * @param options - Layout options
+ * @returns Layout instance implementing BaseLayout interface
+ */
+export function createLayout(mode, options) {
+    switch (mode) {
+        case 'fullscreen':
+            return new FullscreenLayout(options);
+        case 'default':
+            return new DefaultLayout(options);
+        case 'split':
+            return new SplitLayout(options);
+        case 'tabbed':
+            return new TabbedLayout(options);
+    }
+}

package/dist-lib/layouts/split.css

@@ -0,0 +1,196 @@
+/**
+ * Split Layout Styles
+ * Includes code panel, tabs, and Prism.js syntax highlighting theme
+ */
+
+/* ===== Split Layout ===== */
+.layout-split {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 40px;
+  /* Very generous margins on large screens */
+  padding: 120px 140px;
+}
+
+.layout-split .canvas-container {
+  position: relative;
+  flex: 1;
+  background: #000;
+  border-radius: 8px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+}
+
+.layout-split .code-panel {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+}
+
+/* ===== Code Panel ===== */
+.tab-bar {
+  display: flex;
+  background: #f8f8f8;
+  border-bottom: 1px solid #e0e0e0;
+  padding: 8px 8px 0 8px;
+  gap: 4px;
+}
+
+.tab-button {
+  padding: 8px 16px;
+  background: transparent;
+  border: none;
+  border-radius: 6px 6px 0 0;
+  font-size: 13px;
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+  cursor: pointer;
+  transition: background 0.2s;
+  color: #666;
+}
+
+.tab-button:hover {
+  background: #e8e8e8;
+}
+
+.tab-button.active {
+  background: white;
+  color: #000;
+  font-weight: 500;
+}
+
+.copy-button {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  padding: 6px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.2s;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.copy-button:hover {
+  background: rgba(0, 0, 0, 0.05);
+  color: #333;
+}
+
+.copy-button:active {
+  transform: scale(0.9);
+}
+
+.copy-button.copied {
+  color: #4caf50;
+}
+
+.code-viewer {
+  flex: 1;
+  min-height: 0; /* Allow shrinking below content size in flexbox */
+  overflow: auto;
+  position: relative;
+  background: white;
+}
+
+/* Prism.js syntax highlighting */
+.code-viewer pre {
+  margin: 0;
+  padding: 16px;
+  font-size: 13px;
+  line-height: 1.5;
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+  background: white;
+}
+
+.code-viewer code {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* Prism theme - simple light theme */
+.token.comment { color: #6a9955; }
+.token.keyword { color: #0000ff; }
+.token.string { color: #a31515; }
+.token.number { color: #098658; }
+.token.operator { color: #000000; }
+.token.function { color: #795e26; }
+.token.class-name { color: #267f99; }
+.token.punctuation { color: #000000; }
+
+/* Image tab styling */
+.tab-button.image-tab {
+  color: #7c4dff;
+}
+
+.tab-button.image-tab.active {
+  color: #7c4dff;
+}
+
+/* Image viewer */
+.image-viewer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 16px;
+  background: #f5f5f5;
+}
+
+.image-viewer img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* ===== Responsive adjustments ===== */
+
+/* Progressively shrink margins on smaller screens */
+@media (max-width: 1800px) {
+  .layout-split {
+    padding: 100px 120px;
+  }
+}
+
+@media (max-width: 1600px) {
+  .layout-split {
+    padding: 80px 100px;
+  }
+}
+
+@media (max-width: 1400px) {
+  .layout-split {
+    padding: 60px 80px;
+  }
+}
+
+@media (max-width: 1200px) {
+  .layout-split {
+    padding: 50px 60px;
+  }
+}
+
+@media (max-width: 1000px) {
+  .layout-split {
+    padding: 40px 50px;
+  }
+}
+
+@media (max-width: 800px) {
+  .layout-split {
+    flex-direction: column;
+    padding: 30px;
+    gap: 30px;
+  }
+}