:root,[data-theme=light]{--color-bg:#fbfaf7;--color-surface:#fff;--color-text:#1f2328;--color-muted:#59636e;--color-border:#d0d7de;--color-accent:#2f6fdb;--color-on-accent:#fff;--color-correct:#1a7f37;--color-correct-bg:#e6f4ea;--color-incorrect:#9a6700;--color-incorrect-bg:#fff4d6;--color-star:#d4a72c;--color-tens:#f6c177;--color-units:#a8cbf5;--font-body:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--radius:12px;--tap:48px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--color-bg:#15171a;--color-surface:#1f2328;--color-text:#e6e8eb;--color-muted:#9aa4af;--color-border:#3b424a;--color-accent:#7aa7f0;--color-on-accent:#0f1419;--color-correct:#5bd07a;--color-correct-bg:#14301d;--color-incorrect:#e0b84a;--color-incorrect-bg:#33290d;--color-star:#e3b93c;--color-tens:#8a5a1f;--color-units:#2d5a94;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}button{-webkit-user-select:none;user-select:none}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);margin:0;font-size:1.125rem;line-height:1.4}.task{--prompt-size:clamp(1.375rem, .75rem + 3vw, 2.25rem);border:2px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);height:100%;padding:.75rem 1rem}.task-body{border:0;flex-direction:column;align-items:flex-start;gap:.5rem;margin:0;padding:0;display:flex}.prompt{font-size:var(--prompt-size);font-variant-numeric:tabular-nums;margin:0;line-height:1.3}.nowrap{white-space:nowrap}.prompt .answer,.prompt .choices,.prompt button,.verdict{vertical-align:middle;margin-block:.125rem}.place-value{--cell:.75rem;--line:2px;flex-wrap:wrap;align-items:flex-end;gap:.5rem 1.25rem;display:flex}.rods,.cubes{align-items:flex-end;gap:.375rem;display:flex}.rod,.cube-column{flex-direction:column;display:flex}.rod>span,.cube{width:calc(var(--cell) + 2 * var(--line));height:calc(var(--cell) + 2 * var(--line));border:var(--line) solid currentColor}.rod>span{background:var(--color-tens)}.rod>span+span{margin-top:calc(-1 * var(--line))}.cube{background:var(--color-units)}.cube-column{gap:.25rem}.number-line{--line:2px;--axis:2.25rem;--mark:.4rem;--arrow:.45rem;grid-auto-columns:minmax(0,3.5rem);grid-auto-flow:column;width:fit-content;max-width:100%;display:grid}.tick,.number-line-break{min-height:calc(var(--axis) + var(--mark));position:relative}.tick:before,.number-line-break:before{inset-inline:0;top:calc(var(--axis) - var(--line) / 2);border-top:var(--line) solid currentColor;content:"";position:absolute}.tick:after{left:calc(50% - var(--line) / 2);top:calc(var(--axis) - var(--mark));height:calc(2 * var(--mark));border-left:var(--line) solid currentColor;content:"";position:absolute}.number-line-break:before{border-top-style:dotted}.tick-label{-webkit-user-select:none;user-select:none;padding-top:calc(var(--axis) + var(--mark) + .125rem);text-align:center;white-space:nowrap;font-size:1.375rem;font-weight:600;line-height:1.2;display:block}.hop{left:50%;top:calc(var(--axis) - var(--mark) - var(--arrow) - 1rem);border:var(--line) solid var(--color-accent);border-bottom:0;border-radius:50% 50% 0 0/100% 100% 0 0;width:100%;height:1rem;position:absolute}.hop-back{left:auto;right:50%}.hop:after{right:calc(-.3rem - var(--line) / 2);border-top:var(--arrow) solid var(--color-accent);content:"";border-inline:.3rem solid #0000;position:absolute;top:100%}.hop-back:after{right:auto;left:calc(-.3rem - var(--line) / 2)}.answer{width:calc(3ch + 1rem + 4px);min-height:max(var(--tap), 1.6em);border:2px solid var(--color-border);border-radius:calc(var(--radius) / 1.5);background:var(--color-surface);color:inherit;font:inherit;text-align:center;padding:.25rem .5rem}.blank,.tick-blank{color:color-mix(in srgb, var(--color-muted) 50%, transparent)}.blank{display:inline-block}.answer:focus-visible,.task button:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}.task button{min-height:max(var(--tap), 1.6 * var(--prompt-size));border:2px solid var(--color-accent);border-radius:calc(var(--radius) / 1.5);color:var(--color-accent);font:inherit;cursor:pointer;background:0 0;padding:0 clamp(1rem,4vw,1.5rem);font-size:1.25rem;font-weight:600}.outcome{vertical-align:middle;display:inline-grid}.outcome>*{grid-area:1/1}.outcome button:disabled{visibility:hidden}.verdict{-webkit-user-select:none;user-select:none;font-size:1.25rem;font-weight:600}.verdict:empty{display:none}.task[data-result=correct]{border-color:var(--color-correct);background:var(--color-correct-bg)}.task[data-result=correct] .verdict{color:var(--color-correct)}.task[data-result=incorrect]{border-color:var(--color-incorrect);background:var(--color-incorrect-bg)}.task[data-result=incorrect] .verdict{color:var(--color-incorrect)}.task:disabled .answer,.task-body:disabled .answer{opacity:1;background:0 0}.choices{flex-wrap:wrap;gap:.75rem;display:inline-flex}.choice{min-width:2.75em;min-height:max(var(--tap), 2.25em);font-variant-numeric:tabular-nums;border:2px solid var(--color-border);border-radius:calc(var(--radius) / 1.5);background:var(--color-surface);justify-content:center;align-items:center;padding:0 .6em;font-size:.9em;font-weight:600;display:flex;position:relative}.choice input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.choice:has(input:checked){border-color:var(--color-accent);background:var(--color-accent);color:var(--color-on-accent)}.choice:has(input:focus-visible){outline:3px solid var(--color-accent);outline-offset:2px}.choice:has(input:checked){border-width:4px}.choice:has(input:checked):before{content:"●";margin-right:.5rem;font-size:.75em}.task[data-result=correct] .choice:has(input:checked){border-color:var(--color-correct);background:var(--color-correct)}.task[data-result=correct] .choice:has(input:checked):before{content:"✓";font-size:1em}.task[data-result=incorrect] .choice:has(input:checked){border-color:var(--color-incorrect);background:var(--color-incorrect);border-style:dashed}.task[data-result=incorrect] .choice:has(input:checked):before{content:"✕";font-size:1em}@media (width<=30rem){.number-line{max-width:calc(100% + 1.5rem);margin-inline:-.75rem}.tick-label{font-size:1.125rem}}