@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Serif+Display&family=Montserrat:wght@600&family=Lora:wght@700&family=Oswald:wght@500&family=Be+Vietnam+Pro:wght@700&family=Fraunces:wght@700&family=Bodoni+Moda:wght@700&family=Roboto:wght@500&family=Pacifico&family=Bebas+Neue&family=Merriweather:wght@700&family=Poppins:wght@600&family=Space+Grotesk:wght@600&family=Cormorant+Garamond:wght@700&family=Anton&display=swap");
/* kerning-game.blade.php: Tailwind step 2. Utilities live in the markup; built by work/tw/build-tools.sh (content: kerning-game.classes). */

/*! tw-utilities */

:where(.cmt) .tw-pointer-events-none {
  pointer-events: none
}

:where(.cmt) .tw-absolute {
  position: absolute
}

:where(.cmt) .tw-left-\[4\%\] {
  left: 4%
}

:where(.cmt) .tw-right-\[4\%\] {
  right: 4%
}

:where(.cmt) .tw-top-\[50\%\] {
  top: 50%
}

:where(.cmt) .tw-mt-\[16px\] {
  margin-top: 16px
}

:where(.cmt) .tw-h-\[52px\] {
  height: 52px
}

:where(.cmt) .tw-min-h-\[24px\] {
  min-height: 24px
}

:where(.cmt) .tw-whitespace-pre {
  white-space: pre
}

:where(.cmt) .tw-rounded-\[var\(--r-md\,_14px\)\] {
  border-radius: var(--r-md, 14px)
}

:where(.cmt) .tw-p-\[0\] {
  padding: 0
}

:where(.cmt) .tw-p-\[0_14px\] {
  padding: 0 14px
}

:where(.cmt) .tw-text-\[15px\] {
  font-size: 15px
}

:where(.cmt) .tw-font-medium {
  font-weight: 500
}

:where(.cmt) .tw-leading-\[1\] {
  line-height: 1
}

:where(.cmt) .tw-opacity-\[0\] {
  opacity: 0
}

:where(.cmt) .tw-css-border-\[0\] {
  border: 0
}

:where(.cmt) .tw-css-background-\[var\(--inset\,_\#F5F5F7\)\] {
  background: var(--inset, #F5F5F7)
}

:where(.cmt) .tw-css-transition-\[background-color_\.15s\] {
  transition: background-color .15s
}

:where(.cmt) .tw-css-transition-\[color_\.15s\] {
  transition: color .15s
}

:where(.cmt) .tw-css-transition-\[opacity_\.3s\] {
  transition: opacity .3s
}

:where(.cmt) .tw-css-border-top-\[1px_solid_var\(--hairline\,_rgba\(0\,_0\,_0\,_\.08\)\)\] {
  border-top: 1px solid var(--hairline, rgba(0, 0, 0, .08))
}

:where(.cmt) .tw-css--webkit-text-stroke-\[1\.5px_var\(--cm-success\,_\#17B26A\)\] {
  -webkit-text-stroke: 1.5px var(--cm-success, #17B26A)
}

:where(.cmt) .tw-css-color-\[transparent\] {
  color: transparent
}

:where(.cmt) .tw-css-color-\[var\(--ink\,_\#1D1D1F\)\] {
  color: var(--ink, #1D1D1F)
}

:where(.cmt) .tw-css-color-\[var\(--ink-2\,_\#6E6E73\)\] {
  color: var(--ink-2, #6E6E73)
}

:where(.cmt) .tw-css-cursor-\[ew-resize\] {
  cursor: ew-resize
}

:where(.cmt) .tw-css-font-kerning-\[none\] {
  font-kerning: none
}

:where(.cmt) .tw-css-touch-action-\[none\] {
  touch-action: none
}

:where(.cmt) .tw-css-transform-\[translateY\(-58\%\)\] {
  transform: translateY(-58%)
}

:where(.cmt) .tw-css-user-select-\[none\] {
  user-select: none
}

@media (prefers-reduced-motion: reduce) {
  :where(.cmt) .mq1-motion-reduce\:tw-css-transition-\[none\] {
    transition: none
  }
}

:where(.cmt) #kg-kern[hidden] ~ .\[\#kg-kern\[hidden\]_\~_\&_\:is\(\#kg-check\2c \#kg-next\)\]\:\!tw-hidden :is(#kg-check,#kg-next) {
  display: none !important
}

:where(.cmt) #kg-quiz[hidden] ~ .\[\#kg-quiz\[hidden\]_\~_\&_\#kq-next\]\:\!tw-hidden #kq-next {
  display: none !important
}

:where(.cmt) #kg-result[hidden] ~ .\[\#kg-result\[hidden\]_\~_\&_\#kg-again\]\:\!tw-hidden #kg-again {
  display: none !important
}

:where(.cmt) .\[\&\.bad\]\:tw-css-color-\[var\(--cm-danger\2c _\#D92D20\)\].bad {
  color: var(--cm-danger, #D92D20)
}

:where(.cmt) .\[\&\.good\]\:tw-css-color-\[var\(--cm-success\2c _\#17B26A\)\].good {
  color: var(--cm-success, #17B26A)
}

:where(.cmt) .\[\&\.is-bad\]\:tw-css-background-\[var\(--cm-danger-bg\2c _\#FEF3F2\)\].is-bad {
  background: var(--cm-danger-bg, #FEF3F2)
}

:where(.cmt) .\[\&\.is-bad\]\:tw-css-color-\[var\(--cm-danger\2c _\#D92D20\)\].is-bad {
  color: var(--cm-danger, #D92D20)
}

:where(.cmt) .\[\&\.is-drag\]\:tw-css-color-\[var\(--cm-link\2c _\#0071E3\)\].is-drag {
  color: var(--cm-link, #0071E3)
}

:where(.cmt) .\[\&\.is-fixed\]\:tw-cursor-default.is-fixed {
  cursor: default
}

:where(.cmt) .\[\&\.is-fixed\]\:tw-css-color-\[var\(--ink-3\2c _\#A1A1A6\)\].is-fixed {
  color: var(--ink-3, #A1A1A6)
}

:where(.cmt) .\[\&\.is-ok\]\:tw-css-background-\[var\(--cm-success-bg\2c _\#ECFDF3\)\].is-ok {
  background: var(--cm-success-bg, #ECFDF3)
}

:where(.cmt) .\[\&\.is-ok\]\:tw-css-color-\[var\(--cm-success\2c _\#17B26A\)\].is-ok {
  color: var(--cm-success, #17B26A)
}

:where(.cmt) .\[\&\.mid\]\:tw-css-color-\[var\(--cm-warning\2c _\#DC6803\)\].mid {
  color: var(--cm-warning, #DC6803)
}

:where(.cmt) .\[\&\:disabled\]\:tw-cursor-default:disabled {
  cursor: default
}

:where(.cmt) .\[\&\:focus-visible\]\:tw-rounded-\[4px\]:focus-visible {
  border-radius: 4px
}

:where(.cmt) .\[\&\:focus-visible\]\:tw-css-outline-\[1\.5px_solid_var\(--ink\2c _\#1D1D1F\)\]:focus-visible {
  outline: 1.5px solid var(--ink, #1D1D1F)
}

:where(.cmt) .\[\&\:focus-visible\]\:tw-css-outline-offset-\[2px\]:focus-visible {
  outline-offset: 2px
}

:where(.cmt) .\[\&\:hover\:not\(\:disabled\)\]\:tw-css-background-\[var\(--hairline\2c _rgba\(0\2c _0\2c _0\2c _\.08\)\)\]:hover:not(:disabled) {
  background: var(--hairline, rgba(0, 0, 0, .08))
}

:where(.cmt) .\[\&_button\.active\]\:tw-css-background-\[var\(--surface\2c _\#fff\)\] button.active {
  background: var(--surface, #fff)
}

:where(.cmt) .\[\&_button\.active\]\:tw-css-box-shadow-\[0_1px_2px_rgba\(17\2c _19\2c _21\2c _\.1\)\] button.active {
  box-shadow: 0 1px 2px rgba(17, 19, 21, .1)
}

:where(.cmt) .\[\&_button\.active\]\:tw-css-color-\[var\(--ink\2c _\#1D1D1F\)\] button.active {
  color: var(--ink, #1D1D1F)
}

:where(.cmt) .kg-stage.is-solved .\[\.kg-stage\.is-solved_\&\]\:tw-opacity-\[1\] {
  opacity: 1
}