* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-style: normal;
}
body {
  font: 12px/1.6 sans-serif;
  background: #fff;
  padding: 5% 1.5em 1.6em;
  margin: 0 auto;
  max-width: 64ch;
}
.tmpl-collection {
  max-width: initial;
}
body,
a {
  color: #222;
}
::selection,
.k,
a:focus,
a:hover {
  background: #222;
  color: #fff;
  cursor: pointer;
}
.lsn {
  list-style: none;
}
.s {
  font-size: 0.8em;
}
h1 {
  font-size: 1.8em;
  margin: 0 0 0.5em;
}
h1 > a {
  text-decoration: none;
}
h2 {
  font: 1.3em/1.3 sans-serif;
}
.m {
  margin: 0 0 2.6rem;
}
main > * {
  margin: 0 0 1.2rem;
}
img {
  width: 100%;
}
h2, h3 {
  margin: 1.5em 0 1.2rem;
}
.p {
  image-rendering: crisp-edges;
}
.c {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
.f {
  text-align: center;
}
.b {
  padding: 0.8em 1.3em;
}
.q {
  margin: 0 0 0.8rem;
}
.k {
  padding: 0 5px;
}
.mid {
  vertical-align: middle;
}
.sm {
  font-size: smaller;
}
#s {
  margin: 0 0 .65rem;
  height: 0;
  padding-bottom: 100%;
  cursor: pointer;
  outline: 0px;
}
#s:hover {
  outline: 1px solid;
}
#s > canvas {
    max-width: 100%;
    height: auto !important;
}
.td {
  text-align: center;
  margin: 0 0 0.75rem;
}