:root {
  --bg: #0f1013;
  --card: #1a1c21;
  --line: #2b2e36;
  --text: #e8e9ec;
  --dim: #9097a3;
  --accent: #f5c542;
  --wrong: #ff7a6b;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
.lesson { max-width: 960px; margin: 0 auto; padding: 0 0 16px; }
.stage { position: relative; aspect-ratio: 16 / 9; background: #000; touch-action: none; }
.stage canvas { display: block; width: 100%; height: 100%; }
.stage.dragging { cursor: crosshair; }
.status { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; color: var(--dim); }
.status[hidden] { display: none; }
.handle {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 25%, transparent); pointer-events: none;
}
.handle:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.controls { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.controls button { width: 40px; height: 40px; border-radius: 20px; border: none; cursor: pointer; font-size: 18px; flex: none; }
.play { background: var(--accent); color: #111; }
.play[data-state="paused"]::before { content: "▶"; }
.play[data-state="playing"]::before { content: "❚❚"; font-size: 14px; }
.restart { background: var(--card); color: var(--text); }
.scrub {
  flex: 1; min-width: 0; accent-color: var(--accent);
  background: linear-gradient(to right, color-mix(in srgb, var(--accent) 35%, transparent) var(--reached, 0%), transparent 0);
  border-radius: 4px;
}
.time { color: var(--dim); font-variant-numeric: tabular-nums; font-size: 14px; flex: none; }
.question {
  margin: 4px 12px 0; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.question[hidden] { display: none; }
.prompt { margin: 0; font-size: 18px; font-weight: 600; }
.options { display: flex; flex-wrap: wrap; gap: 8px; }
.question button { font: inherit; cursor: pointer; border-radius: 8px; min-height: 44px; padding: 8px 18px; }
.option { background: transparent; color: var(--text); border: 1px solid var(--line); }
.option:hover, .option:focus-visible { border-color: var(--accent); }
.check { align-self: flex-start; background: var(--accent); color: #111; border: none; font-weight: 650; }
.slider { display: flex; align-items: center; gap: 10px; }
.slider output { min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
.question .nudge { flex: none; width: 44px; padding: 0; font-size: 22px; line-height: 1; background: transparent; color: var(--text); border: 1px solid var(--line); }
/* A thick track and a large thumb: easy to grab with a finger. */
.slider input[type="range"] { flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; }
.slider input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--line); }
.slider input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: var(--line); }
.slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--accent); border: none; }
.slider input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); border: none; }
.question input[type="number"], .question input[type="text"] {
  font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-height: 44px; max-width: 12em;
}
.point { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--dim); }
.point input { width: 6em; }
.feedback { margin: 0; color: var(--wrong); min-height: 1.4em; }
.feedback:empty { display: none; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) {
  .prompt { font-size: 16px; }
  .question { margin: 4px 8px 0; }
}