body{background-color: rgb(60,50,70); color: silver; margin: 0px }
#ui{ display: flex; }

.categoryList{
  padding-block: 1em;
  box-sizing: border-box;
  border-inline-end: 1px solid gold;
  background-color: rgb(60,60,70);
  max-height: 100vh;
  overflow-y: auto;
  min-width: 18ch
}
a{ color: rgb(100,150,200); margin-inline-start: 1ch }
a:visited{ color: rgb(150,100,200) }
a:hover{ color: rgb(200,150,100) }
pre:empty{ display: none }
.category{ padding: 0.2em 1em; cursor: pointer; text-transform: capitalize }
.category::after{ content: " (" attr(data-value) ")"}

.currentCategory,
.category:hover{ background-color: grey }

.currentCategory::before{ content: "»" }

.target{
  margin: 0.1em;
  background-color: rgb(60,60,70);
  padding: 0.3em;
  border: 1px solid rgb(40,40,40);
  border-radius: 4px;
  max-width: 50ch;
  cursor: default
}
.target > a{
  content: "";
  width: 1.2em;
  height: 1.3em;
  background-image: url("ext.svg");
  background-repeat: no-repeat;
  background-size: contain;
}
.target:hover{ background-color: rgb(80,80,90) }
#targets{ display: grid; grid-template-columns: 1fr 1fr 1fr }

pre{
  white-space: pre-wrap;
  margin: 1em;
  border: 2px inset;
  padding: 0.5em;
  background-color: rgb(40,50,50)
}

.hidden{ display: none !important }

.target{ display: flex; justify-content: space-between }