html:has(.stellar-map) {
  scrollbar-gutter:auto;
  background:#071316}
.stellar-map {
  --sm-ink:#bde2df;
  --sm-muted:#729995;
  --sm-line:#254442;
  --sm-pink:#ff7599;
  background:#081619;
  color:var(--sm-ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.sm-screen {
  width:100%;
  height:72vh;
  min-height:470px;
  max-height:900px;
  position:relative;
  overflow:hidden;
  background:#030e12}
.sm-screen canvas {
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
  cursor:grab;
  outline-offset:-4px}
.sm-screen canvas:active {
  cursor:grabbing}
.sm-screen:after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,#00101424 4px);
  box-shadow:inset 0 0 100px #0008}
.sm-telemetry,.sm-sector,.sm-bottom {
  position:absolute;
  pointer-events:none;
  z-index:1;
  font-size:10px;
  letter-spacing:1.5px;
  line-height:1.9}
.sm-telemetry {
  left:30px;
  top:25px;
  display:grid}
.sm-live {
  color:#8bebcc;
  margin-bottom:9px}
.sm-sector {
  right:30px;
  top:25px;
  text-align:right}
.sm-sector span {
  display:block;
  color:#729995}
.sm-sector strong {
  font-size:13px;
  font-weight:400}
.sm-bottom {
  bottom:24px;
  left:30px;
  right:30px;
  display:flex;
  justify-content:space-between;
  color:#83b9b7}
.sm-reticle {
  position:absolute;
  inset:16px;
  pointer-events:none;
  border:1px solid #7cd4d317;
  clip-path:polygon(0 0,30px 0,30px 1px,calc(100% - 30px) 1px,calc(100% - 30px) 0,100% 0,100% 30px,calc(100% - 1px) 30px,calc(100% - 1px) calc(100% - 30px),100% calc(100% - 30px),100% 100%,calc(100% - 30px) 100%,calc(100% - 30px) calc(100% - 1px),30px calc(100% - 1px),30px 100%,0 100%,0 calc(100% - 30px),1px calc(100% - 30px),1px 30px,0 30px)}
.sm-console {
  max-width:1500px;
  margin:auto;
  padding:32px 40px 25px}
.sm-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:30px}
.sm-kicker {
  color:var(--sm-muted);
  font-size:10px;
  letter-spacing:2px;
  margin:0 0 10px}
.sm-heading h1 {
  font-size:36px;
  line-height:1.2;
  letter-spacing:-2px;
  color:#def8ed;
  font-weight:400;
  margin:0 0 8px}
.sm-heading h1 span {
  color:var(--sm-pink);
  margin-left:18px}
.sm-heading p:last-child {
  color:var(--sm-muted);
  font-size:12px;
  margin:0}
.stellar-map button,.stellar-map select {
  font:inherit;
  font-size:11px;
  border:1px solid var(--sm-line);
  border-radius:0;
  background:#0c2022;
  color:var(--sm-ink);
  padding:12px;
  cursor:pointer}
.stellar-map button:hover,.stellar-map button[aria-pressed=true] {
  color:#e8fff6;
  border-color:#8ed5c5;
  background:#133331}
.stellar-map button:focus-visible,.stellar-map select:focus-visible,.stellar-map input:focus-visible {
  outline:2px solid var(--sm-pink);
  outline-offset:3px}
.sm-view-buttons {
  display:flex;
  gap:8px}
.sm-dashboard {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  border:1px solid var(--sm-line)}
.sm-navigation,.sm-inspector {
  padding:23px 26px}
.sm-navigation {
  border-right:1px solid var(--sm-line)}
.sm-panel-label {
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:10px;
  letter-spacing:1.5px;
  color:var(--sm-muted);
  margin-bottom:22px}
.sm-panel-label span {
  color:#a8cfbb}
.sm-panel-label .sm-pink {
  color:var(--sm-pink)}
.sm-presets {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px}
.sm-presets button {
  padding:12px 5px;
  font-size:10px}
.sm-zoom {
  display:flex;
  align-items:center;
  gap:14px;
  margin:20px 0 9px}
.sm-zoom label {
  flex:1}
.sm-zoom input {
  display:block;
  width:100%;
  accent-color:#91ddc6;
  cursor:pointer}
.sm-zoom button {
  font-size:18px;
  padding:0;
  width:32px;
  height:32px}
.sm-scale-ends {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:1px;
  color:var(--sm-muted)}
.sm-object-label {
  display:block;
  font-size:9px;
  letter-spacing:1.5px;
  color:var(--sm-muted);
  margin:24px 0 8px}
.stellar-map select {
  width:100%}
.sm-inspector h2 {
  font-size:26px;
  font-weight:400;
  letter-spacing:-1px;
  margin:0 0 5px;
  color:#ecf7df}
.sm-kind {
  font-size:10px;
  letter-spacing:1px;
  color:var(--sm-muted);
  margin:0 0 20px}
.sm-readings {
  display:flex;
  gap:40px}
.sm-readings span {
  display:block;
  font-size:8px;
  letter-spacing:1px;
  color:var(--sm-muted);
  margin-bottom:5px}
.sm-readings strong {
  font-size:20px;
  font-weight:400}
.sm-description {
  font-size:11px;
  line-height:1.8;
  color:#9ab8b1;
  margin:17px 0 0}
.sm-footer {
  display:grid;
  grid-template-columns:1fr 1.2fr auto;
  gap:32px;
  margin-top:24px;
  font-size:10px;
  line-height:1.8;
  color:var(--sm-muted)}
.sm-footer p {
  margin:0}
.sm-footer a {
  color:#afccc0;
  text-decoration:underline;
  text-underline-offset:3px}
.sm-brand {
  white-space:nowrap}
.sm-sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0)}
@media(max-width:700px) {
  .sm-screen {
  height:62svh;
  min-height:430px}
.sm-console {
  padding:24px 18px}
.sm-heading {
  display:block}
.sm-heading h1 {
  font-size:32px}
.sm-view-buttons {
  margin-top:22px}
.sm-dashboard {
  grid-template-columns:1fr}
.sm-navigation {
  border-right:0;
  border-bottom:1px solid var(--sm-line)}
.sm-navigation,.sm-inspector {
  padding:20px 16px}
.sm-telemetry {
  left:20px;
  top:20px;
  font-size:8px;
  letter-spacing:.6px}
.sm-sector {
  right:20px;
  top:20px;
  font-size:8px;
  letter-spacing:.6px}
.sm-sector strong {
  font-size:10px;
  max-width:110px}
.sm-bottom {
  left:20px;
  right:20px;
  font-size:8px;
  letter-spacing:.3px}
.sm-bottom span:last-child {
  display:none}
.sm-presets {
  grid-template-columns:repeat(2,1fr)}
.sm-footer {
  grid-template-columns:1fr;
  gap:14px}
.sm-readings {
  gap:25px}
.sm-readings strong {
  font-size:18px}
}


/* Flight-deck instruments: warm phosphor, dense rules, and backlit keys. */
.stellar-map {
  --sm-ink: #e2eadb;
  --sm-muted: #98b5b6;
  --sm-line: #658286;
  --sm-pink: #ff6374;
  background: #0a171b;
}
.sm-screen { height: 84vh; min-height: 660px; max-height: 1050px; }
.sm-screen:after {
  background: repeating-linear-gradient(0deg, #00121b16 0, #00121b16 1px, transparent 1px, transparent 3px);
  box-shadow: inset 0 0 85px #0007, inset 0 0 0 2px #54767a;
}
.sm-reticle { inset: 10px; border-color: #e0ecd3; }
.sm-instrument {
  color: #e4ecda;
  background: #081e28;
  border-top: 2px solid #e3ecdb;
  border-bottom: 1px solid #adc6c1;
  padding: 8px 10px 10px;
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: .5px;
  text-shadow: 0 0 5px #bce9e747;
}
.sm-telemetry { top: 30px; left: 30px; width: 232px; gap: 2px; }
.sm-instrument > strong { font: 800 16px/1.5 'Arial Narrow', 'Helvetica Neue', sans-serif; letter-spacing: .3px; }
.sm-instrument-title { display: flex; justify-content: space-between; gap: 10px; font-size: 9px; margin-bottom: 9px; padding-bottom: 5px; border-bottom: 1px solid #b4cac373; }
.sm-live { color: #9fe9c2; margin: 0; }
.sm-attitude { display: flex; gap: 16px; margin-top: 10px; }
.sm-attitude span { font-size: 10px; color: #b3ced0; }
.sm-attitude b { color: #f0f0d8; }
.sm-status-cells { display: flex; gap: 4px; margin-top: 9px; }
.sm-status-cells i { display: block; width: 17px; height: 10px; background: #b2d6c4; box-shadow: 0 0 4px #a6e4cb55; border: 2px solid #d2e6cf; }
.sm-status-cells i:nth-child(3n) { background: #385c60; }
.sm-status-cells i:last-child { background: #e9c87e; border-color: #f4d69c; }
.sm-sector { right: 30px; top: 30px; width: 250px; text-align: left; }
.sm-sector span { color: inherit; }
.sm-sector > strong { font-size: 14px; }
.sm-lock { padding: 6px 8px; border: 2px solid #dce7d7; margin: 10px 0; box-shadow: 0 0 4px #c0e1e12e; }
.sm-lock span { font-size: 8px; letter-spacing: 1px; }
.sm-lock b { display: block; font: 800 16px/1.3 'Arial Narrow', sans-serif; }
.sm-coordinates { display: grid; grid-template-columns: 20px 1fr; gap: 2px; margin: 0; font-size: 11px; }
.sm-coordinates dt { color: #9fbfc6; }
.sm-coordinates dd { margin: 0; text-align: right; font-weight: 700; }
.sm-distance-readout { font: 700 8px/1.5 'Arial Narrow', sans-serif; margin-top: 8px; display: flex; align-items: center; gap: 7px; }
.sm-aux { position: absolute; bottom: 95px; width: 214px; height: 172px; pointer-events: none; border: 1px solid #b0c9c4; background: #071f2d; box-shadow: 0 0 0 4px #06181d, 0 0 0 5px #64878b; padding: 7px 9px; color: #e8edde; font-size: 9px; letter-spacing: .6px; }
.sm-aux-plan { left: 36px; }
.sm-aux-profile { right: 36px; }
.sm-aux > span { display: block; padding-bottom: 5px; border-bottom: 1px solid #a2c1c67d; font-weight: 700; }
.sm-aux canvas { width: 100%; height: 114px; cursor: default; }
.sm-aux small { display: flex; justify-content: space-between; font-size: 8px; padding-top: 5px; border-top: 1px solid #a2c1c67d; }
.sm-screen-register { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); width: 235px; pointer-events: none; text-align: center; color: #bbcfc8; font-size: 9px; letter-spacing: 1px; }
.sm-screen-register > div { display: flex; gap: 5px; justify-content: center; margin-top: 9px; }
.sm-screen-register i { width: 11px; height: 6px; border: 1px solid #c9daca; background: #98b8b0; }
.sm-screen-register i:nth-child(3n) { background: #254650; }
.sm-bottom { color: #e1ead6; font-weight: 700; font-size: 10px; }
.sm-console { max-width: none; padding: 22px 32px 26px; background: linear-gradient(180deg,#172a2e,#0a171c 200px); border-top: 8px solid #030a0d; box-shadow: inset 0 2px #50676a; }
.sm-heading { margin-bottom: 21px; }
.sm-heading h1 { color: #e6e7d7; font-family: 'Arial Narrow', 'Helvetica Neue', sans-serif; text-transform: uppercase; font-size: 31px; font-weight: 800; letter-spacing: 1px; }
.sm-heading h1 span { color: #e7d58f; }
.sm-kicker { font-size: 9px; color: #b0c0bb; letter-spacing: 1.5px; }
.sm-heading p:last-child { color: #afc2bd; }
.stellar-map button { background: linear-gradient(#34484a,#17292c); border: 1px solid #708681; box-shadow: inset 0 1px #8d9d9366, 0 3px 0 #02090b; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #e1e6d4; }
.stellar-map button:hover { background: #426260; border-color: #d4e5cc; color: #fffde7; }
.stellar-map button[aria-pressed=true] { background: #d5ddbd; border-color: #f7f4d4; color: #132b2b; box-shadow: inset 0 0 8px #fffbdc, 0 0 8px #d4eab52e, 0 3px 0 #02090b; }
.sm-view-buttons { gap: 10px; }
.sm-view-buttons button { min-width: 104px; }
.sm-dashboard { border: 1px solid #5b7779; box-shadow: inset 0 0 0 4px #081416, 0 0 0 3px #030b0e; background: #10232a; }
.sm-navigation,.sm-inspector { padding: 18px 22px; }
.sm-panel-label { color: #e3e7d6; border-bottom: 1px solid #819a97; padding-bottom: 9px; margin-bottom: 17px; font-weight: 700; letter-spacing: .5px; }
.sm-panel-label span { color: #c4d4c5; }
.sm-presets { gap: 8px; }
.sm-presets button { min-height: 41px; }
.sm-zoom input { accent-color: #e3e5c6; }
.stellar-map select { background: #07171c; color: #edf0d8; border: 1px solid #a0b5a7; font-weight: 700; }
.sm-inspector h2 { font: 800 27px/1.2 'Arial Narrow', 'Helvetica Neue', sans-serif; text-transform: uppercase; letter-spacing: 0; }
.sm-readings strong { color: #e9ead4; font-weight: 700; }
.sm-readings span,.sm-kind,.sm-object-label,.sm-scale-ends { color: #adc2be; }
.sm-footer { color: #9eafb0; }
@media (min-width: 1700px) {
  .sm-telemetry,.sm-sector { top: 40px; }
  .sm-aux { width: 260px; height: 194px; }
  .sm-aux canvas { height: 136px; }
}
@media (max-width: 900px) {
  .sm-telemetry { width: 190px; }
  .sm-sector { width: 202px; }
  .sm-aux { width: 168px; height: 140px; }
  .sm-aux canvas { height: 82px; }
  .sm-screen-register { display: none; }
}
@media (max-width: 700px) {
  .sm-screen { height: 76svh; min-height: 570px; max-height: 850px; }
  .sm-console { padding: 24px 18px; }
  .sm-telemetry { top: 20px; left: 18px; width: min(148px, calc(50% - 24px)); font-size: 8px; padding: 6px; }
  .sm-sector { top: 20px; right: 18px; width: min(150px, calc(50% - 24px)); font-size: 8px; padding: 6px; }
  .sm-instrument-title { font-size: 7px; letter-spacing: 0; margin-bottom: 5px; gap: 4px; }
  .sm-instrument > strong { font-size: 12px; }
  .sm-sector > strong { font-size: 9px; max-width: none; }
  .sm-attitude { flex-wrap: wrap; gap: 3px 10px; margin-top: 6px; }
  .sm-attitude span { font-size: 8px; }
  .sm-status-cells { gap: 3px; margin-top: 6px; }
  .sm-status-cells i { width: 11px; height: 7px; border-width: 1px; }
  .sm-lock { margin: 6px 0; padding: 4px; }
  .sm-lock span { font-size: 7px; }
  .sm-lock b { font-size: 11px; }
  .sm-coordinates { font-size: 8px; line-height: 1.3; }
  .sm-distance-readout { font-size: 6px; gap: 3px; margin-top: 6px; }
  .sm-aux { bottom: 80px; width: 126px; height: 107px; padding: 5px; font-size: 7px; }
  .sm-aux-plan { left: 23px; }
  .sm-aux-profile { right: 23px; }
  .sm-aux canvas { height: 61px; }
  .sm-aux small { font-size: 6px; }
  .sm-heading h1 { font-size: 30px; }
  .sm-view-buttons button { min-width: 0; flex: 1; }
  .sm-navigation,.sm-inspector { padding: 18px 14px; }
  .sm-panel-label { font-size: 9px; }
  .sm-bottom { font-size: 8px; }
}

.sm-distance-readout b { margin-left: auto; font: 700 10px ui-monospace, monospace; }
@media (max-width: 700px) { .sm-distance-readout b { font-size: 7px; } }

.sm-chart-note { font-size: 8px; margin-top: 5px; color: #adc2be; }
@media (max-width: 700px) { .sm-chart-note { font-size: 6px; letter-spacing: 0; } }