This is a crucial correction. You want the **Nextra Documentation Layout** (the structure) combined with the **Tactical Ops Color Palette & Font** (the skin), but **without** the "roleplay" elements (no "SYSTEM ONLINE" widgets, no dense data grids, no radar charts, no forced uppercase).

Basically: **"Clean, Minimalist Dark Mode Docs with Monospace Typography."**

Here is the adjusted prompt for your AI assistant.

---

### **Prompt for AI Coding Assistant**

**Role:** You are a Senior Front-End Developer specializing in minimalist documentation sites.
**Task:** Build a documentation website that combines a specific **Layout** with a specific **Visual Theme**.

#### **1. The Layout Architecture (Reference: Nextra Docs)**

* **Structure:** Standard "Holy Grail" Layout.
* **Header:** Sticky top bar (Logo + Nav Links + Search).
* **Left Sidebar:** Sticky navigation tree (Nested folders/files).
* **Main Content:** Central scrollable area for Markdown/Prose.
* **Right Sidebar:** Sticky "On This Page" Table of Contents (hidden on mobile).


* **Spacing:** maintain generous, comfortable whitespace (like a standard blog or docs site), do **not** use dense dashboard packing.

#### **2. The Visual Theme (Reference: Tactical Ops)**

* **Font Family:** Use a **Monospace** font stack for the entire site (Headings, Body, UI).
* *Suggestion:* `JetBrains Mono`, `Roboto Mono`, or `Geist Mono`.


* **Color Palette:**
* **Background:** `#0a0a0a` (Deep Black).
* **Surface/Panels:** `#111111` (Soft Dark Grey) - used for code blocks or sidebar backgrounds if needed.
* **Borders:** `#333333` (Dark Grey) - Use 1px borders to separate the Sidebars and Header from the Main Content. **No drop shadows.**
* **Primary Text:** `#e5e5e5` (Off-White).
* **Muted Text:** `#888888` (Mid-Grey) - for inactive sidebar items or metadata.
* **Accent Color:** `#ff6600` (Orange) - Strictly for **interactive elements**:
* Active Sidebar Link text.
* Hover states.
* Hyperlinks within the text.
* The "Active Section" indicator in the Table of Contents.





#### **3. Component Implementation Details**

**A. The Header**

* Background: `#0a0a0a` with a bottom border (`border-b border-[#333]`).
* Content: Simple Logo ("Syncopated Notes") on the left, simple text links on the right.
* **No** military badges or "Status" widgets.

**B. The Sidebars (Nav & TOC)**

* **Left Nav:** Clean list of links.
* *Active State:* Text turns Orange (`#ff6600`) and perhaps gets a thin left border line.
* *Inactive State:* Grey (`#888888`) -> White on hover.


* **Right TOC:** Simple list of headings. Active scroll position highlighted in Orange.

**C. Main Content (Typography)**

* **Headings:** Standard sentence case (e.g., "Rocky Linux 9 troubleshooting"), **not** forced uppercase.
* **Body Text:** Monospace, legible size (16px/1rem), loose line-height for readability.
* **Code Blocks:**
* Background: `#111111` (or slightly lighter than page bg).
* Border: `1px solid #333`.
* Text: Standard syntax highlighting.



**D. The "Digital Garden" Feel**

* Retain the "Welcome" and "Recently Updated" lists from the current prototype, just apply the colors above.
* Do not turn lists into "Data Grids." Keep them as clean, bulleted or simple list items.

---

### **CSS/Tailwind Config Summary**

Tell the AI to use these specific values in the config:

```javascript
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['JetBrains Mono', 'monospace'], // Force Mono as default
mono: ['JetBrains Mono', 'monospace'],
},
colors: {
bg: '#0a0a0a',
surface: '#111111',
border: '#333333',
primary: '#e5e5e5', // Main text
muted: '#888888', // Secondary text
accent: '#ff6600', // The Orange
}
}
}
}

```

README.md

@@ -1,10 +1,13 @@
 ---
-title: Syncopated Ops
-emoji: 🚀
-colorFrom: yellow
-colorTo: red
+title: Syncopated Ops 📝
+colorFrom: purple
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/header.js

@@ -0,0 +1,126 @@
+class CustomHeader extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    height: 64px;
+                    background-color: #0a0a0a;
+                    border-bottom: 1px solid #333333;
+                    position: sticky;
+                    top: 0;
+                    z-index: 50;
+                    font-family: 'JetBrains Mono', monospace;
+                }
+                .container {
+                    max-width: 100%;
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: 0 1.5rem;
+                }
+                .logo {
+                    font-weight: 700;
+                    font-size: 1.125rem;
+                    color: #e5e5e5;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    text-decoration: none;
+                }
+                .logo:hover {
+                    color: #ff6600;
+                }
+                .nav-links {
+                    display: flex;
+                    align-items: center;
+                    gap: 2rem;
+                }
+                .nav-item {
+                    font-size: 0.875rem;
+                    color: #888888;
+                    text-decoration: none;
+                    transition: color 0.2s;
+                }
+                .nav-item:hover, .nav-item.active {
+                    color: #e5e5e5;
+                }
+                .search-box {
+                    display: flex;
+                    align-items: center;
+                    background-color: #111111;
+                    border: 1px solid #333333;
+                    padding: 0.25rem 0.75rem;
+                    border-radius: 4px;
+                    font-size: 0.875rem;
+                    color: #888888;
+                    width: 200px;
+                }
+                .search-box input {
+                    background: transparent;
+                    border: none;
+                    outline: none;
+                    color: #e5e5e5;
+                    width: 100%;
+                    margin-left: 0.5rem;
+                    font-family: 'JetBrains Mono', monospace;
+                }
+                .search-icon {
+                    width: 16px;
+                    height: 16px;
+                    color: #888888;
+                }
+                /* Mobile Menu Button */
+                .menu-btn {
+                    display: none;
+                    background: none;
+                    border: none;
+                    color: #e5e5e5;
+                    cursor: pointer;
+                }
+                @media (max-width: 768px) {
+                    .nav-links {
+                        display: none;
+                    }
+                    .search-box {
+                        display: none;
+                    }
+                    .menu-btn {
+                        display: block;
+                    }
+                }
+            </style>
+            <div class="container">
+                <a href="/" class="logo">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-accent"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    Syncopated Notes
+                </a>
+                
+                <div class="search-box">
+                    <i data-feather="search" class="search-icon"></i>
+                    <input type="text" placeholder="Search...">
+                </div>
+
+                <nav class="nav-links">
+                    <a href="#" class="nav-item active">Docs</a>
+                    <a href="#" class="nav-item">Blog</a>
+                    <a href="#" class="nav-item">About</a>
+                    <a href="https://github.com" target="_blank" class="nav-item">
+                        <i data-feather="github" style="width:18px;height:18px;"></i>
+                    </a>
+                </nav>
+
+                <button class="menu-btn">
+                    <i data-feather="menu"></i>
+                </button>
+            </div>
+        `;
+        // Initialize icons inside shadow DOM
+        if (window.feather) {
+            window.feather.replace();
+        }
+    }
+}
+customElements.define('custom-header', CustomHeader);

components/sidebar.js

@@ -0,0 +1,97 @@
+class CustomSidebar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    padding: 2rem 1.5rem;
+                    font-family: 'JetBrains Mono', monospace;
+                }
+                .nav-group {
+                    margin-bottom: 2rem;
+                }
+                .nav-group-title {
+                    font-size: 0.75rem;
+                    text-transform: uppercase;
+                    letter-spacing: 0.05em;
+                    color: #888888;
+                    font-weight: 700;
+                    margin-bottom: 1rem;
+                }
+                .nav-list {
+                    list-style: none;
+                    padding: 0;
+                    margin: 0;
+                }
+                .nav-item {
+                    margin-bottom: 0.25rem;
+                }
+                .nav-link {
+                    display: block;
+                    padding: 0.375rem 0;
+                    padding-left: 0.75rem;
+                    color: #888888;
+                    text-decoration: none;
+                    font-size: 0.875rem;
+                    border-left: 2px solid transparent;
+                    transition: all 0.2s ease;
+                }
+                .nav-link:hover {
+                    color: #e5e5e5;
+                    background-color: #111111;
+                }
+                /* Active State Logic handled by class addition in main JS, but we style the class here */
+                .nav-link.nav-item-active {
+                    color: #ff6600;
+                    border-left-color: #ff6600;
+                    font-weight: 500;
+                }
+            </style>
+            <div>
+                <div class="nav-group">
+                    <div class="nav-group-title">Getting Started</div>
+                    <ul class="nav-list">
+                        <li class="nav-item">
+                            <a href="#" class="nav-link nav-item-active">Introduction</a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#" class="nav-link">Installation</a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#" class="nav-link">Configuration</a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-group">
+                    <div class="nav-group-title">Core Concepts</div>
+                    <ul class="nav-list">
+                        <li class="nav-item">
+                            <a href="#architecture" class="nav-link sidebar-link">Architecture</a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#" class="nav-link sidebar-link">Data Flow</a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#" class="nav-link sidebar-link">Security</a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nav-group">
+                    <div class="nav-group-title">Community</div>
+                    <ul class="nav-list">
+                        <li class="nav-item">
+                            <a href="#" class="nav-link sidebar-link">Contributing</a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#" class="nav-link sidebar-link">Changelog</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        `;
+    }
+}
+customElements.define('custom-sidebar', CustomSidebar);

components/toc.js

@@ -0,0 +1,60 @@
+class CustomToc extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    font-family: 'JetBrains Mono', monospace;
+                }
+                .toc-title {
+                    font-size: 0.75rem;
+                    text-transform: uppercase;
+                    letter-spacing: 0.05em;
+                    color: #888888;
+                    font-weight: 700;
+                    margin-bottom: 1rem;
+                }
+                .toc-list {
+                    list-style: none;
+                    padding: 0;
+                    margin: 0;
+                }
+                .toc-item {
+                    margin-bottom: 0.5rem;
+                }
+                .toc-link {
+                    display: block;
+                    font-size: 0.8125rem; /* 13px */
+                    color: #888888;
+                    text-decoration: none;
+                    border-left: 2px solid transparent;
+                    padding-left: 1rem;
+                    transition: all 0.2s ease;
+                    line-height: 1.5;
+                }
+                .toc-link:hover {
+                    color: #e5e5e5;
+                }
+                .toc-link.toc-item-active {
+                    color: #ff6600;
+                    border-left-color: #ff6600;
+                    font-weight: 500;
+                }
+            </style>
+            <div class="toc-title">On This Page</div>
+            <ul class="toc-list">
+                <li class="toc-item">
+                    <a href="#intro" class="toc-link">Introduction</a>
+                </li>
+                <li class="toc-item">
+                    <a href="#architecture" class="toc-link">Architecture</a>
+                </li>
+                <li class="toc-item">
+                    <a href="#troubleshooting" class="toc-link">Rocky Linux 9</a>
+                </li>
+            </ul>
+        `;
+    }
+}
+customElements.define('custom-toc', CustomToc);

index.html

@@ -1,19 +1,170 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Syncopated Notes - Documentation</title>
+    <link rel="stylesheet" href="style.css">
+    
+    <!-- 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=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
+
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+
+    <!-- Tailwind Config -->
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['"JetBrains Mono"', 'monospace'],
+                        mono: ['"JetBrains Mono"', 'monospace'],
+                    },
+                    colors: {
+                        bg: '#0a0a0a',
+                        surface: '#111111',
+                        border: '#333333',
+                        primary: '#e5e5e5',
+                        muted: '#888888',
+                        accent: '#ff6600',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-bg text-primary font-sans antialiased h-screen flex flex-col overflow-hidden selection:bg-accent selection:text-white">
+
+    <!-- Header Component -->
+    <custom-header class="flex-none"></custom-header>
+
+    <!-- Main Layout -->
+    <div class="flex flex-1 overflow-hidden">
+        
+        <!-- Sidebar Component (Left) -->
+        <custom-sidebar class="w-64 flex-none hidden md:block border-r border-border overflow-y-auto bg-bg"></custom-sidebar>
+
+        <!-- Main Content Area -->
+        <main class="flex-1 overflow-y-auto relative scroll-smooth" id="main-content">
+            <div class="max-w-4xl mx-auto px-8 py-12 lg:px-16">
+                
+                <!-- Hero Section -->
+                <header class="mb-12">
+                    <h1 class="text-3xl font-bold tracking-tight mb-4 text-primary">Welcome to Syncopated Notes</h1>
+                    <p class="text-lg text-muted leading-relaxed max-w-2xl">
+                        A minimalist, high-performance documentation layout designed for clarity. 
+                        Explore the core concepts, architecture, and troubleshooting guides below.
+                    </p>
+                </header>
+
+                <!-- Content Section -->
+                <section id="intro" class="mb-16 scroll-mt-20">
+                    <h2 class="text-xl font-semibold text-primary mb-6 flex items-center">
+                        <span class="w-1 h-6 bg-accent mr-3 rounded-sm"></span>
+                        Introduction
+                    </h2>
+                    <p class="text-muted mb-4 leading-7">
+                        This layout prioritizes content density without overwhelming the user. It uses the <strong>"Tactical Ops"</strong> color palette to reduce eye strain during long coding sessions.
+                    </p>
+                    <div class="my-6 p-4 border border-border bg-surface rounded-sm">
+                        <code class="text-accent text-sm">npm install @syncopated/core</code>
+                    </div>
+                    <p class="text-muted leading-7">
+                        The structure is based on the "Holy Grail" pattern, ensuring that navigation is always accessible while keeping the reading experience central.
+                    </p>
+                </section>
+
+                <section id="architecture" class="mb-16 scroll-mt-20">
+                    <h2 class="text-xl font-semibold text-primary mb-6 flex items-center">
+                        <span class="w-1 h-6 bg-accent mr-3 rounded-sm"></span>
+                        Architecture
+                    </h2>
+                    <p class="text-muted mb-4 leading-7">
+                        The system is built using native Web Components to ensure modularity. The layout relies on Flexbox for responsiveness, collapsing sidebars gracefully on smaller viewports.
+                    </p>
+                    <ul class="list-disc list-outside ml-4 space-y-2 text-muted">
+                        <li class="pl-2">Component-based structure</li>
+                        <li class="pl-2">Reactive data binding</li>
+                        <li class="pl-2">Optimized for static generation</li>
+                    </ul>
+                </section>
+
+                <section id="troubleshooting" class="mb-16 scroll-mt-20">
+                    <h2 class="text-xl font-semibold text-primary mb-6 flex items-center">
+                        <span class="w-1 h-6 bg-accent mr-3 rounded-sm"></span>
+                        Rocky Linux 9 Troubleshooting
+                    </h2>
+                    <p class="text-muted mb-4 leading-7">
+                        Common issues encountered when deploying on Rocky Linux 9 environments usually stem from SELinux policies or firewall configurations.
+                    </p>
+                    
+                    <h3 class="text-lg font-medium text-primary mt-8 mb-4">Service failing to start</h3>
+                    <p class="text-muted mb-4 leading-7">
+                        Check the logs using journalctl. If permissions are denied, verify the context of your files.
+                    </p>
+                    <pre class="bg-surface border border-border p-4 overflow-x-auto rounded-sm text-sm text-primary mb-6"><code>$ sudo journalctl -xe -u syncopated.service
+$ ls -Z /var/lib/syncopated</code></pre>
+
+                    <h3 class="text-lg font-medium text-primary mt-8 mb-4">Network connectivity</h3>
+                    <p class="text-muted leading-7">
+                        Ensure port 8080 is open in firewalld.
+                    </p>
+                    <pre class="bg-surface border border-border p-4 overflow-x-auto rounded-sm text-sm text-primary"><code>$ sudo firewall-cmd --add-port=8080/tcp --permanent
+$ sudo firewall-cmd --reload</code></pre>
+                </section>
+
+                <!-- Digital Garden: Recently Updated -->
+                <section class="border-t border-border pt-12 mt-12">
+                    <h3 class="text-sm uppercase tracking-wider text-muted font-semibold mb-6">Recently Updated</h3>
+                    <div class="space-y-4">
+                        <a href="#" class="block group">
+                            <div class="flex items-start justify-between">
+                                <span class="text-primary group-hover:text-accent transition-colors duration-200">API Rate Limiting v2</span>
+                                <span class="text-xs text-muted font-mono whitespace-nowrap ml-4">2h ago</span>
+                            </div>
+                        </a>
+                        <a href="#" class="block group">
+                            <div class="flex items-start justify-between">
+                                <span class="text-primary group-hover:text-accent transition-colors duration-200">Deployment Checklist</span>
+                                <span class="text-xs text-muted font-mono whitespace-nowrap ml-4">1d ago</span>
+                            </div>
+                        </a>
+                        <a href="#" class="block group">
+                            <div class="flex items-start justify-between">
+                                <span class="text-primary group-hover:text-accent transition-colors duration-200">Environment Variables</span>
+                                <span class="text-xs text-muted font-mono whitespace-nowrap ml-4">3d ago</span>
+                            </div>
+                        </a>
+                    </div>
+                </section>
+
+                <!-- Footer -->
+                <footer class="mt-24 border-t border-border pt-8 pb-12 text-center md:text-left">
+                    <p class="text-muted text-sm">
+                        &copy; 2023 Syncopated Notes. Built with pure HTML/CSS/JS.
+                    </p>
+                </footer>
+
+            </div>
+        </main>
+
+        <!-- TOC Component (Right) -->
+        <custom-toc class="w-48 flex-none hidden lg:block border-l border-border bg-bg overflow-y-auto p-6 sticky top-16 h-[calc(100vh-4rem)]"></custom-toc>
+
+    </div>
+
+    <!-- Scripts -->
+    <script src="components/header.js"></script>
+    <script src="components/sidebar.js"></script>
+    <script src="components/toc.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,44 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Highlight TOC and Sidebar based on scroll position
+    const mainContent = document.getElementById('main-content');
+    const sections = document.querySelectorAll('section[id]');
+    
+    // Sidebar Link Logic
+    const sidebarLinks = document.querySelectorAll('.sidebar-link');
+    const currentUrl = window.location.pathname;
+    
+    sidebarLinks.forEach(link => {
+        // Simple check for demo purposes
+        if(link.getAttribute('href') === currentUrl || (currentUrl === '/' && link.getAttribute('href') === '/index.html')) {
+            link.classList.add('nav-item-active', 'font-medium');
+            link.classList.remove('text-muted', 'hover:text-primary');
+        }
+    });
+
+    // Intersection Observer for TOC
+    const observerOptions = {
+        root: mainContent,
+        rootMargin: '-20% 0px -70% 0px', // Trigger when section is near top
+        threshold: 0
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const id = entry.target.getAttribute('id');
+                
+                // Update TOC
+                document.querySelectorAll('.toc-link').forEach(link => {
+                    link.classList.remove('toc-item-active', 'font-medium');
+                    link.classList.add('text-muted');
+                    if (link.getAttribute('href') === `#${id}`) {
+                        link.classList.add('toc-item-active', 'font-medium');
+                        link.classList.remove('text-muted');
+                    }
+                });
+            }
+        });
+    }, observerOptions);
+
+    sections.forEach(section => observer.observe(section));
+});

style.css

@@ -1,28 +1,58 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Base Reset & Typography */
+:root {
+    --font-main: 'JetBrains Mono', monospace;
+    --color-bg: #0a0a0a;
+    --color-surface: #111111;
+    --color-border: #333333;
+    --color-primary: #e5e5e5;
+    --color-muted: #888888;
+    --color-accent: #ff6600;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+body {
+    background-color: var(--color-bg);
+    color: var(--color-primary);
+    font-family: var(--font-main);
+    /* Custom scrollbar for Webkit */
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: var(--color-bg);
+}
+::-webkit-scrollbar-thumb {
+    background: #222;
+    border: 1px solid var(--color-border);
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #333;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Typography adjustments */
+h1, h2, h3, h4, h5, h6 {
+    color: var(--color-primary);
+    font-weight: 500; /* Monospace fonts look better slightly lighter than bold */
+}
+a {
+    color: inherit;
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+code {
+    font-family: var(--font-main);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Utility Helpers for Active States */
+.nav-item-active {
+    color: var(--color-accent) !important;
+    border-left-color: var(--color-accent) !important;
 }
+.toc-item-active {
+    color: var(--color-accent) !important;
+    border-left-color: var(--color-accent) !important;
+}