/* True-3D interactive solar-system home. */
#chooser {
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow: hidden;
  isolation: isolate;
  color: #eaf3ff;
  background:
    radial-gradient(ellipse 80% 65% at 9% 48%, rgba(113, 53, 18, .22), transparent 58%),
    radial-gradient(ellipse 110% 90% at 62% 115%, rgba(12, 46, 87, .34), transparent 65%),
    #02050c;
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  transition: opacity .7s ease, transform .7s cubic-bezier(.3,.8,.2,1);
}
#chooser.leaving { opacity: 0; transform: scale(1.035); pointer-events: none; }
#sys-gl,
#sys-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#sys-gl { z-index: 0; background: radial-gradient(ellipse at 45% 55%, #07152a, #01030a 64%); }
#sys-canvas { z-index: 2; outline: none; touch-action: none; cursor: grab; }

.sys-vignette {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 5, 12, .82) 0, transparent 21%, transparent 74%, rgba(2, 5, 12, .92) 100%);
  box-shadow: inset 0 0 180px rgba(0, 0, 0, .58);
}

.sys-head {
  position: absolute;
  z-index: 4;
  top: 80px;
  left: 42px;
  max-width: 680px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.6s ease, transform 1.8s cubic-bezier(.2,.75,.2,1);
}
.sys-head.cinematic-visible { opacity: 1; transform: translateY(0); }
.sys-head.cinematic-hidden { opacity: 0; transform: translateY(-8px); transition-duration: 2.2s; }
.sys-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #58b7f5;
  font: 600 10px/1.2 Consolas, monospace;
  letter-spacing: 2.8px;
}
.sys-eyebrow i {
  padding: 3px 6px 2px;
  border: 1px solid rgba(77, 188, 251, .42);
  border-radius: 3px;
  color: #81d1ff;
  background: rgba(22, 115, 172, .16);
  font: 650 7px/1 Consolas, monospace;
  letter-spacing: 1px;
  box-shadow: 0 0 14px rgba(52, 169, 235, .12);
}
.sys-head h1 {
  margin: 8px 0 0;
  font: 590 34px/1.12 "Segoe UI Variable Display", "Segoe UI", sans-serif;
  letter-spacing: -.5px;
}
.sys-head p {
  max-width: 560px;
  margin: 9px 0 0;
  color: #86a3c6;
  font-size: 12px;
  line-height: 1.5;
}

.sys-controls {
  position: absolute;
  z-index: 5;
  top: 50%;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 5px;
  transform: translateY(-50%);
  border: 1px solid rgba(91, 145, 207, .2);
  border-radius: 7px;
  background: rgba(4, 12, 25, .66);
  backdrop-filter: blur(12px);
}
.sys-controls button,
.sys-info-close {
  width: 31px;
  height: 31px;
  border: 0;
  border-radius: 5px;
  color: #a9c8e8;
  background: transparent;
  font: 500 17px/1 "Segoe UI", sans-serif;
  cursor: pointer;
}
.sys-controls button:hover,
.sys-controls button:focus-visible,
.sys-info-close:hover,
.sys-info-close:focus-visible { color: #fff; background: rgba(71, 157, 225, .18); outline: 1px solid rgba(91, 186, 249, .45); }
.sys-controls button.active { color: #b9ecff; background: rgba(40, 166, 226, .24); outline: 1px solid rgba(83, 205, 255, .62); box-shadow: 0 0 18px rgba(38, 174, 230, .18); }

.sys-measure-control {
  position: absolute;
  z-index: 8;
  top: 10px;
  right: 24px;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 15px;
  border: 1px solid rgba(81, 177, 232, .42);
  border-radius: 6px;
  color: #b8dbf1;
  background: rgba(5, 20, 37, .82);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  backdrop-filter: blur(12px);
  font: 650 10px/1 "Segoe UI", sans-serif;
  letter-spacing: .25px;
  cursor: pointer;
}
.sys-measure-control span { color: #65cdf7; font-size: 18px; }
.sys-measure-control:hover,
.sys-measure-control:focus-visible,
.sys-measure-control.active { color: #effaff; border-color: rgba(91, 211, 255, .76); background: rgba(27, 119, 166, .32); outline: none; }

.sys-axis {
  position: absolute;
  z-index: 3;
  top: 74px;
  right: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #55799f;
  font: 600 8px/1 Consolas, monospace;
  letter-spacing: 1.5px;
  pointer-events: none;
}
.sys-axis i { width: 52px; height: 1px; background: linear-gradient(90deg, transparent, #4a779f); transform: rotate(-14deg); }

.sys-coords {
  position: absolute;
  z-index: 4;
  left: auto;
  right: 26px;
  bottom: 24px;
  width: 292px;
  pointer-events: auto;
}
.sys-coords-toggle {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 11px;
  border: 1px solid rgba(77, 145, 200, .28);
  border-radius: 6px;
  color: #87bfe0;
  background: rgba(4, 16, 30, .88);
  font: 650 8px/1 Consolas, monospace;
  letter-spacing: .55px;
  cursor: pointer;
}
.sys-coords-toggle:hover,
.sys-coords-toggle:focus-visible { color: #dff5ff; border-color: rgba(86, 192, 239, .58); outline: none; }
.sys-coords-toggle i { color: #5fb9ed; font-style: normal; font-size: 13px; }
.sys-coords-panel {
  margin-top: 6px;
  padding: 13px 14px 12px;
  border: 1px solid rgba(77, 145, 200, .2);
  border-radius: 7px;
  color: #7397b9;
  background: linear-gradient(145deg, rgba(5, 18, 34, .79), rgba(2, 9, 19, .68));
  box-shadow: 0 14px 42px rgba(0, 0, 0, .2);
  backdrop-filter: blur(12px);
}
.sys-coords.collapsed { width: auto; }
.sys-coords.collapsed .sys-coords-panel { display: none; }
.sys-coords.collapsed .sys-coords-toggle i { transform: rotate(90deg); }
.sys-coords-head { display: flex; align-items: center; justify-content: space-between; color: #62b8eb; font: 650 8px/1 Consolas, monospace; letter-spacing: 1.4px; }
.sys-coords-head i { padding: 2px 5px; border: 1px solid rgba(91, 186, 239, .28); border-radius: 3px; color: #8cd8ff; font: 650 7px/1 Consolas, monospace; }
.sys-coords-panel > strong { display: block; margin-top: 7px; color: #d7e8f7; font-size: 12px; font-weight: 580; }
.sys-coords-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; margin-top: 10px; }
.sys-coords-meta span { color: #426785; font: 650 6.5px/1.25 Consolas, monospace; letter-spacing: .7px; }
.sys-coords-meta b { display: block; margin-top: 3px; color: #7798b5; font: 550 7px/1.25 Consolas, monospace; letter-spacing: .2px; }
.sys-coords-live { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(82, 145, 195, .15); }
.sys-coords-body { color: #d8efff; font: 650 9px/1 Consolas, monospace; letter-spacing: 1px; }
.sys-coords-date { float: right; color: #648aa8; font: 600 8px/1 Consolas, monospace; }
.sys-coordinate-values { display: block; margin-top: 7px; color: #7dcaf1; font: 600 8px/1.35 Consolas, monospace; white-space: nowrap; }
.sys-coords-pivot { display: block; margin-top: 5px; color: #4d7898; font: 600 7px/1.2 Consolas, monospace; letter-spacing: .5px; }

.sys-reticle {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(72, 148, 204, .16);
  border-radius: 50%;
  pointer-events: none;
}
.sys-reticle::before,
.sys-reticle::after { content: ""; position: absolute; background: rgba(72, 148, 204, .23); }
.sys-reticle::before { left: 50%; top: -5px; bottom: -5px; width: 1px; }
.sys-reticle::after { top: 50%; left: -5px; right: -5px; height: 1px; }

.sys-help {
  position: absolute;
  z-index: 4;
  left: 26px;
  bottom: 24px;
  width: 248px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #53759b;
  font-size: 9px;
  pointer-events: none;
}
.sys-help b { color: #6da6d3; font: 600 8.5px/1 Consolas, monospace; letter-spacing: 1.5px; }
.sys-help small { color: #4e6f91; font: 500 8px/1.35 "Segoe UI", sans-serif; }
.sys-mouse {
  width: 92px;
  height: 42px;
  display: grid;
  grid-template-columns: 1fr 19px 1fr;
  overflow: hidden;
  border: 1px solid rgba(93, 164, 214, .42);
  border-radius: 22px 22px 15px 15px;
  background: rgba(4, 16, 31, .72);
  box-shadow: inset 0 0 18px rgba(53, 142, 204, .08);
}
.sys-mouse i {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #78a9ce;
  font: 650 7px/1 Consolas, monospace;
  font-style: normal;
}
.sys-mouse-left { border-right: 1px solid rgba(93, 164, 214, .24); }
.sys-mouse-right { border-left: 1px solid rgba(93, 164, 214, .24); }
.sys-mouse-wheel {
  align-self: start;
  height: 25px;
  margin-top: 4px;
  border: 1px solid rgba(79, 190, 241, .46);
  border-radius: 8px;
  color: #9ee1ff !important;
  background: rgba(41, 143, 198, .15);
}
.sys-mouse-labels { width: 92px; display: grid; grid-template-columns: 1fr 24px 1fr; text-align: center; }
.sys-mouse-labels span { color: #5d86aa; font: 650 6.5px/1 Consolas, monospace; letter-spacing: .5px; }

.sys-info {
  --world-accent: #5bc0ff;
  position: absolute;
  z-index: 6;
  top: 186px;
  left: 26px;
  right: auto;
  width: min(335px, calc(100vw - 68px));
  padding: 24px 25px 22px;
  border: 1px solid rgba(115, 166, 222, .22);
  border-top: 2px solid var(--world-accent);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(9, 22, 42, .92), rgba(3, 10, 22, .88));
  box-shadow: 0 22px 70px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .025);
  backdrop-filter: blur(18px);
  transform: translateX(calc(-100% - 52px));
  opacity: 0;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}
.sys-info.open { transform: translateX(0); opacity: 1; }
.sys-info-close { position: absolute; top: 10px; right: 10px; font-size: 21px; }
.sys-info-kicker { padding-right: 28px; color: var(--world-accent); font: 600 8.5px/1.3 Consolas, monospace; letter-spacing: 1.7px; }
.sys-info h2 { margin: 8px 0 0; color: #f2f7ff; font: 590 31px/1.1 "Segoe UI Variable Display", "Segoe UI", sans-serif; }
.sys-info-tagline { margin: 4px 0 0; color: #8bb7dd; font-size: 12px; }
.sys-info-copy { margin: 17px 0 18px; color: #a8bad0; font-size: 11.5px; line-height: 1.62; }
.sys-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid rgba(100, 151, 207, .16); border-radius: 5px; background: rgba(85, 134, 185, .13); }
.sys-facts div { min-height: 49px; padding: 9px 10px; background: rgba(4, 12, 25, .78); }
.sys-facts span { display: block; color: #567b9f; font: 600 8px/1.2 Consolas, monospace; letter-spacing: .8px; text-transform: uppercase; }
.sys-facts b { display: block; margin-top: 5px; color: #d6e5f6; font-size: 11px; font-weight: 560; }
.sys-info-action { margin-top: 18px; }
.sys-explore,
.sys-fly-to {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--world-accent) 70%, transparent);
  border-radius: 5px;
  color: #ecf8ff;
  background: color-mix(in srgb, var(--world-accent) 18%, rgba(7, 20, 37, .94));
  font: 600 12px "Segoe UI", sans-serif;
  cursor: pointer;
}
.sys-fly-to { margin-bottom: 8px; color: #dff6ff; background: rgba(33, 113, 163, .2); }
.sys-explore:hover,
.sys-fly-to:hover { background: color-mix(in srgb, var(--world-accent) 29%, rgba(7, 20, 37, .94)); }
.sys-explore i,
.sys-fly-to i { font-size: 17px; font-style: normal; }
.sys-explore.locked { border-color: rgba(111, 143, 179, .18); color: #71859c; background: rgba(40, 59, 79, .15); cursor: default; }
.sys-info-action small { display: block; margin-top: 8px; color: #526f8e; font-size: 9.5px; line-height: 1.35; }

.sys-timeline {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 22px;
  width: min(820px, calc(100vw - 70px));
  padding: 9px 13px 8px;
  transform: translateX(-50%);
  border: 1px solid rgba(83, 148, 204, .2);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(5, 16, 31, .86), rgba(2, 9, 20, .82));
  box-shadow: 0 13px 40px rgba(0, 0, 0, .28);
  backdrop-filter: blur(14px);
}
.sys-time-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sys-time-head [data-action="pause"] {
  width: 25px;
  height: 22px;
  flex: 0 0 auto;
  border: 1px solid rgba(83, 156, 211, .32);
  border-radius: 4px;
  color: #8ed5f4;
  background: rgba(9, 34, 57, .82);
  font-size: 11px;
  cursor: pointer;
}
.sys-time-head [data-action="pause"]:hover,
.sys-time-head [data-action="pause"]:focus-visible { color: #fff; border-color: rgba(83, 199, 244, .65); outline: none; }
.sys-time-title { color: #5fb9ed; font: 650 8px/1 Consolas, monospace; letter-spacing: 1.4px; }
.sys-time-date { color: #e5f4ff; font: 650 12px/1 Consolas, monospace; letter-spacing: .5px; }
.sys-time-source { color: #4e7398; font: 600 7px/1 Consolas, monospace; letter-spacing: 1px; }
.sys-time-now,
.sys-time-speed {
  height: 22px;
  border: 1px solid rgba(83, 156, 211, .24);
  border-radius: 4px;
  color: #8cbce0;
  background: rgba(9, 27, 47, .72);
  font: 650 8px/1 Consolas, monospace;
  letter-spacing: .5px;
}
.sys-time-now { margin-left: auto; padding: 0 9px; cursor: pointer; }
.sys-time-speed { padding: 0 7px; outline: none; }
.sys-time-now:hover { color: #e9f7ff; border-color: rgba(83, 190, 244, .55); }
.sys-time-range { width: 100%; height: 13px; margin: 5px 0 0; accent-color: #43b8f4; cursor: ew-resize; }
.sys-measure-status {
  min-height: 11px;
  margin-top: 2px;
  overflow: hidden;
  color: #466987;
  font: 600 7.5px/1.25 Consolas, monospace;
  letter-spacing: .75px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sys-measure-status.active { color: #73c9ee; }
.sys-measure-status.complete { color: #a8e9ff; }

.sys-worlds {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 10px;
  bottom: auto;
  width: min(1320px, calc(100vw - 430px));
  display: grid;
  grid-template-columns: repeat(10, minmax(76px, 1fr));
  transform: translateX(-50%);
  border: 1px solid rgba(85, 135, 190, .18);
  border-radius: 7px;
  overflow: hidden;
  background: rgba(3, 10, 22, .76);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .28);
  backdrop-filter: blur(14px);
}
.sys-world-chip {
  position: relative;
  min-width: 0;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  padding: 6px 8px 6px 22px;
  border: 0;
  border-right: 1px solid rgba(85, 135, 190, .12);
  color: #93abc5;
  background: transparent;
  font: 500 10.5px "Segoe UI", sans-serif;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.sys-world-chip:last-child { border-right: 0; }
.sys-world-chip:hover, .sys-world-chip:focus-visible { color: #e8f4ff; background: rgba(65, 139, 202, .13); outline: none; }
.sys-world-chip.hot { color: #d9efff; background: rgba(54, 123, 185, .1); }
.sys-world-chip.active { color: #f4f9ff; background: linear-gradient(180deg, rgba(49, 144, 215, .22), rgba(23, 75, 121, .12)); box-shadow: inset 0 2px #4eb7fa; }
.sys-world-chip i { color: #3da7ed; font: 600 7px/1 Consolas, monospace; letter-spacing: .7px; }
.sys-world-index { position: absolute; left: 7px; top: 8px; color: #3c5b7b; font: 7px/1 Consolas, monospace; }
.sys-world-chip.active .sys-world-index { color: #65baf0; }
.sys-scale { position: absolute; z-index: 4; left: 0; right: 0; bottom: 5px; color: #385675; text-align: center; font: 600 7px/1 Consolas, monospace; letter-spacing: 1.35px; pointer-events: none; }

.sys-error {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: min(430px, calc(100vw - 60px));
  padding: 18px 20px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(231, 157, 70, .45);
  border-radius: 7px;
  background: rgba(21, 15, 12, .9);
  box-shadow: 0 18px 65px rgba(0, 0, 0, .55);
}
.sys-error b { display: block; color: #ffd39a; font-size: 13px; }
.sys-error span { display: block; margin-top: 7px; color: #bca98e; font-size: 11px; line-height: 1.5; }

@media (max-width: 1050px) {
  .sys-head h1 { font-size: 29px; }
  .sys-head p { max-width: 470px; }
  .sys-worlds { left: 12px; width: calc(100vw - 190px); overflow-x: auto; grid-template-columns: repeat(10, 92px); justify-content: start; transform: none; }
  .sys-info { top: 160px; }
  .sys-time-source { display: none; }
  .sys-coords { width: 255px; }
  .sys-coords-meta { grid-template-columns: 1fr; }
  .sys-coords-meta span:nth-child(3), .sys-coords-meta span:nth-child(4) { display: none; }
  .sys-controls { right: 10px; }
}
@media (max-width: 1300px) {
  .sys-timeline { left: auto; right: 20px; width: min(760px, calc(100vw - 330px)); transform: none; }
}
@media (max-height: 760px) {
  .sys-head { top: 68px; }
  .sys-controls { top: 48%; }
  .sys-info { top: 126px; transform: translateX(calc(-100% - 52px)) scale(.9); transform-origin: top left; }
  .sys-info.open { transform: translateX(0) scale(.9); }
  .sys-help { bottom: 18px; transform: scale(.86); transform-origin: bottom left; }
  .sys-coords { bottom: 18px; transform: scale(.82); transform-origin: bottom right; }
  .sys-worlds { top: 8px; }
  .sys-timeline { bottom: 17px; padding-top: 7px; padding-bottom: 6px; }
  .sys-scale { bottom: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  #chooser, .sys-info, .sys-head { transition-duration: .15s; }
}