/* Column sums on screen: squares like a maths notebook. */
.cs-stage { display: grid; gap: .625rem; justify-items: center; }
.cs-q { margin: 0; font: 600 1.25rem/1.2 var(--f-m); color: var(--ink2); }
.cs-grid { border-collapse: collapse; --sq: clamp(2.5rem, 11vw, 3.75rem); }
.cs-grid td { width: var(--sq); height: var(--sq); padding: 0; text-align: center; vertical-align: middle; font: 600 calc(var(--sq) * .62)/1 var(--f-m); border: 1px dashed var(--grid-strong, #C9D3E6); position: relative; }
.cs-grid td.k-e { border-color: transparent; }
.cs-grid td.k-o { border-color: transparent; font-weight: 700; }
.cs-grid td.k-a { background: #fff; border: 1.5px solid var(--edge); }
.cs-grid td.k-a.cur { background: #FFF6D8; border: 2.5px solid var(--ink); }
.cs-grid td.k-a.wrong { color: var(--ink2); }
.cs-grid td.k-a.done { color: var(--ink); }
.cs-grid tr.marks td { height: calc(var(--sq) * .5); font-size: calc(var(--sq) * .34); color: var(--sky); border-color: transparent; vertical-align: bottom; }
.cs-grid tr.marks td.shown { color: #2E6FD8; font-weight: 700; }
.cs-grid tr.rule td { border-top: .1875rem solid var(--ink); }
.cs-grid td.rl { border-top: .1875rem solid var(--ink); }
.cs-grid.div td.k-d { border-color: transparent; border-right: .1875rem solid var(--ink); border-radius: 0 0 40% 0; color: transparent; }
.cs-hint { margin: 0; text-align: center; }
@media (max-height: 700px) { .cs-grid { --sq: clamp(34px, 9vw, 48px); } }