.mermaid-diagram a {
		text-decoration: underline;
	}

	.mermaid-diagram [data-citation] {
		cursor: pointer;
	}

	/* Node hover styles */
	.mermaid-diagram [data-citation]:hover rect,
	.mermaid-diagram [data-citation]:hover circle,
	.mermaid-diagram [data-citation]:hover polygon,
	.mermaid-diagram [data-citation]:hover ellipse {
		filter: brightness(1.15);
		stroke-width: 2.5px;
	}

	/* Edge hover styles - highlight lines and arrows */
	.mermaid-diagram [data-citation]:hover path,
	.mermaid-diagram [data-citation]:hover line {
		stroke-width: 3px;
		filter: brightness(1.2);
	}

	/* Text hover styles */
	.mermaid-diagram [data-citation]:hover .nodeLabel,
	.mermaid-diagram [data-citation]:hover .edgeLabel,
	.mermaid-diagram [data-citation]:hover text {
		text-decoration: underline;
	}

	.walkthrough-diagram.svelte-1t4c4q {
		display: flex;
		justify-content: center;
	}
	.walkthrough-diagram svg {
		max-height: none !important;
		height: auto !important;
	}
	.walkthrough-diagram a {
		text-decoration: underline;
	}
	.walkthrough-diagram .node {
		cursor: pointer;
	}

	/* Flowchart node styling - ensure all shapes have consistent dark background */
	.walkthrough-diagram .node rect,
	.walkthrough-diagram .node circle,
	.walkthrough-diagram .node ellipse,
	.walkthrough-diagram .node polygon,
	.walkthrough-diagram .node path,
	.walkthrough-diagram .node .label-container,
	.walkthrough-diagram .node .label-container path,
	.walkthrough-diagram .node g path {
		fill: var(--background) !important;
		stroke: var(--foreground) !important;
	}
	.walkthrough-diagram .node .label,
	.walkthrough-diagram .node .nodeLabel,
	.walkthrough-diagram .node text,
	.walkthrough-diagram .node foreignObject {
		color: var(--foreground) !important;
		fill: var(--foreground) !important;
	}
	.walkthrough-diagram .node foreignObject div,
	.walkthrough-diagram .node foreignObject span,
	.walkthrough-diagram .node foreignObject p {
		color: var(--foreground) !important;
	}
	/* Ensure edge labels are readable */
	.walkthrough-diagram .edgeLabel rect {
		fill: var(--background) !important;
	}
	.walkthrough-diagram .edgeLabel text,
	.walkthrough-diagram .edgeLabel .label {
		fill: var(--foreground) !important;
		color: var(--foreground) !important;
	}

	/* ERD diagram styling - must come AFTER generic node styling to override */
	.walkthrough-diagram .erDiagram .node > g:first-child path,
	.walkthrough-diagram [id^='erDiagram'] .node > g:first-child path,
	.walkthrough-diagram .entityBox {
		fill: var(--card) !important;
	}
	.walkthrough-diagram .row-rect-odd path,
	.walkthrough-diagram .row-rect-even path {
		fill: var(--background) !important;
	}
	.walkthrough-diagram .row-rect-even path {
		fill: var(--muted) !important;
	}
	.walkthrough-diagram .relationshipLine path {
		stroke: var(--foreground) !important;
	}
	.walkthrough-diagram .relationshipLabel {
		fill: var(--foreground) !important;
	}

	/* Sequence diagram actor boxes - override Mermaid's baked-in colors */
	.walkthrough-diagram rect.actor {
		fill: var(--background) !important;
		stroke: var(--foreground) !important;
	}
	.walkthrough-diagram text.actor,
	.walkthrough-diagram text.actor tspan,
	.walkthrough-diagram .actor > tspan {
		fill: var(--foreground) !important;
		stroke: none !important;
	}
	.walkthrough-diagram .actor-man circle,
	.walkthrough-diagram .actor-man line {
		fill: var(--background) !important;
		stroke: var(--foreground) !important;
	}
	/* Sequence diagram lifelines and messages */
	.walkthrough-diagram .sequenceNumber {
		fill: var(--background) !important;
	}
	.walkthrough-diagram .messageLine0,
	.walkthrough-diagram .messageLine1 {
		stroke: var(--foreground) !important;
	}
	.walkthrough-diagram .messageText {
		fill: var(--foreground) !important;
	}
	/* Sequence diagram activation boxes */
	.walkthrough-diagram .activation0,
	.walkthrough-diagram .activation1,
	.walkthrough-diagram .activation2 {
		fill: var(--muted) !important;
		stroke: var(--foreground) !important;
	}
	/* Sequence diagram loop/alt boxes */
	.walkthrough-diagram .labelBox {
		fill: var(--card) !important;
		stroke: var(--foreground) !important;
	}
	.walkthrough-diagram .labelText,
	.walkthrough-diagram .loopText {
		fill: var(--foreground) !important;
	}

	.walkthrough-diagram .node:hover rect,
	.walkthrough-diagram .node:hover circle,
	.walkthrough-diagram .node:hover polygon,
	.walkthrough-diagram .node:hover path {
		filter: brightness(1.15) !important;
		stroke: var(--primary, #3b82f6) !important;
		stroke-width: 2px !important;
	}
	.walkthrough-diagram .node.selected-node rect,
	.walkthrough-diagram .node.selected-node circle,
	.walkthrough-diagram .node.selected-node polygon,
	.walkthrough-diagram .node.selected-node path {
		filter: brightness(1.15) !important;
		stroke: var(--primary, #3b82f6) !important;
		stroke-width: 2px !important;
	}
	.walkthrough-diagram .node.highlighted-node rect,
	.walkthrough-diagram .node.highlighted-node circle,
	.walkthrough-diagram .node.highlighted-node polygon,
	.walkthrough-diagram .node.highlighted-node path {
		animation: svelte-1t4c4q-node-highlight-pulse 0.5s ease-in-out 3;
	}
	@keyframes svelte-1t4c4q-node-highlight-pulse {
		0%,
		100% {
			filter: brightness(1);
		}
		50% {
			filter: brightness(1.3) drop-shadow(0 0 8px var(--primary, #3b82f6));
		}
	}