.board-tools,.board-tools>.tool-group{flex-wrap:wrap}
.board-surface{position:relative;display:grid;grid-template-columns:0 minmax(0,1fr);grid-template-rows:0 auto;width:100%;isolation:isolate}
.board-surface>.board-stage{grid-column:2;grid-row:2;width:100%}
.board-surface.show-coordinates{grid-template-columns:24px minmax(0,1fr);grid-template-rows:24px auto}
.coordinate-x,.coordinate-y,.coordinate-corner{visibility:hidden;background:#f4f5ed;color:#64715c;z-index:12;user-select:none}
.show-coordinates>.coordinate-x,.show-coordinates>.coordinate-y,.show-coordinates>.coordinate-corner{visibility:visible}
.coordinate-x{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(var(--grid-cols,18),minmax(0,1fr));position:sticky;top:0}
.coordinate-y{grid-column:1;grid-row:2;display:grid;grid-template-rows:repeat(var(--grid-rows,7),minmax(0,1fr));position:sticky;left:0;min-width:0;overflow:hidden}
.coordinate-corner{grid-column:1;grid-row:1;position:sticky;left:0;top:0;z-index:13}
.coordinate-tick{display:grid;place-items:center;font:500 11px/1 'Segoe UI',sans-serif;font-variant-numeric:tabular-nums;min-width:0;min-height:0}
.coordinate-tick.is-current{background:#386a4c;color:#fffdf0}
.cell-coordinates{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--grid-cols,18),minmax(0,1fr));grid-template-rows:repeat(var(--grid-rows,7),minmax(0,1fr));pointer-events:none;z-index:10;user-select:none}
.coordinate-cell{position:relative;min-width:0;min-height:0;pointer-events:none}
.cell-coordinate{position:absolute;left:2px;bottom:2px;padding:1px 3px;background:#24372cdb;color:#fffdeb;border-radius:3px;font:500 11px/14px 'Segoe UI',sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.coordinate-cell.is-current .cell-coordinate{background:#fff5ca;color:#304132}
.show-coordinates .cell{scroll-margin-left:24px;scroll-margin-top:24px}