:root {
  --ink: #1f2328; --muted: #6b7280; --bg: #fbfaf7; --key: #ffffff; --rule: #d6d3cc;
  --focus: #2f6fdf; --right: #2e8b57; --wrong: #c0392b; --answer-bg: #e7f1fb;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #ececec; --muted: #9ca3af; --bg: #16181d; --key: #23262d; --rule: #3a3f48;
          --focus: #6ea0ff; --right: #5cc28a; --wrong: #ff7b6e; --answer-bg: #1e2f45; }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 20px/1.3 system-ui, sans-serif;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.screen { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 16px; }
.screen[hidden] { display: none; }
h1 { font-weight: 600; margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
.big { font-size: 32px; padding: 20px 64px; border-radius: 16px; border: 2px solid var(--rule); background: var(--key); }

#drill { justify-content: flex-start; padding-top: 0; }
#progress { width: 100%; height: 4px; background: var(--rule); }
#bar { height: 100%; width: 0; background: var(--muted); transition: width 1s linear; }

#prompt { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 200px; transition: color .2s; }
#prompt.right { color: var(--right); }
.tokens { display: flex; align-items: center; gap: 28px; font-size: 56px; font-variant-numeric: tabular-nums; }
.op { font-size: 48px; }
.frac { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.frac .bar { width: 100%; min-width: 72px; height: 4px; background: currentColor; border-radius: 2px; }
.num { min-width: 1.2em; text-align: center; }
.box {
  min-width: 2.2em; min-height: 1.2em; padding: 0 8px; text-align: center;
  border: 3px solid var(--rule); border-radius: 10px; background: var(--key);
}
.box.focus { border-color: var(--focus); }
.answer { color: var(--wrong); background: var(--answer-bg); border-radius: 8px; padding: 0 8px; }

#message { min-height: 1.5em; font-size: 22px; }
#message.nudge { color: var(--focus); }
#message.wrong { color: var(--muted); }

#pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: min(420px, 100%); margin-bottom: 24px; }
#pad button {
  font-size: 32px; height: 76px; border-radius: 14px; border: 2px solid var(--rule); background: var(--key);
}
#pad button:active { transform: scale(.97); }
#pad .ok { font-weight: 600; border-color: var(--focus); }

@media (orientation: landscape) and (max-height: 820px) {
  #drill { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; }
  #progress { flex-basis: 100%; }
  #prompt { flex: 1 1 50%; }
  #message { order: 3; flex-basis: 100%; text-align: center; }
  #pad { width: min(360px, 40%); margin-bottom: 0; }
  #pad button { height: 64px; }
}