.marked-board{display:grid;grid-template-columns:28px minmax(0,1fr) 28px;grid-template-rows:28px auto 28px;gap:4px}
.marked-board .board-frame{grid-column:2;grid-row:2;min-width:0}
.mark-axis{display:grid;gap:0}
.mark-columns{grid-column:2;grid-row:1;grid-template-columns:repeat(9,minmax(0,1fr));padding:0 3px}
.mark-columns-bottom{grid-row:3}.mark-rows{grid-column:1;grid-row:2;grid-template-rows:repeat(9,minmax(0,1fr));padding:3px 0}.mark-rows-right{grid-column:3}
.mark-axis button{font-family:NineThai,sans-serif;min-width:0;padding:0;font-size:11px;font-weight:400;color:color-mix(in srgb,var(--muted) 65%,var(--bg));border:1px solid transparent}
.mark-axis button:hover{border-color:var(--box);color:var(--ink)}
.mark-axis button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mark-rows button[aria-pressed=true]{background:#f5d68d66;border-color:#b4873066;color:var(--muted);font-weight:500}
.mark-columns button[aria-pressed=true]{background:#c0dcef66;border-color:#5286a866;color:var(--muted);font-weight:500}
.board:not(.showing-hint) .cell.mark-row{background-color:#fff3d9}.board:not(.showing-hint) .cell.mark-column{background-color:#e9f4fb}.board:not(.showing-hint) .cell.mark-row.mark-column{background-color:#f2ebfb}
.mark-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:10px 0 0 32px;font-size:11px;color:var(--muted)}
.tools{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.tools .tool{min-width:0;font-size:11px}
.tools .tool-icon small{right:-10px}
.tools #clear-board-marks:disabled{opacity:.45;cursor:default}
@media(max-width:650px){.tools .tool{flex:1;min-width:0}}
.is-hinting .mark-axis button{opacity:.5}
@media(max-width:650px){.marked-board{grid-template-columns:26px minmax(0,1fr) 26px;grid-template-rows:28px auto 28px;gap:3px}.mark-toolbar{margin-left:29px}.mark-columns{padding:0 2px}.mark-rows{padding:2px 0}}