:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { max-width: 600px; margin: 1em auto; padding: 0 1em; font-family: sans-serif; }
.question-page { padding-bottom: 6em; }
header, header nav { display: flex; gap: .7em; align-items: baseline; flex-wrap: wrap; }
header { justify-content: space-between; margin-bottom: 1em; }
header form { margin: 0; }
header button { border: 0; background: none; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; }
h1 { font-size: 1.25em; }
h2 { font-size: 1em; margin: 1em 0 .25em; }
p { margin: 0 0 .5em; }
.question { margin: 1em 0; }
img { max-width: 100%; height: auto; }
pre { overflow: auto; white-space: pre-wrap; }
button, input { font: inherit; }
.choice { display: block; width: 100%; padding: .8em; margin-bottom: .5em; text-align: left; border: 1px solid light-dark(#ddd, #555); border-radius: 4px; background: light-dark(#fff, #232629); color: inherit; cursor: pointer; }
.choice:disabled { cursor: default; opacity: 1; }
.choice.selected { border: 2px solid #07f; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)); margin: .4em 0 1em; }
.grid a { position: relative; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 10px; border: 1px solid light-dark(#eee, #444); text-decoration: none; color: inherit; transition: background .3s; }
.correct { background: light-dark(#ded, #213d29); }
.wrong { background: light-dark(#fdd, #4d2626); }
.grid .reviewed { background: light-dark(hsl(var(--hue) 80% 85%), hsl(var(--hue) 80% 20%)); }
.grid a:hover { border-color: currentColor; }
.grid .current { border: 2px solid currentColor; font-weight: bold; }
.locked { opacity: .55; }
.lock { position: absolute; right: 1px; bottom: 1px; width: 8px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.navigation { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; max-width: 600px; margin: 0 auto; padding: .5em; background: light-dark(#f8f9fa, #202326); border-top: 1px solid light-dark(#ddd, #555); z-index: 9; }
.navigation a, .navigation span { padding: .5em .7em; border-radius: 4px; background: light-dark(#e9ecef, #30353a); color: light-dark(#495057, #ddd); text-decoration: none; font-weight: bold; }
.navigation [aria-disabled] { opacity: .5; }
.errorlist { color: light-dark(#b02525, #f49494); }