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

- last item is on right to prevent overflow
- "&shy;" and "<wbr>" are replaced with the respective html entity/element for line breaks in word wrapping

- elements flex in right direction
- goes vertical at small screen threshold
- overflowing creates a scroll
- dot is placed between list items