chunker ui redo

docs/architecture/styles.css

@@ -3,6 +3,8 @@
     --text-color: #e8e8e8;
     --accent-color: #4a90d9;
     --border-color: #333;
+    --sidebar-width: 220px;
+    --sidebar-bg: #151528;
 }
 
 * {
@@ -16,6 +18,59 @@ body {
     background-color: var(--bg-color);
     color: var(--text-color);
     line-height: 1.6;
+}
+
+/* Sidebar navigation */
+.sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: var(--sidebar-width);
+    height: 100vh;
+    background: var(--sidebar-bg);
+    border-right: 1px solid var(--border-color);
+    padding: 1.5rem 1rem;
+    overflow-y: auto;
+    z-index: 10;
+}
+
+.sidebar h2 {
+    font-size: 1.2rem;
+    color: var(--accent-color);
+    margin-bottom: 1.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar ul {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.sidebar li {
+    display: block;
+}
+
+.sidebar a {
+    display: block;
+    padding: 0.4rem 0.6rem;
+    color: var(--text-color);
+    text-decoration: none;
+    font-size: 0.85rem;
+    border-radius: 4px;
+    transition: background 0.15s, color 0.15s;
+}
+
+.sidebar a:hover {
+    background: rgba(74, 144, 217, 0.15);
+    color: var(--accent-color);
+}
+
+/* Main content */
+.content {
+    margin-left: var(--sidebar-width);
     padding: 2rem;
 }
 
@@ -25,12 +80,13 @@ h1 {
     color: var(--accent-color);
 }
 
-h2 {
+.content > h2 {
     font-size: 1.5rem;
     margin: 2rem 0 1rem;
     color: var(--text-color);
     border-bottom: 1px solid var(--border-color);
     padding-bottom: 0.5rem;
+    scroll-margin-top: 1rem;
 }
 
 .diagram-container {
@@ -76,20 +132,6 @@ h2 {
     text-decoration: underline;
 }
 
-nav {
-    margin-bottom: 2rem;
-}
-
-nav a {
-    color: var(--accent-color);
-    text-decoration: none;
-    margin-right: 1.5rem;
-}
-
-nav a:hover {
-    text-decoration: underline;
-}
-
 .legend {
     margin-top: 2rem;
     padding: 1rem;
@@ -141,3 +183,27 @@ pre code {
     background: none;
     padding: 0;
 }
+
+/* Responsive: collapse sidebar on small screens */
+@media (max-width: 768px) {
+    .sidebar {
+        position: static;
+        width: 100%;
+        height: auto;
+        border-right: none;
+        border-bottom: 1px solid var(--border-color);
+    }
+
+    .sidebar ul {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    .content {
+        margin-left: 0;
+    }
+
+    .diagram {
+        min-width: 100%;
+    }
+}