/* MoonLake's site: the app's night-sky palette, readable in light and dark mode. */
:root {
  color-scheme: light dark;
  --accent: #0F7584;
  --night: #2C3380;
  --moon: #F6F1E1;
  --muted: #5f6070;
  --card: #f3f3f7;
  --rule: #e2e2ea;
}
@media (prefers-color-scheme: dark) {
  :root { --accent: #4CC3D2; --muted: #a3a6bd; --card: #151833; --rule: #262a4d; }
  body { background: linear-gradient(#12153a, #03050f) fixed; }
}
body { margin: 0; font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 32px 20px 72px; }
a { color: var(--accent); }

header.hero { display: flex; align-items: center; gap: 20px; margin-bottom: 8px; }
header.hero img { border-radius: 22px; box-shadow: 0 6px 24px rgba(20, 24, 80, 0.35); }
h1 { margin: 0.1em 0; font-size: 2.2em; }
h2 { margin-top: 2em; padding-top: 0.6em; border-top: 1px solid var(--rule); }
h3 { margin-bottom: 0.2em; }
.muted { color: var(--muted); }
.tagline { margin: 0; font-size: 1.1em; }

nav.toc { background: var(--card); border-radius: 14px; padding: 12px 18px; margin: 24px 0; }
nav.toc ol { margin: 0.3em 0; padding-left: 1.3em; columns: 2; column-gap: 28px; }
nav.toc li { break-inside: avoid; }

figure { margin: 18px 0 22px; }
figure img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--rule); }
figcaption { font-size: 0.9em; color: var(--muted); margin-top: 6px; text-align: center; }

table { border-collapse: collapse; width: 100%; margin: 12px 0 18px; font-size: 0.95em; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; }

.gesture { display: inline-block; padding: 0 7px; border-radius: 6px; background: var(--card); font-size: 0.9em; white-space: nowrap; }
.note { background: var(--card); border-left: 4px solid var(--accent); border-radius: 8px; padding: 10px 14px; }
.chips span { display: inline-block; margin: 0 6px 6px 0; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--rule); font-size: 0.9em; }

@media (max-width: 560px) { nav.toc ol { columns: 1; } header.hero { flex-direction: column; align-items: flex-start; } }