fix: improve TOC sidebar appearance and fix word-break issues

- Remove aggressive word-break: break-all from global a and li styles,
  keeping only overflow-wrap: break-word to prevent mid-word breaks in
  narrow containers like the TOC sidebar
- TOC links: smaller font (text-sm), muted default color (text-gray-400),
  softer active highlight (text-red-400), left-aligned text
- Fix TOC nested item over-indentation caused by global ul margin-left: 40px
  bleeding into the nav; reset margin to 0 and apply a modest 0.75rem
  padding-left only on nested lists via a scoped .nested class
- Reduce Toc nav max-width from 250px to 220px

Author: josecelano

src/lib/components/atoms/Toc.svelte

@@ -57,7 +57,7 @@
 			top: 0;
 			z-index: 100;
 			background-color: inherit;
-			max-width: 250px;
+			max-width: 220px;
 		}
 	}
 </style>

src/lib/components/atoms/Tree.svelte

@@ -12,16 +12,16 @@
 	let { tree = [], activeHeadingIdxs, item, level = 1 }: Props = $props();
 </script>
 
-<ul class="mt-0 list-none {level !== 1 ? 'pl-4' : ''}">
+<ul class="mt-0 list-none {level !== 1 ? 'nested' : ''}">
 	{#if tree && tree.length}
 		{#each tree as heading, i (i)}
-			<li class="mt-0 pt-2 list-none">
+			<li class="mt-0 pt-1.5 list-none">
 				<!-- Tailwind: Removes bullets -->
 				<a
 					href="#{heading.id}"
 					use:melt={$item(heading.id)}
-					class="inline-flex items-center justify-center gap-1 text-white no-underline transition-colors
-		 hover:text-red-500 data-[active]:text-red-500 break-keep"
+					class="inline-flex items-start justify-start gap-1 text-sm text-gray-400 no-underline transition-colors
+		 hover:text-gray-100 data-[active]:text-red-400 break-keep leading-snug"
 				>
 					<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 					{@html heading.node.innerHTML}
@@ -38,6 +38,11 @@
 	ul {
 		list-style: none !important;
 		padding-left: 0 !important;
+		margin: 0 !important;
+	}
+
+	ul.nested {
+		padding-left: 0.75rem !important;
 	}
 
 	li {

src/lib/scss/_base.scss

@@ -5,8 +5,6 @@ ol {
 
 	li {
 		margin: 6px 0;
-		word-wrap: break-word;
-		word-break: break-all;
 		overflow-wrap: break-word;
 		white-space: normal;
 

src/lib/scss/global.scss

@@ -32,8 +32,6 @@ body {
 
 a {
 	color: rgba(255, 49, 0, 0.96);
-	word-wrap: break-word;
-	word-break: break-all;
 	overflow-wrap: break-word;
 	white-space: normal;
 }