:root {
  color-scheme:dark;
  --ink:#eef4fa;
  --muted:#93a5b7;
  --dim:#65798a;
  --cyan:#52d5e8;
  --line:rgba(197,221,237,.17);
  --panel:rgba(8,17,27,.92);
  --radius:15px;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-synthesis:none
}
#universe {
  position:fixed;
  inset:0;
  isolation:isolate;
}
#boot {
  position:fixed;
  inset:0;
  z-index:30;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:#040910;
  text-align:center;
  padding:30px;
  letter-spacing:3px;
}
#boot p { font-size:18px; font-weight:300; }
#boot small { color:#91a6b9; font-size:12px; line-height:2; letter-spacing:2px; max-width:420px; }
.boot-orbit { width:42px; height:42px; border:1px solid #496473; border-radius:50%; position:relative; animation:orbit 4s linear infinite; }
.boot-orbit::after { content:''; position:absolute; top:1px; right:5px; width:6px; height:6px; border-radius:50%; background:#a9e7ec; box-shadow:0 0 15px #69c9d6; }
@keyframes orbit { to { transform:rotate(360deg); } }
#jump-veil { position:fixed; inset:0; z-index:4; pointer-events:none; background:#152c3a; opacity:0; transition:opacity .26s; }
#jump-veil.active { opacity:.98; }
#show-ui { position:fixed; top:max(24px, env(safe-area-inset-top)); right:24px; z-index:20; font-size:12px; letter-spacing:2px; color:#b9cbd6; padding:10px 16px; border:1px solid #ffffff20; border-radius:24px; background:#07101b70; }
@media(prefers-reduced-motion:reduce) { .boot-orbit { animation:none; } #jump-veil { transition:none; } }
* {
  box-sizing:border-box
}
html,body {
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#020710;
  color:var(--ink)
}
button,input,textarea,select {
  font:inherit
}
button {
  color:inherit;
  cursor:pointer
}
button:disabled {
  cursor:default;
  opacity:.4
}
button {
  border:0;
  background:none
}
button,input,textarea,select,summary {
  -webkit-tap-highlight-color:transparent
}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:5px
}
button:focus:not(:focus-visible) {
  outline:none
}
[hidden] {
  display:none!important
}
canvas {
  display:block;
  width:100%;
  height:100%;
  touch-action:none
}
.universe-ui {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:5;
  color:var(--ink)
}
.universe-ui button,.universe-ui input,.universe-ui textarea,.universe-ui select,.universe-ui summary {
  pointer-events:auto
}
.flight-hud {
  position:absolute;
  inset:0;
  transition:opacity .3s
}
.flight-hud:before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,#020710b3 0,transparent 20%,transparent 74%,#020710d1 100%);
  opacity:0;
  transition:opacity .3s
}
.near-body .flight-hud:before { opacity:1; }
.icon {
  display:inline-flex;
  flex:none;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px
}
.icon svg {
  width:100%;
  height:100%;
  overflow:visible
}
.brand {
  position:absolute;
  top:29px;
  left:37px;
  display:flex;
  align-items:center;
  gap:13px;
  opacity:.74;
  filter:drop-shadow(0 2px 8px #000)
}
.brand>.icon {
  width:34px;
  height:34px
}
.brand-name {
  font-size:15px;
  line-height:1.4;
  font-weight:400;
  letter-spacing:4px;
  white-space:nowrap
}
.brand-subtitle {
  font-family:Arial,sans-serif;
  font-size:7px;
  letter-spacing:4.3px;
  margin-top:4px;
  white-space:nowrap
}
.top-nav {
  position:absolute;
  right:31px;
  top:24px;
  display:flex;
  gap:23px;
  opacity:.78
}
.nav-button {
  width:44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  padding:2px 0 8px;
  color:#e5eef3;
  filter:drop-shadow(0 2px 6px #000);
  transition:color .2s,transform .2s
}
.nav-button .icon {
  width:21px;
  height:21px
}
.nav-button>span:last-child {
  font-size:9px;
  letter-spacing:2px;
  padding-left:3px
}
.nav-button:hover,.nav-button[aria-expanded=true] {
  color:var(--cyan);
  transform:translateY(-2px)
}
.nav-button[aria-pressed=false] {
  opacity:.65
}
.location {
  position:absolute;
  left:38px;
  bottom:44px;
  text-shadow:0 2px 10px #000
}
.location-name {
  margin:0 0 10px;
  font-size:21px;
  font-weight:300;
  letter-spacing:5px
}
.location-subtitle {
  margin:0;
  color:#9cb5cb;
  font-size:10px;
  letter-spacing:3px
}
.flight-bottom {
  position:absolute;
  bottom:26px;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  transition:opacity .8s;
  opacity:.86
}
.controls-idle .flight-bottom { opacity:0; }
.controls-idle .flight-bottom button { pointer-events:none; }
.controls-idle .flight-bottom:focus-within { opacity:1; }
.controls-idle .flight-bottom:focus-within button { pointer-events:auto; }
.view-tools { position:absolute; right:34px; top:100px; display:flex; gap:22px; opacity:.65; }
.view-button { display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:4px 0; color:#c0d1df; font-size:10px; letter-spacing:1px; text-shadow:0 2px 6px #000; }
.view-button .icon { width:16px; height:16px; }
.view-button:hover,.view-button:focus-visible { color:#e8fbff; }
.flight-controls {
  display:flex;
  align-items:center;
  height:55px;
  padding:7px 9px 7px 17px;
  border:1px solid rgba(218,231,240,.18);
  border-radius:34px;
  background:linear-gradient(140deg,rgba(28,40,52,.4),rgba(8,17,25,.48));
  box-shadow:0 3px 26px #0004,inset 0 1px 8px #ffffff06;
  backdrop-filter:blur(18px);
  white-space:nowrap
}
.pause-button {
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:36px;
  padding:8px
}
.pause-button .icon {
  width:23px;
  height:23px
}
.control-divider {
  width:1px;
  height:24px;
  background:var(--line);
  margin:0 22px 0 13px
}
.autopilot-button {
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 25px 5px 0;
  font-size:12px;
  letter-spacing:1px
}
.autopilot-button .icon {
  width:24px;
  height:24px
}
.autopilot-button[aria-pressed=false] {
  color:#a7b7c4
}
.speed-switch {
  display:flex;
  padding:1px;
  border:1px solid #ffffff13;
  border-radius:24px
}
.speed-button {
  padding:8px 20px;
  font-size:12px;
  letter-spacing:2px;
  border-radius:24px;
  color:#8998a5;
  border:1px solid transparent;
  transition:background .2s,color .2s,box-shadow .2s
}
.speed-button:hover {
  color:#fff
}
.speed-button[aria-pressed=true] {
  color:#59e0ee;
  border-color:rgba(47,210,231,.63);
  background:rgba(5,136,159,.25);
  box-shadow:inset 0 0 12px #22c9e735,0 0 12px #22c9e725
}
.keyboard-hint {
  margin:14px 0 0;
  font-size:10px;
  color:#718494;
  letter-spacing:2px;
  white-space:nowrap;
  text-shadow:0 2px 6px #000
}
.next-sector {
  position:absolute;
  right:38px;
  bottom:45px;
  display:flex;
  flex-direction:row-reverse;
  align-items:center;
  gap:12px;
  font-size:13px;
  letter-spacing:2px;
  text-shadow:0 2px 6px #000;
  padding:9px 0
}
.next-sector:hover {
  color:var(--cyan)
}
.next-sector .icon {
  width:24px
}
.drawer-backdrop {
  position:absolute;
  inset:0;
  background:rgba(0,5,12,.25);
  pointer-events:auto;
  cursor:default;
  backdrop-filter:blur(2px)
}
.universe-drawer {
  pointer-events:auto;
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:420px;
  max-width:100%;
  background:linear-gradient(145deg,rgba(15,30,43,.94),rgba(5,13,23,.97));
  backdrop-filter:blur(28px);
  border-left:1px solid var(--line);
  box-shadow:-20px 0 70px #0004;
  display:flex;
  flex-direction:column;
  animation:drawer-in .25s ease-out
}
.drawer-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:34px 30px 23px
}
.eyebrow {
  font:8px/1.4 Arial,sans-serif;
  letter-spacing:3px;
  color:#7c9caf;
  margin:0 0 9px
}
.drawer-header h2 {
  font-size:25px;
  font-weight:300;
  letter-spacing:5px;
  margin:0
}
.close-button {
  width:37px;
  height:37px;
  display:grid;
  place-items:center;
  color:#9bafbd;
  border-radius:50%;
  border:1px solid var(--line)
}
.close-button:hover {
  color:#fff;
  background:#ffffff08
}
.close-button .icon {
  width:17px;
  height:17px
}
.panel-tabs {
  display:flex;
  gap:25px;
  padding:0 30px;
  border-bottom:1px solid var(--line)
}
.panel-tab {
  position:relative;
  padding:12px 0 15px;
  font-size:12px;
  letter-spacing:2px;
  color:var(--muted);
  white-space:nowrap
}
.panel-tab[aria-selected=true] {
  color:#d6faff
}
.panel-tab[aria-selected=true]:after {
  content:"";
  position:absolute;
  bottom:-1px;
  left:0;
  right:2px;
  height:2px;
  background:var(--cyan);
  box-shadow:0 0 12px #46c9ed66
}
.panel-content {
  padding:27px 30px 22px;
  overflow-y:auto;
  overscroll-behavior:contain;
  min-height:0;
  flex:1;
  scrollbar-width:thin;
  scrollbar-color:#314756 transparent
}
.panel-content h3 {
  font-size:13px;
  font-weight:400;
  letter-spacing:.5px;
  margin:0;
  line-height:1.7
}
.panel-content p {
  font-size:11px;
  line-height:1.9;
  margin:7px 0 0
}
.coordinate-readout { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px!important; color:#8fb4c5; overflow-wrap:anywhere; letter-spacing:.5px; }
.coordinate-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:17px; }
.coordinate-field { min-width:0; font-size:10px; color:#8baaba; display:flex; flex-direction:column; gap:7px; }
.coordinate-field .text-input { padding:9px 8px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.coordinate-form>.secondary-button { grid-column:1/-1; justify-self:start; margin-top:4px; }
.home-destination { margin-bottom:27px; }
.home-destination>.primary-button { width:100%; }
.home-destination>.primary-button .icon { width:17px; height:17px; }
.social-mode-select { max-width:130px; }
.encounter-status { margin-top:23px; }
.service-note { padding:14px 0; color:#c5b8a0; }
.visitor-greeting { margin:16px 0 24px; padding-left:14px; border-left:1px solid #80c8d847; font-size:12px; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; color:#c2dbe5; }
.visitor-postcard-form { margin:20px 0; }
.visitor-postcard-form .form-field { margin-bottom:13px; }
.visitor-postcard-form>.primary-button { margin-bottom:8px; }
.panel-section>.primary-button { margin-top:17px; }
.button-row { flex-wrap:wrap; align-items:center; }
.inbox-card { padding:19px 0; border-bottom:1px solid #c4e4f612; }
.inbox-card .message-author { font-size:9px; margin:0; }
.letter-body { white-space:pre-wrap; overflow-wrap:anywhere; color:#d3e3ec; font-size:13px!important; }
.letter-status { color:#718e9e; font-size:9px!important; }
.letter-actions { display:flex; gap:17px; flex-wrap:wrap; margin:12px 0 0; }
.letter-reply { padding:10px 14px; border-left:1px solid #6bc6ca45; color:#a5ced4; white-space:pre-wrap; overflow-wrap:anywhere; }
.reply-details { margin-top:17px; }
.reply-details summary { cursor:pointer; font-size:10px; color:#9ec1cf; }
.reply-form { margin-top:17px; }
.postcard-drawer { width:540px; }
.postcard-preview { display:flex; align-items:center; justify-content:center; min-height:150px; padding:9px; margin-bottom:23px; background:#02090f; border:1px solid #9ac3d51c; border-radius:5px; }
.postcard-image { display:block; width:100%; height:auto; max-height:48vh; object-fit:contain; box-shadow:0 8px 28px #0005; }
.postcard-form>.form-field { margin-bottom:3px; }
.postcard-form .setting-row { border-bottom:0; padding:15px 0; }
.postcard-form>.secondary-button { width:100%; }
.postcard-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:25px 0 12px; }
.postcard-actions>.quiet-button { flex-basis:100%; text-align:left; padding:9px 0; }
.postcard-note { font-size:10px!important; color:#7794a5; }
.planet-letter { margin-top:22px; max-height:40vh; overflow-y:auto; scrollbar-width:thin; text-shadow:none; }
.planet-letter summary { cursor:pointer; font-size:11px; color:#acd4df; min-height:30px; }
.planet-letter .text-input { background:#06131dd9; font-size:11px; }
.planet-letter .form-field { font-size:10px; gap:6px; }
.planet-letter .visitor-postcard-form { margin:10px 0 0; }
.planet-letter .visitor-postcard-form p { font-size:9px; line-height:1.7; }
.planet-visit-info { margin-top:12px; }
.muted {
  color:var(--muted);
  font-size:11px;
  line-height:1.9
}
.panel-intro {
  margin-bottom:28px
}
.panel-intro h3 {
  font-size:16px;
  font-weight:300;
  letter-spacing:1px
}
.panel-intro p {
  margin-top:10px
}
.panel-section {
  margin-bottom:29px
}
.panel-section>.section-label {
  font-size:10px;
  letter-spacing:2px;
  color:#7894a8;
  margin-bottom:13px
}
.list-row {
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 0;
  border-bottom:1px solid #c4e4f60c;
  min-height:68px
}
.row-copy {
  flex:1;
  min-width:0
}
.row-copy h3 {
  overflow-wrap:anywhere
}
.list-row p {
  font-size:10px;
  margin:3px 0 0
}
.row-actions {
  display:flex;
  gap:8px;
  align-items:center;
  flex-shrink:0
}
.small-button {
  font-size:10px;
  color:#b5d8e5;
  border:1px solid #abcbd326;
  border-radius:20px;
  padding:7px 12px;
  white-space:nowrap;
  display:inline-flex;
  gap:6px;
  align-items:center;
  justify-content:center
}
.small-button .icon {
  width:12px;
  height:12px
}
.small-button:hover {
  color:#65e5f0;
  border-color:#49d3e377;
  background:#40cada0a
}
.quiet-button {
  font-size:9px;
  color:#8096a5;
  padding:5px 0;
  white-space:nowrap
}
.quiet-button:hover {
  color:#e0effa
}
.sector-mark {
  width:7px;
  height:7px;
  border:1px solid var(--sector-accent);
  border-radius:50%;
  box-shadow:0 0 12px var(--sector-accent);
  margin-right:3px;
  opacity:.8
}
.current-sector .row-copy h3 {
  color:#8ce8ed
}
.empty-state {
  text-align:center;
  padding:35px 14px;
  color:#91acbd
}
.empty-state>.icon {
  width:37px;
  height:37px;
  opacity:.6;
  margin-bottom:20px
}
.empty-state h3 {
  font-size:15px;
  color:#bdcfdb
}
.empty-state p {
  max-width:260px;
  margin:10px auto 0;
  font-size:11px
}
.primary-button,.secondary-button {
  border-radius:7px;
  font-size:11px;
  padding:11px 16px;
  letter-spacing:1px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px
}
.primary-button {
  color:#a5f4fa;
  border:1px solid #39c4d66b;
  background:linear-gradient(110deg,#17798d42,#0745564d)
}
.primary-button:hover {
  background:#1c93a252;
  border-color:#57d7e6
}
.secondary-button {
  border:1px solid var(--line);
  color:#bed3df;
  background:#ffffff03
}
.secondary-button:hover {
  background:#ffffff09;
  border-color:#a4cfdf55
}
.secondary-button .icon {
  width:16px;
  height:16px
}
.panel-section>.secondary-button {
  margin-top:15px
}
.save-status {
  color:#547080;
  font-size:9px;
  letter-spacing:.8px;
  margin:0;
  padding:14px 30px;
  border-top:1px solid #c4e4f60c
}
.form-field {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0 0 20px;
  font-size:11px;
  color:#a7c0cf
}
.text-input {
  width:100%;
  min-width:0;
  padding:12px 13px;
  border:1px solid #bddce51f;
  border-radius:7px;
  background:#010a124d;
  outline:none;
  color:#deedf4;
  font-size:12px;
  line-height:1.7;
  resize:vertical
}
.text-input::placeholder {
  color:#516c7e
}
.text-input:focus {
  border-color:#4cbcc78f
}
.text-input:disabled {
  opacity:.45
}
.home-form>.primary-button {
  width:100%;
  margin:0 0 30px
}
.home-form>.setting-row { padding:12px 0; }
.home-form>.primary-button { margin-top:22px; }
.building-limit { margin-bottom:4px; }
.building-help { margin:18px 0 12px; }
.building-editor { padding:14px 0; border-bottom:1px solid #c4e4f60c; }
.building-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.building-header h4 { margin:0; font-size:12px; font-weight:400; color:#bfd4df; }
.building-position { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:end; gap:10px; }
.building-coordinate { min-width:0; display:flex; flex-direction:column; gap:5px; font-size:10px; color:var(--muted); }
.building-coordinate .text-input { padding:8px; min-height:44px; font-variant-numeric:tabular-nums; }
.building-editor .small-button { min-height:44px; }
.building-remove { color:#b4a5a8; }
.traveller-id { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; color:#adcad6; letter-spacing:.4px; margin-bottom:12px!important; }
.setting-row {
  display:flex;
  align-items:center;
  gap:15px;
  padding:20px 0;
  border-bottom:1px solid var(--line)
}
.setting-row:first-child {
  padding-top:3px
}
.setting-row .row-copy {
  display:flex;
  flex-direction:column;
  gap:5px
}
.setting-row strong {
  font-size:12px;
  font-weight:400
}
.setting-row .muted {
  font-size:10px
}
.setting-row+.panel-section {
  margin-top:28px
}
.select-input {
  padding:8px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#0b1c28;
  color:#a8d4dd;
  font-size:11px;
  max-width:100px
}
.toggle-input {
  appearance:none;
  width:34px;
  height:19px;
  border-radius:20px;
  background:#172b39;
  border:1px solid #a4cddd26;
  position:relative;
  cursor:pointer;
  flex-shrink:0;
  transition:background .2s
}
.toggle-input:after {
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#8ca2af;
  transition:transform .2s
}
.toggle-input:checked {
  background:#136777;
  border-color:#49cedc77
}
.toggle-input:checked:after {
  transform:translateX(14px);
  background:#a0f1f5
}
.button-row {
  display:flex;
  gap:10px;
  margin-top:16px
}
.panel-section .secondary-button+.secondary-button {
  margin-left:6px
}
.help-details,.network-note {
  margin:25px 0 10px;
  border-top:1px solid var(--line);
  padding-top:18px;
  color:#a5becf
}
.help-details summary,.network-note summary {
  font-size:11px;
  cursor:pointer;
  letter-spacing:1px
}
.help-list {
  display:grid;
  grid-template-columns:95px 1fr;
  gap:13px 9px;
  font-size:10px;
  margin-top:22px;
  line-height:1.7
}
.help-list dt {
  color:#b7dbe4
}
.help-list dd {
  color:#819cab;
  margin:0
}
.connection-box {
  padding:16px;
  border:1px solid var(--line);
  border-radius:8px;
  margin-bottom:28px;
  background:#030e1633
}
.connection-status {
  margin:0 0 13px!important;
  color:#a0b8c9;
  font-size:11px!important
}
.connection-status[data-phase=connected] {
  color:#73d6cc
}
.connection-status[data-phase=error] {
  color:#e5a494
}
.message-list {
  max-height:240px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#314756 transparent
}
.message-empty {
  font-size:10px!important;
  padding:10px 0 20px
}
.message-entry {
  padding:12px 0;
  border-bottom:1px solid #ffffff09;
  overflow-wrap:anywhere
}
.message-author {
  font-size:9px;
  color:#79b1c3
}
.message-entry p {
  font-size:12px;
  white-space:pre-wrap;
  margin-top:4px
}
.message-form {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:16px
}
.message-form input {
  font-size:11px;
  padding:9px 11px
}
.voice-tools {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:17px;
  gap:8px
}
.text-button {
  font-size:10px;
  color:#91a9bb;
  display:inline-flex;
  gap:7px;
  align-items:center
}
.text-button:hover {
  color:#d1edf8
}
.network-note p {
  font-size:10px
}
.toast {
  position:absolute;
  left:50%;
  top:110px;
  transform:translate(-50%,-8px);
  max-width:min(450px,calc(100vw - 40px));
  text-align:center;
  opacity:0;
  transition:opacity .2s,transform .2s;
  background:rgba(9,25,36,.93);
  border:1px solid #a0cad82a;
  border-radius:9px;
  padding:12px 22px;
  color:#bbdfeb;
  font-size:12px;
  line-height:1.7;
  box-shadow:0 8px 35px #0004;
  backdrop-filter:blur(20px);
  overflow-wrap:anywhere
}
.toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}
.ui-hidden .flight-hud {
  visibility:hidden;
  opacity:0
}
.planet-story { position:absolute; pointer-events:auto; left:38px; top:31%; width:min(300px,calc(100vw - 48px)); color:#c5dce8; text-shadow:0 2px 8px #000; }
.planet-owner { font-size:10px; letter-spacing:2px; color:#8eb7c5; margin:0 0 24px; }
.planet-bio { font-size:13px; line-height:2; font-weight:300; margin:0 0 25px; overflow-wrap:anywhere; }
.planet-greeting { margin:0; padding-left:14px; border-left:1px solid #71cfdb70; font-size:15px; font-weight:300; line-height:2; overflow-wrap:anywhere; color:#dfedf2; }
.planet-return { pointer-events:auto; display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:2px; color:#a0cbd7; margin-top:28px; padding:12px 0; }
.planet-return .icon { width:16px; transform:rotate(180deg); }
.ui-hidden .planet-story, .panel-open .planet-story { visibility:hidden; }
.ambient-signal { position:absolute; right:34px; bottom:140px; width:min(300px,calc(100vw - 48px)); padding:17px 18px; border:1px solid #a6cbd624; border-radius:13px; background:#07121cdb; color:#bfd4df; box-shadow:0 5px 25px #0003; }
.signal-caption { margin:0 0 9px; color:#7b9aa9; font-size:9px; letter-spacing:2px; }
.signal-planet { margin:0; color:#d2e4ec; font-size:14px; font-weight:400; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.signal-traveler { margin:6px 0 0; font-size:10px; color:#8da9b9; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.signal-message { margin:10px 0 0; color:#a1b9c7; font-size:11px; line-height:1.8; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.signal-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }
.signal-actions .small-button { min-height:44px; padding:7px 10px; }
.signal-dismiss { color:#829aa9; border-color:transparent; }
.has-contact .ambient-signal:not(.contact-signal) { display:none; }
.contact-progress { display:block; width:100%; height:5px; margin:16px 0 2px; border:0; border-radius:5px; overflow:hidden; appearance:none; background:#a8d3df16; accent-color:#69bac9; }
.contact-signal[data-ready="true"] { animation:contact-settled 7s ease forwards; }
@keyframes contact-settled { 0%,75% { opacity:1;visibility:visible; } 100% { opacity:0;visibility:hidden; } }
@media(prefers-reduced-motion:reduce) { .contact-signal[data-ready="true"] { animation-timing-function:step-end; } }
.contact-progress::-webkit-progress-bar { background:#a8d3df16; }
.contact-progress::-webkit-progress-value { background:#69bac9; border-radius:5px; }
.contact-progress::-moz-progress-bar { background:#69bac9; border-radius:5px; }
.planet-departure { display:flex; flex-wrap:wrap; gap:0 16px; }
.planet-coordinate { font-size:10px; margin-top:14px; }
.ui-hidden .ambient-signal, .panel-open .ambient-signal { display:none; }
@media(max-width:600px) { .ambient-signal { right:24px; bottom:calc(210px + env(safe-area-inset-bottom)); width:min(300px,calc(100vw - 48px)); padding:14px 16px; } }
@media(max-width:600px) { .planet-story { top:100px; left:24px; width:calc(100vw - 48px); } .planet-owner { margin-bottom:10px; } .planet-bio { margin-bottom:13px; font-size:11px; line-height:1.8; max-height:60px; overflow:auto; } .planet-greeting { font-size:13px; max-height:86px; overflow:auto; line-height:1.8; } .planet-return { margin-top:10px; } }
.panel-open .top-nav {
  opacity:.3
}
.reduce-motion * {
  animation:none!important;
  transition:none!important
}
@keyframes drawer-in {
  from {
    transform:translateX(25px);
    opacity:0
  }
  to {
    transform:translateX(0);
    opacity:1
  }
}
@media(min-width:1700px) {
  .brand {
    top:36px;
    left:46px
  }
  .top-nav {
    top:29px;
    right:44px;
    gap:36px
  }
  .location {
    left:46px;
    bottom:52px
  }
  .location-name {
    font-size:27px
  }
  .next-sector {
    right:46px;
    bottom:52px
  }
  .flight-bottom {
    bottom:31px
  }
}
@media(max-width:1050px) {
  .brand {
    left:25px;
    top:25px;
    gap:13px
  }
  .brand-name {
    font-size:16px;
    letter-spacing:3px
  }
  .brand-subtitle {
    font-size:7px;
    letter-spacing:3px
  }
  .brand>.icon {
    width:35px;
    height:35px
  }
  .top-nav {
    right:22px;
    gap:21px
  }
  .location {
    left:25px;
    bottom:100px
  }
  .location-name {
    font-size:22px
  }
  .location-subtitle {
    font-size:11px
  }
  .next-sector {
    right:25px;
    bottom:104px
  }
  .flight-bottom {
    bottom:20px
  }
  .control-divider {
    margin-left:8px;
    margin-right:15px
  }
  .autopilot-button {
    padding-right:17px
  }
  .speed-button {
    padding-left:16px;
    padding-right:16px
  }
}
@media(max-width:600px) {
  .view-tools { right:24px; top:89px; gap:19px; }
  .view-button { min-height:40px; font-size:9px; }
  .planet-story { top:145px; }
  .planet-letter { max-height:30vh; margin-top:14px; }
  .planet-visit-info { margin-top:4px; }
  .postcard-drawer { width:100%; }
  .postcard-image { max-height:39vh; }
  .postcard-actions>.primary-button,.postcard-actions>.secondary-button { flex:1; min-height:44px; }
  .brand {
    left:22px;
    top:23px;
    gap:11px
  }
  .brand-name {
    font-size:13px;
    letter-spacing:2px
  }
  .brand-subtitle {
    font-size:6px;
    letter-spacing:2.1px;
    margin-top:5px
  }
  .brand>.icon {
    width:31px;
    height:31px
  }
  .top-nav {
    right:16px;
    top:22px;
    gap:0
  }
  .nav-button {
    width:44px;
    min-height:44px;
    gap:6px
  }
  .nav-button .icon {
    width:21px;
    height:21px
  }
  .nav-button>span:last-child {
    font-size:8px;
    letter-spacing:1px;
    padding-left:1px
  }
  .location {
    left:24px;
    bottom:137px
  }
  .location-name {
    font-size:23px;
    letter-spacing:4px;
    margin-bottom:9px
  }
  .location-subtitle {
    font-size:10px;
    letter-spacing:2px;
    max-width:250px
  }
  .next-sector {
    right:23px;
    bottom:113px;
    font-size:10px;
    letter-spacing:1px;
    gap:6px
  }
  .next-sector .icon {
    width:18px
  }
  .flight-bottom {
    bottom:25px;
    width:100%;
    padding:0 19px
  }
  .flight-controls {
    width:fit-content;
    max-width:100%;
    height:48px;
    margin:auto;
    padding:5px 6px 5px 8px
  }
  .pause-button {
    width:36px;
    height:32px;
    padding:7px
  }
  .pause-button .icon {
    width:18px;
    height:18px
  }
  .control-divider {
    height:20px;
    margin:0 10px 0 6px
  }
  .autopilot-button {
    font-size:10px;
    gap:6px;
    padding-right:11px;
    letter-spacing:0
  }
  .autopilot-button .icon {
    width:20px;
    height:20px
  }
  .speed-button {
    min-width:44px;
    font-size:10px;
    padding:7px 12px;
    letter-spacing:1px
  }
  .keyboard-hint {
    font-size:8px;
    letter-spacing:1px;
    margin-top:11px
  }
  .universe-drawer {
    width:100%;
    border:0
  }
  .drawer-header {
    padding:30px 25px 23px;
    padding-top:max(30px,env(safe-area-inset-top))
  }
  .drawer-header h2 {
    font-size:25px
  }
  .panel-tabs {
    padding:0 25px
  }
  .panel-content {
    padding:26px 25px
  }
  .save-status {
    padding:14px 25px;
    padding-bottom:max(14px,env(safe-area-inset-bottom))
  }
  .toast {
    top:90px;
    font-size:11px;
    min-width:240px
  }
  .panel-open .flight-hud {
    opacity:0;
    visibility:hidden
  }
  .row-actions {
    gap:5px
  }
  .small-button {
    padding:6px 10px
  }
  .quiet-button {
    font-size:8px
  }
  .flight-bottom {
    padding-bottom:env(safe-area-inset-bottom)
  }
}
@media(max-width:360px) {
  .top-nav { top:74px; }
  .view-tools { top:138px; right:22px; }
  .flight-bottom { padding-left:10px; padding-right:10px; }
  .flight-controls { padding-left:5px; padding-right:4px; }
  .speed-button { padding-left:8px; padding-right:8px; }
}
@media(max-height:500px) and (min-width:601px) {
  .view-tools { top:78px; }
  .location {
    bottom:26px
  }
  .next-sector {
    bottom:29px
  }
  .flight-bottom {
    bottom:15px
  }
  .brand {
    top:17px
  }
  .top-nav {
    top:15px
  }
  .keyboard-hint {
    display:none
  }
  .universe-drawer {
    width:390px
  }
  .drawer-header {
    padding-top:20px;
    padding-bottom:15px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important
  }
  .flight-hud,.nav-button,.speed-button,.toggle-input,.toggle-input:after,.toast {
    transition:none
  }
  .universe-drawer {
    animation:none
  }
}