body {
  background-color: #fff;
  color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 2.5rem 1.25rem; }

main {
  max-width: 38rem;
  margin: 0 auto; }

h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 1rem; }

h2 {
  font-size: 1.2rem;
  margin: 2.5rem 0 0.5rem; }

p, ul {
  margin: 0 0 1rem; }

ul {
  padding-left: 1.25rem; }

li {
  margin-bottom: 0.4rem; }

.lead {
  font-size: 1.15rem; }

.apps {
  list-style: none;
  padding-left: 0;
  margin-top: 2.5rem; }
  .apps li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.75rem; }
  .apps img {
    flex-shrink: 0;
    width: 64px;
    height: 64px; }
  .apps p {
    margin: 0.2rem 0 0; }

a {
  color: #0a58d0; }

footer {
  max-width: 38rem;
  margin: 4rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  color: #666;
  font-size: 0.9rem; }
  footer p {
    margin: 0 0 0.3rem; }
  footer a {
    color: #666; }
  footer span {
    margin: 0 0.4rem; }

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1c1c1e;
    color: #e8e8ea; }
  a {
    color: #6ea8ff; }
  footer {
    border-top-color: rgba(255, 255, 255, 0.15);
    color: #9a9aa0; }
    footer a {
      color: #9a9aa0; } }