:root {
  --elocutio-navy: #0f2340;
  --elocutio-blue: #3e7cb1;
  --elocutio-light-blue: #d6e6f0;
  --elocutio-paper: #f2f4f7;
}

.elocutio-graph-engine {
  color: var(--elocutio-navy);
  background: var(--elocutio-paper);
  border: 0;
  border-radius: 0;
  overflow: visible;
  font-family: Sora, Arial, sans-serif;
}

.elocutio-graph-stage { position: relative; }
.elocutio-graph-stage canvas { position: relative; z-index: 1; display: block; width: 100%; touch-action: manipulation; }

.elocutio-graph-core {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--elocutio-navy);
  transform: translate(-50%, -50%);
  transition: opacity 1.08s cubic-bezier(.45, 0, .55, 1), transform 1.08s cubic-bezier(.45, 0, .55, 1);
  pointer-events: none;
}

.elocutio-graph-core img { display: block; width: 44px; height: 44px; object-fit: contain; }
.elocutio-graph-engine.is-focused .elocutio-graph-core { opacity: 0; transform: translate(-50%, -50%) scale(.72); }

.elocutio-graph-detail {
  display: grid;
  grid-template-columns: 110px minmax(170px, .65fr) minmax(260px, 1.35fr);
  gap: 12px 24px;
  align-items: start;
  margin-top: -6px;
  padding: 8px 0 6px;
  color: var(--elocutio-navy);
  background: transparent;
}

.elocutio-graph-detail[hidden] { display: none; }
.elocutio-graph-detail p { margin: 0; }
.elocutio-graph-detail h3 { margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 500; }
.elocutio-graph-kicker { color: var(--elocutio-blue); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
.elocutio-graph-related { color: rgba(15, 35, 64, .65); font-size: 13px; white-space: nowrap; }

@media (max-width: 680px) {
  .elocutio-graph-core { width: 64px; height: 64px; }
  .elocutio-graph-core img { width: 37px; height: 37px; }
  .elocutio-graph-detail { grid-template-columns: 1fr; gap: 7px; margin-top: 0; padding-top: 10px; }
  .elocutio-graph-related { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .elocutio-graph-engine * { scroll-behavior: auto !important; transition: none !important; }
}