/* The diagram stays aligned to its directions while its decorative rings rotate. */
.orbit-controls {
  position:absolute;
  z-index:2;
  left:50%;
  top:-13px;
  transform:translateX(-50%);
  display:flex;
  padding:3px;
  border:1px solid #779d8740;
  background:#0b1719ed;
  white-space:nowrap;
}
.orbit-controls button {
  min-height:35px;
  padding:7px 18px;
  color:#8da99e;
  font-size:10px;
  letter-spacing:2px;
  transition:background .25s,color .25s;
}
.orbit-controls button:hover {color:#d1e5d6;background:#a6ccb90c}
.orbit-controls button[aria-pressed="true"] {color:#d5e5cc;background:#8fba9e22;box-shadow:inset 0 -1px #9fc4a9}
.orbit-trigram,.trigram-mark {
  transform-origin:0 0;
  transition:transform .85s cubic-bezier(.22,.65,.2,1);
}
.orbit-trigram:focus-visible {outline:none}
.orbit-trigram:focus-visible>circle {stroke:var(--jade);stroke-width:1.5}
.orbit-trigram:hover .trigram-mark,.orbit-trigram:focus-visible .trigram-mark {stroke:#dfebd0}
.orbit-direction {fill:#8ba99a;font-size:10px;letter-spacing:1px;pointer-events:none}
.orbit-sr-only {
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;border:0;
}
@media(max-width:700px) {
  .cosmos {margin-top:28px}
  .orbit-controls {top:-17px}
  .orbit-controls button {min-height:36px;padding:7px 15px;font-size:10px;letter-spacing:1px}
  .cosmos-top {top:7%}
}
@media(prefers-reduced-motion:reduce) {
  .orbit-trigram,.trigram-mark,.orbit-controls button {transition:none}
}