.compact-hypersphere {
  margin: 32px 0;
  padding: 0;
  border-block: 1px solid var(--line-soft);
}
.compact-hypersphere__art {
  position: relative;
  aspect-ratio: 1440 / 1024;
  max-width: 620px;
  margin: 0 auto;
}
.compact-hypersphere__art img {
  display: block;
  width: 100%;
  height: auto;
}
.compact-hypersphere__art .compact-hypersphere__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.compact-hypersphere [hidden] { display: none; }
.compact-hypersphere.is-selected .compact-hypersphere__base { opacity: .22; }
.compact-hypersphere__hotspots button {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border: 1px solid var(--green);
  border-radius: 50%;
  background: var(--paper, #faf8f3);
  color: var(--ink);
  font: 600 15px/1 var(--body, sans-serif);
  cursor: pointer;
}
.compact-hypersphere__hotspots button:hover,
.compact-hypersphere__hotspots button[aria-expanded="true"] {
  background: var(--green);
  color: white;
}
.compact-hypersphere button:focus-visible,
.compact-hypersphere summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}
.compact-hypersphere figcaption {
  margin: 0 0 20px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}
.compact-hypersphere details { border-top: 1px solid var(--line-soft); }
.compact-hypersphere summary {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 28px 16px 0;
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.45;
}
.compact-hypersphere summary::-webkit-details-marker { display: none; }
.compact-hypersphere summary::after {
  content: '+';
  position: absolute;
  right: 2px;
  color: var(--green);
  font-size: 20px;
}
.compact-hypersphere details[open] summary::after { content: '−'; }
.compact-hypersphere details[open] summary { color: var(--green); }
.compact-hypersphere__number { color: var(--green); font-size: 13px; }
.compact-hypersphere__description {
  padding: 0 22px 20px;
  font-size: 16px;
  line-height: 1.6;
}
.prose .compact-hypersphere__description p { margin-bottom: 12px; }
@media (max-width: 600px) {
  .compact-hypersphere__hotspots button { width: 32px; height: 32px; }
  .compact-hypersphere__description { padding-inline: 0; }
}