body { font-family: Arial, sans-serif; margin: 2em; }
.cloud-label { font-weight: bold; margin-bottom: 10px; }
.cloud-box { margin-bottom:2.2em; }
#clouds-wrap { margin-bottom:22px; }
#wordcloud, #techcloud { width: 100%; min-height: 300px; }
#results {margin-bottom:2em; }
#details-popup {
  display: none;
  position: fixed; left: 50%; top: 18vh;
  transform: translate(-50%, 0);
  background: #fff; border: 2px solid #294080;
  padding: 1.3em 1.5em; box-shadow: 0 0 16px #3335; z-index: 1001;
  min-width: 290px; max-width: 86vw; font-size: 1.07em;
}
#details-popup .close { position: absolute; top: 8px; right: 16px; color: #244;
  font-weight: bold; cursor: pointer; }
#details-popup .kanji { font-size: 2em; color: #2e356d; }
#details-popup .pron { color: #686bb0; font-style: italic; display:inline-block;}
#details-popup ul { margin:.4em 0 .7em 1.1em; }
#details-popup li { margin-bottom: .3em; }
.jpn { font-family: "Noto Sans JP", Arial, sans-serif;}
.cloud-label { font-weight: bold; margin-bottom: 10px; }
#wordcloud text, #techcloud text { font-weight: bold; font-family: "Noto Sans JP", Arial, sans-serif; cursor: pointer; }
#wordcloud text:hover, #techcloud text:hover { fill: #df283f;}
#popup-backdrop {
  display: none;
  position: fixed; left:0; top:0; width:100vw; height:100vh; z-index:1000;
  background: rgba(0,0,32,0.10);
}
@media (max-width:700px){
  #details-popup { min-width:90px; max-width:95vw; }
}