/* One stylesheet for the front page and the guides. Night and green, from the logo. */
:root {
  color-scheme: dark;
  --bg: #040705;
  --card: #0a110c;
  --raised: #0f1a13;
  --line: #17271c;
  --fg: #dbe7de;
  --muted: #7f9587;
  --accent: #18ed42;
  --accent-dim: #0c9628;
  --sand: #f6c478;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 48px 16px 80px; }
main.wide { max-width: 1040px; padding-top: 0; }
h1 { font-size: 2.4rem; margin: 0 0 4px; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; margin: 0 0 16px; letter-spacing: -0.01em; }
h3 { font-size: 1rem; margin: 0 0 8px; }
p { margin: 0 0 14px; }
a { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
code, pre { font: 0.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code { overflow-wrap: anywhere; }
pre { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; overflow-x: auto; margin: 0 0 14px; }
.note { color: var(--muted); font-size: 0.92rem; }
footer { margin-top: 56px; color: var(--muted); font-size: 0.9rem; border-top: 1px solid var(--line); padding-top: 16px; }

/* front page */
.hero { position: relative; text-align: center; padding: 56px 16px 0; overflow: hidden; background: radial-gradient(ellipse 70% 55% at 50% 38%, rgba(24, 237, 66, 0.13), transparent 70%), linear-gradient(#02040a, var(--bg)); }
.hero .stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero > * { position: relative; }
.hero img.logo { width: min(240px, 56vw); height: auto; border-radius: 22%; box-shadow: 0 0 80px rgba(24, 237, 66, 0.22); }
.hero h1 { font-size: clamp(2.6rem, 9vw, 4.2rem); margin: 20px 0 6px; }
.hero .tag { color: var(--muted); font-size: 1.15rem; max-width: 34rem; margin: 0 auto 24px; }
.versions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--accent-dim); background: rgba(24, 237, 66, 0.07); color: var(--fg); text-decoration: none; font-weight: 600; }
.pill:hover { background: rgba(24, 237, 66, 0.16); border-color: var(--accent); }
.pill b { color: var(--accent); font: 600 1rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.dunes { display: block; width: 100%; height: 120px; margin-top: 32px; }
section { padding: 56px 0 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; min-width: 0; }
.card h3 { color: var(--accent); }
.card p:last-child, .card ol:last-child { margin-bottom: 0; }
.facts { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.facts li { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; color: var(--muted); font-size: 0.92rem; }
figure { margin: 0 0 24px; }
figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; }
figcaption { color: var(--muted); font-size: 0.92rem; margin-top: 8px; }
.pick { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.pick th, .pick td { text-align: left; vertical-align: top; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); }
.pick th { color: var(--muted); font-weight: 500; width: 46%; }
.pick tr:last-child th, .pick tr:last-child td { border-bottom: 0; }
ol.steps { margin: 0 0 14px; padding-left: 20px; }
ol.steps li { margin: 8px 0; }
ol.steps pre { margin: 6px 0 0; }

/* guides */
.crumbs { color: var(--muted); font-size: 0.9rem; margin-bottom: 24px; }
.guide h1 { font-size: 2rem; }
.guide h2 { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 40px; font-size: 1.25rem; }
.guide h3 { margin-top: 24px; }
.guide li { margin: 6px 0; }
.table { overflow-x: auto; margin: 12px 0; }
.guide table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.guide th, .guide td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }