[data-binary-system] .pointer-events-none {
    pointer-events: none
}
[data-binary-system] .absolute {
    position: absolute
}
[data-binary-system] .relative {
    position: relative
}
[data-binary-system] .inset-0 {
    inset: 0px
}
[data-binary-system] .inset-x-0 {
    left: 0px;
    right: 0px
}
[data-binary-system] .inset-x-3 {
    left: 0.75rem;
    right: 0.75rem
}
[data-binary-system] .-bottom-1 {
    bottom: -0.25rem
}
[data-binary-system] .bottom-20 {
    bottom: 5rem
}
[data-binary-system] .bottom-3 {
    bottom: 0.75rem
}
[data-binary-system] .left-3 {
    left: 0.75rem
}
[data-binary-system] .right-3 {
    right: 0.75rem
}
[data-binary-system] .top-0 {
    top: 0px
}
[data-binary-system] .top-20 {
    top: 5rem
}
[data-binary-system] .top-3 {
    top: 0.75rem
}
[data-binary-system] .top-5 {
    top: 1.25rem
}
[data-binary-system] .top-6 {
    top: 1.5rem
}
[data-binary-system] .mb-1 {
    margin-bottom: 0.25rem
}
[data-binary-system] .mb-2 {
    margin-bottom: 0.5rem
}
[data-binary-system] .mb-4 {
    margin-bottom: 1rem
}
[data-binary-system] .ml-\[140px\] {
    margin-left: 140px
}
[data-binary-system] .ml-auto {
    margin-left: auto
}
[data-binary-system] .mr-16 {
    margin-right: 4rem
}
[data-binary-system] .mt-1 {
    margin-top: 0.25rem
}
[data-binary-system] .block {
    display: block
}
[data-binary-system] .flex {
    display: flex
}
[data-binary-system] .grid {
    display: grid
}
[data-binary-system] .hidden {
    display: none
}
[data-binary-system] .h-12 {
    height: 3rem
}
[data-binary-system] .h-2 {
    height: 0.5rem
}
[data-binary-system] .h-8 {
    height: 2rem
}
[data-binary-system] .h-full {
    height: 100%
}
[data-binary-system] .h-px {
    height: 1px
}
[data-binary-system] .min-h-\[320px\] {
    min-height: 320px
}
[data-binary-system] .w-12 {
    width: 3rem
}
[data-binary-system] .w-8 {
    width: 2rem
}
[data-binary-system] .w-full {
    width: 100%
}
[data-binary-system] .min-w-0 {
    min-width: 0px
}
[data-binary-system] .min-w-\[580px\] {
    min-width: 580px
}
[data-binary-system] .max-w-3xl {
    max-width: 48rem
}
[data-binary-system] .max-w-\[35\%\] {
    max-width: 35%
}
[data-binary-system] .max-w-\[40\%\] {
    max-width: 40%
}
[data-binary-system] .max-w-\[55\%\] {
    max-width: 55%
}
[data-binary-system] .max-w-\[min\(290px\2c 60\%\)\] {
    max-width: min(290px, 60%)
}
[data-binary-system] .-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
[data-binary-system] .touch-none {
    touch-action: none
}
[data-binary-system] .resize {
    resize: both
}
[data-binary-system] .grid-cols-\[128px_minmax\(200px\2c 1fr\)_52px\] {
    grid-template-columns: 128px minmax(200px,1fr) 52px
}
[data-binary-system] .flex-wrap {
    flex-wrap: wrap
}
[data-binary-system] .items-start {
    align-items: flex-start
}
[data-binary-system] .items-center {
    align-items: center
}
[data-binary-system] .justify-between {
    justify-content: space-between
}
[data-binary-system] .gap-1 {
    gap: 0.25rem
}
[data-binary-system] .gap-2 {
    gap: 0.5rem
}
[data-binary-system] .gap-3 {
    gap: 0.75rem
}
[data-binary-system] :is(.space-y-1 > :not([hidden]) ~ :not([hidden])) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse))
}
[data-binary-system] :is(.space-y-2 > :not([hidden]) ~ :not([hidden])) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
}
[data-binary-system] :is(.space-y-3 > :not([hidden]) ~ :not([hidden])) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
}
[data-binary-system] :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}
[data-binary-system] .overflow-auto {
    overflow: auto
}
[data-binary-system] .overflow-hidden {
    overflow: hidden
}
[data-binary-system] .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
[data-binary-system] .whitespace-nowrap {
    white-space: nowrap
}
[data-binary-system] .rounded-\[10px\] {
    border-radius: 10px
}
[data-binary-system] .rounded-\[16px\] {
    border-radius: 16px
}
[data-binary-system] .rounded-\[18px\] {
    border-radius: 18px
}
[data-binary-system] .rounded-full {
    border-radius: 9999px
}
[data-binary-system] .rounded-lg {
    border-radius: 0.5rem
}
[data-binary-system] .rounded-md {
    border-radius: 0.375rem
}
[data-binary-system] .rounded-xl {
    border-radius: 0.75rem
}
[data-binary-system] .border {
    border-width: 1px
}
[data-binary-system] .border-b {
    border-bottom-width: 1px
}
[data-binary-system] .border-l {
    border-left-width: 1px
}
[data-binary-system] .border-t {
    border-top-width: 1px
}
[data-binary-system] .border-slate-700 {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1))
}
[data-binary-system] .border-white\/10 {
    border-color: rgb(255 255 255 / 0.1)
}
[data-binary-system] .border-white\/5 {
    border-color: rgb(255 255 255 / 0.05)
}
[data-binary-system] .bg-slate-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1))
}
[data-binary-system] .bg-slate-950 {
    --tw-bg-opacity: 1;
    background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1))
}
[data-binary-system] .bg-slate-950\/25 {
    background-color: rgb(2 6 23 / 0.25)
}
[data-binary-system] .bg-slate-950\/60 {
    background-color: rgb(2 6 23 / 0.6)
}
[data-binary-system] .bg-white\/\[0\.025\] {
    background-color: rgb(255 255 255 / 0.025)
}
[data-binary-system] .bg-contain {
    background-size: contain
}
[data-binary-system] .bg-center {
    background-position: center
}
[data-binary-system] .bg-no-repeat {
    background-repeat: no-repeat
}
[data-binary-system] .p-3 {
    padding: 0.75rem
}
[data-binary-system] .p-4 {
    padding: 1rem
}
[data-binary-system] .px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem
}
[data-binary-system] .px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem
}
[data-binary-system] .py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem
}
[data-binary-system] .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem
}
[data-binary-system] .py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem
}
[data-binary-system] .pb-3 {
    padding-bottom: 0.75rem
}
[data-binary-system] .text-left {
    text-align: left
}
[data-binary-system] .text-right {
    text-align: right
}
[data-binary-system] .font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}
[data-binary-system] .text-\[10px\] {
    font-size: 10px
}
[data-binary-system] .text-\[11px\] {
    font-size: 11px
}
[data-binary-system] .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem
}
[data-binary-system] .text-xs {
    font-size: 0.75rem;
    line-height: 1rem
}
[data-binary-system] .font-semibold {
    font-weight: 600
}
[data-binary-system] .leading-5 {
    line-height: 1.25rem
}
[data-binary-system] .text-amber-300 {
    --tw-text-opacity: 1;
    color: rgb(252 211 77 / var(--tw-text-opacity, 1))
}
[data-binary-system] .text-slate-100 {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1))
}
[data-binary-system] .text-slate-200 {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1))
}
[data-binary-system] .text-slate-300 {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1))
}
[data-binary-system] .text-slate-400 {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1))
}
[data-binary-system] .text-slate-500 {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1))
}
[data-binary-system] .filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
[data-binary-system] .focus\:outline:focus {
    outline-style: solid
}
[data-binary-system] .focus\:outline-1:focus {
    outline-width: 1px
}
[data-binary-system] .focus\:outline-cyan-200:focus {
    outline-color: #a5f3fc
}
.solar-system-view {
  --solar-line: rgba(171, 199, 219, .16);
  --solar-text: #c7d3df;
  --solar-muted: #8496aa;
  isolation: isolate;
}
.solar-system-toolbar,
.solar-system-inspector-toggle {
  position: absolute;
  top: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  color: var(--solar-text);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .16);
}
.solar-system-toolbar { left: 12px; }
.solar-system-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  transition: background .18s, color .18s;
}
.solar-system-tool:hover,
.solar-system-inspector-toggle:hover { background-color: rgba(160, 195, 215, .1); color: #f0f7fb; }
.solar-system-tool[aria-pressed="true"] { color: var(--accent-strong, #acdbe5); background: rgba(145, 190, 215, .08); }
.solar-system-toolbar__scale {
  padding: 0 10px;
  border-left: 1px solid var(--solar-line);
  font-size: 10px;
  color: var(--solar-muted);
}
.solar-system-toolbar__scale > span { margin-left: 7px; color: #acbfd0; font-size: 9px; }
.solar-system-inspector-toggle {
  right: 12px;
  min-height: 42px;
  padding: 0 12px;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
}
.solar-system-inspector {
  position: absolute;
  z-index: 19;
  top: 63px;
  bottom: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 278px;
  max-width: calc(100% - 24px);
  padding: 14px;
  border-radius: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
}
.solar-system-inspector[hidden] { display: none; }
.solar-system-inspector__heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--solar-line); }
.solar-system-inspector__heading > div { min-width: 0; }
.solar-system-inspector__heading span { display: block; color: var(--solar-muted); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.solar-system-inspector__heading strong { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ecf3f8; font-size: 13px; font-weight: 600; }
.solar-system-inspector__heading button { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--solar-line); border-radius: 9px; color: var(--solar-muted); }
.solar-system-inspector input[type="range"] { min-height: 28px; cursor: pointer; }
.solar-system-view-hint {
  position: absolute;
  bottom: 12px;
  left: 12px;
  max-width: calc(100% - 24px);
  padding: 7px 11px;
  border-radius: 9px;
  font-size: 10px;
  color: #8fa3b8;
  line-height: 1.6;
  pointer-events: none;
}
.solar-system-body-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.solar-system-body-label {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 124px;
  height: 36px;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #c3d2de;
  font-size: 11px;
  text-align: left;
  background: rgba(5, 12, 23, .74);
  pointer-events: auto;
  cursor: pointer;
}
.solar-system-body-label:hover { border-color: rgba(175, 210, 230, .24); color: #f2f8fc; background: rgba(10, 20, 34, .92); }
.solar-system-body-label.is-selected { color: #ecf5fb; border-color: rgba(183, 224, 237, .25); background: rgba(14, 29, 43, .9); }
.solar-system-body-label__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; line-height: 1.2; }
.solar-system-body-label__detail { color: #839bad; font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.solar-system-body-label.is-selected .solar-system-body-label__detail { color: #a8c8d8; }
.solar-system-body-label__leader { position: absolute; display: block; height: 1px; transform-origin: left center; background: rgba(148, 183, 208, .26); pointer-events: none; }
.solar-system-body-label.is-selected .solar-system-body-label__leader { background: rgba(191, 224, 237, .48); }
.solar-system-body-label:disabled { cursor: default; pointer-events: none; }
.solar-system-view button:focus-visible,
.solar-system-view select:focus-visible,
.solar-system-view input:focus-visible { outline: 2px solid var(--accent-strong, #a7d9e7); outline-offset: 3px; }
.solar-linear-view { touch-action: none; background: #050916; }
.solar-linear-track { position: absolute; inset: 0 56px; }
.solar-linear-axis { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; transform-origin: left center; background: linear-gradient(90deg, rgba(230, 202, 157, .38), rgba(149, 190, 207, .38) 30%, rgba(149, 190, 207, .18)); }
.solar-linear-tick { position: absolute; top: calc(50% + 5px); display: flex; align-items: center; gap: 3px; transform: translateX(-50%); pointer-events: none; color: #738a9e; font: 9px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.solar-linear-tick > span { position: absolute; top: -8px; left: 50%; width: 1px; height: 6px; background: rgba(158, 187, 206, .28); }
.solar-linear-tick small { font-size: 7px; color: #60768a; }
.solar-linear-star { position: absolute; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100px; transform: translate(-50%, -42%); cursor: pointer; }
.solar-linear-star__sprite { width: 70px; height: 70px; display: block; background-size: contain; background-position: center; background-repeat: no-repeat; }
.solar-linear-star__name { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dac9aa; font-size: 10px; font-weight: 600; }
.solar-linear-star small { color: #978c7a; font-size: 9px; }
.solar-linear-body { position: absolute; top: 50%; width: 0; height: 0; }
.solar-linear-body__connector { position: absolute; left: 0; width: 1px; background: rgba(154, 186, 208, .2); pointer-events: none; }
.solar-linear-body__anchor { position: absolute; left: -2px; top: -2px; width: 5px; height: 5px; border: 1px solid #b7cbd6; border-radius: 50%; background: #283d4f; pointer-events: none; }
.solar-linear-body__card { position: absolute; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 112px; height: 86px; padding: 5px 7px; transform: translate(-50%, -50%); border: 1px solid rgba(137, 169, 193, .06); border-radius: 12px; background: rgba(6, 14, 25, .62); cursor: ew-resize; color: #bdccd9; transition: border-color .18s, background .18s; }
.solar-linear-body__card:hover { background: rgba(15, 27, 42, .84); border-color: rgba(150, 189, 215, .2); }
.solar-linear-body.is-selected .solar-linear-body__card { border-color: rgba(168, 212, 228, .36); color: #f2f8fc; background: rgba(17, 33, 49, .88); }
.solar-linear-body.is-selected .solar-linear-body__connector { background: rgba(180, 220, 235, .48); }
.solar-linear-body.is-selected .solar-linear-body__anchor { background: #c5e5ee; box-shadow: 0 0 0 3px rgba(170, 215, 230, .1); }
.solar-linear-body.is-dragging .solar-linear-body__card { cursor: grabbing; }
.solar-linear-body__sprite { width: 40px; height: 40px; flex-shrink: 0; background-size: cover; background-position: center; border-radius: 50%; }
.solar-linear-body__name { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.2; font-weight: 600; }
.solar-linear-body__distance { white-space: nowrap; color: #8ba4b7; font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.solar-linear-body__distance small { font-size: 8px; color: #6f899c; }
.solar-linear-body__moon-count { font-family: system-ui, sans-serif; }
.solar-linear-moons { position: absolute; left: 0; z-index: 2; display: flex; flex-direction: column; gap: 3px; width: 112px; transform: translateX(-50%); }
.solar-linear-moons button { display: flex; align-items: center; gap: 5px; padding: 4px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--solar-line); border-radius: 8px; background: rgba(10, 22, 35, .92); color: #a7bacb; font-size: 9px; }
.solar-linear-moons button > span { width: 18px; height: 18px; flex-shrink: 0; background-size: cover; border-radius: 50%; }
@media (max-width: 639px) {
  .solar-system-toolbar, .solar-system-inspector-toggle { top: 9px; }
  .solar-system-toolbar { left: 9px; }
  .solar-system-tool { min-height: 40px; padding: 0 9px; }
  .solar-system-toolbar__scale { display: none; }
  .solar-system-inspector-toggle { right: 9px; min-height: 46px; padding: 0 11px; }
  .solar-system-inspector { top: 65px; right: 9px; bottom: 9px; max-width: calc(100% - 18px); }
  .solar-system-inspector__heading button { width: 40px; height: 40px; }
  .solar-system-inspector button { min-height: 40px; }
  .solar-system-inspector input[type="range"] { min-height: 36px; }
  .solar-system-body-label { width: 112px; }
  .solar-linear-star__sprite { width: 58px; height: 58px; }
  .solar-system-view-hint { left: 9px; bottom: 9px; max-width: calc(100% - 18px); font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .solar-system-view * { transition: none !important; }
}