diff --git a/boostlook_tino.css b/boostlook_tino.css
index cefb8bc..0f3caea 100644
--- a/boostlook_tino.css
+++ b/boostlook_tino.css
@@ -82,159 +82,318 @@
  * - Modern scrolling and navigation experience
  */
 
+/**
+ * Framework Selector Conventions
+ *
+ * The framework uses the following selector prefixes:
+ *
+ * 1. .boostlook
+ *    - Primary selector for cross-template styles
+ *    - Applies to all documentation formats
+ *    - Used for common components and layouts
+ *
+ * 2. .boostlook:not(:has(.doc)), .boostlook#boost-legacy-docs-wrapper
+ *    - Specific to legacy Quickbook templates
+ *    - Maintains backward compatibility
+ *    - Handles specialized Quickbook formatting
+ *
+ * 3. .boostlook#libraryReadMe
+ *    - Dedicated to README template styling
+ *    - Optimized for library documentation
+ *    - Ensures consistent README presentation
+ */
+
 /*----------------- 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
+ * 1. General Variables - Global settings used across themes
+ * 2. Color System - Comprehensive color palette including brand, state, and UI colors
+ * 3. Typography - Font sizes, line heights, and text styling variables
+ * 4. Spacing System - Padding, margins, and layout spacing tokens
+ * 5. Icons - SVG icon definitions for light and dark themes
+ * 6. Responsive Design - Mobile-first breakpoint 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 */
+  --bl-primary-color: rgb(255, 159, 0); /* Boost's signature orange color */
 
-  /* Light Theme Variables - Color scheme for light mode */
-  /* General Variables */
-  --light-bl-secondary-color: rgb(2, 132, 199);
+  /*----------------- New Look Variables Start -----------------*/
+  /* New Look Primitives */
+  /* Colors Shades of Grey */
+  --colors-neutral-0: #ffffff;
+  --colors-neutral-50: #f5f6f8;
+  --colors-neutral-100: #e4e7ea;
+  --colors-neutral-200: #c7cccf;
+  --colors-neutral-300: #afb3b6;
+  --colors-neutral-400: #949a9e;
+  --colors-neutral-500: #798086;
+  --colors-neutral-600: #62676b;
+  --colors-neutral-700: #494d50;
+  --colors-neutral-800: #393b3f;
+  --colors-neutral-900: #18191b;
+  --colors-neutral-950: #0d0e0f;
 
-  /* 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);
+  /* Colors Brand Shades */
+  --colors-brand-orange-50: #fbf2e6;
+  --colors-brand-orange-100: #ffeaca;
+  --colors-brand-orange-200: #ffd897;
+  --colors-brand-orange-300: #ffc364;
+  --colors-brand-orange-400: #ffb030;
+  --colors-brand-orange-500: #ff9f00;
+  --colors-brand-orange-600: #cd7e00;
+  --colors-brand-orange-700: #9b5f00;
+  --colors-brand-orange-800: #694000;
+  --colors-brand-orange-900: #352000;
+  --colors-brand-orange-950: #1e1200;
 
-  /* 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);
+  /* Colors Negative Shades */
+  --colors-negative-100: #ffe6ea;
+  --colors-negative-200: #ffcad2;
+  --colors-negative-300: #fe9aab;
+  --colors-negative-400: #f9677f;
+  --colors-negative-500: #eb3856;
+  --colors-negative-600: #bc233c;
+  --colors-negative-700: #8d1529;
+  --colors-negative-800: #600d1b;
+  --colors-negative-900: #39070f;
+  --colors-negative-950: #1d0408;
 
-  /* 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);
+  /* Colors Positive Shades */
+  --colors-positive-100: #def7eb;
+  --colors-positive-200: #bdeed6;
+  --colors-positive-300: #9ce6c2;
+  --colors-positive-400: #7bddad;
+  --colors-positive-500: #5ad599;
+  --colors-positive-600: #48ac7b;
+  --colors-positive-700: #36825d;
+  --colors-positive-800: #255940;
+  --colors-positive-850: #1c4431;
+  --colors-positive-900: #132f22;
+  --colors-positive-950: #0a1b13;
 
-  /* 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);
+  /* Colors Warning Shades */
+  --colors-warning-100: #ffefe2;
+  --colors-warning-200: #ffd4b3;
+  --colors-warning-300: #feb780;
+  --colors-warning-400: #ff9442;
+  --colors-warning-500: #fd760f;
+  --colors-warning-600: #c25909;
+  --colors-warning-700: #914104;
+  --colors-warning-800: #5d2a02;
+  --colors-warning-900: #341700;
+  --colors-warning-950: #1f0e01;
 
-  /* 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);
+  /* Colors Blue Shades */
+  --colors-blue-50: #daeef9;
+  --colors-blue-100: #c2e2f4;
+  --colors-blue-200: #92cbe9;
+  --colors-blue-300: #62b3dd;
+  --colors-blue-400: #329cd2;
+  --colors-blue-500: #0284c7;
+  --colors-blue-600: #026a9f;
+  --colors-blue-700: #014f77;
+  --colors-blue-800: #013550;
+  --colors-blue-850: #01283c;
+  --colors-blue-900: #001a28;
+  --colors-blue-950: #000d14;
 
-  /* 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);
+  /* Colors Code Syntax Pallette */
+  --colors-code-colors-red: var(--colors-negative-400);
+  --colors-code-colors-green: var(--colors-positive-500);
+  --colors-code-colors-blue: var(--colors-blue-300);
+  --colors-code-colors-black: var(--colors-neutral-950);
+  --colors-code-colors-yellow: #ebc419;
+  --colors-code-colors-purple: #b350ed;
+  --colors-code-colors-turquoise: #67eaf9;
+  --colors-code-colors-white: var(--colors-neutral-0);
+  --colors-code-colors-red-contrast: var(--colors-negative-500);
+  --colors-code-colors-green-contrast: var(--colors-positive-600);
+  --colors-code-colors-blue-contrast: var(--colors-blue-400);
+  --colors-code-colors-yellow-contrast: #d7a200;
+  --colors-code-colors-purple-contrast: #9f26e5;
+  --colors-code-colors-turquoise-contrast: #0dc4d5;
+  --colors-code-colors-navy: #5469f7;
+  --colors-code-colors-navy-contrast: #162ec6;
 
-  /* Additional Theme Variables */
-  --light-bl-table-border-color: rgb(209, 209, 209);
-  --light-bl-tab-background: rgb(240, 240, 240);
+  /* Colors Other */
+  --colors-neutral-150: #d5d7d9;
+  --colors-neutral-850: #2a2c30;
+  --colors-overlay-overlay-white-64: rgba(255 255 255 / 0.64);
+  --colors-overlay-overlay-black-64: rgba(13 14 15 / 0.64);
+  --colors-overlay-overlay-white-88: rgba(255 255 255 / 0.88);
+  --colors-overlay-overlay-black-88: rgba(13 14 15 / 0.88);
 
-  /**
-   * Dark Theme Variables
-   * Color palette and design tokens for dark mode
-   */
-  /* General Variables */
-  --dark-bl-secondary-color: rgb(125, 211, 252);
+  /* Spacings And Sizes */
+  --spacing-size-size-0: 0rem;
+  --spacing-size-4xs: 0.125rem;
+  --spacing-size-3xs: 0.25rem;
+  --spacing-size-2xs: 0.5rem;
+  --spacing-size-xs: 0.75rem;
+  --spacing-size-sm: 1rem;
+  --spacing-size-md: 1.125rem;
+  --spacing-size-lg: 1.5rem;
+  --spacing-size-xl: 2rem;
+  --spacing-size-2xl: 2.5rem;
+  --spacing-size-3xl: 3rem;
+  --main-container: 90rem;
 
-  /* 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);
+  /* New Look Typography */
+  --font-family-code: "Noto Sans Mono";
+  --font-size-3xs: 0.625rem;
+  --font-size-2xs: 0.75rem;
+  --font-size-xs: 0.875rem;
+  --font-size-sm: 1rem;
+  --font-size-md: 1.125rem;
+  --font-size-lg: 1.25rem;
+  --font-size-xl: 1.5rem;
+  --font-size-2xl: 1.75rem;
+  --font-size-3xl: 2rem;
+  --font-size-4xl: 2.5rem;
+  --font-line-height-xs: 0.75rem;
+  --font-line-height-sm: 1rem;
+  --font-line-height-md: 1.25rem;
+  --font-line-height-lg: 1.5rem;
+  --font-line-height-xl: 1.75rem;
+  --font-line-height-2xl: 2rem;
+  --font-line-height-3xl: 2.5rem;
+  --font-line-height-4xl: 3rem;
 
-  /* 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);
+  /* New Look Icons */
+  /* Themed Headings Anchor Icon */
+  --icon-anchor-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_618_10452)%22%3E%3Cpath%20d%3D%22M13.2084%202.77855C11.8904%201.46053%209.75343%201.46053%208.43541%202.77855L6.31409%204.89987L5.4302%204.01599L7.55152%201.89467C9.3577%200.0884953%2012.2861%200.0884955%2014.0923%201.89467C15.8984%203.70085%2015.8984%206.62923%2014.0923%208.43541L11.9709%2010.5567L11.0871%209.67284L13.2084%207.55152C14.5264%206.2335%2014.5264%204.09657%2013.2084%202.77855Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M2.77855%2013.2084C4.09657%2014.5264%206.23351%2014.5264%207.55153%2013.2084L9.67285%2011.0871L10.5567%2011.9709L8.43541%2014.0923C6.62923%2015.8984%203.70085%2015.8984%201.89467%2014.0923C0.0884953%2012.2861%200.0884953%209.3577%201.89467%207.55152L4.01599%205.4302L4.89987%206.31409L2.77855%208.43541C1.46053%209.75343%201.46053%2011.8904%202.77855%2013.2084Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M10.5567%206.31409C10.8008%206.07001%2010.8008%205.67428%2010.5567%205.4302C10.3126%205.18613%209.91692%205.18613%209.67284%205.4302L5.4302%209.67284C5.18613%209.91692%205.18613%2010.3127%205.4302%2010.5567C5.67428%2010.8008%206.07001%2010.8008%206.31409%2010.5567L10.5567%206.31409Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_618_10452%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
+  --icon-anchor-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_618_7189)%22%3E%3Cpath%20d%3D%22M13.2084%202.77855C11.8904%201.46053%209.75343%201.46053%208.43541%202.77855L6.31409%204.89987L5.4302%204.01599L7.55152%201.89467C9.3577%200.0884953%2012.2861%200.0884955%2014.0923%201.89467C15.8984%203.70085%2015.8984%206.62923%2014.0923%208.43541L11.9709%2010.5567L11.0871%209.67284L13.2084%207.55152C14.5264%206.2335%2014.5264%204.09657%2013.2084%202.77855Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M2.77855%2013.2084C4.09657%2014.5264%206.23351%2014.5264%207.55153%2013.2084L9.67285%2011.0871L10.5567%2011.9709L8.43541%2014.0923C6.62923%2015.8984%203.70085%2015.8984%201.89467%2014.0923C0.0884953%2012.2861%200.0884953%209.3577%201.89467%207.55152L4.01599%205.4302L4.89987%206.31409L2.77855%208.43541C1.46053%209.75343%201.46053%2011.8904%202.77855%2013.2084Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M10.5567%206.31409C10.8008%206.07001%2010.8008%205.67428%2010.5567%205.4302C10.3126%205.18613%209.91692%205.18613%209.67284%205.4302L5.4302%209.67284C5.18613%209.91692%205.18613%2010.3127%205.4302%2010.5567C5.67428%2010.8008%206.07001%2010.8008%206.31409%2010.5567L10.5567%206.31409Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_618_7189%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
 
-  /* 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);
+  /* Themed Left Arrow Icon */
+  --icon-arrow-left-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.5303%204.46967C12.8232%204.76256%2012.8232%205.23744%2012.5303%205.53033L6.81066%2011.25H19C19.4142%2011.25%2019.75%2011.5858%2019.75%2012C19.75%2012.4142%2019.4142%2012.75%2019%2012.75H6.81066L12.5303%2018.4697C12.8232%2018.7626%2012.8232%2019.2374%2012.5303%2019.5303C12.2374%2019.8232%2011.7626%2019.8232%2011.4697%2019.5303L4.46967%2012.5303C4.17678%2012.2374%204.17678%2011.7626%204.46967%2011.4697L11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
+  --icon-arrow-left-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.5303%204.46967C12.8232%204.76256%2012.8232%205.23744%2012.5303%205.53033L6.81066%2011.25H19C19.4142%2011.25%2019.75%2011.5858%2019.75%2012C19.75%2012.4142%2019.4142%2012.75%2019%2012.75H6.81066L12.5303%2018.4697C12.8232%2018.7626%2012.8232%2019.2374%2012.5303%2019.5303C12.2374%2019.8232%2011.7626%2019.8232%2011.4697%2019.5303L4.46967%2012.5303C4.17678%2012.2374%204.17678%2011.7626%204.46967%2011.4697L11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
 
-  /* 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);
+  /* Themed Right Arrow Icon */
+  --icon-arrow-right-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967L19.5303%2011.4697C19.8232%2011.7626%2019.8232%2012.2374%2019.5303%2012.5303L12.5303%2019.5303C12.2374%2019.8232%2011.7626%2019.8232%2011.4697%2019.5303C11.1768%2019.2374%2011.1768%2018.7626%2011.4697%2018.4697L17.1893%2012.75H5C4.58579%2012.75%204.25%2012.4142%204.25%2012C4.25%2011.5858%204.58579%2011.25%205%2011.25H17.1893L11.4697%205.53033C11.1768%205.23744%2011.1768%204.76256%2011.4697%204.46967Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
+  --icon-arrow-right-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967L19.5303%2011.4697C19.8232%2011.7626%2019.8232%2012.2374%2019.5303%2012.5303L12.5303%2019.5303C12.2374%2019.8232%2011.7626%2019.8232%2011.4697%2019.5303C11.1768%2019.2374%2011.1768%2018.7626%2011.4697%2018.4697L17.1893%2012.75H5C4.58579%2012.75%204.25%2012.4142%204.25%2012C4.25%2011.5858%204.58579%2011.25%205%2011.25H17.1893L11.4697%205.53033C11.1768%205.23744%2011.1768%204.76256%2011.4697%204.46967Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
 
-  /* 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);
+  /* Themed Up Arrow Icon */
+  --icon-arrow-up-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.5303%2012.5303C19.2374%2012.8232%2018.7626%2012.8232%2018.4697%2012.5303L12.75%206.81066L12.75%2019C12.75%2019.4142%2012.4142%2019.75%2012%2019.75C11.5858%2019.75%2011.25%2019.4142%2011.25%2019L11.25%206.81066L5.53033%2012.5303C5.23744%2012.8232%204.76256%2012.8232%204.46967%2012.5303C4.17678%2012.2374%204.17678%2011.7626%204.46967%2011.4697L11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967L19.5303%2011.4697C19.8232%2011.7626%2019.8232%2012.2374%2019.5303%2012.5303Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
+  --icon-arrow-up-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.5303%2012.5303C19.2374%2012.8232%2018.7626%2012.8232%2018.4697%2012.5303L12.75%206.81066L12.75%2019C12.75%2019.4142%2012.4142%2019.75%2012%2019.75C11.5858%2019.75%2011.25%2019.4142%2011.25%2019L11.25%206.81066L5.53033%2012.5303C5.23744%2012.8232%204.76256%2012.8232%204.46967%2012.5303C4.17678%2012.2374%204.17678%2011.7626%204.46967%2011.4697L11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967L19.5303%2011.4697C19.8232%2011.7626%2019.8232%2012.2374%2019.5303%2012.5303Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E");
 
-  /* 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);
+  /* Themed Clipboard Icon */
+  --icon-clipboard-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.8%203.75C4.52152%203.75%204.25445%203.86062%204.05754%204.05754C3.86062%204.25445%203.75%204.52152%203.75%204.8V12.9C3.75%2013.1785%203.86062%2013.4455%204.05754%2013.6425C4.25445%2013.8394%204.52152%2013.95%204.8%2013.95H5.7C6.11421%2013.95%206.45%2014.2858%206.45%2014.7C6.45%2015.1142%206.11421%2015.45%205.7%2015.45H4.8C4.1237%2015.45%203.4751%2015.1813%202.99688%2014.7031C2.51866%2014.2249%202.25%2013.5763%202.25%2012.9V4.8C2.25%204.1237%202.51866%203.4751%202.99688%202.99688C3.4751%202.51866%204.1237%202.25%204.8%202.25H12.9C13.5763%202.25%2014.2249%202.51866%2014.7031%202.99688C15.1813%203.4751%2015.45%204.1237%2015.45%204.8V5.7C15.45%206.11421%2015.1142%206.45%2014.7%206.45C14.2858%206.45%2013.95%206.11421%2013.95%205.7V4.8C13.95%204.52152%2013.8394%204.25445%2013.6425%204.05754C13.4455%203.86062%2013.1785%203.75%2012.9%203.75H4.8ZM11.1%2010.05C10.5201%2010.05%2010.05%2010.5201%2010.05%2011.1V19.2C10.05%2019.7799%2010.5201%2020.25%2011.1%2020.25H19.2C19.7799%2020.25%2020.25%2019.7799%2020.25%2019.2V11.1C20.25%2010.5201%2019.7799%2010.05%2019.2%2010.05H11.1ZM8.55%2011.1C8.55%209.69167%209.69167%208.55%2011.1%208.55H19.2C20.6083%208.55%2021.75%209.69167%2021.75%2011.1V19.2C21.75%2020.6083%2020.6083%2021.75%2019.2%2021.75H11.1C9.69167%2021.75%208.55%2020.6083%208.55%2019.2V11.1Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
+  --icon-clipboard-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.8%203.75C4.52152%203.75%204.25445%203.86062%204.05754%204.05754C3.86062%204.25445%203.75%204.52152%203.75%204.8V12.9C3.75%2013.1785%203.86062%2013.4455%204.05754%2013.6425C4.25445%2013.8394%204.52152%2013.95%204.8%2013.95H5.7C6.11421%2013.95%206.45%2014.2858%206.45%2014.7C6.45%2015.1142%206.11421%2015.45%205.7%2015.45H4.8C4.1237%2015.45%203.4751%2015.1813%202.99688%2014.7031C2.51866%2014.2249%202.25%2013.5763%202.25%2012.9V4.8C2.25%204.1237%202.51866%203.4751%202.99688%202.99688C3.4751%202.51866%204.1237%202.25%204.8%202.25H12.9C13.5763%202.25%2014.2249%202.51866%2014.7031%202.99688C15.1813%203.4751%2015.45%204.1237%2015.45%204.8V5.7C15.45%206.11421%2015.1142%206.45%2014.7%206.45C14.2858%206.45%2013.95%206.11421%2013.95%205.7V4.8C13.95%204.52152%2013.8394%204.25445%2013.6425%204.05754C13.4455%203.86062%2013.1785%203.75%2012.9%203.75H4.8ZM11.1%2010.05C10.5201%2010.05%2010.05%2010.5201%2010.05%2011.1V19.2C10.05%2019.7799%2010.5201%2020.25%2011.1%2020.25H19.2C19.7799%2020.25%2020.25%2019.7799%2020.25%2019.2V11.1C20.25%2010.5201%2019.7799%2010.05%2019.2%2010.05H11.1ZM8.55%2011.1C8.55%209.69167%209.69167%208.55%2011.1%208.55H19.2C20.6083%208.55%2021.75%209.69167%2021.75%2011.1V19.2C21.75%2020.6083%2020.6083%2021.75%2019.2%2021.75H11.1C9.69167%2021.75%208.55%2020.6083%208.55%2019.2V11.1Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E");
 
-  /**
-   * 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;
+  /* Themed Home Icon */
+  --icon-home-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M9%2016.25C8.58579%2016.25%208.25%2016.5858%208.25%2017C8.25%2017.4142%208.58579%2017.75%209%2017.75H15C15.4142%2017.75%2015.75%2017.4142%2015.75%2017C15.75%2016.5858%2015.4142%2016.25%2015%2016.25H9Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.8808%203.23523C12.823%202.24353%2011.177%202.24353%2010.1192%203.23523L4.11916%208.86023C3.56462%209.38011%203.25%2010.1063%203.25%2010.8665V18C3.25%2019.5188%204.48122%2020.75%206%2020.75H18C19.5188%2020.75%2020.75%2019.5188%2020.75%2018V10.8665C20.75%2010.1063%2020.4354%209.38011%2019.8808%208.86023L13.8808%203.23523ZM11.1451%204.32953C11.6259%203.87876%2012.3741%203.87876%2012.8549%204.32953L18.8549%209.95453C19.107%2010.1908%2019.25%2010.5209%2019.25%2010.8665V18C19.25%2018.6903%2018.6904%2019.25%2018%2019.25H6C5.30964%2019.25%204.75%2018.6903%204.75%2018V10.8665C4.75%2010.5209%204.89301%2010.1908%205.14507%209.95453L11.1451%204.32953Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
+  --icon-home-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M9%2016.25C8.58579%2016.25%208.25%2016.5858%208.25%2017C8.25%2017.4142%208.58579%2017.75%209%2017.75H15C15.4142%2017.75%2015.75%2017.4142%2015.75%2017C15.75%2016.5858%2015.4142%2016.25%2015%2016.25H9Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.8808%203.23523C12.823%202.24353%2011.177%202.24353%2010.1192%203.23523L4.11916%208.86023C3.56462%209.38011%203.25%2010.1063%203.25%2010.8665V18C3.25%2019.5188%204.48122%2020.75%206%2020.75H18C19.5188%2020.75%2020.75%2019.5188%2020.75%2018V10.8665C20.75%2010.1063%2020.4354%209.38011%2019.8808%208.86023L13.8808%203.23523ZM11.1451%204.32953C11.6259%203.87876%2012.3741%203.87876%2012.8549%204.32953L18.8549%209.95453C19.107%2010.1908%2019.25%2010.5209%2019.25%2010.8665V18C19.25%2018.6903%2018.6904%2019.25%2018%2019.25H6C5.30964%2019.25%204.75%2018.6903%204.75%2018V10.8665C4.75%2010.5209%204.89301%2010.1908%205.14507%209.95453L11.1451%204.32953Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
 
-  /* 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;
+  /* Themed File Icon */
+  --icon-file-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5%2011.5H10V10.5H5V11.5Z%22%20fill%3D%22%2362676B%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%201.5C3.17157%201.5%202.5%202.17157%202.5%203V13C2.5%2013.8284%203.17157%2014.5%204%2014.5H12C12.8284%2014.5%2013.5%2013.8284%2013.5%2013V6.41421C13.5%206.01639%2013.342%205.63486%2013.0607%205.35355L9.64645%201.93934C9.36514%201.65803%208.98361%201.5%208.58579%201.5H4ZM3.5%203C3.5%202.72386%203.72386%202.5%204%202.5H8.58579C8.71839%202.5%208.84557%202.55268%208.93934%202.64645L12.3536%206.06066C12.4473%206.15443%2012.5%206.28161%2012.5%206.41421V13C12.5%2013.2761%2012.2761%2013.5%2012%2013.5H4C3.72386%2013.5%203.5%2013.2761%203.5%2013V3Z%22%20fill%3D%22%2362676B%22%2F%3E%3C%2Fsvg%3E");
+  --icon-file-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5%2011.5H10V10.5H5V11.5Z%22%20fill%3D%22%23949A9E%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%201.5C3.17157%201.5%202.5%202.17157%202.5%203V13C2.5%2013.8284%203.17157%2014.5%204%2014.5H12C12.8284%2014.5%2013.5%2013.8284%2013.5%2013V6.41421C13.5%206.01639%2013.342%205.63486%2013.0607%205.35355L9.64645%201.93934C9.36514%201.65803%208.98361%201.5%208.58579%201.5H4ZM3.5%203C3.5%202.72386%203.72386%202.5%204%202.5H8.58579C8.71839%202.5%208.84557%202.55268%208.93934%202.64645L12.3536%206.06066C12.4473%206.15443%2012.5%206.28161%2012.5%206.41421V13C12.5%2013.2761%2012.2761%2013.5%2012%2013.5H4C3.72386%2013.5%203.5%2013.2761%203.5%2013V3Z%22%20fill%3D%22%23949A9E%22%2F%3E%3C%2Fsvg%3E");
+
+  /* Themed Menu Icon */
+  --icon-menu-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%206C3.55228%206%204%205.55228%204%205C4%204.44772%203.55228%204%203%204C2.44772%204%202%204.44772%202%205C2%205.55228%202.44772%206%203%206Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M22%205.75H6V4.25H22V5.75Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M22%2012.75H6V11.25H22V12.75Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M16%2019.75H6V18.25H16V19.75Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M4%2012C4%2012.5523%203.55228%2013%203%2013C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011C3.55228%2011%204%2011.4477%204%2012Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M3%2020C3.55228%2020%204%2019.5523%204%2019C4%2018.4477%203.55228%2018%203%2018C2.44772%2018%202%2018.4477%202%2019C2%2019.5523%202.44772%2020%203%2020Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
+  --icon-menu-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%206C3.55228%206%204%205.55228%204%205C4%204.44772%203.55228%204%203%204C2.44772%204%202%204.44772%202%205C2%205.55228%202.44772%206%203%206Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M22%205.75H6V4.25H22V5.75Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M22%2012.75H6V11.25H22V12.75Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M16%2019.75H6V18.25H16V19.75Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M4%2012C4%2012.5523%203.55228%2013%203%2013C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011C3.55228%2011%204%2011.4477%204%2012Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M3%2020C3.55228%2020%204%2019.5523%204%2019C4%2018.4477%203.55228%2018%203%2018C2.44772%2018%202%2018.4477%202%2019C2%2019.5523%202.44772%2020%203%2020Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
+
+  /* New Look Responsive Mobile First */
+  /* Spacing */
+  --leftbar-paddings-leftbar-padding-sm: var(--spacing-size-sm);
+  --leftbar-paddings-leftbar-padding-md: var(--spacing-size-md);
+  --leftbar-paddings-leftbar-padding-0: var(--spacing-size-size-0);
+  --leftbar-paddings-leftbar-padding-lg: var(--spacing-size-lg);
+  --padding-padding-lg: var(--spacing-size-md);
+  --padding-padding-sm: var(--spacing-size-xs);
+  --padding-padding-xs: var(--spacing-size-xs);
+  --padding-padding-2xs: var(--spacing-size-2xs);
+  --padding-padding-3xs: var(--spacing-size-3xs);
+  --leftbar-paddings-leftbar-padding-4xs: var(--spacing-size-4xs);
+  --leftbar-paddings-leftbar-padding-2xs: var(--spacing-size-2xs);
+  --leftbar-paddings-leftbar-padding-3xs: var(--spacing-size-3xs);
+  --padding-padding-md: var(--spacing-size-sm);
+  --main-margin: var(--spacing-size-sm);
+  --main-max-width-leftbar: 0rem;
+  --main-content-width: 54rem;
+  --icons-24: 1.5rem;
+  --icons-20: 1.25rem;
+  --icons-16: 1rem;
+  --icons-12: 0.75rem;
+
+  /* Typography */
+  --typography-font-size-3xs: var(--font-size-3xs);
+  --typography-font-size-2xs: var(--font-size-2xs);
+  --typography-font-size-xs: var(--font-size-xs);
+  --typography-font-size-sm: var(--font-size-xs);
+  --typography-font-size-md: var(--font-size-sm);
+  --typography-font-size-lg: var(--font-size-md);
+  --typography-font-size-xl: var(--font-size-lg);
+  --typography-font-size-2xl: var(--font-size-xl);
+  --typography-font-size-3xl: var(--font-size-2xl);
+  --typography-font-size-4xl: var(--font-size-3xl);
+  --typography-line-height-xs: var(--font-line-height-xs);
+  --typography-line-height-sm: var(--font-line-height-sm);
+  --typography-line-height-md: var(--font-line-height-md);
+  --typography-line-height-lg: var(--font-line-height-md);
+  --typography-line-height-xl: var(--font-line-height-lg);
+  --typography-line-height-2xl: var(--font-line-height-lg);
+  --typography-line-height-3xl: var(--font-line-height-2xl);
+  --typography-line-height-4xl: var(--font-line-height-3xl);
+  /*----------------- New Look Variables End -----------------*/
 }
 
+/*----------------- New Look Responsive Desktop Start -----------------*/
+@media (min-width: 768px) {
+  :root {
+    /* Spacing */
+    --leftbar-paddings-leftbar-padding-sm: var(--spacing-size-sm);
+    --leftbar-paddings-leftbar-padding-md: var(--spacing-size-md);
+    --leftbar-paddings-leftbar-padding-0: var(--spacing-size-size-0);
+    --leftbar-paddings-leftbar-padding-lg: var(--spacing-size-lg);
+    --padding-padding-lg: var(--spacing-size-lg);
+    --padding-padding-sm: var(--spacing-size-sm);
+    --padding-padding-xs: var(--spacing-size-xs);
+    --padding-padding-2xs: var(--spacing-size-2xs);
+    --padding-padding-3xs: var(--spacing-size-3xs);
+    --leftbar-paddings-leftbar-padding-4xs: var(--spacing-size-4xs);
+    --leftbar-paddings-leftbar-padding-2xs: var(--spacing-size-2xs);
+    --leftbar-paddings-leftbar-padding-3xs: var(--spacing-size-3xs);
+    --padding-padding-md: var(--spacing-size-md);
+    --main-margin: var(--spacing-size-xl);
+    --main-max-width-leftbar: 18.25rem;
+    --icons-24: 1.5rem;
+    --icons-20: 1.25rem;
+    --icons-16: 1rem;
+    --icons-12: 0.75rem;
+
+    /* Typography */
+    --typography-font-size-3xs: var(--font-size-3xs);
+    --typography-font-size-2xs: var(--font-size-2xs);
+    --typography-font-size-xs: var(--font-size-xs);
+    --typography-font-size-sm: var(--font-size-sm);
+    --typography-font-size-md: var(--font-size-md);
+    --typography-font-size-lg: var(--font-size-lg);
+    --typography-font-size-xl: var(--font-size-xl);
+    --typography-font-size-2xl: var(--font-size-2xl);
+    --typography-font-size-3xl: var(--font-size-3xl);
+    --typography-font-size-4xl: var(--font-size-4xl);
+    --typography-line-height-xs: var(--font-line-height-xs);
+    --typography-line-height-sm: var(--font-line-height-sm);
+    --typography-line-height-md: var(--font-line-height-md);
+    --typography-line-height-lg: var(--font-line-height-lg);
+    --typography-line-height-xl: var(--font-line-height-xl);
+    --typography-line-height-2xl: var(--font-line-height-2xl);
+    --typography-line-height-3xl: var(--font-line-height-3xl);
+    --typography-line-height-4xl: var(--font-line-height-4xl);
+  }
+}
+
+@media (min-width: 990px) {
+  :root {
+    --main-max-width-leftbar: 21.25rem;
+    --main-margin: var(--spacing-size-3xl);
+  }
+}
+
+/*----------------- New Look Responsive Desktop End -----------------*/
+
 /*----------------- Root Variables - End -----------------*/
 
 /*----------------- HTML Variables - Start -----------------*/
@@ -249,132 +408,234 @@
 
 /* Light Theme (Default) Configuration */
 html {
-  /* General Variables */
-  --bl-secondary-color: var(--light-bl-secondary-color);
+  /*----------------- New Look Variables Start -----------------*/
+  --icon-anchor: var(--icon-anchor-light);
+  --icon-arrow-left: var(--icon-arrow-left-light);
+  --icon-arrow-right: var(--icon-arrow-right-light);
+  --icon-arrow-up: var(--icon-arrow-up-light);
+  --icon-clipboard: var(--icon-clipboard-light);
+  --icon-home: var(--icon-home-light);
+  --icon-file: var(--icon-file-light);
+  --icon-menu: var(--icon-menu-light);
 
-  /* 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);
+  --text-buttons-button-label-primary-default: var(--colors-neutral-0);
+  --text-buttons-button-label-secondary-default: var(--colors-neutral-900);
+  --text-buttons-button-label-inactive: var(--colors-neutral-500);
 
-  /* 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);
+  --text-main-text-primary: var(--colors-neutral-900);
+  --text-main-text-link-blue-secondary: var(--colors-blue-500);
+  --text-main-text-link-blue-tetriary: var(--colors-blue-400);
+  --text-main-text-body-secondary: var(--colors-neutral-700);
+  --text-main-text-body-quaternary: var(--colors-neutral-400);
+  --text-main-text-body-tetriary: var(--colors-neutral-600);
+  --text-main-text-body-primary: var(--colors-neutral-850);
+  --text-main-text-link-blue: var(--colors-blue-600);
 
-  /* 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);
+  --text-states-text-warning-tetriary: var(--colors-warning-600);
+  --text-states-text-warning-secondary: var(--colors-warning-500);
+  --text-states-text-positive-secondary: var(--colors-positive-500);
+  --text-states-text-positive-tetriary: var(--colors-positive-600);
+  --text-states-text-negative-secondary: var(--colors-negative-500);
+  --text-states-text-negative-tetriary: var(--colors-negative-600);
+  --text-states-text-warning: var(--colors-warning-400);
+  --text-states-text-positive: var(--colors-positive-400);
+  --text-states-text-negative: var(--colors-negative-400);
+  --text-states-text-additional: var(--colors-blue-400);
+  --text-states-text-additional-secondary: var(--colors-blue-500);
+  --text-states-text-additional-tetriary: var(--colors-blue-600);
 
-  /* 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);
+  --text-code-red: var(--colors-code-colors-red-contrast);
+  --text-code-green: var(--colors-code-colors-green-contrast);
+  --text-code-blue: var(--colors-code-colors-blue-contrast);
+  --text-code-yellow: var(--colors-code-colors-yellow-contrast);
+  --text-code-purple: var(--colors-code-colors-purple-contrast);
+  --text-code-turquoise: var(--colors-code-colors-turquoise-contrast);
+  --text-code-neutral: var(--colors-code-colors-black);
+  --text-code-navy: var(--colors-code-colors-navy-contrast);
 
-  /* 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);
+  --surface-button-button-bg-secondary-ta-default: var(--colors-brand-orange-400);
+  --surface-button-button-bg-primary-default: var(--colors-blue-700);
+  --surface-button-button-bg-primary-pressed: var(--colors-blue-700);
+  --surface-button-button-bg-primary-inactive: var(--colors-neutral-200);
+  --surface-button-button-bg-secondary-cta-hover: var(--colors-brand-orange-500);
+  --surface-button-button-bg-primary-hover: var(--colors-blue-800);
+  --surface-button-button-bg-secondary-cta-pressed: var(--colors-brand-orange-400);
+  --surface-button-button-bg-secondary-cta-inactive: var(--colors-neutral-200);
 
-  /* 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);
+  --surface-background-main-base-primary: var(--colors-neutral-0);
+  --surface-background-main-surface-primary: var(--colors-neutral-50);
+  --surface-background-main-surface-secondary: var(--colors-neutral-100);
+  --surface-background-main-surface-tetriary: var(--colors-neutral-150);
+  --surface-background-main-surface-blue-secondary: var(--colors-blue-50);
+  --surface-background-main-surface-blue-tetriary: var(--colors-blue-100);
+  --surface-background-main-surface-blue-quaternary: var(--colors-blue-200);
+  --surface-background-main-surface-transparent: var(--colors-overlay-overlay-white-64);
+  --surface-background-main-surface-transparent-secondary: var(--colors-overlay-overlay-white-88);
+
+  --surface-background-states-surface-warning-secondary: var(--colors-warning-100);
+  --surface-background-states-surface-warning-tetriary: var(--colors-warning-200);
+  --surface-background-states-surface-warning-quaternary: var(--colors-warning-300);
+  --surface-background-states-surface-positive-secondary: var(--colors-positive-100);
+  --surface-background-states-surface-positive-tetriary: var(--colors-positive-200);
+  --surface-background-states-surface-positive-quaternary: var(--colors-positive-300);
+  --surface-background-states-surface-negative-secondary: var(--colors-negative-100);
+  --surface-background-states-surface-negative-tetriary: var(--colors-negative-200);
+  --surface-background-states-surface-negative-quaternary: var(--colors-negative-300);
+  --surface-background-states-surface-additional-secondary: var(--colors-blue-100);
+  --surface-background-states-surface-additional-tetriary: var(--colors-blue-200);
+  --surface-background-states-surface-additional-quaternary: var(--colors-blue-300);
+
+  --surface-icons-icon-primary: var(--colors-neutral-900);
+  --surface-icons-icon-button-primary: var(--colors-neutral-0);
+  --surface-icons-icon-button-secondary: var(--colors-neutral-900);
+  --surface-icons-icon-button-inactive: var(--colors-neutral-500);
+  --surface-icons-icon-secondary: var(--colors-neutral-600);
+  --surface-icons-icon-quaternary: var(--colors-neutral-200);
+  --surface-icons-icon-cta: var(--colors-brand-orange-500);
+  --surface-icons-icon-hover: var(--colors-brand-orange-400);
+  --surface-icons-icon-tetriary: var(--colors-neutral-400);
+  --surface-icons-icon-warning: var(--colors-warning-600);
+  --surface-icons-icon-positive: var(--colors-positive-600);
+  --surface-icons-icon-negative: var(--colors-negative-600);
+  --surface-icons-icon-brand-orange: var(--colors-brand-orange-600);
+  --surface-icons-icon-blue: var(--colors-blue-600);
+  --surface-icons-icon-blue-light: var(--colors-blue-200);
+
+  --border-border-primary: var(--colors-neutral-100);
+  --border-border-secondary: var(--colors-neutral-150);
+  --border-border-tetriary: var(--colors-neutral-300);
+  --border-border-quaternary: var(--colors-neutral-600);
+  --border-border-active: var(--colors-neutral-900);
+  --border-border-brand-orange: var(--colors-brand-orange-200);
+  --border-border-warning: var(--colors-warning-200);
+  --border-border-positive: var(--colors-positive-200);
+  --border-border-negative: var(--colors-negative-200);
+  --border-border-blue: var(--colors-blue-200);
+  --border-border-blue-hover: var(--colors-blue-400);
+
+  /*----------------- New Look Variables End -----------------*/
 }
 
 /* Dark Theme Configuration */
 html.dark {
-  /* General Variables */
-  --bl-secondary-color: var(--dark-bl-secondary-color);
+  /*----------------- New Look Variables Dark Mode Start -----------------*/
+  --icon-anchor: var(--icon-anchor-dark);
+  --icon-arrow-left: var(--icon-arrow-left-dark);
+  --icon-arrow-right: var(--icon-arrow-right-dark);
+  --icon-arrow-up: var(--icon-arrow-up-dark);
+  --icon-clipboard: var(--icon-clipboard-dark);
+  --icon-home: var(--icon-home-dark);
+  --icon-file: var(--icon-file-dark);
+  --icon-menu: var(--icon-menu-dark);
 
-  /* 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);
+  --text-buttons-button-label-primary-default: var(--colors-neutral-0);
+  --text-buttons-button-label-secondary-default: var(--colors-neutral-950);
+  --text-buttons-button-label-inactive: var(--colors-neutral-500);
 
-  /* 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);
+  --text-main-text-primary: var(--colors-neutral-0);
+  --text-main-text-link-blue-secondary: var(--colors-blue-500);
+  --text-main-text-link-blue-tetriary: var(--colors-blue-600);
+  --text-main-text-link-blue: var(--colors-blue-400);
+  --text-main-text-body-secondary: var(--colors-neutral-200);
+  --text-main-text-body-tetriary: var(--colors-neutral-300);
+  --text-main-text-body-quaternary: var(--colors-neutral-600);
+  --text-main-text-body-primary: var(--colors-neutral-50);
 
-  /* 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);
+  --text-states-text-warning-tetriary: var(--colors-warning-400);
+  --text-states-text-warning-secondary: var(--colors-warning-500);
+  --text-states-text-warning: var(--colors-warning-600);
+  --text-states-text-positive-secondary: var(--colors-positive-500);
+  --text-states-text-positive-tetriary: var(--colors-positive-400);
+  --text-states-text-positive: var(--colors-positive-600);
+  --text-states-text-negative-secondary: var(--colors-negative-500);
+  --text-states-text-negative-tetriary: var(--colors-negative-400);
+  --text-states-text-negative: var(--colors-negative-600);
+  --text-states-text-additional: var(--colors-blue-600);
+  --text-states-text-additional-secondary: var(--colors-blue-500);
+  --text-states-text-additional-tetriary: var(--colors-blue-400);
 
-  /* 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);
+  --text-code-red: var(--colors-code-colors-red);
+  --text-code-green: var(--colors-code-colors-green);
+  --text-code-blue: var(--colors-code-colors-blue);
+  --text-code-yellow: var(--colors-code-colors-yellow);
+  --text-code-purple: var(--colors-code-colors-purple);
+  --text-code-turquoise: var(--colors-code-colors-turquoise);
+  --text-code-neutral: var(--colors-code-colors-white);
+  --text-code-navy: var(--colors-code-colors-navy);
 
-  /* 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);
+  --surface-button-button-bg-secondary-ta-default: var(--colors-brand-orange-500);
+  --surface-button-button-bg-primary-default: var(--colors-blue-800);
+  --surface-button-button-bg-primary-pressed: var(--colors-blue-800);
+  --surface-button-button-bg-primary-inactive: var(--colors-neutral-800);
+  --surface-button-button-bg-secondary-cta-hover: var(--colors-brand-orange-400);
+  --surface-button-button-bg-primary-hover: var(--colors-blue-700);
+  --surface-button-button-bg-secondary-cta-pressed: var(--colors-brand-orange-500);
+  --surface-button-button-bg-secondary-cta-inactive: var(--colors-neutral-800);
 
-  /* 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);
+  --surface-background-main-base-primary: var(--colors-neutral-950);
+  --surface-background-main-surface-primary: var(--colors-neutral-900);
+  --surface-background-main-surface-secondary: var(--colors-neutral-850);
+  --surface-background-main-surface-tetriary: var(--colors-neutral-800);
+  --surface-background-main-surface-blue-secondary: var(--colors-blue-900);
+  --surface-background-main-surface-blue-tetriary: var(--colors-blue-850);
+  --surface-background-main-surface-blue-quaternary: var(--colors-blue-800);
+  --surface-background-main-surface-transparent: var(--colors-overlay-overlay-black-64);
+  --surface-background-main-surface-transparent-secondary: var(--colors-overlay-overlay-black-88);
+
+  --surface-background-states-surface-warning-secondary: var(--colors-warning-950);
+  --surface-background-states-surface-warning-tetriary: var(--colors-warning-800);
+  --surface-background-states-surface-warning-quaternary: var(--colors-warning-700);
+  --surface-background-states-surface-positive-secondary: var(--colors-positive-950);
+  --surface-background-states-surface-positive-tetriary: var(--colors-positive-800);
+  --surface-background-states-surface-positive-quaternary: var(--colors-positive-700);
+  --surface-background-states-surface-negative-secondary: var(--colors-negative-950);
+  --surface-background-states-surface-negative-tetriary: var(--colors-negative-800);
+  --surface-background-states-surface-negative-quaternary: var(--colors-negative-700);
+  --surface-background-states-surface-additional-secondary: var(--colors-blue-950);
+  --surface-background-states-surface-additional-tetriary: var(--colors-blue-800);
+  --surface-background-states-surface-additional-quaternary: var(--colors-blue-700);
+
+  --surface-icons-icon-primary: var(--colors-neutral-0);
+  --surface-icons-icon-button-primary: var(--colors-neutral-0);
+  --surface-icons-icon-button-secondary: var(--colors-neutral-950);
+  --surface-icons-icon-button-inactive: var(--colors-neutral-600);
+  --surface-icons-icon-secondary: var(--colors-neutral-400);
+  --surface-icons-icon-quaternary: var(--colors-neutral-600);
+  --surface-icons-icon-cta: var(--colors-brand-orange-500);
+  --surface-icons-icon-hover: var(--colors-brand-orange-600);
+  --surface-icons-icon-warning: var(--colors-warning-400);
+  --surface-icons-icon-positive: var(--colors-positive-400);
+  --surface-icons-icon-negative: var(--colors-negative-400);
+  --surface-icons-icon-brand-orange: var(--colors-brand-orange-400);
+  --surface-icons-icon-blue: var(--colors-blue-400);
+  --surface-icons-icon-blue-light: var(--colors-blue-700);
+
+  --border-border-primary: var(--colors-neutral-850);
+  --border-border-secondary: var(--colors-neutral-800);
+  --border-border-tetriary: var(--colors-neutral-700);
+  --border-border-quaternary: var(--colors-neutral-500);
+  --border-border-active: var(--colors-neutral-0);
+  --border-border-brand-orange: var(--colors-brand-orange-900);
+  --border-border-warning: var(--colors-warning-800);
+  --border-border-positive: var(--colors-positive-800);
+  --border-border-negative: var(--colors-negative-800);
+  --border-border-blue: var(--colors-blue-700);
+  --border-border-blue-hover: var(--colors-blue-500);
+
+  /*----------------- New Look Variables Dark Mode Start -----------------*/
 }
 
 /*----------------- HTML Variables - End -----------------*/
 
+/* Override for Antora default styles */
+html:has(.boostlook) {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  font-size: 1rem;
+  height: 100%;
+  scroll-behavior: smooth;
+}
+
 /*----------------- Font-Face Declarations start -----------------*/
 
 /**
@@ -393,51 +654,55 @@ html.dark {
 @font-face {
   font-family: "Noto Sans Display";
   font-style: normal;
-  font-weight: 100 900;            /* Variable font weight range */
+  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');
+  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-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');
+  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-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');
+  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-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-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 -----------------*/
@@ -447,17 +712,20 @@ html.dark {
 /**
  * Modern CSS Reset
  * A minimal CSS reset that:
- * 1. Uses modern box-sizing model
+ * 1. Uses the modern box-sizing model
  * 2. Removes default margins
  * 3. Improves text rendering
- * 4. Handles media elements consistently
+ * 4. Ensures responsive media elements
  * 5. Normalizes form elements
  * 6. Prevents text overflow issues
- * 7. Provides proper stacking context
+ * 7. Provides a proper stacking context
+ * 8. Resets legacy table and adjacent element styles
  */
 
 /* Box sizing rules */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -466,31 +734,78 @@ html.dark {
   margin: 0;
 }
 
+html body {
+  margin: 0;
+}
+
 /* Body defaults */
 body {
   line-height: 1.5;
-  -webkit-font-smoothing: antialiased;  /* Improves text rendering on WebKit */
+  -webkit-font-smoothing: antialiased;
+  margin: 0;
+  /* Improves text rendering on WebKit */
 }
 
 /* Media elements */
-img, picture, video, canvas, svg {
+img,
+picture,
+video,
+canvas,
+svg {
   display: block;
-  max-width: 100%;                      /* Responsive media elements */
+  max-width: 100%;
+  /* Responsive media elements */
 }
 
 /* Form elements */
-input, button, textarea, select {
-  font: inherit;                        /* Inherit typography */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  /* Inherit typography */
 }
 
 /* Text elements */
-p, h1, h2, h3, h4, h5, h6 {
-  overflow-wrap: break-word;            /* Prevent text overflow */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+  /* Prevent text overflow */
+}
+
+body :not(pre):not([class^="L"]) > code {
+  /* ovverrides builtin colors */
+  color: var(--text-code-neutral, #0d0e0f);
 }
 
 /* Stacking context */
-#root, #__next {
-  isolation: isolate;                   /* Create new stacking context */
+#root,
+#__next {
+  isolation: isolate;
+  /* Create new stacking context */
+}
+
+/* Reset Legacy Table and Next to Table Element Styles */
+.boostlook .tablecontainer,
+.boostlook .tablecontainer + *,
+.boostlook :not(.tablecontainer) > table.tableblock,
+.boostlook :not(.tablecontainer) > table.tableblock + *,
+.boostlook .doc .tablecontainer,
+.boostlook .doc .tablecontainer + *,
+.boostlook .doc :not(.tablecontainer) > table.tableblock,
+.boostlook .doc :not(.tablecontainer) > table.tableblock + *,
+.boostlook.boostlook:not(:has(.doc)) table.table,
+.boostlook.boostlook:not(:has(.doc)) table.table + * {
+  margin: revert;
+}
+
+.boostlook .underline:has(> code:only-child) {
+  text-decoration-line: none;
 }
 
 /*----------------- CSS Reset end -----------------*/
@@ -501,17 +816,21 @@ p, h1, h2, h3, h4, h5, h6 {
  * 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
+ * 1. Base container styling
+ * 2. Typography hierarchy and spacing
+ * 3. Link appearances and interactions
+ * 4. Code block formatting and syntax highlighting
+ * 5. List and table styles
+ * 6. Special block elements (quotes, admonitions, etc.)
+ * 7. Pagination and navigation elements
+ * 8. Layout structure and spacing
  */
 
 /* Base Container */
 .boostlook {
   font-family: "Noto Sans Display" !important;
-  font-stretch: 90%;
+  font-stretch: 100%;
+  background: var(--surface-background-main-base-primary, #fff);
 }
 
 /* Typography Hierarchy
@@ -519,56 +838,281 @@ p, h1, h2, h3, h4, h5, h6 {
  * while maintaining proper visual hierarchy
  */
 .boostlook h1,
+.boostlook .doc h1,
 .boostlook h2,
+.boostlook .doc h2,
 .boostlook h3,
+.boostlook .doc h3,
 .boostlook h4,
+.boostlook .doc h4,
 .boostlook h5,
-.boostlook h6 {
+.boostlook .doc h5,
+.boostlook h6,
+.boostlook .doc h6 {
+  color: var(--text-main-text-primary, #18191b);
   display: block;
-  line-height: 1;
-  margin-top: 2rem;
-  margin-bottom: 1rem;
+  line-height: var(--typography-line-height-xl, 1.75rem);
+  margin-top: var(--padding-padding-md, 1.125rem);
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  margin-bottom: 0.5rem;
   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 */
+.boostlook h1,
+.boostlook .doc h1 {
+  font-size: var(--typography-font-size-2xl, 1.75rem);
+  line-height: var(--typography-line-height-3xl, 2.5rem); /* 142.857% */
+}
 
-/* Document-specific heading adjustments */
+/* Primary headings */
+.boostlook h2,
+.boostlook .doc h2 {
+  font-size: var(--typography-font-size-lg, 1.25rem);
+}
+
+/* Section headings */
+.boostlook h3,
+.boostlook .doc h3 {
+  font-size: var(--typography-font-size-md, 1.125rem);
+  line-height: var(--typography-line-height-xl, 1.75rem); /* 155.556% */
+}
+
+/* Subsection headings */
+.boostlook h4,
+.boostlook .doc h4 {
+  font-size: var(--font-size-sm, 1rem);
+  line-height: var(--font-line-height-lg, 1.5rem);
+}
+
+/* Topic headings */
+.boostlook h5,
+.boostlook .doc h5 {
+  font-size: var(--font-size-xs, 0.875rem);
+  line-height: var(--font-line-height-md, 1.25rem);
+}
+
+/* Subtopic headings */
+.boostlook h6,
+.boostlook .doc h6 {
+  font-size: var(--font-size-xs, 0.875rem);
+  line-height: var(--font-line-height-md, 1.25rem);
+}
+
+/* Document-specific headings adjustments */
 .boostlook .doc h2:not(.discrete) {
+  /* website-v2-doc styles overrides */
   margin-left: 0;
   padding-left: 0;
+  border-bottom: revert;
+  margin-right: revert;
+  padding: revert;
+}
+
+.boostlook h2:has(+ .sectionbody > .sect2:first-child > h3),
+.boostlook .doc h2:has(+ .sectionbody > .sect2:first-child > h3) {
+  margin-bottom: 0;
+}
+
+.boostlook h3:has(+ .sect3 > h4:first-child),
+.boostlook .doc h2:has(+ .sect3 > h4:first-child) {
+  margin-bottom: 0;
+}
+
+/* Override default docs site css */
+.boostlook .doc .dlist,
+.boostlook .doc .exampleblock,
+.boostlook .doc .hdlist,
+.boostlook .doc .imageblock,
+.boostlook .doc .listingblock,
+.boostlook .doc .literalblock,
+.boostlook .doc .olist,
+.boostlook .doc .paragraph,
+.boostlook .doc .partintro,
+.boostlook .doc .quoteblock,
+.boostlook .doc .sidebarblock,
+.boostlook .doc .tabs,
+.boostlook .doc .ulist,
+.boostlook .doc .verseblock,
+.boostlook .doc .videoblock,
+.boostlook .doc details,
+.boostlook .doc hr {
+  margin: revert;
 }
 
 /* Anchor positioning within headings */
-.boostlook .doc h1 .anchor {
-  margin: 3px 0 0 -1.3ex;
+.boostlook .doc h2:has(.anchor),
+.boostlook .doc h1:has(.anchor),
+.boostlook .doc h3:has(.anchor),
+.boostlook .doc h4:has(.anchor),
+.boostlook .doc h5:has(.anchor),
+.boostlook .doc h6:has(.anchor) {
+  display: inline-block;
+  /* Anchor width and spacing compensation */
+  padding-right: 3rem;
 }
 
+/* Heading Anchors */
+.boostlook .doc h1 .anchor,
 .boostlook .doc h2 .anchor,
-.boostlook .doc h3 .anchor {
-  margin: 2px 0 0 -1.3ex;
-}
-
+.boostlook .doc h3 .anchor,
 .boostlook .doc h4 .anchor,
 .boostlook .doc h5 .anchor,
 .boostlook .doc h6 .anchor {
-  margin: 1px 0 0 -1.3ex;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: revert;
+  width: 2rem;
+  height: 2rem;
+  border: 1px;
+  visibility: hidden;
+  opacity: 0;
+  text-decoration: none;
+  border-radius: var(--spacing-size-lg, 1.5rem);
+  border: 1px solid var(--border-border-primary, #e4e7ea);
+  background: var(--surface-background-main-base-primary, #fff);
+  transform: translateY(-50%);
+  transition: all 0.2s ease;
+}
+
+.boostlook .doc h1 .anchor::before,
+.boostlook .doc h2 .anchor::before,
+.boostlook .doc h3 .anchor::before,
+.boostlook .doc h4 .anchor::before,
+.boostlook .doc h5 .anchor::before,
+.boostlook .doc h6 .anchor::before {
+  content: var(--icon-anchor);
+  display: block;
+  line-height: 1;
+  opacity: 0.6;
+  transition: opacity 0.3s ease;
+}
+
+.doc h1:hover .anchor,
+.doc h2:hover .anchor,
+.doc h3:hover .anchor,
+.doc h4:hover .anchor,
+.doc h5:hover .anchor,
+.doc h6:hover .anchor {
+  opacity: 1;
+  visibility: visible;
+}
+
+.boostlook .doc h1 .anchor:hover,
+.boostlook .doc h2 .anchor:hover,
+.boostlook .doc h3 .anchor:hover,
+.boostlook .doc h4 .anchor:hover,
+.boostlook .doc h5 .anchor:hover,
+.boostlook .doc h6 .anchor:hover {
+  border-color: var(--border-border-blue, #92cbe9);
+}
+
+.boostlook .doc h1 .anchor:active,
+.boostlook .doc h2 .anchor:active,
+.boostlook .doc h3 .anchor:active,
+.boostlook .doc h4 .anchor:active,
+.boostlook .doc h5 .anchor:active,
+.boostlook .doc h6 .anchor:active {
+  border-color: var(--border-border-blue, #92cbe9);
+  background: var(--surface-background-main-surface-blue-secondary, #daeef9);
+}
+
+.boostlook .doc h1 .anchor:hover::before,
+.boostlook .doc h2 .anchor:hover::before,
+.boostlook .doc h3 .anchor:hover::before,
+.boostlook .doc h4 .anchor:hover::before,
+.boostlook .doc h5 .anchor:hover::before,
+.boostlook .doc h6 .anchor:hover::before {
+  opacity: 1;
 }
 
 /* Paragraph Styling */
 .boostlook p {
-  font-size: 1rem;
-  margin-bottom: 1.5rem;
-  color: var(--bl-text-color);
   padding-top: initial !important;
   padding-bottom: initial !important;
+  color: var(--text-main-text-body-primary, #2a2c30);
+  font-size: var(--typography-font-size-sm, 1rem);
+  font-weight: 400;
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */
+}
+
+/* Components margins */
+.boostlook .paragraph + .paragraph,
+.boostlook:not(:has(.doc)) .section > p + p,
+.boostlook:not(:has(.doc)) .chapter > p + p,
+.boostlook div.blockquote blockquote p + p,
+.boostlook#libraryReadMe > p:not(:first-child) + p,
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > p + p {
+  margin-top: var(--padding-padding-3xs, 0.25rem);
+}
+
+.boostlook .paragraph + .tabs,
+.boostlook #content .paragraph + .admonitionblock,
+.boostlook #content .tabs + .paragraph,
+.boostlook #content .colist + .paragraph,
+.boostlook #content .admonitionblock + .tabs,
+.boostlook #content .admonitionblock + .admonitionblock,
+.boostlook #content .olist + .admonitionblock,
+.boostlook #content .olist + .paragraph,
+.boostlook:not(:has(.doc)) div.orderedlist + p,
+.boostlook:not(:has(.doc)) p + div.orderedlist,
+.boostlook:not(:has(.doc)) .itemizedlist + p,
+.boostlook:not(:has(.doc)) div.itemizedlist:has(+ a[id^="bind"]) + a + *,
+.boostlook:not(:has(.doc)) div.table:has(+ .table-break) + .table-break + *,
+.boostlook #content .paragraph + .olist,
+.boostlook #content .ulist + .admonitionblock,
+.boostlook #content .ulist + .paragraph,
+.boostlook #content .colist + .admonitionblock,
+.boostlook #content .admonitionblock + .paragraph,
+.boostlook #content .paragraph + table.tableblock,
+.boostlook.boostlook:not(:has(.doc)) p + table.table,
+.boostlook.boostlook:not(:has(.doc)) p + .informaltable,
+.boostlook #content table.tableblock + .paragraph,
+.boostlook #content table.tableblock + .admonitionblock,
+.boostlook:not(:has(.doc)) .informaltable + p,
+.boostlook #content .imageblock + .paragraph,
+.boostlook:not(:has(.doc)) .inlinemediaobject + p,
+.boostlook:not(:has(.doc)) p:has(> .inlinemediaobject:only-child) + p,
+.boostlook#libraryReadMe > p + table,
+.boostlook#libraryReadMe > table + p,
+.boostlook#libraryReadMe > ul + p,
+.boostlook#libraryReadMe .literalblock + .paragraph,
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) + p {
+  margin-top: var(--padding-padding-xs, 0.75rem);
+}
+
+.boostlook #content .dlist + .paragraph,
+.boostlook #content .dlist + .listingblock,
+.boostlook:not(:has(.doc)) div.blockquote + p,
+.boostlook:not(:has(.doc)) .variablelist + p {
+  margin-top: var(--padding-padding-2xs, 0.5rem);
+}
+
+.boostlook h2 + .tabs,
+.boostlook .doc h2 + .tabs,
+.boostlook h3 + .tabs,
+.boostlook .doc h3 + .tabs,
+.boostlook h4 + .tabs,
+.boostlook .doc h4 + .tabs,
+.boostlook h5 + .tabs,
+.boostlook .doc h5 + .tabs,
+.boostlook h5 + .tabs,
+.boostlook .doc h6 + .tabs,
+.boostlook #content .sectionbody .olist:first-child,
+.boostlook:not(:has(.doc)) .section div.orderedlist:first-child {
+  margin-top: var(--padding-padding-3xs, 0.25rem);
+}
+
+.boostlook .olist .imageblock .content,
+.boostlook .ulist .imageblock .content {
+  margin-bottom: var(--padding-padding-xs, 0.75rem);
 }
 
 /* Special paragraph cases */
@@ -580,36 +1124,30 @@ p, h1, h2, h3, h4, h5, h6 {
 /* Link Styling */
 .boostlook a,
 .boostlook .doc a {
-  color: var(--bl-link-color);
-  text-decoration: none;
+  color: var(--text-main-text-primary, #18191b);
+  font-weight: 500;
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-skip-ink: auto;
+  text-decoration-color: var(--border-border-blue, #92cbe9);
+  text-decoration-thickness: 8%;
+  text-underline-offset: 12%;
+  text-underline-position: from-font;
+  transition: color 0.3s ease;
 }
 
 /* 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);
+.boostlook .doc a:hover {
+  color: var(--text-main-text-link-blue-secondary, #0284c7);
   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;
+.boostlook table a:visited,
+.boostlook .pagination a:visited {
+  color: var(--text-main-text-body-tetriary, #62676b);
 }
 
 /* Emphasis within code */
@@ -619,198 +1157,1518 @@ p, h1, h2, h3, h4, h5, h6 {
   font-size: inherit;
 }
 
-/* Table Headings */
-.boostlook h6:has(+table) {
-  margin-left: 1em;
+/* Text Emphasis */
+.boostlook b,
+.boostlook strong {
+  font-variation-settings: "wght" 600;
 }
 
-/* List Styling */
-.boostlook ul.itemizedlist,
-#boost-legacy-docs-wrapper .ulist ul {
-  padding: 0 0 0 15px;
+/* Code Block Styling */
+.boostlook .doc .listingblock,
+.boostlook .listingblock {
+  position: relative;
+}
+
+.boostlook .doc .listingblock code,
+.boostlook .listingblock code {
+  display: initial;
+}
+
+.boostlook .hljs {
+  background: transparent;
+}
+
+.boostlook code {
+  font-family: var(--font-family-code, "Noto Sans Mono"), monospace;
+}
+
+.boostlook table thead code {
+  background: inherit;
+}
+
+.boostlook pre code,
+.boostlook pre code.hljs,
+.boostlook .doc .content pre code,
+.boostlook .doc pre.highlight code {
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-weight: 400;
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  color: var(--text-main-text-primary, #18191b);
+  padding: revert;
+  border: none;
+}
+
+.boostlook pre:not(:has(> code)),
+.boostlook pre:not(:has(> code)):has(p, span) {
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-weight: 400;
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+.boostlook pre,
+.boostlook pre.rouge,
+.boostlook .doc .content pre,
+.boostlook .doc pre.highlight,
+.boostlook .doc .listingblock pre:not(.highlight),
+.boostlook .doc .literalblock pre {
+  padding: var(--spacing-size-xs, 0.75rem) var(--spacing-size-sm, 1rem);
+  background: var(--surface-background-main-surface-primary, #f5f6f8);
+  border-radius: 0.45rem;
+  border: unset;
+}
+
+.boostlook .doc pre {
+  padding: initial;
+}
+
+.boostlook .content:has(> pre),
+.boostlook .content:has(> pre.highlight) {
+  border-radius: var(--spacing-size-2xs, 0.5rem);
+  border: 1px solid var(--border-border-secondary, #d5d7d9);
+  background: var(--surface-background-main-surface-secondary, #e4e7ea);
+}
+
+/* Code Block Regular Title */
+.boostlook .doc .listingblock .title,
+.boostlook .listingblock .title {
+  color: var(--text-main-text-body-primary, #2a2c30);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-style: italic;
+  font-weight: 500;
+  line-height: var(--typography-line-height-md, 1.25rem);
+  letter-spacing: unset;
+  padding-bottom: var(--padding-padding-3xs, 0.25rem);
+}
+
+/* Code Block Title With File Name.
+ * Applies only if codeblock has child with class .toolbox
+ * and it`s title doesn`t includes any other elems as children
+*/
+.boostlook .doc .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre)),
+.boostlook .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre)) {
+  position: absolute;
+  top: 1px;
+  height: 2rem;
+  max-width: calc(100% - 5rem);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0;
+  padding-left: var(--spacing-size-sm);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-size-2xs, 0.5rem);
+  color: var(--text-main-text-body-tetriary, #62676b);
+  font-family: "Noto Sans Display";
+  font-size: var(--typography-font-size-2xs, 0.75rem);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--typography-line-height-sm, 1rem);
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  z-index: 1;
+}
+
+.boostlook .doc .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre))::before,
+.boostlook .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre))::before {
+  content: var(--icon-file);
+  line-height: 0;
+}
+
+/* Code Block Margins */
+.boostlook .listingblock:has(> .content > pre),
+.boostlook .listingblock:has(> .content > pre.highlight),
+.boostlook:not(:has(.doc)) pre.programlisting,
+.boostlook#libraryReadMe > pre,
+.boostlook#libraryReadMe .literalblock:has(pre) {
   margin: 0;
+  margin-top: var(--padding-padding-3xs, 0.25rem);
+}
+
+.boostlook .listingblock:has(> .content > pre):not(:last-child),
+.boostlook .listingblock:has(> .content > pre.highlight):not(:last-child),
+.boostlook:not(:has(.doc)) pre.programlisting:not(:last-child),
+.boostlook#libraryReadMe > pre:not(:last-child) {
+  margin-bottom: var(--padding-padding-xs, 0.75rem);
+}
+
+.boostlook .content:has(> pre):has(> .source-toolbox) {
+  position: relative;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.boostlook .content:has(> pre):has(> .source-toolbox) pre {
+  border-top: 1px solid var(--border-border-secondary, #d5d7d9);
+  border-radius: var(--spacing-size-2xs, 0.5rem);
+}
+
+.boostlook .content:has(> pre):has(> .source-toolbox) .source-toolbox {
+  position: static;
+  order: 0;
+  display: flex;
+  visibility: visible;
+  top: unset;
+  right: unset;
+  color: var(--text-main-text-body-tetriary, #62676b);
+  font-family: inherit;
+  z-index: 1;
+  padding: var(--article-article-compressing-from-12-8--, 0.5rem) var(--spacing-size-sm, 1rem);
+  min-height: 2rem;
+}
+
+.boostlook .content:has(> pre):has(> .source-toolbox) .source-lang {
+  color: var(--text-main-text-body-quaternary, #949a9e);
+  text-align: right;
+  font-family: "Noto Sans Display";
+  font-size: var(--typography-font-size-2xs, 0.75rem);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  text-transform: uppercase;
+  margin-left: auto;
+}
+.boostlook .content:has(> pre):has(> .source-toolbox) .source-lang::after {
+  content: none;
+}
+
+/* Code Block Copy to Clipboard Icon */
+.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button {
+  position: absolute;
+  top: 2.25rem;
+  right: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: inherit;
+  outline: none;
+  font-size: inherit;
+  line-height: inherit;
+  width: 2rem;
+  height: 2rem;
+  padding: var(--spacing-size-3xs, 0.25rem);
+  border-radius: var(--spacing-size-2xs, 0.5rem);
+  border: 1px solid var(--border-border-primary, #e4e7ea);
+  background: var(--surface-background-main-surface-primary, #f5f6f8);
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.2s ease;
+}
+
+.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button:hover {
+  border: 1px solid var(--border-border-blue, #92cbe9);
+}
+
+.boostlook .content:has(> pre):has(> .source-toolbox):hover .copy-button {
+  opacity: 1;
+  visibility: visible;
+}
+
+.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button img {
+  display: none;
+}
+
+.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button::before {
+  content: var(--icon-clipboard);
+  width: var(--icons-24, 1.5rem);
+  height: var(--icons-24, 1.5rem);
+  aspect-ratio: 1/1;
+}
+
+/* Code Block Copied Toast */
+.boostlook .content:has(> pre):has(> .source-toolbox) .copy-toast {
+  flex: none;
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  padding: var(--padding-padding-3xs, 0.25rem) var(--padding-padding-xs, 0.75rem);
+  flex-direction: column;
+  align-items: center;
+  margin-top: 1em;
+  background: var(--surface-background-main-surface-primary, #f5f6f8);
+  border-radius: var(--spacing-size-2xs, 0.5rem);
+  border: 1px solid var(--border-border-secondary, #d5d7d9);
+  color: var(--text-main-text-primary, #18191b);
+  cursor: auto;
+  opacity: 0;
+  transition: opacity 0.5s ease 0.5s;
+}
+
+.boostlook .content:has(> pre):has(> .source-toolbox) .copy-toast::after {
+  content: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6%2011.95L11.6569%206.2931L6%200.636243L0.343146%206.2931L6%2011.95Z%22%20fill%3D%22%23F5F6F8%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0.343146%206.2931L6%200.636243L11.6569%206.2931L10.9497%207.0002L6%202.05046L1.05025%207.0002L0.343146%206.2931Z%22%20fill%3D%22%23E4E7EA%22%2F%3E%3C%2Fsvg%3E");
+  position: absolute;
+  top: -62%;
+  width: 1em;
+  height: 1em;
+  border: unset;
+  border-left-color: unset;
+  transform: unset;
+  transform-origin: unset;
+  color: var(--text-main-text-primary, #18191b);
+  text-align: center;
+  font-size: var(--typography-font-size-sm, 1rem);
+  font-weight: 500;
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */
 }
 
 /* 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;
+.boostlook p code:not(:has(> code)),
+.boostlook li code:not(:has(> code)),
+.boostlook .doc p code:not(:has(> code)),
+.boostlook .doc .colist > table code:not(:has(> code)) {
+  display: inline;
+  color: var(--text-code-neutral, #0d0e0f);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  padding: 0 var(--padding-padding-3xs);
+  font-style: normal;
   font-weight: 400;
+  line-height: var(--typography-line-height-md);
+  letter-spacing: var(--spacing-size-size-0, 0rem);
   font-stretch: 90%;
-  color: var(--bl-code-text-color) !important;
+}
+
+.boostlook p:not(:is(table p)) code:not(:has(> code)),
+.boostlook li code:not(:has(> code)),
+.boostlook .doc p:not(:is(table p)) code:not(:has(> code)),
+.boostlook .doc .colist > table code:not(:has(> code)) {
+  border-radius: var(--spacing-size-3xs, 0.25rem);
+  border: 1px solid var(--border-border-secondary, #d5d7d9);
+  background: var(--surface-background-main-surface-primary, #f5f6f8) !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 p:not(:is(table p)) a code,
+.boostlook li:not(:is(table li)) a code,
+.boostlook .doc p:not(:is(table p)) a code,
 .boostlook .doc table a code,
-.boostlook .doc .colist > table a code {
-  color: var(--bl-link-color) !important;
+.boostlook .doc .colist > table a code,
+.boostlook code:has(> a:first-child:last-child),
+.boostlook code:has(> a:only-child),
+.boostlook p:not(:is(table p)) code:has(> a:first-child:last-child),
+.boostlook p:not(:is(table p)) code:has(> a:only-child),
+.boostlook li:not(:is(table li)) code:has(> a:first-child:last-child),
+.boostlook li:not(:is(table li)) code:has(> a:only-child),
+.boostlook .doc p:not(:is(table p)) code:has(> a:first-child:last-child),
+.boostlook .doc p:not(:is(table p)) code:has(> a:only-child),
+.boostlook .doc .colist > table code:has(> a:first-child:last-child),
+.boostlook .doc .colist > table code:has(> a:only-child) {
+  transition: all 0.2s ease;
+  border-radius: var(--spacing-size-3xs, 0.25rem);
+  border: 1px solid var(--border-border-blue, #92cbe9);
+  background: var(--surface-background-main-surface-blue-secondary, #daeef9) !important;
+  color: var(--text-states-text-additional-tetriary, #026a9f);
 }
 
+/* Applies to links in code in case where only one link tag inside code */
+.boostlook code:not(.tableblock code, .table code):has(> a:first-child:last-child) a,
+.boostlook code:not(.tableblock code, .table code):has(> a:only-child) a,
+.boostlook p code:not(.tableblock code, .table code):has(> a:first-child:last-child) a,
+.boostlook p code:not(.tableblock code, .table code):has(> a:only-child) a,
+.boostlook li code:not(.tableblock code, .table code):has(> a:first-child:last-child) a,
+.boostlook li code:not(.tableblock code, .table code):has(> a:only-child) a,
+.boostlook .doc p code:not(.tableblock code, .table code):has(> a:first-child:last-child) a,
+.boostlook .doc p code:not(.tableblock code, .table code):has(> a:only-child) a,
+.boostlook .doc .colist > table code:has(> a:first-child:last-child) a,
+.boostlook .doc .colist > table code:has(> a:only-child) a {
+  text-decoration: none;
+  font: inherit;
+  color: inherit;
+}
+
+/* .boostlook .doc table.tableblock code a,
+.boostlook:not(:has(.doc)) table.table code a { */
+/* text-decoration-color: transparent; */
+/* color: var(--text-code-blue, #329cd2); */
+/* line-height: var(--typography-line-height-lg, 1.5rem); */
+/* } */
+
 /* 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 p:not(:is(table p)) a:hover code,
 .boostlook li a:hover code,
-.boostlook .doc p a:hover code,
+.boostlook .doc p:not(:is(table p)) a:hover code,
 .boostlook .doc table a:hover code,
-.boostlook .doc .colist > table a:hover code {
-  color: var(--bl-link-hover-color) !important;
+.boostlook .doc .colist > table a:hover code,
+.boostlook p:not(:is(table p)) code:has(> a:first-child:last-child):hover,
+.boostlook p:not(:is(table p)) code:has(> a:only-child):hover,
+.boostlook li code:has(> a:first-child:last-child):hover,
+.boostlook li code:has(> a:only-child):hover,
+.boostlook .doc p:not(:is(table p)) code:has(> a:first-child:last-child):hover,
+.boostlook .doc p:not(:is(table p)) code:has(> a:only-child):hover,
+.boostlook .doc .colist > table code:has(> a:first-child:last-child):hover,
+.boostlook .doc .colist > table code:has(> a:only-child):hover {
+  border-color: var(--border-border-blue-hover, #329cd2);
+  background: var(--surface-background-main-surface-blue-tetriary, #c2e2f4) !important;
 }
 
-/* Table Cell Code */
-.boostlook td code {
-  margin-bottom: 10px;
+.boostlook a:hover code {
+  color: inherit;
 }
 
-/* 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);
+.boostlook .doc table.tableblock code:hover a,
+.boostlook:not(:has(.doc)) table.table code:hover a,
+.boostlook .doc table.tableblock code a:focus-visible,
+.boostlook:not(:has(.doc)) table.table code a:focus-visible {
+  text-decoration-color: var(--border-border-blue, #92cbe9);
 }
 
 /* Syntax Highlighting */
 .boostlook .hljs-keyword,
 .boostlook .hljs-selector-tag,
-.boostlook .hljs-subst {
-  color: var(--bl-hljs-keyword-color);
+.boostlook .hljs-subst,
+.boostlook pre span.k,
+.boostlook pre span.kc,
+.boostlook pre span.kd,
+.boostlook pre span.kn,
+.boostlook pre span.kp,
+.boostlook pre span.kr,
+.boostlook pre span.kt,
+.boostlook pre span.keyword,
+.boostlook pre span.property {
+  color: var(--text-code-purple, #9f26e5);
 }
 
-.boostlook .hljs-number {
-  color: var(--bl-hljs-number-color);
+.boostlook pre span.n,
+.boostlook pre span.na,
+.boostlook pre span.nb,
+.boostlook pre span.bp,
+.boostlook pre span.nc,
+.boostlook pre span.no,
+.boostlook pre span.nd,
+.boostlook pre span.ni,
+.boostlook pre span.ne,
+.boostlook pre span.nf,
+.boostlook pre span.py,
+.boostlook pre span.nl,
+.boostlook pre span.nn,
+.boostlook pre span.nx,
+.boostlook pre span.nt,
+.boostlook pre span.nv,
+.boostlook pre span.vc,
+.boostlook pre span.vg,
+.boostlook pre span.vi,
+.boostlook pre span.identifier {
+  color: var(--text-code-navy, #162ec6);
 }
 
+.boostlook pre span.c,
+.boostlook pre span.ch,
+.boostlook pre span.cm,
+.boostlook pre span.cp,
+.boostlook pre span.cpf,
+.boostlook pre span.c1,
+.boostlook pre span.cs,
+.boostlook pre span.sd,
+.boostlook pre span.sh,
+.boostlook pre span.comment,
+.boostlook .hljs-comment,
+.boostlook .hljs-quote,
+.boostlook .hljs-addition,
+.boostlook .hljs-built_in,
+.boostlook .hljs-bullet,
+.boostlook .hljs-code {
+  color: var(--text-code-green, #48ac7b);
+}
+
+.boostlook pre span.s,
+.boostlook pre span.sa,
+.boostlook pre span.sb,
+.boostlook pre span.dl,
+.boostlook pre span.s2,
+.boostlook pre span.se,
+.boostlook pre span.si,
+.boostlook pre span.sx,
+.boostlook pre span.sr,
+.boostlook pre span.s1,
+.boostlook pre span.ss,
+.boostlook pre span.string,
 .boostlook .hljs-doctag,
-.boostlook .hljs-string {
-  color: var(--bl-hljs-doctag-color);
+.boostlook .hljs-string,
+.boostlook .hljs-deletion,
+.boostlook .hljs-number,
+.boostlook .hljs-quote,
+.boostlook .hljs-selector-class,
+.boostlook .hljs-selector-id,
+.boostlook .hljs-template-tag,
+.boostlook .hljs-type {
+  color: var(--text-code-red, #f9677f);
 }
 
 .boostlook .hljs-section,
 .boostlook .hljs-selector-id,
 .boostlook .hljs-title {
-  color: var(--bl-hljs-section-color);
+  color: var(--text-code-blue, #329cd2);
 }
 
 .boostlook .hljs-attribute,
 .boostlook .hljs-name,
 .boostlook .hljs-tag {
-  color: var(--bl-hljs-attribute-color);
+  color: var(--text-main-text-primary, #18191b);
+}
+
+/* Syntax Defaults */
+.boostlook .hljs-attribute,
+.boostlook .hljs-doctag,
+.boostlook .hljs-keyword,
+.boostlook .hljs-meta .hljs-keyword,
+.boostlook .hljs-name,
+.boostlook .hljs-selector-tag,
+.boostlook .hljs-section,
+.boostlook .hljs-title {
+  font-weight: inherit;
+}
+
+.boostlook .hljs-meta {
+  color: inherit;
+}
+
+/* Table Headings */
+.boostlook h6:has(+ table) {
+  margin-left: 1em;
+}
+
+/* Quote Blocks */
+.boostlook .quoteblock,
+.boostlook .doc .quoteblock,
+.boostlook .verseblock,
+.boostlook .doc .verseblock,
+.boostlook div.blockquote {
+  padding: var(--padding-padding-md, 1.125rem) var(--padding-padding-lg, 1.5rem);
+  border-radius: var(--spacing-size-size-0, 0rem) var(--spacing-size-2xs, 0.5rem) var(--spacing-size-2xs, 0.5rem) var(--spacing-size-size-0, 0rem);
+  border-left: 2px solid var(--border-border-active, #18191b);
+  background: var(--surface-background-main-surface-primary, #f5f6f8);
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-sm, 1rem);
+  font-weight: 400;
+  line-height: var(--typography-line-height-lg, 1.5rem);
+}
+
+.boostlook .quoteblock:not(:first-child),
+.boostlook .doc .quoteblock:not(:first-child),
+.boostlook .verseblock:not(:first-child),
+.boostlook .doc .verseblock:not(:first-child),
+.boostlook div.blockquote:not(:first-child) {
+  margin-top: var(--padding-padding-2xs, 0.5rem);
+}
+
+.boostlook .quoteblock blockquote,
+.boostlook .doc .quoteblock blockquote,
+.boostlook .verseblock blockquote,
+.boostlook .doc .verseblock blockquote,
+.boostlook div.blockquote blockquote {
+  margin: 0;
+}
+
+.boostlook .quoteblock blockquote .paragraph,
+.boostlook .doc .quoteblock blockquote .paragraph,
+.boostlook .verseblock blockquote .paragraph,
+.boostlook .doc .verseblock blockquote .paragraph,
+.boostlook div.blockquote blockquote p {
+  font: inherit;
+}
+
+.boostlook .quoteblock blockquote p,
+.boostlook .doc .quoteblock blockquote p,
+.boostlook .verseblock blockquote p,
+.boostlook .doc .verseblock blockquote p {
+  margin: 0;
+  font: inherit;
+  color: inherit;
 }
 
 /* Pagination */
-.boostlook nav.pagination span::before {
-  color: var(--bl-pagination-color);
+.boostlook nav.pagination {
+  border-top: revert;
+  line-height: initial;
+  margin: revert;
+  display: flex;
+  padding: var(--spacing-size-2xs, 0.5rem) var(--spacing-size-size-0, 0rem);
+  align-items: stretch;
+  gap: var(--spacing-size-2xs, 0.5rem);
 }
 
-/* Text Emphasis */
-.boostlook b,
-.boostlook strong {
-  font-variation-settings: "wght" 700;
+.boostlook nav.pagination > span {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 0;
+  backdrop-filter: blur(8px);
+  padding-right: revert;
+  padding-left: revert;
+  margin-left: revert;
+}
+.boostlook nav.pagination > span.next {
+  text-align: right;
+}
+
+.boostlook nav.pagination span::before {
+  content: none !important;
+}
+
+.boostlook nav.pagination > span a {
+  /* Container padding + two paddings of arrow icon container + arrow icon width + gap between arrow and content */
+  --_arrow-based-padding: calc(var(--padding-padding-2xs) + (var(--spacing-size-3xs) * 2) + var(--icons-24) + var(--padding-padding-md));
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--padding-padding-xs, 0.75rem);
+  border: 1px solid var(--border-border-primary, #e4e7ea);
+  padding: var(--padding-padding-xs, 0.75rem);
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-sm, 1rem);
+  font-weight: 500;
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  text-decoration: none;
+  transition: background-color 0.3s ease;
+}
+
+.boostlook nav.pagination > span:hover a {
+  background: var(--surface-background-main-surface-primary, #f5f6f8);
+}
+
+.boostlook nav.pagination > span.prev a {
+  padding-left: var(--_arrow-based-padding);
+}
+.boostlook nav.pagination > span.next a {
+  padding-right: var(--_arrow-based-padding);
+}
+
+@media screen and (min-width: 990px) {
+  .boostlook nav.pagination > span a {
+    --_arrow-based-padding: calc(var(--padding-padding-2xs) + (var(--spacing-size-xs) * 2) + var(--icons-24) + var(--padding-padding-md));
+  }
+}
+
+.boostlook nav.pagination > span a::before {
+  width: auto;
+  position: static;
+  color: var(--text-main-text-body-quaternary, #949a9e);
+  font-size: var(--typography-font-size-2xs, 0.75rem);
+  font-weight: 500;
+  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  transform: revert;
+}
+
+.boostlook nav.pagination > span.prev a::before {
+  content: "Previous";
+}
+.boostlook nav.pagination > span.next a::before {
+  content: "Next";
+}
+
+.boostlook nav.pagination > span a:hover {
+  color: inherit;
+}
+
+.boostlook nav.pagination > span a::after {
+  --_arrow-size: calc((var(--spacing-size-3xs, 0.25rem) * 2) + var(--icons-24));
+  position: absolute;
+  top: 50%;
+  display: flex;
+  width: var(--_arrow-size);
+  height: var(--_arrow-size);
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: var(--spacing-size-2xs, 0.5rem);
+  background: var(--surface-background-main-base-primary, #fff);
+  transition: all 0.2s ease;
+  transform: translateY(-50%);
+}
+
+@media screen and (min-width: 990px) {
+  .boostlook nav.pagination > span a::after {
+    --_arrow-size: calc((var(--spacing-size-xs, 0.75rem) * 2) + var(--icons-24));
+  }
+}
+
+.boostlook nav.pagination > span.prev a::after {
+  content: var(--icon-arrow-left);
+  left: var(--padding-padding-2xs, 0.5rem);
+}
+
+.boostlook nav.pagination > span.next a::after {
+  content: var(--icon-arrow-right);
+  right: var(--padding-padding-2xs, 0.5rem);
+}
+
+.boostlook nav.pagination > span:hover a::after {
+  border-color: var(--border-border-blue, #92cbe9);
+  background: var(--surface-background-main-surface-blue-secondary, #daeef9);
+}
+
+/* Admonitions */
+.boostlook #content .admonitionblock,
+.boostlook:not(:has(.doc)) div.note,
+.boostlook:not(:has(.doc)) div.tip,
+.boostlook:not(:has(.doc)) div.important,
+.boostlook:not(:has(.doc)) div.caution,
+.boostlook:not(:has(.doc)) div.warning,
+.boostlook:not(:has(.doc)) div.blurb,
+.boostlook:not(:has(.doc)) p.blurb {
+  padding: var(--padding-padding-xs, 0.75rem) var(--padding-padding-md, 1.125rem);
+  border-radius: var(--spacing-size-xs, 0.75rem);
+  border: 1px solid transparent;
+  margin: revert;
+  background: transparent;
+}
+
+/* Readme Template Admonitionblock */
+.boostlook:not(:has(.doc)) .notices {
+  background-image: none !important;
+}
+
+.boostlook #content .admonitionblock > table,
+.boostlook:not(:has(.doc)) div.note > table,
+.boostlook:not(:has(.doc)) div.tip > table,
+.boostlook:not(:has(.doc)) div.important > table,
+.boostlook:not(:has(.doc)) div.caution > table,
+.boostlook:not(:has(.doc)) div.warning > table,
+.boostlook:not(:has(.doc)) div.blurb > table,
+.boostlook:not(:has(.doc)) p.blurb > table {
+  all: revert;
+  table-layout: fixed;
+  position: relative;
+  width: 100%;
+}
+
+.boostlook #content .admonitionblock > table tr,
+.boostlook:not(:has(.doc)) div.note tbody,
+.boostlook:not(:has(.doc)) div.tip tbody,
+.boostlook:not(:has(.doc)) div.important tbody,
+.boostlook:not(:has(.doc)) div.caution tbody,
+.boostlook:not(:has(.doc)) div.warning tbody,
+.boostlook:not(:has(.doc)) div.blurb tbody,
+.boostlook:not(:has(.doc)) p.blurb tbody,
+.boostlook:not(:has(.doc)) .notices {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-size-2xs, 0.5rem);
+}
+
+.boostlook #content .admonitionblock > table tr td {
+  padding: 0;
+  border: unset;
+}
+
+.boostlook #content .admonitionblock > table tr td.icon,
+.boostlook:not(:has(.doc)) div.note > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.tip > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.important > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.caution > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.warning > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.blurb > table tr:first-child th,
+.boostlook:not(:has(.doc)) p.blurb > table tr:first-child th,
+.boostlook:not(:has(.doc)) .notices.heading {
+  display: flex;
+  padding: var(--spacing-size-3xs, 0.25rem) var(--spacing-size-2xs, 0.5rem);
+  align-items: center;
+  gap: var(--spacing-size-2xs, 0.5rem);
+  border-radius: 1.25rem;
+  background-color: var(--colors-neutral-500, #18191b);
+}
+
+.boostlook:not(:has(.doc)) .notices.heading {
+  margin: 0;
+}
+
+.boostlook:not(:has(.doc)) div.note > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.tip > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.important > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.caution > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.warning > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.blurb > table tr:first-child th,
+.boostlook:not(:has(.doc)) p.blurb > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.note > table tr:first-child th > *,
+.boostlook:not(:has(.doc)) div.tip > table tr:first-child th > *,
+.boostlook:not(:has(.doc)) div.important > table tr:first-child th > *,
+.boostlook:not(:has(.doc)) div.caution > table tr:first-child th > *,
+.boostlook:not(:has(.doc)) div.warning > table tr:first-child th > *,
+.boostlook:not(:has(.doc)) div.blurb > table tr:first-child th > *,
+.boostlook:not(:has(.doc)) p.blurb > table tr:first-child th > *,
+.boostlook #content .admonitionblock > table tr td.icon > *,
+.boostlook:not(:has(.doc)) .notices.heading {
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-2xs, 0.75rem);
+  font-weight: 500;
+  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  text-transform: uppercase;
+}
+.boostlook #content .admonitionblock > table tr td.icon > * {
+  padding: 0;
+}
+
+.boostlook #content .admonitionblock > table tr td.content,
+/* Leagcy Doc */
+.boostlook:not(:has(.doc)) div.note > table tr:not(:first-child) td,
+.boostlook:not(:has(.doc)) div.note > table tr:not(:first-child) td p,
+.boostlook:not(:has(.doc)) div.tip > table tr:not(:first-child) td,
+.boostlook:not(:has(.doc)) div.tip > table tr:not(:first-child) td p,
+.boostlook:not(:has(.doc)) div.important > table tr:not(:first-child) td,
+.boostlook:not(:has(.doc)) div.important > table tr:not(:first-child) td p,
+.boostlook:not(:has(.doc)) div.caution > table tr:not(:first-child) td,
+.boostlook:not(:has(.doc)) div.caution > table tr:not(:first-child) td p,
+.boostlook:not(:has(.doc)) div.warning > table tr:not(:first-child) td,
+.boostlook:not(:has(.doc)) div.warning > table tr:not(:first-child) td p,
+.boostlook:not(:has(.doc)) div.blurp > table tr:not(:first-child) td,
+.boostlook:not(:has(.doc)) div.blurp > table tr:not(:first-child) td p,
+.boostlook:not(:has(.doc)) p.blurb > table tr:not(:first-child) td,
+.boostlook:not(:has(.doc)) p.blurb > table tr:not(:first-child) td p,
+/* Antora Template Correction*/
+.boostlook #content .admonitionblock > table tr td.content p,
+.boostlook:not(:has(.doc)) .notices.message p {
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-weight: 500;
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+.boostlook:not(:has(.doc)) .notices.message {
+  margin: 0;
+}
+
+.boostlook #content .admonitionblock > table code,
+.boostlook:not(:has(.doc)) div.note > table code,
+.boostlook:not(:has(.doc)) div.tip > table code,
+.boostlook:not(:has(.doc)) div.important > table code,
+.boostlook:not(:has(.doc)) div.caution > table code,
+.boostlook:not(:has(.doc)) div.warning > table code,
+.boostlook:not(:has(.doc)) div.blurb > table code,
+.boostlook:not(:has(.doc)) p.blurb > table code {
+  margin: revert;
+  padding: 0;
+}
+
+.boostlook #content .admonitionblock.note,
+.boostlook:not(:has(.doc)) div.note {
+  border-color: var(--border-border-blue, #92cbe9);
+}
+.boostlook #content .admonitionblock.note > table tr td.icon,
+.boostlook:not(:has(.doc)) div.note > table tr:first-child th,
+.boostlook:not(:has(.doc)) .notices.heading {
+  background: var(--surface-background-states-surface-additional-tetriary, #92cbe9);
+}
+.boostlook #content .admonitionblock.note > table tr td.icon > *,
+.boostlook:not(:has(.doc)) div.note > table tr:first-child th,
+.boostlook:not(:has(.doc)) .notices.heading {
+  color: var(--text-states-text-additional-tetriary, #026a9f);
+}
+
+.boostlook #content .admonitionblock.tip,
+.boostlook:not(:has(.doc)) div.tip {
+  border-color: var(--border-border-positive, #bdeed6);
+}
+.boostlook #content .admonitionblock.tip > table tr td.icon,
+.boostlook:not(:has(.doc)) div.tip > table tr:first-child th {
+  background: var(--border-border-positive, #bdeed6);
+}
+.boostlook #content .admonitionblock.tip > table tr td.icon > *,
+.boostlook:not(:has(.doc)) div.tip > table tr:first-child th {
+  color: var(--text-states-text-positive-tetriary, #48ac7b);
+}
+
+.boostlook #content .admonitionblock.important,
+.boostlook #content .admonitionblock.caution,
+.boostlook:not(:has(.doc)) div.important,
+.boostlook:not(:has(.doc)) div.caution {
+  border-color: var(--border-border-warning, #ffd4b3);
+}
+.boostlook #content .admonitionblock.important > table tr td.icon,
+.boostlook #content .admonitionblock.caution > table tr td.icon,
+.boostlook:not(:has(.doc)) div.important > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.caution > table tr:first-child th {
+  background: var(--surface-background-states-surface-warning-tetriary, #ffd4b3);
+}
+.boostlook #content .admonitionblock.important > table tr td.icon > *,
+.boostlook #content .admonitionblock.caution > table tr td.icon > *,
+.boostlook:not(:has(.doc)) div.important > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.caution > table tr:first-child th {
+  color: var(--text-states-text-warning-tetriary, #c25909);
+}
+
+.boostlook #content .admonitionblock.warning,
+.boostlook:not(:has(.doc)) div.warning {
+  border-color: var(--border-border-negative, #ffcad2);
+}
+.boostlook #content .admonitionblock.warning > table tr td.icon,
+.boostlook:not(:has(.doc)) div.warning > table tr:first-child th {
+  background: var(--surface-background-states-surface-negative-tetriary, #ffcad2);
+}
+.boostlook #content .admonitionblock.warning > table tr td.icon > *,
+.boostlook:not(:has(.doc)) div.warning > table tr:first-child th {
+  color: var(--text-states-text-negative-tetriary, #bc233c);
+}
+
+/* Dlist  */
+.boostlook #content .dlist:not(:first-child),
+.boostlook .dlist dl dt:not(:first-child),
+.boostlook:not(:has(.doc)) .variablelist:not(:first-child),
+.boostlook:not(:has(.doc)) .variablelist dl dt:not(:first-child) {
+  margin-top: var(--padding-padding-2xs, 0.5rem);
+}
+
+.boostlook .dlist dl,
+.boostlook:not(:has(.doc)) .variablelist dl {
+  display: flex;
+  flex-direction: column;
+}
+
+.boostlook .dlist dl dt,
+.boostlook:not(:has(.doc)) .variablelist dl dt {
+  display: block;
+  width: fit-content;
+  padding: var(--leftbar-paddings-leftbar-padding-0, 0rem) var(--padding-padding-2xs, 0.5rem);
+  border-radius: var(--spacing-size-3xs, 0.25rem);
+  border: 1px solid var(--border-border-secondary, #d5d7d9);
+  background: var(--surface-background-main-surface-primary, #f5f6f8);
+  color: var(--text-code-neutral, #0d0e0f);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  margin-bottom: 0;
+}
+
+.boostlook .dlist dl dt code,
+.boostlook:not(:has(.doc)) .variablelist dl dt code {
+  border: none;
+  padding: 0;
+  background: transparent !important;
+}
+
+.boostlook .dlist dl dt .term,
+.boostlook:not(:has(.doc)) .variablelist dl dt .term {
+  font: inherit;
+  font-weight: inherit;
+}
+
+.boostlook .dlist dl dd,
+.boostlook:not(:has(.doc)) .variablelist dl dd {
+  margin: unset;
+  margin-top: -1px;
+  padding: var(--padding-padding-2xs, 0.5rem) var(--padding-padding-sm, 1rem);
+  border-radius: var(--padding-padding-2xs, 0.5rem);
+  border: 1px solid var(--border-border-primary, #e4e7ea);
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  line-height: var(--typography-line-height-lg, 1.5rem);
+}
+
+.boostlook .dlist dl dd p,
+.boostlook:not(:has(.doc)) .variablelist dl dd p {
+  font: inherit;
+  margin: 0;
+}
+
+/* Edit Page Link */
+.boostlook .edit-this-page {
+  color: var(--text-main-text-body-quaternary, #949a9e);
+  text-align: right;
+  font-size: var(--typography-font-size-2xs, 0.75rem);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  padding: 0 var(--padding-padding-2xs, 0.5rem);
+}
+
+.boostlook .edit-this-page a {
+  all: inherit;
 }
 
 /* Layout Structure */
 .boostlook #header,
 .boostlook #content,
 .boostlook #footer {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
+  padding-left: var(--main-margin);
+  padding-right: var(--main-margin);
 }
 
 .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;
+  padding-top: var(--padding-padding-sm);
+  padding-bottom: var(--padding-padding-sm);
+  color: var(--text-main-text-body-quaternary, #949a9e);
+  font-size: var(--typography-font-size-xs);
+  font-weight: 500;
+  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
 }
 
-/* First Heading Adjustment */
-.boostlook h2:first-of-type {
-  margin-top: 0;
+/* Unordered Lists */
+/* Reset Legacy and Common */
+.boostlook .doc .dlist .dlist,
+.boostlook .doc .dlist .olist,
+.boostlook .doc .dlist .ulist,
+.boostlook .doc .olist .dlist,
+.boostlook .doc .olist .olist,
+.boostlook .doc .olist .ulist,
+.boostlook .doc .olist li + li,
+.boostlook .doc .ulist .dlist,
+.boostlook .doc .ulist .olist,
+.boostlook .doc .ulist .ulist,
+.boostlook .doc .ulist li + li,
+.boostlook:not(:has(.doc)) div.orderedlist li + li {
+  margin-top: var(--padding-padding-3xs, 0.25rem);
+}
+
+.boostlook:not(:has(.doc)) div.orderedlist div.orderedlist {
+  margin-top: var(--padding-padding-2xs, 0.5rem);
+}
+
+.boostlook .doc .dlist .dlist,
+.boostlook .doc .dlist .olist,
+.boostlook .doc .dlist .ulist,
+.boostlook .doc .olist .dlist,
+.boostlook .doc .olist .olist,
+.boostlook .doc .olist .ulist,
+.boostlook .doc .ulist .dlist,
+.boostlook .doc .ulist .olist,
+.boostlook .doc .ulist .ulist,
+.boostlook:not(:has(.doc)) div.orderedlist div.orderedlist {
+  margin-bottom: var(--padding-padding-2xs, 0.5rem);
+}
+
+/* Default List */
+.boostlook ul.itemizedlist,
+.boostlook .ulist:not(:first-child):not(.tablist),
+.boostlook .ulist:not(:first-child).disc,
+.boostlook#libraryReadMe ul:not(:first-child),
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) {
+  margin-top: var(--padding-padding-xs, 0.75rem);
+}
+
+.boostlook ul.itemizedlist,
+.boostlook .ulist:not(.tablist) > ul,
+.boostlook .ulist.disc > ul,
+.boostlook#libraryReadMe ul,
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) {
+  list-style: none;
+  padding: 0;
+}
+
+.boostlook ul.itemizedlist {
+  list-style: none !important;
+}
+
+.boostlook ul.itemizedlist > li,
+.boostlook .ulist:not(.tablist) > ul > li,
+.boostlook .ulist.disc > ul > li,
+.boostlook#libraryReadMe ul > li,
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) > li {
+  position: relative;
+  padding-left: 2rem;
+}
+
+.boostlook ul.itemizedlist > li,
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content ul:not([class]) li,
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content ol:not([class]) li {
+  font: inherit;
+}
+
+.boostlook ul.itemizedlist > li + li,
+.boostlook .ulist:not(.tablist) > ul > li + li,
+.boostlook .ulist.disc > ul > li + li,
+.boostlook#libraryReadMe ul > li + li,
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) > li + li {
+  margin-top: var(--padding-padding-3xs, 0.25rem);
+}
+
+.boostlook ul.itemizedlist > li::before,
+.boostlook .ulist:not(.tablist) > ul > li::before,
+.boostlook .ulist.disc > ul > li::before,
+.boostlook#libraryReadMe ul > li::before,
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) > li::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-main-text-primary, #18191b);
+}
+
+/* Ordered Lists */
+.boostlook .olist.arabic > ol,
+.boostlook .olist.loweralpha > ol,
+.boostlook:not(:has(.doc)) .orderedlist > ol {
+  list-style: none;
+  counter-reset: list-counter;
+  padding-left: 0;
+}
+
+/* Arabic Ordered List */
+.boostlook .olist.arabic > ol > li,
+.boostlook:not(:has(.doc)) .orderedlist > ol > li {
+  position: relative;
+  padding-left: 3rem;
+  counter-increment: list-counter;
+}
+
+.boostlook .olist.arabic > ol > li::before,
+.boostlook:not(:has(.doc)) .orderedlist > ol > li::before {
+  content: counter(list-counter, decimal-leading-zero);
+  position: absolute;
+  left: 0;
+  top: -4px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-2xs, 0.75rem);
+  font-weight: 400;
+  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
+}
+
+.boostlook .olist.arabic > ol > li::after,
+.boostlook:not(:has(.doc)) .orderedlist > ol > li::after {
+  content: "";
+  position: absolute;
+  left: 1px;
+  top: 0px;
+  width: 30px;
+  height: 24px;
+  border: 1px solid var(--border-border-tetriary);
+  /* Mask to make square brackets for marker to make it look like [ 01 ] */
+  clip-path: polygon(0 0, 3px 0, 3px 3px, 27px 3px, 27px 0, 30px 0, 30px 24px, 27px 24px, 27px 21px, 3px 21px, 3px 24px, 0 24px);
+}
+
+/* LowerAlfa Ordered List */
+.boostlook .olist.loweralpha > ol > li {
+  position: relative;
+  padding-left: 2rem;
+  counter-increment: list-counter;
+}
+
+.boostlook .olist.loweralpha > ol > li::before {
+  content: counter(list-counter, lower-alpha) ". ";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-weight: 500;
+  line-height: var(--Typography-line-height-lg, 1.5rem); /* 171.429% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+/* Conum */
+.boostlook .doc .conum[data-value] {
+  position: relative;
+  border: none;
+  border-radius: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Noto Sans Display";
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--typography-line-height-sm, 1rem);
+  font-size: var(--typography-font-size-2xs, 0.75rem);
+  text-align: center;
+  width: 24px;
+  height: 24px;
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  text-indent: unset;
+  color: var(--text-main-text-primary, #18191b);
+  text-align: center;
+  background: var(--surface-background-main-surface-secondary, #e4e7ea);
+}
+
+.boostlook .doc .conum[data-value]::after {
+  content: attr(data-value);
+  font: inherit;
+}
+.boostlook .doc .conum[data-value] + b {
+  display: none;
+}
+
+/* Collist */
+.boostlook .colist.arabic {
+  margin: revert;
+}
+.boostlook .colist.arabic > table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.boostlook .colist.arabic > table > tbody > tr td,
+.boostlook .colist.arabic > table > tr td {
+  /* Reset Legacy */
+  padding: revert;
+  padding-top: var(--padding-padding-3xs, 0.25rem);
+  padding-bottom: 0;
+  font-size: var(--typography-font-size-sm, 1rem);
+}
+
+.boostlook .colist.arabic > table > tbody > tr > :first-child,
+.boostlook .colist.arabic > table > tr > :first-child {
+  padding-left: 0;
+  padding-right: var(--padding-padding-sm, 1rem);
+  vertical-align: top;
+  /* to make first column fit its content  */
+  width: 1%;
+  white-space: nowrap;
+}
+
+/* Tables */
+/* Reset Antora Table Styles */
+.boostlook #content table.tableblock tr,
+.boostlook #content table.tableblock td,
+.boostlook #content table.tableblock th,
+.boostlook #content table.tableblock thead,
+.boostlook #content table.tableblock tbody,
+.boostlook #content table.tableblock tfoot,
+.boostlook #content table.tableblock caption,
+.boostlook #content table.tableblock colgroup,
+.boostlook #content table.tableblock col,
+.boostlook #content table.tableblock,
+.boostlook:not(:has(.doc)) table.table tr,
+.boostlook:not(:has(.doc)) table.table td,
+.boostlook:not(:has(.doc)) table.table th,
+.boostlook:not(:has(.doc)) table.table thead,
+.boostlook:not(:has(.doc)) table.table tbody,
+.boostlook:not(:has(.doc)) table.table tfoot,
+.boostlook:not(:has(.doc)) table.table caption,
+.boostlook:not(:has(.doc)) table.table colgroup,
+.boostlook:not(:has(.doc)) table.table col,
+.boostlook:not(:has(.doc)) table.table {
+  all: unset;
+  display: revert;
+}
+
+.boostlook #content table.tableblock:not(:first-child),
+.boostlook:not(:has(.doc)) .table:not(:first-child) {
+  margin-top: var(--padding-padding-xs, 0.75rem);
+}
+
+.boostlook #content table.tableblock.stretch,
+.boostlook:not(:has(.doc)) table.table {
+  min-width: 100%;
+}
+
+.boostlook #content table.tableblock caption,
+.boostlook:not(:has(.doc)) div.table .title {
+  color: var(--text-main-text-body-primary, #2a2c30);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-style: italic;
+  font-weight: 500;
+  line-height: var(--typography-line-height-md, 1.25rem); /* 142.857% */
+  padding: 0;
+  padding-bottom: var(--padding-padding-3xs, 0.25rem);
+}
+
+.boostlook #content table.tableblock caption > *,
+.boostlook:not(:has(.doc)) div.table .title > * {
+  font-weight: inherit;
+  font-variation-settings: "wght" 500;
+}
+
+.boostlook:not(:has(.doc)) div.table .title {
+  padding-bottom: var(--padding-padding-3xs, 0.25rem) !important;
+}
+
+.boostlook #content table.tableblock th,
+.boostlook #content table.tableblock td,
+.boostlook:not(:has(.doc)) table.table th,
+.boostlook:not(:has(.doc)) table.table td {
+  padding: var(--padding-padding-sm, 1rem) var(--spacing-size-sm, 1rem);
+  text-align: left;
+  border-top: 1px solid var(--border-border-primary, #e4e7ea);
+  border-left: 1px solid var(--border-border-primary, #e4e7ea);
+}
+
+.boostlook #content table.tableblock th:last-child,
+.boostlook #content table.tableblock td:last-child,
+.boostlook:not(:has(.doc)) table.table th:last-child,
+.boostlook:not(:has(.doc)) table.table td:last-child {
+  border-right: 1px solid var(--border-border-primary, #e4e7ea);
+}
+
+.boostlook #content table.tableblock tr:last-child td,
+.boostlook:not(:has(.doc)) table.table tr:last-child td {
+  border-bottom: 1px solid var(--border-border-primary, #e4e7ea);
+}
+
+.boostlook #content table.tableblock:has(thead) th:first-child,
+.boostlook #content table.tableblock:not(:has(thead)) tr:first-child td:first-child,
+.boostlook:not(:has(.doc)) table.table:has(thead) th:first-child,
+.boostlook:not(:has(.doc)) table.table:not(:has(thead)) tr:first-child td:first-child {
+  border-top-left-radius: var(--spacing-size-xs, 0.75rem);
+}
+
+.boostlook #content table.tableblock:has(thead) th:last-child,
+.boostlook #content table.tableblock:not(:has(thead)) tr:first-child td:last-child,
+.boostlook:not(:has(.doc)) table.table:has(thead) th:last-child,
+.boostlook:not(:has(.doc)) table.table:not(:has(thead)) tr:first-child td:last-child {
+  border-top-right-radius: var(--spacing-size-xs, 0.75rem);
+}
+
+.boostlook #content table.tableblock tr:last-child td:first-child,
+.boostlook:not(:has(.doc)) table.table tr:last-child td:first-child {
+  border-bottom-left-radius: var(--spacing-size-xs, 0.75rem);
+}
+
+.boostlook #content table.tableblock tr:last-child td:last-child,
+.boostlook:not(:has(.doc)) table.table tr:last-child td:last-child {
+  border-bottom-right-radius: var(--spacing-size-xs, 0.75rem);
+}
+
+.boostlook #content table.tableblock th,
+.boostlook #content table.tableblock th strong,
+.boostlook:not(:has(.doc)) table.table th,
+.boostlook:not(:has(.doc)) table.table th strong {
+  background: var(--surface-background-main-surface-primary, #f5f6f8);
+  color: var(--text-main-text-body-tetriary, #62676b);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-weight: 500;
+  font-variation-settings: "wght" 500;
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
+}
+
+.boostlook #content table.tableblock td,
+.boostlook:not(:has(.doc)) table.table td {
+  color: var(--text-main-text-body-primary, #2a2c30);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+.boostlook #content table.tableblock td.valign-top,
+.boostlook:not(:has(.doc)) table.table td.valign-top {
+  vertical-align: top;
+}
+
+.boostlook #content table.tableblock td.valign-bottom,
+.boostlook:not(:has(.doc)) table.table td.valign-bottom {
+  vertical-align: bottom;
+}
+
+.boostlook #content table.tableblock td.valign-center,
+.boostlook:not(:has(.doc)) table.table td.valign-center {
+  vertical-align: middle;
+}
+
+.boostlook #content table.tableblock td.halign-left,
+.boostlook:not(:has(.doc)) table.table td.halign-left {
+  text-align: left;
+}
+
+.boostlook #content table.tableblock td.halign-center,
+.boostlook:not(:has(.doc)) table.table td.halign-center {
+  text-align: center;
+}
+
+.boostlook #content table.tableblock th p,
+.boostlook #content table.tableblock td p,
+.boostlook:not(:has(.doc)) table.table th p,
+.boostlook:not(:has(.doc)) table.table td p {
+  font: inherit;
+  color: inherit;
+}
+
+.boostlook #content table.tableblock td strong,
+.boostlook:not(:has(.doc)) table.table td strong {
+  font-weight: 600;
+  font-variation-settings: "wght" 600;
+}
+
+.boostlook #content table.tableblock td code,
+.boostlook:not(:has(.doc)) table.table td code {
+  background: transparent !important;
+  padding: 0;
+  border: none;
+}
+
+.boostlook #content table.tableblock .footnotes tr td,
+.boostlook:not(:has(.doc)) table.table .footnotes tr td {
+  border: none;
+  border-radius: 0;
+  padding: var(--padding-padding-xs) 0;
+}
+
+/* Image Styles */
+.boostlook .doc .imageblock,
+.boostlook .doc .videoblock {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.boostlook .image:has(> img),
+.boostlook .content:has(> img),
+.boostlook .mediaobject:has(> embed) {
+  display: flex;
+  padding: var(--padding-padding-md, 1.125rem);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--spacing-size-xs, 0.75rem);
+  background: var(--surface-background-main-surface-primary, #f5f6f8);
+  width: 100%;
+  margin-top: var(--padding-padding-xs, 0.75rem);
+}
+
+.boostlook:not(:has(.doc)) .inlinemediaobject:has(> img, > object) {
+  display: inline-block;
+  vertical-align: text-bottom;
+  line-height: 0;
 }
 
 /*----------------- Global Styles for .boostlook end -----------------*/
 
+/* ----------- Scrollbars Styles Start ------------- */
+
 /**
+ *
  * 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
+ *
+ * This stylesheet provides comprehensive scrollbar customization for different contexts.
+ *
+ * Features:
+ * 1. Global Scrollbar Styles:
+ *    - Applies thin scrollbar width and custom colors to the HTML element.
+ *    - Customizes scrollbar appearance for elements within the `.boostlook` class.
+ *
+ * 2. Media Query Adjustments:
+ *    - For screens with a minimum width of 768px, further customizes scrollbar colors for specific elements.
+ *    - Changes scrollbar thumb color on hover for better visibility.
+ *
+ * 3. Webkit Scrollbar Customization:
+ *    - Sets the width and height of the scrollbar.
+ *    - Customizes the scrollbar track and thumb with specific colors and border-radius.
+ *    - Adjusts scrollbar appearance for elements within the `.boostlook` class and its descendants.
+ *
+ * 4. Hover Effects:
+ *    - Changes the scrollbar thumb color on hover for better user interaction.
+ *
  */
 
-/* Global Scrollbar Styles */
-.boostlook * {
-  scrollbar-color: initial !important;
-  scrollbar-width: initial !important;
-}
-.boostlook:not(:has(.doc)) ::-webkit-scrollbar {
-  width: 2px;
-  height: 2px;
+@supports (scrollbar-width: thin) {
+  /* HTML Matches its scroll background to content background */
+  html {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-border-tetriary, #afb3b6) var(--surface-background-main-base-primary, #fff);
+  }
+
+  .boostlook,
+  .boostlook *,
+  .boostlook pre,
+  .boostlook code,
+  .boostlook:has(:not(.doc)) div.table .table-contents {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-border-tetriary, #afb3b6) transparent;
+  }
+
+  @media screen and (min-width: 768px) {
+    .boostlook pre,
+    .boostlook code,
+    .boostlook:has(:not(.doc)) div.table .table-contents {
+      scrollbar-width: thin;
+      scrollbar-color: transparent transparent;
+    }
+
+    .boostlook pre:hover,
+    .boostlook code:hover,
+    .boostlook:has(:not(.doc)) div.table .table-contents:hover {
+      scrollbar-color: var(--border-border-tetriary, #afb3b6) transparent;
+    }
+  }
 }
 
-.boostlook ::-webkit-scrollbar-track {
-  border-radius: 8px;
-  background-color: var( --bl-scrollbar-track-color);
+html::-webkit-scrollbar,
+.boostlook::-webkit-scrollbar,
+.boostlook *::-webkit-scrollbar {
+  width: 8px !important;
+  height: 8px !important;
 }
 
-.boostlook ::-webkit-scrollbar-thumb {
-  background-color: var( --bl-scrollbar-thumb-color); /* blend into background */
+html::-webkit-scrollbar-track {
+  background: var(--surface-background-main-base-primary, #fff);
+  border-radius: var(--spacing-size-2xs, 0.5rem);
 }
 
+.boostlook::-webkit-scrollbar-track,
+.boostlook *::-webkit-scrollbar-track,
+.boostlook pre::-webkit-scrollbar-track,
+.boostlook code::-webkit-scrollbar-track,
+.boostlook:has(:not(.doc)) div.table .table-contents::-webkit-scrollbar-track {
+  width: 6px;
+  background: transparent;
+  border-radius: var(--spacing-size-2xs, 0.5rem);
+}
+
+html::-webkit-scrollbar-thumb,
+.boostlook::-webkit-scrollbar-thumb,
+.boostlook *::-webkit-scrollbar-thumb,
+.boostlook pre::-webkit-scrollbar-thumb,
+.boostlook code::-webkit-scrollbar-thumb,
+.boostlook:has(:not(.doc)) div.table .table-contents::-webkit-scrollbar-thumb {
+  width: 6px;
+  background: var(--border-border-tetriary, #afb3b6);
+}
+
+@media screen and (min-width: 768px) {
+  .boostlook pre::-webkit-scrollbar-thumb,
+  .boostlook code::-webkit-scrollbar-thumb,
+  .boostlook:has(:not(.doc)) div.table .table-contents::-webkit-scrollbar-thumb {
+    background: transparent;
+  }
+
+  .boostlook pre:hover::-webkit-scrollbar-thumb,
+  .boostlook code:hover::-webkit-scrollbar-thumb,
+  .boostlook:has(:not(.doc)) div.table .table-contents:hover:-webkit-scrollbar-thumb {
+    background-color: var(--border-border-tetriary, #afb3b6);
+  }
+}
+
+.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;
+}
+
+/* ----------- Scrollbars Styles End ------------- */
+
 /* Template-specific Adjustments */
 
 /* Hide root scrollbars for Antora template */
@@ -836,57 +2694,12 @@ html:has(#docsiframe)::-webkit-scrollbar {
   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,
@@ -894,147 +2707,35 @@ html:has(#docsiframe)::-webkit-scrollbar {
   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;
+  /* with padding compensation */
+  max-width: calc(var(--main-container) + 2rem);
   margin-left: auto;
   margin-right: auto;
-  background-color: var(--bl-pasteboard-color);
+  background: var(--surface-background-main-base-primary, #fff);
   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;
-}
-
+/* TOC Common start */
 /* Background Colors */
 .boostlook #toc.toc2,
 .boostlook #header:not(:has(.nav-container)),
 .boostlook #content,
 .boostlook #footer {
-  background-color: var(--bl-card-background-color);
+  background: var(--surface-background-main-base-primary, #fff);
 }
-
 /* TOC Scrolling */
-.boostlook #toc.toc2,
-.boostlook #toc.toc2.nav-container {
+.boostlook #toc.toc2 {
   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;
@@ -1043,71 +2744,183 @@ html:has(#docsiframe)::-webkit-scrollbar {
 }
 
 /* TOC Navigation Menu */
+.boostlook #toc ul,
+.boostlook:not(:has(.doc)) div.toc dd {
+  margin: 0;
+  padding: 0 0 0 var(--leftbar-paddings-leftbar-padding-2xs, 0.5rem);
+  color: var(--text-main-text-body-secondary, #494d50);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--typography-line-height-md, 1.25rem);
+  list-style: none;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 0;
+}
+
 .boostlook #toc .nav-menu > .nav-list,
-.boostlook #toc .nav-menu > .nav-list > .nav-list {
-  padding-left: 0
+.boostlook #toc .nav-menu > .nav-list > .nav-list,
+.boostlook #toc > ul.sectlevel1 {
+  padding-left: 0;
+}
+
+.boostlook .nav-menu .nav-list li,
+.boostlook #toc > ul.sectlevel1 li:not(:has(> ul)),
+.boostlook #toc > ul.sectlevel1 li:has(> ul) a,
+.boostlook:not(:has(.doc)) div.toc dt {
+  position: relative;
+  padding: var(--leftbar-paddings-leftbar-padding-4xs, 0.125rem) var(--leftbar-paddings-leftbar-padding-3xs, 0.25rem);
+}
+
+.boostlook .nav-menu .nav-list li:has(.nav-text),
+.boostlook #toc > ul.sectlevel1 li:has(> ul):not(:first-of-type) {
+  margin-top: var(--leftbar-paddings-leftbar-padding-4xs, 0.125rem);
+}
+
+.boostlook .nav-text,
+.boostlook #toc > ul.sectlevel1 li:has(> ul) > a {
+  color: var(--text-main-text-body-quaternary, #949a9e);
+  font-size: var(--typography-font-size-2xs, 0.75rem);
+  font-weight: 500;
+  line-height: var(--typography-line-height-sm, 1rem);
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+/* Table of Contents Links */
+.boostlook #toc a,
+.boostlook:not(:has(.doc)) div.toc a {
+  color: var(--text-main-text-body-secondary, #494d50);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--typography-line-height-md, 1.25rem); /* 142.857% */
+  text-decoration: none;
+}
+
+.boostlook #toc a:hover,
+.boostlook #toc a:focus,
+.boostlook #toc > ul.sectlevel1 li:has(> ul) > a:hover,
+.boostlook #toc > ul.sectlevel1 li:has(> ul) > a:focus,
+.boostlook:not(:has(.doc)) div.toc a:hover,
+.boostlook:not(:has(.doc)) div.toc a:focus {
+  color: var(--text-main-text-link-blue-secondary, #0284c7);
+  text-decoration: none;
+}
+
+.boostlook #toc .nav-link:visited:not(:hover),
+.boostlook #toc .sectlevel1 li:not(:has(> ul)) a:visited:not(:hover),
+.boostlook:not(:has(.doc)) div.toc a:visited:not(:hover) {
+  color: var(--text-main-text-link-viewed, #62b3dd);
+}
+
+.boostlook .nav-list li[data-depth]:not([data-depth="1"]),
+.boostlook #toc > ul.sectlevel1 ul[class*="sectlevel"] > li,
+.boostlook:not(:has(.doc)) div.toc dd dt {
+  margin-left: calc(var(--leftbar-paddings-leftbar-padding-2xs) * -1);
+  padding-left: calc(var(--padding-padding-sm, 1rem) + var(--leftbar-paddings-leftbar-padding-2xs));
+}
+
+.boostlook .nav-list li[data-depth]:not([data-depth="1"])::before,
+.boostlook #toc > ul.sectlevel1 ul[class*="sectlevel"] > li::before,
+.boostlook:not(:has(.doc)) div.toc dd dt:before {
+  content: "";
+  position: absolute;
+  left: var(--leftbar-paddings-leftbar-padding-2xs);
+  top: 0;
+  width: 1px;
+  height: 100%;
+  background: var(--border-border-secondary, #d5d7d9);
+}
+
+.boostlook .nav-list li[data-depth]:not([data-depth="1"]):hover::before,
+.boostlook #toc > ul.sectlevel1 li:not(:has(> ul)):hover::before,
+.boostlook:not(:has(.doc)) div.toc dd dt:hover:before {
+  background-color: var(--border-border-blue-hover, #329cd2);
+  isolation: isolate;
+  z-index: 1;
 }
 
 /* Navigation Menu Title */
-.boostlook .nav-menu .title {
-  border-bottom: 1px solid var(--bl-table-border-color);
-  margin-bottom: 16px;
+.boostlook #toc #toctitle,
+.boostlook .nav-menu h3.title {
+  padding: var(--leftbar-paddings-leftbar-padding-3xs, 0.25rem);
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-2xs, 0.75rem);
+  line-height: var(--typography-line-height-sm, 1rem);
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  font-weight: 600;
 }
 
-/* Legacy Documentation Titles */
-#boost-legacy-docs-wrapper h2.title {
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
+/* TOC code in links */
+.boostlook #toc a code,
+.boostlook:not(:has(.doc)) div.toc a code {
+  /* slightly reduce code elements font size in side menu */
+  font-size: 0.875em;
+  display: inline;
+  background: none !important;
+  padding: 0;
+  border: none;
+  color: inherit;
+  transition: none;
 }
 
-#boost-legacy-docs-wrapper h3.title,
-#boost-legacy-docs-wrapper.boostlook h3 {
-  font-weight: 550;
-  margin-bottom: 0.5rem;
-  font-feature-settings: normal;
+/* Content */
+.boostlook #content .doc,
+.boostlook #content > .sect1,
+.boostlook #header > *,
+.boostlook #footer > * {
+  max-width: var(--main-content-width);
+  margin: 0 auto;
 }
 
-/* Rouge Syntax Highlighting */
-.boostlook pre.rouge .o {
-  font-weight: 400;
+.boostlook #preamble + .sect1,
+.boostlook .doc .sect1 + .sect1 {
+  margin-top: revert;
 }
 
-.boostlook pre.rouge code span {
-  font-style: normal;
+html:not(.is-clipped--nav):has(.boostlook) div#content {
+  display: block;
+  visibility: visible;
+}
+
+html.is-clipped--nav:has(.boostlook) div#content {
+  display: none;
+  visibility: hidden;
 }
 
 /* Responsive Design */
 @media screen and (min-width: 768px) {
+  .article.toc2.toc-left {
+    padding: 0 1rem 0 1rem;
+  }
+
   .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;
+    width: var(--main-max-width-leftbar);
+    left: max(1rem, 50% - 45rem);
+    top: 0;
     z-index: 1000;
-    height: calc(100vh - 1rem);
-    padding: 1rem;
-    padding: 1rem 1rem 1.5rem;
+    height: 100vh;
+    padding: 0;
     overflow-x: hidden;
     overflow-y: auto;
+    border-right: 1px solid var(--border-border-primary, #e4e7ea);
+    visibility: visible;
+  }
+
+  .boostlook #toc.toc2:not(.nav-container) {
+    padding: 1rem 1.5rem;
   }
 
   .boostlook {
-    margin-left: 18rem;
+    margin-left: var(--main-max-width-leftbar);
   }
 
   /* TOC Toggle Button */
@@ -1133,22 +2946,20 @@ html:has(#docsiframe)::-webkit-scrollbar {
   /* Hidden TOC */
   html.toc-hidden .boostlook {
     margin-left: 0;
-    transition: margin-left 0.15s ease;
   }
 
   html.toc-hidden .boostlook #toggle-toc {
-    left: max(0rem, 50% - 39rem - 1rem);
+    left: max(0rem, 50% - 45rem - 1rem);
   }
 
   /* Visible TOC */
   html.toc-visible .boostlook #toggle-toc {
-    left: max(0rem, 50% - 39rem - 1rem);
+    left: max(0rem, 50% - 45rem - 1rem);
     background-color: rgb(255, 255, 255, 1);
   }
 
   html.toc-visible .boostlook {
     margin-left: 0;
-    transition: margin-left 0.15s ease;
   }
 
   html.toc-hidden .boostlook #toc.toc2 {
@@ -1158,13 +2969,13 @@ html:has(#docsiframe)::-webkit-scrollbar {
   html.toc-visible #toc.toc2 {
     opacity: 1;
     visibility: visible;
-    width: 250px;
-    padding-left: 1.5rem;
+    /* 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);
+    box-shadow: 4px 0 12px 0px rgba(0, 0, 0, 0.1);
   }
 
   /* TOC Pin States */
@@ -1173,20 +2984,46 @@ html:has(#docsiframe)::-webkit-scrollbar {
   }
 
   html.toc-visible.toc-pinned .boostlook {
-    margin-left: 17rem;
-    transition: margin-left 0.15s ease;
+    margin-left: var(--main-max-width-leftbar);
   }
 }
+/* TOC Common End */
 
-@media screen and (min-width: 1024px) {
-  html {
-    font-size: .83333rem;
-  }
+/*----------------- Styles specific to AsciiDoctor content start -----------------*/
 
-  html.toc-visible.toc-pinned .boostlook {
-    margin-left: 20rem;
-    transition: margin-left 0.15s ease;
-  }
+/**
+ * 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
+ */
+
+/* Header Adjustments */
+.boostlook #header > h1 {
+  margin-top: 0;
+}
+
+.boostlook #header .author {
+  display: inline-block;
+  margin-top: var(--padding-padding-md, 1.125rem);
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-lg, 1.25rem);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--typography-line-height-xl, 1.75rem);
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+/* Rouge Syntax Highlighting */
+.boostlook pre.rouge .o {
+  font-weight: 400;
+}
+
+.boostlook pre.rouge code span {
+  font-style: normal;
 }
 
 /*----------------- Styles specific to AsciiDoctor content end -----------------*/
@@ -1204,29 +3041,26 @@ html:has(#docsiframe)::-webkit-scrollbar {
  * 5. Responsive design adaptations
  */
 
-/* Header Layout */
-.boostlook #header:has(.nav-container) {
-  padding: 0;
+/* Table of Contents */
+.boostlook .nav {
+  height: 100%;
+  padding: var(--spacing-size-sm, 1rem) var(--spacing-size-lg, 1.5rem);
+  position: static;
+  background-color: unset;
+  box-shadow: none;
+  height: auto;
+  overflow-y: auto;
 }
 
-/* Typography */
-.boostlook .doc {
-  line-height: 1.5rem;
-  padding-bottom: 1.5rem;
+/* Toc Navigation */
+.boostlook #toc .nav-menu h3.title a {
+  color: inherit;
+  font: inherit;
 }
 
-.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;
+.boostlook #toc .nav-menu h3.title a:focus,
+.boostlook #toc .nav-menu h3.title a:hover {
+  color: var(--text-main-text-link-blue-secondary, #0284c7);
 }
 
 /* Navigation Menu */
@@ -1242,25 +3076,50 @@ html:has(#docsiframe)::-webkit-scrollbar {
   margin-left: 0;
 }
 
-.boostlook .nav-menu > .nav-list > .nav-list > li {
-  font-variation-settings: "wght" 550;
+.boostlook .nav-list li[data-depth="1"].is-current-page.is-active {
+  padding-left: 1.375rem;
 }
 
-/* Navigation Links */
-.boostlook .nav-link,
-.boostlook .nav-menu a{
-  cursor: pointer;
-  color: var(--bl-nav-link-color);
-  margin-right: -0.5rem;
+.boostlook .nav-list li[data-depth="1"].is-current-page.is-active::before {
+  content: "";
+  position: absolute;
+  width: 0.125rem;
+  height: 0.125rem;
+  border-radius: 2rem;
+  left: 0.625rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: var(--surface-icons-icon-blue, #026a9f);
 }
 
-.boostlook .nav-link:hover,
-.boostlook .nav-menu a:hover {
-  color: var(--bl-nav-link-hover-color);
+.boostlook .nav-list li[data-depth]:not([data-depth="1"]).is-current-page.is-active::before {
+  background-color: var(--text-main-text-primary, #18191b);
 }
 
-.boostlook .nav-text {
-  color: var(--bl-nav-link-color);
+/* Active Page Indicator */
+.boostlook .nav-list .is-current-page.is-active {
+  position: relative;
+  border-radius: var(--padding-padding-3xs, 0.25rem);
+  background: var(--surface-background-main-surface-blue-secondary, #daeef9);
+}
+
+.boostlook #toc .nav-list .is-current-page.is-active > .nav-link {
+  font-weight: 400;
+  color: var(--text-main-text-primary, #18191b);
+}
+
+/* Header Layout */
+.boostlook #header:has(.nav-container) {
+  padding: 0;
+}
+
+/* Typography */
+.boostlook .doc,
+.boostlook .doc i {
+  font: inherit;
+}
+.boostlook .doc i {
+  color: inherit;
 }
 
 /* TOC Container */
@@ -1270,58 +3129,39 @@ html:has(#docsiframe)::-webkit-scrollbar {
 
 .boostlook #toc.toc2.nav-container.is-active {
   position: static;
+  height: 100vh;
+  padding: 0;
+  overflow-y: auto;
 }
 
-.boostlook #header .nav-container.is-active {
-  padding: 1rem;
-}
-
+/* Nav Toggle */
 .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;
+  padding: var(--spacing-size-3xs, 0.25rem);
+  align-items: center;
+  border: none;
+  border-radius: var(--spacing-size-2xs, 0.5rem);
+  outline: none;
+  line-height: inherit;
+  height: unset;
+  width: unset;
+  margin-right: var(--padding-padding-xs, 0.5rem);
+
+  background: var(--surface-background-main-base-primary, #fff);
+  background-size: auto;
+  background-position-x: auto;
 }
 
-.boostlook .breadcrumbs svg {
-  fill: var(--bl-breadcrumbs-svg-color);
+.boostlook #content .nav-toggle:before {
+  content: var(--icon-menu);
+  line-height: 0;
 }
 
-/* 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;
+@media screen and (min-width: 768px) {
+  .boostlook #content .nav-toggle {
+    display: none;
+    visibility: hidden;
+  }
 }
 
 /* Layout */
@@ -1337,76 +3177,269 @@ html:has(#docsiframe)::-webkit-scrollbar {
   padding-top: 0;
 }
 
-/* Table of Contents */
-.boostlook .nav {
+/* Toolbar */
+.boostlook .toolbar {
+  position: static;
+  height: auto;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--padding-padding-md, 1.125rem) 0;
+  color: var(--text-main-text-body-tetriary, #62676b);
+  background-color: transparent;
+  box-shadow: unset;
+}
+
+.boostlook .toolbar + h1 {
+  margin-top: 0;
+}
+
+/* Breadcrumbs */
+.boostlook .breadcrumbs {
+  display: block;
+  flex: 1 1;
+  padding: 0;
+  font-size: inherit;
+  line-height: revert;
+  overflow: auto;
+  scrollbar-width: none;
+  margin-right: var(--spacing-size-3xs);
+}
+
+.boostlook .breadcrumbs::-webkit-scrollbar {
+  display: none;
+}
+
+.boostlook .breadcrumbs ul {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--text-main-text-body-tetriary, #62676b);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-weight: 500;
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+.boostlook .breadcrumbs ul li {
+  font: inherit;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+@media screen and (max-width: 767px) {
+  .boostlook .breadcrumbs ul li:not(:first-child):not(:last-child) {
+    display: none;
+  }
+}
+
+.boostlook .breadcrumbs ul li a {
+  font: inherit;
+  color: var(--text-main-text-link-blue-secondary, #0284c7);
+  text-decoration: none;
+  position: relative;
+}
+
+.boostlook .breadcrumbs ul li a:hover {
+  text-decoration: underline;
+}
+
+.boostlook .breadcrumbs ul li:first-of-type {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-size-3xs, 0.25rem);
+  margin-right: var(--padding-padding-xs, 0.75rem);
+  gap: var(--spacing-size-2xs, 0.5rem);
+  border-radius: var(--spacing-size-2xs, 0.5rem);
+  border: 1px solid var(--border-border-primary, #e4e7ea);
+  background: var(--surface-background-main-surface-primary, #f5f6f8);
+}
+
+.boostlook .breadcrumbs ul li:first-of-type::after {
+  content: none;
+}
+
+.boostlook .breadcrumbs ul li:first-of-type a {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-size-3xs, 0.25rem);
+  line-height: 0;
+  color: var(--text-main-text-primary, #18191b);
+  text-decoration: none;
+}
+
+.boostlook .breadcrumbs ul li::after {
+  content: "";
+  display: inline-block;
+  flex-shrink: 0;
+  flex-grow: 0;
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background: var(--surface-icons-icon-tetriary, #949a9e);
+  padding: 0;
+  margin: 0 var(--spacing-size-2xs, 0.5rem);
+}
+
+.boostlook .breadcrumbs ul li:first-of-type::after,
+.boostlook .breadcrumbs ul li:last-of-type::after {
+  content: none;
+}
+
+.boostlook .breadcrumbs ul li:first-of-type a svg {
+  display: none;
+}
+
+.boostlook .breadcrumbs ul li:first-of-type a::before {
+  content: var(--icon-home);
+}
+
+/* Spirit Navigation */
+.boostlook .toolbar .spirit-nav,
+.boostlook:not(:has(.doc)) .spirit-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--padding-padding-2xs, 0.5rem);
+}
+
+.boostlook:not(:has(.doc)) .spirit-nav {
+  padding-top: var(--padding-padding-md, 1.125rem);
+  justify-content: flex-end;
+}
+
+.boostlook .toolbar .spirit-nav a,
+.boostlook:not(:has(.doc)) .spirit-nav a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-size-2xs, 0.5rem);
+  border-radius: var(--spacing-size-2xs, 0.5rem);
+  border: 1px solid var(--border-border-primary, #e4e7ea);
+  background: var(--surface-background-main-base-primary, #fff);
+  width: 32px;
+  height: 32px;
+  text-decoration: none;
+  padding: 0;
+  position: relative;
+  transition: all 0.2s ease;
+}
+
+.boostlook .toolbar .spirit-nav a:hover,
+.boostlook:not(:has(.doc)) .spirit-nav a:hover {
+  border: 1px solid var(--border-border-blue, #92cbe9);
+  background: var(--surface-background-main-surface-blue-secondary, #daeef9);
+}
+
+.boostlook .toolbar .spirit-nav a span {
+  overflow: hidden;
+  position: relative;
+}
+
+.boostlook:not(:has(.doc)) .spirit-nav a img {
+  display: none;
+  border-width: 0px;
+}
+
+/* hide default icons if elemnts exists */
+.boostlook .toolbar .spirit-nav a span[title*="Previous"],
+.boostlook .toolbar .spirit-nav a span[title*="Next"],
+.boostlook .toolbar .spirit-nav a span[title*="Up"] {
+  color: transparent;
+  display: block;
+  width: 100%;
   height: 100%;
 }
 
-.boostlook .toc .toc-menu a {
-  border-left: 0;
-  padding: .25rem 0 0 0;
+.boostlook .toolbar .spirit-nav a span[title*="Previous"]::after,
+.boostlook .toolbar .spirit-nav a span[title*="Next"]::after,
+.boostlook .toolbar .spirit-nav a span[title*="Up"]::after,
+.boostlook:not(:has(.doc)) .spirit-nav a[accesskey]::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  line-height: 0;
 }
 
-/* Admonitions */
-.boostlook .admonitionblock p {
-  line-height: normal;
+.boostlook .toolbar .spirit-nav a span[title*="Previous"]::after,
+.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="p"]::after {
+  content: var(--icon-arrow-left);
+}
+.boostlook .toolbar .spirit-nav a span[title*="Next"]::after,
+.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="n"]::after {
+  content: var(--icon-arrow-right);
+}
+.boostlook .toolbar .spirit-nav a span[title*="Up"]::after,
+.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="u"]::after {
+  content: var(--icon-arrow-up);
+}
+.boostlook .toolbar .spirit-nav a span[title*="Up"]::after,
+.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="u"]::after {
+  content: var(--icon-arrow-up);
 }
 
-.boostlook .doc .admonitionblock {
-  background-color: var(--bl-tabpanel-background);
-  border-radius: 8px;
+.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="h"]::after {
+  content: var(--icon-home);
 }
 
-/* Tabs */
-.boostlook .tabs:not(.is-loading) .tablist li:not(.is-selected) {
-  background-color: var(--bl-tab-background);
+/* Tabs Elements */
+.boostlook .tabs .tabpanel {
+  border: revert;
+  padding: var(--padding-padding-xs, 0.75rem) 0;
+  background: transparent;
 }
 
-.boostlook .tablist > ul li {
-  background-color: var(--bl-tabpanel-background);
+.boostlook .tablist,
+.boostlook .tabs .tabpanel {
+  border-bottom: 1px solid var(--border-border-primary, #e4e7ea);
 }
 
-/* Tables */
-.boostlook .doc table.tableblock {
+.boostlook .tablist > ul .tab {
+  position: relative;
+  display: flex;
+  padding: var(--padding-padding-2xs, 0.5rem) var(--padding-padding-md, 1.125rem);
+  justify-content: center;
+  align-items: center;
+  color: var(--text-main-text-body-tetriary, #62676b);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-weight: 400;
+  line-height: var(--typography-line-height-md, 1.25rem); /* 142.857% */
+  cursor: pointer;
+  border: none;
+  background: transparent;
+}
+
+.boostlook .tabs.is-loading .tablist li:first-child::after,
+.boostlook .tabs:not(.is-loading) .tablist li.is-selected::after {
+  content: "";
   display: block;
-  margin-bottom: 1.5rem;
-  margin-top: 1rem;
+  height: 1px;
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid var(--text-main-text-primary, #18191b);
 }
 
-.boostlook .doc table.tableblock tr th {
-  background-color: var(--bl-table-head-background);
-  font-size: 1rem;
+.boostlook .tablist > ul .tab * {
+  color: inherit;
 }
 
-.dark .doc table.stripes-even>tbody>tr:nth-of-type(2n) {
-  background-color: var(--bl-table-stripe-color);
+.boostlook .tablist > ul .tab.is-selected {
+  color: var(--text-main-text-primary, #18191b);
 }
 
-.boostlook .doc p.tableblock + p.tableblock {
-  margin-top: .25rem;
+.boostlook .tablist.ulist > ul li + li {
+  margin-left: unset;
 }
 
-/* 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;
-  }
+.boostlook .tabs:not(.is-loading) .tablist .tab:not(.is-selected) {
+  background-color: transparent;
 }
 
 /*----------------- Styles specific to Antora Templates end -----------------*/
@@ -1423,568 +3456,464 @@ html:has(#docsiframe)::-webkit-scrollbar {
  * 5. Code and syntax highlighting
  */
 
-/* Heading Styles */
-#boost-legacy-docs-wrapper.boostlook h1 {
-  font-size: 1.8rem;
+/* Legacy boostlook container */
+.boostlook#boost-legacy-docs-wrapper {
+  margin-top: 0;
+  max-width: unset;
+  overflow: hidden;
+  position: relative;
+  min-height: 100vh;
 }
 
-#boost-legacy-docs-wrapper.boostlook h2 {
-  font-size: 1.65rem;
-  border-bottom: 1px solid #eaf0f3;
-  border-bottom: 1px solid var(--bl-table-border-color);
+.boostlook#boost-legacy-docs-wrapper > #header,
+.boostlook#boost-legacy-docs-wrapper > #content,
+.boostlook#boost-legacy-docs-wrapper > #footer,
+.boostlook#boost-legacy-docs-wrapper > #footnotes {
+  width: auto;
+  max-width: unset;
+  margin-left: auto;
+}
+
+/* Add Side margin for legacy boostlook container */
+#boost-legacy-docs-wrapper:not(:has(.doc)) {
+  padding: 0 var(--main-margin, 3rem);
+}
+
+/* Title Block Common */
+.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type,
+.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type,
+.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type,
+.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type,
+.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type,
+.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type {
+  margin-bottom: var(--padding-padding-md, 1.125rem);
+}
+
+/* Title Styles */
+.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .title,
+.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .title,
+.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .title,
+.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .title,
+.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .title,
+.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .title {
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-2xl, 1.75rem);
+  font-style: normal;
   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;
+  line-height: var(--typography-line-height-3xl, 2.5rem);
+  letter-spacing: var(--spacing-size-size-0, 0rem);
   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;
+/* Title Author */
+.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .author,
+.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .author,
+.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .author,
+.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .author,
+.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .author,
+.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .author,
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .author {
+  margin: 0;
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-lg, 1.25rem);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--typography-line-height-xl, 1.75rem);
+  letter-spacing: var(--spacing-size-size-0, 0rem);
 }
 
-/* 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;
+/* Top margin for first Author in title */
+.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type div.author,
+.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type div.author,
+.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type div.author,
+.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type div.author,
+.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type div.author,
+.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type div.author,
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.author {
+  margin-top: var(--padding-padding-md, 1.125rem);
 }
 
-/* Pre-formatted Text */
-.boostlook:not(:has(.doc)) td pre {
-  padding: 5px;
+/* Reduce top margin for next authors in authors group */
+.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
+.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
+.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
+.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
+.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
+.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .authorgroup div.author:not(:first-child) {
+  margin-top: var(--padding-padding-2xs);
 }
 
-/* Program Listings */
-.boostlook .programlisting {
-  margin: 1rem 0;
+/* Remove Top Margin for next .copyright  */
+.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
+.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
+.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
+.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
+.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
+.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author {
+  margin-top: var(--padding-padding-3xs);
 }
 
-/* Table Typography */
-.boostlook table h1,
-.boostlook table h2,
-.boostlook table h3 {
-  line-height: 2rem;
+/* Title Copyright */
+.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .copyright,
+.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .copyright,
+.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .copyright,
+.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .copyright,
+.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .copyright,
+.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .copyright,
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .copyright {
+  color: var(--text-main-text-body-secondary, #494d50);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--typography-line-height-lg, 1.5rem);
+  margin-top: var(--padding-padding-2xs, 0.5rem);
 }
 
-.boostlook table h4,
-.boostlook table h5,
-.boostlook table h6 {
-  line-height: 1.75rem;
+/* Remove Top Margin for next .copyright  */
+.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
+.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
+.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
+.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
+.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
+.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright {
+  margin-top: 0;
 }
 
-/* Variable Lists */
-.boostlook:not(:has(.doc)) div.variablelist dl dt {
-  margin-bottom: 0.2em;
-  font-variation-settings: "wght" 700;
+/* Title Legalnotice */
+.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .legalnotice,
+.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .legalnotice,
+.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .legalnotice,
+.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .legalnotice,
+.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .legalnotice,
+.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .legalnotice,
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .legalnotice {
+  color: var(--text-main-text-body-primary, #2a2c30);
+  font-size: var(--typography-font-size-sm, 1rem);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--typography-line-height-lg, 1.5rem);
+  margin-top: var(--padding-padding-2xs, 0.5rem);
 }
 
-.boostlook:not(:has(.doc)) div.variablelist dl dd {
-  margin: 0em 0em 0.5em 2em;
-  font-size: 10pt;
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .legalnotice {
+  margin-bottom: var(--padding-padding-md, 1.125rem);
 }
 
-.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;
+/* Remove <hr/>s  */
+.boostlook:not(:has(.doc)) .titlepage hr {
+  display: none;
 }
 
 /* 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;
-  z-index: 5;
-}
-
-.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;
+  color: var(--text-main-text-body-secondary, #494d50);
+  font-family: var(--font-family-body, "Noto Sans");
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-style: normal;
   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;
+  line-height: var(--typography-line-height-md, 1.25rem);
   margin: 0;
-}
-
-.boostlook:not(:has(.doc)) pre code {
+  margin-bottom: var(--padding-padding-md, 1.125rem);
+  padding: 0;
   border: none;
 }
 
-.boostlook:not(:has(.doc)) :not(.highlight) pre {
-  color: var(--bl-code-text-color);
+.boostlook:not(:has(.doc)) div.toc > p {
+  display: flex;
+  padding: var(--spacing-size-3xs, 0.25rem);
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-2xs, 0.75rem);
+  font-weight: 600;
+  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
 }
 
-/* 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);
+.boostlook:not(:has(.doc)) div.toc > p > * {
+  font: inherit;
+  color: inherit;
+}
+
+.boostlook:not(:has(.doc)) div.toc .toc dt {
+  color: var(--text-main-text-body-secondary, #494d50);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--typography-line-height-md, 1.25rem);
+}
+
+.boostlook:not(:has(.doc)) div.toc dd dd {
+  padding-left: var(--leftbar-paddings-leftbar-padding-sm);
+}
+
+/* Section Layout */
+.boostlook#boost-legacy-docs-wrapper:not(:has(.doc)) > * {
+  max-width: var(--main-content-width);
+  margin-left: inherit;
+  margin-right: inherit;
+}
+
+/* hide footer spirit nav since it wasn't visible before */
+.boostlook:not(:has(.doc)) div:nth-of-type(4).spirit-nav,
+.boostlook#boost-legacy-docs-wrapper div.spirit-nav:last-child {
+  display: none !important;
+}
+
+/* hidden elems */
+.boostlook:not(:has(.doc)) > hr,
+.boostlook:not(:has(.doc)) .table-break {
+  display: none;
+}
+
+/* Content Blocks */
+.boostlook:not(:has(.doc)) .inlinemediaobject:has(> img):first-child:last-child {
+  margin: var(--padding-padding-xs, 0.75rem) 0;
+}
+
+.boostlook:not(:has(.doc)) a:is(h1 a, h2 a, h3 a, h4 a, h5 a) code {
+  background: transparent !important;
+  border: none;
+  font-size: inherit;
+  color: inherit;
+  padding: 0;
+  display: initial;
+  transition: none;
+}
+
+/* Special Blocks */
+/* hide legacy icon */
+.boostlook:not(:has(.doc)) div:not(.admonitionblock).note > table tr:first-child td,
+.boostlook:not(:has(.doc)) div:not(.admonitionblock).tip > table tr:first-child td,
+.boostlook:not(:has(.doc)) div:not(.admonitionblock).important > table tr:first-child td,
+.boostlook:not(:has(.doc)) div:not(.admonitionblock).caution > table tr:first-child td,
+.boostlook:not(:has(.doc)) div:not(.admonitionblock).warning > table tr:first-child td,
+.boostlook:not(:has(.doc)) div:not(.admonitionblock).blurb > table tr:first-child td,
+.boostlook:not(:has(.doc)) p.blurb > table tr:first-child td {
+  display: none;
+}
+
+/* Special Blocks Margins */
+.boostlook:not(:has(.doc)) div.note,
+.boostlook:not(:has(.doc)) div.tip,
+.boostlook:not(:has(.doc)) div.important,
+.boostlook:not(:has(.doc)) div.caution,
+.boostlook:not(:has(.doc)) div.warning,
+.boostlook:not(:has(.doc)) div.blurb,
+.boostlook:not(:has(.doc)) p.blurb {
+  margin-top: var(--padding-padding-xs, 0.75rem);
+  margin-bottom: var(--padding-padding-2xs);
+}
+
+.boostlook:not(:has(.doc)) .titlepage + div.note,
+.boostlook:not(:has(.doc)) .titlepage + div.tip,
+.boostlook:not(:has(.doc)) .titlepage + div.important,
+.boostlook:not(:has(.doc)) .titlepage + div.caution,
+.boostlook:not(:has(.doc)) .titlepage + div.warning,
+.boostlook:not(:has(.doc)) .titlepage + div.blurb,
+.boostlook:not(:has(.doc)) .titlepage + p.blurb {
+  margin-top: var(--padding-padding-2xs);
+}
+
+/* Tables */
+/* Make div with Table display block */
+.boostlook:has(:not(.doc)) div.table {
+  display: block;
+}
+
+/* Enable Horizontal Scroll */
+.boostlook:has(:not(.doc)) div.table .table-contents,
+.boostlook:has(:not(.doc)) .informaltable:has(> .table) {
+  overflow: auto;
+}
+
+/* References Table */
+/* This is specific selector for refences tables which containes many tables and only tables as direct children */
+.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--padding-padding-md, 1.125rem);
+  /* border: 2px solid red; */
+}
+
+/* Disable margins for all Headings inside table */
+.boostlook:has(:not(.doc)) .informaltable:has(> .table) :is(h1, h2, h3, h4, h5, h6) {
+  margin: 0;
+}
+
+/* Table has inner table th  */
+.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) th {
+  border: none;
+  padding: 0 0 var(--padding-padding-xs, 0.75rem) 0;
+  background: none;
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--Typography-font-size-md, 1.125rem);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--typography-line-height-xl, 1.75rem); /* 155.556% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+/* Disable global cell paddings */
+.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) > tbody > tr > td {
+  padding: 0;
+}
+
+/* Add border radius to tbody first row */
+.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) tr:last-child td:first-child {
+  border-top-left-radius: var(--spacing-size-xs, 0.75rem);
+  overflow: hidden;
+}
+
+/* Add border radius to tbody first row */
+.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) tr:last-child td:last-child {
+  border-top-right-radius: var(--spacing-size-xs, 0.75rem);
+  overflow: hidden;
+}
+
+/* Select Inner Headings and make it look as table head */
+.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) tbody :is(h1, h2, h3, h4, h5, h6) {
+  padding: var(--padding-padding-2xs, 0.5rem) var(--spacing-size-sm, 1rem);
+  gap: var(--spacing-size-xs, 0.75rem);
+  background: var(--surface-background-main-surface-primary, #f5f6f8);
+  color: var(--text-main-text-body-tetriary, #62676b);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+/* Inner table styles */
+.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) table.simplelist {
+  width: 100%;
+}
+
+.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) table.simplelist td {
+  border: none;
+  padding: var(--padding-padding-2xs, 0.5rem) var(--spacing-size-sm, 1rem);
+}
+
+/* Footnotes */
+.boostlook:has(:not(.doc)) .footnotes {
+  margin-top: var(--padding-padding-lg);
+  border-top: 1px solid var(--border-border-primary);
+}
+
+.boostlook:has(:not(.doc)) .footnotes hr {
+  display: none;
 }
 
 /* Copyright Footer */
+/* If Footer has no content than use it as bottom spacer */
+.boostlook .copyright-footer:empty {
+  padding-top: var(--main-margin);
+}
+
+/* If Footer has content */
+.boostlook .copyright-footer:not(:empty) {
+  padding: var(--padding-padding-lg) 0;
+}
+
+/* Footer Content */
 .boostlook:not(:has(.doc)) .copyright-footer {
-  text-align: right;
-  font-size: 70%;
-}
-
-.boostlook:not(:has(.doc)) .copyright-footer p {
+  color: var(--text-main-text-body-quaternary, #949a9e);
+  font-size: var(--typography-font-size-xs);
+  font-weight: 500;
+  line-height: var(--typography-line-height-sm, 1rem);
+  letter-spacing: var(--spacing-size-size-0, 0rem);
   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);
+/* Footer Content  */
+.boostlook:not(:has(.doc)) .copyright-footer p {
+  text-align: inherit;
+  font-size: var(--typography-font-size-2xs);
+  color: var(--text-main-text-body-primary, #2a2c30);
 }
 
-.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);
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content hr {
+  display: none;
 }
 
-.special {
-  color: var(--text-color);
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.code-snippet {
+  position: relative;
 }
 
-.highlight .cp,
-.preprocessor {
-  color: var(--color-blue);
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.highlight:has(> pre) {
+  margin: 0;
+  border: none;
+  padding: 0;
 }
 
-.highlight .sc
-.char {
-  color: var(--color-lime);
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.highlight:has(> pre) pre {
+  padding: var(--spacing-size-xs, 0.75rem) var(--spacing-size-sm, 1rem);
+  margin-top: var(--padding-padding-3xs, 0.25rem);
 }
 
-.highlight .c,
-.highlight .ch,
-.highlight .cm,
-.highlight .cp,
-.highlight .cpf,
-.highlight .c1,
-.highlight .cs,
-.highlight .sd,
-.highlight .sh,
-.comment {
-  color: var(--color-green);
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > pre:not([class]) {
+  margin-left: 0;
+  margin-right: 0;
 }
 
-.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);
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.code-snippet:has(pre):not(:last-child) pre:not([class]),
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > pre:not([class]):not(:last-child),
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.code-snippet:not(:last-child) pre {
+  margin-bottom: var(--padding-padding-xs, 0.75rem);
 }
 
-.highlight .m,
-.highlight .mf,
-.highlight .mh,
-.highlight .mi,
-.highlight .mo,
-.number {
-  color: var(--color-red);
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content + p:has(> small) {
+  padding: var(--padding-padding-lg) 0 !important;
 }
 
-.highlight,
-.white_bkd {
-  background-color: var(--card-color);
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .footnotes {
+  padding-top: var(--padding-padding-xs, 0.75rem);
 }
 
-.highlight .hll,
-.dk_grey_bkd {
-  background-color: var(--border-color);
+@media screen and (min-width: 768px) {
+  body.article:has(.boostlook#boost-legacy-docs-wrapper) {
+    /* !important ovverides website own styles !important
+    * Adjust this to "padding: 0 1rem 0 1rem"
+    * when website container width will be used as in new look design
+    */
+    padding: 0 !important;
+  }
+
+  #boost-legacy-docs-wrapper .boostlook #toc.toc2 {
+    /* Adjust this to "max(1rem, 50% - 45rem)"
+    * when website container width will be used as in new look design
+    */
+    left: max(0rem, 50% - 45rem);
+  }
 }
 
 /*----------------- 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 > * {
+  max-width: unset;
+  margin-left: inherit;
+  margin-right: inherit;
 }
 
-.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;
+.boostlook#libraryReadMe > h1:first-child {
+  margin-top: 0;
 }
 
 /*----------------- Library README Styles end -----------------*/