.sd{width:100%;max-width:500px;display:flex;flex-direction:column;gap:12px;align-items:center}
.sd-grid{display:grid;grid-template-columns:repeat(9,1fr);width:100%;aspect-ratio:1;border:3px solid #2b2a28;border-radius:8px;overflow:hidden;background:#fff;user-select:none;-webkit-user-select:none}
.sd-cell{display:flex;align-items:center;justify-content:center;border-right:1px solid #d8d0c2;border-bottom:1px solid #d8d0c2;font-size:clamp(18px,5.4vw,28px);font-weight:600;cursor:pointer;color:#2f6fd0;min-width:0;min-height:0}
.sd-cell:nth-child(9n){border-right:0}
.sd-cell:nth-child(n+73){border-bottom:0}
.sd-cell.br{border-right:2px solid #2b2a28}
.sd-cell.bb{border-bottom:2px solid #2b2a28}
.sd-cell.given{color:#2b2a28;font-weight:800}
.sd-cell.hinted{color:#2a8a3a}
.sd-cell.peer{background:#f2ede3}
.sd-cell.same{background:#d9e8f8}
.sd-cell.wrong{color:#d63a30;background:#fde8e6}
.sd-cell.sel{background:#bcd7f2}
.sd-notes{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;height:100%;padding:1px}
.sd-notes span{font-size:clamp(8px,2vw,11px);color:#777;display:flex;align-items:center;justify-content:center;font-weight:600;line-height:1}
.sd-pad{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;width:100%}
.sd-num{font-size:22px;font-weight:800;padding:8px 0 4px;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.sd-num small{font-size:10px;color:var(--muted);font-weight:600}
.sd-num.done{opacity:.35}
.sd-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%}
.sd-tools button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
@media(max-width:480px){.sd-num{font-size:18px;padding:6px 0 3px}.sd-pad{gap:3px}.sd-tools button{font-size:13px;padding:8px 4px}}