/* ============================================================
   quickguide.space - styles.
   Cosmic dark theme ported from the interactive design, adapted
   for a multi-page, server-rendered site. Client JS only enhances.
   ============================================================ */
:root {
  --bg0: #03040a;
  --bg1: #070b18;
  --accent: #7fb4ff;
  --accent2: #cfe2ff;
  --glow: rgba(127, 180, 255, .5);
  --panel: rgba(12, 18, 34, .62);
  --line: rgba(130, 165, 225, .16);
  --text: #e6ecf6;
  --sub: #93a3c2;
  --faint: #5f7093;
  --wrap: 1180px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100%;
  background: radial-gradient(120% 90% at 72% 6%, rgba(40, 64, 120, .30), transparent 52%),
              radial-gradient(90% 80% at 8% 96%, rgba(96, 64, 170, .18), transparent 58%),
              linear-gradient(180deg, #06080f, #03040a 62%, #04050c);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -.01em; }

.qg-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.qg-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.qg-kicker {
  font: 600 10px/1 'IBM Plex Mono', monospace; letter-spacing: .34em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 10px;
}
.qg-h1 { font: 600 clamp(30px, 5vw, 46px)/1.02 'Space Grotesk'; color: #f2f6fd; }
.qg-h2 { font: 600 clamp(22px, 3vw, 30px)/1.1 'Space Grotesk'; color: #eef4fd; }

/* ---- starfield backdrop ---- */
.qg-stars-far, .qg-stars-near, .qg-vignette { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.qg-stars-far {
  opacity: .7;
  background-image: radial-gradient(1px 1px at 18% 22%, #cfe0ff, transparent), radial-gradient(1px 1px at 62% 14%, #fff, transparent),
    radial-gradient(1px 1px at 82% 62%, #bcd2ff, transparent), radial-gradient(1px 1px at 34% 74%, #fff, transparent),
    radial-gradient(1px 1px at 8% 52%, #e6f0ff, transparent), radial-gradient(1px 1px at 92% 34%, #cfe0ff, transparent),
    radial-gradient(1px 1px at 46% 46%, #fff, transparent);
  background-size: 420px 420px; background-repeat: repeat;
}
.qg-stars-near {
  background-image: radial-gradient(1.7px 1.7px at 28% 32%, #fff, transparent), radial-gradient(1.9px 1.9px at 76% 24%, #dcecff, transparent),
    radial-gradient(1.6px 1.6px at 52% 68%, #fff, transparent), radial-gradient(2px 2px at 88% 80%, #c8dcff, transparent),
    radial-gradient(1.6px 1.6px at 14% 84%, #fff, transparent);
  background-size: 640px 640px; background-repeat: repeat; animation: qg-tw 6s ease-in-out infinite;
}
.qg-vignette { z-index: -1; background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(2, 3, 8, .5) 100%); }
@keyframes qg-tw { 0%, 100% { opacity: .4; } 50% { opacity: .95; } }
@keyframes qg-rot { to { transform: rotate(360deg); } }
@keyframes qg-fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes qg-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes qg-coronaP { 0%, 100% { opacity: .6; transform: translate(-50%, -50%) scale(1); } 50% { opacity: .95; transform: translate(-50%, -50%) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } html { scroll-behavior: auto; } }

/* ---- header ---- */
.qg-top { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(6, 9, 18, .86), rgba(6, 9, 18, .5)); border-bottom: 1px solid var(--line); }
.qg-top-inner { display: flex; align-items: center; gap: 22px; height: 62px; }
.qg-brand { display: flex; align-items: center; gap: 10px; }
.qg-brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  color: #ffcf6e; background: rgba(255, 190, 100, .1); border: 1px solid rgba(255, 190, 100, .28); }
.qg-brand-name { font: 600 17px 'Space Grotesk'; color: #f2f6fd; }
.qg-acc { color: var(--accent); }
.qg-nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.qg-nav a { padding: 8px 13px; border-radius: 9px; font: 500 13px 'IBM Plex Sans'; color: var(--sub); transition: .15s; }
.qg-nav a:hover { color: #fff; background: rgba(127, 180, 255, .1); }
.qg-nav a.active { color: #f2f6fd; background: rgba(127, 180, 255, .14); }

/* ---- buttons ---- */
.qg-btn-primary, .qg-btn-ghost { display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font: 600 14px 'Space Grotesk'; border-radius: 13px; transition: .16s; }
.qg-btn-primary { padding: 13px 22px; color: #ffe9cf; border: 1px solid rgba(255, 193, 112, .55);
  background: linear-gradient(135deg, rgba(255, 182, 92, .26), rgba(255, 148, 58, .14)); box-shadow: 0 10px 30px rgba(255, 150, 60, .24); }
.qg-btn-primary:hover { transform: translateY(-1px); border-color: rgba(255, 206, 130, .85);
  background: linear-gradient(135deg, rgba(255, 190, 100, .38), rgba(255, 150, 60, .22)); }
.qg-btn-ghost { padding: 12px 20px; color: #eaf2ff; border: 1px solid var(--line); background: rgba(20, 28, 48, .6); }
.qg-btn-ghost:hover { border-color: var(--accent); background: rgba(127, 180, 255, .14); }

/* ---- HOME hero + orbit map ---- */
.qg-home { display: block; padding-bottom: 60px; }
.qg-hero { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 30px; align-items: center;
  padding-top: 34px; padding-bottom: 24px; }
.qg-hero-title { font: 600 clamp(36px, 6vw, 60px)/.98 'Space Grotesk'; color: #f2f6fd; margin: 4px 0 0; }
.qg-hero-sub { color: var(--sub); font-size: 15px; margin: 14px 0 0; max-width: 40ch; }
.qg-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.qg-orbit-frame { position: relative; width: 100%; aspect-ratio: 1 / .64; overflow: hidden; }
.qg-orbit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 86%; aspect-ratio: 1; }
.qg-orbit-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(140, 175, 235, .13);
  border-radius: 50%; transition: border-color .3s ease, box-shadow .3s ease;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .4), #000 58%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .4), #000 58%); }
.qg-orbit-ring.is-hot { border-color: var(--ring-accent); box-shadow: 0 0 22px var(--ring-glow); }
.qg-orbit-belt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border: 1px dashed rgba(200, 170, 120, .16); border-radius: 50%; }
.qg-orbit-trails { position: absolute; inset: 0; pointer-events: none; }
.qg-orbit-trail-dot { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }

.qg-orbit-sun { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30;
  display: grid; place-items: center; }
.qg-orbit-corona { position: absolute; left: 50%; top: 50%; width: 22vmin; height: 22vmin; max-width: 230px; max-height: 230px;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 190, 100, .1) 0deg 7deg, transparent 7deg 26deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 64%); mask-image: radial-gradient(circle, #000 18%, transparent 64%);
  filter: blur(4px); animation: qg-rot 90s linear infinite; }
.qg-orbit-sun::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15vmin; height: 15vmin; max-width: 150px; max-height: 150px;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 196, 92, .5), rgba(255, 150, 50, .12) 46%, transparent 72%); filter: blur(6px); animation: qg-coronaP 6s ease-in-out infinite; }
.qg-orbit-sun-core { position: relative; z-index: 2; width: 7vmin; height: 7vmin; max-width: 74px; max-height: 74px; border-radius: 50%;
  background: url('/assets/globe-sun.png') center/cover; box-shadow: 0 0 34px rgba(255, 168, 60, .7), 0 0 78px rgba(255, 140, 40, .4); }
.qg-orbit-sun-label, .qg-orbit-label { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%);
  font: 500 9px/1 'IBM Plex Mono'; letter-spacing: .12em; color: #aebdd8; text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 1px 4px #04060d; pointer-events: none; }

.qg-orbit-body { position: absolute; transform: translate(-50%, -50%); z-index: 20; will-change: left, top; transition: opacity .3s ease; }
.qg-orbit-core { display: block; position: relative; width: var(--sz); height: var(--sz); transition: transform .2s ease; }
.qg-orbit-body:hover .qg-orbit-core { transform: scale(1.32); }
.qg-orbit-globe { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background-size: cover !important; box-shadow: 0 0 10px var(--glow); }
.qg-orbit-shadow { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; will-change: transform;
  background: radial-gradient(circle at 88% 50%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, .12) 46%, rgba(0, 0, 0, .74) 84%, rgba(6, 8, 16, .92) 100%); }
.qg-orbit-ring-back, .qg-orbit-ring-front { position: absolute; left: 50%; top: 50%; width: 250%; height: 104%;
  transform: translate(-50%, -50%) rotate(-15deg); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side at 50% 50%, transparent 0 52%, rgba(224, 200, 150, .6) 56%, rgba(248, 226, 176, .96) 65%, rgba(158, 138, 102, .24) 72%, rgba(240, 216, 166, .9) 79%, rgba(248, 226, 176, .94) 90%, rgba(186, 164, 124, .45) 98%, transparent 100%); }
.qg-orbit-ring-back { clip-path: inset(0 0 49.5% 0); }
.qg-orbit-ring-front { clip-path: inset(50% 0 0 0); }
.qg-orbit.is-dim .qg-orbit-body:not(:hover) { opacity: .35; }

.qg-orbit-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); width: 190px; padding: 10px 12px;
  border: 1px solid var(--accent); border-radius: 12px; background: rgba(8, 13, 26, .97); box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transition: opacity .16s ease; z-index: 90; pointer-events: none; }
.qg-orbit-body:hover .qg-orbit-tip { opacity: 1; visibility: visible; }
.qg-orbit-tip-name { display: block; font: 600 14px 'Space Grotesk'; color: #f2f6fd; }
.qg-orbit-tip-type { display: block; font-size: 10px; color: var(--sub); margin-top: 2px; }
.qg-orbit-tip-stats { display: flex; gap: 12px; margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(130, 165, 225, .14); }
.qg-orbit-tip-stats > span { font: 600 11px 'IBM Plex Mono'; color: #dbe6f7; }
.qg-orbit-tip-stats b { display: block; font: 500 8px 'IBM Plex Mono'; letter-spacing: .08em; color: var(--faint); text-transform: uppercase; }

/* ---- HOME sections ---- */
.qg-section-head { max-width: 760px; }
.qg-section-lede { color: var(--sub); margin: 8px 0 0; }
.qg-worlds-section { padding-top: 26px; }
.qg-worlds { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 20px; }
.qg-world-card { display: flex; gap: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 15px;
  background: var(--panel); transition: .16s; }
.qg-world-card:hover { border-color: var(--accent); background: rgba(127, 180, 255, .06); transform: translateY(-2px); }
.qg-world-globe { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background-size: cover !important;
  box-shadow: 0 0 12px var(--glow); }
.qg-world-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qg-world-top { display: flex; align-items: baseline; gap: 8px; }
.qg-world-name { font: 600 16px 'Space Grotesk'; color: #f2f6fd; }
.qg-world-symbol { color: var(--accent); opacity: .7; }
.qg-world-type { font-size: 12px; color: var(--sub); }
.qg-world-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font: 500 11px 'IBM Plex Mono'; color: #cdd9ee; }
.qg-world-stat-k { display: block; font-size: 8px; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; }
.qg-world-tag { padding: 1px 8px; border: 1px solid var(--line); border-radius: 10px; color: var(--accent);
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase; align-self: center; }

.qg-home-explore { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 40px; }
.qg-explore-card { display: block; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); transition: .16s; }
a.qg-explore-card:hover { border-color: var(--accent); background: rgba(127, 180, 255, .06); }
.qg-explore-card h3 { font: 600 20px 'Space Grotesk'; color: #f2f6fd; margin: 0 0 6px; }
.qg-explore-card p { color: var(--sub); font-size: 13px; margin: 0; }
.qg-quiz-card .qg-quiz-start { margin-top: 14px; }

.qg-prose { max-width: 760px; margin-top: 48px; }
.qg-prose p { color: #c8d4ea; margin: 14px 0 0; }
.qg-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.qg-prose h2 { margin-top: 30px; }
.qg-prose-note { color: var(--faint); font-size: 13px; margin-top: 18px; }

/* ---- BODY page ---- */
.qg-body { display: block; padding-bottom: 60px; }
.qg-crumbs { display: flex; align-items: center; gap: 8px; font: 500 12px 'IBM Plex Mono'; color: var(--faint); flex-wrap: wrap; }
.qg-crumbs a { color: var(--sub); }
.qg-crumbs a:hover { color: var(--accent); }
.qg-crumb-sep { color: var(--faint); opacity: .6; }
.qg-body-head { padding-top: 20px; }
.qg-body-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px; align-items: start; margin-top: 14px; }

.qg-stage { position: sticky; top: 78px; display: grid; place-items: center; padding: 20px 0;
  min-height: min(66vmin, 560px); }
.qg-globe { position: relative; width: min(58vmin, 460px); aspect-ratio: 1; display: grid; place-items: center; }
.qg-globe-halo { position: absolute; inset: -12%; border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 66%); filter: blur(20px); opacity: .55; }
.qg-globe-img { position: relative; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  animation: qg-floaty 8s ease-in-out infinite; }
.qg-globe-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s ease; }
.qg-globe.is-3d .qg-globe-img { opacity: 0; }
.qg-globe.is-3d .qg-globe-canvas { opacity: 1; }
.qg-stage-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 42px; height: 42px;
  display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--panel);
  backdrop-filter: blur(10px); color: var(--accent); font-size: 22px; transition: .15s; }
.qg-stage-nav:hover { border-color: var(--accent); transform: translateY(-50%) scale(1.08); }
.qg-prev { left: 0; } .qg-next { right: 0; }
.qg-stage-caption { position: absolute; left: 6px; bottom: 4px; pointer-events: none; }
.qg-stage-name { display: flex; align-items: baseline; gap: 12px; }
.qg-stage-name span:first-child { font: 600 clamp(34px, 5vmin, 56px)/.9 'Space Grotesk'; color: #f4f8fe; }
.qg-stage-symbol { font: 400 clamp(24px, 3.5vmin, 38px) 'IBM Plex Sans'; color: var(--accent); opacity: .65; }
.qg-stage-type { color: var(--sub); font-size: 13px; margin-top: 6px; max-width: 340px; }

.qg-panel { min-width: 0; }
.qg-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.qg-badge { padding: 5px 11px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255, 255, 255, .03);
  font: 600 10px 'IBM Plex Mono'; letter-spacing: .08em; color: var(--accent); text-transform: uppercase; }
.qg-tagline { padding: 2px 0 2px 16px; border-left: 2px solid var(--accent); color: #c8d4ea; font-size: 15px; line-height: 1.6; margin: 0 0 22px; }

.qg-section { margin-bottom: 26px; }
.qg-sec-title { font: 600 10px 'IBM Plex Mono'; letter-spacing: .22em; color: var(--faint); text-transform: uppercase; margin-bottom: 12px; }
.qg-mini-k { font: 500 9px 'IBM Plex Mono'; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; }
.qg-note { padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .02);
  color: var(--sub); font-size: 13px; margin: 0; }

.qg-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.qg-fact { padding: 13px 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .02); transition: .16s; }
.qg-fact:hover { border-color: var(--accent); background: rgba(255, 255, 255, .045); }
.qg-fact-k { font: 500 9px 'IBM Plex Mono'; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; }
.qg-fact-v { font: 600 19px/1.1 'Space Grotesk'; color: #eef4fd; margin-top: 5px; }
.qg-fact-sub { font-size: 10px; color: var(--sub); margin-top: 2px; }

.qg-statrow { display: flex; gap: 9px; }
.qg-stat { flex: 1; padding: 13px 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .02); text-align: center; }
.qg-stat-v { font: 600 17px/1.1 'Space Grotesk'; color: var(--accent); }
.qg-stat-l { font-size: 10px; color: var(--sub); margin-top: 5px; }
.qg-stat-sub { font: 400 10px 'IBM Plex Mono'; color: var(--faint); margin-top: 2px; }

.qg-light { display: flex; align-items: center; gap: 13px; padding: 12px 15px; margin-top: 10px; border: 1px solid var(--line);
  border-radius: 13px; background: linear-gradient(135deg, rgba(255, 196, 120, .08), rgba(255, 255, 255, .01)); }
.qg-light-sun { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: url('/assets/globe-sun.png') center/cover; box-shadow: 0 0 12px rgba(255, 168, 60, .5); }
.qg-light-main { font-size: 13px; color: #cbd6ea; }
.qg-light-main strong { color: var(--accent); font-family: 'IBM Plex Mono'; }
.qg-light-sub { font-size: 10px; color: var(--faint); margin-top: 1px; }

.qg-cmp { display: flex; align-items: center; gap: 20px; padding: 18px 16px; border: 1px solid var(--line);
  border-radius: 13px; background: rgba(255, 255, 255, .02); margin-bottom: 10px; }
.qg-cmp-viz { flex: 0 0 auto; position: relative; display: grid; place-items: center; width: 120px; height: 120px; }
.qg-cmp-planet { border-radius: 50%; background-size: cover !important; }
.qg-cmp-earth { position: absolute; left: 0; bottom: 0; border-radius: 50%; background-size: cover !important; border: 1px solid rgba(180, 210, 255, .4); }
.qg-cmp-ratio { font: 600 30px/1 'Space Grotesk'; color: #eef4fd; margin-top: 4px; }
.qg-cmp-note { font-size: 11px; color: var(--faint); margin-top: 7px; }

.qg-gauge { padding: 15px 16px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .02); margin-bottom: 22px; }
.qg-gauge-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.qg-gauge-head .qg-mono { font-size: 13px; color: var(--sub); }
.qg-gauge-bar { position: relative; height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .05); margin: 13px 0 8px; }
.qg-gauge-fill { height: 100%; border-radius: 6px; }
.qg-gauge-earth { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #8fc0f5; border-radius: 2px; }
.qg-gauge-scale { font-size: 10px; color: var(--faint); }
.qg-gauge-weight { margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(130, 165, 225, .13);
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; color: var(--sub); font-size: 12px; }
.qg-gauge-weight strong { font: 600 22px/1 'Space Grotesk'; }

.qg-temp { padding: 17px 16px 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .02); }
.qg-temp-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 15px; }
.qg-temp-v { font: 600 32px/1 'Space Grotesk'; color: #eef4fd; }
.qg-temp-lbl { color: var(--sub); font-size: 12px; }
.qg-temp-bar { position: relative; height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, #5a8ce8, #5fd0e0 26%, #7fd0a0 44%, #e8d29a 60%, #e88a5a 78%, #d94a2a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.qg-temp-earth { position: absolute; top: -4px; width: 2px; height: 18px; background: rgba(143, 192, 245, .95); border-radius: 2px; transform: translateX(-50%); }
.qg-temp-mark { position: absolute; top: -5px; width: 4px; height: 20px; background: #fff; border-radius: 2px; box-shadow: 0 0 7px rgba(0, 0, 0, .7); transform: translateX(-50%); }
.qg-temp-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10px; color: var(--faint); }
.qg-temp-e { color: #8fc0f5; }

.qg-atmo-bar { height: 14px; border-radius: 7px; overflow: hidden; display: flex; border: 1px solid var(--line); margin-bottom: 10px; }
.qg-atmo-bar > div { height: 100%; }
.qg-atmo-legend { display: flex; flex-wrap: wrap; gap: 9px 16px; }
.qg-atmo-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #cbd6ea; }
.qg-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.qg-atmo-pct { color: var(--sub); }

.qg-moons { padding: 15px 16px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .02); }
.qg-moons-count { display: flex; align-items: baseline; gap: 10px; }
.qg-moons-count strong { font: 600 26px/1 'Space Grotesk'; color: #eef4fd; }
.qg-moons-count span { color: var(--sub); font-size: 12px; }
.qg-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.qg-chip { padding: 5px 11px; border: 1px solid var(--line); border-radius: 20px; font: 500 11px 'IBM Plex Sans';
  color: #8fa0bd; background: rgba(255, 255, 255, .02); }
.qg-chip.is-link, .qg-chip.is-moon { color: #dbe6f7; border-color: rgba(140, 175, 235, .32); cursor: pointer; }
.qg-chip.is-link:hover, .qg-chip.is-moon:hover { border-color: var(--accent); color: #fff; }
.qg-rings-line { display: flex; align-items: center; gap: 9px; margin-top: 13px; padding-top: 12px;
  border-top: 1px solid rgba(130, 165, 225, .13); color: #c4d0e6; font-size: 12px; }

.qg-notable { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.qg-notable-item { display: flex; gap: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .02); color: #cbd6ea; font-size: 13px; line-height: 1.5; }
.qg-notable-bar { flex: 0 0 auto; width: 6px; border-radius: 4px; background: var(--accent); box-shadow: 0 0 8px var(--glow); }
.qg-disc { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-top: 12px; border: 1px solid var(--line);
  border-radius: 13px; background: linear-gradient(135deg, rgba(127, 180, 255, .06), rgba(255, 255, 255, .01)); }
.qg-disc-year { flex: 0 0 auto; font: 600 22px 'Space Grotesk'; color: var(--accent); }
.qg-disc div div:last-child { color: #c4d0e6; font-size: 12px; margin-top: 3px; }

.qg-missions { display: flex; flex-direction: column; gap: 9px; }
.qg-mission { display: flex; gap: 14px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .02); transition: .16s; }
.qg-mission:hover { border-color: var(--accent); background: rgba(255, 255, 255, .04); }
.qg-mission-year { flex: 0 0 46px; font: 600 15px 'Space Grotesk'; color: var(--accent); }
.qg-mission-body { min-width: 0; flex: 1; }
.qg-mission-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qg-mission-name { font: 600 13px 'IBM Plex Sans'; color: #e8eefb; }
.qg-mission-type { padding: 2px 8px; border: 1px solid; border-radius: 12px; font: 600 9px 'IBM Plex Mono'; letter-spacing: .06em; text-transform: uppercase; }
.qg-mission-agency { font-size: 10px; color: var(--faint); }
.qg-mission-note { color: var(--sub); font-size: 12px; line-height: 1.5; margin-top: 4px; }

.qg-int-viz { position: relative; width: min(230px, 62%); aspect-ratio: 1; margin: 4px auto 18px; }
.qg-int-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; }
.qg-int-cut { position: absolute; inset: 0; border-radius: 50%; background-size: cover !important; clip-path: inset(0 50% 0 0); }
.qg-int-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .28); }
.qg-int-layers { display: flex; flex-direction: column; gap: 9px; }
.qg-int-layer { display: flex; gap: 12px; align-items: center; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .02); }
.qg-int-layer-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.qg-int-name { font: 600 12.5px 'IBM Plex Sans'; color: #e8eefb; }
.qg-int-range { font-size: 10px; color: var(--faint); }
.qg-int-note { color: var(--sub); font-size: 11.5px; line-height: 1.45; margin-top: 2px; }

.qg-travel { display: flex; flex-direction: column; gap: 9px; }
.qg-travel-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .02); }
.qg-travel-mode { font: 500 12.5px 'IBM Plex Sans'; color: #cbd6ea; }
.qg-travel-sub { font-size: 10px; color: var(--faint); margin-top: 2px; }
.qg-travel-time { font: 600 17px 'Space Grotesk'; color: var(--accent); white-space: nowrap; }
.qg-travel-foot { font-size: 10px; color: var(--faint); margin-top: 8px; }

/* ---- rail ---- */
.qg-rail { display: flex; gap: 8px; overflow-x: auto; padding: 14px 2px 6px; margin-top: 10px; border-top: 1px solid var(--line); }
.qg-rail-item { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; padding: 7px 13px 7px 8px; border: 1px solid var(--line);
  border-radius: 12px; background: rgba(255, 255, 255, .02); transition: .15s; }
.qg-rail-item:hover { border-color: var(--accent); }
.qg-rail-item.is-active { border-color: var(--accent); background: rgba(127, 180, 255, .1); }
.qg-rail-globe { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; background-size: cover !important; box-shadow: 0 0 8px var(--chip-glow); }
.qg-rail-name { font: 600 12px 'IBM Plex Sans'; color: #aebdd8; white-space: nowrap; }
.qg-rail-item.is-active .qg-rail-name { color: #f2f6fd; }

/* ---- moon modal ---- */
.qg-moon-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px;
  background: rgba(3, 5, 12, .62); backdrop-filter: blur(7px); animation: qg-fadeUp .2s ease; }
.qg-moon-modal[hidden] { display: none; }
.qg-moon-card { position: relative; width: min(460px, 100%); padding: 26px 28px 24px; border: 1px solid var(--line);
  border-radius: 18px; background: rgba(9, 14, 27, .97); box-shadow: 0 30px 90px rgba(0, 0, 0, .6); }
.qg-moon-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, .03); color: var(--sub); cursor: pointer; }
.qg-moon-close:hover { border-color: var(--accent); color: #fff; }
.qg-moon-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.qg-moon-globe { flex: 0 0 auto; width: 86px; height: 86px; border-radius: 50%; }
.qg-moon-parent { font: 600 10px 'IBM Plex Mono'; letter-spacing: .28em; color: var(--accent); text-transform: uppercase; margin-bottom: 7px; }
.qg-moon-name { font: 600 28px 'Space Grotesk'; color: #f2f6fd; }
.qg-moon-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; margin-bottom: 14px; }
.qg-moon-stat { padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .02); text-align: center; }
.qg-moon-stat .qg-mini-k { display: block; margin-bottom: 4px; }
.qg-moon-stat strong { font: 600 14px 'Space Grotesk'; color: #eef4fd; }
.qg-moon-fact { padding: 2px 0 2px 14px; border-left: 2px solid var(--accent); color: #c8d4ea; font-size: 13px; line-height: 1.55; margin-bottom: 14px; }
.qg-moon-disc { font-size: 11px; color: var(--faint); font-family: 'IBM Plex Mono'; }

/* ---- quiz overlay ---- */
.qg-quiz-meta { display: flex; justify-content: space-between; font: 600 10px 'IBM Plex Mono'; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.qg-quiz-opts { display: grid; gap: 10px; }
.qg-quiz-opt { text-align: left; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .02);
  color: #cdd9ee; font: 500 14px 'IBM Plex Sans'; cursor: pointer; transition: .15s; }
.qg-quiz-opt:hover:not([disabled]) { border-color: var(--accent); }
.qg-quiz-opt.is-correct { border-color: rgba(95, 206, 138, .7); background: rgba(95, 206, 138, .09); color: #c6ecd4; }
.qg-quiz-opt.is-wrong { border-color: rgba(224, 106, 90, .7); background: rgba(224, 106, 90, .09); color: #f2c4bc; }
.qg-quiz-opt[disabled] { cursor: default; }
.qg-quiz-note { margin-top: 16px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .02);
  color: #c8d4ea; font-size: 13px; line-height: 1.5; animation: qg-fadeUp .2s ease; }

/* ---- COMPARE table ---- */
.qg-compare { padding-bottom: 60px; }
.qg-table-wrap { margin-top: 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.qg-table { width: 100%; min-width: 820px; border-collapse: collapse; }
.qg-table th { position: sticky; top: 0; z-index: 2; background: rgba(8, 12, 24, .96); border-bottom: 1px solid var(--line);
  padding: 13px 12px; font: 600 10px 'IBM Plex Mono'; letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  cursor: pointer; user-select: none; white-space: nowrap; }
.qg-table th:hover { color: var(--accent2); }
.qg-table th.qg-th-body { text-align: left; }
.qg-table th.qg-th-num { text-align: right; }
.qg-table th[aria-sort] { color: var(--accent); }
.qg-table td { padding: 11px 12px; border-bottom: 1px solid rgba(130, 165, 225, .08); font: 500 12px 'IBM Plex Mono'; color: #dbe6f7; text-align: right; white-space: nowrap; }
.qg-table tbody tr { transition: .15s; cursor: pointer; }
.qg-table tbody tr:hover { background: rgba(127, 180, 255, .06); }
.qg-td-body { text-align: left; }
.qg-td-body a { display: flex; align-items: center; gap: 11px; font: 600 13px 'IBM Plex Sans'; color: #e8eefb; }
.qg-cmp-chip { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background-size: cover !important; }
.qg-td-cls { text-align: left; color: var(--sub); font-family: 'IBM Plex Sans'; font-size: 11px; }

/* ---- TIMELINE ---- */
.qg-timeline-page { padding-bottom: 60px; }
.qg-timeline { max-width: 820px; margin: 24px auto 0; }
.qg-tl-decade { font: 600 26px 'Space Grotesk'; color: rgba(230, 236, 246, .22); margin: 22px 0 10px; padding-left: 92px; }
.qg-tl-item { display: grid; grid-template-columns: 64px 28px 1fr; align-items: stretch; }
.qg-tl-year { font: 600 14px 'IBM Plex Mono'; color: var(--accent); text-align: right; padding-top: 16px; }
.qg-tl-rail { position: relative; }
.qg-tl-rail::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(130, 165, 225, .18); }
.qg-tl-dot { position: absolute; left: 50%; top: 20px; width: 9px; height: 9px; transform: translateX(-50%); border-radius: 50%; }
.qg-tl-card { margin: 4px 0; padding: 12px 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .02); transition: .16s; }
.qg-tl-card:hover { border-color: var(--accent); background: rgba(255, 255, 255, .04); }
.qg-tl-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qg-tl-title { font: 600 14px 'IBM Plex Sans'; color: #e8eefb; }
.qg-tl-body { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border: 1px solid var(--line);
  border-radius: 14px; background: rgba(255, 255, 255, .02); font: 500 10px 'IBM Plex Sans'; color: #aebdd8; }
.qg-tl-body:hover { border-color: var(--accent); color: #fff; }
.qg-tl-globe { width: 16px; height: 16px; border-radius: 50%; background-size: cover !important; }
.qg-tl-note { color: var(--sub); font-size: 12px; line-height: 1.5; margin-top: 4px; }

/* ---- MISSIONS ---- */
.qg-missions-page { padding-bottom: 60px; }
.qg-missions-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.qg-missions-stat { padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .02); }
.qg-missions-stat strong { display: block; font: 600 30px/1 'Space Grotesk'; color: #eef4fd; margin-top: 6px; }
.qg-missions-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.qg-missions-type { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 9px; border: 1px solid;
  border-radius: 14px; font: 600 9px/1 'IBM Plex Mono'; letter-spacing: .06em; text-transform: uppercase; background: rgba(255, 255, 255, .02); }
.qg-missions-next { margin-top: 28px; }
.qg-missions-next-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.qg-missions-next-card { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 13px;
  background: rgba(255, 255, 255, .02); transition: .16s; }
.qg-missions-next-card:hover { border-color: var(--mission-accent); background: rgba(255, 255, 255, .045); }
.qg-missions-next-card strong { display: block; font: 600 16px 'Space Grotesk'; color: #eef4fd; margin-top: 2px; }
.qg-missions-next-card em { display: block; font: 600 10px 'IBM Plex Mono'; font-style: normal; letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }
.qg-missions-next-k { font: 500 10px 'IBM Plex Mono'; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.qg-missions-index { margin-top: 30px; }
.qg-missions-destinations { margin-top: 28px; }
.qg-missions-dest-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.qg-missions-dest-link { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px 7px 7px; border: 1px solid var(--line);
  border-radius: 14px; background: rgba(255, 255, 255, .02); color: #cbd6ea; font: 600 12px 'IBM Plex Sans'; transition: .16s; }
.qg-missions-dest-link:hover { border-color: var(--mission-accent); background: rgba(255, 255, 255, .045); }
.qg-missions-dest-link em { font: 600 10px 'IBM Plex Mono'; font-style: normal; color: var(--mission-accent); }
.qg-missions-destination { scroll-margin-top: 84px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(130, 165, 225, .12); }
.qg-missions-destination-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 12px; }
.qg-missions-destination-head h2 { font: 600 24px/1.1 'Space Grotesk'; color: #eef4fd; }
.qg-missions-destination-head p { color: var(--sub); font-size: 12px; margin: 4px 0 0; }
.qg-missions-destination-types { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.qg-missions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 10px; align-items: start; }
.qg-missions-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .02); transition: .16s; margin-bottom: 9px; }
.qg-missions-row:hover { border-color: var(--mission-accent); background: rgba(255, 255, 255, .04); }
.qg-missions-year { font: 600 15px 'Space Grotesk'; color: var(--mission-accent); white-space: nowrap; }
.qg-missions-world { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 4px 10px 4px 5px; border: 1px solid var(--line);
  border-radius: 16px; background: rgba(255, 255, 255, .02); color: #aebdd8; font: 600 11px 'IBM Plex Sans'; }
.qg-missions-world:hover { border-color: var(--mission-accent); color: #fff; }
.qg-missions-globe { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background-size: cover !important; box-shadow: 0 0 8px var(--mission-glow); }
.qg-missions-main { min-width: 0; }
.qg-missions-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qg-missions-top h3 { font: 600 16px 'Space Grotesk'; color: #eef4fd; margin: 0; }
.qg-missions-agency { font-size: 10px; color: var(--faint); }
.qg-missions-main p { color: var(--sub); font-size: 12px; line-height: 1.5; margin: 5px 0 0; }
.qg-missions-brief { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(130, 165, 225, .12); }
.qg-missions-brief p { color: #c8d4ea; font-size: 12.5px; line-height: 1.6; margin-top: 5px; }

/* ---- ABOUT / prose ---- */
.qg-about { padding-bottom: 60px; }

/* ---- 404 ---- */
.qg-404 { text-align: center; padding: 80px 24px 100px; }
.qg-404-title { font: 700 clamp(72px, 16vw, 150px)/1 'Space Grotesk'; color: #f2f6fd; margin: 6px 0; }
.qg-404-sub { color: var(--sub); max-width: 46ch; margin: 0 auto 26px; }
.qg-404-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- footer ---- */
.qg-footer { border-top: 1px solid var(--line); background: linear-gradient(0deg, rgba(7, 11, 22, .7), transparent); margin-top: 40px; }
.qg-footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 26px; padding-top: 36px; padding-bottom: 22px; }
.qg-footer-brand p { color: var(--sub); font-size: 13px; margin: 10px 0 0; max-width: 34ch; }
.qg-footer-nav { display: flex; flex-direction: column; gap: 7px; }
.qg-footer-col-title { font: 600 10px 'IBM Plex Mono'; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.qg-footer-nav a { color: var(--sub); font-size: 13px; }
.qg-footer-nav a:hover { color: var(--accent); }
.qg-footer-base { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 26px;
  border-top: 1px solid var(--line); color: var(--faint); font-size: 12px; }

/* ---- responsive ---- */
@media (max-width: 940px) {
  .qg-hero { grid-template-columns: 1fr; }
  .qg-hero-copy { order: 1; }
  .qg-orbit-frame { order: 2; }
  .qg-body-grid { grid-template-columns: 1fr; }
  .qg-stage { position: relative; top: 0; min-height: 0; }
  .qg-footer-inner { grid-template-columns: 1fr 1fr; }
  .qg-missions-overview { grid-template-columns: 1fr 1fr; }
  .qg-missions-destination-head { grid-template-columns: 1fr; align-items: start; }
  .qg-missions-destination-types { justify-content: flex-start; }
  .qg-missions-row { grid-template-columns: 64px minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .qg-facts { grid-template-columns: 1fr 1fr; }
  .qg-footer-inner { grid-template-columns: 1fr; }
  .qg-nav { display: none; }
  .qg-stage-nav { width: 40px; height: 40px; font-size: 20px; }
  .qg-prev { left: 2px; } .qg-next { right: 2px; }
  .qg-missions-overview { grid-template-columns: 1fr; }
  .qg-missions-grid { grid-template-columns: 1fr; }
  .qg-missions-row { grid-template-columns: 1fr; gap: 8px; }
}