.bar { width: calc(var(--count) * var(--unit)) }

.button { background: #eeeeee }
.button:hover { background: color-mix(in oklab, #eeeeee, black 5%) }

.mode { background: #eeeeee }
.mode:hover { background: color-mix(in oklab, #eeeeee, black 5%) }

.question { background: #eeeeee }
.question:hover { background: color-mix(in oklab, #eeeeee, black 5%) }

.score { background: #eeeeee }
.score:hover { background: color-mix(in oklab, #eeeeee, black 5%) }

.align-items-center { align-items: center }
.background-eeeeee { background: #eeeeee }
.background-d4edda { background: #d4edda }
.background-f8d7da { background: #f8d7da }
.background-white { background: #ffffff }
.border-left-1px-solid-black { border-left: 1px solid black }
.color-green { color: green }
.color-eeeeee { color: #eeeeee }
.color-d4edda { color: #d4edda }
.color-f8d7da { color: #f8d7da }
.color-red { color: red }
.color-transparent { color: transparent }
.cursor-pointer { cursor: pointer }
.border-bottom-2px-solid-eee { border-bottom: 2px solid #eee }
.max-width-70ch { max-width: 70ch }
.border-1px-solid-black { border: 1px solid black }
.flex-wrap-wrap { flex-wrap: wrap }
.column-gap-0p5rem { column-gap: 0.5rem }
.row-gap-0p25rem { row-gap: 0.25rem }
.border-bottom-2px-solid-transparent { border-bottom: 2px solid transparent }
.border-bottom-2px-solid-007acc { border-bottom: 2px solid #007acc }
.display-flex { display: flex }
.display-none { display: none }
.flex-basis-10pct { flex-basis: 10% }
.flex-direction-column { flex-direction: column }
.height-1rem { height: 1rem }
.flex-shrink-0 { flex-shrink: 0 }
.flex-grow-1 { flex-grow: 1 }
.font-size-0p8rem { font-size: 0.8rem }
.font-size-0p5rem { font-size: 0.1rem }
.font-weight-600 { font-weight: 600 }
.font-style-italic { font-style: italic }
.gap-0p25rem { gap: 0.25rem }
.gap-0p5rem { gap: 0.5rem }
.gap-1rem { gap: 1rem }
.gap-2rem { gap: 2rem }
.height-100pct { height: 100% }
.justify-content-center { justify-content: center }
.margin-0-auto { margin: 0 auto }
.margin-bottom-auto { margin-bottom: auto }
.margin-left-auto { margin-left: auto }
.margin-top-auto { margin-top: auto }
.padding-0p25rem { padding: 0.25rem }
.padding-0p5rem { padding: 0.5rem }
.padding-1rem { padding: 1rem }
.padding-2rem { padding: 2rem }
.padding-left-0p5rem { padding-left: 0.5rem }
.text-align-center { text-align: center }
.width-100pct { width: 100% }
.user-select-none { user-select: none }
.visibility-hidden { visibility: hidden }
.width-4ch { width: 4ch }
.width-6ch { width: 6ch }

.roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}