:root {
  --paper: #F8F5EE; --card: #FDFCF8; --ink: #1B222B; --muted: #565E69;
  --line: #E8E4DC; --tile: #EBE6DB; --edge: #D0CABC; --me: #3D6692; --them: #BA714F;
  --on: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12161B; --card: #1D2228; --ink: #EEEBE4; --muted: #989FA8;
    --line: #2A3038; --tile: #272C32; --edge: #12161B; --me: #6996C8; --them: #D28A69;
    --on: #12161B;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17px/1.55 "Figtree", -apple-system, system-ui, sans-serif;
}
a { color: var(--me); }
.wrap { max-width: 640px; margin: 0 auto; padding: 48px 20px 40px; }
h1, h2, .wordmark { font-family: "Fredoka", "Figtree", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 34px; line-height: 1.15; margin: 0 0 8px; }
h2 { font-size: 21px; margin: 32px 0 6px; }
p, li { color: var(--ink); }
.muted { color: var(--muted); }
.top { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-bottom: 36px; }
.top img { width: 36px; height: 36px; border-radius: 9px; }
.top span { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 22px; }

/* Home */
.hero { min-height: 100svh; display: flex; flex-direction: column; }
.hero main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; }
.icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.wordmark { font-size: 44px; margin: 18px 0 4px; }
.tagline { font-size: 19px; color: var(--muted); margin: 0 0 28px; max-width: 26ch; }
.board { display: grid; grid-template-columns: repeat(4, 52px); gap: 6px; margin: 0 auto 32px; }
.t {
  width: 52px; height: 52px; border-radius: 11px; display: grid; place-items: center;
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 24px;
  background: var(--tile); box-shadow: inset 0 -3px 0 var(--edge); color: var(--ink);
}
.t.me { background: var(--me); color: var(--on); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.t.them { background: var(--them); color: var(--on); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.button {
  display: inline-block; background: var(--ink); color: var(--paper); text-decoration: none;
  font-weight: 600; font-size: 17px; padding: 15px 28px; border-radius: 999px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.25);
}
.small { font-size: 14px; color: var(--muted); margin-top: 14px; }
footer { text-align: center; padding: 24px 20px 32px; font-size: 14px; color: var(--muted); }
footer a { color: var(--muted); margin: 0 8px; }