:root{--cell: clamp(22px, calc((100vw - 32px - 4px) / 12), 34px)}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f6f6f6;color:#111}.app{max-width:720px;margin:0 auto;padding:16px}.btn{padding:8px 10px;border:1px solid #bbb;background:#fff;border-radius:6px;cursor:pointer}.btn:active{transform:translateY(1px)}.grid{display:grid;gap:0;border:2px solid #111;width:fit-content;margin-bottom:12px}.cell{width:var(--cell);height:var(--cell);border:1px solid #111;border-radius:0}.cellBlack{background:#111}.cellWhite{appearance:none;-webkit-appearance:none;background:#fff;text-align:center;font-size:calc(var(--cell) * .55);font-weight:700;text-transform:uppercase;outline:none;border-radius:0}.cellSelected{background:#e7f1ff;box-shadow:inset 0 0 0 2px #2b6cff59}.cellActive{box-shadow:inset 0 0 0 2px #2b6cff}.cellWhite:focus{box-shadow:inset 0 0 0 2px #2b6cff}