* { box-sizing: border-box; }

html, body, a-scene { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #01020a; color: #eaf4ff; font-family: system-ui, -apple-system, "Microsoft JhengHei", sans-serif; }

.sky-home-link { position: fixed; top: 1rem; left: 1rem; z-index: 4; padding: .45rem .7rem; color: #dbeeff; font-size: .8rem; text-decoration: none; background: rgb(4 10 26 / 75%); border: 1px solid rgb(167 208 255 / 30%); border-radius: .5rem; }
.home-page { min-height: 100%; overflow: auto; background: radial-gradient(circle at 75% 18%, #132e59 0, #050b1b 34%, #01020a 72%); }
.home-content { position: relative; z-index: 1; display: grid; align-content: center; min-height: 100vh; max-width: 68rem; margin: auto; padding: 4rem 2rem; }
.eyebrow { margin: 0 0 1rem; color: #a7d6ff; font-size: .75rem; letter-spacing: .14em; }
.home-content h1 { max-width: 12ch; margin: 0; font-size: clamp(2.8rem, 8vw, 6.2rem); line-height: 1.06; letter-spacing: -.06em; }
.home-intro { max-width: 34rem; margin: 1.4rem 0 2rem; color: #b7c9e4; font-size: 1.08rem; line-height: 1.7; }
.launch-button { display: inline-flex; align-items: center; gap: 1rem; width: fit-content; padding: .9rem 1.15rem; color: #061224; font-weight: 750; text-decoration: none; background: #bfe8ff; border-radius: .55rem; box-shadow: 0 0 2rem rgb(132 208 255 / 28%); }
.launch-button span { font-size: 1.35rem; }
.feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin-top: 5rem; }
.feature-list article { padding: 1rem; background: rgb(12 28 51 / 52%); border: 1px solid rgb(158 207 255 / 18%); border-radius: .75rem; backdrop-filter: blur(8px); }
.feature-list article > span { color: #ffe083; font-size: 1.5rem; }
.feature-list h2 { margin: .5rem 0 .25rem; font-size: .95rem; }
.feature-list p { margin: 0; color: #9fb2cf; font-size: .8rem; line-height: 1.55; }
.home-stars, .home-stars::after { position: fixed; inset: 0; pointer-events: none; content: ""; background-image: radial-gradient(#fff 1px, transparent 1.5px), radial-gradient(#a6d5ff 1px, transparent 1.5px); background-size: 94px 94px, 151px 151px; background-position: 12px 33px, 48px 12px; opacity: .42; }
.home-stars::after { transform: rotate(17deg) scale(1.15); opacity: .28; }

#loading {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: #01020a; z-index: 2; letter-spacing: .08em;
}

.hud {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 1;
  padding: .9rem 1rem; max-width: 18rem;
  background: rgb(4 10 26 / 70%); border: 1px solid rgb(167 208 255 / 20%);
  border-radius: .7rem; backdrop-filter: blur(8px); pointer-events: none;
}
.hud h1 { margin: 0 0 .35rem; font-size: 1rem; font-weight: 650; }
.hud p { margin: .2rem 0; color: #b7c9e4; font-size: .78rem; line-height: 1.45; }
.location-button { margin-top: .65rem; padding: .4rem .55rem; color: #dff2ff; font: inherit; font-size: .72rem; background: rgb(38 80 117 / 78%); border: 1px solid rgb(157 210 255 / 50%); border-radius: .4rem; cursor: pointer; }
.location-button:hover { background: rgb(65 120 166 / 88%); }
.location-button:focus-visible { outline: 2px solid #9dd7ff; outline-offset: 2px; }
.location-status { color: #91aac9 !important; font-size: .68rem !important; }

.toggles {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1;
  display: flex; gap: .55rem;
}
.toggle {
  display: grid; justify-items: center; gap: .22rem; min-width: 3.5rem;
  padding: .55rem .6rem; color: #5d6b83; font: inherit; font-size: .68rem;
  background: rgb(4 10 26 / 72%); border: 1px solid rgb(167 208 255 / 15%);
  border-radius: .65rem; cursor: pointer; transition: color .18s, background .18s, border-color .18s;
}
.toggle .icon { font-size: 1.35rem; line-height: 1; filter: brightness(.55); }
.toggle.is-on { color: #eff8ff; background: rgb(27 54 85 / 78%); border-color: rgb(157 210 255 / 60%); }
.toggle.is-on .icon { filter: brightness(1.25) drop-shadow(0 0 .32rem currentColor); }
.toggle:focus-visible { outline: 2px solid #9dd7ff; outline-offset: 3px; }

.coordinate-readout {
  position: fixed; z-index: 3; padding: .4rem .55rem;
  color: #d8edff; font-size: .76rem; line-height: 1.35; white-space: nowrap;
  background: rgb(2 8 19 / 88%); border: 1px solid rgb(128 183 235 / 55%);
  border-radius: .38rem; box-shadow: 0 .2rem .8rem rgb(0 0 0 / 28%);
  pointer-events: none; transform: translate(12px, 12px);
}

.time-panel {
  position: fixed; left: 50%; bottom: 1.25rem; z-index: 1;
  display: flex; align-items: center; gap: .45rem; padding: .42rem .55rem;
  color: #c6d8ee; font-size: .72rem; background: rgb(4 10 26 / 76%);
  border: 1px solid rgb(167 208 255 / 20%); border-radius: .65rem;
  backdrop-filter: blur(8px); transform: translateX(-50%);
}
#simulation-clock { min-width: 7.7rem; color: #f3f8ff; font-variant-numeric: tabular-nums; }
.utility-button, .speed-picker select {
  border: 1px solid rgb(167 208 255 / 24%); border-radius: .4rem;
  color: #dcecff; background: rgb(38 65 96 / 72%); font: inherit;
}
.utility-button { display: inline-flex; gap: .25rem; align-items: center; padding: .32rem .42rem; cursor: pointer; }
.utility-button:hover, .utility-button[aria-pressed="true"] { background: rgb(66 108 151 / 82%); }
.utility-button:focus-visible, .speed-picker select:focus-visible { outline: 2px solid #9dd7ff; outline-offset: 2px; }
.speed-picker { display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap; }
.speed-picker select { padding: .27rem; }

@media (max-width: 560px) {
  .hud { left: .75rem; bottom: .75rem; }
  .toggles { right: .75rem; bottom: .75rem; gap: .35rem; }
  .toggle { min-width: 3rem; padding: .45rem; }
  .time-panel { bottom: 5.4rem; max-width: calc(100vw - 1.5rem); flex-wrap: wrap; justify-content: center; }
  .feature-list { grid-template-columns: 1fr; margin-top: 3rem; }
}