.board{--rows:5;--cols:5;width:min(100%,520px);aspect-ratio:var(--cols) / var(--rows);border:2px solid var(--line-strong);background:var(--panel);touch-action:none;-webkit-user-select:none;user-select:none;cursor:crosshair;border-radius:4px;margin:0 auto;position:relative;container-type:inline-size}.lines,.cells{grid-template-columns:repeat(var(--cols), 1fr);grid-template-rows:repeat(var(--rows), 1fr);pointer-events:none;display:grid;position:absolute;inset:0}.lines{z-index:0}.cells{z-index:2}.lines>div{border-right:1px solid var(--border);border-bottom:1px solid var(--border)}.lines>div.last-col{border-right:0}.lines>div.last-row{border-bottom:0}.cells>div{font-size:calc(100cqw / var(--cols) * .46);justify-content:center;align-items:center;font-weight:700;line-height:1;display:flex}.rects{z-index:1;pointer-events:none;position:absolute;inset:0}.rect{border:2px solid var(--ok);background:var(--ok-soft);border-radius:4px;margin:2px;position:absolute}.rect.bad{border-color:var(--error);background:var(--error-soft)}.rect.preview{border:2px dashed var(--accent);background:color-mix(in srgb, var(--accent-soft) 70%, transparent);z-index:3;color:var(--accent);justify-content:flex-end;align-items:flex-end;padding:2px 5px;font-size:12px;font-weight:600;display:flex}.board.solved{border-color:var(--ok)}.board.solved .rect{border-style:solid}.board.solved .cells>div{color:var(--ok)}