Improve CSS test preview: HD resolution, screen-only border, and refactor frontend docs

- Bump capture preview resolution from 480×360 to 960×540 (HD)
- Increase preview FPS from 2 to ~12 FPS (AUX_INTERVAL 0.5→0.08)
- Add accent-color border on screen rect only (not LED edges) via ::after
- Use dynamic aspect-ratio from decoded JPEG frames instead of fixed height
- Widen modal to 900px for picture sources
- Move frontend conventions from CLAUDE.md to contexts/frontend.md

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/src/wled_controller/static/js/features/color-strips.js

@@ -1973,6 +1973,10 @@ function _cssTestConnect(sourceId, ledCount) {
             document.getElementById('css-test-layers-view').style.display = _cssTestIsComposite ? '' : 'none';
             document.getElementById('css-test-status').style.display = 'none';
 
+            // Widen modal for picture sources to show the screen rectangle larger
+            const modalContent = document.querySelector('#test-css-source-modal .modal-content');
+            if (modalContent) modalContent.style.maxWidth = isPicture ? '900px' : '';
+
             // Hide LED count control for picture sources (LED count is fixed by calibration)
             document.getElementById('css-test-led-control').style.display = isPicture ? 'none' : '';
 
@@ -2016,6 +2020,14 @@ function _cssTestConnect(sourceId, ledCount) {
                         screen.style.backgroundSize = 'cover';
                         screen.style.backgroundPosition = 'center';
                         if (oldUrl) URL.revokeObjectURL(oldUrl);
+                        // Set aspect ratio from first decoded frame
+                        const rect = document.getElementById('css-test-rect');
+                        if (rect && !rect._aspectSet && img.naturalWidth && img.naturalHeight) {
+                            rect.style.aspectRatio = `${img.naturalWidth} / ${img.naturalHeight}`;
+                            rect.style.height = 'auto';
+                            rect._aspectSet = true;
+                            requestAnimationFrame(() => _cssTestRenderTicks(_cssTestMeta?.edges));
+                        }
                     };
                     img.onerror = () => URL.revokeObjectURL(url);
                     img.src = url;
@@ -2356,6 +2368,12 @@ export function closeTestCssSourceModal() {
     // Revoke blob URL for frame preview
     const screen = document.getElementById('css-test-rect-screen');
     if (screen && screen._blobUrl) { URL.revokeObjectURL(screen._blobUrl); screen._blobUrl = null; screen.style.backgroundImage = ''; }
+    // Reset aspect ratio for next open
+    const rect = document.getElementById('css-test-rect');
+    if (rect) { rect.style.aspectRatio = ''; rect.style.height = ''; rect._aspectSet = false; }
+    // Reset modal width
+    const modalContent = document.querySelector('#test-css-source-modal .modal-content');
+    if (modalContent) modalContent.style.maxWidth = '';
     const modal = document.getElementById('test-css-source-modal');
     if (modal) { modal.style.display = 'none'; }
 }