:root {
  --bg: #f4f3f1;
  --fg: #16171b;
  --muted: #8d8e94;
  --pill: #16171b;
  --pill-fg: #ffffff;
  --blue: #00abf7;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121318;
    --fg: #f3f3f5;
    --muted: #7c7e88;
    --pill: #f3f3f5;
    --pill-fg: #121318;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: var(--bg); color: var(--fg); }

body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.45;
}

a { color: inherit; }

/* Home */

.page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(28px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  text-align: center;
}

.app-icon {
  display: block;
  width: clamp(36px, 8vw, 52px);
  height: auto;
  margin: 0 auto 12px;
  filter: drop-shadow(0 3px 7px rgb(0 0 0 / 0.12));
}

h1 {
  font-size: clamp(34px, 7vw, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.tagline {
  margin-top: 10px;
  font-size: clamp(17px, 2.6vw, 21px);
  color: var(--muted);
  text-wrap: balance;
}

.stage {
  flex: 1;
  width: 100%;
  min-height: 320px;
  position: relative;
}

#bubbles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: manipulation;
  outline: none;
}

.readout {
  min-height: 3em;
  max-width: 30ch;
  font-size: 17px;
  font-weight: 600;
  text-wrap: balance;
}

.download {
  margin-top: 18px;
  display: inline-block;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--pill);
  color: var(--pill-fg);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease;
}
a.download:hover { transform: scale(1.04); }
a.download:active { transform: scale(0.97); }
.download.soon { opacity: 0.85; }

.footer-links {
  margin-top: 26px;
  display: flex;
  gap: 22px;
  font-size: 14px;
  color: var(--muted);
}
.footer-links a, .made-by a { text-decoration: none; }
.footer-links a:hover, .made-by a:hover { color: var(--fg); }

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

/* Privacy and Support */

.doc {
  max-width: 640px;
  margin: 0 auto;
  padding: max(40px, env(safe-area-inset-top)) 16px 56px;
}
.doc .back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
}
.doc .back::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
}
.doc h1 { margin-top: 36px; font-size: clamp(32px, 6vw, 44px); }
.doc .updated { margin-top: 6px; color: var(--muted); font-size: 15px; }
.doc h2 { margin-top: 32px; font-size: 21px; }
.doc p, .doc li { margin-top: 10px; font-size: 17px; text-wrap: pretty; }
.doc ul { padding-left: 1.2em; }
.doc a:not(.back) { color: var(--blue); }