.typing-practice{--bg-color:#161616;--main-color:#dfded3;--caret-color:#e2a814;--sub-color:#55575a;--pending-color:color-mix(in srgb, var(--main-color) 50%, var(--sub-color));--sub-alt-color:#0a0a0a;--error-color:#ca4754;--error-extra-color:#7e2a33;--line-height:2.25rem;--translation-line-height:calc(var(--line-height) / 1.4);--translation-word-gap:calc(var(--line-height) / 12);--caret-height:1.5rem;--gap-width:1.5rem;--caret-transition:.1s ease-out;--translation-transition:90ms ease;--word-panel-transition:50ms ease;background:var(--bg-color);height:100%;min-height:100svh;color:var(--main-color);flex-direction:column;flex:1;font-family:Roboto Mono,ui-monospace,monospace;display:flex}.typing-practice__main{flex:1;justify-content:center;align-items:center;padding:2rem 1rem;display:flex}.typing-practice__toolbar{background:var(--sub-alt-color);border-bottom:1px solid color-mix(in srgb, var(--sub-color) 35%, transparent);justify-content:space-between;align-items:flex-start;gap:.75rem 1rem;padding:.75rem 1rem;display:flex}.typing-practice__tags-bar{background:0 0;border-bottom:none;flex-wrap:wrap;flex:1;align-items:center;gap:.5rem .75rem;min-width:0;padding:0;display:flex}.typing-practice__tags-list{flex-wrap:wrap;flex:1;align-items:center;gap:.375rem;min-width:0;display:flex}.typing-practice__tag{background:var(--bg-color);color:var(--main-color);border-radius:.25rem;align-items:center;gap:.25rem;padding:.2rem .35rem .2rem .55rem;font-size:.8125rem;display:inline-flex}.typing-practice__tag-remove{width:1.125rem;height:1.125rem;color:var(--sub-color);cursor:pointer;background:0 0;border:none;border-radius:.2rem;justify-content:center;align-items:center;padding:0;font-size:1rem;line-height:1;transition:color .12s,background .12s;display:flex}.typing-practice__tag-remove:hover{color:var(--main-color);background:color-mix(in srgb, var(--sub-color) 25%, transparent)}.typing-practice__tag-picker{flex-shrink:0;position:relative}.typing-practice__lang-picker{flex-shrink:0;display:flex}.typing-practice__lang-select{border:1px solid color-mix(in srgb, var(--sub-color) 50%, transparent);background:var(--bg-color);color:var(--main-color);cursor:pointer;appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--sub-color) 50%), linear-gradient(135deg, var(--sub-color) 50%, transparent 50%);background-position:calc(100% - .85rem) calc(50% + .1rem),calc(100% - .55rem) calc(50% + .1rem);background-repeat:no-repeat;background-size:.35rem .35rem,.35rem .35rem;border-radius:.25rem;padding:.25rem 1.75rem .25rem .55rem;font-family:inherit;font-size:.8125rem;transition:color .12s,border-color .12s}.typing-practice__lang-select:hover,.typing-practice__lang-select:focus{color:var(--caret-color);border-color:var(--caret-color);outline:none}.typing-practice__tag-add{border:1px solid color-mix(in srgb, var(--sub-color) 50%, transparent);color:var(--sub-color);cursor:pointer;background:0 0;border-radius:.25rem;padding:.25rem .65rem;font-family:inherit;font-size:.8125rem;transition:color .12s,border-color .12s}.typing-practice__tag-add:hover{color:var(--caret-color);border-color:var(--caret-color)}.typing-practice__tag-menu{z-index:10;background:var(--bg-color);border:1px solid color-mix(in srgb, var(--sub-color) 40%, transparent);border-radius:.35rem;min-width:10rem;max-width:min(20rem,100vw - 2rem);max-height:14rem;padding:.35rem;position:absolute;top:calc(100% + .35rem);right:0;overflow-y:auto;box-shadow:0 .35rem 1rem #00000059}.typing-practice__tag-option{width:100%;color:var(--main-color);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:.2rem;padding:.35rem .5rem;font-family:inherit;font-size:.8125rem;transition:background .12s,color .12s;display:block}.typing-practice__tag-option:hover{background:var(--sub-alt-color);color:var(--caret-color)}.typing-practice__tag-menu-empty{color:var(--sub-color);text-align:center;padding:.5rem;font-size:.8125rem}.typing-practice__empty-filter{color:var(--sub-color);text-align:center;max-width:24rem;font-size:.9375rem;line-height:1.5}.typing-practice__typing{width:min(100%,64rem);min-height:calc(var(--line-height) * 3);cursor:text;outline:none;position:relative}.typing-practice__word-panel{background:var(--sub-alt-color);opacity:0;pointer-events:none;transition:opacity var(--word-panel-transition), transform var(--word-panel-transition);z-index:2;border-radius:.5rem;max-height:min(40vh,16rem);margin-bottom:.75rem;padding:1rem 1.25rem;position:absolute;bottom:100%;left:0;right:0;overflow-y:auto;transform:translateY(.35rem)}.typing-practice__word-panel--visible{opacity:1;pointer-events:auto;transform:translateY(0)}.typing-practice__word-panel-close{width:1.5rem;height:1.5rem;color:var(--sub-color);cursor:pointer;transition:color var(--word-panel-transition), background var(--word-panel-transition);background:0 0;border:none;border-radius:.25rem;justify-content:center;align-items:center;padding:0;font-size:1.25rem;line-height:1;display:flex;position:absolute;top:.4rem;right:.4rem}.typing-practice__word-panel-close:hover{color:var(--main-color);background:color-mix(in srgb, var(--sub-color) 20%, transparent)}.typing-practice__word-panel-head{margin-bottom:.75rem;padding-right:1.5rem}.typing-practice__word-panel-word{color:var(--main-color);font-size:1.125rem;line-height:1.4}.typing-practice__word-panel-translation{color:var(--pending-color);margin-top:.25rem;font-size:.875rem;line-height:1.4}.typing-practice__word-panel-examples{border-top:1px solid color-mix(in srgb, var(--sub-color) 35%, transparent);flex-direction:column;gap:.75rem;padding-top:.75rem;display:flex}.typing-practice__example-row{align-items:flex-start;gap:.5rem;display:flex}.typing-practice__example-content{flex:1;min-width:0}.typing-practice__example-text{color:var(--main-color);font-size:.9375rem;line-height:1.45}.typing-practice__example-speak{flex-direction:column;flex-shrink:0;align-items:center;gap:.2rem;display:flex}.typing-practice__example-index{color:var(--caret-color);opacity:.85;-webkit-user-select:none;user-select:none;white-space:nowrap;font-size:.625rem;line-height:1}.typing-practice__example-translation{color:var(--pending-color);margin-top:.125rem;font-size:.875rem;line-height:1.35}.typing-practice__speak-btn{background:color-mix(in srgb, var(--caret-color) 12%, transparent);width:1.75rem;height:1.75rem;color:var(--caret-color);cursor:pointer;transition:background var(--word-panel-transition), color var(--word-panel-transition), opacity var(--word-panel-transition);border:none;border-radius:.35rem;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.typing-practice__speak-btn:hover{background:color-mix(in srgb, var(--caret-color) 22%, transparent)}.typing-practice__speak-btn--active{background:color-mix(in srgb, var(--caret-color) 30%, transparent)}.typing-practice__typing:has(.typing-practice__words--with-translation){min-height:calc(var(--line-height) * 3 + var(--translation-line-height) + var(--translation-word-gap))}.typing-practice__words{--visible-word-lines:3;font-size:1.5rem;line-height:var(--line-height);height:calc(var(--line-height) * var(--visible-word-lines));-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.typing-practice__words--with-translation{height:calc(var(--line-height) * var(--visible-word-lines) + var(--translation-line-height) + var(--translation-word-gap))}.typing-practice__words--measure{visibility:hidden;pointer-events:none;width:100%;position:absolute;left:0;right:0;height:auto!important;max-height:none!important;overflow:visible!important}.typing-practice__line{min-height:var(--line-height);line-height:var(--line-height);display:block}.typing-practice__translation-slot{height:var(--translation-line-height);margin-bottom:var(--translation-word-gap);pointer-events:none;display:block}.typing-practice__translation-line{height:var(--translation-line-height);line-height:var(--translation-line-height);color:var(--pending-color);text-align:left;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;opacity:0;transition:opacity var(--translation-transition), top var(--translation-transition), padding-left var(--translation-transition);font-size:.9rem;position:absolute;left:0;right:0;overflow:hidden}.typing-practice__translation-line--visible{opacity:1}.typing-practice__word-group{vertical-align:top;display:inline-block}.typing-practice__word-row,.typing-practice__word{display:inline}.typing-practice__separator{width:var(--gap-width);height:var(--line-height);vertical-align:top;display:inline-block;position:relative}.typing-practice__divider{width:1px;height:calc(var(--caret-height) * .75);opacity:.7;pointer-events:none;background:#7a7d80;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.typing-practice__letter{height:var(--line-height);line-height:var(--line-height);vertical-align:top;color:var(--pending-color);display:inline-block;position:relative}.typing-practice__letter--gap{color:#0000;width:100%}.typing-practice__letter--gap.typing-practice__letter--correct,.typing-practice__letter--gap.typing-practice__letter--incorrect,.typing-practice__letter--gap.typing-practice__letter--pending{color:#0000}.typing-practice__letter--pending{color:var(--pending-color)}.typing-practice__letter--correct{color:var(--main-color)}.typing-practice__letter--incorrect{color:var(--error-color)}.typing-practice__letter--extra{color:var(--error-color);background:var(--error-extra-color);border-radius:.1rem}.typing-practice__caret{width:.12rem;height:var(--caret-height);background:var(--caret-color);opacity:1;pointer-events:none;z-index:2;transition:left var(--caret-transition), top var(--caret-transition);border-radius:.05rem;margin-left:-.06rem;position:absolute;top:0;left:0}.typing-practice__caret--idle{animation:1s infinite typing-practice-blink}@keyframes typing-practice-blink{0%,to{opacity:1}50%{opacity:0}}.typing-practice__input{opacity:0;cursor:text;resize:none;color:#0000;caret-color:#0000;background:0 0;border:none;margin:0;padding:0;position:absolute;inset:0}.typing-practice__input:focus{outline:none}.typing-practice__footer{color:var(--sub-color);-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:.75rem;padding:0 1rem 2rem;font-size:.75rem;display:flex}.typing-practice__settings{flex-wrap:wrap;justify-content:center;gap:1rem 1.5rem;display:flex}.typing-practice__hint{color:var(--sub-color);text-align:center;margin:0;font-size:.6875rem}.typing-practice__setting{cursor:pointer;color:var(--sub-color);align-items:center;gap:.5rem;display:flex}.typing-practice__setting input[type=checkbox]{appearance:none;box-sizing:border-box;border:1px solid var(--sub-color);background:color-mix(in srgb, var(--sub-color) 15%, transparent);cursor:pointer;vertical-align:middle;width:.875rem;height:.875rem;transition:background var(--word-panel-transition), border-color var(--word-panel-transition);border-radius:.15rem;flex-shrink:0;margin:0;position:relative}.typing-practice__setting input[type=checkbox]:checked{background:var(--sub-color);border-color:var(--sub-color)}.typing-practice__setting input[type=checkbox]:checked:after{content:"";border:solid var(--bg-color);border-width:0 2px 2px 0;width:.2rem;height:.42rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-58%)rotate(45deg)}.typing-practice__loading,.typing-practice__error{color:var(--sub-color);flex:1;justify-content:center;align-items:center;padding:2rem;font-size:.95rem;display:flex}.typing-practice__error{color:var(--error-color)}.typing-practice__complete{text-align:center;color:var(--caret-color);margin-top:1.5rem;font-size:.875rem}