/* Shared vector diagram styles for the live site and design previews. */
.research-diagram, .concept-panel { --diagram-purple: #57068C; --ivory: #FFF7DF; --disc: transparent; --disc-stroke: var(--diagram-purple); --label: #000; --core: var(--diagram-purple); --core-label: #FFF7DF; --connector: var(--diagram-purple); --focus: var(--diagram-purple); }
.concept-map { display: block; width: 100%; height: auto; overflow: visible; }
.concept-connectors { stroke: var(--connector); stroke-width: 4; opacity: .65; }
.concept-node { cursor: pointer; }
.concept-disc { fill: var(--disc); stroke: var(--disc-stroke); stroke-width: 4; }
.concept-label { fill: var(--label); font: 36px var(--wordmark-font); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.concept-core .concept-disc { fill: var(--core); stroke: none; }
.concept-core-label { fill: var(--core-label); font-size: 42px; }
.concept-kicker { fill: var(--core-label); font: 18px var(--wordmark-font); letter-spacing: 3px; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.concept-focus { fill: transparent; stroke: var(--focus); stroke-width: 3; opacity: 0; }
.concept-node:hover .concept-focus, .concept-node:focus .concept-focus { opacity: 1; }
.concept-node:focus { outline: none; }