:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --accent: #2b7a72;
  /* The app's paper and ink theme colors, for the home page's grid. */
  --paper: #f4f5f7;
  --grid-line: rgb(26 39 68 / 0.16);
  --hairline: 1px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0f;
    --text: #f5f5f7;
    --muted: #a1a1a6;
    --accent: #6ec4ba;
    --paper: #121620;
    --grid-line: rgb(232 236 244 / 0.16);
  }
}

/* One device pixel, like the app's grid lines. */
@media (min-resolution: 2dppx) {
  :root {
    --hairline: 0.5px;
  }
}

@media (min-resolution: 3dppx) {
  :root {
    --hairline: calc(1px / 3);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

main {
  flex: 1;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 3rem 1.25rem;
}

/* Home */

/* The app's ruled grid paper: 24pt squares, centered so the lines sit evenly around the content. */
.grid-paper {
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, var(--grid-line) var(--hairline), transparent var(--hairline)),
    linear-gradient(to bottom, var(--grid-line) var(--hairline), transparent var(--hairline));
  background-size: 24px 24px;
  background-position: center top;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.app-icon {
  width: 112px;
  height: 112px;
  filter: drop-shadow(0 8px 24px rgb(0 0 0 / 0.18));
}

.hero h1 {
  margin: 1.5rem 0 0.25rem;
}

.hero h1 img {
  display: block;
  width: clamp(180px, 50vw, 240px);
  height: auto;
  margin-bottom: 0.5rem;
}

.tagline {
  margin: 0;
  color: var(--muted);
  font-size: 1.25rem;
}