Add tabbed code blocks functionality with dynamic UI transformation

css/style.css

@@ -1184,6 +1184,66 @@ footer.footer-modern a:hover {
 	margin-right: 0.4rem;
 }
 
+/* ========================================
+   TABBED CODE BLOCKS  (```tabs fences)
+   ======================================== */
+.tab-group {
+	margin: var(--space-md) 0;
+	border: 1px solid var(--border-color);
+	border-radius: var(--radius-sm);
+	overflow: hidden;
+}
+
+.tab-list {
+	display: flex;
+	background: var(--bg-subtle);
+	border-bottom: 1px solid var(--border-color);
+	overflow-x: auto;
+	scrollbar-width: none;
+}
+
+.tab-list::-webkit-scrollbar { display: none; }
+
+.tab-btn {
+	padding: 0.45rem 1rem;
+	font-size: var(--font-size-sm);
+	font-weight: 600;
+	font-family: var(--font-sans);
+	background: none;
+	border: none;
+	border-bottom: 2px solid transparent;
+	color: var(--text-muted);
+	cursor: pointer;
+	white-space: nowrap;
+	margin-bottom: -1px;
+	transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.tab-btn:hover {
+	color: var(--text-primary);
+}
+
+.tab-btn.is-active {
+	color: var(--accent);
+	border-bottom-color: var(--accent);
+}
+
+.tab-panel {
+	display: none;
+}
+
+.tab-panel.is-active {
+	display: block;
+}
+
+/* Inherit code-block look; remove double borders with the group container */
+.tab-panel pre {
+	margin: 0;
+	border: none;
+	border-radius: 0;
+	border-left: 3px solid var(--accent);
+}
+
 /* ========================================
    LIGHTBOX
    ======================================== */