.solar-map {
  position: relative;
  isolation: isolate;
  min-width: 0;
  background: #05070b;
  color: #f4f7f8;
  overflow: hidden;
  --map-line: #4c6575;
}

.solar-map__viewport {
  position: relative;
  height: 500px;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  outline-offset: -5px;
}

.solar-map__viewport:focus-visible {
  outline: 2px solid #a9d7ea;
}

.solar-map.is-dragging .solar-map__viewport,
.solar-map.is-dragging .solar-map__node { cursor: grabbing; }

.solar-map__world {
  position: absolute;
  width: 1800px;
  height: 1000px;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  user-select: none;
  --map-label-scale: 2;
}

.solar-map[data-map-motion="focusing"] .solar-map__world,
.solar-map[data-map-motion="coasting"] .solar-map__world,
.solar-map.is-dragging .solar-map__world { will-change: transform; }

.solar-map__drawing { display: block; width: 100%; height: 100%; pointer-events: none; }
.solar-map__webgl { position:absolute; inset:0; pointer-events:none; z-index:1; }
.solar-map.has-webgl .solar-map__sun,
.solar-map.has-webgl .solar-map__earth,
.solar-map.has-webgl .solar-map__saturn { visibility:hidden; }
.solar-map.has-webgl .solar-map__node:not(.solar-map__node--belt) .solar-map__planet svg { visibility:hidden; }
.solar-map__node,.solar-map__context-label { z-index:2; }
.solar-map__stars { fill: #bed8e4; }
.solar-map__stars circle { r:calc(1px * var(--map-label-scale)); }
.solar-map__orbits { fill: none; stroke: var(--map-line); stroke-width:calc(1.3px * var(--map-label-scale)); opacity: .55; }
.solar-map__story-links { fill: none; }
.solar-map__story-links path {
  stroke: #7198ad;
  stroke-width: calc(1px * var(--map-label-scale));
  stroke-dasharray: calc(5px * var(--map-label-scale)) calc(6px * var(--map-label-scale));
  stroke-linecap: round;
  opacity: .52;
}
.solar-map__story-links path.is-active { stroke: #b5deef; opacity: .9; }
.solar-map__sun circle:first-child { fill: #dcb96e; }
.solar-map__sun circle:last-child { fill: none; stroke: #dcb96e; stroke-width: 1.5; opacity: .5; }
.solar-map__earth circle { fill: #648eac; stroke: #b4cad4; stroke-width: 2; }
.solar-map__earth path { fill: none; stroke: #bed3c7; stroke-width: 7; }
.solar-map__saturn ellipse { fill: none; stroke: #9ba9ad; stroke-width: 11; }
.solar-map__saturn circle { fill: #ad9b77; stroke: #d3c6a7; stroke-width: 2; }
.solar-map__saturn path { fill: none; stroke: #c3b693; stroke-width: 4; }
.solar-map__moon-orbit { fill: none; stroke: #8aabb9; stroke-width:calc(1.3px * var(--map-label-scale)); stroke-dasharray:calc(4px * var(--map-label-scale)) calc(8px * var(--map-label-scale)); opacity: .65; }

.solar-map__node {
  position: absolute;
  display: block;
  width: max(var(--planet-size), calc(44px * var(--map-label-scale)));
  height: max(var(--planet-size), calc(44px * var(--map-label-scale)));
  transform: translate(-50%, -50%);
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  border-radius: 50%;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  --planet-fill: #8399a4;
  --planet-line: #c2d1d9;
}

.solar-map__node--mercury { --planet-fill: #8d989b; --planet-line: #c6cdd0; }
.solar-map__node--venus { --planet-fill: #bca780; --planet-line: #e3d1a4; }
.solar-map__node--mars { --planet-fill: #ac6650; --planet-line: #deac91; }
.solar-map__node--titan { --planet-fill: #bd9260; --planet-line: #dec09a; }
.solar-map__node--jupiter { --planet-fill: #b99d81; --planet-line: #e0c9a9; }
.solar-map__node--moon { --planet-fill: #8d99a5; --planet-line: #c2cdd5; }
.solar-map__planet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--planet-size);
  height: var(--planet-size);
  transform: translate(-50%, -50%);
}

.solar-map__planet svg { width: 100%; height: 100%; display: block; overflow: visible; }
.solar-map__planet circle { fill: var(--planet-fill); stroke: var(--planet-line); stroke-width: 2; }
.solar-map__planet path { fill: none; stroke: var(--planet-line); stroke-width: 3; opacity: .65; }
.solar-map__node--belt .solar-map__planet circle { fill: none; stroke-dasharray: 5 9; stroke-width: 5; }
.solar-map__node--belt .solar-map__planet circle:last-child { stroke-dasharray: 3 14; stroke-width: 4; }

.solar-map__label {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--planet-size) / 2 + 9px * var(--map-label-scale));
  display: grid;
  gap: 3px;
  min-width: max-content;
  transform: translateX(-50%) scale(var(--map-label-scale));
  transform-origin: top center;
  text-align: center;
  color: #dbe7ed;
  padding: 4px 7px;
  background: #05070be8;
  border-radius: 6px;
  pointer-events: none;
}

.solar-map__label strong { font-weight: 600; font-size: 14px; line-height: 1.2; }
.solar-map__label small { font-size: 11px; line-height: 1.3; color: #b0c4d0; }
.solar-map__node--label-above .solar-map__label {
  top: auto;
  bottom: calc(50% + var(--planet-size) / 2 + 9px * var(--map-label-scale));
  transform-origin: bottom center;
}

.solar-map__node--label-right .solar-map__label {
  top: 50%;
  left: calc(50% + var(--planet-size) / 2 + 6px * var(--map-label-scale));
  transform: translateY(-50%) scale(var(--map-label-scale));
  transform-origin: left center;
  text-align: left;
}

.solar-map__node.is-selected .solar-map__label { color: #bce3f1; }
.solar-map__node:hover .solar-map__label,
.solar-map__node:focus-visible .solar-map__label { color: #f4f7f8; background: #0e1822; }
.solar-map__node.is-selected .solar-map__planet::after,
.solar-map__node:hover .solar-map__planet::after,
.solar-map__node:focus-visible .solar-map__planet::after {
  content: '';
  position: absolute;
  inset: calc(-8px * var(--map-label-scale));
  border: calc(1.5px * var(--map-label-scale)) solid #a9d7ea;
  border-radius: 50%;
}

.solar-map__node:focus-visible { outline: none; }
.solar-map__node:focus-visible .solar-map__label { outline: 2px solid #a9d7ea; outline-offset: 2px; }

.solar-map__context-label {
  position: absolute;
  color: #b0c4d0;
  font-size: 12px;
  line-height: 1.3;
  transform: translate(-50%, calc(-100% - 38px * var(--map-label-scale))) scale(var(--map-label-scale));
  transform-origin: bottom center;
  pointer-events: none;
}

.solar-map__context-label--sun { color: #dfc490; transform: translate(-50%, calc(-100% - 85px)) scale(var(--map-label-scale)); }
.solar-map__context-label--saturn { transform: translate(-50%, calc(-100% - 65px)) scale(var(--map-label-scale)); }

.solar-map__bottom {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  pointer-events: none;
}

.solar-map__hint { display: grid; gap: 5px; margin: 0; color: #d3e3eb; font-size: 13px; line-height: 1.3; }
.solar-map__hint small { color: #a9c1ce; font-size: 11px; }
.solar-map__controls { display: flex; gap: 4px; padding: 4px; background: #0e151de8; border-radius: 12px; pointer-events: auto; }
.solar-map__controls button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #edf7fb;
  cursor: pointer;
  touch-action: manipulation;
}

.solar-map__controls button:hover { background: #24303b; }
.solar-map__controls button:focus-visible { outline: 2px solid #a9d7ea; outline-offset: -2px; }
.solar-map__controls button:disabled { color: #697f8b; cursor: default; }
.solar-map__controls svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.solar-map__status { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

@media (max-width: 700px) {
  .solar-map__viewport { height: 420px; }
  .solar-map__bottom { left: 16px; right: 16px; bottom: 16px; }
  .solar-map__hint { font-size: 12px; }
  .solar-map__hint small { font-size: 10px; }
  .solar-map__controls { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .solar-map__world { scroll-behavior: auto; will-change: auto; }
}