:root {
  --bg: #222;
  --fg: #eee;
  --item-bg: #444;
  --item-bg-hover: #555;
  --item-bg-active: #58a;
  --item-bg-active-hover: #69b;
  --item-bg-current: #9a5;
  --item-bg-current-hover: #bc6;
  --item-bg-bingo: #5a8;
  --item-bg-bingo-hover: #6b9;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ddd;
    --fg: #111;
    --item-bg: #ccc;
    --item-bg-hover: #bbb;
    --item-bg-current: #58a;
    --item-bg-current-hover: #69b;
    --item-bg-active: #5a8;
    --item-bg-active-hover: #6b9;
  }
}
html,
body {
  height: 100%;
}
body {
  background-color: var(--bg);
  color: var(--fg);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}
body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-around;
}
main {
  flex: 1;
  container-type: inline-size;
}
main > div:nth-child(2) {
  flex: 1;
}
aside {
  flex: 1;
}
@media (orientation: landscape) {
  body {
    flex-direction: row;
    justify-content: space-around;
  }
  body > div:nth-child(1) {
    flex: 2;
  }
}
.grid {
  max-height: 100cqmin;
  max-width: 100cqmin;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-gap: 0.2rem;
  cursor: crosshair;
  user-select: none;
}
.grid .item {
  aspect-ratio: 1;
  background-color: var(--item-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(1.4rem, 4cq, 2rem);
  word-break: break-word;
}
.grid .item:hover {
  background-color: var(--item-bg-hover);
}
.grid .item.active {
  background-color: var(--item-bg-active);
}
.grid .item.active:hover {
  background-color: var(--item-bg-active-hover);
}
.grid .item.current {
  background-color: var(--item-bg-current);
}
.grid .item.current:hover {
  background-color: var(--item-bg-current-hover);
}

.choices {
  padding: 1rem;
  min-width: 30rem;
}
.choices summary {
  text-align: center;
  padding: 0.5rem;
}

blockquote {
  border-bottom: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  font-style: italic;
  font-size: 1.5rem;
}
blockquote p {
  display: inline;
}

.editor {
  padding: 1rem;
  min-width: 30rem;
}
.editor form {
  display: flex;
  flex-wrap: wrap;
}
.editor input {
  max-width: 200px;
}
.editor summary {
  text-align: center;
  padding: 0.5rem;
}
.editor-footer {
  padding-bottom: 3rem;
}