Add QoL features: preview theme, external resources, shortcuts, mobile layout

- Dark/light preview theme toggle with localStorage persistence and
  dark CSS injection in preview, export, and embed
- External CSS/JS resources modal with per-fiddle persistence in
  options column, injected as link/script tags
- Keyboard shortcuts cheat sheet modal (? button or ? key)
- Mobile-responsive CSS with breakpoints at 768px and 480px
  for both editor and browse pages

public/index.html

@@ -39,6 +39,12 @@
         <datalist id="tags-datalist"></datalist>
         <div id="tags-display" class="tags-display"></div>
       </div>
+      <select id="preview-theme" title="Preview background theme">
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
+      </select>
+      <button id="btn-resources" class="btn-secondary" title="External CSS/JS resources">Resources</button>
+      <button id="btn-shortcuts" class="btn-secondary" title="Keyboard shortcuts (?)" aria-label="Keyboard shortcuts">?</button>
       <label class="tailwind-toggle" title="Enable Tailwind CSS">
         <input type="checkbox" id="tailwind-checkbox">
         Tailwind
@@ -77,6 +83,45 @@
     </div>
   </main>
 
+  <div id="resources-modal" class="modal-overlay hidden">
+    <div class="modal-content" style="min-width:360px">
+      <div class="modal-header">
+        <span>External Resources</span>
+        <button id="resources-modal-close" class="btn-small">&times;</button>
+      </div>
+      <div class="resource-inputs">
+        <div class="resource-row">
+          <input type="text" id="resource-css-input" placeholder="CSS URL (e.g. https://fonts.googleapis.com/...)">
+          <button id="btn-add-css" class="btn-small">+ CSS</button>
+        </div>
+        <div class="resource-row">
+          <input type="text" id="resource-js-input" placeholder="JS URL (e.g. https://cdn.jsdelivr.net/...)">
+          <button id="btn-add-js" class="btn-small">+ JS</button>
+        </div>
+      </div>
+      <div id="resource-list" class="resource-list"></div>
+    </div>
+  </div>
+
+  <div id="shortcuts-modal" class="modal-overlay hidden">
+    <div class="modal-content" style="min-width:380px">
+      <div class="modal-header">
+        <span>Keyboard Shortcuts</span>
+        <button id="shortcuts-modal-close" class="btn-small">&times;</button>
+      </div>
+      <table class="shortcuts-table">
+        <tbody>
+          <tr><td><kbd>Ctrl/Cmd</kbd> + <kbd>Enter</kbd></td><td>Run code</td></tr>
+          <tr><td><kbd>Ctrl/Cmd</kbd> + <kbd>S</kbd></td><td>Save fiddle</td></tr>
+          <tr><td><kbd>?</kbd></td><td>Show shortcuts</td></tr>
+          <tr class="shortcuts-divider"><td colspan="2">Keybinding Modes</td></tr>
+          <tr><td><kbd>Vim</kbd></td><td>Full vim keybindings (select in toolbar)</td></tr>
+          <tr><td><kbd>Emacs</kbd></td><td>Full emacs keybindings (select in toolbar)</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
   <div id="qr-modal" class="modal-overlay hidden">
     <div class="modal-content">
       <div class="modal-header">