fix(site): resolve YouTube facade click race and calculator preset desync

[sanju200]

Description

This PR fixes two UI bugs on the dynavec landing page (opensource/dynavec):

1. YouTube Facade Click Race Condition & Invalid Nested DOM:

   • In commit ea62fe7 (fix(site): make YouTube demo thumbnail clickable #267), the YouTube demo container was converted into an , but the click handler in script.js was left intact without e.preventDefault().
   • When clicked, the browser opened YouTube in a new tab while simultaneously replacing the inner HTML with an autoplaying <iframe> inside the background tab, causing audio to play in both tabs.
   • Furthermore, embedding an interactive <iframe> inside an element is invalid HTML5 and caused secondary clicks on player controls (play/pause/fullscreen) to trigger unwanted navigations.
   • Fix: Updated �ctivateVideo() to invoke e.preventDefault(), remove anchor attributes (href, arget,
     el) so the element becomes a passive container for the player, add itle to the iframe for accessibility, support Ctrl/Cmd-click to preserve open-in-new-tab, and restored the .yt-facade iframe styling in styles.css.

2. Cost Calculator Preset & Slider Desynchronization:

   • The "Starter" preset button was hardcoded as is-active in the markup, but the default slider attributes corresponded to a higher tier (1M vectors, 1M queries, 100K writes) rather than the Starter preset (100K vectors, 100K queries, 10K writes). Clicking "Starter" caused a jarring 10x drop.
   • Manually dragging sliders never cleared the is-active state from preset buttons, falsely indicating that a preset was active even with custom values.
   • Fix: Aligned initial slider values and labels in index.html with the active "Starter" preset, and added automatic preset synchronization (updateActivePreset()) in script.js so that is-active dynamically toggles based on slider values.

Changes

• opensource/dynavec/index.html: Aligned default slider attributes and labels with Starter preset values.
• opensource/dynavec/script.js: Added dynamic preset button active state syncing and fixed YouTube facade click race condition.
• opensource/dynavec/styles.css: Restored .yt-facade iframe CSS positioning and border radius.

Checklist

• Follows project conventions and Conventional Commits.
• Verified HTML and JavaScript syntax.
• Tested responsive layout and accessibility.

[codeforstartups]

Reviewed and verified — correct fix for two real landing-page bugs. 🎯

1. YouTube facade click race — after #267 turned the demo into an <a href target=_blank>, the old click handler still built the autoplay iframe without preventDefault(), so a click opened YouTube in a new tab and autoplayed audio in the background tab, and the nested <iframe>-inside-<a> was invalid HTML (stray clicks on player controls navigated away). Your activateVideo(e) fixes it properly: preventDefault(), strips the anchor attrs so it becomes a passive container, guards against double-activation (if (facade.querySelector('iframe')) return), keeps Ctrl/Cmd/Shift-click opening a new tab, and adds an iframe title for a11y.

2. Calculator preset desync — Starter was hardcoded is-active but the sliders defaulted to a higher tier (the 10× jump on click), and dragging never cleared is-active. I confirmed the new HTML defaults (vectors 5 / dim 1 / qpm 5 / wpm 4) now match PRESETS.starter exactly, so it highlights correctly on load, and updateActivePreset() in compute() keeps the active state honest when dragging.

Verified locally: node --check script.js passes, preset/default alignment confirmed, #yt-facade element present. CI doesn't run on these static-site paths, so this was a manual review.

Merging — thorough fix and clear writeup, @sanju200!