/* Systemic design framework (widgets/systemic/systemic.js) */
.sd { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px 14px; color: var(--ink-2); }
.sd__svg { display: block; flex: 1; min-height: 0; width: 100%; font-family: var(--font); overflow: visible; }
.sd__fill { fill: var(--mark); opacity: 0; transition: opacity .45s ease; }
.sd__fill.is-on { opacity: .28; }
.sd__line { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
.sd__dash { fill: none; stroke: var(--ink); stroke-width: 5; stroke-dasharray: 11 9; }
.sd__lbl { text-anchor: middle; font-size: 17px; font-weight: 700; letter-spacing: .04em; fill: var(--ink); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.sd__lbl--on { opacity: .85; }
.sd__lbl.is-on { opacity: 1; }
.sd__hit { fill: transparent; cursor: pointer; outline: none; }
.sd__hit:focus-visible { stroke: var(--mark); stroke-width: 3; }
.sd__cap { flex: none; box-sizing: border-box; overflow: hidden; font-size: 13px; line-height: 1.4; }
.sd__cap p { margin: 2px 0 0; }
.sd__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sd__name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.sd__about { color: var(--muted); }
.sd__did { color: var(--ink); }
.sd__methods { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px !important; }
.sd__methods > * { padding: 2px 9px; border-radius: 100px; font: inherit; font-size: 12px; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); background: none; border: 0; }
.sd__link { cursor: pointer; }
.sd__link:hover, .sd__link:focus-visible { background: var(--ink); color: var(--bg); box-shadow: none; outline: none; }
.sd__dots { display: flex; gap: 2px; }
.sd__dots button { width: 14px; height: 14px; padding: 0; border: 0; background: none; position: relative; cursor: pointer; }
.sd__dots button::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--muted); opacity: .45; }
.sd__dots button[aria-pressed=true]::before { background: var(--mark); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sd__fill, .sd__lbl { transition: none; } }
/* Stacked page: the diagram uses the full width. */
.is-vertical .sd__svg { flex: none; height: auto; }