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/css/modal.css

@@ -175,8 +175,10 @@
     grid-template-columns: 14px 1fr 14px;
     grid-template-rows: 14px 1fr 14px;
     width: 100%;
-    height: 320px;
+    aspect-ratio: 16 / 9;
+    max-height: 70vh;
     overflow: hidden;
+    border-radius: 4px;
 }
 
 .css-test-rect-corner {
@@ -184,12 +186,11 @@
 }
 
 .css-test-rect-screen {
+    position: relative;
     background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     background-size: cover;
     background-position: center;
     border-radius: 2px;
-    outline: 1px solid rgba(255, 255, 255, 0.15);
-    outline-offset: -1px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -198,6 +199,16 @@
     overflow: hidden;
 }
 
+.css-test-rect-screen::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border: 2px solid var(--primary-color);
+    border-radius: 2px;
+    pointer-events: none;
+    z-index: 10;
+}
+
 .css-test-rect-label {
     color: rgba(255, 255, 255, 0.85);
     font-size: 0.8rem;