bump (move to next@canary), use tailwindcss v4

components/Header.tsx

@@ -30,7 +30,7 @@ export default function Header() {
         <Link href="/" className="text-gray-300 hover:text-white text-2xl font-bold transition-all duration-300 hover:glow">
           aidxn.cc
         </Link>
-        <button onClick={toggleMenu} className="md:hidden text-gray-300 focus:outline-none">
+        <button onClick={toggleMenu} className="md:hidden text-gray-300 focus:outline-hidden">
           {isOpen ? <X className="text-2xl" /> : <Menu className="text-2xl" />}
         </button>
         <ul className={`flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4 absolute md:static bg-gray-800 md:bg-transparent w-full md:w-auto left-0 md:left-auto top-16 md:top-auto p-4 md:p-0 transition-all duration-300 ease-in-out ${isOpen ? 'flex' : 'hidden md:flex'}`}>

components/objects/BackButton.tsx

@@ -12,7 +12,7 @@ const BackButton: React.FC<BackButtonProps> = ({ href, label = 'Back' }) => {
   return (
     <Link 
       href={href}
-      className="inline-flex items-center px-4 py-2 mt-4 text-white bg-gray-800 rounded shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+      className="inline-flex items-center px-4 py-2 mt-4 text-white bg-gray-800 rounded-sm shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
       aria-label={`Go back to ${label}`}
     >
       <FontAwesomeIcon icon={faArrowLeft} className="mr-2" />

components/objects/Button.tsx

@@ -10,7 +10,7 @@ const MusicInfoButton: React.FC<MusicInfoButtonProps> = ({ href, label }) => {
   return (
     <Link 
       href={href}
-      className="inline-block bg-gray-800 text-white font-bold py-2 px-4 rounded shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+      className="inline-block bg-gray-800 text-white font-bold py-2 px-4 rounded-sm shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
     >
       {label}
     </Link>

components/widgets/FeaturedRepos.tsx

@@ -13,7 +13,7 @@ export default function GitHubFeatured() {
             <h3 className="text-xl font-bold text-gray-100 mb-3">
               <FontAwesomeIcon icon={project.github ? faGithub : faGitAlt} className="mr-2" /> {project.name}
             </h3>
-            <p className="text-gray-300 flex-grow">{project.description}</p>
+            <p className="text-gray-300 grow">{project.description}</p>
           </div>
           <div className="pt-4 border-t border-gray-700 flex justify-between items-center mt-auto">
             <Link href={project.url} className="text-blue-400 hover:underline">View Repo</Link>

components/widgets/LastPlayed.tsx

@@ -40,7 +40,7 @@ const LastPlayed: React.FC = () => {
   return (
     <div className="max-w-2xl mx-auto mb-12">
       <h2 className="text-2xl font-bold mb-4 text-gray-200">Last Played Song</h2>
-      <div className="now-playing flex items-center border border-gray-300 rounded-lg p-4 max-w-md mt-8 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg">
+      <div className="now-playing flex items-center border border-gray-300 rounded-lg p-4 max-w-md mt-8 bg-white/10 backdrop-filter backdrop-blur-lg">
         <Image 
           src={track.image.find(img => img.size === 'large')?.['#text'] || '/placeholder.png'} 
           alt={track.name} 

components/widgets/Music.tsx

@@ -59,7 +59,7 @@ export default function Home() {
             id="timePeriod"
             value={timePeriod}
             onChange={(e) => setTimePeriod(e.target.value)}
-            className="ml-2 p-2 bg-gray-700 text-gray-300 rounded"
+            className="ml-2 p-2 bg-gray-700 text-gray-300 rounded-sm"
           >
             <option value="Early Summer 2024">Early Summer 2024</option>
           </select>