/* A terminal-style figure: a character grid rendered as an SVG, with the
box-drawing characters as real line segments and the words as text, so the
boxes join on any device. Every colour is a site token; diagrams.css fills
the heading, label and muted text. The card is always dark, like the
terminal screenshots beside it: color-scheme resolves every token inside
the drawing to its dark value, as the hero does. The lightbox copy sits in
a .prose stage, so it gets the same treatment. */
@layer prose {
	.prose .diagram-terminal {
		width: 100%;
		height: auto;
		padding: 1rem 1.1rem;
		border: 1px solid var(--color-border);
		border-radius: 10px;
		background: var(--color-surface);
		color-scheme: dark;
	}

	.prose .diagram-terminal text {
		font-family: var(--font-mono);
		font-size: 13px;
	}

	.prose .diagram-terminal .heading {
		font-weight: 700;
		letter-spacing: 0.02em;
	}

	/* The four forwarded ports in the accent; what must stay closed in the
	warm diagram colour. */
	.prose .diagram-terminal .ok {
		font-weight: 600;
		fill: var(--color-accent);
	}

	.prose .diagram-terminal .no {
		fill: var(--color-diagram-o);
	}

	.prose .diagram-terminal .rule {
		fill: none;
		stroke: var(--color-text);
		stroke-width: 1.3;
		stroke-linecap: square;
	}

	.prose .diagram-terminal .arrow {
		fill: var(--color-text);
	}
}