:root {
  color-scheme: light dark;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --link: #0066cc;
  --background: #ffffff;
  --rule: #d2d2d7;
  --badge-background: #000000;
  --badge-text: #ffffff;
  --badge-edge: #000000;
  --shadow: rgba(0, 0, 0, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #f5f5f7;
    --muted: #a1a1a6;
    --link: #4aa3ff;
    --background: #161617;
    --rule: #424245;
    --badge-background: #000000;
    --badge-text: #f5f5f7;
    --badge-edge: #6e6e73;
    --shadow: rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 16px;
  background: var(--background);
  color: var(--text);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Landing page
   One device scene: the Mac window with the iPhone standing in front of its
   right edge, both showing the same conversation, one light and one dark.
   Everything scales with the viewport height so the icon, title, scene,
   badge and links fit on one screen. --chrome is the height of everything
   except the scene; the scene gets the rest, within a legible minimum and a
   maximum width. Short or tiny windows scroll instead of shrinking further.
   The stage is the scene's coordinate box: --mac and --phone are the images'
   widths as fractions of it, --mac-x and --phone-x their left edges and
   --mac-y and --phone-y their top edges, all as fractions of the stage's
   width; --ratio is the stage's height as a fraction of its width (whichever
   image reaches lowest), kept in step with them. The Mac capture is
   1120 by 780, the iPhone's 598 by 1300. */

.home {
  --vh: 1vh;
  --space: clamp(12px, calc(var(--vh) * 3.2), 44px);
  --icon: clamp(52px, calc(var(--vh) * 9), 112px);
  --title: clamp(26px, calc(var(--vh) * 5), 44px);
  --badge: 44px;
  --links: 26px;
  --chrome: calc(var(--space) * 4.4 + var(--icon) + var(--title) * 1.15 + var(--badge) + 16px + var(--links) + 4px);
  --mac: 86%;
  --mac-x: 0%;
  --mac-y: 0%;
  --phone: 22%;
  --phone-x: 78%;
  --phone-y: 18.07%;
  --ratio: 0.6589;
  --scene: min(960px, 100%, max(320px, calc((var(--vh) * 100 - var(--chrome)) / var(--ratio))));
  max-width: 1080px;
  min-height: 100vh;
  margin: 0 auto;
  padding: var(--space) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* The small viewport height keeps the page on screen while a phone's
   browser bars are showing. */
@supports (height: 1svh) {
  .home { --vh: 1svh; min-height: 100svh; }
}

.icon {
  width: var(--icon);
  height: var(--icon);
  border-radius: 22.37%;
}

.home h1 {
  margin: calc(var(--space) * 0.4) 0 var(--space);
  font-size: var(--title);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.scene {
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
}

.stage {
  position: relative;
  width: var(--scene);
  aspect-ratio: 1 / var(--ratio);
}

.stage img {
  position: absolute;
  display: block;
  height: auto;
}

/* The Mac capture is the real window, rounded corners and all; the shadow
   follows its shape. */
.stage .mac {
  left: var(--mac-x);
  top: calc(var(--mac-y) / var(--ratio));
  width: var(--mac);
  filter: drop-shadow(0 18px 40px var(--shadow));
}

/* The iPhone capture is the bare screen; the corners, a hairline edge and
   the shadow make it a device. */
.stage .phone {
  left: var(--phone-x);
  top: calc(var(--phone-y) / var(--ratio));
  width: var(--phone);
  /* 40px corners at the 300px width, scaling with the image. */
  border-radius: 13.33% / 6.15%;
  box-shadow: 0 0 0 1px var(--rule), 0 20px 50px var(--shadow);
}

/* Narrow screens: the same scene with the iPhone larger, so it stays
   readable. Its top sits the same share of the way down the Mac window as
   on wider screens (about 30%), so it reaches further below the window. */
@media (max-width: 640px) {
  .home {
    --mac: 84%;
    --mac-x: 0%;
    --mac-y: 0%;
    --phone: 32%;
    --phone-x: 68%;
    --phone-y: 17.65%;
    --ratio: 0.8721;
  }
  .stage .mac { filter: drop-shadow(0 10px 24px var(--shadow)); }
  .stage .phone { box-shadow: 0 0 0 1px var(--rule), 0 14px 36px var(--shadow); }
}

/* The one call to action: a store-style badge, centred under the scene.
   In dark mode it stays black with a fine grey edge, as store badges do. */
.badge {
  margin-top: var(--space);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--badge);
  padding: 0 16px 0 12px;
  border: 1px solid var(--badge-edge);
  border-radius: 10px;
  background: var(--badge-background);
  color: var(--badge-text);
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: left;
}

.badge:hover { text-decoration: none; opacity: 0.85; }
.badge:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.badge svg { flex: none; }
.badge span { display: flex; flex-direction: column; gap: 2px; }
.badge small { font-size: 10px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; }

/* Plain links in one centred row. Their labels are about as wide as each
   other, so the row's centre and the middle link's both fall on the page's
   centre line. */
.links {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: clamp(16px, 6vw, 28px);
  line-height: var(--links);
  white-space: nowrap;
}

/* Text pages */

.page {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 0 72px;
}

.page header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.page header img { width: 40px; height: 40px; border-radius: 22.37%; }
.page header a { color: var(--text); font-weight: 800; font-size: 20px; }

.page h1 { font-size: 32px; line-height: 1.2; margin: 0 0 8px; }
.page h2 { font-size: 21px; margin: 36px 0 8px; }
.page .updated { color: var(--muted); margin: 0 0 24px; }
.page ul { padding-left: 22px; }
.page li { margin: 4px 0; }
.page footer { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 15px; }