*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
}
img { max-width: 100%; display: block; }
/* Browsers give <button> its own default text color that doesn't inherit
   from the page the way a div/span would -- invisible on the kid UI's old
   light theme (dark default text on a light page, matching by
   coincidence) but black-on-near-black once the theme went dark, since
   .card is a <button> and .card-title is its child. */
button { font-family: inherit; cursor: pointer; color: inherit; }
a { color: inherit; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}