/* Mercury's landing page (Jes, Telegram #13818). */
:root {
  --mercury: #87CEEB;
  --cream: #f4f1e8;
  --cream-dimmed: #c4c1b8;
  --copper: #e09664;
  --space: #0a0a0f;
  --font-display: 'Crimson Pro', serif;
  --font-body: 'IBM Plex Sans', sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--space); color: var(--cream); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
.mercury-page { max-width: 32rem; margin: 0 auto; padding: 1rem 1rem 3rem; }

.mercury-art { margin: 0 auto 1.5rem; }
.mercury-art img { display: block; width: 100%; height: auto; border-radius: 50%; }
.mercury-title { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; line-height: 1.15; margin: 0 0 1.75rem; color: var(--copper); }

.mercury-orbits h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin: 0 0 0.6rem; }
.mercury-orbits canvas { display: block; width: 100%; background: #000; cursor: pointer; }
.mercury-orbit-top { aspect-ratio: 1; border-radius: 0.9rem 0.9rem 0 0; }
.mercury-orbit-strip { height: 110px; border-top: 1px solid rgba(255,255,255,0.08); border-radius: 0 0 0.9rem 0.9rem; }
.mercury-orbit-controls { margin-top: 0.6rem; }
.mercury-orbit-controls button { padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: var(--cream); font: inherit; font-size: 0.8rem; }