<script>
  // Ensure Material Symbols are loaded
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200';
  document.head.appendChild(link);

  // Example of dynamic content update (optional)
  const updateContent = () => {
    const dateElement = document.getElementById('current-date');
    if (dateElement) {
      dateElement.textContent = new Date().toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
    }
  };

  // Call updateContent on load and set an interval
  updateContent();
  // setInterval(updateContent, 86400000); // Update once a day if needed

  // Basic dark mode toggle (example)
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const htmlElement = document.documentElement;

  if (prefersDark) {
    htmlElement.classList.add('dark');
  }

  // You could add a button to toggle dark mode here and use localStorage
  // to persist the user's preference.
</script>