:root {
  font: 11px/1.5 Verdana, Geneva, Helvetica, Arial, sans-serif;
  color: #333;
  background: #fff;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  --lime: #deff00;
  --soft-lime: #eff6c4;
  --line: #dedede;
  --dots: radial-gradient(#dedede .8px, transparent .8px) 0 0 / 28px 28px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
h1, h2 { font-size: 11px; font-weight: 400; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
.wordmark { font: 400 32px/1.2 Arial, Helvetica, sans-serif; color: #111; }
button, input, textarea, select { font: inherit; color: inherit; }
button { min-height: 28px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 0; background: #fff; cursor: pointer; }
button:hover:not(:disabled) { border-color: #888; }
button:active:not(:disabled) { background: #f2f2f2; }
button.primary { color: #111; border-color: var(--lime); background: var(--lime); }
button:disabled { color: #aaa; cursor: default; }
input, textarea, select { width: 100%; min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 0; background: #fff; }
:focus-visible { outline: 1px solid #555; outline-offset: 3px; }
label { display: grid; gap: 4px; min-width: 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.status { color: #a22424; margin: 8px 0; }
.status:empty { display: none; }
mark { background: var(--lime); color: inherit; box-decoration-break: clone; }
mark.soft { background: var(--soft-lime); }
.map { display: grid; place-items: center; min-width: 0; min-height: 0; }
.map svg { display: block; width: 100%; height: 100%; }
.orbit, .group-orbit { stroke: #222; stroke-width: 1.25; fill: none; }
.orbit { stroke: #b4b4b4; }
.nucleus { stroke: #000; fill: none; }
.group-orbit, .planet-face { fill: white; }
.planet { cursor: pointer; outline: none; }
.planet[aria-pressed="true"] .planet-face { fill: var(--lime); }
.planet[aria-pressed="true"] image { filter: url(#planet-lime); }
.planet:focus-visible .planet-face { stroke: #555; stroke-width: 2; }
.planet image { pointer-events: none; }