refactor: use idiomatic hyperscript selector syntax

Replace verbose document.getElementById() and document.querySelectorAll()
with cleaner hyperscript syntax:
- #id for ID selectors
- .class and the first .class for class selectors
- <selector/> query literals for complex selectors
- #{variable} for dynamic ID interpolation

Files changed:
- utils._hs: scrollHeight, details, footer buttons, scrollToSection
- zoom._hs: all zoom control element selectors (14 changes)
- pdf-modal._hs: modal selector
- keyboard._hs: dynamic toggle and modal selectors
- contact-modal.html: response div and modal close
- index.html: ninja-keys bar selector

templates/partials/modals/contact-modal.html

@@ -29,7 +29,7 @@
                   hx-headers='{"X-Requested-With": "XMLHttpRequest"}'
                   _="on htmx:afterRequest
                        -- Check if response contains success message (not validation error)
-                       set responseDiv to document.getElementById('contact-response')
+                       set responseDiv to #contact-response
                        if responseDiv is not null and responseDiv.querySelector('.contact-success') is not null
                          -- Hide all form fields and show only success message
                          set formFields to me.querySelectorAll('.form-group')
@@ -39,7 +39,7 @@
                          add .hidden to me.querySelector('.form-actions')
                          add .hidden to me.querySelector('.form-note')
                          -- Close modal after 3 seconds
-                         wait 3s then call document.getElementById('contact-modal').close()
+                         wait 3s then call #contact-modal.close()
                        end">
 
                 <!-- Honeypot field - hidden, should be empty -->