.kerning-trainer{--kerning-trainer-width:58rem;width:min(var(--kerning-trainer-width), calc(calc(100 * var(--layout-unit)) - 2 * var(--grid-margin)));min-height:38rem;margin:0 var(--grid-margin) 4rem;flex-direction:column;align-items:flex-start;gap:2rem;display:flex}.kerning-trainer__word-row{justify-content:flex-start;align-items:center;gap:2rem;width:100%;min-height:18rem;display:flex}.kerning-trainer__word-area{-webkit-user-select:none;user-select:none;flex:0 auto;place-items:center start;min-width:0;min-height:18rem;display:grid;position:relative;overflow:visible}.kerning-trainer__current-word,.kerning-trainer__target-word{max-width:none;font-size:round(down, min(calc(13 * var(--layout-unit)), 13rem), 1rem);white-space:nowrap;flex-wrap:nowrap;justify-content:flex-start;font-weight:400;line-height:.9;display:flex}.kerning-trainer__current-word{z-index:2;color:var(--color-foreground);animation:.28s ease-out both kerning-word-in;position:relative}.kerning-trainer__target-word{z-index:1;color:#f0c;pointer-events:none;align-items:center;animation:.25s ease-out both kerning-target-in;position:absolute;inset:0}.kerning-trainer__current-word span,.kerning-trainer__target-word span{transition:transform .15s ease-out;display:inline-block}.kerning-trainer__result-slot{flex:0 0 12rem;justify-content:flex-start;align-items:center;width:12rem;min-height:12rem;display:flex}.kerning-trainer__result{--result-color:#adf000;corner-shape:squircle;background:var(--result-color);color:#000;text-align:center;transform-origin:50% 60%;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__controls{border:1px solid var(--color-grey-10);corner-shape:squircle;background:var(--color-background);border-radius:4rem;flex-direction:column;align-items:flex-start;gap:2rem;width:36rem;max-width:100%;padding:calc(2.5rem - 1px) calc(3rem - 1px);display:flex}.kerning-trainer__letters{flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:.5rem;min-height:3rem;font-size:1.5rem;line-height:1;display:flex}.kerning-trainer__edge-letter{place-items:center;min-width:3rem;height:3rem;padding:0 .5rem;display:grid}.kerning-trainer__letter-button{border:1px solid var(--kerning-trainer-blue,#026beb);corner-shape:squircle;background:var(--color-background);width:3rem;height:3rem;color:var(--kerning-trainer-blue,#026beb);font:inherit;cursor:pointer;border-radius:1rem;place-items:center;padding:0;line-height:1;transition:border-color .18s ease-out,background-color .18s ease-out,color .18s ease-out,scale .12s ease-out;display:grid}.kerning-trainer__letter-button:hover{background:color-mix(in srgb, var(--kerning-trainer-blue,#026beb) 6%, white)}.kerning-trainer__letter-button:active{scale:.97}.kerning-trainer__letter-button--active{background:var(--color-grey-10);color:var(--color-foreground);border-color:#0000}.kerning-trainer__slider{width:100%;position:relative}.kerning-trainer__actions{justify-content:space-between;align-items:center;width:100%;display:flex}.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 (max-width:1000px){.kerning-trainer{--kerning-trainer-width:calc(calc(100 * var(--layout-unit)) - 2 * var(--grid-margin))}.kerning-trainer__word-row,.kerning-trainer__word-area{min-height:16rem}.kerning-trainer__current-word,.kerning-trainer__target-word{font-size:round(down, min(calc(14 * var(--layout-unit)), 10rem), 1rem)}}@media (max-width:700px){.kerning-trainer{width:calc(calc(100 * var(--layout-unit)) - 2 * var(--grid-margin))}.kerning-trainer__word-row{flex-direction:column;align-items:flex-start;gap:1rem;min-height:0}.kerning-trainer__word-area{min-height:12rem}.kerning-trainer__current-word,.kerning-trainer__target-word{font-size:round(down, min(calc(20 * var(--layout-unit)), 8rem), 1rem)}.kerning-trainer__result-slot{min-height:0}.kerning-trainer__controls{border-radius:2rem;width:100%;padding:calc(2rem - 1px)}}
.page-kerning-trainer{--kerning-trainer-blue:#026beb}.kerning-trainer-hero{flex-direction:row;justify-content:start;align-items:end;gap:2rem;margin-bottom:2rem;padding-top:5rem;padding-bottom:1rem;display:flex}.kerning-trainer-hero h1{width:min-content;font-family:var(--font-sans);letter-spacing:-.02em;text-align:left;margin:0;padding:round(.55rem,1px) 0 round(.45rem,1px);font-size:6.5rem;font-variant-caps:normal;font-weight:500;line-height:5rem}.kerning-trainer-hero .task{width:100%;max-width:36ch;font-family:var(--font-sans);text-align:left;padding:round(.55rem,1px) 0 round(.45rem,1px);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:1000px){.kerning-trainer-hero h1{grid-column:1/7}.kerning-trainer-hero .task{grid-column:7/13}}@media (max-width:700px){.kerning-trainer-hero{flex-direction:column;align-items:start;gap:1rem;padding-top:3rem}.kerning-trainer-hero h1,.kerning-trainer-hero .task{grid-column:1/13}.kerning-trainer-hero h1{width:auto;font-size:4.5rem;line-height:4rem}.kerning-trainer-hero .task{margin-right:var(--grid-column-padding);margin-left:var(--grid-column-padding)}}