.goalmap-lib {
  --goalmap-bg: rgba(255, 250, 241, 0.88);
  --goalmap-panel-border: rgba(93, 71, 44, 0.14);
  --goalmap-text: #20150c;
  --goalmap-muted: #6a5a4a;
  --goalmap-accent: #b85c38;
  --goalmap-shadow: 0 22px 60px rgba(53, 38, 20, 0.14);
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  background: var(--goalmap-bg);
  border: 1px solid var(--goalmap-panel-border);
  border-radius: 24px;
  box-shadow: var(--goalmap-shadow);
  overflow: hidden;
}

.goalmap-lib[data-theme="dark"] {
  --goalmap-bg: rgba(15, 20, 28, 0.86);
  --goalmap-panel-border: rgba(182, 198, 220, 0.1);
  --goalmap-text: #ecf0f8;
  --goalmap-muted: #95a4ba;
  --goalmap-accent: #ef7f51;
  --goalmap-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.goalmap-lib__svg {
  width: 100%;
  height: 100%;
  display: block;
}

.goalmap-lib__hint,
.goalmap-lib__zoom,
.goalmap-lib__readout {
  position: absolute;
  top: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(127, 127, 127, 0.14);
  background: rgba(255, 255, 255, 0.7);
  color: var(--goalmap-muted);
  font: 700 12px/1.1 "IBM Plex Sans", sans-serif;
  pointer-events: none;
}

.goalmap-lib[data-theme="dark"] .goalmap-lib__hint,
.goalmap-lib[data-theme="dark"] .goalmap-lib__zoom,
.goalmap-lib[data-theme="dark"] .goalmap-lib__readout {
  background: rgba(255, 255, 255, 0.08);
}

.goalmap-lib__hint {
  left: 50%;
  transform: translateX(-50%);
}

.goalmap-lib[data-drag-drop="disabled"] .goalmap-lib__hint {
  display: none;
}

.goalmap-lib__zoom {
  right: 10px;
  min-width: 58px;
  text-align: center;
  color: var(--goalmap-text);
}

.goalmap-lib__readout {
  top: auto;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(80%, 460px);
  color: var(--goalmap-text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.goalmap-lib__readout[hidden] {
  display: none;
}

.goalmap-lib__segment {
  cursor: pointer;
  transform-origin: center;
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.goalmap-lib[data-drag-drop="disabled"] .goalmap-lib__segment {
  cursor: default;
}

.goalmap-lib__segment:hover {
  filter: brightness(1.04);
}

.goalmap-lib__segment.is-selected {
  transform: scale(1.01);
}

.goalmap-lib__segment.is-selected .goalmap-lib__outer {
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 3;
}

.goalmap-lib__segment.is-drop-target .goalmap-lib__outer,
.goalmap-lib__core.is-drop-target {
  stroke: var(--goalmap-accent);
  stroke-width: 4;
}

.goalmap-lib__segment.is-drop-flash .goalmap-lib__outer,
.goalmap-lib__core.is-drop-flash {
  animation: goalmap-drop-flash 420ms ease;
}

.goalmap-lib__segment.is-drag-source {
  opacity: 0.3;
}

.goalmap-lib__segment.is-muted {
  opacity: 0.34;
}

.goalmap-lib__label {
  fill: var(--goalmap-text);
  font: 700 10px/1 "IBM Plex Sans", sans-serif;
  text-anchor: middle;
  pointer-events: none;
}

.goalmap-lib__progress-fill {
  pointer-events: none;
  opacity: 0.9;
}

.goalmap-lib__core {
  fill: rgba(255, 255, 255, 0.84);
  stroke: rgba(127, 127, 127, 0.16);
  stroke-width: 2;
  cursor: pointer;
}

.goalmap-lib__core-group {
  pointer-events: auto;
}

.goalmap-lib[data-theme="dark"] .goalmap-lib__core {
  fill: rgba(255, 255, 255, 0.1);
}

.goalmap-lib__core-label {
  fill: var(--goalmap-text);
  font: 700 16px/1 "Space Grotesk", sans-serif;
  text-anchor: middle;
  pointer-events: none;
}

.goalmap-lib__proxy {
  fill: rgba(255, 255, 255, 0.2);
  stroke: rgba(255, 255, 255, 0.84);
  stroke-width: 2;
  pointer-events: none;
}

.goalmap-lib__proxy-label {
  fill: var(--goalmap-text);
  font: 700 12px/1 "IBM Plex Sans", sans-serif;
  text-anchor: middle;
  pointer-events: none;
}

@keyframes goalmap-drop-flash {
  0% {
    stroke: rgba(255, 255, 255, 0.95);
    stroke-width: 3;
    filter: brightness(1);
  }
  45% {
    stroke: var(--goalmap-accent);
    stroke-width: 6;
    filter: brightness(1.18);
  }
  100% {
    stroke: var(--goalmap-accent);
    stroke-width: 3;
    filter: brightness(1);
  }
}