/* One sheet for four pages. The app's own palette so the site and the product read as one thing. */
:root {
  --ink: #0B0B0C; --paper: #F5F4F0; --lime: #CDF24A; --panel: #FFFFFF;
  --muted: #6B7069; --line: #E8E7E2;
  --sans: "Rethink Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 46rem; margin: 0 auto; padding: 3rem 1.5rem 6rem; }
header { display: flex; align-items: center; gap: .7rem; margin-bottom: 3rem; }
.mark {
  width: 34px; height: 34px; border-radius: 10px; background: var(--ink);
  display: grid; place-items: center; color: var(--lime); font-weight: 800; font-size: 18px;
}
header a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 .75rem; }
h2 { font-size: 1.25rem; letter-spacing: -.01em; margin: 2.5rem 0 .5rem; }
.lede { font-size: 1.15rem; color: var(--muted); margin: 0 0 2rem; }
.updated { color: var(--muted); font-size: .9rem; margin-bottom: 2.5rem; }
p, li { color: #2A2D28; }
ul { padding-left: 1.15rem; }
li { margin: .4rem 0; }
a { color: var(--ink); text-underline-offset: 3px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 1.5rem; margin: 1.5rem 0; }
footer { border-top: 1px solid var(--line); margin-top: 4rem; padding-top: 1.5rem; color: var(--muted); font-size: .92rem; display: flex; gap: 1.25rem; flex-wrap: wrap; }
footer a { color: var(--muted); }
@media (prefers-color-scheme: dark) {
  :root { --paper: #000; --ink: #F5F4F0; --panel: #1C1C1E; --muted: #8A8F88; --line: #2C2C2E; }
  p, li { color: #D8DBD6; }
  .mark { background: var(--lime); color: #0B0B0C; }
}