.ss,
.ss * { box-sizing: border-box; }

.ss {
  --ss-bg: #07111b;
  --ss-bg-2: #0b1824;
  --ss-panel: rgba(10, 25, 37, .92);
  --ss-panel-2: rgba(15, 35, 49, .82);
  --ss-line: rgba(187, 160, 91, .28);
  --ss-line-strong: rgba(213, 180, 95, .55);
  --ss-brass: #d5b45f;
  --ss-brass-soft: #f0d890;
  --ss-text: #e8eef1;
  --ss-muted: #9fb0ba;
  --ss-cyan: #88cbd1;
  --ss-green: #7fae8b;
  --ss-alert: #e0a15c;
  width: min(1500px, calc(100vw - 2rem));
  margin: 0 auto 2rem;
  color: var(--ss-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ss button,
.ss select,
.ss input { font: inherit; }

.ss__header,
.ss__toolbar,
.ss__workspace,
.ss__timeline,
.ss__metrics,
.ss__footer {
  border: 1px solid var(--ss-line);
  background: linear-gradient(180deg, rgba(14, 31, 45, .96), rgba(7, 17, 27, .96));
  box-shadow: 0 18px 46px rgba(0, 0, 0, .24);
}

.ss__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem 1.25rem;
  border-radius: 18px 18px 0 0;
  border-bottom: 0;
}

.ss__eyebrow,
.ss__panel-kicker {
  margin: 0 0 .25rem;
  color: var(--ss-brass);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ss__header h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.55rem, 3vw, 2.55rem);
  line-height: 1.03;
}

.ss__intro {
  max-width: 76ch;
  margin: .55rem 0 0;
  color: var(--ss-muted);
  line-height: 1.55;
}

.ss__header-actions,
.ss__panel-actions,
.ss__timeline-presets {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.ss-btn,
.ss-segmented button,
.ss__timeline-presets button {
  border: 1px solid var(--ss-line-strong);
  background: rgba(21, 42, 56, .88);
  color: var(--ss-text);
  border-radius: 10px;
  padding: .6rem .8rem;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.ss-btn:hover,
.ss-segmented button:hover,
.ss__timeline-presets button:hover {
  border-color: var(--ss-brass);
  background: rgba(39, 56, 67, .96);
}

.ss-btn:active,
.ss-segmented button:active,
.ss__timeline-presets button:active { transform: translateY(1px); }

.ss button:focus-visible,
.ss select:focus-visible,
.ss input:focus-visible,
.ss [tabindex="0"]:focus-visible {
  outline: 2px solid var(--ss-brass-soft);
  outline-offset: 3px;
}

.ss__toolbar {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  padding: .72rem 1rem;
  border-bottom: 0;
}

.ss-segmented {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--ss-line-strong);
  border-radius: 11px;
}

.ss-segmented button {
  border: 0;
  border-radius: 0;
  background: rgba(6, 17, 26, .72);
}

.ss-segmented button + button { border-left: 1px solid var(--ss-line); }
.ss-segmented button.is-active {
  background: rgba(213, 180, 95, .18);
  color: var(--ss-brass-soft);
}

.ss-btn--play { min-width: 7.4rem; }
.ss-field,
.ss-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--ss-muted);
  font-size: .86rem;
}

.ss-field { margin-left: auto; }
.ss-field select {
  border: 1px solid var(--ss-line);
  border-radius: 8px;
  background: #0b1b28;
  color: var(--ss-text);
  padding: .42rem .55rem;
}

.ss-toggle input { accent-color: var(--ss-brass); }

.ss__workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  min-height: 610px;
  border-bottom: 0;
}

.ss__viewport {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 18%, rgba(111, 155, 173, .12), transparent 24%),
    radial-gradient(circle at 78% 68%, rgba(171, 124, 70, .10), transparent 26%),
    radial-gradient(circle at 50% 50%, rgba(17, 39, 55, .4), transparent 55%),
    radial-gradient(circle, rgba(255,255,255,.42) 0 1px, transparent 1.2px) 0 0 / 47px 47px,
    radial-gradient(circle, rgba(255,255,255,.22) 0 1px, transparent 1.2px) 20px 11px / 79px 79px,
    #030911;
  border-right: 1px solid var(--ss-line);
}

.ss__svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 610px;
  user-select: none;
  -webkit-user-select: none;
}

.ss-orbits ellipse,
.ss-orbits circle {
  fill: none;
  stroke: rgba(161, 187, 197, .35);
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
}

.ss-belt__halo,
.ss-belt__dense {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.ss-belt__halo {
  stroke: rgba(181, 143, 93, .17);
  stroke-width: 17.1;
  cursor: pointer;
}

.ss-belt__dense {
  stroke: rgba(205, 161, 94, .24);
  stroke-width: 9.975;
  stroke-dasharray: 2 6;
  pointer-events: none;
}

.ss-belt__halo:hover,
.ss-belt__halo:focus-visible { stroke: rgba(220, 177, 105, .3); }

.ss-body { cursor: pointer; }
.ss-body__target {
  fill: transparent;
  stroke: transparent;
}

.ss-body__disk { filter: url(#ss-soft-glow); }
.ss-body--nonsun .ss-body__disk { filter: url(#ss-glow); }
.ss-body__corona {
  fill: rgba(237, 195, 91, .16);
  stroke: rgba(244, 212, 128, .24);
  stroke-width: 1;
  filter: url(#ss-glow);
}

.ss-body__atmosphere {
  fill: rgba(125, 148, 151, .16);
  stroke: rgba(168, 192, 195, .22);
  stroke-width: 5;
  filter: url(#ss-soft-glow);
}

.ss-body:hover .ss-body__target,
.ss-body:focus-visible .ss-body__target,
.ss-body.is-selected .ss-body__target {
  stroke: var(--ss-brass-soft);
  stroke-width: 1.4;
  fill: rgba(213, 180, 95, .07);
}

.ss-label {
  fill: #dfe8eb;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .02em;
  paint-order: stroke;
  stroke: rgba(2, 8, 13, .88);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

.ss.is-labels-hidden .ss-label { display: none; }
.ss.is-orbits-hidden .ss-orbits { display: none; }
.ss.is-belt-hidden .ss-belt { display: none; }

.ss__readout,
.ss__scale-note {
  position: absolute;
  left: 1rem;
  z-index: 4;
  border: 1px solid rgba(213, 180, 95, .22);
  background: rgba(3, 10, 16, .78);
  backdrop-filter: blur(8px);
}

.ss__readout {
  top: 1rem;
  display: grid;
  gap: .15rem;
  min-width: 215px;
  padding: .65rem .75rem;
  border-radius: 10px;
}

.ss__readout span { color: var(--ss-muted); font-size: .78rem; }
.ss__readout strong { color: var(--ss-brass-soft); font-size: .9rem; }

.ss__scale-note {
  bottom: 1rem;
  max-width: min(440px, calc(100% - 2rem));
  padding: .55rem .7rem;
  border-radius: 9px;
  color: #afbec6;
  font-size: .75rem;
}

.ss__panel {
  min-width: 0;
  padding: 1.1rem 1rem 1.25rem;
  background: linear-gradient(180deg, rgba(11, 27, 40, .98), rgba(6, 17, 27, .98));
  overflow: auto;
}

.ss__panel h3 {
  margin: .15rem 0 .6rem;
  color: #fff;
  font-size: 1.35rem;
}

.ss__panel p { color: var(--ss-muted); line-height: 1.55; }
.ss__panel dl { margin: .85rem 0 0; }
.ss__panel dl > div {
  display: grid;
  grid-template-columns: minmax(92px, .8fr) minmax(0, 1.2fr);
  gap: .65rem;
  padding: .58rem 0;
  border-top: 1px solid rgba(213, 180, 95, .14);
}

.ss__panel dt { color: #9fb0ba; font-size: .78rem; }
.ss__panel dd { margin: 0; color: #eef3f4; font-size: .84rem; text-align: right; }

.ss__panel-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--ss-brass);
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ss__panel-topline button {
  border: 0;
  background: transparent;
  color: var(--ss-muted);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

.ss__panel-summary { margin: 0; }
.ss__panel-note {
  margin: 1rem 0 0;
  padding: .7rem .75rem;
  border-left: 2px solid rgba(213, 180, 95, .6);
  background: rgba(213, 180, 95, .07);
  font-size: .78rem;
}

.ss__panel-actions { margin-top: .85rem; }

.ss__timeline {
  padding: .9rem 1rem .8rem;
  border-bottom: 0;
}

.ss__timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .6rem;
}

.ss__timeline-head > div:first-child {
  display: flex;
  align-items: baseline;
  gap: .65rem;
}

.ss__timeline-head span { color: var(--ss-muted); font-size: .78rem; }
.ss__timeline-head strong { color: var(--ss-brass-soft); }
.ss__timeline-presets button { padding: .36rem .55rem; font-size: .74rem; }

.ss__range {
  width: 100%;
  accent-color: var(--ss-brass);
  cursor: ew-resize;
}

.ss__timeline-scale {
  display: flex;
  justify-content: space-between;
  margin-top: .2rem;
  color: #778c98;
  font-size: .68rem;
}

.ss__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 0;
}

.ss__metrics article {
  min-width: 0;
  padding: .9rem 1rem;
}

.ss__metrics article + article { border-left: 1px solid var(--ss-line); }
.ss__metrics span,
.ss__metrics small { display: block; color: var(--ss-muted); }
.ss__metrics span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.ss__metrics strong { display: block; margin: .28rem 0 .1rem; color: #fff; font-size: 1.05rem; }
.ss__metrics small { font-size: .72rem; }

.ss__footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1rem;
  border-radius: 0 0 18px 18px;
  color: #8ea0aa;
  font-size: .72rem;
}

.ss__footer strong { color: #c8d2d6; }

.ss:fullscreen {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: .6rem;
  overflow: auto;
  background: #02070c;
}

.ss:fullscreen .ss__workspace { min-height: 65vh; }
.ss:fullscreen .ss__svg { min-height: 65vh; }

@media (max-width: 980px) {
  .ss { width: min(100%, calc(100vw - 1rem)); }
  .ss__header { align-items: flex-start; }
  .ss__workspace { grid-template-columns: 1fr; }
  .ss__viewport { border-right: 0; border-bottom: 1px solid var(--ss-line); }
  .ss__panel { max-height: none; }
  .ss__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss__metrics article:nth-child(3) { border-left: 0; border-top: 1px solid var(--ss-line); }
  .ss__metrics article:nth-child(4) { border-top: 1px solid var(--ss-line); }
}

@media (max-width: 720px) {
  .ss__header,
  .ss__timeline-head,
  .ss__footer { flex-direction: column; align-items: stretch; }
  .ss__header-actions { width: 100%; }
  .ss__header-actions .ss-btn { flex: 1; }
  .ss__toolbar { align-items: stretch; }
  .ss-segmented { width: 100%; }
  .ss-segmented button { flex: 1; }
  .ss-field { margin-left: 0; }
  .ss__viewport,
  .ss__svg { min-height: 480px; }
  .ss__timeline-presets { width: 100%; }
  .ss__timeline-presets button { flex: 1 1 30%; }
  .ss__timeline-scale span:nth-child(even) { display: none; }
}

@media (max-width: 520px) {
  .ss__metrics { grid-template-columns: 1fr; }
  .ss__metrics article + article { border-left: 0; border-top: 1px solid var(--ss-line); }
  .ss__viewport,
  .ss__svg { min-height: 430px; }
  .ss__readout { right: 1rem; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ss *, .ss *::before, .ss *::after { scroll-behavior: auto !important; transition: none !important; }
}