:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #16191f;
  --muted: #5d6573;
  --line: #e2e5ea;
  --accent: #2f5fb3;
  --accent-text: #ffffff;
  --accent-hover: #264f97;
  --note: #fff7e0;
  --note-line: #f0dca0;
  --radius: 14px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1117;
    --surface: #161b24;
    --text: #e8eaee;
    --muted: #9aa3b2;
    --line: #262d3a;
    --accent: #4f86e0;
    --accent-text: #ffffff;
    --accent-hover: #6497ea;
    --note: #2a2414;
    --note-line: #4a3f1c;
  }
}

* {
  box-sizing: border-box;
}

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

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

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

main,
.site-footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Not in the content column: the icon sits in the page's top left corner and
   takes no room, so the content starts at the top as on the home page. When
   the window is too narrow for it to fit beside the column, it goes above. */
.site-header {
  position: absolute;
  top: 16px;
  left: 20px;
}

@media (max-width: 860px) {
  .site-header {
    position: static;
    padding: 16px 20px 0;
  }
}

/* A page that starts with its heading (404). */
main > h1:first-child {
  padding-top: 32px;
}

/* The home icon in the top left corner: the way back to the home page. */
.site-header a {
  display: inline-block;
  color: var(--muted);
  transition: color 0.15s;
}

.site-header a:hover {
  color: var(--accent);
}

.site-header svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-footer {
  padding-top: 32px;
  padding-bottom: 40px;
  color: var(--muted);
  font-size: 14px;
}

h1 {
  font-size: 40px;
  line-height: 1.15;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 17px;
  margin: 22px 0 4px;
}

h3 + p {
  margin-top: 0;
}

h2 {
  font-size: 22px;
  margin: 40px 0 12px;
}

.lead {
  font-size: 20px;
  color: var(--muted);
  margin: 0;
}

/* App heading: icon beside the name. */
.hero {
  display: flex;
  gap: 22px;
  align-items: center;
  padding: 36px 0 8px;
}

.hero img {
  width: 112px;
  height: 112px;
  flex: none;
}

/* Download buttons. */
.downloads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.download {
  display: block;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-text);
  text-decoration: none;
  transition: background 0.15s;
}

.download:hover {
  background: var(--accent-hover);
}

.download strong {
  display: block;
  font-size: 19px;
}

.download span {
  font-size: 14px;
  opacity: 0.85;
}

.version {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}

/* The screenshot (it carries its own rounded corners and shadow). */
.shots {
  margin: 32px 0 0;
}

.shots figure {
  margin: 0;
}

.shots img {
  display: block;
  width: 100%;
  height: auto;
}

.shots figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}

/* Small retro screenshots, scaled up with sharp pixels. */
.shots img.pixel-art {
  max-width: 512px;
  margin: 0 auto;
  image-rendering: pixelated;
  border-radius: 6px;
}

.shots figure:has(.pixel-art) figcaption {
  text-align: center;
}

/* The camera brands: short items, in columns where there is room. */
ul.brands {
  columns: 2 220px;
  column-gap: 24px;
  padding-left: 1.2em;
  margin: 8px 0 12px;
}

ul.brands li {
  margin: 3px 0;
  break-inside: avoid;
}

ul.features {
  padding-left: 1.2em;
}

ul.features li {
  margin: 6px 0;
}

.note {
  background: var(--note);
  border: 1px solid var(--note-line);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 15px;
}

/* Profile header (home page): banner with the avatar overlapping its bottom edge. */
.profile {
  padding-top: 32px;
}

.profile .banner {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  border-radius: var(--radius);
}

.profile .avatar {
  display: block;
  width: 128px;
  height: 128px;
  margin: -64px 0 14px 24px;
  border-radius: 50%;
  border: 4px solid var(--bg);
  position: relative;
}

.meta {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
}

/* Lists of apps (home page). */
.card {
  display: flex;
  gap: 18px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  color: var(--text);
  text-decoration: none;
  margin-top: 16px;
}

.card:hover {
  border-color: var(--accent);
}

.card img {
  width: 64px;
  height: 64px;
  flex: none;
}

.card p {
  margin: 2px 0 0;
  color: var(--muted);
}

/* The page shown while a download starts. */
.steps {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 24px;
}

.steps ol {
  padding-left: 1.2em;
}

.steps li {
  margin: 10px 0;
}

kbd {
  font: inherit;
  font-weight: 600;
}

@media (max-width: 520px) {
  h1 {
    font-size: 32px;
  }

  .hero {
    gap: 16px;
  }

  .hero img {
    width: 80px;
    height: 80px;
  }

  .profile .avatar {
    width: 96px;
    height: 96px;
    margin: -48px 0 12px 16px;
  }
}

/* A small picture inside a line of text, as tall as the letters. */
.inline-icon {
  height: 0.9em;
  width: auto;
  vertical-align: -0.12em;
  margin-right: 0.25em;
}

/* An emoji in a line of text, enlarged to the height of .inline-icon. */
.inline-emoji {
  font-size: 1.05em;
  line-height: 1;
  margin-right: 0.3em;
}