:root {
    --bg: #252525;
    --dark: #222;
    --highlight: #eef;
    --marker-alpha: 0.3;
    
    --border-radius: 0px;
    --unfocus: #777;
    --light: #ffffff;
    --lightish: #9ef;
    --mid: #478;
    --darkish: #445;
    --darker: #000;
    
    --right: #7c7;
    --wrong: #c77;
    --font-used: Noto;
    --base-font-size: 1.8rem;
  --ruby-font-size: 1rem;

  }
  *{
    box-sizing: border-box;
  }
  

  #progress { position: fixed; top:0; width:100vw; height: 10px; background: #ddd; }
  #progress-fill { height: 100%; width: 0%; background: #4caf50; }

  .main-heading .touchable-sentence {
    font-size: 3rem;
  }
  
  a {
    color:var(--lightish);
  }
      textarea {
      width: 100%;
      background-color: var(--darkish);
      color: var(--light);
    }
    
    .slash {
  color: #ff00ff; 
}
    
        .icon {
      display: inline-block;
      width: 2rem;
      height: 2rem;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
    }

        .icon-copy {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z' fill='%23ffffff'/%3E%3C/svg%3E");
    }
    #quick-floating-panel {
      position: fixed;
      bottom:15vmin;
      right: 15vmin;
    }
    
  body {
    background: var(--bg);
    color: var(--light);
    font-family: var(--font-used);
  }
  p {
  text-indent: 0;
  margin-left: 0;
  padding-left: 0;
}





    .close-btn {
      position: fixed;
      background: none;
      border: none;
      right: 10px;
      font-size: 44px;
      color:red;
      cursor: pointer;
    }

  
  
  rt {
    font-size: 0.7rem;
  }
  .touchable-sentence, .jap-sentence {
    font-size: 1.4rem;
    line-height: 3rem;
  }
  
  #output .touchable-sentence {
    font-size: var(--base-font-size);
  }
  #output rt {
    font-size: var(--ruby-font-size);
  }
  
  .touchable-word {
    font-size: 1.1rem;
    padding: 1.05rem;
  }
  
  
  
  
  
  
  



  
  
  .jap-meaning {
    border-bottom:4px dotted;
    padding: 5vmin;
  }
  
  .page, #full-page {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 40vh;
  background-color: var(--dark);
  overflow-y: auto;
  z-index: 1000;
  padding: 5vmin;
}


#full-page .multiButtonToggler button {
  display: none;
}
#full-page .multiButtonToggler button.allowed {
  display: block;
}

#full-page .full-page-page {
  display: none;
}
#full-page .full-page-page.open {
  display: block;
}

.page.open, #full-page.open {
  display: block;
}

#full-page {
  border-bottom:4px dotted;
  height: 95vh;
  z-index: 900;
}


.closed * {
  color: white !important;
  background: transparent !important;
}

.closed rt {
  opacity:0;
}

rt {
  opacity:1;
}
  
  
  button {
    border:0;
  }
      .multiButtonToggler {
      display: flex;
      align-items: center;
      position: sticky;
      top:0;
    }
    .multiButtonToggler button {
      padding: 1vmin;
      font-size: 0.8rem;
    }
    .multiButtonToggler button.active {
      background: transparent;
      color: var(--highlight);
      border: 1px solid;
    }
    
    
        .important-btn {
      background-color: var(--mid);
      color: var(--light);
    }
        .next-prev-btn {
      width:42vw;
      padding-top:2vmin;
      padding-bottom:2vmin;
    }
    button {
      background-color: var(--darkish);
      color: var(--light);
      border: none;
      padding: 2vmin;
      font-family: var(--font-used);
    }
    button:focus {
      background-color: var(--mid);
    }
    textarea {
      padding: 2.5vmin;
      border-radius: var(--border-radius);
    }

    
    .pagination {
  margin: 1vmin 0;
  display:flex;
  flex-wrap: wrap;
  gap:1vmin;
}
    .pagination .active {
      background-color: var(--mid);
    }

    



[data-particle] {
  display: none;
}

[data-particle].open {
  display: block;
}



details summary {
  opacity: 0.5;
  font-size: 0.8rem;
}

details[open] {
  font-size: 1rem;
  opacity: 1;
  padding: 2vmin 0;
}



.kanji-char { margin-right: 5vmin; }

.kanji-readings {text-align:right; font-size: 0.8rem; }
.kanji-readings.on { color: #7f9; }
.kanji-readings.kun { color: #fc7; }

.kanji-label { }
.kanji-reading { }

.kanji-meaning { font-size:0.9rem; }




  .screen { 
    display: none; 
    padding: 5vmin;
    gap: 2.5vmin;
    flex-direction:column;
    justify-content: center;
    align-items: center;
  }
  .screen.active { 
    display: flex;
    }

  .test-btn {
    width:100%;
  }
  
  .region {
    padding: 2.5vmin;
  }
  .note {
    font-size: 0.9rem;
    color: var(--unfocus);
  }
  .card { font-size: 2rem; margin: 5vmin 0; }
  .answer { font-size: 1.5rem; opacity: 0.8; margin-bottom: 5vmin; }
  .stats { margin-top: 5vmin; font-size: 0.9rem; opacity: 0.7; }












.td-ans {
  color: var(--lightish);
}



  .info-panel {
    color: var(--light);
    padding: 2.5vmin 0;
  }
  
  .blurb {
    color: var(--lightish);
    margin: 0;
  }

  .info-panel summary {
    cursor: pointer;
  }


  .info-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .info-panel li {
    margin-top: 15vmin;
  }

  .info-panel .use {
    margin-top: 2.5vmin 0;
  }
  
  .info-panel .touchable-sentence {
    font-size: 1.2rem;
  }

  .info-panel .ex {
    margin: 2.5vmin 0;
    padding: 5vmin;
    background-color: var(--darker);
  }


  .info-panel .eng-ex {
    font-size: 0.9rem;
    color: var(--unfocus);
  }

  .info-panel .compare {
    margin-top: 2.5vmin;
    background-color: var(--darkish);
  }

  .info-panel table {
    width: 100%;
    color: inherit;
    border-collapse: collapse;
  }
  .info-panel th, .info-panel td {
    border: 1px solid #ddd;
    text-align: center;

  }



.info-panel .heading {
  margin: 0;
}

details[open].breakdown {
  border: 2px dotted;
  padding: 2vmin;
  margin: 2vmin;
}

#showBtn {
  padding: 5vmin;
}

#gradeBtns button {
  padding: 5vmin;
}
#rightBtn {
  background-color: var(--right) ;
}
#wrongBtn {
  background-color: var(--wrong) ;
}


.file-input-label {
  background-color: var(--darkish);
  color: var(--light);
  cursor: pointer;
}

.file-input-label:hover {
  background-color: var(--right);
}

#sentence-info-content {
  padding: 5vmin 0;
}
#sentence-info-content > div {
  margin: 3vmin 0;
}


.touchable-sentence, .touchable-sentence * {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.page, #full-page { width: 100%; box-sizing: border-box; }














.pos-symbol { color: #9d8d8f; }
.pos-symbol > .meaning-slash { color: #00a299; }

.pos-symbol > .meaning-bracket.level-1 {
  color: #bbb1b2;
}

.pos-symbol > .meaning-paren.level-1 {
  color: #7a696b;
}

.pos-symbol > .meaning-bracket.level-2 {
  color: #aa9e9f;
}

.pos-symbol > .meaning-paren.level-2 {
  color: #67585a;
}

.pos-symbol > .meaning-bracket.level-3 {
  color: #9b8a8c;
}

.pos-symbol > .meaning-paren.level-3 {
  color: #55484a;
}

.pos-symbol > .meaning-bracket.level-4 {
  color: #8b787a;
}

.pos-symbol > .meaning-paren.level-4 {
  color: #43393a;
}

.pos-misc { color: #a49194; }
.pos-misc > .meaning-slash { color: #00a89c; }

.pos-misc > .meaning-bracket.level-1 {
  color: #c1b6b7;
}

.pos-misc > .meaning-paren.level-1 {
  color: #826c70;
}

.pos-misc > .meaning-bracket.level-2 {
  color: #b1a2a4;
}

.pos-misc > .meaning-paren.level-2 {
  color: #6f5c5f;
}

.pos-misc > .meaning-bracket.level-3 {
  color: #a28e91;
}

.pos-misc > .meaning-paren.level-3 {
  color: #5c4c4e;
}

.pos-misc > .meaning-bracket.level-4 {
  color: #937b7f;
}

.pos-misc > .meaning-paren.level-4 {
  color: #4a3c3e;
}

.pos-particle { color: #b9b0bf; }
.pos-particle > .meaning-slash { color: #84c600; }

.pos-particle > .meaning-bracket.level-1 {
  color: #dad5dd;
}

.pos-particle > .meaning-paren.level-1 {
  color: #97899f;
}

.pos-particle > .meaning-bracket.level-2 {
  color: #c8c1cd;
}

.pos-particle > .meaning-paren.level-2 {
  color: #867690;
}

.pos-particle > .meaning-bracket.level-3 {
  color: #b7adbd;
}

.pos-particle > .meaning-paren.level-3 {
  color: #73657c;
}

.pos-particle > .meaning-bracket.level-4 {
  color: #a59aad;
}

.pos-particle > .meaning-paren.level-4 {
  color: #615568;
}

.pos-auxiliary { color: #e49979; }
.pos-auxiliary > .meaning-slash { color: #00bcd2; }

.pos-auxiliary > .meaning-bracket.level-1 {
  color: #edc6b9;
}

.pos-auxiliary > .meaning-paren.level-1 {
  color: #bb7554;
}

.pos-auxiliary > .meaning-bracket.level-2 {
  color: #e8ae99;
}

.pos-auxiliary > .meaning-paren.level-2 {
  color: #a36548;
}

.pos-auxiliary > .meaning-bracket.level-3 {
  color: #e39573;
}

.pos-auxiliary > .meaning-paren.level-3 {
  color: #8b563d;
}

.pos-auxiliary > .meaning-bracket.level-4 {
  color: #d0835e;
}

.pos-auxiliary > .meaning-paren.level-4 {
  color: #744732;
}

.pos-conjunction { color: #79b98f; }
.pos-conjunction > .meaning-slash { color: #ff7ae3; }

.pos-conjunction > .meaning-bracket.level-1 {
  color: #93dfad;
}

.pos-conjunction > .meaning-paren.level-1 {
  color: #5e9170;
}

.pos-conjunction > .meaning-bracket.level-2 {
  color: #85cb9d;
}

.pos-conjunction > .meaning-paren.level-2 {
  color: #517e61;
}

.pos-conjunction > .meaning-bracket.level-3 {
  color: #77b68d;
}

.pos-conjunction > .meaning-paren.level-3 {
  color: #446c52;
}

.pos-conjunction > .meaning-bracket.level-4 {
  color: #69a27d;
}

.pos-conjunction > .meaning-paren.level-4 {
  color: #385a44;
}

.pos-prefix { color: #aba5da; }
.pos-prefix > .meaning-slash { color: #abb200; }

.pos-prefix > .meaning-bracket.level-1 {
  color: #cfcbea;
}

.pos-prefix > .meaning-paren.level-1 {
  color: #867dc8;
}

.pos-prefix > .meaning-bracket.level-2 {
  color: #bbb7e1;
}

.pos-prefix > .meaning-paren.level-2 {
  color: #7569be;
}

.pos-prefix > .meaning-bracket.level-3 {
  color: #a8a2d9;
}

.pos-prefix > .meaning-paren.level-3 {
  color: #6355b2;
}

.pos-prefix > .meaning-bracket.level-4 {
  color: #968ed0;
}

.pos-prefix > .meaning-paren.level-4 {
  color: #5244a1;
}

.pos-prenominal { color: #f7d200; }
.pos-prenominal > .meaning-slash { color: #bfd5ff; }

.pos-prenominal > .meaning-bracket.level-1 {
  color: #fff9ea;
}

.pos-prenominal > .meaning-paren.level-1 {
  color: #cbac00;
}

.pos-prenominal > .meaning-bracket.level-2 {
  color: #ffe38b;
}

.pos-prenominal > .meaning-paren.level-2 {
  color: #b59900;
}

.pos-prenominal > .meaning-bracket.level-3 {
  color: #f4cf00;
}

.pos-prenominal > .meaning-paren.level-3 {
  color: #a08700;
}

.pos-prenominal > .meaning-bracket.level-4 {
  color: #ddbc00;
}

.pos-prenominal > .meaning-paren.level-4 {
  color: #8b7600;
}

.pos-verb { color: #4ce7ff; }
.pos-verb > .meaning-slash { color: #ffc8b5; }

.pos-verb > .meaning-bracket.level-1 {
  color: #eefcff;
}

.pos-verb > .meaning-paren.level-1 {
  color: #00bfd5;
}

.pos-verb > .meaning-bracket.level-2 {
  color: #acf0ff;
}

.pos-verb > .meaning-paren.level-2 {
  color: #00abbe;
}

.pos-verb > .meaning-bracket.level-3 {
  color: #26e6ff;
}

.pos-verb > .meaning-paren.level-3 {
  color: #0097a8;
}

.pos-verb > .meaning-bracket.level-4 {
  color: #00d1e9;
}

.pos-verb > .meaning-paren.level-4 {
  color: #008393;
}

.pos-noun { color: #a4ec00; }
.pos-noun > .meaning-slash { color: #eaccff; }

.pos-noun > .meaning-bracket.level-1 {
  color: #f6ffee;
}

.pos-noun > .meaning-paren.level-1 {
  color: #86c200;
}

.pos-noun > .meaning-bracket.level-2 {
  color: #b1ff00;
}

.pos-noun > .meaning-paren.level-2 {
  color: #77ad00;
}

.pos-noun > .meaning-bracket.level-3 {
  color: #a2e900;
}

.pos-noun > .meaning-paren.level-3 {
  color: #699900;
}

.pos-noun > .meaning-bracket.level-4 {
  color: #93d400;
}

.pos-noun > .meaning-paren.level-4 {
  color: #5b8600;
}

.pos-adjective { color: #f99ebd; }
.pos-adjective > .meaning-slash { color: #00d0b4; }

.pos-adjective > .meaning-bracket.level-1 {
  color: #fcd2df;
}

.pos-adjective > .meaning-paren.level-1 {
  color: #f7599b;
}

.pos-adjective > .meaning-bracket.level-2 {
  color: #fab7cc;
}

.pos-adjective > .meaning-paren.level-2 {
  color: #f02a8b;
}

.pos-adjective > .meaning-bracket.level-3 {
  color: #f99aba;
}

.pos-adjective > .meaning-paren.level-3 {
  color: #d02378;
}

.pos-adjective > .meaning-bracket.level-4 {
  color: #f87aa9;
}

.pos-adjective > .meaning-paren.level-4 {
  color: #b21d65;
}

.pos-adverb { color: #d9b2f3; }
.pos-adverb > .meaning-slash { color: #93d300; }

.pos-adverb > .meaning-bracket.level-1 {
  color: #efe0fa;
}

.pos-adverb > .meaning-paren.level-1 {
  color: #c47eeb;
}

.pos-adverb > .meaning-bracket.level-2 {
  color: #e3c7f6;
}

.pos-adverb > .meaning-paren.level-2 {
  color: #ba61e7;
}

.pos-adverb > .meaning-bracket.level-3 {
  color: #d7aef2;
}

.pos-adverb > .meaning-paren.level-3 {
  color: #af42df;
}

.pos-adverb > .meaning-bracket.level-4 {
  color: #cd95ef;
}

.pos-adverb > .meaning-paren.level-4 {
  color: #9737c0;
}

.pos-expression { color: #74d83c; }
.pos-expression > .meaning-slash { color: #f0a6ff; }

.pos-expression > .meaning-bracket.level-1 {
  color: #9cfd71;
}

.pos-expression > .meaning-paren.level-1 {
  color: #5cae2e;
}

.pos-expression > .meaning-bracket.level-2 {
  color: #7eeb42;
}

.pos-expression > .meaning-paren.level-2 {
  color: #519a28;
}

.pos-expression > .meaning-bracket.level-3 {
  color: #72d53b;
}

.pos-expression > .meaning-paren.level-3 {
  color: #468622;
}

.pos-expression > .meaning-bracket.level-4 {
  color: #66c034;
}

.pos-expression > .meaning-paren.level-4 {
  color: #3b721b;
}

.pos-interjection { color: #f6aa00; }
.pos-interjection > .meaning-slash { color: #21c7ff; }

.pos-interjection > .meaning-bracket.level-1 {
  color: #ffd6ac;
}

.pos-interjection > .meaning-paren.level-1 {
  color: #c58700;
}

.pos-interjection > .meaning-bracket.level-2 {
  color: #ffbd64;
}

.pos-interjection > .meaning-paren.level-2 {
  color: #ad7700;
}

.pos-interjection > .meaning-bracket.level-3 {
  color: #f2a700;
}

.pos-interjection > .meaning-paren.level-3 {
  color: #966600;
}

.pos-interjection > .meaning-bracket.level-4 {
  color: #da9600;
}

.pos-interjection > .meaning-paren.level-4 {
  color: #805600;
}

.pos-filler { color: #8db9b8; }
.pos-filler > .meaning-slash { color: #ff9196; }

.pos-filler > .meaning-bracket.level-1 {
  color: #aadedd;
}

.pos-filler > .meaning-paren.level-1 {
  color: #6f9291;
}

.pos-filler > .meaning-bracket.level-2 {
  color: #9acac9;
}

.pos-filler > .meaning-paren.level-2 {
  color: #60807f;
}

.pos-filler > .meaning-bracket.level-3 {
  color: #8bb6b5;
}

.pos-filler > .meaning-paren.level-3 {
  color: #526d6d;
}

.pos-filler > .meaning-bracket.level-4 {
  color: #7ca3a2;
}

.pos-filler > .meaning-paren.level-4 {
  color: #445c5b;
}











    .icon-paste {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"/></svg>');
}
    .icon-trash {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
}
.icon-gear {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<circle cx='12' cy='12' r='3'/>\
<path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c0 .66.39 1.26 1 1.51.2.08.42.12.65.12H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/>\
</svg>");
}