html,html body{padding:0;margin:0;width:100%}html body{color:#252525;overflow-x:hidden}html body.no-scroll{overflow-y:hidden}html body .container{width:100%;height:100vh;position:relative}html body .container header{display:flex;height:39px;justify-content:space-between;background-color:#fff6ab;padding:20px;border-bottom:1px solid #252525}html body .container header h1,html body .container header h2{margin:0}html body .container header a{flex:0 0 auto}html body .container .tag-filter-area{background-color:#e5f8ff;width:100%;height:15vh;border-bottom:1px solid #252525;overflow-y:auto}html body .container .tag-filter-area .tags{margin:0;padding:10px;display:flex;flex-wrap:wrap;min-height:0;transition:min-height .3s ease-in-out}html body .container .tag-filter-area .tags .tag{list-style:none;display:block;width:64px;height:64px;flex:0 0 64px;border:1px solid #252525;padding:5px 2px 2px;margin:1px;background-color:#d0f5ff;text-align:center;position:relative;cursor:pointer}html body .container .tag-filter-area .tags .tag:hover{box-shadow:0 0 2px}html body .container .tag-filter-area .tags .tag.active{box-shadow:0 2px 5px #000}html body .container .tag-filter-area .tags .tag.not{color:#f55;border-color:#f55;box-shadow:0 2px 5px #000}html body .container .tag-filter-area .tags .tag .tag-icon{width:32px;height:32px}html body .container .tag-filter-area .tags .tag .tag-name{width:calc(100% - 4px);position:absolute;bottom:2px;left:0;overflow:hidden;padding:2px;font-size:12px}html body .container .tag-filter-area.dragging-favorite-tag .normal-tags,html body .container .tag-filter-area.dragging-tag .favorite-tags{background-color:#3eccff;min-height:30px}html body .container .letter-area-container{background-color:#e0ffe4;height:calc(85vh - 80px);overflow-y:auto}html body .container .letter-area-container .letter-area{width:100%;padding:10px 0 180px}html body .container .letter-area-container .letter-area .letters{margin:0;padding:10px;display:flex;flex-wrap:wrap;min-height:0;transition:min-height .3s ease-in-out}html body .container .letter-area-container .letter-area .letters.line{padding-top:0;padding-bottom:0}html body .container .letter-area-container .letter-area .letters .letter{list-style:none;display:block;width:64px;height:64px;flex:0 0 64px;border:1px solid #252525;padding:2px;margin:1px;background-color:#cfffd6;text-align:center;position:relative;cursor:pointer}html body .container .letter-area-container .letter-area .letters .letter:hover{box-shadow:0 0 2px}html body .container .letter-area-container .letter-area .letters .letter.filtered-out{display:none}html body .container .letter-area-container .letter-area .letters .letter .symbol{font-size:30px}html body .container .letter-area-container .letter-area .letters .letter .sound{width:calc(100% - 4px);position:absolute;bottom:2px;left:0;overflow:hidden;padding:2px;font-size:12px}html body .container .letter-area-container .letter-area.dragging-favorite-letter .normal-letters,html body .container .letter-area-container .letter-area.dragging-letter .favorite-letters{background-color:#5eff72;min-height:30px}html body .container .output-area{background-color:#e0e6ff;width:100%;position:absolute;bottom:0;height:100px;padding:10px 10px 50px;border-top:1px solid #252525}html body .container .output-area .output-text-area{width:calc(100% - 20px);height:100%;resize:none;font-size:30px}.undecorated-link{text-decoration:none;color:#101010}.undecorated-link:active,.undecorated-link:focus,.undecorated-link:visited{color:#101010}.training-index{background-color:#e0ffe4;padding:5% 10%}.training-index .list{list-style:none;padding-left:0}.training-index .list .training{display:flex;margin-bottom:10px}.training-index .list .training .title{flex:1 1 100%;font-weight:700;padding:20px 40px;background-color:#d0f5ff}.training-index .list .training .link{flex:0 0 auto;padding:20px 40px;background-color:#76dfff;margin-left:5px}.training{background-color:#e0ffe4;padding:5% 10%}.training .training-container{width:500px;padding:20px 50px 50px;margin-left:50%;transform:translateX(-50%);background-color:#d0f5ff}.training .training-container .sheets .sheet{display:none;position:relative}.training .training-container .sheets .sheet h2{text-align:center;padding:15px 20px;margin:0 0 40px}.training .training-container .sheets .sheet .close{position:absolute;top:0;left:0;padding:10px 20px;font-size:30px;font-weight:700}.training .training-container .sheets .sheet .close:hover{background-color:#e5f8ff}.training .training-container .sheets .sheet.active{display:block}.training .training-container .sheets .sheet .prompt-container{display:flex;justify-content:space-between}.training .training-container .sheets .sheet .prompt-container .prompt{flex:0 0 64px;height:64px;padding:2px;border:1px solid #252525;background-color:#76dfff;font-size:30px;line-height:64px;text-align:center}.training .training-container .sheets .sheet .prompt-container .score-icon{flex:0 0 70px;border-radius:35px;cursor:pointer;font-size:30px;text-align:center;line-height:70px;font-weight:700}.training .training-container .sheets .sheet .prompt-container .score-icon:hover{background-color:#e5f8ff}.training .training-container .sheets .sheet .prompt-container .score-icon.clicked,.training .training-container .sheets .sheet .prompt-container .score-icon.clicked:hover{background-color:#76dfff}.training .training-container .sheets .sheet .choices-container{display:flex;flex-wrap:wrap;padding:20px 0;align-items:center;justify-content:center}.training .training-container .sheets .sheet .choices-container .choice{width:64px;height:64px;flex:0 0 64px;border:1px solid #252525;padding:2px;margin:1px;background-color:#e5f8ff;font-size:30px;line-height:64px;text-align:center;cursor:pointer}.training .training-container .sheets .sheet .choices-container .choice:hover{background-color:#76dfff}.training .training-container .sheets .sheet .next{padding:20px 0;display:none}.training .training-container .sheets .sheet.solved.correct .prompt-container .prompt{background-color:#5eff72}.training .training-container .sheets .sheet.solved.can-continue .next,.training .training-container .sheets .sheet.solved.can-continue .next .next-link,.training .training-container .sheets .sheet.solved.correct .next,.training .training-container .sheets .sheet.solved.correct .next .next-link{display:block}.training .training-container .sheets .sheet.solved .choices-container .choice,.training .training-container .sheets .sheet.solved .prompt-container .prompt{background-color:#ffd4d4}.training .training-container .sheets .sheet.solved .choices-container .choice.correct{background-color:#5eff72}.training .training-container .sheets .sheet.solved .result-message{font-weight:700;text-align:center}.training .training-container .sheets .sheet.solved .next{padding:20px 0;text-align:center}.training .training-container .sheets .sheet.solved .next .next-link{padding:20px 40px;background-color:#76dfff;cursor:pointer}.training-list-letters{padding:5% 10%;background-color:#e0ffe4}.training-list-letters .list-letters-container{width:360px;padding:20px 50px 50px;margin-left:50%;background-color:#d0f5ff;transform:translateX(-50%)}.training-list-letters .list-letters-container h2{text-align:center}.training-list-letters .list-letters-container .description{font-size:14px;text-align:center}.training-list-letters .list-letters-container .description.description-active{display:none}.training-list-letters .list-letters-container .letters-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.training-list-letters .list-letters-container .letters-container .letter{flex:0 0 64px;display:block;position:relative;width:64px;height:64px;border:1px solid #252525;padding:2px;margin:1px;text-align:center}.training-list-letters .list-letters-container .letters-container .letter.good{background-color:#cfffd6}.training-list-letters .list-letters-container .letters-container .letter.mid{background-color:#fff6ab}.training-list-letters .list-letters-container .letters-container .letter.bad{background-color:#ffd4d4}.training-list-letters .list-letters-container .letters-container .letter.inactive{background-color:#d5d5d5}.training-list-letters .list-letters-container .letters-container .letter .symbol{font-size:30px}.training-list-letters .list-letters-container .letters-container .letter .sound{display:block;position:absolute;bottom:2px;left:0;width:calc(100% - 4px);padding:2px;font-size:12px;overflow:hidden}.training-list-letters .list-letters-container .letters-container .letter .score{display:none;position:absolute;bottom:2px;left:0;width:calc(100% - 4px);padding:2px;font-size:12px;overflow:hidden}.training-list-letters .list-letters-container .letters-container .letter .change-score{display:none;position:absolute;top:0;width:20px;font-size:20px;font-weight:700;line-height:70px;text-decoration:none;color:#252525;background-color:rgba(0,0,0,.1)}.training-list-letters .list-letters-container .letters-container .letter .change-score.plus{right:0}.training-list-letters .list-letters-container .letters-container .letter .change-score.minus{left:0}.training-list-letters .list-letters-container .letters-container .letter .change-score:hover{background-color:rgba(0,0,0,.2)}.training-list-letters .list-letters-container .letters-container .letter .toggle-active{display:none;position:absolute;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,.1)}.training-list-letters .list-letters-container .letters-container .letter:hover .change-score{display:block}.training-list-letters .list-letters-container .letters-container .letter:hover .sound{display:none}.training-list-letters .list-letters-container .letters-container .letter:hover .score{display:block}.training-list-letters .list-letters-container .letters-container .letter.inactive:hover .change-score{display:none}.training-list-letters .list-letters-container .letters-container .letter.inactive:hover .sound{display:block}.training-list-letters .list-letters-container .letters-container .letter.inactive:hover .score{display:none}.training-list-letters .list-letters-container .back-link{display:flex;flex-direction:column;gap:20px;margin-top:20px}.training-list-letters .list-letters-container .back-link .link{display:block;padding:20px 0;text-align:center;background-color:#76dfff}.training-list-letters .list-letters-container .back-link .link.switch-mode-score{display:none}.training-list-letters.mode-active .list-letters-container .description.description-active{display:block}.training-list-letters.mode-active .list-letters-container .description.description-score{display:none}.training-list-letters.mode-active .list-letters-container .letters-container .letter:hover .toggle-active{display:block}.training-list-letters.mode-active .list-letters-container .letters-container .letter:hover .change-score{display:none}.training-list-letters.mode-active .list-letters-container .letters-container .letter:hover .sound{display:block}.training-list-letters.mode-active .list-letters-container .letters-container .letter:hover .score{display:none}.training-list-letters.mode-active .back-link .link.switch-mode-score{display:block}.training-list-letters.mode-active .back-link .link.switch-mode-active{display:none}@media (max-width:1023px){.training-index{padding:5% 0}.training-index .list .training{flex-direction:column;text-align:center;font-size:20px}.training-index .list .training .link,.training-index .list .training .title{margin:0 0 5px}.training{padding:5% 0}.training .training-container{width:100%}.training-list-letters{padding:5% 0}.training-list-letters .list-letters-container{width:100%}.training-list-letters .list-letters-container .letters-container{width:360px;margin:0 auto}}@media (max-width:425px){.training .training-container .sheets .sheet .choices-container{padding-left:10px;padding-right:10px}}@media (max-width:359px){.training-list-letters .list-letters-container .letters-container{width:100%}}