chore: clean up standalone editor HTML (10% reduction)

[Mossaka]

Summary

• Removed wrapper divs, duplicate CSS/JS, unused variables. 1317→1187 lines.

Test plan

• Verify the standalone editor loads correctly at /editor/
• Check light and dark theme rendering
• Confirm compile functionality still works

🤖 Generated with Claude Code

[Copilot]

Pull request overview

Cleans up the standalone playground editor HTML/CSS/JS to reduce overall file size and remove redundant markup/styling while preserving the editor’s functionality and layout.

Changes:

• Removed the .app wrapper and moved layout flex styling to body.
• Consolidated/trimmed CSS rules (combined selectors, shared scrollbar styling, removed unused CSS variables).
• Simplified/refactored JS (default content as a template literal, extracted copy feedback helper, factored divider resize logic).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

resizePanels() computes isMobile (window.innerWidth < 768) to switch between horizontal vs vertical resizing, but the drag start handler sets document.body.style.cursor = 'col-resize' unconditionally. On narrow viewports where panels are stacked vertically, this can show the wrong cursor during drag; consider basing the cursor on the same breakpoint logic so the cursor matches the resize direction.

[Copilot]

syncLineNumberScroll() now does a fresh getElementById('lineNumbers') lookup on every editor scroll event. Since this runs frequently, it would be more efficient to cache the element once alongside the other DOM element constants and reuse it here.

See below for a potential fix:

const lineNumbersElement = $('lineNumbers');

function syncLineNumberScroll() {
  lineNumbersElement.scrollTop = editor.scrollTop;

[pelikhan]

@Mossaka move the js code in own file for sanity.

[Mossaka]

Addressed review feedback

Comment 1 — resizePanels() cursor fix:
The mousedown handler now checks window.innerWidth < 768 and sets document.body.style.cursor to 'row-resize' for mobile (vertical layout) or 'col-resize' for desktop (horizontal layout).

Comment 2 — Cache lineNumbers element:
The lineNumbers element is now cached once at initialization (alongside all other DOM elements) and syncLineNumberScroll() uses the cached reference instead of calling getElementById('lineNumbers') on every scroll event.

Additionally — Extracted inline JS to separate file:
All JavaScript has been moved from the inline <script> block in index.html into a separate editor.js file, loaded as <script type="module" src="editor.js"></script>. Module scripts are deferred by default, so DOM references work correctly.

Verified with Playwright:

• Desktop (1280x800): compilation works, col-resize cursor during drag
• Mobile (375x812): vertical layout, row-resize cursor during drag
• External editor.js loaded as module, zero inline scripts