diff --git a/boostlook_old.css b/boostlook_old.css
new file mode 100644
index 0000000..421437b
--- /dev/null
+++ b/boostlook_old.css
@@ -0,0 +1,1981 @@
+/**
+ * Boost Look CSS Framework
+ * Version: 1.0.0
+ * Description: A comprehensive CSS framework for styling Boost C++ Library documentation
+ * Author: Boost C++ Libraries
+ * License: BSL-1.0
+ */
+
+/**
+ * File Structure Overview:
+ * 1. Root Variables (Light/Dark themes)
+ * 2. HTML Variables
+ * 3. Font-Face Declarations
+ * 4. CSS Reset
+ * 5. Global Styles for .boostlook
+ * 6. Styling for Scrollbar Display
+ * 7. AsciiDoctor-specific Styles
+ * 8. Antora Templates Styles
+ * 9. Quickbook Documentation Styles
+ * 10. Library README Styles
+ */
+
+/**
+ * Template Structure:
+ * The framework supports these main documentation templates:
+ *
+ * 1. AsciiDoctor Template:
+ * example: https://www.boost.io/doc/libs/1_87_0/libs/charconv/doc/html/charconv.html
+ * <div class="boostlook">
+ *   <div class="header">
+ *     <h1>Title</h1>
+ *     <div id="toc" class="toc2">
+ *         <button id="toggle-toc">Show Table of Contents</button>
+ *         <ul class="sectlevel1">TOC Links</ul>
+ *     </div>
+ *   </div>
+ *   <div id="content">
+ *     <div class="sect1">Content Sections</div>
+ *   </div>
+ *   <div id="footer">Footer Content</div>
+ * </div>
+ *
+ * 2. Antora Template:
+ * example: https://www.boost.io/doc/libs/1_87_0/doc/antora/url/index.html
+ * <div class="boostlook">
+ *   <div id="header">
+ *     <div id="toc" class="nav-container toc2">Navigation</div>
+ *   </div>
+ *   <div id="content">
+ *     <article class="doc max-width-reset">
+ *       <div class="toolbar">Breadcrumbs and Spirit Nav</div>
+ *       <h1>Title</h1>
+ *       <div class="sect1">Content Sections</div>
+ *     </article>
+ *   </div>
+ *   <div id="footer">Footer Content</div>
+ * </div>
+ *
+ * 3. Quickbook Template:
+ * example: https://www.boost.io/doc/libs/1_87_0/doc/html/accumulators.html
+ * <div class="boostlook">
+ *    <div class="spirit-nav">Navigation</div>
+ *    <div class="chapter">  <!-- might also be .section, .refentry, .document, or .book -->
+ *        <div class="titlepage">Title and information</div>
+ *        <div class="toc">Table of Contents</div>
+ *        <div class="section>Content</div>
+ *        <div class="copyright-footer">Footer</div>
+ *    </div>
+ * </div>
+ *
+ * 4. README Template:
+ * example: https://www.boost.io/library/1.87.0/beast/
+ * <section id="libraryReadMe" class="boostlook">ReadMe Content</section>
+ */
+
+/**
+ * Design Philosophy:
+ * - Consistent styling across different documentation templates
+ * - Responsive design with mobile-first approach
+ * - Dark/Light theme support
+ * - Accessible typography and color schemes
+ * - Modern scrolling and navigation experience
+ */
+
+/*----------------- Root Variables - Start -----------------*/
+
+/* Root CSS Variables
+ * Defines core design tokens used throughout the framework.
+ * Organized into:
+ * 1. General Variables (cross-theme)
+ * 2. Light Theme Variables
+ * 3. Dark Theme Variables
+ */
+
+:root {
+  /* General Variables - Core design tokens for all themes */
+  --bl-primary-color: rgb(255, 159, 0);  /* Boost's signature orange color */
+  --bl-header-height: 2.5rem;            /* Standard header height */
+
+  /* Light Theme Variables - Color scheme for light mode */
+  /* General Variables */
+  --light-bl-secondary-color: rgb(2, 132, 199);
+
+  /* Background and Border Colors */
+  --light-bl-background: rgb(255, 255, 255);
+  --light-bl-border-color: rgb(209, 209, 209);
+  --light-bl-card-background-color: rgb(255, 255, 255);
+  --light-bl-code-background: rgb(248, 248, 248);
+  --light-bl-code-border-color: rgb(220, 220, 220);
+  --light-bl-pre-background: rgb(248, 248, 248);
+  --light-bl-quote-background: rgb(255, 255, 255);
+  --light-bl-table-head-background: rgb(248, 248, 248);
+  --light-bl-table-stripe-color: rgb(248, 248, 248);
+  --light-bl-tabpanel-background: rgb(255, 255, 255);
+
+  /* Text Colors */
+  --light-bl-code-text-color: rgb(0, 0, 0);
+  --light-bl-header-color: rgb(49, 74, 87);
+  --light-bl-nav-link-color: rgb(51, 65, 85);
+  --light-bl-paragraph-color: rgb(0, 0, 0);
+  --light-bl-text-color: rgb(51, 65, 85);
+
+  /* Interactive Elements */
+  --light-bl-link-color: rgb(2, 132, 199);
+  --light-bl-link-hover-color: rgba(255, 159, 0);
+  --light-bl-nav-link-hover-color: rgb(2, 132, 199);
+
+  /* Syntax Highlighting */
+  --light-bl-hljs-attribute-color: rgb(70, 130, 180);
+  --light-bl-hljs-doctag-color: rgb(221, 17, 68);
+  --light-bl-hljs-keyword-color: rgb(51, 51, 51);
+  --light-bl-hljs-number-color: rgb(0, 128, 128);
+  --light-bl-hljs-section-color: rgb(153, 0, 0);
+
+  /* UI Elements */
+  --light-bl-breadcrumbs-svg-color: rgb(0, 0, 0);
+  --light-bl-caret-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%23000000'%3E%3Cpath%20d='M320-200v-560l440%20280-440%20280Z'/%3E%3C/svg%3E");
+  --light-bl-nav-fade-color: rgb(255, 255, 255, 1);
+  --light-bl-pasteboard-color: rgb(229, 231, 235);
+
+  /* Scrollbar Colors */
+  --light-bl-scrollbar-track-color: rgb(234, 240, 243);
+  --light-bl-scrollbar-thumb-color: rgb(193, 193, 193);
+  --light-bl-scrollbar_hover-thumb-color: rgb(193, 193, 193);
+
+  /* Additional Theme Variables */
+  --light-bl-table-border-color: rgb(209, 209, 209);
+  --light-bl-tab-background: rgb(240, 240, 240);
+
+  /**
+   * Dark Theme Variables
+   * Color palette and design tokens for dark mode
+   */
+  /* General Variables */
+  --dark-bl-secondary-color: rgb(125, 211, 252);
+
+  /* Background and Border Colors */
+  --dark-bl-background: rgb(5, 26, 38);
+  --dark-bl-border-color: rgb(3, 25, 37);
+  --dark-bl-card-background-color: rgb(23, 42, 52);
+  --dark-bl-code-background: rgb(5, 26, 38);
+  --dark-bl-code-border-color: transparent;
+  --dark-bl-pre-background: rgb(5, 26, 38);
+  --dark-bl-quote-background: rgb(11, 59, 82);
+  --dark-bl-table-head-background: rgb(5, 26, 38);
+  --dark-bl-table-stripe-color: rgb(49,74,87);
+  --dark-bl-table-border-color: rgb(49, 74, 87);
+  --dark-bl-tabpanel-background: rgb(49, 74, 87);
+  --dark-bl-tab-background: rgb(30, 50, 65);
+
+  /* Text Colors */
+  --dark-bl-code-text-color: rgb(255, 255, 255);
+  --dark-bl-header-color: rgb(255, 255, 255);
+  --dark-bl-nav-link-color: rgb(255, 255, 255);
+  --dark-bl-paragraph-color: rgb(255, 255, 255);
+  --dark-bl-text-color: rgb(255, 255, 255);
+
+  /* Interactive Elements */
+  --dark-bl-link-color: rgb(125, 211, 252);
+  --dark-bl-link-hover-color: rgb(255, 159, 0);
+  --dark-bl-nav-link-hover-color: rgb(2, 132, 199);
+
+  /* Syntax Highlighting */
+  --dark-bl-hljs-attribute-color: rgb(70, 130, 180);
+  --dark-bl-hljs-doctag-color: rgb(255, 99, 132);
+  --dark-bl-hljs-keyword-color: rgb(173, 216, 230);
+  --dark-bl-hljs-number-color: rgb(72, 209, 204);
+  --dark-bl-hljs-section-color: rgb(255, 69, 58);
+
+  /* UI Elements */
+  --dark-bl-breadcrumbs-svg-color: rgb(255, 255, 255);
+  --dark-bl-caret-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%23ccc'%3E%3Cpath%20d='M320-200v-560l440%20280-440%20280Z'/%3E%3C/svg%3E");
+  --dark-bl-nav-fade-color: rgb(23, 42, 52);
+  --dark-bl-pasteboard-color: rgb(05, 26, 38);
+  --dark-bl-pagination-color: rgb(200, 200, 200);
+  --dark-bl-quote-word-color: rgb(209, 228, 242);
+
+  /* Scrollbar Colors */
+  --dark-bl-scrollbar-track-color: rgb(46, 58, 66);
+  --dark-bl-scrollbar-thumb-color: rgb(109, 124, 133);
+  --dark-bl-scrollbar_hover-thumb-color: rgb(147, 161, 170);
+
+  /**
+   * Specific Use Colors
+   * Special purpose colors for both light and dark themes
+   */
+  /* Light Theme Special Colors */
+  --site-light-red: red;
+  --site-light-green: green;
+  --site-light-lime: #00FF00;
+  --site-light-blue: blue;
+  --site-light-navy: rgb(20, 20, 164);
+  --site-light-yellow: yellow;
+  --site-light-magenta: magenta;
+  --site-light-indigo: #4B0082;
+  --site-light-cyan: cyan;
+  --site-light-purple: purple;
+  --site-light-gold: #987301;
+  --site-light-silver: silver;
+  --site-light-gray: #808080;
+
+  /* Dark Theme Special Colors */
+  --site-dark-red: #fa6f6f;
+  --site-dark-green: #45b945;
+  --site-dark-lime: #00FF00;
+  --site-dark-blue: #6666f8;
+  --site-dark-navy: #6060c4;
+  --site-dark-yellow: yellow;
+  --site-dark-magenta: magenta;
+  --site-dark-indigo: #a53def;
+  --site-dark-cyan: cyan;
+  --site-dark-purple: #ac43ac;
+  --site-dark-gold: gold;
+  --site-dark-silver: silver;
+  --site-dark-gray: #808080;
+}
+
+/*----------------- Root Variables - End -----------------*/
+
+/*----------------- HTML Variables - Start -----------------*/
+
+/**
+ * HTML Theme Variables
+ * These variables are applied to the HTML element and control the active theme.
+ * The framework supports two themes:
+ * 1. Light Theme (default)
+ * 2. Dark Theme (activated by html.dark class)
+ */
+
+/* Light Theme (Default) Configuration */
+html {
+  /* General Variables */
+  --bl-secondary-color: var(--light-bl-secondary-color);
+
+  /* Background and Borders */
+  --bl-background: var(--light-bl-background);
+  --bl-border-color: var(--light-bl-border-color);
+  --bl-card-background-color: var(--light-bl-card-background-color);
+  --bl-code-background: var(--light-bl-code-background);
+  --bl-code-border-color: var(--light-bl-code-border-color);
+  --bl-pre-background: var(--light-bl-pre-background);
+  --bl-quote-background: var(--light-bl-quote-background);
+  --bl-table-border-color: var(--light-bl-table-border-color);
+  --bl-table-head-background: var(--light-bl-table-head-background);
+  --bl-table-stripe-color: var(--light-bl-table-stripe-color);
+  --bl-tabpanel-background: var(--light-bl-tabpanel-background);
+
+  /* Typography and Colors */
+  --bl-code-text-color: var(--light-bl-code-text-color);
+  --bl-header-color: var(--light-bl-header-color);
+  --bl-link-color: var(--light-bl-link-color);
+  --bl-link-hover-color: var(--light-bl-link-hover-color);
+  --bl-nav-link-color: var(--light-bl-nav-link-color);
+  --bl-nav-link-hover-color: var(--light-bl-nav-link-hover-color);
+  --bl-nav-fade-color: var(--light-bl-nav-fade-color);
+  --bl-paragraph-color: var(--light-bl-paragraph-color);
+  --bl-text-color: var(--light-bl-text-color);
+
+  /* UI Components */
+  --bl-breadcrumbs-svg-color: var(--light-bl-breadcrumbs-svg-color);
+  --bl-caret-svg: var(--light-bl-caret-svg);
+  --bl-pasteboard-color: var(--light-bl-pasteboard-color);
+
+  /* Syntax Highlighting */
+  --bl-hljs-doctag-color: var(--light-bl-hljs-doctag-color);
+  --bl-hljs-attribute-color: var(--light-bl-hljs-attribute-color);
+  --bl-hljs-keyword-color: var(--light-bl-hljs-keyword-color);
+  --bl-hljs-number-color: var(--light-bl-hljs-number-color);
+  --bl-hljs-section-color: var(--light-bl-hljs-section-color);
+
+  /* Scrollbar Styling */
+  --bl-scrollbar-track-color: var(--light-bl-scrollbar-track-color);
+  --bl-scrollbar-thumb-color: var(--light-bl-scrollbar-thumb-color);
+  --bl-scrollbar_hover-thumb-color: var(--light-bl-scrollbar_hover-thumb-color);
+
+  /* Special Purpose Colors */
+  --color-red: var(--site-light-red);
+  --color-green: var(--site-light-green);
+  --color-lime: var(--site-light-lime);
+  --color-blue: var(--site-light-blue);
+  --color-navy: var(--site-light-navy);
+  --color-yellow: var(--site-light-yellow);
+  --color-magenta: var(--site-light-magenta);
+  --color-indigo: var(--site-light-indigo);
+  --color-cyan: var(--site-light-cyan);
+  --color-purple: var(--site-light-purple);
+  --color-gold: var(--site-light-gold);
+  --color-silver: var(--site-light-silver);
+  --color-gray: var(--site-light-gray);
+}
+
+/* Dark Theme Configuration */
+html.dark {
+  /* General Variables */
+  --bl-secondary-color: var(--dark-bl-secondary-color);
+
+  /* Background and Borders */
+  --bl-background: var(--dark-bl-background);
+  --bl-border-color: var(--dark-bl-border-color);
+  --bl-card-background-color: var(--dark-bl-card-background-color);
+  --bl-code-background: var(--dark-bl-code-background);
+  --bl-code-border-color: var(--dark-bl-code-border-color);
+  --bl-pre-background: var(--dark-bl-code-background);
+  --bl-quote-background: var(--dark-bl-quote-background);
+  --bl-quote-word-color: var(--dark-bl-quote-word-color);
+  --bl-table-border-color: var(--dark-bl-table-border-color);
+  --bl-table-head-background: var(--dark-bl-table-head-background);
+  --bl-table-stripe-color: var(--dark-bl-table-stripe-color);
+  --bl-tabpanel-background: var(--dark-bl-tabpanel-background);
+
+  /* Typography and Colors */
+  --bl-code-text-color: var(--dark-bl-code-text-color);
+  --bl-header-color: var(--dark-bl-header-color);
+  --bl-link-color: var(--dark-bl-link-color);
+  --bl-link-hover-color: var(--dark-bl-link-hover-color);
+  --bl-nav-link-color: var(--dark-bl-nav-link-color);
+  --bl-nav-link-hover-color: var(--dark-bl-nav-link-hover-color);
+  --bl-nav-fade-color: var(--dark-bl-nav-fade-color);
+  --bl-paragraph-color: var(--dark-bl-paragraph-color);
+  --bl-text-color: var(--dark-bl-text-color);
+
+  /* UI Components */
+  --bl-breadcrumbs-svg-color: var(--dark-bl-breadcrumbs-svg-color);
+  --bl-caret-svg: var(--dark-bl-caret-svg);
+  --bl-pasteboard-color: var(--dark-bl-pasteboard-color);
+  --bl-pagination-color: var(--dark-bl-pagination-color);
+
+  /* Syntax Highlighting */
+  --bl-hljs-attribute-color: var(--dark-bl-hljs-attribute-color);
+  --bl-hljs-doctag-color: var(--dark-bl-hljs-doctag-color);
+  --bl-hljs-keyword-color: var(--dark-bl-hljs-keyword-color);
+  --bl-hljs-number-color: var(--dark-bl-hljs-number-color);
+  --bl-hljs-section-color: var(--dark-bl-hljs-section-color);
+
+  /* Scrollbar Styling */
+  --bl-scrollbar-track-color: var(--dark-bl-scrollbar-track-color);
+  --bl-scrollbar-thumb-color: var(--dark-bl-scrollbar-thumb-color);
+  --bl-scrollbar_hover-thumb-color: var(--dark-bl-scrollbar_hover-thumb-color);
+
+  /* Special Purpose Colors */
+  --color-red: var(--site-dark-red);
+  --color-green: var(--site-dark-green);
+  --color-lime: var(--site-dark-lime);
+  --color-blue: var(--site-dark-blue);
+  --color-navy: var(--site-dark-navy);
+  --color-yellow: var(--site-dark-yellow);
+  --color-magenta: var(--site-dark-magenta);
+  --color-indigo: var(--site-dark-indigo);
+  --color-cyan: var(--site-dark-cyan);
+  --color-purple: var(--site-dark-purple);
+  --color-gold: var(--site-dark-gold);
+  --color-silver: var(--site-dark-silver);
+  --color-gray: var(--site-dark-gray);
+}
+
+/*----------------- HTML Variables - End -----------------*/
+
+/*----------------- Font-Face Declarations start -----------------*/
+
+/**
+ * Typography Configuration
+ * The framework uses Noto Sans family as its primary font system:
+ * 1. Noto Sans Display: Main text font with variable weight support
+ * 2. Noto Sans Mono: Monospace font for code blocks
+ *
+ * Font Loading Strategy:
+ * - Multiple source paths for resilient loading
+ * - Variable fonts for optimal performance
+ * - Font-display: block to prevent FOIT (Flash of Invisible Text)
+ */
+
+/* Noto Sans Display - Regular */
+@font-face {
+  font-family: "Noto Sans Display";
+  font-style: normal;
+  font-weight: 100 900;            /* Variable font weight range */
+  font-variation-settings: "wght" 400;
+  font-stretch: semi-condensed;
+  font-display: block;             /* Prevents FOIT */
+  src: url('/_/fonts/NotoSansDisplay.ttf') format('truetype'),
+       url('../../../../tools/boostlook/NotoSansDisplay.ttf') format('truetype'),
+       url("https://cppalliance.org/fonts/NotoSansDisplay.ttf") format('truetype');
+}
+
+/* Noto Sans Display - Italic */
+@font-face {
+  font-family: "Noto Sans Display";
+  font-style: italic;
+  font-weight: 100 900;            /* Variable font weight range */
+  font-variation-settings: "wght" 400;
+  font-stretch: semi-condensed;
+  font-display: block;             /* Prevents FOIT */
+  src: url("/font/NotoSansDisplay-Italic.ttf") format("truetype"),
+       url("../../../../tools/boostlook/NotoSansDisplay-Italic.ttf") format("truetype"),
+       url("https://cppalliance.org/fonts/NotoSansDisplay-Italic.ttf") format('truetype');
+}
+
+/* Noto Sans Mono - Variable Weight */
+@font-face {
+  font-family: "Noto Sans Mono";
+  font-style: normal;
+  font-weight: 100 900;            /* Variable font weight range */
+  font-variation-settings: "wght" 400;
+  font-stretch: semi-condensed;
+  font-display: block;             /* Prevents FOIT */
+  src: url("/_/boostlook/NotoSansMono.ttf") format("truetype"),
+       url("../../../../tools/boostlook/NotoSansMono.ttf") format("truetype"),
+       url("https://cppalliance.org/fonts/NotoSansMono.ttf") format('truetype');
+}
+
+/* Noto Sans Mono - Fixed Weight */
+@font-face {
+  font-family: "Noto Sans Mono";
+  font-style: normal;
+  font-weight: 400;                /* Fixed weight for specific use cases */
+  font-stretch: ultra-condensed;
+  font-display: block;             /* Prevents FOIT */
+  src: url("/_/boostlook/NotoSansMono.ttf") format("truetype"),
+       url("../../../../tools/boostlook/NotoSansMono.ttf") format("truetype"),
+       url("https://cppalliance.org/fonts/NotoSansMono.ttf") format('truetype');
+}
+
+/*----------------- Font-Face Declarations end -----------------*/
+
+/*----------------- CSS Reset start -----------------*/
+
+/**
+ * Modern CSS Reset
+ * A minimal CSS reset that:
+ * 1. Uses modern box-sizing model
+ * 2. Removes default margins
+ * 3. Improves text rendering
+ * 4. Handles media elements consistently
+ * 5. Normalizes form elements
+ * 6. Prevents text overflow issues
+ * 7. Provides proper stacking context
+ */
+
+/* Box sizing rules */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin */
+* {
+  margin: 0;
+}
+
+/* Body defaults */
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;  /* Improves text rendering on WebKit */
+}
+
+/* Media elements */
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;                      /* Responsive media elements */
+}
+
+/* Form elements */
+input, button, textarea, select {
+  font: inherit;                        /* Inherit typography */
+}
+
+/* Text elements */
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;            /* Prevent text overflow */
+}
+
+/* Stacking context */
+#root, #__next {
+  isolation: isolate;                   /* Create new stacking context */
+}
+
+/*----------------- CSS Reset end -----------------*/
+
+/*----------------- Global Styles for .boostlook start -----------------*/
+
+/**
+ * Global Styles for .boostlook
+ * Core styles that apply to all .boostlook containers regardless of template.
+ * These styles establish:
+ * 1. Typography hierarchy and spacing
+ * 2. Link appearances and interactions
+ * 3. Code block formatting
+ * 4. List and table styles
+ * 5. Layout structure and spacing
+ */
+
+/* Base Container */
+.boostlook {
+  font-family: "Noto Sans Display" !important;
+  font-stretch: 90%;
+}
+
+/* Typography Hierarchy
+ * Establishes consistent heading sizes and spacing
+ * while maintaining proper visual hierarchy
+ */
+.boostlook h1,
+.boostlook h2,
+.boostlook h3,
+.boostlook h4,
+.boostlook h5,
+.boostlook h6 {
+  display: block;
+  line-height: 1;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  font-weight: 500;
+  position: relative;
+}
+
+/* Heading Sizes */
+.boostlook h1 { font-size: 1.8rem; }    /* Primary headings */
+.boostlook h2 { font-size: 1.65rem; }   /* Section headings */
+.boostlook h3 { font-size: 1.5rem; }    /* Subsection headings */
+.boostlook h4 { font-size: 1.35rem; }   /* Topic headings */
+.boostlook h5 { font-size: 1.25rem; }   /* Subtopic headings */
+.boostlook h6 { font-size: 1rem; }      /* Minor headings */
+
+/* Document-specific heading adjustments */
+.boostlook .doc h2:not(.discrete) {
+  margin-left: 0;
+  padding-left: 0;
+}
+
+/* Anchor positioning within headings */
+.boostlook .doc h1 .anchor {
+  margin: 3px 0 0 -1.3ex;
+}
+
+.boostlook .doc h2 .anchor,
+.boostlook .doc h3 .anchor {
+  margin: 2px 0 0 -1.3ex;
+}
+
+.boostlook .doc h4 .anchor,
+.boostlook .doc h5 .anchor,
+.boostlook .doc h6 .anchor {
+  margin: 1px 0 0 -1.3ex;
+}
+
+/* Paragraph Styling */
+.boostlook p {
+  font-size: 1rem;
+  margin-bottom: 1.5rem;
+  color: var(--bl-text-color);
+  padding-top: initial !important;
+  padding-bottom: initial !important;
+}
+
+/* Special paragraph cases */
+.boostlook table p,
+.boostlook ul p {
+  margin: 0;
+}
+
+/* Link Styling */
+.boostlook a,
+.boostlook .doc a {
+  color: var(--bl-link-color);
+  text-decoration: none;
+}
+
+/* Link Hover States */
+.boostlook a:hover,
+.boostlook .doc a:hover,
+#libraryReadMe a:hover,
+#boost-legacy-docs-wrapper a:hover {
+  color: var(--bl-link-hover-color);
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+/* Link States */
+.boostlook p a:visited,
+.boostlook table a,
+.boostlook .pagination a {
+  color: var(--bl-link-color);
+}
+
+/* Code Block Styling */
+.boostlook code,
+.boostlook pre code,
+.boostlook .doc .content pre code {
+  border-color: var(--bl-code-border-color);
+  color: var(--bl-code-text-color);
+  padding: 1.2em .8em;
+  font-family: "Noto Sans Mono", monospace;
+  margin-bottom: 1.25rem;
+}
+
+/* Emphasis within code */
+.boostlook em,
+.boostlook code em {
+  font-family: "Noto Sans Display";
+  font-size: inherit;
+}
+
+/* Table Headings */
+.boostlook h6:has(+table) {
+  margin-left: 1em;
+}
+
+/* List Styling */
+.boostlook ul.itemizedlist,
+#boost-legacy-docs-wrapper .ulist ul {
+  padding: 0 0 0 15px;
+  margin: 0;
+}
+
+/* Code Styling */
+.boostlook h2 a code {
+  color: var(--bl-nav-link-color);
+  font-size: 1.65rem;
+}
+
+.boostlook h3 a code,
+.boostlook h3 a:hover code {
+  color: var(--bl-nav-link-color) !important;
+  font-size: 1.5rem;
+}
+
+.boostlook code,
+.boostlook p code,
+.boostlook li code,
+.boostlook .doc p code,
+.boostlook .doc table code,
+.boostlook .doc .colist > table code {
+  background: none;
+  padding: 0;
+  font-weight: 400;
+  font-stretch: 90%;
+  color: var(--bl-code-text-color) !important;
+}
+
+/* Code Links */
+.boostlook code a,
+.boostlook p code a,
+.boostlook li code a,
+.boostlook .doc p code a,
+.boostlook .doc table code a,
+.boostlook .doc .colist > table code a,
+.boostlook a code,
+.boostlook p a code,
+.boostlook li a code,
+.boostlook .doc p a code,
+.boostlook .doc table a code,
+.boostlook .doc .colist > table a code {
+  color: var(--bl-link-color) !important;
+}
+
+/* Code Link Hover States */
+.boostlook code a:hover,
+.boostlook p code a:hover,
+.boostlook li code a:hover,
+.boostlook .doc p code a:hover,
+.boostlook .doc table code a:hover,
+.boostlook .doc .colist > table code a:hover,
+.boostlook a:hover code,
+.boostlook p a:hover code,
+.boostlook li a:hover code,
+.boostlook .doc p a:hover code,
+.boostlook .doc table a:hover code,
+.boostlook .doc .colist > table a:hover code {
+  color: var(--bl-link-hover-color) !important;
+}
+
+/* Table Cell Code */
+.boostlook td code {
+  margin-bottom: 10px;
+}
+
+/* Quote Blocks */
+.boostlook .quoteblock,
+.boostlook .verseblock {
+  background: var(--bl-quote-background);
+  border-left: 3px solid var(--bl-border-color);
+  color: var(--bl-text-color);
+}
+
+.boostlook .quoteblock::before,
+.boostlook .verseblock::before {
+  color: var(--bl-quote-word-color);
+}
+
+/* Tab Panels */
+.boostlook .tabpanel {
+  background-color: var(--bl-tabpanel-background);
+}
+
+/* Syntax Highlighting */
+.boostlook .hljs-keyword,
+.boostlook .hljs-selector-tag,
+.boostlook .hljs-subst {
+  color: var(--bl-hljs-keyword-color);
+}
+
+.boostlook .hljs-number {
+  color: var(--bl-hljs-number-color);
+}
+
+.boostlook .hljs-doctag,
+.boostlook .hljs-string {
+  color: var(--bl-hljs-doctag-color);
+}
+
+.boostlook .hljs-section,
+.boostlook .hljs-selector-id,
+.boostlook .hljs-title {
+  color: var(--bl-hljs-section-color);
+}
+
+.boostlook .hljs-attribute,
+.boostlook .hljs-name,
+.boostlook .hljs-tag {
+  color: var(--bl-hljs-attribute-color);
+}
+
+/* Pagination */
+.boostlook nav.pagination span::before {
+  color: var(--bl-pagination-color);
+}
+
+/* Text Emphasis */
+.boostlook b,
+.boostlook strong {
+  font-variation-settings: "wght" 700;
+}
+
+/* Layout Structure */
+.boostlook #header,
+.boostlook #content,
+.boostlook #footer {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.boostlook #header {
+  padding-top: 1.25rem;
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+
+.boostlook #content {
+  padding-top: 1.25rem;
+  padding-bottom: .50rem;
+}
+
+.boostlook #footer {
+  padding-bottom: 1.25rem;
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
+
+/* First Heading Adjustment */
+.boostlook h2:first-of-type {
+  margin-top: 0;
+}
+
+/*----------------- Global Styles for .boostlook end -----------------*/
+
+/**
+ * Scrollbar Styling
+ * "Hide" scrollbar, and display on hover
+ * Comprehensive scrollbar customization for different contexts:
+ * 1. Global Scrollbar Styles
+ * 2. Template-specific adjustments
+ * 3. Code Elements
+ * 4. Table Containers
+ */
+
+/* Global Scrollbar Styles */
+.boostlook * {
+  scrollbar-color: initial !important;
+  scrollbar-width: initial !important;
+}
+.boostlook:not(:has(.doc)) ::-webkit-scrollbar {
+  width: 2px;
+  height: 2px;
+}
+
+.boostlook ::-webkit-scrollbar-track {
+  border-radius: 8px;
+  background-color: var( --bl-scrollbar-track-color);
+}
+
+.boostlook ::-webkit-scrollbar-thumb {
+  background-color: var( --bl-scrollbar-thumb-color); /* blend into background */
+}
+
+/* Template-specific Adjustments */
+
+/* Hide root scrollbars for Antora template */
+html:has(.article > .boostlook) {
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* Iframe container scrollbar handling */
+html:has(#docsiframe) {
+  overflow-y: hidden;
+}
+
+/* Chrome/Edge scrollbar for iframe container */
+html:has(#docsiframe)::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+/* Antora template - Scrollable content area */
+.boostlook #content:has(> .doc) {
+  overflow-y: auto;
+  height: 100vh;
+}
+
+.boostlook #content:has(> .doc)::-webkit-scrollbar,
+.boostlook .nav::-webkit-scrollbar {
+  width: 10px;
+}
+
+.boostlook #content:has(> .doc)::-webkit-scrollbar-thumb,
+.boostlook .nav::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+}
+
+
+/* Asciidoc template - Content overflow handling */
+.boostlook:has(#content > .sect1) {
+  overflow-y: auto;
+  height: 100vh;
+}
+
+/* Code Elements */
+.boostlook pre::-webkit-scrollbar-track,
+.boostlook code::-webkit-scrollbar-track {
+  background-color: var(--bl-pre-background);
+  border: 1px solid var(--bl-pre-background);
+}
+
+.boostlook pre::-webkit-scrollbar-thumb,
+.boostlook code::-webkit-scrollbar-thumb {
+  background-color: var(--bl-pre-background);
+}
+
+.boostlook pre:hover::-webkit-scrollbar-thumb,
+.boostlook code:hover::-webkit-scrollbar-thumb {
+  background-color: var(--bl-scrollbar-thumb-color);
+}
+
+.boostlook .doc pre,
+.boostlook p code,
+.boostlook table code,
+.boostlook p tt,
+.boostlook p kbd,
+.boostlook p samp,
+.boostlook p pre,
+.boostlook:not(:has(.doc)) pre,
+.boostlook code,
+.boostlook pre code,
+.boostlook .doc .content pre code,
+.boostlook#libraryReadMe pre code {
+  overflow-x: auto;
+  scrollbar-color: initial;
+  scrollbar-width: initial;
+}
+
+/* Table Container */
+.boostlook .content div:has(> table),
+.boostlook .doc table.tableblock,
+.boostlook #content .sect3:has(.tableblock) {
+  overflow-x: auto !important;
+}
+
+.boostlook .content div:has(> table)::-webkit-scrollbar-track,
+.boostlook .doc table.tableblock::-webkit-scrollbar-track,
+.boostlook #content .sect3:has(.tableblock)::-webkit-scrollbar-track {
+  border-radius: 1px;
+  background-color: var(--bl-background);
+}
+
+.boostlook .content div:has(> table)::-webkit-scrollbar-thumb,
+.boostlook .doc table.tableblock::-webkit-scrollbar-thumb,
+.boostlook #content .sect3:has(.tableblock)::-webkit-scrollbar-thumb {
+  background-color: var(--bl-background); /* blend into background */
+}
+
+.boostlook .content div:has(> table):hover::-webkit-scrollbar-thumb,
+.boostlook .doc table.tableblock:hover::-webkit-scrollbar-thumb,
+.boostlook #content .sect3:has(.tableblock):hover::-webkit-scrollbar-thumb {
+  background-color: var(--bl-scrollbar-thumb-color);
+  color: var(--bl-scrollbar-thumb-color);
+}
+
+/*----------------- Styles specific to AsciiDoctor content start -----------------*/
+
+/**
+ * AsciiDoctor-Specific Styles
+ * Styles that apply specifically to content generated by AsciiDoctor.
+ * These styles handle:
+ * 1. Article layout and structure
+ * 2. Table of contents (TOC) styling
+ * 3. Content formatting
+ * 4. Responsive design adjustments
+ */
+
+/* Article Layout */
+.article.toc2.toc-left {
+  min-height: 100vh;
+  max-width: 80rem;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: var(--bl-pasteboard-color);
+  position: relative;
+}
+
+/* Pre-formatted Text Blocks */
+.boostlook:not(:has(.doc)) pre {
+  font-family: "Noto Sans Mono", monospace;
+  background-color: var(--bl-pre-background);
+  margin-bottom: 1.25rem;
+  padding: 1rem;
+  border-color: var(--bl-code-border-color);
+}
+
+/* Table Styling */
+.boostlook:not(:has(.doc)) table {
+  border-collapse: collapse;
+  margin: 1em 0;
+  border: 1px solid var(--bl-table-border-color);
+}
+
+.boostlook:not(:has(.doc)) th {
+  background-color: var(--bl-table-head-background);
+  text-align: left;
+  padding: 0.25em 0.55em;
+}
+
+.boostlook:not(:has(.doc)) td {
+  border: 1px solid var(--bl-table-border-color);
+  padding: 0.25em 0.55em;
+}
+
+/* Header Adjustments */
+.boostlook #header > h1 {
+  margin-top: 0;
+}
+
+/* Table of Contents Styling */
+.boostlook #toc > ul.sectlevel1 {
+  padding-left: 0;
+}
+
+.boostlook #toc ul {
+  margin: 0;
+  padding: 0 0 0 0.8rem;
+  line-height: 1.5;
+  font-size: 1rem;
+  list-style: none;
+}
+
+/* Table of Contents Links */
+.boostlook #toc a {
+  color: var(--bl-nav-link-color);
+}
+
+.boostlook #toc a:hover,
+.boostlook #toc a:focus {
+  color: var(--bl-nav-link-hover-color);
+}
+
+.boostlook #toc.toc2 {
+  padding-bottom: 1.5rem;
+}
+
+.boostlook #toc .sectlevel1 > li > a {
+  font-variation-settings: "wght" 550;
+}
+
+.boostlook #toc #toctitle {
+  font-size: 1.5rem;
+}
+
+/* Background Colors */
+.boostlook #toc.toc2,
+.boostlook #header:not(:has(.nav-container)),
+.boostlook #content,
+.boostlook #footer {
+  background-color: var(--bl-card-background-color);
+}
+
+/* TOC Scrolling */
+.boostlook #toc.toc2,
+.boostlook #toc.toc2.nav-container {
+  overflow-y: auto;
+}
+
+/* TOC Positioning */
+.boostlook #toc.toc2,
+#boost-legacy-docs-wrapper:not(:has(article.doc)) #toc.toc2.is-active {
+  position: static;
+}
+
+#boost-legacy-docs-wrapper:not(:has(article.doc)) #toc.toc2 {
+  position: fixed;
+}
+
+/* TOC List Padding */
+.boostlook #toc.toc2 > ul {
+  padding-bottom: 2rem;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 0;
+}
+
+/* TOC Toggle Button */
+.boostlook #toggle-toc {
+  visibility: hidden;
+  height: 0;
+  width: 0;
+}
+
+/* TOC Navigation Menu */
+.boostlook #toc .nav-menu > .nav-list,
+.boostlook #toc .nav-menu > .nav-list > .nav-list {
+  padding-left: 0
+}
+
+/* Navigation Menu Title */
+.boostlook .nav-menu .title {
+  border-bottom: 1px solid var(--bl-table-border-color);
+  margin-bottom: 16px;
+}
+
+/* Legacy Documentation Titles */
+#boost-legacy-docs-wrapper h2.title {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+#boost-legacy-docs-wrapper h3.title,
+#boost-legacy-docs-wrapper.boostlook h3 {
+  font-weight: 550;
+  margin-bottom: 0.5rem;
+  font-feature-settings: normal;
+}
+
+/* Rouge Syntax Highlighting */
+.boostlook pre.rouge .o {
+  font-weight: 400;
+}
+
+.boostlook pre.rouge code span {
+  font-style: normal;
+}
+
+/* Responsive Design */
+@media screen and (min-width: 1024px) {
+  html {
+    font-size: .83333rem;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .boostlook #toggle-toc {
+    visibility: visible;
+    height: auto;
+    width: auto;
+  }
+
+  .article.toc2.toc-left {
+    padding: 1rem 1rem 0 1rem;
+  }
+
+  .boostlook #toc.toc2 {
+    border-radius: 0.5rem;
+  }
+
+  .boostlook #toc.toc2 {
+    position: fixed;
+    width: 17rem;
+    left: max(1rem, 50% - 39rem);
+    top: 1rem;
+    z-index: 1000;
+    height: calc(100vh - 1rem);
+    padding: 1rem;
+    padding: 1rem 1rem 1.5rem;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .boostlook {
+    margin-left: 18rem;
+  }
+
+  /* TOC Toggle Button */
+  .boostlook #toggle-toc {
+    position: fixed;
+    top: 2rem;
+    left: max(1rem, 50% - 39rem - 1rem);
+    background-color: rgb(255, 255, 255, 0.5);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22M400-240l240-240-240-240-56%2056%20184%20184-184%20184%2056%2056Z%22%2F%3E%3C%2Fsvg%3E");
+    background-repeat: no-repeat;
+    background-position: center;
+    border-radius: 1rem;
+    height: 2rem;
+    width: 2rem;
+    text-indent: -9999px;
+    z-index: 1001;
+  }
+
+  /* Hidden TOC */
+  html.toc-hidden .boostlook {
+    margin-left: 0;
+  }
+
+  html.toc-hidden .boostlook #toggle-toc {
+    left: max(0rem, 50% - 39rem - 1rem);
+  }
+
+  /* Visible TOC */
+  html.toc-visible .boostlook #toggle-toc {
+    left: max(0rem, 50% - 39rem - 1rem);
+    background-color: rgb(255, 255, 255, 1);
+  }
+
+  html.toc-visible .boostlook {
+    margin-left: 0;
+  }
+
+  html.toc-hidden .boostlook #toc.toc2 {
+    visibility: hidden;
+  }
+
+  html.toc-visible #toc.toc2 {
+    opacity: 1;
+    visibility: visible;
+    width: 250px;
+    padding-left: 1.5rem;
+  }
+
+  /* TOC Shadow States */
+  html.toc-visible:not(.toc-pinned) #toc.toc2 {
+    box-shadow: 4px 0 12px 0px rgba(0, 0, 0, 0.10);
+  }
+
+  /* TOC Pin States */
+  html.toc-visible.toc-pinned #toggle-toc {
+    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22M560-240%20320-480l240-240%2056%2056-184%20184%20184%20184-56%2056Z%22%2F%3E%3C%2Fsvg%3E");
+  }
+
+  html.toc-visible.toc-pinned .boostlook {
+    margin-left: 17rem;
+  }
+}
+
+/*----------------- Styles specific to AsciiDoctor content end -----------------*/
+
+/*----------------- Styles specific to Antora Templates start -----------------*/
+
+/**
+ * Antora Template Styles
+ * Specific styles for Antora-generated documentation.
+ * These styles handle:
+ * 1. Header and navigation layout
+ * 2. Typography customization
+ * 3. Navigation menu structure
+ * 4. Content layout and formatting
+ * 5. Responsive design adaptations
+ */
+
+/* Header Layout */
+.boostlook #header:has(.nav-container) {
+  padding: 0;
+}
+
+/* Typography */
+.boostlook .doc {
+  line-height: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.boostlook .doc,
+.boostlook .doc i {
+  color: var(--bl-text-color);
+  font-family: "Noto Sans Display";
+}
+
+.boostlook .nav-menu .title {
+  font-size: 1.5rem;
+}
+
+.boostlook .breadcrumbs ul li {
+  font-size: 0.875rem !important;
+}
+
+/* Navigation Menu */
+.boostlook .nav-panel-menu {
+  overflow: visible;
+}
+
+.boostlook .nav-close {
+  display: none;
+}
+
+.boostlook .nav-menu > .nav-list > .nav-list {
+  margin-left: 0;
+}
+
+.boostlook .nav-menu > .nav-list > .nav-list > li {
+  font-variation-settings: "wght" 550;
+}
+
+/* Navigation Links */
+.boostlook .nav-link,
+.boostlook .nav-menu a{
+  cursor: pointer;
+  color: var(--bl-nav-link-color);
+  margin-right: -0.5rem;
+}
+
+.boostlook .nav-link:hover,
+.boostlook .nav-menu a:hover {
+  color: var(--bl-nav-link-hover-color);
+}
+
+.boostlook .nav-text {
+  color: var(--bl-nav-link-color);
+}
+
+/* TOC Container */
+.boostlook #toc.toc2.nav-container {
+  position: fixed;
+}
+
+.boostlook #toc.toc2.nav-container.is-active {
+  position: static;
+}
+
+.boostlook #header .nav-container.is-active {
+  padding: 1rem;
+}
+
+.boostlook #content .nav-toggle {
+  background-position-x: 0;
+}
+
+/* Active Page Indicator */
+.boostlook .nav-list .is-current-page.is-active {
+  position: relative;
+}
+
+.boostlook .is-current-page.is-active::before {
+  content: "";
+  position: absolute;
+  top: 0.3125rem;
+  width: 16px;
+  height: 16px;
+  margin-left: -1.25rem;
+  background-image: var(--bl-caret-svg);
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 16px;
+}
+
+/* Breadcrumbs */
+.boostlook .breadcrumbs {
+  display: block;
+}
+
+.boostlook .breadcrumbs ul li:first-of-type {
+  display: flex;
+}
+
+.boostlook .breadcrumbs svg {
+  fill: var(--bl-breadcrumbs-svg-color);
+}
+
+/* Code Block */
+.boostlook .doc .content pre code {
+  background-color: var(--bl-pre-background);
+  border-color: var(--bl-code-border-color);
+  color: var(--bl-code-text-color);
+  padding: 1.2em .8em;
+  border-radius: 0;
+}
+
+.boostlook .doc pre {
+  padding: initial;
+}
+
+/* Layout */
+.boostlook .article .content {
+  gap: 1rem;
+}
+
+.boostlook #content:has(.toc.sidebar) {
+  display: flex;
+}
+
+.boostlook #footer:has(> script):not(:has(> div)) {
+  padding-top: 0;
+}
+
+/* Table of Contents */
+.boostlook .nav {
+  height: 100%;
+}
+
+.boostlook .toc .toc-menu a {
+  border-left: 0;
+  padding: .25rem 0 0 0;
+}
+
+/* Admonitions */
+.boostlook .admonitionblock p {
+  line-height: normal;
+}
+
+.boostlook .doc .admonitionblock {
+  background-color: var(--bl-tabpanel-background);
+  border-radius: 8px;
+}
+
+/* Tabs */
+.boostlook .tabs:not(.is-loading) .tablist li:not(.is-selected) {
+  background-color: var(--bl-tab-background);
+}
+
+.boostlook .tablist > ul li {
+  background-color: var(--bl-tabpanel-background);
+}
+
+/* Tables */
+.boostlook .doc table.tableblock {
+  display: block;
+  margin-bottom: 1.5rem;
+  margin-top: 1rem;
+}
+
+.boostlook .doc table.tableblock tr th {
+  background-color: var(--bl-table-head-background);
+  font-size: 1rem;
+}
+
+.dark .doc table.stripes-even>tbody>tr:nth-of-type(2n) {
+  background-color: var(--bl-table-stripe-color);
+}
+
+.boostlook .doc p.tableblock + p.tableblock {
+  margin-top: .25rem;
+}
+
+/* Toolbar */
+.boostlook .toolbar .breadcrumbs a,
+.boostlook .toolbar .breadcrumbs li {
+  color: var(--bl-text-color);
+}
+
+@media screen and (max-width: 768px) {
+  .boostlook .toolbar {
+    width: calc(100% - 2.5rem);
+    position: fixed;
+    top: 0;
+    padding-top: 10px;
+  }
+}
+
+/* Responsive Design */
+@media screen and (min-width: 768px) {
+  .boostlook #content:has(> article.doc) {
+    border-top-right-radius: 0.5rem;
+    border-top-left-radius: 0.5rem;
+  }
+}
+
+/*----------------- Styles specific to Antora Templates end -----------------*/
+
+/*---------- Quickbook docs styling fixes -----------*/
+
+/**
+ * Quickbook Documentation Styles
+ * Comprehensive styling for Quickbook-generated documentation, including:
+ * 1. Typography and heading hierarchy
+ * 2. Content blocks and spacing
+ * 3. Navigation and spirit-nav elements
+ * 4. Special elements (notes, tips, etc.)
+ * 5. Code and syntax highlighting
+ */
+
+/* Heading Styles */
+#boost-legacy-docs-wrapper.boostlook h1 {
+  font-size: 1.8rem;
+}
+
+#boost-legacy-docs-wrapper.boostlook h2 {
+  font-size: 1.65rem;
+  border-bottom: 1px solid #eaf0f3;
+  border-bottom: 1px solid var(--bl-table-border-color);
+  font-weight: 500;
+}
+
+#boost-legacy-docs-wrapper.boostlook h3 {
+  font-size: 1.5rem;
+}
+
+#boost-legacy-docs-wrapper.boostlook h4 {
+  font-size: 1.35rem;
+}
+
+/* Paragraph Spacing */
+#boost-legacy-docs-wrapper.boostlook p,
+.boostlook p {
+  margin-bottom: 0;
+  font-size: 16px;
+}
+
+#boost-legacy-docs-wrapper li {
+  font-size: 16px;
+}
+
+/* Table Headers */
+#boost-legacy-docs-wrapper.boostlook:not(:has(.doc)) th {
+  background-color: var(--bg-color);
+  border-color: var(--bl-border-color);
+}
+
+/* Special Content Blocks */
+.boostlook div.note,
+.boostlook div.tip,
+.boostlook div.important,
+.boostlook div.caution,
+.boostlook div.warning,
+.boostlook div.blurb,
+.boostlook p.blurb {
+  border: 1px solid var(--bl-border-color);
+  border-radius: 8px;
+  background-color: var(--bl-tabpanel-background);
+  margin: 1pc 0 0 0;
+  padding: 8px;
+}
+
+/* Special Block Tables */
+.boostlook div.note table,
+.boostlook div.tip table,
+.boostlook div.important table,
+.boostlook div.caution table,
+.boostlook div.warning table,
+.boostlook div.blurb table,
+.boostlook p.blurb table {
+  border: none;
+  border-collapse: collapse;
+  margin: 0;
+}
+
+/* Special Block Headers */
+.boostlook div.note th,
+.boostlook div.tip th,
+.boostlook div.important th,
+.boostlook div.caution th,
+.boostlook div.warning th,
+.boostlook div.blurb th,
+.boostlook .blurb th {
+  background-color: transparent !important;
+  font-size: 16px;
+}
+
+/* Special Block Cells */
+.boostlook div.note td,
+.boostlook div.tip td,
+.boostlook div.important td,
+.boostlook div.caution td,
+.boostlook div.warning td,
+.boostlook div.blurb td,
+.boostlook p.blurb td {
+  border: none !important;
+  padding: 1px;
+}
+
+/* Pre-formatted Text */
+.boostlook:not(:has(.doc)) td pre {
+  padding: 5px;
+}
+
+/* Program Listings */
+.boostlook .programlisting {
+  margin: 1rem 0;
+}
+
+/* Table Typography */
+.boostlook table h1,
+.boostlook table h2,
+.boostlook table h3 {
+  line-height: 2rem;
+}
+
+.boostlook table h4,
+.boostlook table h5,
+.boostlook table h6 {
+  line-height: 1.75rem;
+}
+
+/* Variable Lists */
+.boostlook:not(:has(.doc)) div.variablelist dl dt {
+  margin-bottom: 0.2em;
+  font-variation-settings: "wght" 700;
+}
+
+.boostlook:not(:has(.doc)) div.variablelist dl dd {
+  margin: 0em 0em 0.5em 2em;
+  font-size: 10pt;
+}
+
+.boostlook:not(:has(.doc)) div.variablelist table tbody tr td p,
+.boostlook:not(:has(.doc)) div.variablelist dl dd p {
+  margin: 0em 0em 0.5em 0em;
+  line-height: 1;
+}
+
+/* Table of Contents */
+.boostlook:not(:has(.doc)) div.toc {
+  border-radius: 8px;
+  padding: 1rem;
+  margin: 1rem 0;
+  font-size: 80%;
+  line-height: 1.15;
+  color: var(--text-color);
+  border: 1px solid var(--bl-border-color);
+  background-color: var(--bl-pre-background);
+}
+
+.boostlook:not(:has(.doc)) div.toc dl.toc {
+  background-color: transparent;
+}
+
+.boostlook:not(:has(.doc)) #toc ul {
+  list-style: none !important;
+  margin: 0.5rem 0 !important;
+}
+
+#boost-legacy-docs-wrapper.boostlook div.toc > p {
+  padding-top: 0 !important;
+}
+
+.boostlook dl.toc > dt {
+  font-variation-settings: "wght" 550;
+}
+
+.boostlook dl.toc dd {
+  padding-left: .6rem;
+}
+
+/* Copyright Footer */
+.boostlook .copyright-footer {
+  padding: 1rem;
+}
+
+/* Section Layout */
+body > .section,
+body > .chapter,
+#boost-legacy-docs-wrapper.boostlook > .section,
+#boost-legacy-docs-wrapper.boostlook > .chapter,
+#boost-legacy-docs-wrapper.boostlook > .document,
+#boost-legacy-docs-wrapper.boostlook > .refentry,
+#boost-legacy-docs-wrapper.boostlook > .book {
+  margin: 0rem 1rem;
+  padding: 1rem;
+  background-color: var(--card-color);
+  border-radius: 0.5rem;
+}
+
+/* Spirit Navigation */
+.boostlook:not(:has(.doc)) .spirit-nav {
+  position: relative;
+  float: right;
+  top: 0.2rem;
+  right: 28px;
+  text-align: right;
+  margin: 0.75rem;
+  padding-left: 10px;
+  max-width: 80rem;
+  display: flex;
+}
+
+.boostlook:not(:has(.doc)) .spirit-nav a,
+#boost-legacy-docs-wrapper.boostlook:not(:has(.doc)) .spirit-nav a {
+  font-family: 'Material Symbols Outlined';
+  font-size: 18px;
+  display: inline-block;
+  padding-left: 0.5em;
+  width: 24px;
+  height: 24px;
+  color: var(--bl-nav-link-color);
+}
+
+.boostlook:not(:has(.doc)) .spirit-nav a:hover,
+#boost-legacy-docs-wrapper.boostlook:not(:has(.doc)) .spirit-nav a:hover,
+.toolbar a:hover .material-symbols-outlined {
+  color: var(--bl-primary-color);
+  text-decoration: none;
+}
+
+.boostlook:not(:has(.doc)) .spirit-nav a img {
+  display: none;
+  border-width: 0px;
+}
+
+.dark .boostlook:not(:has(.doc)) .spirit-nav img {
+  -webkit-filter: invert(100%);
+  filter: invert(100%);
+}
+
+/* hide footer spirit nav since it wasn't visible before */
+.boostlook:not(:has(.doc)) div:nth-of-type(4).spirit-nav {
+  display: none !important;
+}
+
+/* Spirit Navigation Icons */
+.boostlook:not(:has(.doc)) .spirit-nav a[accesskey='p']::after {
+  content: "arrow_back";
+}
+.boostlook:not(:has(.doc)) .spirit-nav a[accesskey='u']::after {
+  content: "arrow_upward";
+}
+.boostlook:not(:has(.doc)) .spirit-nav a[accesskey='h']::after {
+  content: "home";
+}
+.boostlook:not(:has(.doc)) .spirit-nav a[accesskey='n']::after {
+  content: "arrow_forward";
+}
+
+/* Responsive Spirit Navigation */
+@media screen and (max-width: 768px) {
+  .boostlook:not(:has(.doc)) .spirit-nav {
+    right: 2rem;
+    top: 0.2rem;
+  }
+}
+
+/* Legacy Styling Overrides */
+body[bgcolor="white"]:has(.boostlook):not(:has(.doc)) {
+  background-color: transparent;
+}
+
+.boostlook:not(:has(.doc)) {
+  border-radius: 0;
+}
+
+/* General Elements */
+.boostlook:not(:has(.doc)) h1,
+.boostlook:not(:has(.doc)) h2,
+.boostlook:not(:has(.doc)) h2:first-of-type,
+.boostlook:not(:has(.doc)) h3,
+.boostlook:not(:has(.doc)) h4,
+.boostlook:not(:has(.doc)) h5,
+.boostlook:not(:has(.doc)) h6 {
+  margin: 1em 0em 0.5em;
+}
+
+.boostlook:not(:has(.doc)) h5 {
+  font-style: italic;
+  font-weight: 400;
+  font-size: 110%;
+}
+
+.boostlook:not(:has(.doc)) h1 a,
+.boostlook:not(:has(.doc)) h2 a,
+.boostlook:not(:has(.doc)) h3 a,
+.boostlook:not(:has(.doc)) h4 a {
+  color: var(--bl-header-color)
+}
+
+.boostlook:not(:has(.doc)) p {
+  padding: 1em 0 !important;
+}
+
+.boostlook:not(:has(.doc)) li p {
+  padding: 0 !important;
+}
+
+.boostlook:not(:has(.doc)) > hr {
+  display: none;
+}
+
+.boostlook:not(:has(.doc)) ol {
+  padding-left: 1em;
+}
+
+.boostlook:not(:has(.doc)) ol li {
+  list-style-type: decimal;
+}
+
+/* Pre-formatted Text and Code */
+.boostlook:not(:has(.doc)) pre {
+  background-color: var(--bl-pre-background);
+  border: 1px solid var(--bl-code-border-color);
+  padding: 1.2em .8em;
+  margin: 0;
+}
+
+.boostlook:not(:has(.doc)) pre code {
+  border: none;
+}
+
+.boostlook:not(:has(.doc)) :not(.highlight) pre {
+  color: var(--bl-code-text-color);
+}
+
+/* Table Headers */
+.boostlook:not(:has(.doc)) div.informaltable table tr th,
+.boostlook:not(:has(.doc)) div.table table tr th {
+  border: 1px solid var(--bl-border-color);
+}
+
+/* Copyright Footer */
+.boostlook:not(:has(.doc)) .copyright-footer {
+  text-align: right;
+  font-size: 70%;
+}
+
+.boostlook:not(:has(.doc)) .copyright-footer p {
+  text-align: left;
+  font-size: 10pt;
+  line-height: 1.15;
+}
+
+/* Syntax Highlighting */
+.property,
+.highlight .k,
+.highlight .kc,
+.highlight .kd,
+.highlight .kn,
+.highlight .kp,
+.highlight .kr,
+.highlight .kt,
+.keyword {
+  color: var(--color-purple);
+}
+
+.highlight .n,
+.highlight .na,
+.highlight .nb,
+.highlight .bp,
+.highlight .nc,
+.highlight .no,
+.highlight .nd,
+.highlight .ni,
+.highlight .ne,
+.highlight .nf,
+.highlight .py,
+.highlight .nl,
+.highlight .nn,
+.highlight .nx,
+.highlight .nt,
+.highlight .nv,
+.highlight .vc,
+.highlight .vg,
+.highlight .vi,
+.identifier {
+  color: var(--color-navy);
+}
+
+.special {
+  color: var(--text-color);
+}
+
+.highlight .cp,
+.preprocessor {
+  color: var(--color-blue);
+}
+
+.highlight .sc
+.char {
+  color: var(--color-lime);
+}
+
+.highlight .c,
+.highlight .ch,
+.highlight .cm,
+.highlight .cp,
+.highlight .cpf,
+.highlight .c1,
+.highlight .cs,
+.highlight .sd,
+.highlight .sh,
+.comment {
+  color: var(--color-green);
+}
+
+.highlight .s,
+.highlight .sa,
+.highlight .sb,
+.highlight .dl,
+.highlight .s2,
+.highlight .se,
+.highlight .si,
+.highlight .sx,
+.highlight .sr,
+.highlight .s1,
+.highlight .ss,
+.string {
+  color: var(--color-gold);
+}
+
+.highlight .m,
+.highlight .mf,
+.highlight .mh,
+.highlight .mi,
+.highlight .mo,
+.number {
+  color: var(--color-red);
+}
+
+.highlight,
+.white_bkd {
+  background-color: var(--card-color);
+}
+
+.highlight .hll,
+.dk_grey_bkd {
+  background-color: var(--border-color);
+}
+
+/*----------------- Quickbook Documentation Styles end -----------------*/
+
+/*----------------- Library README Styles start -----------------*/
+
+/**
+ * Library README Styles
+ * Specific styles for the Boost library README pages.
+ * These styles handle:
+ * 1. Typography and heading hierarchy
+ * 2. Content spacing and margins
+ * 3. List styling and nesting
+ * 4. Link appearances
+ */
+
+/* Base Container */
+.boostlook#libraryReadMe {
+  margin-left: 0;
+}
+
+/* Headings */
+.boostlook#libraryReadMe h1 {
+  font-size: 1.875rem;
+  font-variation-settings: "wght" 600;
+  line-height: 1em;
+  border-bottom: 1px solid var(--bl-border-color);
+}
+
+.boostlook#libraryReadMe h2 {
+  margin-top: 0.75rem;
+  font-size: 1.5rem;
+  font-variation-settings: "wght" 600;
+  line-height: 1em;
+  border-bottom: 1px solid var(--bl-border-color);
+}
+
+.boostlook#libraryReadMe h3 {
+  margin-top: 0.75rem;
+  font-size: 1.25rem;
+  font-variation-settings: "wght" 600;
+  margin-bottom: 0.5rem;
+  font-feature-settings: normal;
+}
+
+.boostlook#libraryReadMe h4 {
+  font-size: 1.35rem;
+}
+
+/* Paragraphs */
+.boostlook#libraryReadMe p {
+  font-size: 1rem;
+  padding-bottom: 0.25rem;
+  font-variation-settings: "wght" 300;
+  margin-bottom: 0;
+}
+
+/* Lists */
+.boostlook#libraryReadMe ul {
+  list-style-type: disc;
+  list-style-position: inside;
+  padding-left: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.boostlook#libraryReadMe ul li {
+  font-size: 1rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-variation-settings: "wght" 300;
+}
+
+.boostlook#libraryReadMe li p {
+  display: inline;
+}
+
+/* Special list cases */
+.boostlook#libraryReadMe > h3 + ul {
+  list-style-type: none;
+}
+
+.boostlook#libraryReadMe > h3 + ul > li > a {
+  font-variation-settings: "wght" 600;
+}
+
+.boostlook#libraryReadMe ul > li > ul > li {
+  list-style-type: disc;
+}
+
+.boostlook#libraryReadMe ul > li > ul > li > a {
+  font-variation-settings: "wght" 400;
+}
+
+.boostlook#libraryReadMe h3 + p + ul {
+  list-style-type: none;
+}
+
+.boostlook#libraryReadMe h3 + p + ul > li {
+  font-variation-settings: "wght" 600;
+}
+
+/* Tables */
+.boostlook#libraryReadMe table {
+  table-layout: auto;
+  width: 100%;
+}
+
+/* Links */
+.boostlook#libraryReadMe a {
+  color: var(--bl-link-color);
+}
+
+.boostlook#libraryReadMe a img {
+  display: inline;
+}
+
+/* Code Blocks */
+.boostlook#libraryReadMe pre {
+  padding: 0;
+}
+
+.boostlook#libraryReadMe pre code {
+  background-color: var(--bl-code-background);
+  margin-bottom: 0;
+}
+
+/* Syntax Highlighting Fix */
+.boostlook#libraryReadMe .language- span {
+  color: inherit;
+  font-weight: initial;
+}
+
+/*----------------- Library README Styles end -----------------*/