/* The game's notebook: paper, ink, one marker. Colours from src/ui/theme.ts. */
:root {
  --ground: #f4f0e6;
  --sheet: #fffdf7;
  --ink: #191713;
  --ink-soft: #7a746a;
  --marker: #ffd83d;
  --toy: #e4453c;
}
* { box-sizing: border-box; }
html { background: var(--ground); }
body {
  margin: 0 auto;
  max-width: 640px;
  padding: 32px 16px 64px;
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--ground);
}
a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
h1, h2 { line-height: 1.15; }
h1 { font-size: 34px; margin: 0 0 16px; }
h2 { font-size: 21px; margin: 32px 0 8px; }
.mark { background: var(--marker); padding: 0 8px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.sheet {
  background: var(--sheet);
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 18px rgba(40, 32, 16, 0.16);
}
.soft { color: var(--ink-soft); }
.button {
  display: inline-block;
  background: var(--marker);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 999px;
}
footer { margin-top: 48px; color: var(--ink-soft); font-size: 15px; text-align: center; }
footer a { color: var(--ink-soft); text-decoration-thickness: 1px; }
.back { display: inline-block; margin-bottom: 24px; font-weight: 600; text-decoration: none; }
.hero { text-align: center; padding-top: 24px; }
.hero img { width: 128px; height: 128px; border-radius: 28px; box-shadow: 0 8px 18px rgba(40, 32, 16, 0.16); }
.hero h1 { margin-top: 24px; }
.hero p { font-size: 19px; margin: 0 auto 28px; max-width: 460px; }

/* The onboarding's pictures, cut straight from the app. Two abreast on a phone. */
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; margin-top: 40px; }
.steps figure { margin: 0; text-align: center; }
.steps img { width: 100%; height: auto; display: block; }
.steps figcaption { font-weight: 700; font-size: 16px; margin-top: 4px; white-space: nowrap; }