.mermaid-diagram svg {
		max-width: 100%;
		height: auto;
	}

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

	.walkthrough-diagram.svelte-pq0i9u {
		display: flex;
		justify-content: center;
	}
	.walkthrough-diagram svg {
		max-width: 100%;
		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;
	}
	/* Edge label text - force theme foreground color */
	.walkthrough-diagram .edgeLabel,
	.walkthrough-diagram .edgeLabel span,
	.walkthrough-diagram .edgeLabel div,
	.walkthrough-diagram .edgeLabel p,
	.walkthrough-diagram .edgeLabel foreignObject,
	.walkthrough-diagram .edgeLabel foreignObject *,
	.walkthrough-diagram .edgeLabel text,
	.walkthrough-diagram .edgeLabel tspan {
		color: var(--foreground) !important;
		fill: var(--foreground) !important;
	}
	/* Edge label background - use theme background for readability */
	.walkthrough-diagram .edgeLabel rect,
	.walkthrough-diagram .edgeLabel .labelBkg {
		fill: var(--background) !important;
	}

	/* Edge paths (lines connecting nodes) - ensure they use theme foreground color */
	.walkthrough-diagram .edgePath path,
	.walkthrough-diagram .flowchart-link,
	.walkthrough-diagram path.path,
	.walkthrough-diagram .edge-pattern-solid,
	.walkthrough-diagram .edge-pattern-dotted,
	.walkthrough-diagram .edge-pattern-dashed {
		stroke: var(--foreground) !important;
	}
	/* Arrow markers on edges */
	.walkthrough-diagram marker path,
	.walkthrough-diagram .arrowheadPath,
	.walkthrough-diagram .arrowMarkerAbs path {
		fill: var(--foreground) !important;
		stroke: var(--foreground) !important;
	}

	/* Subgraph/cluster styling - override inline classDef colors */
	.walkthrough-diagram .cluster rect,
	.walkthrough-diagram .cluster-label,
	.walkthrough-diagram g.cluster > rect {
		fill: var(--card) !important;
		stroke: var(--foreground) !important;
	}
	.walkthrough-diagram .cluster text,
	.walkthrough-diagram .cluster-label text,
	.walkthrough-diagram .cluster .nodeLabel {
		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 (vertical lines between actors) */
	.walkthrough-diagram line.actor-line,
	.walkthrough-diagram .actor-line {
		stroke: var(--foreground) !important;
	}
	/* Sequence diagram messages and numbers */
	.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 :is(rect, circle, polygon, path) {
		filter: brightness(1.12) !important;
	}
	.walkthrough-diagram .node.selected-node :is(rect, circle, polygon, path) {
		filter: brightness(1.2) !important;
		stroke: var(--muted-foreground) !important;
		stroke-width: 1.5px !important;
	}
	.walkthrough-diagram .node.selected-node .nodeLabel {
		text-decoration: underline;
		text-underline-offset: 2px;
	}
	/* ERD: only outer border gets hover/selected effects, not individual cells */
	
		.walkthrough-diagram
			.erDiagram
			.node:hover
			:is(.row-rect-odd, .row-rect-even)
			:is(path, rect, polygon)
	,
	
		.walkthrough-diagram
			.erDiagram
			.node.selected-node
			:is(.row-rect-odd, .row-rect-even)
			:is(path, rect, polygon)
	 {
		filter: none !important;
		stroke: none !important;
		stroke-width: 0 !important;
	}
	.walkthrough-diagram .node.highlighted-node :is(rect, circle, polygon, path) {
		animation: svelte-pq0i9u-node-highlight-pulse 0.5s ease-in-out 3;
	}
	@keyframes svelte-pq0i9u-node-highlight-pulse {
		0%,
		100% {
			filter: brightness(1);
		}
		50% {
			filter: brightness(1.3) drop-shadow(0 0 8px var(--foreground));
		}
	}

	/* Fix for code blocks in popup descriptions - ensures consistent line-height
	   regardless of font loading state to prevent overlapping text */
	.walkthrough-popup-description pre code {
		line-height: 1.625 !important;
	}