:root { color-scheme: light; --paper: #F6F4EE; --ink: #26251F; --sub: #8B877B; --hair: #DFDACB;
  /* Steel (light) from Ball.metal, flattened to gradient bands per line of the heading. */
  --chrome: linear-gradient(180deg, #D9D7D1 0%, #8F9094 22%, #5C5D60 40%, #F2F0EA 50%, #7A7B7F 58%, #A6A7AA 78%, #4E4F52 100%);
  /* Obsidian ball, as CSS until ball.js draws the real material. */
  --b1: #5A5A5C; --b2: #2A2A2B; --b3: #C9C5B8; --bshadow: rgba(0,0,0,.30);
  /* The paper's light, as litPaper in Surface.metal: a touch brighter a little above the middle, dimmer at the edges. */
  --lit: rgba(255,255,255,.25); --dim: rgba(0,0,0,.045); --lit-r: 34vh; --dim-r: 82vh; }
/* Dark follows the device, unless the switch on the home page picked one (data-theme on <html>). */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #1C1B2E; --ink: #EAE6DA; --sub: #8F8CA3; --hair: #2E2D45;
  /* Chrome at night. */
  --chrome: linear-gradient(180deg, #F4F4F4 0%, #8C8C90 18%, #3E3E42 42%, #E6E6E8 52%, #4A4A4E 62%, #6E6E72 82%, #D9D9DC 100%);
  --b1: #FBF9F3; --b2: #E3DFD2; --b3: #8F8C84; --bshadow: rgba(0,0,0,.55);
  --lit: rgba(255,255,255,.012); --dim: rgba(0,0,0,.20); --lit-r: 32vh; --dim-r: 79vh; } }
:root[data-theme="dark"] { color-scheme: dark; --paper: #1C1B2E; --ink: #EAE6DA; --sub: #8F8CA3; --hair: #2E2D45;
  /* Chrome at night. */
  --chrome: linear-gradient(180deg, #F4F4F4 0%, #8C8C90 18%, #3E3E42 42%, #E6E6E8 52%, #4A4A4E 62%, #6E6E72 82%, #D9D9DC 100%);
  --b1: #FBF9F3; --b2: #E3DFD2; --b3: #8F8C84; --bshadow: rgba(0,0,0,.55);
  --lit: rgba(255,255,255,.012); --dim: rgba(0,0,0,.20); --lit-r: 32vh; --dim-r: 79vh; }
/* Switching light and dark: a slow cross-fade of the whole page (see fade() in each page's head), or, where
   view transitions aren't supported, the colours easing over. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .7s; animation-timing-function: ease-in-out; }
@supports not (view-transition-name: none) { @media (prefers-reduced-motion: no-preference) {
  body, .home .label, .home .app, .home section, .home .foot, a { transition: background-color .7s ease, color .7s ease, border-color .7s ease; } } }
* { box-sizing: border-box; }
/* The app's paper: its colour with a fine grain (a tile theme.js makes), lit from a little above the middle. */
body { margin: 0; background-color: var(--paper); background-image: var(--grain, none); color: var(--ink);
  font: 18px/1.6 ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, var(--lit) 0, var(--lit) 15vh, transparent var(--lit-r), var(--dim) var(--dim-r)); }
main, .home .column { position: relative; }
main { max-width: 620px; margin: 0 auto; padding: 72px 20px 96px; }
.mark { font-weight: 600; font-size: 20px; color: var(--sub); text-decoration: none; }
h1 { font-size: 44px; line-height: 1.15; font-weight: 600; margin: 56px 0 8px; }
h2 { font-size: 22px; font-weight: 600; margin: 40px 0 6px; }
h3 { font-size: 18px; font-weight: 600; margin: 24px 0 4px; }
section[id] { scroll-margin-top: 24px; }
p, li { color: var(--ink); }
.sub { color: var(--sub); }
.dot { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); margin: 48px 0 0; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { opacity: .7; }
ul { padding-left: 20px; }
footer { margin-top: 72px; color: var(--sub); font-size: 15px; border-top: 1px solid var(--hair); padding-top: 20px; }

/* The home page: one column of plain text on paper. Nothing is centred except the ball. */
body.home { font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif; font-weight: 600;
  -webkit-font-smoothing: antialiased; }
.home .column { max-width: 640px; margin: 0 auto; padding: 28px 20px 56px; container-type: inline-size;
  display: flex; flex-direction: column; }
@media (min-width: 720px) { .home .column { padding: 96px 40px 120px; } }
.home p { margin: 0; }
.home .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 64px; }
.home .wordmark { font-size: 18px; color: var(--sub); }
/* The light/dark switch: a small half-filled circle, as quiet as the wordmark; it turns over with the look. */
.home .theme { color: var(--sub); background: none; border: 0; padding: 6px; margin: -6px; cursor: pointer; line-height: 0; align-self: center; }
.home .theme svg { display: block; transition: transform .4s ease; }
:root[data-theme="dark"] .home .theme svg { transform: rotate(180deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home .theme svg { transform: rotate(180deg); } }
.home .theme:hover { opacity: .7; }

.home .chrome { filter: drop-shadow(0 2px 1px rgba(0,0,0,.22)) drop-shadow(0 10px 14px rgba(0,0,0,.14)); }
/* chrome.js draws the heading in the tempo number's inflated steel over the (then invisible) text. */
.home .chrome { position: relative; }
.home .chrome canvas { position: absolute; pointer-events: none; }
.home .chrome.live { filter: none; }
.home .chrome.live h1 { background: none; }
/* 16cqw in the design; 15.4 so "subscriptions." also fits in browsers without SF Rounded (about 3% wider). */
.home h1 { margin: 0; font-weight: 800; font-size: 15.4cqw; line-height: .98; letter-spacing: -.025em; text-wrap: pretty;
  background-image: var(--chrome); background-size: 100% .98em; background-repeat: repeat-y;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  padding-bottom: .05em; }

.home .hero { font-size: 20px; line-height: 1.4; text-wrap: pretty; }
.home .hero.sub { margin-top: 28px; color: var(--sub); }
.home .hero.line { margin-top: 40px; }
.home .hero.sign { margin-top: 12px; color: var(--sub); }

/* The ball at rest on the floor of its stage, with its contact shadow. ball.js replaces both with a canvas. */
.home .stage { position: relative; height: 84px; margin-top: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.home .ball { width: 40px; height: 40px; border-radius: 50%; transform-origin: 50% 100%; background:
  radial-gradient(circle at 33% 24%, rgba(255,255,255,.98) 0, rgba(255,255,255,.98) 7%, rgba(255,255,255,0) 16%),
  radial-gradient(ellipse 48% 20% at 50% 14%, var(--b3) 0, rgba(255,255,255,0) 100%),
  radial-gradient(ellipse 60% 18% at 50% 96%, var(--b3) 0, rgba(255,255,255,0) 100%),
  radial-gradient(circle at 42% 38%, var(--b1) 0, var(--b2) 58%, var(--b3) 100%); }
.home .ball-shadow { width: 40px; height: 6px; margin-top: -2px; border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--bshadow) 0, rgba(0,0,0,0) 70%);
  filter: blur(1.5px); transform: scaleX(1.1); }
.home .stage canvas { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.home .stage.live .ball, .home .stage.live .ball-shadow { visibility: hidden; }

/* Order: hero, why, promises, apps, about. The first section after the ball keeps the ball's 56px. */
.home .promises { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: 18px; font-size: 22px; line-height: 1.3; }   /* five statements, not a list */

.home .label { font-size: 15px; color: var(--sub); }
.home .apps { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--hair); }
.home .apps .label { margin-bottom: 8px; }
.home .app { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 20px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--hair); }
.home .app:last-child { border-bottom: 0; }
.home .app .name { font-size: 20px; line-height: 1.3; }
.home .app .what { font-size: 17px; line-height: 1.4; color: var(--sub); }
/* Apple's Download on the App Store badge: 40px tall (Apple's minimum on screen), with at least a quarter of its
   height clear around it; black on light paper, white on dark. */
.home .app .badge { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: block; line-height: 0; margin: 10px 0; }
.home .app .badge img { display: block; height: 40px; width: auto; }
.home .app .badge .on-dark { display: none; }
:root[data-theme="dark"] .home .app .badge .on-light { display: none; }
:root[data-theme="dark"] .home .app .badge .on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .home .app .badge .on-light { display: none; }
  :root:not([data-theme="light"]) .home .app .badge .on-dark { display: block; } }
.home .app .status { font-size: 14px; color: var(--sub); white-space: nowrap; }

.home .why, .home .about { padding-top: 40px; border-top: 1px solid var(--hair); }
.home .why { margin-top: 56px; }
.home .about { margin-top: 40px; }
.home .why .label, .home .about .label { margin-bottom: 12px; }
.home .why p, .home .about p { font-size: 18px; line-height: 1.5; text-wrap: pretty; }

.home .foot { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--sub); }
.home .foot .links { display: flex; gap: 8px; flex-wrap: wrap; }
.home .foot a { color: inherit; }