:root {
  --bg: #ffffff;
  --fg: #1c1c1e;
  --muted: #6c6c70;
  --faint: #8e8e93;
  --rule: #e5e5ea;
  --link: #2a8892;
  --card: #f7f7f9;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --fg: #f2f2f7;
    --muted: #9a9aa0;
    --faint: #79797f;
    --rule: #2c2c2e;
    --link: #6bafb6;
    --card: #131315;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  padding: 0 22px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ---------- shared shell ---------- */
.wrap { max-width: 660px; margin: 0 auto; }

/* Small wordmark. Sub-pages only — on the home page the title IS the wordmark,
   so printing it twice would be the same word in two sizes. */
.bar {
  max-width: 660px; margin: 0 auto;
  padding: 16px 0;
  display: flex; align-items: center; gap: 10px;
}
.bar img { width: 26px; height: 26px; border-radius: 22.4%; display: block; }
.bar a {
  color: var(--fg); text-decoration: none;
  font-size: 15px; font-weight: 590; letter-spacing: -.01em;
}
/* Icon and name are one link, the way they are one object. */
.bar .brand { display: flex; align-items: center; gap: 10px; }

/* The language switch: at the right end of the top row (the lockup on the
   home page, the bar on the others), where a product page puts its one action. A globe and the language's own name, no outline, so it
   doesn't read as a second download button. The footer carries it too. */
.bar a.lang, .lockup .lang {
  margin-left: auto; align-self: center; flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.4;
  color: var(--muted); text-decoration: none; padding: 6px 0;
}
.bar a.lang:hover, .lockup .lang:hover { color: var(--fg); }
/* On a phone the name costs width the header doesn't have, so the link becomes
   a mark of the language it goes to, drawn like a keyboard key: 中 on English
   pages, EN on Chinese ones. */
.lang-mark { display: none; }
@media (max-width: 480px) {
  .lang .globe, .lang .lang-name { display: none; }
  .lang .lang-mark {
    display: inline-grid; place-items: center;
    width: 28px; height: 28px; box-sizing: border-box;
    border: 1.5px solid currentColor; border-radius: 8px;
    font-size: 12px; font-weight: 650; letter-spacing: 0; line-height: 1;
  }
  .lang[lang="zh-Hans"] .lang-mark { font-size: 14px; font-weight: 600; }
  .bar a.lang, .lockup .lang { padding: 0; }
}
/* On the home page it hangs at the top right, a little below the top edge, and
   out of the flex row: in the row it reserved a column the full height of the
   lockup, so the tagline wrapped with empty space still beside it. Out of flow,
   only the name's line has to clear it, and the name is short. */
.lockup .lang { position: absolute; right: 0; top: calc(var(--lockup-top) + 4px); }
footer .lang-link { white-space: nowrap; }
footer .lang-link .globe { vertical-align: -2px; margin-right: 4px; }

/* ---------- home ---------- */
/* Icon and wordmark are ONE object, on one line. Alone at the top of a page an
   app icon reads as an empty band with a mark floating in it — and this icon's
   own background is white, so on a white page only the glyph survives. Beside
   the name it is what the App Store product page does: mark, name, subtitle. */
.lockup {
  --lockup-top: 44px;
  display: flex; align-items: center; gap: 22px;
  padding: var(--lockup-top) 0 28px; position: relative;
}
.lockup .glyph {
  width: 76px; height: 76px; border-radius: 22.4%; display: block; flex: none;
  /* an inset hairline, because the light icon is white on a white page */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.09), 0 1px 2px rgba(0,0,0,.06), 0 8px 22px rgba(0,0,0,.07);
}
@media (prefers-color-scheme: dark) {
  .lockup .glyph { box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }
}
.lockup > div { min-width: 0; }
.lockup h1 {
  white-space: nowrap;
  font-size: 29px; line-height: 1.14; font-weight: 600;
  letter-spacing: -.032em; margin: 0;
}
.tagline {
  font-size: 17px; line-height: 1.4; color: var(--muted);
  margin: 5px 0 0; letter-spacing: -.005em;
  text-wrap: pretty;    /* fill the line, but never leave 是。 alone on the last one */
}
.home .rule { height: 1px; background: var(--rule); border: 0; margin: 0 0 28px; }
/* 480, not 400: at the full 76px icon and 29px name, the switch at the row's
   end would push "Made of Days" onto two lines on every phone. */
@media (max-width: 480px) {
  .lockup { gap: 14px; --lockup-top: 36px; }
  .lockup .glyph { width: 62px; height: 62px; }
  .lockup h1 { font-size: 25px; }
  .tagline { font-size: 16px; }
}

/* ---------- documents ---------- */
.doc { padding-top: 6px; border-top: 1px solid var(--rule); }
.doc h1 {
  font-size: 26px; line-height: 1.25; letter-spacing: -.022em; font-weight: 600;
  margin: 28px 0 4px;
}
.doc h2 {
  font-size: 19px; line-height: 1.35; letter-spacing: -.015em; font-weight: 600;
  margin: 42px 0 10px;
}
.doc p, .doc li { margin: 12px 0; }
.doc ul { padding-left: 21px; }
.updated { color: var(--faint); font-size: 15px; margin: 0 0 8px; }
.lede {
  margin: 26px 0; padding: 18px 20px;
  background: var(--card); border: 1px solid var(--rule); border-radius: 14px;
}
.lede p { margin: 0; }
.types { color: var(--muted); font-size: 15px; }

/* ---------- footer ---------- */
/* Carries only what the page above does not already say: the sibling pages.
   The name is in the bar (or the title), so it is not repeated here. */
footer {
  max-width: 660px; margin: 0 auto; padding: 30px 0 60px;
  color: var(--faint); font-size: 14px;
}
.doc footer { margin-top: 60px; padding-top: 26px; border-top: 1px solid var(--rule); }
footer nav a { color: var(--muted); text-decoration: none; }
footer nav a:hover { text-decoration: underline; }
footer .sep { color: var(--faint); padding: 0 7px; }
footer .legal { margin-top: 10px; }

/* Negative tracking is a Latin adjustment. Applied to CJK it squeezes glyphs
   that are already on a fixed em box, so the headings read cramped. */
html[lang^="zh"] h1,
html[lang^="zh"] h2,
html[lang^="zh"] .tagline { letter-spacing: 0; }
/* The small section labels are uppercased for English. In Chinese that only
   reaches the Latin words, and "Pro" turns into "PRO". */
html[lang^="zh"] .story h2,
html[lang^="zh"] .facts h2,
html[lang^="zh"] .plans h2 { text-transform: none; }

/* ---------- landing page ---------- */
/* Added when the home page stopped being one paragraph. Everything here reuses
   the tokens above; the page has no colour of its own. The screenshots do the
   explaining, so the type stays exactly as quiet as it was. */

.intro { font-size: 19px; line-height: 1.6; margin: 22px 0 0; }

/* Call to action. One button, and a line under it saying what happens next --
   the button cannot say "in review" without becoming a sentence. */
.cta { margin: 30px 0 0; }
.cta a {
  display: inline-block; text-decoration: none;
  background: var(--link); color: #fff;
  padding: 12px 22px; border-radius: 999px;
  font-size: 16px; font-weight: 590; letter-spacing: -.01em;
}
.cta a:hover { filter: brightness(1.07); }
.cta-note { font-size: 14px; color: var(--faint); margin: 12px 0 0; }

/* Screenshots. Corners are rounded here rather than baked into the file, which
   keeps the images opaque -- that is what makes 640px WebP cost 40 KB. */
figure { margin: 0; }
.shot {
  display: block; width: 100%; height: auto;
  border-radius: 7.6%/3.5%;          /* the device corner, as a ratio */
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.10);
}
@media (prefers-color-scheme: dark) {
  .shot { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.5); }
}
figcaption { font-size: 15px; line-height: 1.45; color: var(--muted); margin-top: 14px; text-align: center; }

.hero-shot { margin: 46px auto 0; max-width: 300px; text-align: center; }

.shots {
  display: grid; gap: 34px 26px;
  grid-template-columns: repeat(3, 1fr);
  margin: 40px 0 0;
}
/* Six of the ten store cards, three across: 195px each in 660px, and the
   headline baked into each card is still legible. Left out: 1 and 2 (one
   landscape phone split in two; the full-width river is that chart), 5 (the
   radar, already the hero shot) and 8 (a measure's trend, one level deeper
   than this page goes; 7 already shows the numbers). Below that, six stacked cards would be a page
   of their own, so the row scrolls sideways, the way the App Store shows
   screenshots on a phone. Each card stops dead centre (snap-align: center) and
   one card at a time (snap-stop: always); the side padding is exactly what lets
   the first and last card reach the centre too, and the neighbours peeking in
   at both edges are what say the row goes on. The row bleeds to the screen
   edge, and the vertical padding keeps the shadows from being clipped. */
@media (max-width: 560px) {
  .shots {
    --shot-w: 66vw;
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: var(--shot-w);
    gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin: 24px -22px 0; padding: 16px calc((100vw - var(--shot-w)) / 2) 32px;
    scrollbar-width: none;
  }
  .shots::-webkit-scrollbar { display: none; }
  .shots > * { scroll-snap-align: center; scroll-snap-stop: always; }
  /* A scroll container clips at its padding edge, and a shadow cut off there
     ends in a hard line. So on a phone the shadow is shorter (it reaches
     6 + 18 = 24px below a card), the padding is taller than that (32px), and
     the note pulls itself back up into the empty part instead. */
  .shots .shot { box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.09); }
  .shots + .sample { margin-top: -10px; }
}
@media (max-width: 560px) and (prefers-color-scheme: dark) {
  .shots .shot { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.45); }
}

.story { margin-top: 56px; scroll-margin-top: 28px; }   /* the app links to #story */
.story p { font-size: 17px; line-height: 1.7; margin: 16px 0 0; max-width: 62ch; }
.story .story-source { font-size: 14px; color: var(--faint); margin-top: 20px; }
.story h2, .facts h2, .plans h2 {
  font-size: 15px; font-weight: 590; letter-spacing: .04em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 4px;
}

.facts { margin-top: 52px; }
.facts ul { margin: 0; padding: 0; list-style: none; }
.facts li {
  font-size: 16px; line-height: 1.55; color: var(--fg);
  padding: 13px 0; border-top: 1px solid var(--rule);
}
.facts li:last-child { border-bottom: 1px solid var(--rule); }

/* Free and Pro side by side, the way Apple lays out iCloud+ plans: same card,
   same list, so the difference is only what is in them. Prices are left to the
   App Store, which shows them in the reader's own currency. */
.plans { margin-top: 52px; }
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.plan {
  background: var(--card); border: 1px solid var(--rule); border-radius: 14px;
  padding: 18px 20px 16px;
}
.plan h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 8px; }
.plan.pro h3 { color: var(--link); }
.plan ul { margin: 0; padding: 0; list-style: none; }
.plan li { font-size: 15px; line-height: 1.45; padding: 5px 0 5px 20px; position: relative; }
.plan li::before {
  content: ""; position: absolute; left: 2px; top: .95em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--faint);
}
.plan.pro li::before { background: var(--link); }
.plan-terms { font-size: 14px; color: var(--muted); margin: 10px 0 0; }
.plan-note, .facts .note { font-size: 14px; color: var(--faint); margin: 12px 0 0; }
@media (max-width: 560px) {
  .plan-grid { grid-template-columns: 1fr; }
}

.tail { margin-top: 52px; }
.sample { font-size: 13px; color: var(--faint); margin: 26px 0 0; }

@media (max-width: 400px) {
  .intro { font-size: 18px; }
  .story p { font-size: 16px; }
}

/* The one image that fits this medium natively: a 660px column is landscape,
   and so is the full-screen chart. The phone shots have to sit at 300px in the
   middle of the page; this one runs the whole width. */
.river { margin: 46px 0 0; }
.river img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.10);
}
@media (prefers-color-scheme: dark) {
  .river img { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.5); }
}