@font-face { font-family: "Silkscreen"; font-weight: 400; font-display: swap; src: url("/fonts/silkscreen-400.ttf") format("truetype"); }
@font-face { font-family: "Fredoka"; font-weight: 400 500; font-display: swap; src: url("/fredoka-500.ttf") format("truetype"); }
@font-face { font-family: "Fredoka"; font-weight: 600 700; font-display: swap; src: url("/fredoka-600.ttf") format("truetype"); }
:root {
  --bg: #F4F5F8;
  --surface: #FFFFFF;
  --ink: #1B2A4A;
  --muted: #55607A;
  --navy: #24478F;
  --amber: #EFA23A;
  --amber-ink: #8A4D00;
  --night: #1B2A4A;
  --border: #DDE1EA;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1118;
    --surface: #171C27;
    --ink: #EEF1F7;
    --muted: #A7B0C2;
    --navy: #A9C0F3;
    --amber: #F2A63B;
    --amber-ink: #F2A63B;
    --night: #1B2A4A;
    --border: #2A3142;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
}
a { color: var(--navy); }
.wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 20px; }
.brand img { width: 44px; height: 44px; image-rendering: pixelated; }
.brand img[src="/logo.png"] { image-rendering: auto; }
/* The name in the pixel font, stacked like the app's welcome screen */
.brand-name { font-family: "Silkscreen", ui-monospace, "Courier New", monospace; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; font-size: 15px; line-height: 1.1; }
.brand-name b { display: block; font-weight: 400; }
.hero {
  margin-top: 24px;
  background: var(--night);
  color: #fff;
  border-radius: 26px;
  padding: 32px 24px;
  text-align: center;
}
.hero img { width: 160px; height: 160px; image-rendering: pixelated; }
.hero h1 { margin: 8px 0 4px; font-size: 34px; line-height: 1.2; }
.hero p { margin: 0 auto; max-width: 460px; color: rgba(255, 255, 255, 0.86); }
.tag {
  display: inline-block;
  margin-top: 16px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--amber);
  color: #3F2400;
  font-weight: 600;
  font-size: 15px;
}
.card { margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 20px; }
.card h2 { margin: 0 0 4px; font-size: 20px; }
.card p { margin: 0; color: var(--muted); }
h1.page { font-size: 32px; line-height: 1.2; margin: 32px 0 4px; }
.updated { color: var(--muted); margin: 0 0 24px; }
.doc h2 { font-size: 22px; margin: 32px 0 8px; }
.doc ul { padding-left: 22px; }
.doc li { margin: 4px 0; }
.note { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px 20px; }
footer { margin-top: 48px; color: var(--muted); font-size: 15px; }