:root {
  color-scheme: dark;
  --ink: #f4f8fd;
  --muted: #8290a2;
  --line: rgba(197, 220, 240, .14);
  --cyan: #9adfff;
  --gold: #ffd18a;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: #010205;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow: hidden; background: #010205; color: var(--ink); }
button, input { font: inherit; }
button, label { -webkit-tap-highlight-color: transparent; }
.app-shell { min-height: 100vh; position: relative; background: radial-gradient(circle at 58% 49%, #071019 0, #02050a 44%, #010205 76%); }
.topbar { position: fixed; z-index: 20; inset: 0 0 auto; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(22px, 3.2vw, 52px); border-bottom: 1px solid rgba(255,255,255,.065); background: linear-gradient(180deg, rgba(1,2,5,.86), rgba(1,2,5,.14)); backdrop-filter: blur(16px); }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.language-toggle { min-width: 38px; height: 28px; padding: 0 9px; border: 1px solid rgba(154,223,255,.28); border-radius: 2px; color: var(--cyan); background: rgba(3,9,16,.52); font: 600 .66rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.language-toggle:hover, .language-toggle:focus-visible { color: #fff; border-color: rgba(154,223,255,.7); background: rgba(26,70,92,.44); outline: none; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; font-size: .84rem; font-weight: 650; letter-spacing: .16em; }
.brand-mark { width: 19px; height: 19px; border: 1px solid rgba(154,223,255,.85); border-radius: 50%; box-shadow: 0 0 16px rgba(72,177,232,.35); position: relative; }
.brand-mark::after { content: ""; position: absolute; inset: 4px -5px; border: 1px solid rgba(154,223,255,.45); border-radius: 50%; transform: rotate(-24deg); }
.time-block { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 8px; font-variant-numeric: tabular-nums; }
.time-block span:nth-child(2) { color: #778698; font-size: .72rem; letter-spacing: .07em; }
.time-block strong { grid-column: 2; font: 500 .95rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.live-dot { grid-row: 1 / span 2; width: 5px; height: 5px; border-radius: 50%; background: #9adfff; box-shadow: 0 0 13px #65cafa; animation: pulse 2.6s infinite; }
.stage, .scene { position: fixed; inset: 0; }
.scene { touch-action: none; cursor: grab; }
.scene:active { cursor: grabbing; }
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(ellipse at 57% 50%, transparent 27%, rgba(1,2,5,.035) 52%, rgba(1,2,5,.54) 125%), linear-gradient(90deg, rgba(1,2,5,.24), transparent 27%, transparent 80%, rgba(1,2,5,.1)); }
.cinematic-grain { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.33'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.viewport-frame { position: fixed; z-index: 5; inset: 92px 26px 26px; pointer-events: none; }
.viewport-frame i { position: absolute; width: 22px; height: 22px; opacity: .34; }
.viewport-frame i:nth-child(1) { top: 0; left: 0; border-top: 1px solid #aac6d8; border-left: 1px solid #aac6d8; }
.viewport-frame i:nth-child(2) { top: 0; right: 0; border-top: 1px solid #aac6d8; border-right: 1px solid #aac6d8; }
.viewport-frame i:nth-child(3) { bottom: 0; left: 0; border-bottom: 1px solid #aac6d8; border-left: 1px solid #aac6d8; }
.viewport-frame i:nth-child(4) { bottom: 0; right: 0; border-bottom: 1px solid #aac6d8; border-right: 1px solid #aac6d8; }
.intro-panel { position: fixed; z-index: 10; left: clamp(28px, 4vw, 64px); bottom: clamp(38px, 7vh, 78px); width: min(390px, 31vw); pointer-events: none; }
.eyebrow { margin: 0 0 12px; color: var(--cyan); font: 600 .68rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .2em; }
h1 { margin: 0; max-width: 430px; font-size: clamp(1.85rem, 3.1vw, 3.65rem); line-height: 1.08; letter-spacing: -.05em; font-weight: 430; text-wrap: balance; text-shadow: 0 4px 35px rgba(0,0,0,.72); }
.hint { color: #8190a1; font-size: .78rem; line-height: 1.7; margin: 17px 0 16px; letter-spacing: .05em; }
.upload-button { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; min-height: 45px; padding: 0 17px; color: #06111b; background: rgba(196,235,252,.93); border: 1px solid rgba(255,255,255,.65); border-radius: 2px; font-size: .84rem; font-weight: 720; cursor: pointer; box-shadow: 0 12px 40px rgba(50,165,220,.18); transition: transform .2s, background .2s, box-shadow .2s; }
.upload-button:hover { transform: translateY(-2px); background: white; box-shadow: 0 18px 48px rgba(66,185,239,.28); }
.upload-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.photo-status { margin: 9px 0 0; color: #667587; font-size: .7rem; }
.telemetry { position: fixed; z-index: 10; right: clamp(28px, 3.5vw, 54px); bottom: clamp(38px, 6vh, 68px); width: min(334px, 28vw); padding: 19px; border: 1px solid rgba(191,217,237,.12); background: linear-gradient(145deg, rgba(8,14,23,.66), rgba(2,5,10,.42)); backdrop-filter: blur(18px) saturate(115%); box-shadow: 0 28px 90px rgba(0,0,0,.25); }
.panel-heading { display: flex; align-items: start; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.panel-heading .eyebrow { margin-bottom: 5px; }
h2 { margin: 0; font-size: 1rem; font-weight: 560; letter-spacing: .02em; }
.icon-button { width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink); background: rgba(255,255,255,.025); cursor: pointer; transition: background .2s; }
.icon-button:hover { background: rgba(255,255,255,.1); }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 1px; background: rgba(255,255,255,.08); }
.metric { min-height: 69px; padding: 12px 10px; display: flex; align-items: center; gap: 9px; background: rgba(3,7,13,.82); }
.metric small { display: block; color: #6f7e90; font-size: .66rem; margin-bottom: 5px; }
.metric strong { font-size: .76rem; font-weight: 560; line-height: 1.4; }
.metric-icon { flex: none; width: 22px; font-size: 1rem; color: var(--gold); text-align: center; }
.metric.moon .metric-icon { color: #d6e0ec; }
.scale-note { display: flex; gap: 9px; align-items: flex-start; padding: 12px 0; color: #657486; font-size: .65rem; line-height: 1.5; border-bottom: 1px solid var(--line); }
.orbit-key { flex: none; width: 20px; height: 8px; margin-top: 3px; border-top: 1px dashed #66798d; }
.legend { display: flex; gap: 16px; padding-top: 12px; color: #718093; font-size: .66rem; }
.legend span { display: flex; align-items: center; gap: 7px; }
.legend b, .drag-cue b { font: inherit; font-weight: inherit; }
.legend i { width: 6px; height: 6px; border-radius: 50%; }
.day-swatch { background: #8fddff; box-shadow: 0 0 7px #6bcdf7; }
.night-swatch { background: #ffc56d; box-shadow: 0 0 7px #ffbd59; }
.object-label { position: fixed; z-index: 8; display: none; padding: 5px 8px; color: #aebdcd; border: 1px solid rgba(255,255,255,.11); background: rgba(2,5,10,.56); backdrop-filter: blur(8px); font-size: .64rem; letter-spacing: .1em; pointer-events: none; }
.solar-label-layer { position: fixed; inset: 0; z-index: 8; display: none; pointer-events: none; }
.solar-label-layer.visible { display: block; }
.planet-label { position: absolute; left: 0; top: 0; display: none; padding: 3px 6px; color: rgba(221,237,248,.78); background: rgba(2,5,10,.5); border-left: 1px solid rgba(154,223,255,.45); font: 600 .58rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; white-space: nowrap; transform: translate(-50%, -50%); }
.drag-cue { position: fixed; left: 56%; bottom: 27px; transform: translateX(-50%); color: rgba(205,220,235,.33); font-size: .68rem; letter-spacing: .16em; pointer-events: none; z-index: 6; }
.drag-cue span { color: var(--cyan); font-size: 1rem; margin-right: 5px; }
.photo-dialog { width: min(1120px, 94vw); height: min(780px, 90vh); padding: 0; overflow: hidden; border: 1px solid rgba(154,223,255,.25); background: #02050a; color: var(--ink); box-shadow: 0 35px 160px #000; }
.photo-dialog[open] { animation: gallery-arrival .58s cubic-bezier(.2,.75,.2,1) both; }
.photo-dialog::backdrop { background: rgba(0,2,6,.78); backdrop-filter: blur(13px); }
.map-backdrop { position: absolute; z-index: 0; inset: 0; overflow: hidden; background: #071019; }
.map-backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(1,7,12,.18), rgba(1,4,8,.7) 72%), linear-gradient(90deg, rgba(1,5,9,.72), transparent 35%, transparent 68%, rgba(1,5,9,.6)); }
.map-backdrop::before { content: "+"; position: absolute; z-index: 2; left: 50%; top: 50%; width: 34px; height: 34px; display: grid; place-items: center; transform: translate(-50%,-50%); border: 1px solid rgba(154,223,255,.45); border-radius: 50%; color: var(--cyan); font: 300 1.1rem/1 ui-monospace, monospace; box-shadow: 0 0 28px rgba(72,177,232,.24); }
.map-tiles { position: absolute; display: grid; grid-template-columns: repeat(3, 256px); grid-template-rows: repeat(3, 256px); width: 768px; height: 768px; filter: saturate(.65) brightness(.65) contrast(1.18) hue-rotate(8deg); transform: scale(1.48); transform-origin: center; }
.map-tiles img { display: block; width: 256px; height: 256px; }
.map-grid { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(154,223,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(154,223,255,.18) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle, #000, transparent 72%); }
.map-place { position: absolute; z-index: 2; left: 28px; top: 25px; display: grid; gap: 4px; max-width: calc(100% - 100px); text-shadow: 0 2px 14px #000; }
.map-place::before { content: ""; position: absolute; left: -12px; top: 2px; width: 1px; height: 52px; background: var(--cyan); box-shadow: 0 0 15px rgba(154,223,255,.7); }
.map-place span { color: var(--cyan); font: 600 .64rem/1.2 ui-monospace, monospace; letter-spacing: .2em; }
.map-place strong { font-size: 1.05rem; font-weight: 560; letter-spacing: .04em; }
.map-place small { color: #8da0b2; font: .64rem/1.2 ui-monospace, monospace; letter-spacing: .1em; }
.gallery-overview { position: absolute; z-index: 1; inset: 102px 24px 38px; overflow: auto; padding: 12px 4px 18px; scrollbar-color: rgba(154,223,255,.35) transparent; }
.gallery-overview[hidden], .photo-viewer[hidden] { display: none; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 14px; max-width: 1000px; margin: 0 auto; }
.gallery-card { position: relative; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 1px solid rgba(200,225,242,.18); background: rgba(1,5,10,.74); color: white; cursor: pointer; box-shadow: 0 16px 48px rgba(0,0,0,.32); }
.gallery-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 57%, rgba(0,0,0,.82)); pointer-events: none; }
.gallery-card:hover { border-color: rgba(154,223,255,.72); transform: translateY(-2px); }
.gallery-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gallery-card:hover img { transform: scale(1.035); }
.gallery-card span { position: absolute; z-index: 1; inset: auto 10px 9px; display: flex; align-items: end; justify-content: space-between; text-align: left; }
.gallery-card b { color: var(--cyan); font: 600 .68rem/1 ui-monospace, monospace; }
.gallery-card small { color: rgba(235,242,248,.78); font: .62rem/1 ui-monospace, monospace; }
.photo-viewer { position: absolute; z-index: 1; inset: 0; }
.gallery-back { position: absolute; z-index: 3; top: 19px; right: 66px; height: 34px; padding: 0 12px; border: 1px solid rgba(255,255,255,.18); color: #dbe8f2; background: rgba(0,0,0,.48); cursor: pointer; font-size: .7rem; letter-spacing: .06em; }
.dialog-photo-frame { position: absolute; z-index: 1; inset: 88px 92px 76px; overflow: hidden; background: rgba(1,2,5,.62); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 24px 90px rgba(0,0,0,.72), 0 0 0 9px rgba(1,5,10,.32); }
#dialogImage { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.dialog-caption { position: absolute; z-index: 2; inset: auto 0 0; display: flex; gap: 14px; min-height: 58px; padding: 13px 19px; align-items: center; background: linear-gradient(90deg, rgba(2,6,11,.94), rgba(2,6,11,.72)); border-top: 1px solid rgba(255,255,255,.1); }
.dialog-caption span { color: var(--cyan); font: .72rem ui-monospace, monospace; }
.dialog-caption div { display: grid; gap: 3px; }
.dialog-caption strong { font-size: .84rem; }
.dialog-caption small { color: #718093; font-size: .68rem; }
.dialog-close { position: absolute; z-index: 3; top: 16px; right: 16px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.2); color: white; background: rgba(0,0,0,.52); cursor: pointer; font-size: 1.3rem; }
.dialog-nav { position: absolute; z-index: 2; top: 50%; width: 42px; height: 64px; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.16); color: white; background: rgba(0,0,0,.46); font-size: 2rem; cursor: pointer; backdrop-filter: blur(8px); }
.dialog-prev { left: 10px; }
.dialog-next { right: 10px; }
.dialog-nav:disabled { display: none; }
.map-credit { position: absolute; z-index: 3; right: 16px; bottom: 9px; color: rgba(178,197,212,.55); font-size: .58rem; text-decoration: none; }
.location-flight .intro-panel, .location-flight .telemetry { opacity: .2; transition: opacity .6s; }
@keyframes gallery-arrival { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse { 50% { opacity: .35; box-shadow: 0 0 4px #65cafa; } }
@media (max-width: 860px) {
  .topbar { height: 61px; padding: 0 17px; }
  .topbar-actions { gap: 10px; }
  .brand { font-size: .76rem; }
  .viewport-frame { inset: 77px 14px 14px; }
  .intro-panel { top: 81px; bottom: auto; left: 18px; width: calc(100vw - 36px); }
  h1 { max-width: 480px; font-size: clamp(1.7rem, 7.8vw, 2.9rem); }
  .hint { margin: 10px 0 12px; font-size: .72rem; }
  .telemetry { left: 14px; right: 14px; bottom: 14px; width: auto; padding: 13px; }
  .metric { min-height: 57px; padding: 9px; }
  .scale-note, .legend { display: none; }
  .drag-cue { display: none; }
  .photo-dialog { width: 96vw; height: 86vh; }
  .dialog-photo-frame { inset: 84px 48px 76px; }
  .gallery-overview { inset: 96px 14px 32px; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 9px; }
}
@media (max-width: 520px) {
  .brand span:last-child { display: none; }
  .time-block span:nth-child(2) { display: none; }
  .time-block strong { grid-column: 2; font-size: .82rem; }
  .intro-panel h1 { max-width: 325px; }
  .photo-status { display: none; }
  .metric-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  .upload-button { transition: none; }
}