:root {
  color-scheme: dark;
  --bg: #020309;
  --panel: rgba(10, 15, 26, 0.58);
  --panel-strong: rgba(7, 11, 20, 0.84);
  --line: rgba(255,255,255,.11);
  --soft-line: rgba(255,255,255,.065);
  --text: #f6f7fb;
  --muted: #9ea7b8;
  --muted-2: #697386;
  --accent: #ffb45d;
  --blue: #88d7ff;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --panel-radius: 24px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  background:
    radial-gradient(circle at 50% 50%, rgba(40, 58, 96, .12), transparent 44%),
    #020309;
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
button, canvas { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

#space {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  touch-action: none;
}

.glass-panel {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(18, 25, 40, .68), rgba(5, 9, 17, .48));
  box-shadow: 0 22px 90px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
}

.topbar {
  position: fixed;
  z-index: 30;
  top: calc(16px + var(--safe-top));
  left: 18px;
  right: 18px;
  height: 64px;
  border-radius: 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 12px 0 16px;
  gap: 18px;
}

.brand {
  border: 0;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 152px;
  text-align: left;
}
.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 38% 36%, #fff7bd 0 5%, #ffc56f 25%, #fb7a30 58%, #d83b16 100%);
  box-shadow: 0 0 20px rgba(255,151,63,.52), 0 0 44px rgba(255,92,36,.18);
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: -7px -11px;
  border: 1px solid rgba(132,210,255,.46);
  border-radius: 50%;
  transform: rotate(-12deg) scaleY(.48);
}
.brand strong { display: block; font-size: 13px; letter-spacing: .16em; line-height: 1; }
.brand small { display: block; margin-top: 5px; color: #788399; font-size: 8px; letter-spacing: .17em; line-height: 1; }

.planet-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  min-width: 0;
  overflow: auto hidden;
  scrollbar-width: none;
}
.planet-nav::-webkit-scrollbar { display: none; }
.planet-nav button {
  border: 0;
  background: transparent;
  color: #8f98a9;
  border-radius: 999px;
  padding: 9px 12px;
  white-space: nowrap;
  font-size: 12px;
  transition: color .25s ease, background .25s ease, transform .25s ease;
}
.planet-nav button:hover { color: #fff; background: rgba(255,255,255,.06); }
.planet-nav button:active { transform: scale(.95); }
.planet-nav button.active { color: #fff; background: rgba(255,255,255,.1); }

.top-actions { display: flex; align-items: center; gap: 8px; }
.icon-button, .pill-button {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.055);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.icon-button:hover, .pill-button:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.18); }
.icon-button:active, .pill-button:active { transform: scale(.95); }
.icon-button { width: 40px; height: 40px; padding: 0; border-radius: 13px; display: grid; place-items: center; }
.pill-button { height: 40px; padding: 0 16px; border-radius: 13px; font-size: 12px; }
.orbit-icon { width: 20px; height: 10px; border: 1.5px solid currentColor; border-radius: 50%; position: relative; transform: rotate(-14deg); }
.orbit-icon::after { content:""; position:absolute; width:4px; height:4px; border-radius:50%; background:var(--blue); right:-2px; top:1px; box-shadow: 0 0 8px rgba(136,215,255,.8); }
.icon-button[aria-pressed="false"] { color: #687183; }
.icon-button[aria-pressed="false"] .orbit-icon::after { opacity: .25; }

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 28px;
  background: radial-gradient(circle at 50% 48%, #13182a 0%, #070a12 36%, #020309 76%);
  transition: opacity .8s ease, visibility .8s ease;
}
.loading-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-orbit { width: 124px; height: 124px; position: relative; display:grid; place-items:center; }
.loading-orbit::before { content:""; position:absolute; inset:18px 0; border:1px solid rgba(143,211,255,.25); border-radius:50%; transform:rotate(-18deg); }
.loading-sun { width:34px; height:34px; border-radius:50%; background:radial-gradient(circle at 38% 35%,#fff8c3,#ffb158 42%,#e95320 100%); box-shadow:0 0 28px rgba(255,127,45,.62),0 0 70px rgba(255,83,25,.26); }
.loading-planet { position:absolute; width:9px; height:9px; border-radius:50%; background:#9de1ff; box-shadow:0 0 13px #64c9ff; animation:loadingOrbit 2.8s linear infinite; }
@keyframes loadingOrbit { from{transform:rotate(0deg) translateX(62px) rotate(0deg)} to{transform:rotate(360deg) translateX(62px) rotate(-360deg)} }
.loading-copy { text-align:center; }
.loading-copy strong { display:block; font-size:15px; letter-spacing:.38em; margin-left:.38em; }
.loading-copy span { display:block; margin-top:11px; font-size:11px; color:#727d91; letter-spacing:.08em; }

.hero-copy {
  position: fixed;
  z-index: 12;
  left: clamp(34px, 6vw, 96px);
  top: 50%;
  width: min(430px, 42vw);
  transform: translateY(-46%);
  transition: opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1), visibility .55s ease;
  pointer-events: auto;
}
.hero-copy.hidden { opacity: 0; visibility: hidden; transform: translateY(-40%); pointer-events: none; }
.eyebrow { margin:0; color:#8dd9ff; font-size:10px; letter-spacing:.22em; font-weight:700; text-transform:uppercase; }
.hero-copy h1 { margin:16px 0 19px; font-size:clamp(48px,6.2vw,92px); line-height:.94; letter-spacing:-.065em; font-weight:650; }
.hero-copy > p:not(.eyebrow) { max-width:360px; color:#9ea8b8; font-size:14px; line-height:1.75; margin:0; }
.primary-cta {
  margin-top:30px;
  min-width:158px;
  height:50px;
  padding:0 13px 0 22px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.09);
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  box-shadow:0 16px 50px rgba(0,0,0,.22);
  backdrop-filter:blur(18px);
  transition:transform .3s ease, background .3s ease;
}
.primary-cta:hover { background:rgba(255,255,255,.15); transform:translateY(-2px); }
.primary-cta i { width:31px; height:31px; border-radius:50%; display:grid; place-items:center; background:#f5f7fb; color:#09101a; font-style:normal; font-size:15px; }

.scene-status {
  position: fixed;
  z-index: 20;
  top: calc(98px + var(--safe-top));
  left: 28px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#7f899d;
  font-size:10px;
  letter-spacing:.08em;
  pointer-events:none;
}
.status-dot { width:5px; height:5px; border-radius:50%; background:#70d6ff; box-shadow:0 0 10px rgba(112,214,255,.8); }

.info-panel {
  position: fixed;
  z-index: 28;
  right: 24px;
  top: calc(98px + var(--safe-top));
  bottom: calc(110px + var(--safe-bottom));
  width: min(374px, 34vw);
  min-height: 430px;
  border-radius: 28px;
  padding: 34px 30px 24px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  opacity:0;
  transform:translateX(30px) scale(.97);
  visibility:hidden;
  pointer-events:none;
  transition:opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1), visibility .45s ease;
}
.info-panel.open { opacity:1; transform:none; visibility:visible; pointer-events:auto; }
.info-panel::before { content:""; position:absolute; width:300px; height:300px; border-radius:50%; right:-130px; top:-130px; background:radial-gradient(circle, var(--panel-glow, rgba(81,168,255,.21)), transparent 70%); pointer-events:none; }
.panel-close { position:absolute; right:18px; top:17px; width:34px; height:34px; border:1px solid rgba(255,255,255,.09); border-radius:50%; background:rgba(255,255,255,.05); color:#9da5b3; font-size:21px; line-height:1; }
.planet-number { color:rgba(255,255,255,.14); font-size:58px; font-weight:700; letter-spacing:-.06em; line-height:.9; margin-bottom:26px; }
.info-panel h1 { margin:11px 0 0; font-size:clamp(44px,4vw,64px); letter-spacing:-.055em; line-height:.95; }
.planet-en { margin:8px 0 0; color:#727d91; font-size:11px; letter-spacing:.25em; }
.planet-description { color:#a6afbd; font-size:13px; line-height:1.7; margin:24px 0; }
.data-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--soft-line); border-left:1px solid var(--soft-line); margin-top:auto; }
.data-grid div { min-height:78px; padding:15px 14px; border-right:1px solid var(--soft-line); border-bottom:1px solid var(--soft-line); display:flex; flex-direction:column; justify-content:space-between; }
.data-grid span { color:#667186; font-size:10px; }
.data-grid strong { font-size:14px; font-weight:550; }
.panel-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:20px; color:#7d8798; font-size:10px; }
.panel-footer button { border:0; background:transparent; color:#f2f5fa; font-size:11px; padding:8px 0; }
.panel-footer button span { margin-left:8px; }

.focus-reticle { position:fixed; z-index:8; width:90px; height:90px; border-radius:50%; border:1px solid rgba(139,218,255,.28); opacity:0; transform:translate(-50%,-50%) scale(.7); pointer-events:none; transition:opacity .4s ease, transform .5s ease; }
.focus-reticle::before,.focus-reticle::after { content:""; position:absolute; inset:9px; border-radius:50%; border:1px solid rgba(255,255,255,.09); }
.focus-reticle span { position:absolute; left:50%; top:50%; width:4px; height:4px; margin:-2px; border-radius:50%; background:#b8e8ff; box-shadow:0 0 15px #7bd5ff; }
.focus-reticle.visible { opacity:1; transform:translate(-50%,-50%) scale(1); }

.gesture-hint {
  position:fixed;
  z-index:15;
  left:50%;
  bottom:calc(112px + var(--safe-bottom));
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  color:#697386;
  font-size:10px;
  letter-spacing:.04em;
  opacity:.9;
  transition:opacity .45s ease, visibility .45s ease;
  pointer-events:none;
}
.gesture-hint.hidden { opacity:0; visibility:hidden; }
.gesture-finger { width:17px; height:24px; border:1px solid rgba(255,255,255,.26); border-radius:9px; position:relative; }
.gesture-finger::before { content:""; position:absolute; width:3px; height:3px; background:#83d5ff; border-radius:50%; left:6px; top:5px; animation:fingerMove 1.8s ease-in-out infinite; }
@keyframes fingerMove { 0%,100%{transform:translateY(0)} 50%{transform:translateY(9px)} }

.control-dock {
  position:fixed;
  z-index:25;
  left:50%;
  bottom:calc(18px + var(--safe-bottom));
  transform:translateX(-50%);
  width:min(760px, calc(100vw - 36px));
  min-height:70px;
  border-radius:22px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 1px auto;
  align-items:center;
  gap:19px;
  padding:10px 14px;
}
.time-control,.scale-control { display:flex; align-items:center; gap:12px; min-width:0; }
.control-main { width:45px; height:45px; border:0; border-radius:15px; background:#f4f6f9; color:#07101c; display:grid; place-items:center; flex:0 0 auto; }
.pause-symbol { width:12px; height:15px; border-left:4px solid currentColor; border-right:4px solid currentColor; }
.control-main.playing .pause-symbol { width:0; height:0; border-left:12px solid currentColor; border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:0; margin-left:3px; }
.control-copy { min-width:76px; }
.control-copy span { display:block; color:#677287; font-size:9px; letter-spacing:.05em; }
.control-copy strong { display:block; margin-top:4px; font-size:12px; font-weight:600; }
.segmented { display:flex; gap:3px; background:rgba(255,255,255,.045); padding:4px; border-radius:14px; margin-left:auto; }
.segmented button { min-width:48px; height:34px; padding:0 10px; border:0; border-radius:10px; background:transparent; color:#798398; font-size:10px; transition:background .25s,color .25s,transform .2s; }
.segmented button.active { background:rgba(255,255,255,.12); color:#fff; }
.segmented button:active { transform:scale(.94); }
.dock-divider { height:35px; background:var(--soft-line); }
.scale-control { padding-right:4px; }
.scale-switch { position:relative; width:51px; height:30px; border:0; border-radius:999px; background:rgba(255,255,255,.1); padding:0; transition:background .35s ease; }
.scale-switch span { position:absolute; width:22px; height:22px; left:4px; top:4px; border-radius:50%; background:#fff; box-shadow:0 4px 15px rgba(0,0,0,.35); transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.scale-switch[aria-pressed="true"] { background:#2f8fcc; }
.scale-switch[aria-pressed="true"] span { transform:translateX(21px); }

.unsupported { position:fixed; inset:0; z-index:120; background:#05070d; display:grid; place-content:center; text-align:center; gap:9px; padding:30px; }
.unsupported strong { font-size:20px; }
.unsupported span { color:#808a9c; font-size:13px; max-width:520px; line-height:1.65; }
.unsupported-actions { display:flex; justify-content:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.unsupported-actions button { min-height:42px; padding:0 17px; border-radius:999px; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.08); color:#fff; font:600 13px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",Arial,sans-serif; }
.unsupported-actions button:first-child { background:#f4f6fa; color:#080b12; border-color:#f4f6fa; }

@media (max-width: 1100px) {
  .topbar { grid-template-columns:auto 1fr auto; }
  .planet-nav { justify-content:flex-start; }
  .planet-nav button { padding-inline:10px; }
  .info-panel { width:min(360px,42vw); }
  .hero-copy { width:43vw; }
}

@media (max-width: 820px) {
  .topbar { left:10px; right:10px; top:calc(8px + var(--safe-top)); height:58px; padding-left:13px; gap:8px; }
  .brand { min-width:130px; }
  .brand small { display:none; }
  .planet-nav { position:fixed; top:calc(74px + var(--safe-top)); left:10px; right:10px; justify-content:flex-start; background:rgba(6,10,18,.58); border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:4px; backdrop-filter:blur(18px); }
  .planet-nav button { flex:0 0 auto; }
  .pill-button { display:none; }
  .scene-status { top:calc(128px + var(--safe-top)); left:17px; }
  .hero-copy { left:24px; top:47%; width:min(430px,76vw); }
  .hero-copy h1 { font-size:clamp(46px,11vw,72px); }
  .info-panel { top:auto; left:10px; right:10px; bottom:calc(102px + var(--safe-bottom)); width:auto; min-height:0; max-height:58vh; padding:24px 22px 18px; border-radius:25px; transform:translateY(30px) scale(.98); }
  .info-panel.open { transform:none; }
  .planet-number { font-size:38px; margin-bottom:12px; }
  .info-panel h1 { font-size:43px; }
  .planet-description { margin:16px 0; line-height:1.58; }
  .data-grid div { min-height:65px; padding:11px 12px; }
  .data-grid strong { font-size:12px; }
  .panel-footer { padding-top:13px; }
  .control-dock { width:calc(100vw - 20px); bottom:calc(8px + var(--safe-bottom)); grid-template-columns:1fr auto; gap:9px; min-height:74px; padding:9px; }
  .dock-divider { display:none; }
  .time-control { min-width:0; }
  .control-copy { min-width:60px; }
  .segmented { overflow-x:auto; scrollbar-width:none; }
  .segmented::-webkit-scrollbar { display:none; }
  .segmented button { min-width:43px; padding-inline:8px; }
  .scale-control .control-copy { display:none; }
  .gesture-hint { bottom:calc(98px + var(--safe-bottom)); white-space:nowrap; }
}

@media (max-width: 560px) {
  .brand strong { font-size:11px; }
  .brand-mark { width:23px; height:23px; }
  .brand { min-width:112px; gap:9px; }
  .planet-nav button { font-size:11px; padding:8px 10px; }
  .hero-copy { left:20px; right:20px; width:auto; top:45%; }
  .hero-copy h1 { font-size:52px; }
  .hero-copy > p:not(.eyebrow) { max-width:300px; font-size:12px; }
  .primary-cta { margin-top:22px; }
  .control-dock { grid-template-columns:1fr auto; }
  .control-main { width:42px; height:42px; }
  .time-control > .control-copy { display:none; }
  .segmented { margin-left:0; }
  .segmented button { min-width:40px; }
  .info-panel { max-height:62vh; }
}

@media (orientation: landscape) and (max-height: 650px) {
  .topbar { top:calc(7px + var(--safe-top)); }
  .planet-nav { top:auto; }
  .scene-status { top:calc(82px + var(--safe-top)); }
  .hero-copy { top:49%; }
  .hero-copy h1 { font-size:clamp(44px,7.5vw,68px); margin-block:10px 13px; }
  .hero-copy > p:not(.eyebrow) { line-height:1.55; }
  .primary-cta { margin-top:18px; height:45px; }
  .info-panel { top:calc(82px + var(--safe-top)); bottom:calc(92px + var(--safe-bottom)); padding:23px 25px 18px; }
  .planet-number { font-size:38px; margin-bottom:12px; }
  .info-panel h1 { font-size:44px; }
  .planet-description { margin:13px 0; line-height:1.5; }
  .data-grid div { min-height:58px; padding:9px 11px; }
  .panel-footer { padding-top:10px; }
  .control-dock { bottom:calc(8px + var(--safe-bottom)); min-height:66px; }
  .gesture-hint { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

.planet-tooltip {
  position: fixed;
  z-index: 40;
  min-width: 88px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(5,9,17,.76);
  box-shadow: 0 12px 35px rgba(0,0,0,.3);
  backdrop-filter: blur(15px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(.96);
  transition: opacity .2s ease, transform .2s ease;
}
.planet-tooltip.visible { opacity: 1; transform: none; }
.planet-tooltip strong { display:block; font-size:12px; }
.planet-tooltip span { display:block; margin-top:3px; color:#758097; font-size:8px; letter-spacing:.06em; }