/* The chart and cockpit retain their original scroll coordinates.
   These rules dress the live portal controls and its destination menu. */
:root.ct-atlas {
  --sans:var(--ct-font-ui);
  --serif:var(--ct-font-kai);
  --clear-face:linear-gradient(155deg,#ccedff14,transparent 44%,#9abfc414),#07142366;
}
.header,.header.is-scrolled {
  inset:0 0 auto; height:76px; padding:0 clamp(22px,5vw,92px); border:0;
  border-radius:0; box-shadow:none; background:linear-gradient(#030b19b8,transparent);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.header.is-scrolled { background:#08111fe8; }
.brand { font:600 20px/1.2 var(--sans); gap:8px; letter-spacing:.06em; }
.header nav { gap:28px; font:500 14px/1.4 var(--sans); letter-spacing:.07em; }
.header nav>span { display:none; }
.header nav a { position:relative; }
.header nav a[aria-current]::after {
  content:""; position:absolute; bottom:4px; left:23%; right:23%; height:2px;
  background:var(--gold); border-radius:2px;
}
.atlas-menu-trigger,.author-open,.hero-coordinates>a,.view-switch.glass {
  border:0; background:var(--clear-face); backdrop-filter:blur(4px) saturate(1.12);
  -webkit-backdrop-filter:blur(4px) saturate(1.12);
  box-shadow:inset 0 1px 1px #e8f4ff36,inset 0 -2px 4px #182b4152,0 5px 16px #02081155;
}
.atlas-menu-trigger { position:relative; z-index:3; min-height:46px; padding:0 18px; border-radius:24px; }
.atlas-menu-trigger>span { position:relative; z-index:2; display:flex; align-items:center; gap:9px; font:600 14px/1.4 var(--sans); text-shadow:0 1px 5px #030e20; }
.atlas-menu-trigger svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.atlas-lens { position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
.atlas-menu-trigger.live { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; }
.departure-world { background:none; }
.departure-world picture,.departure-world img { display:block; width:100%; height:100%; object-fit:cover; }
.star-drift { position:absolute; inset:0; pointer-events:none; overflow:hidden; mask-image:linear-gradient(#000 15%,#000 34%,transparent 70%); }
.star-drift i { position:absolute; inset:-24px; opacity:.6; background-image:radial-gradient(1px 1px at 21% 19%,#e0ecfc,transparent),radial-gradient(1.2px 1.2px at 68% 65%,#b0cdee,transparent),radial-gradient(1px 1px at 94% 40%,#e3c197,transparent); background-size:239px 187px; }
.star-drift i+i { opacity:.8; background-size:389px 231px; filter:drop-shadow(0 0 2px #cbd7eb77); }
.has-motion .star-drift i { animation:atlas-drift 20s ease-in-out infinite alternate; }
.has-motion .star-drift i+i { animation-duration:14s; animation-name:atlas-near; }
@keyframes atlas-drift { to { transform:translate(6px,-4px); } }
@keyframes atlas-near { to { transform:translate(18px,-12px); } }
.page-hidden .star-drift i,.modal-open .star-drift i { animation-play-state:paused; }
.hero-title h1 { line-height:1; }
.hero-title img { display:block; width:clamp(230px,22vw,335px); max-width:72vw; height:auto; filter:drop-shadow(0 6px 20px #071c30a8); }
.hero-orbit { display:block; inset:23% -13%; border-color:#e5be7645; border-left-color:#e5be7692; }
.hero-subtitle,.section-heading h2,.author-copy h2,.portal-copy h2 { font-family:var(--ct-font-kai); font-weight:400; }
.hero-subtitle { font-size:clamp(26px,3vw,42px); gap:18px; line-height:1.35; margin-top:0; }
.hero-line { font:400 clamp(14px,1.3vw,18px)/1.75 var(--sans); letter-spacing:.08em; }
.hero-coordinates { width:min(870px,100%); gap:16px; margin-top:clamp(25px,5vh,46px); }
.hero-coordinates>a { min-height:86px; padding:4px 16px 4px 7px; gap:10px; border-radius:20px; background-color:#0c1a2a44; }
.hero-coordinates>a:hover { background-color:#13283b77; }
.quick-planet { width:80px; height:69px; }
.quick-copy { border:0; padding:0; text-shadow:0 1px 3px #020912,0 2px 10px #020a13; }
.hero-coordinates>a { background-color:#08152788; }
.hero-coordinates>a:hover { background-color:#10223899; }
.quick-copy strong,.solar-label strong,.catalog-application strong { font-family:var(--sans); letter-spacing:.03em; font-weight:600; }
.quick-copy strong { font-size:20px; }
.solar-label small { display:block; opacity:1; font:500 11px/1.4 var(--ct-font-coordinate); letter-spacing:.11em; color:#e5d6bf; }
.solar-label em { font-style:normal; }
.section-heading h2 { color:var(--gold); }
.author-copy .atlas-name-ink { font:inherit; }
.atlas-ink { font-family:var(--ct-font-kai); }
@supports (mask-image:url("")) or (-webkit-mask-image:url("")) {
  .atlas-ink,.atlas-name-ink { display:inline-block; position:relative; vertical-align:middle; }
  .atlas-ink { width:4.16em; height:1.30em; }
  .atlas-name-ink { width:3.12em; height:1.30em; }
  .atlas-ink>span,.atlas-name-ink>span { opacity:0; }
  .hero-subtitle .atlas-ink,.hero-subtitle .atlas-ink span { background:none; transform:none; }
  .atlas-ink::after,.atlas-name-ink::after { content:""; position:absolute; inset:0; background:currentColor; mask:url(atlas-title.png) center / contain no-repeat; -webkit-mask:url(atlas-title.png) center / contain no-repeat; }
  .atlas-name-ink::after { mask-image:url(navigator-name.png); -webkit-mask-image:url(navigator-name.png); }
}
.author-open { border-radius:26px; padding:4px 14px 4px 6px; gap:7px; min-height:46px; font:500 14px/1.5 var(--sans); }
.author-open svg,.author-open span { position:relative; z-index:1; }
.author-open svg { filter:drop-shadow(0 1px 3px #c58a4830); }
.view-switch button,.motion-toggle { min-height:44px; font-family:var(--sans); }
.author-role,.author-copy h3,.wechat-contact-title,.wechat-dialog-heading h2,.footer>p { font-family:var(--sans); }
.author-summary { font-size:16px; line-height:1.75; }
.atlas-menu {
  position:fixed; inset:80px clamp(18px,4vw,74px) auto auto; margin:0;
  padding:20px 0 8px; width:min(430px,calc(100vw - 24px)); max-height:calc(100svh - 96px);
  overflow:auto; color:#f7f3e9; background:linear-gradient(138deg,#213246f2,#101f32fa 65%); border:1px solid #c9d9e126; border-radius:24px;
}
.atlas-menu::backdrop { background:#02091488; backdrop-filter:blur(3px); }
.menu-heading,.atlas-tabs,.all-apps { margin-inline:24px; }
.menu-heading { display:flex; align-items:center; justify-content:space-between; }
.menu-heading h2 { font:600 20px/1.5 var(--sans); }
.menu-close { min-width:44px; min-height:44px; border-radius:50%; background:#eaf5ff0b; font:24px/1 var(--sans); }
.atlas-tabs { display:flex; gap:10px; overflow:auto; scrollbar-width:thin; border-bottom:1px solid #d8e5f322; }
.atlas-tabs button { position:relative; white-space:nowrap; min-height:46px; min-width:44px; padding:0 5px; background:none; color:#c1cfde; font-size:14px; }
.atlas-tabs button[aria-pressed=true] { color:#ffe4b0; }
.atlas-tabs button[aria-pressed=true]::after { content:""; position:absolute; height:2px; inset:auto 6px 2px; background:currentColor; border-radius:2px; }
.atlas-cards { --card-width:71%; display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; margin-left:24px; padding:34px 0 8px; scrollbar-width:thin; scrollbar-color:#55687b transparent; }
.atlas-cards::after { content:""; flex:0 0 calc(100% - var(--card-width) - 12px); }
.atlas-card { --tint:#607e84; flex:0 0 var(--card-width); display:grid; min-width:0; align-content:end; scroll-snap-align:start; border-radius:18px; background:linear-gradient(140deg,color-mix(in srgb,var(--tint) 60%,#263649),#132338 82%); background-color:#334459; padding:0 8px 8px; }
.atlas-card[data-color=mars] { --tint:#b4796a; }
.atlas-card[data-color=jupiter] { --tint:#af895e; }
.atlas-card[data-color=saturn] { --tint:#8780a0; }
.atlas-card .menu-world { height:100px; background-size:contain; background-position:center; background-repeat:no-repeat; margin:-15px 0 4px; filter:drop-shadow(0 4px 6px #0005); }
.atlas-caption { display:grid; grid-template-columns:1fr auto; gap:5px; align-items:center; min-height:80px; border-radius:12px; padding:12px; color:#182d3a; background:#eef4f2; }
.atlas-caption strong { font-size:19px; overflow-wrap:anywhere; }
.atlas-caption small { grid-row:2; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.atlas-caption i { grid-column:2; grid-row:1/3; font:18px/1 var(--sans); }
.all-apps { display:inline-flex; align-items:center; gap:8px; min-height:44px; font:14px/1.4 var(--sans); color:#dfd8c8; }
.atlas-empty { color:#c8d2df; font-size:14px; }
@media(max-width:700px) {
  .header,.header.is-scrolled { height:63px; padding:0 16px; }
  .header nav { margin-left:auto; margin-right:14px; font-size:13px; }
  .brand span { display:none; }
  .atlas-menu-trigger { min-height:44px; padding-inline:12px; }
  .hero-title img { width:clamp(165px,53vw,220px); }
  .hero-subtitle { font-size:28px; margin-top:4px; }
  .hero-line { font-size:14px; }
  .hero-coordinates { gap:9px; margin-top:30px; }
  .hero-coordinates>a { min-height:104px; gap:0; padding:4px 2px 9px; border-radius:16px; }
  .quick-copy strong { font-size:16px; }
  .quick-planet { width:72px; height:52px; }
  .quick-copy small { font-size:11px; }
  .atlas-menu { inset:auto 0 0; width:100%; max-width:100%; max-height:82svh; padding-bottom:max(8px,env(safe-area-inset-bottom)); border-radius:24px 24px 0 0; }
  .menu-heading,.atlas-tabs,.all-apps { margin-inline:18px; }
  .atlas-cards { margin-left:18px; }
  .intro-copy { top:43%; }
  .solar-label { gap:4px; }
  .footer { gap:14px; }
  .footer>p { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) { .star-drift i { animation:none !important; } }
@media (prefers-reduced-transparency:reduce) {
  .atlas-menu-trigger,.author-open,.hero-coordinates>a,.view-switch.glass { background:var(--ct-glass-fallback); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .atlas-menu { background:#142334; }
}
@media(forced-colors:active) {
  .atlas-ink::after,.atlas-name-ink::after { display:none; }
  .atlas-ink>span,.atlas-name-ink>span { opacity:1; }
  .atlas-menu-trigger,.atlas-card,.hero-coordinates>a { border:1px solid ButtonText; }
}