Improve documentation navigation and code blocks

site/decodal-site/src/style.css

@@ -20,6 +20,7 @@
   --inline-code-text: #3730a3;
   --editor-bg: #0f172a;
   --editor-text: #e5e7eb;
+  --code-outline: #475569;
   --danger: #b91c1c;
   --error: #fecaca;
   --selection: rgb(59 130 246 / 0.35);
@@ -45,6 +46,7 @@
     --shadow: 0 8px 24px rgb(0 0 0 / 0.25);
     --inline-code-bg: #1e293b;
     --inline-code-text: #bfdbfe;
+    --code-outline: #64748b;
     --danger: #fca5a5;
   }
 }
@@ -52,7 +54,10 @@
 body {
   background: var(--bg);
   color: var(--text);
+  display: flex;
+  flex-direction: column;
   margin: 0;
+  min-height: 100vh;
 }
 
 a {
@@ -69,6 +74,7 @@ a:hover {
   background: var(--topbar-bg);
   color: var(--topbar-text);
   display: flex;
+  flex: 0 0 auto;
   height: 56px;
   justify-content: space-between;
   padding: 0 24px;
@@ -94,6 +100,7 @@ a:hover {
   border-top: 1px solid var(--border);
   color: var(--subtle);
   display: flex;
+  flex: 0 0 auto;
   font-size: 0.9rem;
   gap: 14px;
   justify-content: center;
@@ -102,8 +109,9 @@ a:hover {
 
 .layout {
   display: grid;
+  flex: 1 0 auto;
   grid-template-columns: 300px minmax(0, 1fr);
-  min-height: calc(100vh - 104px);
+  min-height: 0;
 }
 
 .playground-layout {
@@ -113,8 +121,12 @@ a:hover {
 .sidebar {
   background: var(--surface);
   border-right: 1px solid var(--border);
-  overflow: auto;
+}
+
+.sidebar-content {
+  position: sticky;
   padding: 22px 18px;
+  top: var(--sidebar-sticky-top, 0);
 }
 
 .sidebar-title {
@@ -188,6 +200,7 @@ main.playground {
 .markdown pre,
 .output-pane pre {
   background: var(--editor-bg);
+  border: 1px solid var(--code-outline);
   border-radius: 10px;
   color: var(--editor-text);
   overflow: auto;
@@ -632,6 +645,10 @@ button:disabled {
     border-bottom: 1px solid var(--border);
     border-right: 0;
     max-height: 260px;
+    overflow: auto;
+  }
+  .sidebar-content {
+    position: static;
   }
   .playground-shell,
   .home-grid,