diff --git a/boostlook.css b/boostlook.css
index f8bae66..ee0ecdb 100644
--- a/boostlook.css
+++ b/boostlook.css
@@ -542,10 +542,14 @@ p, h1, h2, h3, h4, h5, h6 {
     overflow-y: auto;
   }
 
-  .boostlook:not(#libraryReadMe) {
+  .boostlook {
     margin-left: 18rem;
   }
 
+  .boostlook#libraryReadMe {
+     margin-left: 0;
+  }
+
   .boostlook #toggle-toc {
     position: fixed;
     top: 2rem;
@@ -585,8 +589,6 @@ p, h1, h2, h3, h4, h5, h6 {
   }
 
   html.toc-hidden .boostlook #toc.toc2 {
-    width: 0;
-    opacity: 0;
     visibility: hidden;
   }
 
diff --git a/boostlook.rb b/boostlook.rb
index 21e2b57..93211cc 100644
--- a/boostlook.rb
+++ b/boostlook.rb
@@ -1,74 +1,66 @@
 Asciidoctor::Extensions.register do
   postprocessor do
     process do |doc, output|
-      output = output.sub(/<body(.*?)>/, '<body\\1><div class="boostlook">')
-      output = output.sub(/<\/body>/, "</div></body>")
-      output = output.sub(/(<div id="toc".*?>)/, '<button id="toggle-toc" title="Show Table of Contents" aria-expanded="false" aria-controls="toc">☰</button>\\1')
-
-      output = output.sub(/(<div id="footer".*?>)/, '</div>\\1')
-
-      inline_script = <<~SCRIPT
-        <script>
-        (function() {
-          var isVisible = localStorage.getItem('tocVisible') === 'true';
-          var isPinned = localStorage.getItem('tocPinned') === 'true';
-          document.documentElement.classList.toggle('toc-visible', isVisible);
-          document.documentElement.classList.toggle('toc-hidden', !isVisible);
-          document.documentElement.classList.toggle('toc-pinned', isPinned);
-        })();
-        </script>
-      SCRIPT
-      output = output.sub(/<\/head>/, "#{inline_script}</head>")
+      output = output.sub(/(<body[^>]*>)/, '\1<div class="boostlook">')
+      output = output.sub('</body>', '</div></body>')
+      output = output.sub(/(<body.*?<div[^>]*id="toc"[^>]*>)/m, '\1<button id="toggle-toc" title="Show Table of Contents" aria-expanded="false" aria-controls="toc">☰</button>')
+      output = output.sub(/(<body.*?<div[^>]*id="footer"[^>]*>)/m, '</div>\1')
 
       script_tag = <<~SCRIPT
         <script>
-        document.addEventListener("DOMContentLoaded", (event) => {
-          const tocButton = document.getElementById("toggle-toc");
-          const toc = document.getElementById("toc");
+        (function() {
           const html = document.documentElement;
+          const isPinned = localStorage.getItem('tocPinned') === 'true';
 
-          let isVisible = localStorage.getItem("tocVisible") === "true";
-          let isPinned = localStorage.getItem("tocPinned") === "true";
-
-          function updateTocVisibility(visible) {
-            html.classList.toggle("toc-visible", visible);
-            html.classList.toggle("toc-hidden", !visible);
-            tocButton.setAttribute("aria-expanded", visible);
-            tocButton.textContent = visible ? "×" : "☰";
-            tocButton.setAttribute("title", visible ? "Hide Table of Contents" : "Show Table of Contents");
+          html.classList.add('toc-hidden');
+          if (isPinned) {
+            html.classList.add('toc-pinned');
+            html.classList.add('toc-visible');
+            html.classList.remove('toc-hidden');
           }
 
-          function updateTocPinned(pinned) {
-            html.classList.toggle("toc-pinned", pinned);
-            localStorage.setItem("tocPinned", pinned);
-          }
+          document.addEventListener("DOMContentLoaded", () => {
+            const tocButton = document.getElementById("toggle-toc");
+            const toc = document.getElementById("toc");
 
-          tocButton.addEventListener("click", () => {
-            isVisible = !isVisible;
-            isPinned = !isPinned;
-            updateTocVisibility(isVisible);
-            updateTocPinned(isPinned);
-            localStorage.setItem("tocVisible", isVisible);
-            localStorage.setItem("tocPinned", isPinned);
-          });
+            if (!tocButton || !toc) return;
 
-          tocButton.addEventListener("mouseenter", () => {
-            if (!isVisible) {
-              updateTocVisibility(true);
+            let isPinned = localStorage.getItem('tocPinned') === 'true';
+
+            function updateTocVisibility(visible) {
+              html.classList.toggle("toc-visible", visible);
+              html.classList.toggle("toc-hidden", !visible);
+              tocButton.setAttribute("aria-expanded", visible);
+              tocButton.textContent = visible ? "×" : "☰";
+              tocButton.setAttribute("title", visible ? "Hide Table of Contents" : "Show Table of Contents");
             }
-          });
 
-          toc.addEventListener("mouseleave", () => {
-            if (!isVisible) {
-              updateTocVisibility(false);
-            }
-          });
+            tocButton.addEventListener("click", () => {
+              isPinned = !isPinned;
+              localStorage.setItem('tocPinned', isPinned);
+              html.classList.toggle('toc-pinned', isPinned);
+              updateTocVisibility(isPinned);  state
+            });
 
-          updateTocVisibility(isVisible);
-        });
+            tocButton.addEventListener("mouseenter", () => {
+              if (!isPinned) {
+                updateTocVisibility(true);
+              }
+            });
+
+            toc.addEventListener("mouseleave", () => {
+              if (!isPinned) {
+                updateTocVisibility(false);
+              }
+            });
+
+            updateTocVisibility(isPinned);
+          });
+        })();
         </script>
       SCRIPT
-      output = output.sub(/<\/body>/, "#{script_tag}</body>")
+
+      output = output.sub('</body>', "#{script_tag}</body>")
 
       output
     end