- elIs takes an Element | null (ex: from document.querySelector()), and a class (ex: HTMLAnchorElement), then returns the element if it exists and is an instanceof the class, and throws an error if its null or the wrong type. Also optionally takes a name for the error message. This should be used when it's known that the element will be of a given type and it's critical failure if its wrong.

- querySelector wraps elIs by performing the query for you, to reduce line length.

- querySelectorAll performs elIs/querySelector on a nodelist. Again to reduce line length

This will be used to prevent rerenders when the song hasn't changed and reduce the chance of unexpected behaviour

TODO:
- resolve issue where focusing on artists when artist list updates closes the metadata changes (fix: move focus to equivalent index in artist list)
- stop updating the data so frequently (only update on change)
- hide popup when nothing playing
- pause record player if nothing playing
- pause record head if nothing playing
- make record head move to stop position when changing song
- remove randomness from record head animation
- prolong the record head animation to 3 mins/length of song when js is enabled, to sync up better with real world (if it looks good)
- crossfade animations for images when changing song
- figure out what causes "The connection to http://localhost:3000/now-playing-sse was interrupted while the page was loading." error
- preload all assets
- figure out why firefox warns about unused box-circle-mask.png preload when it is used in bsky pfp in landing
- split up NowPlaying component if needed as is getting quite large

- .player now can be focused by tab index or clicking
- now-playing now delegates focus (tapping el focuses first focusable child + :focus === :focus-within but extends out shadowroot)

this will be used to show song metadata (artist, album, spotify links)

Potential for performance improvements by increasing delay between requests and sharing a stream between multiple clients but 1 i dont wanna do that and 2 its prolly fine for now lol

.refreshToken stores the refresh token in plaintext and should not be commited to git by mistake

spotify.ts will handle refresh tokens etc

- Entries go vertical
- Blog is removed (still accessible in nav, but simply filler space in desktop; not needed)
- body cannot be smaller than 30ch, so smaller devices will scroll. this ensures each part is legible without breaking things on tiny/over zoomed devices

- <main> now takes up remaining height in body, overflowing when at capacity
- <Landing> is now properly sized