body {
  background-color: oklch(0.2511 0.006 258.36);
  color: oklch(0.9187 0.003 264.54);
  font-family: "Geist Mono", "Noto Sans Emoji", monospace;
  font-size: 1.5rem;
  margin: 5% 8%;
  line-height: 1.5;
}
a {
  color: oklch(0.9187 0.003 264.54) !important;
  text-underline-offset: 4px;
}
@media (min-width: 768px) {
  body {
    font-size: 2vw;
    margin: 15%;
  }
}
h1 {
  font-size: 1.6em;
  margin-bottom: 0.3em;
}
details.cat {
  margin-bottom: 1em;
}
details.cat > summary {
  cursor: pointer;
  font-size: 1.2em;
  margin-bottom: 0.3em;
}
details.sub {
  margin-left: 1em;
  margin-bottom: 0.2em;
}
details.sub > summary {
  cursor: pointer;
  font-size: 0.85em;
  color: oklch(0.81 0.004 243);
}
.emoji-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1em;
  margin: 0.2em 0;
}
.em {
  cursor: pointer;
  user-select: none;
}
.em:hover {
  transform: scale(1.4);
}
.em.copied {
  border-radius: 0.15em;
  animation: copied-fade 0.8s ease-out forwards;
}
@keyframes copied-fade {
  0%   { background: var(--copied-bg, oklch(0.4387 0.005 271.3)); }
  15%  { background: var(--copied-bg, oklch(0.4387 0.005 271.3)); }
  100% { background: transparent; }
}
#search {
  font-family: inherit;
  font-size: 0.9em;
  padding: 0.3em 0.6em;
  width: 100%;
  max-width: 30em;
  margin-bottom: 0.5em;
  border: 1px solid oklch(0.63 0.004 215);
  border-radius: 0.3em;
  background: oklch(0.3502 0.005 236.66);
  color: inherit;
  outline: none;
  box-sizing: border-box;
}
#search:focus {
  border-color: oklch(0.6 0.096 259);
}
#count {
  font-size: 0.7em;
  color: oklch(0.6101 0.005 271.34);
  margin-top: -0.2em;
  margin-bottom: 0.5em;
}