@import"https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:wght@300;700&display=swap";*:where(:not(html,iframe,canvas,img,svg,video):not(svg *,symbol *)){all:unset;display:revert}*,*:before,*:after{box-sizing:border-box}a,button{cursor:revert}ol,ul,menu{list-style:none}img{max-width:100%}table{border-collapse:collapse}textarea{white-space:revert}meter{-webkit-appearance:revert;-moz-appearance:revert;appearance:revert}::placeholder{color:unset}:where([hidden]){display:none}:where([contenteditable]){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space}:where([draggable=true]){-webkit-user-drag:element}:root{--red: #AD1D25;--white: #FFFFFF;--black: #000000;--blue: #1E4785;--orange: #E17000;--background: var(--white);--foreground: var(--black);--font-size-l: 48pt;--font-size-m: 16pt;--font-size-s: 13pt;--breakpoint: 720px;--spacer-l: 24px;--spacer-m: 16px;--spacer-s: 12px;--spacer-xs: 8px;--border-radius: 24px}@media (prefers-color-scheme: dark){:root{--background: var(--black);--foreground: var(--white)}}@media (min-width: 720px){:root{--font-size-l: 64pt;--font-size-m: 28pt;--font-size-s: 24pt}}html,body{height:100%}body{font-family:"Averia Serif Libre",cursive;font-size:var(--font-size-m);color:var(--foreground);text-align:center;padding:var(--spacer-m);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}body:after{content:"";position:absolute;top:-1%;left:0;width:100%;height:102%;z-index:-1;background:var(--background);background:linear-gradient(170deg,var(--red) 0%,var(--red) 15%,var(--background) 15%,var(--background) 85%,var(--blue) 85%,var(--blue) 100%);animation:bob ease-in-out 2s infinite}@media (prefers-reduced-motion: reduce){body:after{animation:none}}@keyframes bob{0%{transform:translateY(1%)}50%{transform:translateY(-1%)}to{transform:translateY(1%)}}@media (min-width: 720px){body:after{background:linear-gradient(170deg,var(--red) 0%,var(--red) 25%,var(--background) 25%,var(--background) 75%,var(--blue) 75%,var(--blue) 100%)}}h1{margin-bottom:var(--spacer-m);font-weight:700;font-size:var(--font-size-l);padding:0 var(--spacer-m);background-color:var(--background);border-radius:var(--border-radius)}@media (prefers-color-scheme: dark){h1{background-color:transparent}}#wordForm,#results{display:flex;flex-direction:column;justify-content:center;align-items:center}p{margin-bottom:var(--spacer-l)}#word{font-weight:700}#hintButton,#sampleSentence{margin-top:var(--spacer-l);margin-bottom:0}#sampleSentence{background-color:var(--background);padding:var(--spacer-s);border:4px solid var(--foreground)}#sampleSentence:before{content:"“"}#sampleSentence:after{content:"”"}button{background:var(--background);color:var(--foreground);padding:var(--spacer-s);border-radius:var(--border-radius);border:4px solid var(--foreground);transition:transform cubic-bezier(.4,0,.2,1) .2s}button:active,button:focus,button:hover{transform:scale(1.1)}button:focus{outline:4px dashed var(--foreground)}@media (prefers-reduced-motion: reduce){button:active,button:focus,button:hover{transform:none}button:hover{outline:4px dashed var(--foreground)}}.de{background:var(--red);color:var(--white)}.het{background:var(--blue);color:var(--white)}.key{display:inline-block;padding:var(--spacer-xs);border:4px solid var(--foreground)}.score{text-align:left;padding:var(--spacer-s)}#pieChart{border:4px solid white;position:relative;margin-bottom:var(--spacer-l);width:150px;height:150px;border-radius:100%;background-image:conic-gradient(from 0deg at 50% 50%,var(--background) 0%,var(--background) 1%,var(--red) 1%,var(--red) 49%,var(--background) 49%,var(--background) 51%,var(--blue) 51%,var(--blue) 99%,var(--background) 99%)}#pieChart:after{position:absolute;top:50%;left:50%;width:50%;height:50%;transform:translate(-50%,-50%);content:"";border-radius:100%;background:var(--white)}#pieChart.loading{animation:spin linear 2s infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}footer{position:absolute;right:0;bottom:0;padding:var(--spacer-s);color:var(--white);font-size:var(--font-size-s)}a:focus{outline:4px dashed var(--white)}