/* The controller owns rotation, entry progress and traveling light positions. */
.synastry-app .chart-stage {
  position: relative;
  aspect-ratio: auto;
  min-width: 0;
}
.synastry-app .chart-stage::before {
  inset: 5% 7% auto;
  aspect-ratio: 1;
  height: auto;
  background: radial-gradient(ellipse at 27% 33%, #87cde21c, transparent 54%), radial-gradient(ellipse at 76% 68%, #e2a6c121, transparent 53%), radial-gradient(ellipse at 50% 50%, #e8ce990d, transparent 65%);
  filter: none;
  transform: none;
}
.synastry-chart {
  --chart-a: #a3dbea;
  --chart-b: #ebb5c8;
  --chart-gold: #edd2a1;
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  color: #dce2e6;
}
.synastry-chart .chart-face {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: grab;
}
.synastry-chart .chart-face:active,
.synastry-chart .chart-face.is-dragging,
.synastry-chart[data-chart-dragging="true"] .chart-face { cursor: grabbing; }
.synastry-chart .chart-face:focus-visible { outline: 1px solid #a3dbea99; outline-offset: 3px; border-radius: 50%; }
.synastry-chart .wheel-ring { fill: none; stroke: #d8c7a740; stroke-width: .8; }
.synastry-chart .wheel-ring:first-child { stroke: #dcc59477; stroke-width: .9; }
.synastry-chart .zodiac-tick { stroke: #c2cfda66; stroke-width: .7; }
.synastry-chart .zodiac-label { fill: #c9ccd0; opacity: .85; }
.synastry-chart .chart-orbit-a { color: var(--chart-a); }
.synastry-chart .chart-orbit-b { color: var(--chart-b); }
.synastry-chart .chart-axis-mark { fill: none; stroke: #e7d5ac80; stroke-width: .8; pointer-events: none; }
.synastry-chart .chart-context-links { pointer-events: none; }
.synastry-chart .chart-context-link { fill: none; stroke: #a8c9d5; stroke-width: .75; stroke-opacity: .2; stroke-linecap: round; pointer-events: none; }
.synastry-chart .chart-context-link:nth-child(even) { stroke: #d5c39c; stroke-opacity: .17; }

/* Override the earlier section-scroll reveal; all visibility now belongs to JS. */
.synastry-chart .chart-link {
  fill: none;
  stroke: #cbbd9a;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 1;
  filter: none;
  pointer-events: none;
}
.synastry-chart .chart-link.selected,
.synastry-chart .chart-link.active,
.synastry-chart .chart-relation.selected .chart-link {
  stroke: var(--chart-gold);
  stroke-width: 1.55;
  filter: drop-shadow(0 0 2px #e9d2a466);
}
.synastry-chart .chart-link-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 24px;
  stroke-dasharray: none;
  vector-effect: non-scaling-stroke;
  pointer-events: stroke;
  cursor: pointer;
}
.synastry-chart .chart-link-hit:focus-visible { outline: none; stroke: #e8d6ad25; }
.synastry-chart .chart-relation:focus-visible { outline: none; opacity: 1; }
.synastry-chart .chart-relation:focus-visible .chart-link { stroke: #c6f1ff; stroke-width: 2.3; filter: drop-shadow(0 0 4px #a3dbeaaa); }
.synastry-chart .chart-relation:focus-visible .chart-link-hit { stroke: #a3dbea16; }
.synastry-chart .chart-relation:focus-visible .chart-endpoints { visibility: visible; }
.synastry-chart .planet-node { opacity: 1; }
.synastry-chart .planet-node circle { stroke-width: 1; }
.synastry-chart .planet-node.person-0 circle { fill: var(--chart-a); stroke: var(--chart-a); }
.synastry-chart .planet-node.person-1 circle { fill: var(--chart-b); stroke: var(--chart-b); }
.synastry-chart .planet-node.uncertain circle { fill: #09131e; stroke-dasharray: 2 1.5; }
.synastry-chart .planet-node text {
  fill: #e1e7ea;
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 14px;
  font-variant-emoji: text;
  pointer-events: none;
  paint-order: stroke fill;
  stroke: #09131e;
  stroke-width: 2px;
  stroke-linejoin: round;
}
.synastry-chart .chart-endpoint-halo { fill: none; stroke-width: 1.1; pointer-events: none; filter: drop-shadow(0 0 3px #e8d7bb55); }
.synastry-chart .chart-endpoint-halo.person-0 { stroke: var(--chart-a); }
.synastry-chart .chart-endpoint-halo.person-1 { stroke: var(--chart-b); }
.synastry-chart .chart-traveler-a { fill: #d1f5ff; stroke: #a3dbea99; stroke-width: .7; filter: drop-shadow(0 0 4px #7fdcf3c0); pointer-events: none; }
.synastry-chart .chart-traveler-b { fill: #fff0ef; stroke: #ebb5c899; stroke-width: .7; filter: drop-shadow(0 0 4px #edabc7c0); pointer-events: none; }
.synastry-chart .chart-meeting-pulse { fill: none; stroke: #f1dab0; stroke-width: 1.15; filter: drop-shadow(0 0 3px #f2dbb099); pointer-events: none; }
.synastry-chart .chart-endpoint-label {
  fill: #e4dac8;
  font: 10px/1 var(--sans);
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke fill;
  stroke: #09131e;
  stroke-width: 3px;
  stroke-linejoin: round;
}
.synastry-chart .chart-heart { fill: #ead2a12b; stroke: #ead2a18c; filter: drop-shadow(0 0 5px #ead2a140); }

.synastry-chart .chart-connection-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 5px 13px;
  min-width: 0;
  margin: 7px 8px 16px;
  color: #becbd3;
  text-align: center;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.8;
}
.synastry-chart .chart-caption-a,
.synastry-chart .chart-caption-b { min-width: 0; max-width: 100%; font: 14px/1.8 var(--sans); }
.synastry-chart .chart-connection-theme { flex: 0 0 100%; min-width: 0; margin-bottom: 6px; color: #eee0c8; font: 23px/1.6 var(--serif); text-wrap: balance; }
.synastry-chart .chart-caption-empty { flex: 1 1 100%; max-width: 35em; color: #a9bdca; font-size: 12px; line-height: 1.85; }
.synastry-chart .chart-caption-a { color: var(--chart-a); }
.synastry-chart .chart-caption-b { color: var(--chart-b); }
.synastry-chart .chart-aspect-name { flex: 0 0 auto; color: #d4c3a5; font-size: 10px; letter-spacing: .04em; }
.synastry-chart .chart-aspect-name::before,
.synastry-chart .chart-aspect-name::after { content: ''; display: inline-block; width: 12px; height: 1px; vertical-align: middle; margin: 0 7px; background: #d4c3a54d; }
.synastry-chart .chart-legend { max-width: 33em; margin: 0 auto 15px; padding: 0 8px; color: #91a9bb; text-align: center; font-size: 10px; line-height: 1.9; text-wrap: balance; }
.synastry-chart .chart-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  padding: 15px 0 0;
  border-top: 1px solid #c7c9bc27;
}
.synastry-chart .chart-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 1 auto;
  min-width: 85px;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid #c2c8c238;
  border-radius: 24px;
  background: transparent;
  color: #bdcbd5;
  font-size: 11px;
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: anywhere;
}
.synastry-chart .chart-control:hover { background: #d8d4c40c; border-color: #c9d5d766; color: #ece4d5; }
.synastry-chart .chart-control[data-chart-action="toggle"] { min-width: 106px; color: #e9d1aa; border-color: #e9d1aa66; background: #e9d1aa0b; }
.synastry-chart[data-chart-state="paused"] .chart-control[data-chart-action="toggle"] { border-color: #a3dbea88; color: #bce5ef; background: #a3dbea0b; }
.synastry-chart .chart-control:focus-visible { outline: 2px solid var(--chart-a); outline-offset: 4px; }
.synastry-chart .chart-control:disabled { opacity: .45; cursor: default; }
.synastry-chart .chart-status {
  min-height: 21px;
  margin: 12px 6px 0;
  color: #b7c7d2;
  text-align: center;
  font-size: 11px;
  line-height: 1.8;
}
.synastry-chart .chart-status::before { content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 7px 2px 0; border-radius: 50%; background: #e8d0a8; box-shadow: 0 0 7px #e8d0a855; }
.synastry-chart[data-chart-state="paused"] .chart-status::before { background: #a3dbea; box-shadow: none; }
.synastry-chart .chart-help { margin: 5px 6px 0; color: #8fa4b4; text-align: center; font-size: 10px; line-height: 1.85; }
.synastry-chart .chart-key,
.synastry-app .chart-stage > .chart-key { margin: 11px 0 0; font-size: 11px; }

@media (max-width: 760px) {
  .synastry-app .chart-stage { max-width: 450px; }
  .synastry-chart .chart-face { overflow: visible; }
  .synastry-chart .chart-link-hit { stroke-width: 30px; }
  .synastry-chart .planet-node text { font-size: 15px; }
  .synastry-chart .chart-endpoint-label { font-size: 11px; }
  .synastry-chart .chart-connection-caption { margin: 5px 0 15px; gap: 4px 9px; font-size: 11px; }
  .synastry-chart .chart-caption-a, .synastry-chart .chart-caption-b { font-size: 12px; }
  .synastry-chart .chart-connection-theme { margin-bottom: 5px; font-size: 22px; }
  .synastry-chart .chart-legend { max-width: 30em; padding-inline: 4px; }
  .synastry-chart .chart-aspect-name { font-size: 9px; }
  .synastry-chart .chart-aspect-name::before, .synastry-chart .chart-aspect-name::after { width: 8px; margin-inline: 5px; }
  .synastry-chart .chart-controls { gap: 7px; padding-top: 13px; }
  .synastry-chart .chart-control { flex: 1 1 0; min-width: 0; padding: 10px 8px; font-size: 11px; }
  .synastry-chart .chart-control[data-chart-action="toggle"] { min-width: 0; }
  .synastry-chart .chart-status { margin-top: 11px; font-size: 11px; }
  .synastry-chart .chart-help { font-size: 10px; }
  .synastry-chart .chart-key, .synastry-app .chart-stage > .chart-key { font-size: 10px; }
}

@media (max-width: 380px) {
  .synastry-chart .chart-controls { gap: 6px; }
  .synastry-chart .chart-control { padding-inline: 6px; font-size: 10px; }
  .synastry-chart .chart-caption-a, .synastry-chart .chart-caption-b { font-size: 12px; }
  .synastry-chart .chart-connection-theme { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .synastry-chart *, .synastry-chart::before, .synastry-chart::after { animation: none !important; transition: none !important; }
  .synastry-chart .chart-link { opacity: 1; stroke-dashoffset: 0; }
  .synastry-chart .planet-node { opacity: 1; }
}