.sketch-diagram { --sketch-ink: var(--ink, #1c211d); --sketch-muted: var(--ink-dim, #5b6156); --sketch-rule: var(--rule, #d3d7c9); --sketch-accent: var(--accent, #3d5a40); --sketch-mono: var(--mono, "DM Mono", "SF Mono", ui-monospace, monospace); --sketch-stroke: 2.25; color: var(--sketch-ink); display: block; height: auto; margin: 1.75rem auto; width: min(100%, 32rem); }
.sketch-diagram :is(path, line, polyline, polygon, rect, circle, ellipse) { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: var(--sketch-stroke); }
.sketch-diagram .is-muted { color: var(--sketch-rule); stroke-width: 1.25; }
.sketch-diagram .is-accent { color: var(--sketch-accent); stroke-width: 3; }
.sketch-diagram .is-fill-accent { fill: color-mix(in srgb, var(--sketch-accent) 16%, transparent); stroke: var(--sketch-accent); }
.sketch-diagram text { fill: var(--sketch-ink); font: 400 12px/1.2 var(--sketch-mono); letter-spacing: .04em; }
.sketch-diagram .is-title { letter-spacing: .05em; text-transform: uppercase; }
.sketch-diagram .is-detail { font-size: 9.5px; letter-spacing: .02em; }
.sketch-diagram .is-label-muted { fill: var(--sketch-muted); }
@media (prefers-reduced-motion: reduce) { .sketch-diagram__art { filter: none; } }