.kerning-trainer{margin:0 var(--grid-margin) 4rem;flex-direction:column;align-items:center;gap:2rem;min-height:30rem;display:flex}.kerning-trainer__word-row{place-items:center;width:100%;height:20rem;padding-inline:4rem;display:grid;position:relative}.kerning-trainer__word-area{-webkit-user-select:none;user-select:none;position:relative}.kerning-trainer__current-word{isolation:isolate;font-kerning:none;font-variant-ligatures:none;font-feature-settings:"calt" 0;height:1em;font-size:min(13rem, calc((100 * var(--layout-unit) - 2 * var(--grid-margin) - 8rem) / (var(--letter-count) * .75)));white-space:nowrap;font-weight:400;line-height:1;display:flex;position:relative}.kerning-trainer__current-word>span{z-index:1;height:1em;display:block;position:absolute;top:0}.kerning-trainer__draggable{cursor:grab;touch-action:none;transition:color .3s ease-out}.kerning-trainer__draggable:hover,.kerning-trainer__draggable[data-dragging]{color:#f0c;z-index:2}.kerning-trainer__draggable:focus-visible,.kerning-trainer__draggable[data-selected],.kerning-trainer__draggable[data-dragging]{color:#f0c;z-index:2;outline:none}.kerning-trainer__draggable[data-dragging]{cursor:grabbing}.kerning-trainer__actions{position:relative}.kerning-trainer__refresh{position:absolute;top:50%;left:calc(100% + 1rem);transform:translateY(-50%)}.kerning-trainer__result-slot{pointer-events:none;z-index:3;place-items:center;display:grid;position:absolute;inset:0}.kerning-trainer__result{--result-color:#adf000;corner-shape:squircle;background:var(--result-color);color:#000;text-align:center;transform-origin:50%;border:.5rem solid #fff;border-radius:47% 53% 50% 50%/51% 48% 52% 49%;flex-direction:column;justify-content:center;align-items:center;width:12rem;height:12rem;padding:1rem;animation-duration:.82s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both;display:flex;transform:rotate(-5deg)}.kerning-trainer__result strong{font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;font-size:5rem;font-weight:700;line-height:4rem}.kerning-trainer__result-label{font-family:var(--font-serif);white-space:nowrap;margin-top:1rem;font-size:1.5rem;font-style:italic;line-height:1rem}.kerning-trainer__result--excellent{animation-name:kerning-result-excellent}.kerning-trainer__result--good{animation-name:kerning-result-good}.kerning-trainer__result--okay,.kerning-trainer__result--so-so{animation-name:kerning-result-okay}.kerning-trainer__result--bad{animation-name:kerning-result-bad}.kerning-trainer__result--catastrophe{animation-name:kerning-result-catastrophe}@keyframes kerning-word-in{0%{opacity:0;scale:.985}to{opacity:1;scale:1}}@keyframes kerning-target-in{0%{opacity:0}to{opacity:1}}@keyframes kerning-result-excellent{0%{opacity:0;filter:blur(.6rem);translate:0 2rem;scale:.88}72%{opacity:1;filter:blur();translate:0 -.25rem;scale:1.07}to{opacity:1;filter:blur();translate:0;scale:1}}@keyframes kerning-result-good{0%{opacity:0;filter:blur(.45rem);translate:-1.5rem .5rem;scale:.93}72%{opacity:1;filter:blur();translate:.25rem -.1rem;scale:1.025}to{opacity:1;filter:blur();translate:0;scale:1}}@keyframes kerning-result-okay{0%{opacity:0;filter:blur(.4rem);translate:-1rem .7rem;rotate:none}35%{opacity:1;filter:blur();translate:.45rem -.1rem;rotate:-1.2deg}52%{translate:-.32rem .05rem;rotate:1deg}68%{translate:.2rem;rotate:-.6deg}84%{translate:-.06rem;rotate:.2deg}to{opacity:1;translate:0;rotate:0;filter:blur();scale:1}}@keyframes kerning-result-bad{0%{opacity:0;filter:blur(.45rem);translate:0 -1.5rem;rotate:none}65%{opacity:1;filter:blur();translate:0 .65rem;rotate:-2.5deg}82%{translate:0 -.1rem;rotate:.8deg}to{opacity:1;translate:0;rotate:0;filter:blur();scale:1}}@keyframes kerning-result-catastrophe{0%{opacity:0;filter:blur(.6rem);translate:0 -1rem;scale:1.12 .72}68%{opacity:1;filter:blur();translate:0 .9rem;scale:1.24 .58}to{opacity:1;filter:blur();translate:0;scale:1}}@media (prefers-reduced-motion:reduce){.kerning-trainer__result{animation:none}}.kerning-trainer__target-word{color:#00cfff;pointer-events:none;z-index:0;display:flex;position:absolute;inset:0}.kerning-trainer__target-word>span{height:1em;display:block;position:absolute;top:0}@media (prefers-reduced-motion:reduce){.kerning-trainer__draggable{transition:none}}
@font-face{font-family:Kerning PT Sans;src:url(/fonts/kerning/ptsans/regular.woff2)format("woff2");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Kerning Roboto;src:url(/fonts/kerning/roboto/regular.woff2)format("woff2");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Kerning Fira Sans Extra Condensed;src:url(/fonts/kerning/firasansextracondensed/regular.woff2)format("woff2");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Kerning Merriweather;src:url(/fonts/kerning/merriweather/regular.woff2)format("woff2");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:"Kerning Exo 2";src:url(/fonts/kerning/exo2/regular.woff2)format("woff2");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Kerning Lemon Tuesday;src:url(/fonts/kerning/lemontuesday/regular.woff2)format("woff2");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Kerning Cormorant Garamond;src:url(/fonts/kerning/cormorantgaramond/regular.woff2)format("woff2");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Kerning Arimo;src:url(/fonts/kerning/arimo/regular.woff2)format("woff2");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Kerning PT Serif;src:url(/fonts/kerning/ptserif/regular.woff2)format("woff2");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Kerning Lora;src:url(/fonts/kerning/lora/regular.woff2)format("woff2");font-style:normal;font-weight:400;font-display:swap}
.page-kerning-trainer{--kerning-trainer-blue:#026beb}.kerning-trainer-hero{flex-direction:column;justify-content:center;align-items:center;gap:3.5rem;margin-bottom:2rem;padding-top:7rem;padding-bottom:1rem;display:flex}.kerning-trainer-hero h1{width:100%;font-family:var(--font-sans);letter-spacing:-.02em;text-align:center;margin:0;padding:.55rem 0 .45rem;font-size:6.5rem;font-variant-caps:normal;font-weight:500;line-height:5rem}.kerning-trainer-hero .task{width:100%;max-width:40ch;font-family:var(--font-sans);text-align:left;padding:.55rem 0 .45rem;font-size:1.5rem;font-style:italic;line-height:2rem}.kerning-trainer-hero .task strong{font-family:var(--font-sans);background:#ffc2f3;font-style:italic;font-weight:600}@media (max-width:700px){.kerning-trainer-hero{gap:1rem;padding-top:5rem}.kerning-trainer-hero h1{padding-block:.4rem .6rem;font-size:4.5rem;line-height:4.5rem}}