:root{--font-size: 12px;--vt-c-white: #ffffff;--vt-c-white-soft: #f8f8f8;--vt-c-white-mute: #f2f2f2;--vt-c-black: #181818;--vt-c-black-soft: #222222;--vt-c-black-mute: #282828;--vt-c-indigo: #2c3e50;--vt-c-divider-light-1: rgba(60, 60, 60, .29);--vt-c-divider-light-2: rgba(60, 60, 60, .12);--vt-c-divider-dark-1: rgba(84, 84, 84, .65);--vt-c-divider-dark-2: rgba(84, 84, 84, .48);--vt-c-text-light-1: var(--vt-c-indigo);--vt-c-text-light-2: rgba(60, 60, 60, .66);--vt-c-text-dark-1: var(--vt-c-white);--vt-c-text-dark-2: rgba(235, 235, 235, .64)}:root{--color-background: var(--vt-c-white);--color-background-soft: var(--vt-c-white-soft);--color-background-mute: var(--vt-c-white-mute);--color-border: var(--vt-c-divider-light-2);--color-border-hover: var(--vt-c-divider-light-1);--color-heading: var(--vt-c-text-light-1);--color-text: var(--vt-c-text-light-1);--color-link: var(--vt-c-text-light-2);--section-gap: 160px}@media (prefers-color-scheme: dark){:root{--color-background: var(--vt-c-black);--color-background-soft: var(--vt-c-black-soft);--color-background-mute: var(--vt-c-black-mute);--color-border: var(--vt-c-divider-dark-2);--color-border-hover: var(--vt-c-divider-dark-1);--color-heading: var(--vt-c-text-dark-1);--color-text: var(--vt-c-text-dark-1);--color-link: var(--vt-c-text-dark-1)}}*,*:before,*:after{box-sizing:border-box;margin:0;font-weight:400}body{min-height:100vh;color:var(--color-text);background:var(--color-background-soft);transition:color .5s,background-color .5s;line-height:1.6;font-family:"IBM Plex Serif",serif;font-weight:300;font-style:normal;font-size:15px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{max-width:600px;margin:0 auto;padding:8px;font-weight:400;font-size:var(--font-size);background:var(--color-background);min-height:100vh;display:flex;width:100%;box-sizing:border-box}p{margin:.2em auto;padding:1em;width:100%;font-size:var(--font-size);text-align:left;text-decoration:none;color:var(--color-link)}button,.button{border:1px solid var(--color-border);border-radius:1em;background-color:var(--color-background-mute);color:var(--color-link);display:block;margin:.2em auto;padding:1em;width:50%;font-size:var(--font-size);text-align:center;text-decoration:none}button:active,button:focus,.button:active,.button:focus{border:2px solid #42b983}.word{font-weight:700}main{display:flex;flex-direction:column;align-items:center;margin:0 auto}#scoreBoard{display:flex;justify-content:space-between;width:100%;box-sizing:border-box}.metric{width:50%;box-sizing:border-box;text-align:center;border:1px solid var(--color-border);margin:1em;padding:2em;border-radius:2em}.metric .sbLabel,.metric .sbExtra{font-weight:400;font-size:1.2em}.metric .sbValue{font-weight:700;font-size:5em}#theWord{font-family:"IBM Plex Serif",serif;font-size:2em}#answers{display:flex;font-family:"IBM Plex Serif",serif;flex-direction:column;vertical-align:bottom}#answers button{width:96%;font-size:1.2em;padding:8px;margin:.5em;border:1px solid var(--color-border);border-radius:1em;text-align:left;box-sizing:border-box}#answers span.number{box-sizing:border-box;display:inline-block;font-size:1.5em;padding:.5em}#answers span.meaning{width:70%;display:inline-block;box-sizing:border-box}button.correct{animation:correctAnimation .4s forwards}button.wrong{animation:wrongAnimation .4s forwards}@keyframes correctAnimation{0%{background-color:var(--color-background-mute);transform:scale(1)}95%{background-color:#0a8754;transform:scale(.95)}to{background-color:var(--color-background-mute);transform:scale(1)}}@keyframes wrongAnimation{0%{background-color:var(--color-background-mute);transform:scale(1)}95%{background-color:#e15554;transform:scale(.95)}to{background-color:var(--color-background-mute);transform:scale(1)}}