feat(website): retheme to Deep Space design system with local fonts

Replace CSS variables, hardcoded colors, font families, syntax token
colors, and banner styling. Swap Google Fonts for self-hosted Manrope
and IBM Plex Mono woff2 files. Update theme-color meta tags and remove
testing-banner--light variant across all 19 HTML files.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

docs/website/blog/100-simulated-routers.html

@@ -8,7 +8,7 @@
   <meta name="keywords" content="MikroTik, fleet management, NATS JetStream, message retention, load testing, The Other Dude">
   <meta name="author" content="The Other Dude">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#0F172A">
+  <meta name="theme-color" content="#111113">
   <link rel="canonical" href="https://theotherdude.net/blog/100-simulated-routers.html">
   <link rel="icon" href="../data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/></svg>">
 
@@ -42,9 +42,6 @@
   </script>
 
   <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fira+Code:wght@400;500&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 
   <link rel="stylesheet" href="../style.css">
   <style>
@@ -227,7 +224,7 @@
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#888;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
+    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>

docs/website/blog/index.html

@@ -8,7 +8,7 @@
   <meta name="keywords" content="MikroTik blog, RouterOS fleet management, MSP blog, network management blog">
   <meta name="author" content="The Other Dude">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#0F172A">
+  <meta name="theme-color" content="#111113">
   <link rel="canonical" href="https://theotherdude.net/blog/">
   <link rel="icon" href="../data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/></svg>">
 
@@ -20,9 +20,6 @@
   <meta property="og:site_name" content="The Other Dude">
 
   <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fira+Code:wght@400;500&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 
   <link rel="stylesheet" href="../style.css">
   <style>
@@ -181,7 +178,7 @@
         <a href="https://github.com/staack/the-other-dude" rel="noopener">GitHub</a>
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
-      <p style="margin-top:12px;font-size:0.75em;color:#888;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
+      <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
     </div>
   </footer>
 

docs/website/blog/not-stable-software.html

@@ -8,7 +8,7 @@
   <meta name="keywords" content="MikroTik, fleet management, software development, stability, The Other Dude">
   <meta name="author" content="The Other Dude">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#0F172A">
+  <meta name="theme-color" content="#111113">
   <link rel="canonical" href="https://theotherdude.net/blog/not-stable-software.html">
   <link rel="icon" href="../data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/></svg>">
 
@@ -42,9 +42,6 @@
   </script>
 
   <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fira+Code:wght@400;500&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 
   <link rel="stylesheet" href="../style.css">
   <style>
@@ -219,7 +216,7 @@
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#888;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
+    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>

docs/website/blog/what-you-can-do-today.html

@@ -8,7 +8,7 @@
   <meta name="keywords" content="MikroTik, fleet management, RouterOS, MSP tools, The Other Dude, network management">
   <meta name="author" content="The Other Dude">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#0F172A">
+  <meta name="theme-color" content="#111113">
   <link rel="canonical" href="https://theotherdude.net/blog/what-you-can-do-today.html">
   <link rel="icon" href="../data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/></svg>">
 
@@ -42,9 +42,6 @@
   </script>
 
   <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fira+Code:wght@400;500&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 
   <link rel="stylesheet" href="../style.css">
   <style>
@@ -265,7 +262,7 @@
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#888;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
+    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>

docs/website/blog/why-this-exists.html

@@ -8,7 +8,7 @@
   <meta name="keywords" content="MikroTik, fleet management, MSP, The Other Dude, open source, AI development">
   <meta name="author" content="The Other Dude">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#0F172A">
+  <meta name="theme-color" content="#111113">
   <link rel="canonical" href="https://theotherdude.net/blog/why-this-exists.html">
   <link rel="icon" href="../data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/></svg>">
 
@@ -42,9 +42,6 @@
   </script>
 
   <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fira+Code:wght@400;500&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 
   <link rel="stylesheet" href="../style.css">
   <style>
@@ -219,7 +216,7 @@
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#888;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
+    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>

docs/website/docs.html

@@ -8,7 +8,7 @@
   <meta name="keywords" content="MikroTik documentation, RouterOS fleet management guide, MSP network management setup, MikroTik API, RouterOS configuration management, open source MikroTik management, self-hosted MikroTik">
   <meta name="robots" content="index, follow">
   <meta name="google-site-verification" content="d2QVuWrLJlzOQPnA-SAJuvajEHGYbusvJ4eDdZbWSBU">
-  <meta name="theme-color" content="#FAFBFC">
+  <meta name="theme-color" content="#111113">
   <link rel="canonical" href="https://theotherdude.net/docs.html">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><rect x='6' y='6' width='52' height='52' rx='5' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><rect x='8' y='8' width='48' height='48' rx='4' fill='%238B1A1A' opacity='0.15'/><path d='M32 8 L56 32 L32 56 L8 32 Z' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 13 L51 32 L32 51 L13 32 Z' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><path d='M19 32 L32 26 L45 32 L32 38 Z' fill='%23F5E6C8'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/><path d='M10 10 L16 10 L10 16 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 10 L54 16 L48 10 Z' fill='%232A9D8F' opacity='0.7'/><path d='M10 54 L16 54 L10 48 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 54 L48 54 L54 48 Z' fill='%232A9D8F' opacity='0.7'/></svg>">
 
@@ -28,9 +28,6 @@
   <meta name="twitter:image" content="https://theotherdude.net/assets/og-image.png">
 
   <link rel="stylesheet" href="style.css" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fira+Code:wght@400;500&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
   <script src="script.js" defer></script>
 </head>
 <body class="docs-page">
@@ -38,7 +35,7 @@
   <a href="#docs-content" class="skip-link">Skip to main content</a>
 
   <!-- ===== TESTING BANNER ===== -->
-  <div class="testing-banner testing-banner--light">
+  <div class="testing-banner">
     <div class="container">
       <strong>Early Access</strong> &mdash; This software is in active development and testing. It is not yet ready for production use.
     </div>
@@ -1541,7 +1538,7 @@ open http://localhost</code></pre>
         <a href="mailto:support@theotherdude.net">Support</a>
       </nav>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#888;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
+    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>

docs/website/docs/manage-multiple-mikrotik-routers.html

@@ -7,7 +7,7 @@
   <meta name="description" content="How to manage hundreds of MikroTik routers from a single dashboard with open source tooling. Fleet-level visibility, batch configuration, and centralized monitoring.">
   <meta name="keywords" content="manage multiple mikrotik routers, mikrotik router fleet management, mikrotik centralized management, routeros fleet, msp mikrotik">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#FAFBFC">
+  <meta name="theme-color" content="#111113">
   <link rel="canonical" href="https://theotherdude.net/docs/manage-multiple-mikrotik-routers.html">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><rect x='6' y='6' width='52' height='52' rx='5' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><rect x='8' y='8' width='48' height='48' rx='4' fill='%238B1A1A' opacity='0.15'/><path d='M32 8 L56 32 L32 56 L8 32 Z' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 13 L51 32 L32 51 L13 32 Z' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><path d='M19 32 L32 26 L45 32 L32 38 Z' fill='%23F5E6C8'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/><path d='M10 10 L16 10 L10 16 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 10 L54 16 L48 10 Z' fill='%232A9D8F' opacity='0.7'/><path d='M10 54 L16 54 L10 48 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 54 L48 54 L54 48 Z' fill='%232A9D8F' opacity='0.7'/></svg>">
 
@@ -47,9 +47,6 @@
   </script>
 
   <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fira+Code:wght@400;500&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
 
   <link rel="stylesheet" href="../style.css" />
 </head>
@@ -58,7 +55,7 @@
   <a href="#doc-content" class="skip-link">Skip to main content</a>
 
   <!-- ===== TESTING BANNER ===== -->
-  <div class="testing-banner testing-banner--light">
+  <div class="testing-banner">
     <div class="container">
       <strong>Early Access</strong> &mdash; This software is in active development and testing. It is not yet ready for production use.
     </div>
@@ -217,7 +214,7 @@
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#888;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
+    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>

docs/website/docs/mikrotik-backup-solution.html

@@ -7,7 +7,7 @@
   <meta name="description" content="Automated MikroTik backup solution with git-backed version history, side-by-side diffs, one-click restore, and scheduled config snapshots for your entire RouterOS fleet.">
   <meta name="keywords" content="mikrotik backup solution, routeros backup automation, mikrotik config backup, mikrotik backup restore, automated router backup">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#FAFBFC">
+  <meta name="theme-color" content="#111113">
   <link rel="canonical" href="https://theotherdude.net/docs/mikrotik-backup-solution.html">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><rect x='6' y='6' width='52' height='52' rx='5' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><rect x='8' y='8' width='48' height='48' rx='4' fill='%238B1A1A' opacity='0.15'/><path d='M32 8 L56 32 L32 56 L8 32 Z' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 13 L51 32 L32 51 L13 32 Z' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><path d='M19 32 L32 26 L45 32 L32 38 Z' fill='%23F5E6C8'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/><path d='M10 10 L16 10 L10 16 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 10 L54 16 L48 10 Z' fill='%232A9D8F' opacity='0.7'/><path d='M10 54 L16 54 L10 48 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 54 L48 54 L54 48 Z' fill='%232A9D8F' opacity='0.7'/></svg>">
 
@@ -48,9 +48,6 @@
   </script>
 
   <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fira+Code:wght@400;500&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 
   <link rel="stylesheet" href="../style.css">
 </head>
@@ -200,7 +197,7 @@
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#888;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
+    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>

docs/website/docs/mikrotik-bulk-configuration.html

@@ -7,7 +7,7 @@
   <meta name="description" content="Push MikroTik configuration changes across multiple devices at once. Config templates with variable substitution, batch CLI commands, two-phase commit with automatic rollback.">
   <meta name="keywords" content="mikrotik bulk configuration, mikrotik mass config, routeros bulk commands, mikrotik fleet configuration, mikrotik template config">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#FAFBFC">
+  <meta name="theme-color" content="#111113">
   <link rel="canonical" href="https://theotherdude.net/docs/mikrotik-bulk-configuration.html">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><rect x='6' y='6' width='52' height='52' rx='5' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><rect x='8' y='8' width='48' height='48' rx='4' fill='%238B1A1A' opacity='0.15'/><path d='M32 8 L56 32 L32 56 L8 32 Z' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 13 L51 32 L32 51 L13 32 Z' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><path d='M19 32 L32 26 L45 32 L32 38 Z' fill='%23F5E6C8'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/><path d='M10 10 L16 10 L10 16 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 10 L54 16 L48 10 Z' fill='%232A9D8F' opacity='0.7'/><path d='M10 54 L16 54 L10 48 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 54 L48 54 L54 48 Z' fill='%232A9D8F' opacity='0.7'/></svg>">
 
@@ -48,9 +48,6 @@
   </script>
 
   <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fira+Code:wght@400;500&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 
   <link rel="stylesheet" href="../style.css">
 </head>
@@ -212,7 +209,7 @@
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#888;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
+    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>

docs/website/docs/mikrotik-centralized-management.html

@@ -7,7 +7,7 @@
   <meta name="description" content="Open source centralized management for MikroTik RouterOS fleets. Configuration, monitoring, backups, and security from a single self-hosted platform.">
   <meta name="keywords" content="mikrotik centralized management, routeros configuration management, mikrotik router fleet management, MSP network management, MikroTik monitoring">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#FAFBFC">
+  <meta name="theme-color" content="#111113">
   <link rel="canonical" href="https://theotherdude.net/docs/mikrotik-centralized-management.html">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><rect x='6' y='6' width='52' height='52' rx='5' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><rect x='8' y='8' width='48' height='48' rx='4' fill='%238B1A1A' opacity='0.15'/><path d='M32 8 L56 32 L32 56 L8 32 Z' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 13 L51 32 L32 51 L13 32 Z' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><path d='M19 32 L32 26 L45 32 L32 38 Z' fill='%23F5E6C8'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/><path d='M10 10 L16 10 L10 16 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 10 L54 16 L48 10 Z' fill='%232A9D8F' opacity='0.7'/><path d='M10 54 L16 54 L10 48 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 54 L48 54 L54 48 Z' fill='%232A9D8F' opacity='0.7'/></svg>">
 
@@ -48,9 +48,6 @@
   </script>
 
   <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fira+Code:wght@400;500&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 
   <link rel="stylesheet" href="../style.css">
 </head>
@@ -191,7 +188,7 @@
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#888;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
+    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>

docs/website/docs/mikrotik-configuration-drift.html

@@ -7,7 +7,7 @@
   <meta name="description" content="How to detect and prevent configuration drift in MikroTik RouterOS fleets. Open source automated auditing, backup comparison, and centralized management.">
   <meta name="keywords" content="mikrotik configuration drift, routeros configuration audit, mikrotik config management, router configuration comparison">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#FAFBFC">
+  <meta name="theme-color" content="#111113">
   <link rel="canonical" href="https://theotherdude.net/docs/mikrotik-configuration-drift.html">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><rect x='6' y='6' width='52' height='52' rx='5' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><rect x='8' y='8' width='48' height='48' rx='4' fill='%238B1A1A' opacity='0.15'/><path d='M32 8 L56 32 L32 56 L8 32 Z' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 13 L51 32 L32 51 L13 32 Z' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><path d='M19 32 L32 26 L45 32 L32 38 Z' fill='%23F5E6C8'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/><path d='M10 10 L16 10 L10 16 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 10 L54 16 L48 10 Z' fill='%232A9D8F' opacity='0.7'/><path d='M10 54 L16 54 L10 48 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 54 L48 54 L54 48 Z' fill='%232A9D8F' opacity='0.7'/></svg>">
 
@@ -18,9 +18,6 @@
   <meta property="og:site_name" content="The Other Dude">
 
   <link rel="stylesheet" href="../style.css">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fira+Code:wght@400;500&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 </head>
 <body class="docs-page">
   <a href="#article-content" class="skip-link">Skip to main content</a>
@@ -167,7 +164,7 @@
         <a href="mailto:support@theotherdude.net">Support</a>
       </nav>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#888;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
+    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>

docs/website/docs/mikrotik-router-backup-automation.html

@@ -7,7 +7,7 @@
   <meta name="description" content="Automate MikroTik router configuration backups with open source tooling. Compare backup versions, restore configs, and track changes across your RouterOS fleet.">
   <meta name="keywords" content="mikrotik backup automation, mikrotik configuration management, RouterOS backup, MikroTik config export, RouterOS fleet backup">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#FAFBFC">
+  <meta name="theme-color" content="#111113">
   <link rel="canonical" href="https://theotherdude.net/docs/mikrotik-router-backup-automation.html">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><rect x='6' y='6' width='52' height='52' rx='5' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><rect x='8' y='8' width='48' height='48' rx='4' fill='%238B1A1A' opacity='0.15'/><path d='M32 8 L56 32 L32 56 L8 32 Z' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 13 L51 32 L32 51 L13 32 Z' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><path d='M19 32 L32 26 L45 32 L32 38 Z' fill='%23F5E6C8'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/><path d='M10 10 L16 10 L10 16 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 10 L54 16 L48 10 Z' fill='%232A9D8F' opacity='0.7'/><path d='M10 54 L16 54 L10 48 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 54 L48 54 L54 48 Z' fill='%232A9D8F' opacity='0.7'/></svg>">
 
@@ -39,9 +39,6 @@
   </script>
 
   <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fira+Code:wght@400;500&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 
   <link rel="stylesheet" href="../style.css">
 </head>
@@ -191,7 +188,7 @@
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#888;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
+    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>

docs/website/docs/mikrotik-router-monitoring.html

@@ -7,7 +7,7 @@
   <meta name="description" content="Monitor MikroTik routers with open source real-time metrics, alerts, and fleet-wide visibility. CPU, memory, traffic, wireless, and device health monitoring.">
   <meta name="keywords" content="mikrotik router monitoring, mikrotik monitoring software, RouterOS metrics, MikroTik fleet health, MikroTik SNMP alternative">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#FAFBFC">
+  <meta name="theme-color" content="#111113">
   <link rel="canonical" href="https://theotherdude.net/docs/mikrotik-router-monitoring.html">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><rect x='6' y='6' width='52' height='52' rx='5' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><rect x='8' y='8' width='48' height='48' rx='4' fill='%238B1A1A' opacity='0.15'/><path d='M32 8 L56 32 L32 56 L8 32 Z' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 13 L51 32 L32 51 L13 32 Z' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><path d='M19 32 L32 26 L45 32 L32 38 Z' fill='%23F5E6C8'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/><path d='M10 10 L16 10 L10 16 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 10 L54 16 L48 10 Z' fill='%232A9D8F' opacity='0.7'/><path d='M10 54 L16 54 L10 48 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 54 L48 54 L54 48 Z' fill='%232A9D8F' opacity='0.7'/></svg>">
 
@@ -48,9 +48,6 @@
   </script>
 
   <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fira+Code:wght@400;500&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 
   <link rel="stylesheet" href="../style.css">
 </head>
@@ -200,7 +197,7 @@
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#888;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
+    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>

docs/website/docs/msp-mikrotik-management.html

@@ -7,7 +7,7 @@
   <meta name="description" content="Multi-tenant MikroTik management platform for MSPs. PostgreSQL RLS tenant isolation, per-tenant encryption, RBAC roles, audit trails, and per-client dashboards.">
   <meta name="keywords" content="msp mikrotik management, mikrotik multi-tenant, managed service provider mikrotik, mikrotik client management">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#FAFBFC">
+  <meta name="theme-color" content="#111113">
   <link rel="canonical" href="https://theotherdude.net/docs/msp-mikrotik-management.html">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><rect x='6' y='6' width='52' height='52' rx='5' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><rect x='8' y='8' width='48' height='48' rx='4' fill='%238B1A1A' opacity='0.15'/><path d='M32 8 L56 32 L32 56 L8 32 Z' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 13 L51 32 L32 51 L13 32 Z' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><path d='M19 32 L32 26 L45 32 L32 38 Z' fill='%23F5E6C8'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/><path d='M10 10 L16 10 L10 16 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 10 L54 16 L48 10 Z' fill='%232A9D8F' opacity='0.7'/><path d='M10 54 L16 54 L10 48 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 54 L48 54 L54 48 Z' fill='%232A9D8F' opacity='0.7'/></svg>">
 
@@ -48,9 +48,6 @@
   </script>
 
   <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fira+Code:wght@400;500&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 
   <link rel="stylesheet" href="../style.css">
 </head>
@@ -203,7 +200,7 @@
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#888;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
+    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>

docs/website/docs/open-source-mikrotik-management.html

@@ -7,7 +7,7 @@
   <meta name="description" content="Open source MikroTik management platform. Self-hosted fleet management for RouterOS with configuration backups, monitoring, and multi-tenant support. No cloud dependency.">
   <meta name="keywords" content="open source MikroTik management, open source RouterOS, self-hosted MikroTik, free MikroTik management, MikroTik fleet management open source, open source network management, MikroTik alternative">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#FAFBFC">
+  <meta name="theme-color" content="#111113">
   <link rel="canonical" href="https://theotherdude.net/docs/open-source-mikrotik-management.html">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><rect x='6' y='6' width='52' height='52' rx='5' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><rect x='8' y='8' width='48' height='48' rx='4' fill='%238B1A1A' opacity='0.15'/><path d='M32 8 L56 32 L32 56 L8 32 Z' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 13 L51 32 L32 51 L13 32 Z' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><path d='M19 32 L32 26 L45 32 L32 38 Z' fill='%23F5E6C8'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/><path d='M10 10 L16 10 L10 16 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 10 L54 16 L48 10 Z' fill='%232A9D8F' opacity='0.7'/><path d='M10 54 L16 54 L10 48 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 54 L48 54 L54 48 Z' fill='%232A9D8F' opacity='0.7'/></svg>">
 
@@ -48,9 +48,6 @@
   </script>
 
   <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fira+Code:wght@400;500&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 
   <link rel="stylesheet" href="../style.css">
 </head>
@@ -198,7 +195,7 @@
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#888;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
+    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>

docs/website/docs/routeros-configuration-management.html

@@ -7,7 +7,7 @@
   <meta name="description" content="RouterOS configuration management with a web-based config editor, two-phase commit with automatic rollback, git-backed version history, and template system for fleet-wide config management.">
   <meta name="keywords" content="routeros configuration management, mikrotik config management, routeros config editor, mikrotik safe config push, routeros config rollback">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#FAFBFC">
+  <meta name="theme-color" content="#111113">
   <link rel="canonical" href="https://theotherdude.net/docs/routeros-configuration-management.html">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><rect x='6' y='6' width='52' height='52' rx='5' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><rect x='8' y='8' width='48' height='48' rx='4' fill='%238B1A1A' opacity='0.15'/><path d='M32 8 L56 32 L32 56 L8 32 Z' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 13 L51 32 L32 51 L13 32 Z' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><path d='M19 32 L32 26 L45 32 L32 38 Z' fill='%23F5E6C8'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/><path d='M10 10 L16 10 L10 16 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 10 L54 16 L48 10 Z' fill='%232A9D8F' opacity='0.7'/><path d='M10 54 L16 54 L10 48 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 54 L48 54 L54 48 Z' fill='%232A9D8F' opacity='0.7'/></svg>">
 
@@ -48,9 +48,6 @@
   </script>
 
   <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fira+Code:wght@400;500&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 
   <link rel="stylesheet" href="../style.css">
 </head>
@@ -210,7 +207,7 @@
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#888;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
+    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>

docs/website/docs/self-hosted-network-management.html

@@ -7,7 +7,7 @@
   <meta name="description" content="Self-hosted network management for MikroTik fleets. Deploy on your infrastructure via Docker Compose or Kubernetes. No cloud dependency, no license server, no vendor lock-in.">
   <meta name="keywords" content="self-hosted network management, self-hosted mikrotik, on-premise network management, network management no cloud, private network management tool">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#FAFBFC">
+  <meta name="theme-color" content="#111113">
   <link rel="canonical" href="https://theotherdude.net/docs/self-hosted-network-management.html">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><rect x='6' y='6' width='52' height='52' rx='5' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><rect x='8' y='8' width='48' height='48' rx='4' fill='%238B1A1A' opacity='0.15'/><path d='M32 8 L56 32 L32 56 L8 32 Z' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 13 L51 32 L32 51 L13 32 Z' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><path d='M19 32 L32 26 L45 32 L32 38 Z' fill='%23F5E6C8'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/><path d='M10 10 L16 10 L10 16 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 10 L54 16 L48 10 Z' fill='%232A9D8F' opacity='0.7'/><path d='M10 54 L16 54 L10 48 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 54 L48 54 L54 48 Z' fill='%232A9D8F' opacity='0.7'/></svg>">
 
@@ -48,9 +48,6 @@
   </script>
 
   <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fira+Code:wght@400;500&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 
   <link rel="stylesheet" href="../style.css">
 </head>
@@ -209,7 +206,7 @@
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#888;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
+    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>

docs/website/docs/winbox-alternative.html

@@ -7,7 +7,7 @@
   <meta name="description" content="Browser-based WinBox alternative for MikroTik fleet management. Run WinBox sessions in the browser, manage multiple routers, and get fleet-level visibility without installing client software.">
   <meta name="keywords" content="winbox alternative, winbox in browser, winbox web, mikrotik web management, mikrotik browser management">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#FAFBFC">
+  <meta name="theme-color" content="#111113">
   <link rel="canonical" href="https://theotherdude.net/docs/winbox-alternative.html">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><rect x='6' y='6' width='52' height='52' rx='5' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><rect x='8' y='8' width='48' height='48' rx='4' fill='%238B1A1A' opacity='0.15'/><path d='M32 8 L56 32 L32 56 L8 32 Z' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 13 L51 32 L32 51 L13 32 Z' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><path d='M19 32 L32 26 L45 32 L32 38 Z' fill='%23F5E6C8'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/><path d='M10 10 L16 10 L10 16 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 10 L54 16 L48 10 Z' fill='%232A9D8F' opacity='0.7'/><path d='M10 54 L16 54 L10 48 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 54 L48 54 L54 48 Z' fill='%232A9D8F' opacity='0.7'/></svg>">
 
@@ -48,9 +48,6 @@
   </script>
 
   <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fira+Code:wght@400;500&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 
   <link rel="stylesheet" href="../style.css">
 </head>
@@ -198,7 +195,7 @@
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#888;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
+    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>

docs/website/index.html

@@ -9,7 +9,7 @@
   <meta name="author" content="The Other Dude">
   <meta name="robots" content="index, follow">
   <meta name="google-site-verification" content="d2QVuWrLJlzOQPnA-SAJuvajEHGYbusvJ4eDdZbWSBU">
-  <meta name="theme-color" content="#0F172A">
+  <meta name="theme-color" content="#111113">
   <link rel="canonical" href="https://theotherdude.net/">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><rect x='6' y='6' width='52' height='52' rx='5' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><rect x='8' y='8' width='48' height='48' rx='4' fill='%238B1A1A' opacity='0.15'/><path d='M32 8 L56 32 L32 56 L8 32 Z' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 13 L51 32 L32 51 L13 32 Z' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><path d='M19 32 L32 26 L45 32 L32 38 Z' fill='%23F5E6C8'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/><path d='M10 10 L16 10 L10 16 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 10 L54 16 L48 10 Z' fill='%232A9D8F' opacity='0.7'/><path d='M10 54 L16 54 L10 48 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 54 L48 54 L54 48 Z' fill='%232A9D8F' opacity='0.7'/></svg>">
 
@@ -75,9 +75,6 @@
   </script>
 
   <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fira+Code:wght@400;500&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 
   <!-- Styles -->
   <link rel="apple-touch-icon" href="/apple-touch-icon.png">
@@ -422,7 +419,7 @@
         <a href="mailto:license@theotherdude.net">Licensing</a>
         <a href="mailto:support@theotherdude.net">Support</a>
       </nav>
-      <p style="margin-top:12px;font-size:0.75em;color:#888;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
+      <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
     </div>
   </footer>
 

docs/website/style.css

@@ -1,8 +1,17 @@
+/* Local font loading — no third-party requests */
+@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/manrope-v20-latin-regular.woff2') format('woff2'); }
+@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/manrope-v20-latin-500.woff2') format('woff2'); }
+@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/manrope-v20-latin-600.woff2') format('woff2'); }
+@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/manrope-v20-latin-700.woff2') format('woff2'); }
+@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/manrope-v20-latin-800.woff2') format('woff2'); }
+@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-mono-v20-latin-regular.woff2') format('woff2'); }
+@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-mono-v20-latin-500.woff2') format('woff2'); }
+
 /* ==========================================================================
    TOD - The Other Dude
    Fleet Management Platform for MikroTik RouterOS
 
-   Premium stylesheet — dark landing + light docs
+   Premium stylesheet — Deep Space design system
    ========================================================================== */
 
 /* --------------------------------------------------------------------------
@@ -10,32 +19,32 @@
    -------------------------------------------------------------------------- */
 
 :root {
-  /* Landing page (dark) */
+  /* Landing page — Deep Space */
-  --bg-deep: #040810;
+  --bg-deep: #111113;
-  --bg-primary: #0A1628;
+  --bg-primary: #111113;
-  --bg-surface: #111B2E;
+  --bg-surface: #141420;
-  --bg-elevated: #182438;
+  --bg-elevated: #1A1A2E;
-  --text-primary: #F1F5F9;
+  --text-primary: #E4E4ED;
-  --text-secondary: #94A3B8;
+  --text-secondary: #8A8AA0;
-  --text-muted: #8494A7;
+  --text-muted: #62627F;
-  --accent: #2A9D8F;
+  --accent: #818CF8;
-  --accent-hover: #3DB8A9;
+  --accent-hover: #6366F1;
-  --accent-glow: rgba(42, 157, 143, 0.12);
+  --accent-glow: rgba(129, 140, 248, 0.12);
-  --accent-secondary: #8B1A1A;
+  --accent-secondary: #2A9D8F;
-  --border: rgba(148, 163, 184, 0.08);
+  --border: rgba(255, 255, 255, 0.06);
-  --border-accent: rgba(42, 157, 143, 0.2);
+  --border-accent: #24243D;
 
-  /* Docs page (light) — applied contextually under .docs-page */
+  /* Docs page — Deep Space */
-  --docs-bg: #FAFBFC;
+  --docs-bg: #141420;
-  --docs-surface: #FFFFFF;
+  --docs-surface: #1E1E35;
-  --docs-text: #1E293B;
+  --docs-text: #E4E4ED;
-  --docs-text-secondary: #475569;
+  --docs-text-secondary: #8A8AA0;
-  --docs-text-muted: #6B7B8D;
+  --docs-text-muted: #62627F;
-  --docs-border: #E2E8F0;
+  --docs-border: #24243D;
-  --docs-accent: #1F7A6F;
+  --docs-accent: #818CF8;
-  --docs-sidebar-bg: #F8FAFC;
+  --docs-sidebar-bg: #141420;
-  --docs-code-bg: #F1F5F9;
+  --docs-code-bg: #111113;
-  --docs-code-border: #E2E8F0;
+  --docs-code-border: #24243D;
 }
 
 /* --------------------------------------------------------------------------
@@ -57,7 +66,7 @@ html {
 }
 
 body {
-  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   font-size: 16px;
   line-height: 1.6;
   color: var(--text-primary);
@@ -70,8 +79,9 @@ body {
 
 /* Testing / Early Access banner */
 .testing-banner {
-  background: linear-gradient(90deg, #8B1A1A, #a82222);
+  background: #1A1A2E;
-  color: #F5E6C8;
+  border-bottom: 1px solid #24243D;
+  color: #8A8AA0;
   text-align: center;
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
@@ -81,26 +91,18 @@ body {
 }
 
 .testing-banner strong {
+  color: #F59E0B;
   text-transform: uppercase;
   letter-spacing: 0.08em;
 }
 
-.testing-banner--light {
-  background: linear-gradient(90deg, #fef3cd, #fce8b2);
-  color: #664d03;
-}
-
-.testing-banner--light strong {
-  color: #523e02;
-}
-
 h1, h2, h3, h4, h5, h6 {
-  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   line-height: 1.2;
 }
 
 code, pre, kbd, samp {
-  font-family: "Fira Code", "SF Mono", "Cascadia Code", "Consolas", monospace;
+  font-family: "IBM Plex Mono", "SF Mono", "Cascadia Code", "Consolas", monospace;
 }
 
 img {
@@ -179,7 +181,7 @@ ul, ol {
 }
 
 .nav-logo {
-  font-family: "Outfit", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-weight: 700;
   font-size: 20px;
   display: flex;
@@ -234,8 +236,8 @@ ul, ol {
   display: inline-flex;
   align-items: center;
   background: var(--accent);
-  color: #0A1628;
+  color: #111113;
-  font-family: "Outfit", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-weight: 600;
   font-size: 14px;
   padding: 8px 20px;
@@ -350,7 +352,7 @@ ul, ol {
   border: 1px solid rgba(42, 157, 143, 0.2);
   border-radius: 9999px;
   padding: 6px 16px;
-  font-family: "Outfit", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-size: 13px;
   font-weight: 500;
   letter-spacing: 0.05em;
@@ -359,7 +361,7 @@ ul, ol {
 }
 
 .hero-title {
-  font-family: "Outfit", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-weight: 800;
   font-size: clamp(3rem, 6vw, 5rem);
   line-height: 1.05;
@@ -412,8 +414,8 @@ ul, ol {
   align-items: center;
   gap: 8px;
   background: var(--accent);
-  color: #0A1628;
+  color: #111113;
-  font-family: "Outfit", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-weight: 600;
   font-size: 15px;
   padding: 14px 28px;
@@ -441,7 +443,7 @@ ul, ol {
   gap: 8px;
   background: transparent;
   color: var(--text-primary);
-  font-family: "Outfit", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-weight: 600;
   font-size: 15px;
   padding: 14px 28px;
@@ -480,7 +482,7 @@ ul, ol {
 
 .section-label {
   color: var(--accent);
-  font-family: "Outfit", sans-serif;
+  font-family: "Manrope", sans-serif;
   text-transform: uppercase;
   font-size: 13px;
   font-weight: 600;
@@ -489,7 +491,7 @@ ul, ol {
 }
 
 .section-title {
-  font-family: "Outfit", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-weight: 700;
   font-size: 2.5rem;
   color: var(--text-primary);
@@ -560,7 +562,7 @@ ul, ol {
 }
 
 .arch-flow-step {
-  font-family: "Fira Code", "SF Mono", monospace;
+  font-family: "IBM Plex Mono", "SF Mono", monospace;
   font-size: 0.95rem;
   color: var(--text-primary);
   background: var(--bg-deep);
@@ -584,7 +586,7 @@ ul, ol {
 
 .cta-closing-title {
   color: var(--text-primary);
-  font-family: "Outfit", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-weight: 600;
   font-size: 1.3rem;
   margin-bottom: 8px;
@@ -632,7 +634,7 @@ ul, ol {
 }
 
 .feature-title {
-  font-family: "Outfit", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-weight: 600;
   font-size: 1.15rem;
   margin-bottom: 10px;
@@ -743,7 +745,7 @@ ul, ol {
 }
 
 .arch-node-label {
-  font-family: 'Outfit', sans-serif;
+  font-family: 'Manrope', sans-serif;
   font-weight: 600;
   font-size: 15px;
   color: var(--text-primary);
@@ -752,7 +754,7 @@ ul, ol {
 .arch-node-tech {
   font-size: 12px;
   color: var(--text-muted);
-  font-family: 'Fira Code', monospace;
+  font-family: 'IBM Plex Mono', monospace;
 }
 
 .arch-connector {
@@ -777,7 +779,7 @@ ul, ol {
 .arch-connector-label {
   font-size: 11px;
   color: var(--text-muted);
-  font-family: 'Fira Code', monospace;
+  font-family: 'IBM Plex Mono', monospace;
   margin-top: 4px;
 }
 
@@ -801,7 +803,7 @@ ul, ol {
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 8px 16px;
-  font-family: "Outfit", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-size: 13px;
   font-weight: 500;
   color: var(--text-secondary);
@@ -929,7 +931,7 @@ ul, ol {
   left: 50%;
   transform: translateX(-50%);
   color: rgba(255, 255, 255, 0.8);
-  font-family: 'Outfit', sans-serif;
+  font-family: 'Manrope', sans-serif;
   font-size: 15px;
   font-weight: 500;
   background: rgba(0, 0, 0, 0.5);
@@ -942,7 +944,7 @@ ul, ol {
   margin-top: 12px;
   color: var(--text-secondary);
   font-size: 14px;
-  font-family: 'Outfit', sans-serif;
+  font-family: 'Manrope', sans-serif;
   font-weight: 500;
 }
 
@@ -987,13 +989,13 @@ ul, ol {
 .code-title {
   margin-left: auto;
   color: var(--text-muted);
-  font-family: "Fira Code", monospace;
+  font-family: "IBM Plex Mono", monospace;
   font-size: 12px;
 }
 
 .code-body {
   padding: 24px;
-  font-family: "Fira Code", monospace;
+  font-family: "IBM Plex Mono", monospace;
   font-size: 14px;
   line-height: 1.8;
   overflow-x: auto;
@@ -1019,7 +1021,7 @@ ul, ol {
 }
 
 .code-string {
-  color: #7DD3FC;
+  color: #2A9D8F;
 }
 
 .code-flag {
@@ -1049,7 +1051,7 @@ ul, ol {
 }
 
 .cta-title {
-  font-family: "Outfit", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-weight: 700;
   font-size: 2.5rem;
   color: var(--text-primary);
@@ -1186,7 +1188,7 @@ ul, ol {
 
 .sidebar-section-title {
   color: var(--docs-text);
-  font-family: "Outfit", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-weight: 600;
   font-size: 13px;
   text-transform: uppercase;
@@ -1208,18 +1210,18 @@ ul, ol {
 }
 
 .sidebar-link:hover {
-  background: rgba(226, 232, 240, 0.5);
+  background: rgba(255, 255, 255, 0.05);
   color: var(--docs-text);
 }
 
 .sidebar-link--active {
-  background: rgba(2, 132, 199, 0.08);
+  background: rgba(129, 140, 248, 0.08);
   color: var(--docs-accent);
   font-weight: 500;
 }
 
 .sidebar-link--active:hover {
-  background: rgba(2, 132, 199, 0.12);
+  background: rgba(129, 140, 248, 0.12);
   color: var(--docs-accent);
 }
 
@@ -1234,7 +1236,7 @@ ul, ol {
   border: 1px solid var(--docs-border);
   border-radius: 8px;
   padding: 8px 12px;
-  font-family: "DM Sans", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-size: 14px;
   color: var(--docs-text);
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
@@ -1246,7 +1248,7 @@ ul, ol {
 
 .docs-search input:focus {
   border-color: var(--docs-accent);
-  box-shadow: 0 0 0 3px rgba(31, 122, 111, 0.15);
+  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
   outline: 2px solid var(--docs-accent);
   outline-offset: -2px;
 }
@@ -1262,7 +1264,7 @@ ul, ol {
 
 /* Content typography */
 .docs-content h1 {
-  font-family: "Outfit", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-weight: 700;
   font-size: 2.25rem;
   color: var(--docs-text);
@@ -1278,7 +1280,7 @@ ul, ol {
 }
 
 .docs-content h2 {
-  font-family: "Outfit", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-weight: 700;
   font-size: 2rem;
   color: var(--docs-text);
@@ -1296,7 +1298,7 @@ ul, ol {
 }
 
 .docs-content h3 {
-  font-family: "Outfit", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-weight: 600;
   font-size: 1.5rem;
   color: var(--docs-text);
@@ -1306,7 +1308,7 @@ ul, ol {
 }
 
 .docs-content h4 {
-  font-family: "Outfit", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-weight: 600;
   font-size: 1.15rem;
   color: var(--docs-text);
@@ -1324,7 +1326,7 @@ ul, ol {
   color: var(--docs-accent);
   text-decoration: underline;
   text-underline-offset: 2px;
-  text-decoration-color: rgba(2, 132, 199, 0.3);
+  text-decoration-color: rgba(129, 140, 248, 0.3);
   transition: text-decoration-color 0.2s ease, opacity 0.2s ease;
 }
 
@@ -1338,7 +1340,7 @@ ul, ol {
   background: var(--docs-code-bg);
   padding: 2px 6px;
   border-radius: 4px;
-  font-family: "Fira Code", monospace;
+  font-family: "IBM Plex Mono", monospace;
   font-size: 0.875em;
   color: var(--docs-text);
   border: 1px solid var(--docs-code-border);
@@ -1346,7 +1348,7 @@ ul, ol {
 
 /* Code blocks */
 .docs-content pre {
-  background: #1E293B;
+  background: #111113;
   border-radius: 12px;
   padding: 24px;
   overflow-x: auto;
@@ -1371,7 +1373,7 @@ ul, ol {
 
 .docs-content pre code {
   background: transparent;
-  color: #E2E8F0;
+  color: #E4E4ED;
   padding: 0;
   border: none;
   font-size: 14px;
@@ -1391,7 +1393,7 @@ ul, ol {
   background: var(--docs-code-bg);
   text-align: left;
   padding: 12px 16px;
-  font-family: "Outfit", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-weight: 600;
   font-size: 13px;
   border-bottom: 2px solid var(--docs-border);
@@ -1491,7 +1493,7 @@ ul, ol {
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.3);
+  box-shadow: 0 4px 16px rgba(129, 140, 248, 0.3);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease, transform 0.3s ease;
@@ -1503,7 +1505,7 @@ ul, ol {
 
 .back-to-top:hover {
   transform: translateY(-2px);
-  box-shadow: 0 6px 24px rgba(2, 132, 199, 0.4);
+  box-shadow: 0 6px 24px rgba(129, 140, 248, 0.4);
 }
 
 .back-to-top--visible {
@@ -1695,7 +1697,7 @@ ul, ol {
   z-index: 9999;
   padding: 8px 16px;
   background: var(--accent);
-  color: #0A1628;
+  color: #111113;
   font-weight: 600;
   font-size: 14px;
   border-radius: 6px;
@@ -1971,14 +1973,14 @@ ul, ol {
    22. Dark docs-page code syntax highlighting helpers
    -------------------------------------------------------------------------- */
 
-.docs-content pre .token-keyword  { color: #C084FC; }
+.docs-content pre .token-keyword  { color: #818CF8; }
-.docs-content pre .token-string   { color: #7DD3FC; }
+.docs-content pre .token-string   { color: #2A9D8F; }
-.docs-content pre .token-comment  { color: #64748B; font-style: italic; }
+.docs-content pre .token-comment  { color: #62627F; font-style: italic; }
-.docs-content pre .token-function { color: #2A9D8F; }
+.docs-content pre .token-function { color: #818CF8; }
-.docs-content pre .token-number   { color: #FB923C; }
+.docs-content pre .token-number   { color: #F59E0B; }
-.docs-content pre .token-operator { color: #94A3B8; }
+.docs-content pre .token-operator { color: #8A8AA0; }
-.docs-content pre .token-type     { color: #8B1A1A; }
+.docs-content pre .token-type     { color: #F59E0B; }
-.docs-content pre .token-variable { color: #F1F5F9; }
+.docs-content pre .token-variable { color: #E4E4ED; }
 
 /* --------------------------------------------------------------------------
    23. Additional Section Variants
@@ -2003,7 +2005,7 @@ ul, ol {
 }
 
 .stat-value {
-  font-family: "Outfit", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-weight: 800;
   font-size: 2.5rem;
   color: var(--accent);
@@ -2031,7 +2033,7 @@ ul, ol {
 
 .quote-card::before {
   content: "\201C";
-  font-family: "Outfit", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-size: 4rem;
   color: var(--accent);
   opacity: 0.3;
@@ -2050,7 +2052,7 @@ ul, ol {
 }
 
 .quote-author {
-  font-family: "Outfit", sans-serif;
+  font-family: "Manrope", sans-serif;
   font-weight: 600;
   font-size: 14px;
   color: var(--text-primary);