:root { color-scheme: light; }
* { box-sizing: border-box; }
html { background: #f4f1ea; }
body {
  margin: 0;
  color: #1c1c1c;
  font: 18px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a { color: inherit; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid #1c1c1c; outline-offset: 3px; }
.wrap { width: min(880px, calc(100% - 40px)); margin: 0 auto; }
header.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 28px 0 8px;
}
.brand { font-weight: 600; letter-spacing: -0.03em; text-decoration: none; font-size: 20px; }
nav a { color: #666; text-decoration: none; margin-left: 18px; font-size: 15px; }
nav a[aria-current="page"] { color: #1c1c1c; }
h1 { font-weight: 500; font-size: clamp(36px, 6vw, 64px); letter-spacing: -0.04em; line-height: 1.02; margin: 28px 0 12px; max-width: 12ch; }
.deck { max-width: 36ch; color: #333; margin: 0 0 22px; }
#grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: min(100%, 440px);
}
.tile { aspect-ratio: 1; border: 0; border-radius: 12px; }
.ink { background: #1c1c1c; }
.clay { background: #c4553a; }
.sand { background: #d8c7a2; }
.moss { background: #3e6b54; }
.sel { outline: 3px solid #1c1c1c; outline-offset: 3px; }
#status { margin: 16px 0 0; font-size: 15px; }
#note { min-height: 1.5em; color: #444; margin: 4px 0 0; }
.tools { margin: 16px 0 28px; }
.tools button {
  background: #1c1c1c;
  color: #f4f1ea;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
}
.prose { max-width: 58ch; padding-bottom: 20px; }
footer.colophon { color: #777; font-size: 13px; padding: 8px 0 48px; }