/* The project's public pages: the same design system as the extension. */

main { max-width: 720px; margin: 0 auto; padding: 56px 24px 80px; }

.hero { text-align: center; margin-bottom: 34px; }
.hero h1 { font-size: 34px; margin: 18px 0 8px; }
.hero .lede { max-width: 34ch; margin: 0 auto 24px; color: var(--muted); font-size: 16px; }
.hero .links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto;
  border-radius: 20px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 17px;
  font-weight: 700;
}

.page-head { margin-bottom: 26px; }
.page-head h1 { font-size: 28px; margin: 14px 0 4px; }
.back { color: var(--muted); font-size: 13px; text-decoration: none; }
.back:hover { color: var(--fg); }

section.card { margin-bottom: 16px; padding: 24px 26px; }
section.card h2 { font-size: 14px; margin-bottom: 12px; }
section.card p + p { margin-top: 12px; }
section.card p, section.card li { color: var(--fg-2); font-size: 14.5px; }

ul { margin: 0; padding-left: 20px; }
li + li { margin-top: 8px; }

code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--sunken);
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { padding: 10px 12px 10px 0; text-align: left; vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
tbody tr + tr td { border-top: 1px solid var(--line); }
td { color: var(--fg-2); }

footer { margin-top: 30px; text-align: center; }

@media (prefers-color-scheme: dark) {
  /* The site has no theme switch, so it follows the reader's system setting. */
  :root {
    --bg: #101315; --surface: #1c2125; --surface-2: #22272b; --sunken: #15181b;
    --fg: #eceef1; --fg-2: #b6bec7; --muted: #8b949e; --faint: #656d76;
    --line: #2c333a; --line-strong: #333b42;
    --accent: #eceef1; --accent-fg: #101315;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.30);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.30), 0 8px 24px rgb(0 0 0 / 0.36);
  }
}