:root {
  color-scheme: dark;
  --bg: #101412;
  --panel: #1a1f1d;
  --text: #e6ebe8;
  --muted: #9aa5a0;
  --accent: #91e5c5;
  --record: #e5304a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }

.hero {
  text-align: center;
  padding: 72px 20px 48px;
  background: radial-gradient(ellipse at top, #1f2a26, var(--bg) 70%);
}

.logo { border-radius: 28px; }

h1 { margin: 16px 0 8px; font-size: 44px; }

.tagline {
  max-width: 560px;
  margin: 0 auto 28px;
  color: var(--muted);
  font-size: 18px;
}

.downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.button {
  padding: 12px 22px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.button.primary { background: var(--accent); color: #0b0f0d; }
.button:hover { filter: brightness(1.1); }

.note { color: var(--muted); font-size: 14px; max-width: 560px; margin: 12px auto 0; }

main { max-width: 760px; margin: 0 auto; padding: 0 20px 40px; }

section { margin-top: 48px; }

h2 { border-bottom: 1px solid #2a312e; padding-bottom: 8px; }

.steps { padding-left: 22px; }
.steps li { margin-bottom: 8px; }

code {
  background: var(--panel);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.92em;
}

pre {
  background: var(--panel);
  padding: 14px 16px;
  border-radius: 10px;
  overflow-x: auto;
}

pre code { padding: 0; background: none; }

footer {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 32px 20px 48px;
  border-top: 1px solid #2a312e;
}