.mley-graph-preview, .mley-graph-guidance {
  --map-ink: #16383e;
  --map-muted: #546d72;
  --map-accent: #145b60;
  --map-border: #d5e3e2;
  --map-tint: #f3f8f7;
  --map-surface: #fff;
  --map-origin: #b12860;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--map-ink);
}
.mley-graph-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin: 0 0 1rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--map-border);
  border-radius: 18px;
  background: var(--map-tint);
}
.mley-law-guide-shell > .mley-graph-preview { margin: 1.25rem clamp(1rem, 3vw, 2rem); }
.mley-graph-preview__copy { flex: 1 1 240px; min-width: 0; }
.mley-graph-preview__eyebrow { display: flex; gap: .5rem; align-items: center; margin-bottom: .65rem; color: var(--map-accent); font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.mley-graph-preview h2 { margin: 0 0 .6rem; color: var(--map-ink); font: 650 clamp(1.15rem, 2vw, 1.5rem)/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.02em; }
.mley-graph-preview p { margin: 0 0 1rem; color: var(--map-muted); font-size: .88rem; line-height: 1.6; }
.mley-graph-preview .mley-graph-preview__action { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 44px; padding: .7rem 1rem; border: 1px solid var(--map-accent); border-radius: 10px; background: var(--map-accent); color: var(--map-surface); font-size: .85rem; font-weight: 600; text-decoration: none; }
.mley-graph-preview .mley-graph-preview__action:hover { filter: brightness(1.12); }
.mley-graph-preview .mley-graph-preview__status { margin: .8rem 0 0; font-size: .74rem; }
.mley-graph-preview__visual { flex: 1 1 260px; min-width: 0; max-width: 420px; margin: auto; border-radius: 12px; text-decoration: none; color: var(--map-muted); }
.mley-graph-preview__visual[hidden], .mley-graph-preview__retry[hidden] { display: none; }
.mley-graph-preview__visual svg { display: block; width: 100%; height: auto; max-height: 232px; overflow: visible; }
.mley-graph-preview__caption { display: block; text-align: center; font-size: .66rem; line-height: 1.5; }
.mley-graph-preview__edge { stroke: var(--map-accent); stroke-width: 1.5; opacity: .65; fill: none; }
.mley-graph-preview__arrow { fill: var(--map-accent); }
.mley-graph-preview__node circle { fill: var(--map-surface); stroke: var(--map-border); stroke-width: 1.5; }
.mley-graph-preview__node text { fill: var(--map-accent); font-size: 11px; font-weight: 650; text-anchor: middle; dominant-baseline: central; }
.mley-graph-preview__node--origin circle { fill: var(--map-origin); stroke: var(--map-origin); }
.mley-graph-preview__node--origin text { fill: #fff; font-size: 12px; }
.mley-graph-preview__visual:hover .mley-graph-preview__node circle { stroke: var(--map-accent); }
.mley-graph-preview__retry { min-height: 44px; padding: .4rem 0; border: 0; background: transparent; color: var(--map-accent); text-decoration: underline; font-size: .8rem; cursor: pointer; }
.mley-graph-preview a:focus-visible, .mley-graph-preview button:focus-visible { outline: 2px solid var(--map-accent); outline-offset: 4px; }
.mley-graph-guidance { display: flex; flex-wrap: wrap; gap: .5rem .85rem; align-items: center; margin: .8rem 0 1rem; color: var(--map-muted); font-size: .8rem; line-height: 1.6; }
.mley-graph-guidance__origin { padding: .25rem .65rem; border: 1px solid currentColor; border-radius: 6px; color: var(--map-origin); font-weight: 600; }
:root[data-theme="dark"] :is(.mley-graph-preview, .mley-graph-guidance) {
  --map-ink: #e4f3f1;
  --map-muted: #b3c8cb;
  --map-accent: #95d5ce;
  --map-border: #355256;
  --map-tint: #1c3238;
  --map-surface: #172b30;
  --map-origin: #c93870;
}
:root[data-theme="dark"] .mley-graph-guidance__origin { color: #f28db0; }