.flex{--flex-gap: 8px;--flex-padding: 8px;display:inline-flex}.flex.block{width:100%;display:flex}.flex>.divider{width:1px;height:100%;background:var(--divider-color);flex-shrink:0}.flex[direction=vertical]{flex-direction:column}.flex[direction=vertical]>.divider{width:100%;height:1px}.flex[justify=space-between]{justify-content:space-between}.flex[justify=center]{justify-content:center}.flex[justify=start]{justify-content:flex-start}.flex[justify=end]{justify-content:flex-end}.flex[justify=space-around]{justify-content:space-around}.flex[justify=space-evenly]{justify-content:space-evenly}.flex[align=center]{align-items:center}.flex[align=start]{align-items:flex-start}.flex[align=end]{align-items:flex-end}.flex[align=stretch]{align-items:stretch}.flex[align=baseline]{align-items:baseline}.flex[gap=small]{gap:var(--flex-gap)}.flex[gap=middle]{gap:calc(var(--flex-gap) * 2)}.flex[gap=large]{gap:calc(var(--flex-gap) * 3)}.flex[padding=small]{padding:var(--flex-padding)}.flex[padding=middle]{padding:calc(var(--flex-padding) * 2)}.flex[padding=large]{padding:calc(var(--flex-padding) * 3)}.text{font-size:var(--font-size, 1rem);font-family:var(--font-family);line-height:var(--line-height, 1)}.text[underlined]{text-decoration:underline}.text[uppercase]{text-transform:uppercase}.title{margin:0;line-height:var(--title-line-height, 1)}h1.title{font-size:32px}h2.title{font-size:28px}h3.title{font-size:24px}h4.title{font-size:22px;line-height:1.209em}h5.title{font-size:20px}h6.title{font-size:18px}.pagination{color:#2a2f45;margin-bottom:24px}.pagination button{width:24px;height:28px;margin:0;cursor:pointer;border:none;outline:none;display:flex;padding:0;font-size:15px;box-sizing:border-box;background:#e3e8ee;flex-shrink:0;align-items:center;justify-content:center}.pagination button:hover{background:#ddd}.pagination button.active{background:#00eef3}.image{display:flex;flex-shrink:0;align-items:center;justify-content:center}.image img{max-width:100%;max-height:100%}.card-result{margin:0 36px 36px;padding:8px;background:#fff;box-shadow:0 4px 12px #0000000d;border-radius:8px}.card-result .text{line-height:1.5}.bigger-card{height:270px;position:relative}.bigger-card+.bigger-card{margin-left:-133px}.card{height:120px;position:relative}.card:before{top:0;left:0;width:100%;height:100%;border:1px solid rgb(224,224,224);content:"";z-index:-1;position:absolute;border-radius:8px;background-color:#f7fafc}.card>.image{height:100%}.card:not(.hoverable)>.image{transition:.1s}.card.hoverable{cursor:pointer}.card+.card{margin-left:-58px}.card.picked{opacity:0;pointer-events:none}.card.focused>.image,.card.hoverable:hover>.image{transform:translateY(-40px)}.answer-card-wrapper{color:#000;position:relative;cursor:pointer}.answer-card-wrapper+.answer-card-wrapper{margin-left:-64px}.answer-card-wrapper.swap-source .answer-card:not(.placeholder):after,.answer-card-wrapper.swap-source .answer-card.placeholder{border:3px solid #f0ad4e}.answer-card-wrapper.selected .answer-card.placeholder{color:transparent;border:3px solid #5454ca;background-color:var(--highlight-color)}.answer-card-wrapper.selected .answer-card:not(.placeholder):after{border:3px solid #5454ca}.answer-card-wrapper.correct{color:#18af77}.answer-card-wrapper.wrong{color:#ed7474}.answer-card-wrapper.correct .answer-card:after,.answer-card-wrapper.wrong .answer-card:after,.answer-card-wrapper.selected .answer-card:after{top:0;left:0;right:0;bottom:0;border:2px solid currentColor;content:"";position:absolute;border-radius:8px}.answer-card{width:104.5px;height:160px;position:relative;box-sizing:border-box}.answer-card>.image{width:100%;height:100%}.answer-card.placeholder{border:2px solid rgb(224,224,224);border-radius:8px;background-color:#f7fafc}.answer-card.correct,.answer-card.wrong{border:2px solid;border-radius:8px}.answer-card.correct.correct,.answer-card.wrong.correct{border-color:#2ecc71}.answer-card.correct.wrong,.answer-card.wrong.wrong{border-color:#e74c3c}.images{color:#000}.images .highlight .image{overflow:hidden;box-shadow:0 0 16px #4bcfc1;border-radius:8px}.images .image{cursor:pointer}.images input{width:24px;height:24px;border:1px solid var(--divider-color);outline:none;font-size:15px;text-align:center;border-radius:4px}.images input:focus{background-color:var(--highlight-color)}.images .result{width:24px;height:28px;text-align:center;line-height:28px;border-radius:4px}.images .result.empty{background-color:var(--empty-color)}.images .result.wrong{background-color:var(--wrong-color)}.images .result.correct{background-color:var(--correct-color)}.exercise-words-problems{--border-color: #C1C9D2;color:#000;border:1px solid var(--border-color);border-right:none}.exercise-words-problems .word-box{height:30px;font-size:15px;line-height:22px;border-right:1px solid var(--border-color);border-bottom:1px solid var(--border-color)}.exercise-words-problems .word-box-text{margin-left:5px}.exercise-words-problems .word-box:last-child{border-bottom:none}.exercise-words-problems .word-box-index{height:30px;width:32px;justify-content:center;border-right:1px solid var(--border-color)}.exercise-words-problems .last-column{border-right:none}.exercise-words-problems .highlight{background:var(--highlight-color)}.exercise-words-result .word-box{width:200px}.exercise-words-result .word-box-index{width:32px;height:28px;font-size:15px;line-height:28px}.exercise-words-result .word-box-text{width:100%;height:28px;font-size:15px;line-height:28px;padding-inline:10px}.exercise-words-result .word-box-text.correct{background-color:var(--correct-color)}.exercise-words-result .word-box-text.wrong{background-color:var(--wrong-color)}.exercise-words-result .word-box-text.empty{background-color:var(--empty-color)}.exercise-words-answers{--border-color: #C1C9D2;display:table}.exercise-words-answers .word-box{font-size:15px;line-height:22px;margin-block:1px}.exercise-words-answers .word-box-index{width:32px;height:28px;align-items:center;justify-content:center}.exercise-words-answers .word-box-input{height:28px;border:1px solid var(--border-color);outline:none;flex-grow:1;font-size:15px;padding-inline:5px}.exercise-words-answers .highlight input{background:var(--empty-color)}.exercise-words-answers input:focus{background:var(--highlight-color)}.numbers-result{color:#1a1f36}.numbers-result .row:first-child .cell{margin-top:0}.numbers-result .cell{width:24px;height:28px;line-height:28px;margin-block:1px}.numbers-result .cell.empty{background-color:var(--empty-color)}.numbers-result .cell.wrong{background-color:var(--wrong-color)}.numbers-result .cell.correct{background-color:var(--correct-color)}.numbers-result .line{width:1px;align-self:stretch;background-color:#697386}.numbers-result .row-no{color:#000;width:80px;font-size:15px;text-align:left;margin-left:auto;padding-left:12px}.face-names{color:#000}.face-names .image{width:150px;height:150px}.face-names .image img{max-width:100%;max-height:100%}.face-names .wrapper{box-sizing:border-box;padding-top:8px;justify-content:space-between}.face-names .wrapper.readonly{width:200px;height:220px;padding:8px;cursor:pointer;border:1px solid transparent;border-radius:8px;justify-content:flex-start}.face-names .wrapper.readonly.highlight{background-color:var(--highlight-color);border-color:#4bcfc1}.face-names .wrapper.input{width:264px}.face-names .wrapper.input input{width:100%;height:34px;border:1px solid var(--divider-color);outline:none;font-size:16px;text-align:center;box-sizing:border-box;padding-inline:8px}.face-names .wrapper.input input:focus{background-color:var(--highlight-color);border-color:#6ebaff}.face-names .wrapper.input input:first-child{border-right:none;border-radius:4px 0 0 4px}.face-names .wrapper.input input:last-child{border-radius:0 4px 4px 0}.face-names .wrapper.result{width:264px}.face-names .wrapper.result .result-field{width:132px;height:34px;border:1px solid var(--divider-color);display:flex;overflow:hidden;font-size:16px;box-sizing:border-box;align-items:center;white-space:nowrap;text-overflow:ellipsis;padding-inline:8px;justify-content:center}.face-names .wrapper.result .result-field:first-child{border-right:none;border-radius:4px 0 0 4px}.face-names .wrapper.result .result-field:last-child{border-radius:0 4px 4px 0}.face-names .wrapper.result .result-field.empty{background-color:var(--empty-color)}.face-names .wrapper.result .result-field.wrong{background-color:var(--wrong-color)}.face-names .wrapper.result .result-field.correct{background-color:var(--correct-color)}.fictional-dates{--height: 32px;--divider-color: #C1C9D2;width:800px!important;color:#1a1f36}.fictional-dates:not(.input){height:var(--height)}.fictional-dates:not(.input)+.fictional-dates:not(.input){border-top:none}.fictional-dates:not(.input).highlight{background-color:var(--empty-color)}.fictional-dates:not(.input) .text{height:100%;line-height:var(--height)}.fictional-dates:not(.input) .no{width:var(--height);text-align:center;box-sizing:border-box}.fictional-dates:not(.input) .date{width:100px;text-align:center}.fictional-dates:not(.input) .description{padding-inline:16px}.fictional-dates.input{color:#000;padding-block:2px}.fictional-dates.input .no{width:50px;text-align:right;padding-right:12px}.fictional-dates.input input,.fictional-dates.input .date{width:100px;height:var(--height);padding:4px 10px;outline:none;font-size:15px;box-sizing:border-box}.fictional-dates.input input{border:1px solid #C1C9D2}.fictional-dates.input input:focus{background-color:var(--highlight-color)}.fictional-dates.input .date{text-align:left;display:flex;align-items:center}.fictional-dates.input .date.empty{background-color:var(--empty-color)}.fictional-dates.input .date.wrong{background-color:var(--wrong-color)}.fictional-dates.input .date.correct{background-color:var(--correct-color)}.fictional-dates.input .description{padding-inline:16px}.exercise-header .timer{height:28px;margin-inline:auto;padding-inline:10px}.exercise-header .timer.warning{color:#fff;background-color:#cd3d64}.exercise-numbers{--box-height: 28px;--divider-color: #e0e0e0;color:#000}.exercise-numbers .numbers-row{padding-inline:2px}.exercise-numbers .line{height:var(--box-height);border-right:1px solid #697386;margin-inline:1px}.exercise-numbers .row-no{width:80px;font-size:15px;text-align:left;margin-left:auto;padding-left:12px}.exercise-numbers .number-box{width:18px;height:var(--box-height);font-size:15px;text-align:center;line-height:var(--box-height)}.exercise-numbers .number-box.highlight{background-color:var(--empty-color)}.exercise-numbers .numbers-row.input{--margin-block: 1px;gap:2px}.exercise-numbers .numbers-row.input input{margin-block:var(--margin-block)}.exercise-numbers .numbers-row.input .line{height:calc(var(--box-height) + var(--margin-block) * 2)}.exercise-numbers input.number-box{width:24px;border:1px solid var(--divider-color);outline:none}.exercise-numbers input.number-box:focus{--divider-color: #6ebaff;background-color:var(--highlight-color)}.spoken-numbers-grid .number-item{width:24px;height:28px;border:1px solid var(--divider-color);display:flex;font-size:15px;align-items:center;justify-content:center}.spoken-numbers-grid .number-item.highlight{background-color:#c1c9d2}.spoken-numbers-grid .row-no{color:#1a1f36;width:80px;font-size:15px;text-align:left;margin-left:auto;padding-left:12px}.key-mapping-page{gap:24px;flex-grow:1}.key-mapping-page .key-mappings-box{width:400px;border:1px solid #C1C9D2;padding:20px;box-sizing:content-box;background:#a3acb94d;margin-inline:auto;border-radius:16px;color:#2a2f45}.key-mapping-page .mapping-row{display:flex;align-items:center;padding-block:5px;flex-direction:row;justify-content:space-between}.key-mapping-page .mapping-row:last-child{padding-bottom:0}.key-mapping-page .key-display{color:#2a2f45;height:20px;padding:8px;min-width:24px;background:#fff;box-sizing:content-box;text-align:center;font-weight:500;line-height:1.5;line-height:1.5rem;flex-shrink:0;border-radius:6px}.key-mapping-page .key-display img{width:20px;height:20px;color:#2a2f45;vertical-align:top}:root{--input-bg: #E3E8EE;--divider-color: #C1C9D2;--empty-color: #E3E8EE;--wrong-color: #FBB5B2;--correct-color: #CBF4C9;--highlight-color: #C0F9F3;--point-color: #219653}body{height:100vh}#root{display:flex;min-height:100%}.result-page{margin:0 36px 36px;padding:8px}.result-page .box{width:auto!important;border:2px solid var(--empty-color);padding:10px;border-radius:4px}.result-page .point{color:var(--point-color)}